/* ============================================================
   "4-Seater Golf Cart" — the comp (Drive 1VcY9…, 1672x941)
   rebuilt as HTML. Scoped .cc.

   HOW IT IS PUT TOGETHER
   One background plate carries everything that is not type: the
   ground, both frond watermarks, the photograph in its organic
   cream mount, the Jamaica Beach seal, the $100 badge and the
   compass rose. The plate is the comp itself with the right-hand
   column erased and the hole refilled from a 2-D polynomial fit
   of the comp's own ground, so the ground under the HTML is the
   comp's ground, not an approximation of it. Every boundary step
   at the refilled edges measures under 1/255.

   Everything on the right is live: all type, the three spec
   panels with their border, radius and shadow, and the pill.
   Only the icon glyphs stay images -- they are line art, and a
   redrawn path would not be the same drawing.

   Boxes are shares of the 1672x941 frame: 1 comp px = 0.05981%
   across, 0.10627% down, and 0.05981cqw for type.
   ============================================================ */

.ccp{background:var(--cream);color:var(--ink);}

.cc{position:relative;width:100%;overflow:hidden;isolation:isolate;
  background:var(--cream);font-family:var(--text);
  /* seated on the site's section rhythm. The frame carries the comp's own margins --
     the photo mount starts 7.439% down and the $100 badge ends 10.839% up, of a frame
     0.5628x its own width -- so subtract those from --gap rather than stacking both. */
  --pad-top:max(0px,calc(var(--gap) - 0.041866 * var(--iw)));
  padding-top:var(--pad-top);
  margin-bottom:calc(-0.061002 * var(--iw) + var(--gap) * .5);
  /* seated on the site's margin: the comp's own content runs x=75 (the photo mount's
     left edge) to x=1629 (the end of "GOOD TIMES"), which is 92.943% of the 1672px
     frame. The frame therefore renders at content-width / 0.92943 and steps back by
     its 4.486% left inset, putting that span exactly on .shell's content box. */
  --p:clamp(20px,4vw,44px);
  --outer:min(var(--shell),100%);
  --cl:calc((100% - var(--outer))/2 + var(--p));
  --cw:calc(var(--outer) - 2*var(--p));
  --iw:calc(var(--cw) / 0.914474);
  --lead:#263C5E;
  --card:#F8F6EF; --card-line:#EBE2D1;
  --label:#01174A; --value:#4B5C75;
  --pill:#12305B; --pill-ring:#E5D8B3;}

.cc__frame{position:relative;width:var(--iw);aspect-ratio:1672/941;
  container-type:inline-size;
  margin-left:calc(var(--cl) - 0.0448565 * var(--iw));}
.cc__plate{position:absolute;inset:0;z-index:0;display:block;}
.cc__plate img{width:100%;height:100%;max-width:none;display:block;object-fit:cover;}
.cc__frame > :not(.cc__plate){position:absolute;z-index:1;margin:0;}

/* the right column sits 2.5% of the frame left of the comp seats (client, 2026-09-15) */
/* ── headline ──
   The comp sets the two navy lines at different sizes (cap 68 then 64), so
   they are sized independently rather than sharing one font-size. */
/* ── headline ──
   Live type now, set to the same values as "Every rental includes" in .rc__head:
   var(--disp) at clamp(40px,4.4vw,62px)/.94, letter-spacing -.026em, var(--navy),
   with the script word in var(--script) at 1.08em/.86 in var(--teal) over the same
   gold flourish. The comp's own face is a lighter didone that is not in the library,
   so this is the site's voice rather than the comp's. */
.cc__head{left:54.797%;top:auto;bottom:62.38%;margin:0;
  width:38.6cqw;max-width:none;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;
  color:var(--navy);
  font-feature-settings:"kern" 1,"liga" 1;}
/* "Golf Cart" carries the accent, set exactly as "includes" is in .rc__head:
   its own line, var(--script) at 1.08em/.86 in var(--teal), over the gold flourish */
.cc__nb{white-space:nowrap;}
.cc__head .script{
  display:block;width:max-content;max-width:100%;
  font-family:var(--script);font-size:1.08em;line-height:.86;
  letter-spacing:0;color:var(--teal);
  margin:.12em 0 0;transform:translateY(.04em);position:relative;}
.cc__head .script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;
  height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);}

/* ── lead ── */
/* Keep the authored two-line measure legible with the fixed-size shared intro font. */
.cc__lead{left:54.976%;top:43.3%;width:max(36cqw,370px);
  font:400 16px/1.6 var(--text);color:var(--ink-soft);}
/* Match the handover intro's smaller-screen typography. */
@media (max-width:1150px){.cc__lead{font-size:15px;}}


/* ── the facts strip ──
   From the 490x159 reference: a hairline broken by the palm, then three columns 154
   wide on a 462 grid. --u is one reference px; the grid spans the 644 comp px the old
   panels covered. Type is floored so narrow desktops never drop the labels under 12px. */
.cc__facts{left:54.67%;top:52.6%;width:38.52%;--u:0.08337cqw;--gold:#BE9962;--hair:#D6C09B;}
.cc__facts-rule{position:absolute;left:calc(20 * var(--u));right:calc(20 * var(--u));top:calc(9.5 * var(--u));
  height:calc(30 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));}
.cc__facts-rule i{flex:1 1 auto;height:1px;background:var(--hair);transform:translateY(calc(3 * var(--u)));}
.cc__facts-rule svg{flex:0 0 auto;height:calc(30 * var(--u));width:auto;fill:var(--gold);margin:0 calc(3 * var(--u));}
.cc__facts-row{position:absolute;left:0;right:0;top:0;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);}
.cc__facts-row li{position:relative;height:calc(140 * var(--u));text-align:center;}
.cc__facts-row li+li::before{content:"";position:absolute;left:0;top:calc(53 * var(--u));height:calc(83 * var(--u));width:1px;background:var(--hair);}
.cc__facts-row svg{position:absolute;left:50%;transform:translateX(-50%);top:calc(47.4 * var(--u));height:calc(31 * var(--u));width:auto;
  fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
/* the seats glyph is on a 32 grid, so its stroke and box are scaled to match the 24-grid pair */
.cc__facts-row li:nth-child(1) svg{height:calc(32 * var(--u));top:calc(46 * var(--u));stroke-width:1.9;}
.cc__facts-row li:nth-child(3) svg{height:calc(32.5 * var(--u));top:calc(46.7 * var(--u));stroke-width:1.6;}
.cc__facts-row b{position:absolute;left:0;right:0;top:calc(74.7 * var(--u));font-family:var(--disp);font-weight:400;
  font-size:max(calc(37 * var(--u)),28px);line-height:1;letter-spacing:-.01em;color:var(--navy);}
.cc__facts-row b small{font-size:calc(14.5 * var(--u));letter-spacing:-.02em;color:var(--teal);margin-left:calc(6 * var(--u));
  vertical-align:baseline;position:relative;top:calc(-8.8 * var(--u));}
.cc__facts-row span{position:absolute;left:0;right:0;top:calc(119 * var(--u));font-family:var(--disp);font-weight:400;
  font-size:max(calc(13.7 * var(--u)),12px);line-height:1;letter-spacing:-.02em;color:var(--navy);white-space:nowrap;}

/* ── Book Now ──
   The site's own .pill.pill--solid (site.css), the same component as the home page's
   See Rates pill, seated at the comp's pill position. Only the seat, the arrow motion
   and the focus ring live here; size, type, rim and hover lift come from .pill. */
.cc__pill{left:55.036%;top:76.95%;text-decoration:none;}
/* the gold hairline rim that .handover__foot gives the same pill on the home page */
.cc__frame > .cc__pill.pill--solid{border-color:rgba(181,137,74,.78);}
.cc__frame > .cc__pill.pill--solid:hover{border-color:#b58a4a;}
.cc__pill svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.cc__pill:hover svg{transform:translateX(3px);}
.cc__pill:focus-visible{outline:2px solid #143159;outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .cc__pill,.cc__pill svg{transition:background .22s ease;}
  .cc__pill:hover,.cc__pill:hover svg{transform:none;}
}


/* ── the $100 badge from the fleet art, drawn live (brought over from our-fleet-art,
   same position and measures). ── */
/* the $100 badge from the art, drawn live. --u is one source px of the 632-wide art
   (850 comp px wide on a 1672 frame); every measure below is in those px */
.cc__badge{position:absolute;left:30.737%;top:11.643%;width:18.451%;aspect-ratio:1;margin:0;
  --u:0.080439cqw;z-index:2;
  border-radius:50%;background:linear-gradient(160deg,#C8A76B 0%,#D3B073 48%,#DCBC82 100%);isolation:isolate;
  box-shadow:0 calc(4 * var(--u)) calc(28 * var(--u)) rgba(15,30,35,.13);
  color:#F4F6F5;text-align:center;font-feature-settings:"kern" 1,"liga" 1;}
.cc__badge::before{content:"";position:absolute;inset:calc(2.4 * var(--u));border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 42% 38%,#21504C 0%,#1F4D4A 55%,#1D4A47 100%);}
.cc__badge::after{content:"";position:absolute;inset:calc(8.65 * var(--u));border-radius:50%;
  border:calc(1.3 * var(--u)) solid #BFA663;}
.cc__badge > *{position:absolute;left:0;right:0;margin:0;display:block;}
.cc__badge-palm{left:calc(89.1 * var(--u));right:auto;top:calc(26.85 * var(--u));
  width:calc(53 * var(--u));height:calc(55 * var(--u));fill:#C9AC66;}
.cc__badge b{top:calc(68 * var(--u));font-family:var(--disp);font-weight:400;
  font-size:calc(63.7 * var(--u));line-height:1;letter-spacing:-.02em;}
.cc__badge-day{top:calc(143.05 * var(--u));display:flex;align-items:center;justify-content:center;
  gap:calc(4 * var(--u));font-family:var(--text);font-weight:400;
  font-size:calc(17.5 * var(--u));line-height:1;letter-spacing:.30em;word-spacing:0;text-indent:.30em;text-transform:uppercase;
  -webkit-text-stroke:calc(.25 * var(--u)) currentColor;paint-order:stroke fill;}
.cc__badge-day i{display:block;position:relative;top:calc(-1.05 * var(--u));width:calc(32 * var(--u));height:calc(1.4 * var(--u));background:#CCAC64;}
.cc__badge small{top:calc(174 * var(--u));font-family:var(--text);font-weight:400;
  font-size:calc(12 * var(--u));line-height:1;letter-spacing:.11em;text-indent:.11em;text-transform:uppercase;color:#CCAC64;}

/* ── the faded background object ──
   The Belle Pointe park-details device (bella2 .pg-sites__bgobj): the section's own
   subject repeated as a ghost behind the copy column. One span carrying the photo as a
   cover background at 9% opacity, feathered by two intersected masks so it has no edge:
   solid on the right, dissolving leftward from 55% of its width, and clear at the top
   and bottom 16%. It sits inside the frame right after the plate, at the plate's own
   z0, so it paints over the plate's cream ground and under every live element; the
   masks keep it well clear of the arch photo and the badge on the left. ── */
.cc__frame > .cc__bgobj{position:absolute;z-index:0;pointer-events:none;
  /* the box is the SECTION's, as on Belle Pointe (right:-6%, top 0, width 58% of the
     section), expressed from inside the frame: the frame is the container, so 1cqw is
     one frame-width percent, and the section is 100vw. The frame's right edge sits
     (50vw - 49.79065cqw) inside the section's, so the span's right is that plus 6vw
     beyond it; the section's top is --pad-top above the frame's. It stays inside the
     frame rather than on the section so it paints over the plate and under the live
     elements in every browser, including the ones where a container is a stacking
     context. --pad-top itself is not used because its 100% token would resolve
     against the height here. */
  right:calc(49.79065cqw - 56vw);width:58vw;
  top:calc(-1 * max(0px,var(--gap) - 4.1866cqw));bottom:0;
  background:url('img/cc-bgobj.webp') center 40%/cover no-repeat;opacity:.09;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 55%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect;}

/* ── narrow: the composition cannot hold, so it stacks ──
   Below 900px the fixed 1672x941 frame would scale the whole comp down with it, and
   the 12px caps would land near 3px. The frame comes apart into flow instead, the
   plate swaps to the artwork crop (which carries no type), and the headline that the
   wide layout takes from the plate is set live in Walbaum. */
@media (max-width:900px){
  /* stacked, the frame has no inset of its own, so take the gap straight */
  .cc{margin-bottom:0;padding:var(--gap) 0 clamp(48px,11vw,78px);}
  .cc__frame{position:relative;width:auto;aspect-ratio:auto;container-type:normal;
    margin-left:0;display:flex;flex-direction:column;}
  .cc__frame > :not(.cc__plate){position:static;}

  .cc__plate{position:relative;order:3;margin:clamp(20px,5vw,30px) 0 0;}
  .cc__plate img{width:100%;height:auto;object-fit:cover;}

  /* size follows the home page's "Straight prices, posted" (#posted-title in posted-prices.css):
     the shared clamp(40px,4.4vw,62px) holds down to 600px, then clamp(24px,6.6vw,39px) */
  .cc__head{order:4;position:static;width:auto;white-space:normal;
    padding:clamp(20px,5vw,30px) clamp(20px,5vw,40px) 0;}

  .cc__wrap{display:none;}
  .cc__lead{order:5;width:auto;max-width:50ch;
    padding:22px clamp(20px,5vw,40px) 0;}

  .cc__frame > .cc__facts{order:6;position:relative;left:auto;top:auto;
    --u:calc((100vw - 2 * clamp(20px,5vw,40px)) / 462);width:calc(462 * var(--u));height:calc(140 * var(--u));
    margin:clamp(26px,6vw,32px) auto 0;}
  .cc__facts-row b{font-size:max(calc(37 * var(--u)),26px);}
  .cc__facts-row b small{font-size:max(calc(14.5 * var(--u)),12px);}
  .cc__facts-row span{font-size:max(calc(13.7 * var(--u)),13px);}
  .cc__facts-row svg{height:max(calc(31 * var(--u)),26px);}
  .cc__facts-row li:nth-child(1) svg{height:max(calc(32 * var(--u)),27px);}
  .cc__facts-row li:nth-child(3) svg{height:max(calc(32.5 * var(--u)),27px);}

  .cc__frame > .cc__pill{order:7;position:static;align-self:flex-start;
    margin:clamp(20px,5vw,28px) clamp(20px,5vw,40px) 0;}
  .cc__badge{--u:0.14127cqw;left:53.98%;width:32.41%;}
  /* stacked: the frame is a flex column, so the ghost is pinned to its lower half, under
     the copy and clear of the plate-m photograph above it */
  .cc__frame > .cc__bgobj{position:absolute;top:auto;bottom:0;height:56%;right:-10%;width:80%;left:auto;}
}
@media (max-width:600px){.cc__head{font-size:clamp(24px,6.6vw,39px);}}