/* Gulf N Gloss. Card brand: blue #1F6EBB, black, white, wide-spaced Montserrat caps.
   The page is a white ceramic-coated surface under studio light (site.js draws it with WebGL; the
   .surface gradients below are the no-WebGL / low-power / reduced-motion fallback). Each content block
   is an object (.obj) that glides onto the surface, settles, and sits on a contact shadow with a
   faint reflection beneath it. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ink:#000; --blue:#1F6EBB; --blue-deep:#17589A; --white:#fff;
  --lacquer:#F7F9FC;   /* the surface's base: bright white with a breath of brand blue */
  --quiet:#3A4149;     /* secondary text; AA on the darkest part of the surface */
  --hair:rgba(0,0,0,.1);
  --glide:cubic-bezier(.16,.84,.24,1);
}
*{box-sizing:border-box}
html{background:var(--lacquer);scroll-behavior:smooth;scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);line-height:1.6;font-size:1rem;padding-bottom:96px}
main{overflow-x:clip}
a{color:inherit;text-underline-offset:.18em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,iframe:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:50}
.skip:focus{left:8px}
h1,h2,h3{font-weight:600;text-transform:uppercase;line-height:1.3}
h2{font-size:clamp(1.15rem,3.4vw,1.75rem);letter-spacing:.26em;margin:0 0 .5em}
h3{font-size:.86rem;letter-spacing:.18em;margin:0 0 .3em}
.quiet{color:var(--quiet)}

/* ---------- the surface ---------- */
.surface{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(140% 50% at 50% 118%,rgba(31,110,187,.07),rgba(31,110,187,0) 60%),
    linear-gradient(180deg,#F6F8FB 0%,#FBFCFD 35%,#FFFFFF 70%,#FAFCFE 100%)}
/* fallback light tunnel: hard-edged tube reflections (white core, cool housing band, blue fringe), slid by the page's scroll */
.surface::before{content:"";position:absolute;left:-60%;width:220%;top:-60%;height:260%;
  background:repeating-linear-gradient(164deg,
    rgba(205,218,234,0) 0 33vh,
    rgba(31,110,187,.22) 33vh, rgba(31,110,187,.18) 33.2vh,
    rgba(214,226,240,.9) 33.2vh, rgba(214,226,240,.9) 33.7vh,
    #fff 33.7vh, #fff 34.7vh,
    rgba(214,226,240,.9) 34.7vh, rgba(214,226,240,.9) 35.2vh,
    rgba(31,110,187,.18) 35.2vh, rgba(31,110,187,.18) 35.4vh,
    rgba(225,234,245,.3) 35.4vh, rgba(225,234,245,0) 38vh, rgba(225,234,245,0) 52vh);
  transform:translate3d(0,0,0)}
.surface canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.surface.gl canvas{opacity:1}
.surface.gl.ready::before{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .surface::before{animation:tunnel linear both;animation-timeline:scroll(root)}
  }
}
@keyframes tunnel{to{transform:translate3d(-14vh,-62vh,0)}}

/* ---------- header, footer ---------- */
header.site{position:relative;z-index:5}
.preview-banner{background:#FFF4CC;color:#5c4500;text-align:center;font-size:.82rem;padding:8px 16px;font-weight:600}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.brand{text-decoration:none;font-weight:600;letter-spacing:.32em;font-size:.95rem;position:relative;padding-bottom:7px;white-space:nowrap}
.brand::after{content:"";position:absolute;left:0;bottom:0;width:30%;height:3px;background:var(--blue)}
.nav nav{display:none;margin-left:auto;gap:28px}
.nav nav a{text-decoration:none;font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.nav nav a:hover{border-color:var(--blue)}
.home .nav{min-height:0}
footer.site{padding:40px 0 24px;font-size:.82rem;color:var(--quiet)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
footer.site p{margin:0}
footer.site a{margin-right:14px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:15px 24px;border-radius:999px;border:2px solid var(--blue);font:inherit;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-align:center;
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 52%,rgba(0,0,0,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px rgba(31,110,187,.7)}
.btn:hover{background-color:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost{background:rgba(255,255,255,.55);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.btn.ghost:hover{background:var(--ink);color:#fff}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---------- arrival: the card's two marks standing on the table ----------
   GULF N GLOSS in black piano lacquer with the card's blue rule, "Protect What Moves You" in blue lacquer
   set low and right as on the card, both mirrored in the table below. The marks are fixed: the page's
   white plates glide over them. site.js redraws them in the surface shader (bevels, the same moving
   light bars, a faint water ripple in the reflection); these CSS layers are first paint and the fallback. */
.home{--mw:calc(100vw - 30px);--mx:15px;--my:calc(60px + 11svh);--fs:calc(var(--mw) / 11.14)}
.marks{position:fixed;z-index:-1;left:var(--mx);top:var(--my);width:var(--mw);pointer-events:none}
.m-stack{position:relative;transition:opacity .7s ease}
.gm .m-stack{opacity:0}
.m-name{position:relative;margin:0;font-size:var(--fs);line-height:1;letter-spacing:.32em;font-weight:600;white-space:nowrap;color:#000;text-transform:uppercase}
/* piano gloss: a soft ceiling reflection with a hard horizon in the upper half, a moving light bar, the white table caught at the foot */
.m-name::after{content:"GULF N GLOSS" / "";position:absolute;inset:0;pointer-events:none;color:transparent;
  background:
    linear-gradient(104deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.75) 49.4%,#fff 50%,rgba(255,255,255,.75) 50.6%,rgba(255,255,255,0) 56%) var(--lx,72%) 0/300% 100% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.34) 22%,rgba(255,255,255,.12) 47%,rgba(255,255,255,0) 47.6%,rgba(255,255,255,0) 78%,rgba(141,184,230,.32) 92%);
  -webkit-background-clip:text;background-clip:text}
.m-rule{display:block;width:30%;height:calc(var(--fs) * .11);margin-top:calc(var(--fs) * .36);border-radius:1px;background:var(--blue);
  background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%,rgba(0,0,0,.12))}
.m-tag{display:block;width:88%;aspect-ratio:1000/236;margin:calc(var(--fs) * -.42) 0 0 auto;background:var(--blue);
  background-image:
    linear-gradient(104deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.7) 49.5%,#fff 50%,rgba(255,255,255,.7) 50.5%,rgba(255,255,255,0) 56%),
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 40%,rgba(255,255,255,0) 41%,rgba(0,0,0,.18) 100%);
  background-size:300% 100%,100% 100%;background-position:var(--lx,72%) 0,0 0;background-repeat:no-repeat;
  -webkit-mask:url(/tagline.svg) center/100% 100% no-repeat;mask:url(/tagline.svg) center/100% 100% no-repeat}
/* the mirror in the table: the same stack, flipped at its foot and fading */
.m-refl{position:absolute;left:0;right:0;top:100%;transform:scaleY(-1);opacity:.42;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.3) 16%,transparent 38%);mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.3) 16%,transparent 38%)}
.m-refl .m-name::after{background:none}
/* phones: the vehicles stand right under the marks, full width, so only their reflection shows */
@media (max-width:759px){.m-refl{display:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .m-name::after,.m-tag{animation:mark-bar linear both;animation-timeline:scroll(root);animation-range:0 160vh}
  }
}
@keyframes mark-bar{from{--lx:96%}to{--lx:-4%}}
@property --lx{syntax:"<percentage>";inherits:true;initial-value:72%}

/* ---------- the card's vehicles standing on the table ----------
   The boat, car and jet ski from the card (brand art, cut out of its sunset), parked on the table in front of the
   marks' reflection, with a contact shadow and their own reflection: flipped at the foot, darker, softer, fading.
   Phone: full width under the marks, the photo's own right-hand crop on the screen edge. Desktop: to the right,
   under the tagline, as on the card. Pinned like the marks; site.js redraws it in the shader (same light bars,
   the same faint water ripple in the reflection). This CSS version is first paint and the no-WebGL fallback. */
.home{--mb:calc(var(--my) + var(--mw) * .302);--sh:min(calc((100vw - 4px) / 2.01),23svh);--sw:calc(var(--sh) * 2.01);
  --sx:calc(100vw - var(--sw));--sy:calc(var(--mb) + 2px);--sfade:100%}
.scene{position:fixed;z-index:-1;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);pointer-events:none;opacity:0;transition:opacity .7s ease}
.scene.in{opacity:1}
.gs .scene.in{opacity:0}
.scene img{display:block;width:100%;height:100%}
.s-lift{position:relative;z-index:1;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 var(--sfade),transparent);mask-image:linear-gradient(90deg,#000 var(--sfade),transparent)}
/* a light bar crossing the paint, masked by the vehicles' own shape */
.scene.in .s-lift::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.34) 49.2%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.34) 50.8%,rgba(255,255,255,0) 56%) var(--lx,72%) 0/300% 100% no-repeat;
  -webkit-mask:url(/card-vehicles.webp) 0 0/100% 100% no-repeat;
  mask:image-set(url(/card-vehicles.avif) type("image/avif"),url(/card-vehicles.webp) type("image/webp")) 0 0/100% 100% no-repeat}
/* contact shadow: dark and tight under the car and the jet ski, where they touch */
.scene::before{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--sh) * .05);height:calc(var(--sh) * .14);
  background:radial-gradient(28% 34% at 30% 36%,rgba(0,18,36,.42),rgba(0,18,36,.12) 60%,rgba(0,18,36,0) 100%),
    radial-gradient(17% 30% at 84% 36%,rgba(0,18,36,.36),rgba(0,18,36,.1) 60%,rgba(0,18,36,0) 100%)}
/* the wet floor's mirror, as a real floor shows it: the car and jet ski (--near, traced in build.mjs) flipped at the
   photo's foot; the boat, parked further back, flipped at its own foot (73.5% down the photo) and seen only past them.
   Softer and darker than the vehicles, and fading. */
.s-refl{position:absolute;left:0;width:100%;height:100%;transform:scaleY(-1);filter:blur(.8px) brightness(.84) saturate(.85)}
.s-refl picture{display:block;height:100%}
.s-near{top:100%;opacity:.42;-webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 20%,transparent 50%);mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 20%,transparent 50%)}
.s-near picture{clip-path:var(--near);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 var(--sfade),transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 var(--sfade),transparent)}
.s-far{top:47%;opacity:.2;-webkit-mask-image:linear-gradient(0deg,transparent 26%,#000 30%,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:linear-gradient(0deg,transparent 26%,#000 30%,rgba(0,0,0,.45) 50%,transparent 100%)}
.s-far picture{-webkit-mask:var(--far) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,#000 6%,#000 var(--sfade),transparent);-webkit-mask-composite:source-in;
  mask:var(--far) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,#000 6%,#000 var(--sfade),transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  .scene.in .s-lift,.scene.in .s-refl picture{animation:park 1.5s var(--glide) both}
  @supports (animation-timeline:scroll()){
    .s-lift::after{animation:mark-bar linear both;animation-timeline:scroll(root);animation-range:0 160vh}
  }
}
@keyframes park{from{transform:translate3d(7vw,0,0)}to{transform:none}}

.home header.site{position:absolute;top:0;left:0;right:0}
.arrival{display:flex;flex-direction:column;padding:calc(var(--sy) + var(--sh) * 1.3) 0 26px}
.arrival .wrap{width:100%}
.arrival-plate{padding:20px 20px 22px}
.arrival .ctas{margin-top:18px;flex-wrap:nowrap}
.arrival .ctas .btn{flex:1 1 0;padding-inline:8px}
.line{font-size:clamp(1rem,2.2vw,1.15rem);max-width:36ch;margin:0;font-weight:500;line-height:1.55}

/* every word after the arrival sits on something opaque, so the marks behind never fight the text */
.home .head{display:inline-block;padding:12px 20px 4px;background:#fff;border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,30,60,.07),0 1px 2px rgba(0,20,40,.07),0 14px 24px -20px rgba(0,30,70,.35)}
.home .head h2{margin-bottom:.4em}
.home .head p{padding-bottom:12px}
.home .lines.plate{padding:4px 22px}
.home .lines.plate div:first-child{border-top:0}
.home .lines.plate div:last-child{border-bottom:0}
.home .note .wrap>p{background:#fff;border-radius:12px;padding:16px 20px;box-shadow:0 0 0 1px rgba(0,30,60,.07)}
.home footer.site{background:#fff;box-shadow:0 -1px 0 rgba(0,30,60,.07);margin-top:24px}
.head h2::after{content:attr(data-text) / "";position:absolute;left:0;top:0;right:0;pointer-events:none;color:transparent;
  background:linear-gradient(102deg,rgba(141,184,230,0) 42%,rgba(141,184,230,.55) 48.5%,rgba(255,255,255,.6) 50%,rgba(141,184,230,.55) 51.5%,rgba(141,184,230,0) 56%) 120% 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text}

/* ---------- objects on the surface ---------- */
section{padding:56px 0}
.head{margin:0 0 22px;position:relative}
.head h2{position:relative;display:inline-block}
.head p{margin:0;max-width:56ch;font-size:.95rem}
.obj{position:relative}
/* contact shadow: tight and dark where the object touches, soft further out */
.obj::before{content:"";position:absolute;left:3%;right:3%;bottom:-16px;height:32px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%,rgba(0,22,44,.24),rgba(0,22,44,.07) 55%,rgba(0,22,44,0) 75%)}
.plate{position:relative;margin:0;background:#fff;border-radius:14px;
  background-image:linear-gradient(176deg,#fff 0%,#fff 60%,#F7F9FC 100%);
  box-shadow:0 0 0 1px rgba(0,30,60,.07),inset 0 -1px 0 rgba(0,30,60,.05),0 1px 2px rgba(0,20,40,.07),0 18px 30px -24px rgba(0,30,70,.35);
  -webkit-box-reflect:below 3px linear-gradient(rgba(255,255,255,0) calc(100% - 34px),rgba(255,255,255,.24))}
/* a fixed glint on every plate's top edge, as if under the same light bar */
.plate::after{content:"";position:absolute;left:8%;right:30%;top:0;height:1px;pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 40%,rgba(141,184,230,.9) 60%,rgba(255,255,255,0))}
.lacquer{color:#fff;background:#000;background-image:
  linear-gradient(168deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 22%),
  linear-gradient(168deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.07) 61%,rgba(255,255,255,0) 64%),
  linear-gradient(180deg,#000 60%,#06121F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 3px rgba(0,0,0,.25)}

/* scroll-driven glide: slides in, overshoots a hair, settles. Shadow lands with it. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .obj{view-timeline:--obj block;animation:glide-l both linear;animation-timeline:--obj;animation-range:entry 0% entry 58vh}
    .obj.r{animation-name:glide-r}
    .obj::before{animation:touchdown both linear;animation-timeline:--obj;animation-range:entry 0% entry 58vh}
    /* The page can end before the last block has travelled 58vh, so it lands once fully on screen. */
    main>section:last-of-type .obj,main>section:last-of-type .obj::before{animation-range:entry 0% entry min(58vh,100%)}
    .head{animation:glide-head both linear;animation-timeline:view();animation-range:entry 0% entry 40vh}
    .head h2::after{animation:sheen both linear;animation-timeline:view();animation-range:entry 10% exit 40%}
  }
  /* Arrival copy is readable on first paint; reserve glide for the later content blocks. */
  /* no scroll timelines (Firefox): site.js adds .io and glides each object once with IntersectionObserver */
  .io .obj{transition:transform 1.3s var(--glide)}
  .io .obj:not(.in){transform:translate3d(-34vw,0,0) rotate(-1.5deg)}
  .io .obj.r:not(.in){transform:translate3d(34vw,0,0) rotate(1.5deg)}
  .io .obj.now{transition:none}
}
@keyframes glide-l{
  0%{transform:translate3d(-46vw,0,0) rotate(-2.2deg);animation-timing-function:cubic-bezier(.12,.7,.25,1)}
  74%{transform:translate3d(.9vw,0,0) rotate(.2deg);animation-timing-function:ease-in-out}
  88%{transform:translate3d(-.25vw,0,0) rotate(-.04deg)}
  100%{transform:none}}
@keyframes glide-r{
  0%{transform:translate3d(46vw,0,0) rotate(2.2deg);animation-timing-function:cubic-bezier(.12,.7,.25,1)}
  74%{transform:translate3d(-.9vw,0,0) rotate(-.2deg);animation-timing-function:ease-in-out}
  88%{transform:translate3d(.25vw,0,0) rotate(.04deg)}
  100%{transform:none}}
@keyframes touchdown{0%{opacity:.15;transform:scaleX(1.25) translateY(10px)}74%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes glide-head{0%{transform:translate3d(-12vw,0,0)}100%{transform:none}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- services ---------- */
.services{list-style:none;padding:6px 0}
.services li{display:grid;grid-template-columns:44px 1fr;gap:4px 18px;padding:22px 22px;align-items:start}
.services li+li{border-top:1px solid var(--hair)}
.services img{width:44px;height:44px;object-fit:contain}
.services p{margin:0;color:var(--quiet);font-size:.95rem}

/* ---------- before/after ---------- */
.photo-plate{padding:10px;border-radius:16px}
.carousel{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;scrollbar-width:none;border-radius:8px}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;margin:0}
.compare{position:relative;aspect-ratio:4/3;max-height:600px;width:100%;border-radius:8px;overflow:hidden;background:#dfe7f1;user-select:none;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 18px rgba(255,255,255,.9);pointer-events:none}
.compare .divider::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:800;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.25)}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* The native range is transparent; paint its focus inside the visible frame, including at 0/100. */
.compare:focus-within::after{content:"";position:absolute;inset:0;border:3px solid var(--blue);border-radius:inherit;pointer-events:none;z-index:1}
.compare .tag{position:absolute;top:12px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.78);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.compare .tag.b{left:12px}.compare .tag.a{right:12px;background:var(--blue)}
.slide figcaption{padding:12px 6px 4px;color:var(--quiet);font-size:.9rem}
.cbtn{display:none;position:absolute;top:calc(50% - 46px);width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.4rem;font-weight:800;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.22);cursor:pointer;z-index:2}
.cbtn.prev{left:-14px}.cbtn.next{right:-14px}
.dots{display:flex;justify-content:center;margin-top:2px}
/* 24px tap target around a 10px dot */
.dots button{width:24px;height:24px;border-radius:50%;border:0;background:#c3d0e0;background-clip:content-box;cursor:pointer;padding:7px}
.dots button[aria-current=true]{background:var(--blue);background-clip:content-box;width:40px;border-radius:12px}

/* ---------- book: the black lacquer plate ---------- */
.book-plate{padding:28px 22px;display:grid;gap:22px}
.book-plate ol{margin:0;padding-left:1.3em;color:#E4E8EC;display:grid;gap:6px}
.book-plate ol li::marker{color:#8DB8E6;font-weight:700}
.book-plate .small{margin:0;font-size:.86rem;color:#C9CED4}
.book-plate a:not(.btn){color:#fff}
.scheduler{border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:22px;background:rgba(255,255,255,.04)}
.scheduler.pending{border-style:dashed}
.scheduler p{margin:0 0 14px;color:#E4E8EC}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:40px}
.lines{margin:0;display:grid}
.lines div{display:grid;gap:2px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.lines div:first-child{border-top:1px solid rgba(0,0,0,.14)}
.lines dt{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-deep)}
.lines dd{margin:0;font-size:clamp(1.15rem,4.6vw,1.9rem);font-weight:600;letter-spacing:.04em;word-break:break-word}
.lines dd a{text-decoration:none}
.lines dd a:hover{text-decoration:underline;text-decoration-color:var(--blue)}
.lines small{display:block;font-size:.85rem;font-weight:500;letter-spacing:0;color:var(--quiet)}
form.quote{display:grid;gap:12px;padding:24px}
form.quote label{display:block;font-size:.72rem;color:var(--quiet);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
form.quote input,form.quote select,form.quote textarea{font:inherit;padding:13px 14px;border-radius:8px;border:1px solid #B9C3CE;background:#fff;color:var(--ink);width:100%}
.hp{position:absolute;left:-5000px}
.form-status{min-height:1.4em;color:var(--blue-deep);font-weight:600;margin:0}

/* ---------- conditional blocks ---------- */
.note p{margin:0;color:var(--quiet);font-size:.92rem;max-width:62ch}
.reviews{display:grid;gap:28px}
.reviews .plate{padding:22px}
.reviews blockquote{margin:0}.reviews p{margin:0}
.reviews figcaption{margin-top:10px;font-weight:700}
.owner-plate{padding:22px;display:grid;gap:22px}
.owner-plate p{color:var(--quiet)}
.owner{width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.faq{padding:4px 22px}
details{padding:16px 0}
details+details{border-top:1px solid var(--hair)}
summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-weight:700;font-size:1.2rem;line-height:1.2}
details[open] summary::after{content:"\2212"}
details p{color:var(--quiet);margin:.6em 0 0}

/* ---------- other pages ---------- */
.plain{padding:32px 0 56px}
.prose{padding:28px 24px;max-width:68ch}
.prose h1{font-size:clamp(1.3rem,4vw,2rem);letter-spacing:.22em;margin:0 0 .6em}
.lead{font-size:1.05rem;color:var(--quiet)}

/* Placeholder chips (preview builds only) */
.todo{background:#FFF4CC;color:#5c4500;padding:2px 6px;border-radius:4px;font-weight:700;font-size:.78rem;letter-spacing:0;text-transform:none;white-space:normal;vertical-align:middle}

/* ---------- Book / Text / Call: a black lacquer bar, always in reach ---------- */
.sticky-cta{transition:transform .6s var(--glide),opacity .4s,visibility .6s;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;gap:8px;padding:8px;border-radius:999px;
  background:#000;background-image:linear-gradient(175deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%),linear-gradient(90deg,rgba(255,255,255,0) calc(var(--lx,30%) - 12%),rgba(255,255,255,.14) var(--lx,30%),rgba(255,255,255,0) calc(var(--lx,30%) + 12%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 28px -10px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.3)}
.sticky-cta.away:not(:focus-within){transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden}
.sticky-cta .btn{flex:1;padding:13px 10px;box-shadow:none}
.sticky-cta .btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.sticky-cta .btn.ghost:hover{background:#fff;color:var(--ink)}

@media (min-width:760px){
  .wrap{padding:0 40px}
  .nav nav{display:flex}
  .home .nav{min-height:64px}
  section{padding:64px 0}
  .m-tag{width:80%}
  /* Keep the wordmark at least the existing 1rem body size when a wide window becomes very short. */
  .home{--mw:min(1060px,100vw - 120px,max(11.14rem,(100svh - 330px) * 2.1));--mx:calc((100vw - var(--mw)) / 2);--my:calc(104px + 6svh);
    /* the vehicles: foot ~120px above the screen's bottom (room for their reflection), right of centre under the tagline */
    --mb:calc(var(--my) + var(--mw) * .283);--sb:min(100svh - 120px,var(--mb) + var(--mw) * .38);
    --sh:max(0px,min(var(--mw) * .3,var(--sb) - var(--mb) + 6px));--sw:calc(var(--sh) * 2.01);
    --sx:calc(min(100vw,var(--mx) + var(--mw) + 60px) - var(--sw));--sy:calc(var(--sb) - var(--sh));--sfade:86%}
  .arrival{min-height:100svh;padding:calc(var(--my) + var(--mw) * .42) 0 28px}
  .arrival .wrap{margin-top:auto}
  .arrival .ctas .btn{flex:1 1 0;padding-inline:12px}
  /* the plate keeps to the left, so the vehicles and their reflection stand clear beside it */
  .arrival-plate{max-width:min(470px,var(--sx) - (100vw - min(1120px,100vw)) / 2 - 56px);padding:22px 26px}
  .arrival .ctas{margin-top:18px}
  .services{display:grid;grid-template-columns:1fr 1fr;padding:0}
  .services li{padding:30px 32px;grid-template-columns:52px 1fr}
  .services img{width:52px;height:52px}
  .services li+li{border-top:0}
  .services li:nth-child(n+3){border-top:1px solid var(--hair)}
  .services li:nth-child(even){border-left:1px solid var(--hair)}
  .cbtn{display:block}
  .photo-plate{padding:14px}
  .book-plate{grid-template-columns:1fr 1fr;padding:40px;align-items:start;column-gap:40px}
  .book-plate .small{grid-column:1 / -1}
  .contact-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
  .reviews{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .owner-plate{grid-template-columns:minmax(0,420px) 1fr;padding:32px}
  .faq{padding:8px 32px}
  .prose{padding:44px 48px}
  .sticky-cta{left:auto;right:28px;bottom:24px;width:360px}
  /* the section headings sit in a left column, objects to the right: content glides in beside its label */
  #services .wrap,#work .wrap,#book .wrap,#contact .wrap,#faq .wrap,#owner .wrap,#reviews .wrap{display:grid;grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1100px){
  #services .wrap,#work .wrap,#book .wrap,#contact .wrap,#faq .wrap,#owner .wrap,#reviews .wrap{grid-template-columns:250px minmax(0,1fr);column-gap:48px;align-items:start}
  .head{margin-top:8px}
  .head h2{font-size:1.2rem;letter-spacing:.3em}
  .head p{font-size:.88rem;margin-top:10px}
  .contact-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sticky-cta,.scene,.m-stack,.surface canvas,.io .obj{transition:none}}