/* ============================================================
   "Coming from town?" — the Drive comp (1672x941) as HTML, Jamaica Beach page.
   The photograph, palms, watercolour wash, icons, dividers,
   "Good Days Ahead" and the two small marks stay in one plate
   (img/plate-v3.webp) with the type erased. Every line of type is
   live text in the site's faces, placed in shares of the frame:
   1 comp px = 0.05981cqw across, 0.10627% down.
   The gold swash under "town?" is cut from the comp with its
   alpha solved against the cream (img/town/swash.png). The plate's
   cream was shifted to the site's #FAF6EF so it sits flush on the page.
   ============================================================ */
/* ── seated on the site's margin ──
   The comp's own content runs from the kicker at x=92 to the stamp's right edge at
   x=1669, which is 94.32% of its 1672 frame. The frame is scaled so those two edges
   land on .shell's content box: width = content-width / 0.9432, stepped back by the
   comp's 5.502% left inset. The cream outside the frame is the page's own, so the
   overhang on the left is invisible. Same recipe as rental-includes. */
.cft-wrap{position:relative;width:100%;overflow-x:clip;margin-top:clamp(64px,7vw,96px);
  --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.9432);}
.cft{position:relative;width:var(--iw);margin-left:calc(var(--cl) - 0.05502 * var(--iw));padding-bottom:clamp(24px,3vw,40px);
  container-type:inline-size;overflow:hidden;background:var(--cream) url('/assets/img/town/plate-v3.webp?v=1') center top/100% auto no-repeat;
  font-family:var(--text);color:#163A64;-webkit-font-smoothing:antialiased;}
/* ── the comp's canvas edges ──
   The sky wash, the wash at the foot and the fronds all run off the artwork's four
   sides; inside the page those are hard cuts. A cream veil (the page's exact cream,
   fade-effect.md: overlay, never a mask) sits between the plate and the live type and
   eases each edge out on a quintic smootherstep, so the copy stays crisp and only the
   artwork dissolves. Zones: top 14% of the height for the sky, 8% at the foot for the
   wash, 8% left, 4.5% right so the stamp keeps most of its last letters. */
.cft::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 108% at 96% 48%, rgba(250,246,239,0) 0%, rgba(250,246,239,0) 57%, rgba(250,246,239,.01) 60%, rgba(250,246,239,.06) 63%, rgba(250,246,239,.16) 66%, rgba(250,246,239,.32) 69%, rgba(250,246,239,.5) 72%, rgba(250,246,239,.68) 75%, rgba(250,246,239,.84) 78%, rgba(250,246,239,.94) 81%, rgba(250,246,239,.99) 84%, rgba(250,246,239,1) 87%, rgba(250,246,239,1) 100%),
    linear-gradient(to bottom, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 1.4%, rgba(250,246,239,0.94) 2.8%, rgba(250,246,239,0.84) 4.2%, rgba(250,246,239,0.68) 5.6%, rgba(250,246,239,0.5) 7.0%, rgba(250,246,239,0.32) 8.4%, rgba(250,246,239,0.16) 9.8%, rgba(250,246,239,0.06) 11.2%, rgba(250,246,239,0.01) 12.6%, rgba(250,246,239,0) 14.0%, rgba(250,246,239,0) 100%),
    linear-gradient(to top, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 0.8%, rgba(250,246,239,0.94) 1.6%, rgba(250,246,239,0.84) 2.4%, rgba(250,246,239,0.68) 3.2%, rgba(250,246,239,0.5) 4.0%, rgba(250,246,239,0.32) 4.8%, rgba(250,246,239,0.16) 5.6%, rgba(250,246,239,0.06) 6.4%, rgba(250,246,239,0.01) 7.2%, rgba(250,246,239,0) 8.0%, rgba(250,246,239,0) 100%),
    linear-gradient(to right, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 0.8%, rgba(250,246,239,0.94) 1.6%, rgba(250,246,239,0.84) 2.4%, rgba(250,246,239,0.68) 3.2%, rgba(250,246,239,0.5) 4.0%, rgba(250,246,239,0.32) 4.8%, rgba(250,246,239,0.16) 5.6%, rgba(250,246,239,0.06) 6.4%, rgba(250,246,239,0.01) 7.2%, rgba(250,246,239,0) 8.0%, rgba(250,246,239,0) 100%),
    linear-gradient(to left, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 0.45%, rgba(250,246,239,0.94) 0.9%, rgba(250,246,239,0.84) 1.35%, rgba(250,246,239,0.68) 1.8%, rgba(250,246,239,0.5) 2.25%, rgba(250,246,239,0.32) 2.7%, rgba(250,246,239,0.16) 3.15%, rgba(250,246,239,0.06) 3.6%, rgba(250,246,239,0.01) 4.05%, rgba(250,246,239,0) 4.5%, rgba(250,246,239,0) 100%);}
.cft>*{z-index:2;}
.cft *{box-sizing:border-box;}
.cft__art,.cft__icon{display:none;}
.cft>*{position:absolute;margin:0;white-space:nowrap;}

/* Let the glass rail grow with its copy while the artwork keeps its original scale.
   Four equal columns keep badges, labels and descriptions aligned with room to breathe. */
/* Make room for the matching body typography and directions pill as desktop narrows. */
.cft__glass{position:relative;inset:auto;left:3.6%;width:86%;margin:calc(40.52cqw + clamp(0px,220px - 20vw,40px)) 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 12px;z-index:2;}
.cft__glass::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:0;box-sizing:border-box;
  border:1px solid rgba(181,145,84,.3);border-radius:22px;
  background:linear-gradient(115deg,rgba(255,255,255,.48) 0%,rgba(255,253,246,.17) 44%,rgba(240,231,212,.24) 100%);
  backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.32),inset 0 -1px 2px rgba(175,148,101,.05),0 5px 16px -9px rgba(96,79,49,.15);}
.cft__glass>*{position:relative;z-index:1;margin:0;min-width:0;white-space:normal;}
/* Keep the footer copy selectable. */
.cft__step,.cft__office,.cft__oh,.cft__hours{pointer-events:auto;-webkit-user-select:text;user-select:text;}

/* headline: the same type as "Every rental includes" (.rc__head in rental.css) */
/* Keep the headline and body at their original artwork coordinates as the rail grows. */
.cft__copy{left:5.1435%;top:20.0928cqw;transform:translateY(-50%);}
.cft__head{margin:0;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);white-space:nowrap;
  font-feature-settings:"kern" 1,"liga" 1;}
.cft__head span{display:block;line-height:inherit;}
.cft__head .cft__script{
  display:inline-block;font-family:var(--script);font-size:1.08em;line-height:.86;
  letter-spacing:0;color:var(--teal);font-style:normal;
  margin-left:.1em;transform:translateY(.04em);position:relative;}
.cft__head .cft__script:after{
  content:"";position:absolute;left:5%;right:10%;bottom:-.08em;
  height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);}

/* body */
.cft__body{margin-top:clamp(24px,2vw,28px);padding-left:0.5383cqw;
  font:400 16px/1.6 var(--text);color:var(--ink-soft);}
.cft__body p{margin:0;}
.cft__body p+p{margin-top:clamp(16px,1.45cqw,20px);}
@media(max-width:1150px){.cft__body{font-size:15px;}}

/* Pickup steps and hours share the same badge, label and copy rhythm. */
.cft__step,.cft__office{display:flex;flex-direction:column;align-items:center;
  padding:0 clamp(12px,1.4cqw,18px);text-align:center;}
.cft__glass>*+*{border-left:1px solid rgba(181,145,84,.28);}
/* Match Club Car Tempo's cream-and-gold medallions and fine outline artwork. */
.cft__step .cft__icon,.cft__office .cft__icon{display:grid;place-items:center;position:static;flex:none;
  width:clamp(34px,3.25cqw,40px);height:clamp(34px,3.25cqw,40px);margin:0 0 12px;border-radius:50%;
  pointer-events:none;-webkit-user-select:none;user-select:none;
  background:linear-gradient(145deg,#fffdf8 5%,#f6eedf 60%,#e9dcc3 100%);
  border:1px solid rgba(181,145,84,.48);color:#9c763c;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.92),inset 0 -2px 3px rgba(153,116,55,.15),0 2px 2px rgba(82,66,39,.09),0 7px 13px -6px rgba(82,66,39,.24);}
.cft__icon svg{position:relative;display:block;width:52.1739%;height:52.1739%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 1px 1px rgba(128,94,43,.12));}
.cft__step b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(12px,1.08cqw,13px);line-height:1.3;letter-spacing:.035em;
  text-transform:uppercase;color:#082B54;}
.cft__step p{margin:5px 0 0;}

/* Directions sits below the main copy without shifting the headline or paragraphs. */
.cft__pill{position:absolute;left:0.5383cqw;top:calc(100% + clamp(22px,1.8cqw,28px) - 6px);text-decoration:none;pointer-events:auto;}
.cft__pill.pill--solid{border-color:rgba(181,137,74,.78);}
.cft__pill.pill--solid:hover{border-color:#b58a4a;}
.cft__pill span{flex:0 0 auto;}
.cft__pill .cft__arrow{width:15px;height:8px;flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.cft__pill:hover .cft__arrow{transform:translateX(3px);}
.cft__pill:focus-visible{outline:2px solid #143159;outline-offset:3px;}

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

/* The shorter hours note has the same spacing as the pickup descriptions. */
.cft__oh{margin:0;font-size:clamp(11px,1cqw,12px);line-height:1.404;letter-spacing:.12em;text-transform:uppercase;color:#C8985C;}
.cft__hours{margin:5px 0 0;}
.cft__step p,.cft__hours{font:400 14px/1.45 var(--text);color:var(--ink-soft);}
@media(max-width:1150px){.cft__step p,.cft__hours{font-size:13px;}}

/* ── narrow: restack the composition and use compact badges beside each text group. */
@media (max-width:900px){
  .cft-wrap{overflow-x:visible;margin-top:clamp(48px,8vw,72px);}
  .cft{width:auto;margin:0;aspect-ratio:auto;background:none;container-type:normal;
    -webkit-mask-image:none;mask-image:none;padding:0 clamp(20px,5vw,44px) 8px;}
  .cft>*{position:static;white-space:normal;}
  .cft::after{display:none;}
  .cft__copy{transform:none;}
  .cft__body{margin-top:0;padding-left:0;}
  .cft__art{display:block;aspect-ratio:1152/600;margin:0 calc(-1*clamp(20px,5vw,44px)) clamp(24px,6vw,36px);
    background:url('/assets/img/town/plate-v3.webp?v=1') 100% 0/145.14% auto no-repeat;position:relative;}
  .cft__art::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to bottom, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 2.2%, rgba(250,246,239,0.94) 4.4%, rgba(250,246,239,0.84) 6.6%, rgba(250,246,239,0.68) 8.8%, rgba(250,246,239,0.5) 11.0%, rgba(250,246,239,0.32) 13.2%, rgba(250,246,239,0.16) 15.4%, rgba(250,246,239,0.06) 17.6%, rgba(250,246,239,0.01) 19.8%, rgba(250,246,239,0) 22.0%, rgba(250,246,239,0) 100%),
      linear-gradient(to top, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 2.2%, rgba(250,246,239,0.94) 4.4%, rgba(250,246,239,0.84) 6.6%, rgba(250,246,239,0.68) 8.8%, rgba(250,246,239,0.5) 11.0%, rgba(250,246,239,0.32) 13.2%, rgba(250,246,239,0.16) 15.4%, rgba(250,246,239,0.06) 17.6%, rgba(250,246,239,0.01) 19.8%, rgba(250,246,239,0) 22.0%, rgba(250,246,239,0) 100%),
      linear-gradient(to right, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 1.2%, rgba(250,246,239,0.94) 2.4%, rgba(250,246,239,0.84) 3.6%, rgba(250,246,239,0.68) 4.8%, rgba(250,246,239,0.5) 6.0%, rgba(250,246,239,0.32) 7.2%, rgba(250,246,239,0.16) 8.4%, rgba(250,246,239,0.06) 9.6%, rgba(250,246,239,0.01) 10.8%, rgba(250,246,239,0) 12.0%, rgba(250,246,239,0) 100%),
      linear-gradient(to left, rgba(250,246,239,1) 0.0%, rgba(250,246,239,0.99) 1.2%, rgba(250,246,239,0.94) 2.4%, rgba(250,246,239,0.84) 3.6%, rgba(250,246,239,0.68) 4.8%, rgba(250,246,239,0.5) 6.0%, rgba(250,246,239,0.32) 7.2%, rgba(250,246,239,0.16) 8.4%, rgba(250,246,239,0.06) 9.6%, rgba(250,246,239,0.01) 10.8%, rgba(250,246,239,0) 12.0%, rgba(250,246,239,0) 100%);}
  .cft__head{font-size:clamp(36px,10vw,48px);white-space:normal;margin:0 0 18px;}
  .cft__body{max-width:46ch;}
  .cft__body br{display:none;}
  .cft__body p+p{margin-top:18px;}
  .cft__glass{position:relative;inset:auto;width:auto;display:block;margin-top:30px;padding:24px 20px;pointer-events:auto;}
  .cft__glass::before{inset:0;width:auto;height:auto;border-radius:22px;}
  .cft__glass>*{position:relative;z-index:1;left:auto;top:auto;white-space:normal;}
  .cft__glass>*+*{border-left:0;}
  .cft__step{width:auto;text-align:left;display:grid;grid-template-columns:42px 1fr;column-gap:16px;row-gap:0;align-items:center;margin-top:18px;padding:0 0 18px;border-bottom:1px solid rgba(181,145,84,.28);}
  .cft__step:first-of-type{margin-top:0;}
  .cft__step .cft__icon,.cft__office .cft__icon{display:grid;position:static;left:auto;bottom:auto;transform:none;width:42px;height:42px;margin:0;border-radius:50%;grid-row:1/3;justify-self:center;}
  .cft__step b{font-size:14px;letter-spacing:.035em;}
  .cft__step p{margin:5px 0 0;}
  .cft__step p br{display:none;}
  .cft__pill{position:static;margin-top:16px;}
  .cft__office{width:auto;transform:none;text-align:left;margin-top:18px;padding:0;display:grid;grid-template-columns:42px 1fr;column-gap:16px;align-items:center;}
  .cft__office .cft__icon{margin:0;}
  .cft__oh{font-size:12px;}
  .cft__hours{margin-top:5px;}
}