/* ============================================================
   Salty Karts · closing CTA, built from the supplied comp
   (Drive 1Bzir…, 1981x793). Scoped .cb. Loaded only by the home
   page, so nothing here can reach the shared stylesheet.

   Every measurement, and the reasoning behind the photograph's
   clip, the sweep image, the drawn keyline, the sand wash and the
   frond, is documented in /cta-comp2/cta.css, which this is a
   copy of, from the band rule down. The one addition is
   .cb--closing, which sets the band's place in the page flow.
   ============================================================ */

/* ── the band ───────────────────────────────────────────── */
.cb{
  /* The band's own tokens live here, on .cb, not on a page class: an
     unresolved var() is invalid at computed-value time, and when
     --cb-rule went missing the panel's border shorthand fell back to
     none, which cost the panel its rule and shifted every child inside
     it by a pixel. Keeping them on the section makes it portable. */
  --cb-gold:#8A6B33;
  --cb-rule:rgba(181,137,74,.58);
  position:relative;background:var(--cream);
  padding:clamp(38px,4.3vw,58px) 0 clamp(30px,3.4vw,46px);
}

.cb__panel{
  position:relative;overflow:hidden;isolation:isolate;
  /* The panel sits in the page margin, not 70px outside it: capped at the
     shell so its edges land on 130..1310 at 1440, level with every other
     section's container. Height is left exactly as it was. */
  width:calc(100% - clamp(40px,8vw,88px));max-width:var(--shell);margin:0 auto;
  min-height:clamp(320px,32vw,400px);
  display:flex;align-items:center;
  border-radius:clamp(15px,1.7vw,22px);
  border:1px solid rgba(181,137,74,.72);
  background:var(--cream);
  box-shadow:
    0 1px 2px rgba(40,53,67,.08),
    0 12px 24px -12px rgba(40,53,67,.18),
    0 32px 58px -22px rgba(40,53,67,.3);
}
.cb__panel::after{
  content:"";
  position:absolute;inset:0;z-index:6;
  border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -14px 22px -16px rgba(40,53,67,.18),
    inset 0 0 0 1px rgba(255,248,236,.35);
}

/* The sand wash is the comp's own watercolour, not a gradient. It is taken
   at its measured density wherever it is unobstructed (up the left edge,
   x 94..182, and along the bottom, y 622..728), which keeps the brush
   striations intact; where the buttons, the lead and the picture sit over
   it, the field is carried outward by normalised convolution and allowed
   to decay, so nothing is invented and no seam prints. Tint #D7B991 with
   per-pixel alpha, exact for a multiply layer over cream. The last
   measured row and column are replicated outward so the panel's own
   border, which lies just outside the crop, never prints inside it. */
.cb__wash{
  position:absolute;z-index:0;left:0;bottom:0;width:53.5%;height:50.7%;
  background:url('/assets/img/cta/wash.png') left bottom/100% 100% no-repeat;
  pointer-events:none;
}

/* The picture starts at 41.6% rather than the comp's 40.0%, and the sweep's
   box at 35.7% rather than 34%, both solved rather than nudged. Moving the
   copy onto the page's text margin costs it 39px of run, and the lead needs
   428px for the comp's two lines (measured: 426 breaks to three), so at 40%
   the lead would have crossed the curve by 4px. 41.6% buys the curve 20px:
   clearances are now 27px at the headline, 17px at the lead and 42px at the
   buttons. The sweep's left was solved from the same offset it had before,
   17.7px inside the clip at the curve's leftmost point, so the two still
   track each other to within half a pixel over the whole run. */
/* the photograph: right 60% of the panel, clipped by the traced curve */
.cb__photo{
  /* inset on the right as well as the top and bottom, so the cream reveal
     runs the whole way round and the panel's gold rule reads against cream
     instead of butting the picture. The comp has the photo flush right; this
     4px is a deliberate departure, and it also stops the photo's 16px corner
     poking outside the panel's 22px arc and being cut flat by the overflow. */
  position:absolute;z-index:1;top:4px;right:4px;bottom:5px;left:41.6%;
  border-radius:0 clamp(11px,1.2vw,16px) clamp(11px,1.2vw,16px) 0;
  background:url('/assets/img/cta/cta-photo.webp') right center/cover no-repeat;
  clip-path:polygon(36.78% 0.0%, 36.36% 1.26%, 35.8% 2.51%, 35.61% 3.77%, 34.86% 5.02%, 33.47% 6.28%, 31.72% 7.54%, 29.86% 8.79%, 27.86% 10.05%, 25.79% 11.3%, 23.75% 12.56%, 21.8% 13.81%, 20.03% 15.07%, 18.58% 16.33%, 17.6% 17.58%, 16.75% 18.84%, 15.68% 20.09%, 14.67% 21.35%, 13.76% 22.61%, 13.07% 23.86%, 12.46% 25.12%, 11.92% 26.37%, 11.44% 27.63%, 10.99% 28.89%, 10.59% 30.14%, 10.25% 31.4%, 9.87% 32.65%, 9.5% 33.91%, 9.14% 35.16%, 8.79% 36.42%, 8.45% 37.68%, 8.13% 38.93%, 7.79% 40.19%, 7.44% 41.44%, 7.07% 42.7%, 6.7% 43.96%, 6.31% 45.21%, 5.92% 46.47%, 5.52% 47.72%, 5.1% 48.98%, 4.66% 50.24%, 4.2% 51.49%, 3.72% 52.75%, 3.25% 54.0%, 2.78% 55.26%, 2.36% 56.51%, 2.0% 57.77%, 1.69% 59.03%, 1.44% 60.28%, 1.26% 61.54%, 1.14% 62.79%, 1.07% 64.05%, 1.05% 65.31%, 1.05% 66.56%, 1.07% 67.82%, 1.14% 69.07%, 1.23% 70.33%, 1.38% 71.59%, 1.57% 72.84%, 1.82% 74.1%, 2.11% 75.35%, 2.46% 76.61%, 2.87% 77.86%, 3.34% 79.12%, 3.88% 80.38%, 4.49% 81.63%, 5.18% 82.89%, 5.98% 84.14%, 6.91% 85.4%, 8.0% 86.66%, 9.26% 87.91%, 10.64% 89.17%, 12.15% 90.42%, 13.71% 91.68%, 15.15% 92.94%, 16.47% 94.19%, 17.67% 95.45%, 18.65% 96.7%, 19.32% 97.96%, 19.61% 99.22%, 19.59% 100.0%, 100% 100%, 100% 0%);
}
/* The photograph's straight sides are its own outline, so they are drawn,
   not lifted: a hairline 2px outside the picture on the top, right and
   bottom, which is the gap the comp keeps between its keyline and the photo
   (border y=78, keyline y=82, photo y=84). Radius 18px against the photo's
   16px so the arcs stay concentric. The colour is solved from the comp's own
   keyline pixel (238,220,185): a multiply layer of #C18100 at .236, which
   composites to (236.5,218.5,182.7) over the site's cream. The polygon cuts
   it away along the curve, where the comp's own sweep takes over. */
.cb__key{
  position:absolute;z-index:2;top:2px;right:2px;bottom:3px;left:41.6%;
  border:1px solid rgba(193,129,0,.236);
  border-radius:0 clamp(13px,1.35vw,18px) clamp(13px,1.35vw,18px) 0;
  clip-path:polygon(36.78% 0.0%, 36.36% 1.26%, 35.8% 2.51%, 35.61% 3.77%, 34.86% 5.02%, 33.47% 6.28%, 31.72% 7.54%, 29.86% 8.79%, 27.86% 10.05%, 25.79% 11.3%, 23.75% 12.56%, 21.8% 13.81%, 20.03% 15.07%, 18.58% 16.33%, 17.6% 17.58%, 16.75% 18.84%, 15.68% 20.09%, 14.67% 21.35%, 13.76% 22.61%, 13.07% 23.86%, 12.46% 25.12%, 11.92% 26.37%, 11.44% 27.63%, 10.99% 28.89%, 10.59% 30.14%, 10.25% 31.4%, 9.87% 32.65%, 9.5% 33.91%, 9.14% 35.16%, 8.79% 36.42%, 8.45% 37.68%, 8.13% 38.93%, 7.79% 40.19%, 7.44% 41.44%, 7.07% 42.7%, 6.7% 43.96%, 6.31% 45.21%, 5.92% 46.47%, 5.52% 47.72%, 5.1% 48.98%, 4.66% 50.24%, 4.2% 51.49%, 3.72% 52.75%, 3.25% 54.0%, 2.78% 55.26%, 2.36% 56.51%, 2.0% 57.77%, 1.69% 59.03%, 1.44% 60.28%, 1.26% 61.54%, 1.14% 62.79%, 1.07% 64.05%, 1.05% 65.31%, 1.05% 66.56%, 1.07% 67.82%, 1.14% 69.07%, 1.23% 70.33%, 1.38% 71.59%, 1.57% 72.84%, 1.82% 74.1%, 2.11% 75.35%, 2.46% 76.61%, 2.87% 77.86%, 3.34% 79.12%, 3.88% 80.38%, 4.49% 81.63%, 5.18% 82.89%, 5.98% 84.14%, 6.91% 85.4%, 8.0% 86.66%, 9.26% 87.91%, 10.64% 89.17%, 12.15% 90.42%, 13.71% 91.68%, 15.15% 92.94%, 16.47% 94.19%, 17.67% 95.45%, 18.65% 96.7%, 19.32% 97.96%, 19.61% 99.22%, 19.59% 100.0%, 100% 100%, 100% 0%);
  pointer-events:none;
}

/* The sweep along the curve is the comp's own pixels, not drawn. Measured,
   it is a calligraphic taper: alpha .58 at the top, .02 through the middle
   of the curve, .55 again below it, and it sits anywhere from 2 to 45px
   inside the picture's edge. No stroke does that, so the band between the
   copy and the picture is lifted out of the comp and decomposed into a tint
   plus per-pixel alpha, exact for a multiply layer over cream so no
   rectangle prints, then high-passed at sigma 9 to shed the sand wash that
   lies under its lower half. The box is the panel's inner right, from 34%. */
.cb__line{
  position:absolute;z-index:2;inset:0 4px 0 35.7%;
  background:url('/assets/img/cta/line.png') center/100% 100% no-repeat;
  pointer-events:none;
}

/* ── copy column ────────────────────────────────────────── */
.cb__copy{
  position:relative;z-index:3;
  /* 45%/592px, not 43%/566px: the headline measures 492px and 566 minus the
     73.8px inset leaves exactly 492, which wraps on rounding. */
  width:min(48%,632px);
  /* The copy starts on the page's own text margin, not on a share of the
     panel: the panel is 1320 wide inside a 1180 shell, so its edge sits 70px
     outside the grid every other headline is set to. (100% - shell)/2 gives
     that overhang back, plus the shell's gutter, and max() keeps a floor
     where the panel is narrower than the shell. 113px at 1440, which lands
     the headline on 174 with the rest of the page. */
  /* Left inset solved from the page grid. The vertical pair is not the
     comp's 39/103 any more: with the eyebrow gone the block is shorter than
     the panel, so the panel's own centring places it and that lopsided pair
     pushed the ink high (measured 73.5px of air above the cap, 123px below
     the buttons). Because a centred box cancels symmetric padding, only the
     difference between the two values moves the ink: 13px of it, split, puts
     the ink block itself on the optical centre rather than its line boxes,
     since the first line carries leading above the cap and the last is a
     button's border box. Measured after: 98.8 above, 97.7 below. */
  padding:40px 0 53px
          max(26px, calc((100% - var(--shell))/2 + clamp(20px,4vw,44px)));
}
/* Unused while the band carries no eyebrow; kept so restoring it needs no
   new CSS. */
.cb__eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-family:var(--text);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cb-gold);
}
.cb__eyebrow i{flex:0 0 68px;height:1px;background:var(--cb-rule);}

/* Headline matched to the band above it, .posted-reference h2, against its
   computed style rather than its source: padding-bottom 8px and nowrap (a
   later rule there overrides the 20px in its base rule), the script back to
   inline-block with .08em of left margin and baseline alignment, the swash
   back to the live lens geometry (6%/8%, 2px, -.06em) instead of the comp's
   longer sweep, and the same size ladder, which steps to
   clamp(24px,6.6vw,39px) under 600px. Checked equal at 1440, 1000, 850,
   600, 520 and 390. */
.cb__copy :is(h1,h2){
  margin:0;padding-bottom:8px;white-space:nowrap;
  font-family:var(--disp);font-weight:400;color:var(--navy);
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;
}
.cb__copy :is(h1,h2) > span{display:block;}
.cb__copy :is(h1,h2) .script{
  display:inline-block;width:auto;margin:0 0 0 .08em;vertical-align:baseline;
  position:relative;
  font-family:var(--script);font-size:1.02em;font-weight:400;line-height:.86;
  letter-spacing:0;text-transform:none;color:var(--teal);
}
.cb__copy :is(h1,h2) .script:after{
  content:"";position:absolute;left:6%;right:8%;width:auto;bottom:-.06em;height:2px;
  background:#bd9652;border-radius:50%;transform:rotate(-6deg);
}
@media (max-width:600px){
  .cb__copy :is(h1,h2){font-size:clamp(24px,6.6vw,39px);}
}
/* Size and leading taken from the band above it, .posted-reference__intro,
   measured off its computed style: 17px/1.75 down to 16px under 1200 and
   15px/1.7 under 600. Its colour is --ink; this keeps --ink-soft. */
.cb__lead{
  margin:24px 0 0;max-width:min(100%,430px);
  font-family:var(--text);font-size:17px;line-height:1.75;
  color:var(--ink-soft);
}
@media (max-width:1200px){ .cb__lead{font-size:16px;} }
@media (max-width:600px){ .cb__lead{font-size:15px;line-height:1.7;} }
.cb__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.cb__ctas svg{flex:0 0 auto;}

/* Unused while the band carries no frond; kept so restoring it needs no new
   CSS. The asset stays at /assets/img/cta/frond.png. */
.cb__frond{
  position:absolute;z-index:4;top:0;left:0;pointer-events:none;
  width:clamp(196px,24vw,346px);
}
.cb__frond img{display:block;width:100%;height:auto;}

/* ── narrow ─────────────────────────────────────────────── */
@media (max-width:900px){
  .cb__panel{display:block;min-height:0;}
  .cb__photo,.cb__key,.cb__line{
    position:relative;top:auto;right:auto;bottom:auto;left:auto;
    display:block;width:100%;height:56vw;max-height:340px;
    clip-path:none;border-radius:0;
  }
  .cb__key,.cb__line{display:none;}
  /* stacked, the clip is gone, so the asset's cream left margin would
     show as a wedge; zoom past it and keep the right edge anchored. */
  .cb__photo{
    border-bottom:1px solid var(--cb-rule);
    background-position:right center;background-size:auto 124%;
  }
  .cb__copy{width:auto;padding:clamp(26px,6vw,40px) clamp(22px,6vw,40px) clamp(30px,7vw,44px);}
  .cb__wash{width:80%;height:34%;}
  .cb__frond{width:min(46vw,240px);}
}


/* ── as the page's closing band ──────────────────────────── */
/* The band this replaces carried margin-top:var(--gap). Here that gap is
   split between the margin and the section's own padding, because the frond
   is positioned from the section's top edge and has to sit ~52px above the
   panel. The two together come to var(--gap), so the rhythm above is
   unchanged. No bottom padding: the footer's own margin-top:var(--gap)
   governs below, and .cb does not clip, so the panel's drop shadow is free
   to fall into it. */
.cb--closing{
  /* Cream above this band should match island-showcase → West End.
     Those boxes abut; the headline sits var(--gap) plus the rdp grid
     slack below the island card, ~2× --gap at 1440. */
  margin-top:0;
  padding-top:calc(var(--gap) * 2 - 32px);
  padding-bottom:0;
}

/* ── mirrored: picture left, copy right ──────────────────── */
/* ============================================================
   Applied with .cb--mirror. The picture moves to the left because
   the band above it, .posted-reference, also carries its picture
   on the right.

   The photograph moves to the left because the band above it,
   .posted-reference, also carries its picture on the right.

   The wooden signpost is gone by re-framing, not by filling. Two
   earlier attempts at filling it both failed and are worth naming:
   cv2.inpaint over a 400px-tall region diffuses colour inward and
   leaves a texture-less smear, and cloning the neighbouring column
   block over it duplicated a roof strut and a run of the building
   at a fixed 150px pitch, which the eye reads immediately as a
   repeat. Nothing is invented here: the picture and the sweep are
   re-cut from the comp into ONE shared frame (comp x 792..1884),
   flipped together, and the 152 columns holding the signpost are
   dropped off the flipped left. The clip polygon is then derived
   in that same frame rather than reflected, so picture, sweep and
   clip stay locked to each other.

   The cart's JAMAICA BEACH badge is cloned back the right way
   round in the gradient domain so its text still reads.

   The top of the curve is lightly rounded: a 9-point mean weighted
   to nothing by 30% of the height. That takes the worst of the
   corner off while leaving the comp's shape recognisable, moving
   the curve at most 1.22pp. A cubic refit of the top 45% was tried
   and reverted; it read as too smooth and cost the picture about
   4pp of its top-left corner.

   The copy reads left to right, so one left edge has to clear the
   curve at every row the copy occupies. The curve bulges furthest
   at the button rows, and the widest line is the headline at the
   top, so that single edge is set by the bulge while the width is
   set by the headline: 492px of headline plus a 24px gutter means
   the picture cannot pass 619px. The box is 47.5% rather than the
   40.87% that matched the asset's aspect, which makes cover crop
   about 84px off the picture's right. That is the price of left
   alignment here, and it is the safe direction: the crop moves the
   clip further INTO the picture, so the curve keeps its shape and
   no cream margin can appear.
   ============================================================ */

.cb--mirror .cb__photo{
  left:4px;right:47.5%;
  border-radius:clamp(11px,1.2vw,16px) 0 0 clamp(11px,1.2vw,16px);
  background-image:url('/assets/img/cta/cta-photo-mirror.webp?v=2');
  background-position:left center;
  clip-path:polygon(56.73% 0.0%, 57.13% 1.26%, 57.75% 2.51%, 58.53% 3.77%, 59.57% 5.02%, 60.94% 6.28%, 62.6% 7.54%, 64.45% 8.79%, 66.51% 10.05%, 68.69% 11.3%, 70.85% 12.56%, 72.92% 13.81%, 74.87% 15.07%, 76.58% 16.33%, 77.91% 17.58%, 79.05% 18.84%, 80.27% 20.09%, 81.4% 21.35%, 82.42% 22.61%, 83.24% 23.86%, 83.97% 25.12%, 84.61% 26.37%, 85.18% 27.63%, 85.7% 28.89%, 86.16% 30.14%, 86.56% 31.4%, 86.99% 32.65%, 87.41% 33.91%, 87.83% 35.16%, 88.23% 36.42%, 88.62% 37.68%, 88.99% 38.93%, 89.37% 40.19%, 89.78% 41.44%, 90.19% 42.7%, 90.62% 43.96%, 91.07% 45.21%, 91.51% 46.47%, 91.97% 47.72%, 92.46% 48.98%, 92.96% 50.24%, 93.48% 51.49%, 94.03% 52.75%, 94.57% 54.0%, 95.11% 55.26%, 95.59% 56.51%, 96.01% 57.77%, 96.37% 59.03%, 96.65% 60.28%, 96.85% 61.54%, 96.99% 62.79%, 97.07% 64.05%, 97.1% 65.31%, 97.09% 66.56%, 97.07% 67.82%, 96.99% 69.07%, 96.89% 70.33%, 96.71% 71.59%, 96.49% 72.84%, 96.21% 74.1%, 95.87% 75.35%, 95.47% 76.61%, 95.01% 77.86%, 94.47% 79.12%, 93.86% 80.38%, 93.16% 81.63%, 92.36% 82.89%, 91.44% 84.14%, 90.38% 85.4%, 89.13% 86.66%, 87.69% 87.91%, 86.11% 89.17%, 84.38% 90.42%, 82.59% 91.68%, 80.94% 92.94%, 79.42% 94.19%, 78.05% 95.45%, 76.93% 96.7%, 76.17% 97.96%, 75.83% 99.22%, 75.86% 100.0%, 0% 100%, 0% 0%);
}
.cb--mirror .cb__key{
  left:2px;right:47.5%;
  border-radius:clamp(13px,1.35vw,18px) 0 0 clamp(13px,1.35vw,18px);
  clip-path:polygon(56.73% 0.0%, 57.13% 1.26%, 57.75% 2.51%, 58.53% 3.77%, 59.57% 5.02%, 60.94% 6.28%, 62.6% 7.54%, 64.45% 8.79%, 66.51% 10.05%, 68.69% 11.3%, 70.85% 12.56%, 72.92% 13.81%, 74.87% 15.07%, 76.58% 16.33%, 77.91% 17.58%, 79.05% 18.84%, 80.27% 20.09%, 81.4% 21.35%, 82.42% 22.61%, 83.24% 23.86%, 83.97% 25.12%, 84.61% 26.37%, 85.18% 27.63%, 85.7% 28.89%, 86.16% 30.14%, 86.56% 31.4%, 86.99% 32.65%, 87.41% 33.91%, 87.83% 35.16%, 88.23% 36.42%, 88.62% 37.68%, 88.99% 38.93%, 89.37% 40.19%, 89.78% 41.44%, 90.19% 42.7%, 90.62% 43.96%, 91.07% 45.21%, 91.51% 46.47%, 91.97% 47.72%, 92.46% 48.98%, 92.96% 50.24%, 93.48% 51.49%, 94.03% 52.75%, 94.57% 54.0%, 95.11% 55.26%, 95.59% 56.51%, 96.01% 57.77%, 96.37% 59.03%, 96.65% 60.28%, 96.85% 61.54%, 96.99% 62.79%, 97.07% 64.05%, 97.1% 65.31%, 97.09% 66.56%, 97.07% 67.82%, 96.99% 69.07%, 96.89% 70.33%, 96.71% 71.59%, 96.49% 72.84%, 96.21% 74.1%, 95.87% 75.35%, 95.47% 76.61%, 95.01% 77.86%, 94.47% 79.12%, 93.86% 80.38%, 93.16% 81.63%, 92.36% 82.89%, 91.44% 84.14%, 90.38% 85.4%, 89.13% 86.66%, 87.69% 87.91%, 86.11% 89.17%, 84.38% 90.42%, 82.59% 91.68%, 80.94% 92.94%, 79.42% 94.19%, 78.05% 95.45%, 76.93% 96.7%, 76.17% 97.96%, 75.83% 99.22%, 75.86% 100.0%, 0% 100%, 0% 0%);
}
/* the sweep shares the photograph's box, because it was cut from the
   same frame and flipped with it */
.cb--mirror .cb__line{
  inset:4px 47.5% 5px 4px;
  /* stretched to the box, not cover: the clip is expressed in box fractions,
     so once the box stopped matching the asset's aspect the two scaled by
     different rules and the sweep drifted ~45px off the photograph's edge.
     Stretching makes the sweep share the clip's mapping exactly. */
  background:url('/assets/img/cta/line-mirror.png') left center/100% 100% no-repeat;
  transform:none;
}
.cb--mirror .cb__wash{left:auto;right:0;transform:scaleX(-1);}

.cb--mirror .cb__copy{
  margin-left:auto;text-align:left;
  width:min(47.5%,560px);
  padding:40px 26px 53px 0;
}
.cb--mirror .cb__lead{margin-left:0;margin-right:auto;}
.cb--mirror .cb__ctas{justify-content:flex-start;}

@media (max-width:900px){
  /* the desktop mirror rules outrank the stacked ones, so the clip and the
     copy's width have to be handed back explicitly */
  .cb--mirror .cb__photo{left:auto;right:auto;border-radius:0;clip-path:none;background-position:left center;}
  .cb--mirror .cb__copy{width:auto;text-align:left;margin-left:0;padding:clamp(26px,6vw,40px) clamp(22px,6vw,40px) clamp(30px,7vw,44px);}
  .cb--mirror .cb__lead{margin-right:auto;}
  .cb--mirror .cb__ctas{justify-content:flex-start;}
  .cb--mirror .cb__wash{left:0;right:auto;transform:none;}
}