/* ============================================================================
   PRISTINE MOVING — v2
   Family: print-tech on a coastal ground. Signature move: the departure wall.
   Spine: water -> horizon -> sand -> ground -> dark band.
   ============================================================================ */
:root{
  --bone:#f4f1e8; --bone-2:#ebe6d9;
  --tan:#e0d2b6; --tan-lit:#efe4cd; --tan-deep:#cbb994;
  --sand:#e7dac0; --sand-lo:#f0e7d5;
  --navy:#12304d; --navy-mid:#1b3d61; --navy-deep:#0b1f33;
  --ink:#241f18; --gold:#c4922e; --gold-lit:#dcae4a; --signal:#7bd389;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-rev:420ms;
  --wrap:1280px;
  --gutter:max(5vw, calc((100vw - var(--wrap)) / 2 + 5vw));
  --navh:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--navh)}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:6}
.pad{padding:clamp(76px,9vw,128px) 0;position:relative}   /* MUST stay positioned: .gridlines/.contours anchor to it */
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:22px;opacity:.72}
.kick i{display:block;width:44px;height:1px;background:currentColor;opacity:.5;font-style:normal}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:-.035em;font-weight:800;max-width:19ch;position:relative;
  font-variation-settings:'opsz' 72}
/* the second clause is the brand blue, not a faded grey — it was reading flat */
h2 em{font-style:normal;font-weight:400;color:var(--navy);opacity:.78}
.mantra h2 em,#quote h2 em,#fragile h2 em{color:var(--tan);opacity:.78}
/* a gold rule + index mark under every section title, so the eye has somewhere to land */
h2::after{content:"";display:block;width:64px;height:3px;margin-top:22px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(196,146,46,0))}
.kick{color:var(--navy)}
.kick b{color:var(--gold);font-weight:700}
.kick .star{color:var(--gold);font-size:13px;line-height:1;transform:translateY(1px)}
.mantra .kick,#quote .kick{color:var(--tan)}

/* ---- glow border: rotating conic gradient, masked to the edge only ---- */
@property --gb{syntax:'<angle>';inherits:false;initial-value:0deg}
.glowbox{position:relative;display:inline-block;padding:22px 30px;border-radius:16px;isolation:isolate}
.glowbox::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--gb),
    rgba(18,48,77,.28) 0deg, rgba(18,48,77,.28) 210deg,
    rgba(220,174,74,.5) 300deg, var(--gold-lit) 348deg, #fff3d6 356deg,
    var(--gold-lit) 360deg, rgba(18,48,77,.28) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:gbspin 4.6s linear infinite;
}
.glowbox:hover::before{animation-duration:1.1s}
.glowbox::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 40px -12px rgba(196,146,46,.55) inset;background:rgba(255,255,255,.26)}
@keyframes gbspin{to{--gb:360deg}}
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .glowbox::before{background:none;border:1.5px solid rgba(196,146,46,.6);padding:0}
}
h3{font-size:20px;font-weight:700;letter-spacing:-.018em;font-variation-settings:'opsz' 24}
p{line-height:1.62}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;max-width:58ch;margin-top:20px;opacity:.82}
.ctarow{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;align-items:center}
.ctanote{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.rv{opacity:0;transform:translateY(14px);transition:opacity var(--t-rev) var(--ease),transform var(--t-rev) var(--ease)}
.rv.in{opacity:1;transform:none}

/* grounds */
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.3}
.sandbg{background:linear-gradient(180deg,var(--sand) 0%,var(--sand-lo) 62%,var(--sand) 100%)}
.paperbg{background:var(--bone)}
.gridlines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(18,48,77,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,48,77,.05) 1px,transparent 1px);
  background-size:34px 34px}
.contours{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.75}

/* buttons — glass, tints to gold glass. never a solid fill. */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-block;
  border:1px solid rgba(224,210,182,.5);cursor:pointer;border-radius:999px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 30px;color:var(--bone);background:rgba(244,241,232,.1);text-decoration:none;
  backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);
  transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,rgba(220,174,74,.42),rgba(196,146,46,.30));opacity:0;transition:opacity .34s var(--ease)}
.btn:hover,.btn:focus-visible{color:#fff7e6;border-color:rgba(220,174,74,.9);box-shadow:0 14px 38px -16px rgba(196,146,46,.7),inset 0 0 22px rgba(220,174,74,.14)}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.btn.dark{border-color:rgba(18,48,77,.35);color:var(--navy);background:rgba(255,255,255,.44)}
.btn.dark:hover,.btn.dark:focus-visible{color:var(--navy-deep);border-color:rgba(196,146,46,.95);box-shadow:0 14px 38px -18px rgba(196,146,46,.55)}
.btn.sm{padding:14px 20px;font-size:11px;min-height:44px;display:inline-flex;align-items:center}
.btn.ghost{background:transparent}
.magwrap{display:inline-block;padding:14px;margin:-14px}

/* ============================================================================
   PERSISTENT NAV — transparent over the hero, solid once you leave it
   ============================================================================ */
.topnav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--navh);display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent}
.topnav.solid{background:rgba(11,31,51,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(224,210,182,.18);box-shadow:0 10px 34px -22px rgba(0,0,0,.9)}
.topnav .in{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:26px}
.topnav .links{margin-left:auto;display:flex;gap:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.8)}
.topnav .links a{text-decoration:none;position:relative;padding-bottom:3px}
.topnav .links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-lit);transform:scaleX(0);transform-origin:0 50%;transition:transform .26s var(--ease)}
.topnav .links a:hover::after,.topnav .links a.here::after{transform:scaleX(1)}
body[data-page="services"] [data-nk="services"]::after,
body[data-page="route"] [data-nk="route"]::after,
body[data-page="quote"] [data-nk="quote"]::after,
body[data-page="about"] [data-nk="about"]::after{transform:scaleX(1)}
.topnav .ph{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--bone);text-decoration:none;white-space:nowrap}
.navcta{flex:none}
.wm{display:flex;align-items:baseline;gap:11px;font-weight:700;font-size:21px;letter-spacing:.02em;color:var(--bone);text-decoration:none;flex:none}
.wm .name{position:relative;display:inline-block;padding-bottom:9px}
.wm small{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;font-weight:400;color:var(--tan);text-transform:uppercase}
.wave{position:absolute;left:0;bottom:0;width:100%;height:9px;overflow:hidden;transform:scaleY(.04);transform-origin:50% 50%;transition:transform 1100ms var(--ease)}
.wm .name.swell .wave{transform:scaleY(1)}
.wm:hover .name .wave{transform:scaleY(1.45)}
.wave path{fill:none;stroke:var(--tan);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wave g{animation:swim 3.6s linear infinite}
@keyframes swim{from{transform:translateX(0)}to{transform:translateX(-20px)}}
.menubtn{display:none;margin-left:auto;background:transparent;border:1px solid rgba(224,210,182,.4);border-radius:999px;
  width:44px;height:44px;cursor:pointer;color:var(--bone);align-items:center;justify-content:center}
.menubtn i{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.menubtn i::before{top:-5px}.menubtn i::after{top:5px}
.sheet{position:fixed;inset:var(--navh) 0 auto 0;z-index:59;background:rgba(11,31,51,.97);backdrop-filter:blur(16px);
  padding:22px 28px 30px;display:none;flex-direction:column;gap:16px;border-bottom:1px solid rgba(224,210,182,.2)}
.sheet.open{display:flex}
.sheet a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-decoration:none;padding:8px 0}

/* ============================================================================
   01 · HERO
   ============================================================================ */
.stage{position:relative;min-height:100vh;overflow:hidden;background:var(--navy-deep);display:flex;flex-direction:column;padding-top:var(--navh);width:100vw;max-width:100%;margin-left:calc(50% - 50vw)}
.plx{position:absolute;inset:0;z-index:0}
.still{position:absolute;inset:-1px;background-color:#12304d;background-size:cover;background-position:50% 56%;background-repeat:no-repeat}
.vid{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:50% 56%;opacity:0;transition:opacity 900ms var(--ease)}
.vid.ready{opacity:1}
.grade{position:absolute;inset:0;z-index:1;pointer-events:none}
.grade::before{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.6}
.grade::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(220,174,74,.18),transparent 54%);mix-blend-mode:overlay}
/* The radial used to reach its full stop at the horizontal extremes, which painted
   dark navy bands down both edges that read as borders. Pushed the falloff well
   past the frame and capped the alpha so the corners darken without banding. */
.vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(190% 135% at 50% 44%,transparent 55%,rgba(11,31,51,.34) 100%),
             linear-gradient(180deg,rgba(11,31,51,.78) 0%,rgba(11,31,51,.18) 28%,rgba(11,31,51,.38) 74%)}
.fadeout{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(231,218,192,.42) 60%,var(--sand) 100%)}
.bgtoggle{position:absolute;left:var(--gutter);bottom:26px;z-index:7;display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);
  border:1px solid rgba(224,210,182,.34);border-radius:999px;padding:9px 14px;background:rgba(11,31,51,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s var(--ease),background .2s var(--ease)}
.bgtoggle:hover{border-color:var(--gold-lit);background:rgba(11,31,51,.62)}
.bgtoggle b{color:rgba(244,241,232,.55);font-weight:400}
.bgtoggle span{color:var(--bone);font-weight:700}
.bgtoggle i{font-style:normal;color:var(--gold-lit);font-size:12px}
.bgtoggle[hidden]{display:none}
.tb{position:absolute;right:var(--gutter);top:calc(var(--navh) + 26px);z-index:6;display:flex;border:1px solid rgba(224,210,182,.34);font-family:var(--mono);color:var(--tan)}
.tb div{padding:7px 13px;border-left:1px solid rgba(224,210,182,.34);display:grid;gap:3px}
.tb div:first-child{border-left:none}
.tb b{font-size:9.5px;letter-spacing:.16em;font-weight:500;color:var(--bone)}
.tb span{font-size:8.5px;letter-spacing:.14em;opacity:.65}
.marg{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(244,241,232,.6);padding-bottom:24px;border-bottom:1px solid rgba(224,210,182,.2);margin-bottom:32px}
.marg .clk{margin-left:auto;color:var(--tan)}
.mid{flex:1;display:flex;align-items:center;padding:20px 0 76px}
.wall{display:grid;gap:14px}
.line{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.line.sm{margin-top:4px}
.line.sm+.line.sm{margin-top:-4px}
.line .k{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.5);width:92px;flex:0 0 92px}
.big{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:flex-start;perspective:520px}
.big b{display:inline-block;width:.74em;height:1.15em;line-height:1.15em;text-align:center;vertical-align:top;
  font:700 clamp(26px,5.6vw,80px)/1.15 var(--mono);border-radius:3px;position:relative;
  background:rgba(244,241,232,.13);color:rgba(244,241,232,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(224,210,182,.16);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transform-style:preserve-3d}
.big b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(11,31,51,.45);z-index:2}
.big b.turn{animation:turn 140ms linear}
@keyframes turn{0%{transform:rotateX(0)}49%{transform:rotateX(-88deg)}50%{transform:rotateX(-92deg)}100%{transform:rotateX(-180deg)}}
.big.dest b{background:rgba(224,210,182,.52);color:var(--navy);
  box-shadow:inset 0 -2px 0 rgba(36,31,24,.14),inset 0 1px 0 rgba(255,255,255,.44),inset 0 0 0 1px rgba(224,210,182,.46);
  backdrop-filter:blur(5px) saturate(.85);-webkit-backdrop-filter:blur(5px) saturate(.85);
  text-shadow:0 1px 0 rgba(255,255,255,.24)}
.big.dest b::after{background:rgba(18,48,77,.32)}
.line.sm .big b{font-size:clamp(14px,1.7vw,26px)}
.big b.ok{color:var(--signal)}
.h1{font-size:clamp(17px,1.6vw,21px);line-height:1.55;font-weight:400;color:rgba(244,241,232,.88);max-width:60ch;margin-top:32px}
.h1 strong{font-weight:700;color:var(--bone)}
.qstrip{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;margin-top:26px;max-width:820px;align-items:end}
.qstrip label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;color:rgba(244,241,232,.62)}
.qstrip input{width:100%;font-family:var(--sans);font-size:16px;padding:15px 18px;border-radius:999px;
  border:1px solid rgba(224,210,182,.36);background:rgba(11,31,51,.45);color:var(--bone);outline:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .18s var(--ease),background .18s var(--ease)}
.qstrip input::placeholder{color:rgba(244,241,232,.42)}
.qstrip input:focus{border-color:var(--tan);background:rgba(11,31,51,.62)}
.trust{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(244,241,232,.72)}
.trust span{display:flex;align-items:center;gap:8px}
.trust span::before{content:"";width:5px;height:5px;background:var(--gold-lit);border-radius:50%;flex:none}

/* ============================================================================
   PAGE HERO — the inner pages get a band, not the full departure wall.
   The wall is the home page's signature and it only works once.
   ============================================================================ */
.phero .plx,.phero .grade,.phero .vig,.phero .fadeout{position:absolute;inset:0}
.phero .fadeout{inset:auto 0 0 0;height:34%}
.phero{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--bone);
  min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;padding:var(--navh) 0 clamp(44px,6vw,76px)}
.phero .wrap{z-index:6}
.pht{font-size:clamp(34px,5.4vw,72px);line-height:1.02;letter-spacing:-.038em;font-weight:800;
  font-variation-settings:'opsz' 84;max-width:17ch;color:var(--bone)}
.pht::after{content:"";display:block;width:72px;height:3px;margin-top:24px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(196,146,46,0))}

/* ---- home: the four routes into the rest of the site ---- */
.pathgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:44px}
.pathcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;text-decoration:none;
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.3));
  border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px -26px rgba(18,48,77,.5);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.pathcard:hover{transform:translateY(-5px);box-shadow:0 34px 66px -28px rgba(18,48,77,.66);border-color:rgba(196,146,46,.6)}
.pshot{display:block;height:152px;background-size:cover;background-position:50% 55%;position:relative}
.pshot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,48,77,.18),rgba(18,48,77,.6));
  mix-blend-mode:multiply}
.pbody{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.pathcard .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:9px}
.pathcard h3{color:var(--navy);margin-bottom:8px}
.pathcard p{font-size:14px;color:rgba(36,31,24,.78);line-height:1.55}
.pathcard .more{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:flex;gap:8px;align-items:center}
.pathcard .more span{transition:transform .26s var(--ease)}
.pathcard:hover .more span{transform:translateX(5px)}

/* ============================================================================
   TICKER
   ============================================================================ */
.ticker{background:var(--navy-deep);color:var(--tan);overflow:hidden;border-top:1px solid rgba(224,210,182,.16);border-bottom:1px solid rgba(224,210,182,.16)}
.ticker .rail{display:flex;white-space:nowrap;animation:roll 42s linear infinite;will-change:transform}
.ticker:hover .rail{animation-play-state:paused}
.ticker span{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;padding:13px 0;display:inline-flex;align-items:center}
.ticker span::after{content:"·";opacity:.4;margin:0 26px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================================
   PHOTO SLOTS + B-ROLL BANDS
   ============================================================================ */
.shot{position:relative;overflow:hidden;border-radius:14px;background:
  linear-gradient(140deg,rgba(18,48,77,.9),rgba(11,31,51,.96));
  display:grid;place-items:center;text-align:center;border:1px solid rgba(224,210,182,.24)}
.shot::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(224,210,182,.24);border-radius:8px;pointer-events:none}
.shot .lab{position:relative;z-index:2;align-self:end;justify-self:start;text-align:left;padding:22px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(224,210,182,.72);line-height:1.9}
.shot .lab b{display:block;color:var(--gold-lit);font-weight:500;margin-bottom:6px}
.shot .gh{position:absolute;inset:0 0 34% 0;display:grid;place-items:center;opacity:.14}
.shot .gh svg{width:42%;height:auto}
.shot .gh *{stroke:var(--tan);fill:none;stroke-width:1.2}

.band{position:relative;height:clamp(240px,34vw,420px);overflow:hidden;background:var(--navy-deep)}
.band video,.band .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.band .still{background-size:cover;background-position:50% 56%;background-repeat:no-repeat;background-color:var(--navy-deep)}
.band video{opacity:0;transition:opacity .8s var(--ease)}
.band video.ready{opacity:1}
.band .grade{z-index:2}
.band .cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:26px 28px}
.band .cap .in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.band .cap p{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan)}
.band .cap .btn{margin-left:auto}
.band::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,51,.5),rgba(11,31,51,.22) 40%,rgba(11,31,51,.78))}

/* ============================================================================
   SERVICES — 3D ring. Two-sided faces, backface hidden, one transform on the
   ring itself. No per-frame opacity churn: that is what made it flicker.
   ============================================================================ */
.ringclip{position:relative;overflow:hidden;margin-top:44px;border-radius:18px}
.ringwrap{position:relative;height:clamp(300px,46vw,520px);perspective:3000px;perspective-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;--cw:268px;--ch:330px}
.ringwrap.drag{cursor:grabbing}
.ring{position:relative;width:var(--cw);height:var(--ch);transform-style:preserve-3d;will-change:transform}
.rslot{position:absolute;inset:0;transform-style:preserve-3d}
.rface{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;
  background-size:cover;background-position:50% 50%;background-color:var(--navy);
  box-shadow:0 10px 30px rgba(0,0,0,.35);display:block;
}
.rface::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,48,77,.28),rgba(11,31,51,.72));
  box-shadow:inset 0 0 0 1px rgba(224,210,182,.34)}
.rback{transform:rotateY(180deg);filter:brightness(.35)}
/* label sits on the picture while the ring turns */
.rlab{position:absolute;left:0;right:0;top:0;z-index:2;padding:16px 18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(224,210,182,.82);line-height:1.8;transition:opacity .4s var(--ease)}
.rlab b{display:block;color:var(--gold-lit);font-weight:500;margin-bottom:4px}
/* the text panel slides up when the ring is held */
.rbody{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 20px 20px;
  background:linear-gradient(180deg,rgba(244,241,232,0),rgba(244,241,232,.95) 22%,rgba(244,241,232,.99));
  transform:translateY(102%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.ringwrap.held .rbody{transform:none;opacity:1}
.ringwrap.held .rlab{opacity:0}
.rbody .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:7px}
.rbody h3{color:var(--navy);font-size:18px;margin-bottom:6px}
.rbody p{font-size:13.5px;color:rgba(36,31,24,.8);line-height:1.5}
.rbody .more{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block}
.rnav{display:flex;gap:8px;margin-top:22px;align-items:center}
/* flex:none matters — in the .rnav row these were being squeezed to 37px wide,
   which is under the 44px floor on touch. */
.arw{width:44px;height:44px;min-width:44px;flex:0 0 44px;border-radius:999px;border:1px solid rgba(18,48,77,.3);background:rgba(255,255,255,.45);
  cursor:pointer;display:grid;place-items:center;color:var(--navy);transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.arw:hover{background:rgba(255,255,255,.85);transform:translateY(-2px);border-color:var(--gold)}
.arw svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chint{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:10px}
.chint .pp{width:7px;height:7px;border-radius:50%;background:var(--gold);transition:opacity .2s}
.held .chint .pp{opacity:.25}

/* ============================================================================
   FRAGILE — stained glass. Real Voronoi panes with leading, and a light that
   follows the cursor. Built in SVG, not WebGL: a shader has no business on a
   client's production site, and this survives a phone with no GPU.
   ============================================================================ */
#fragile{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--bone)}
.glass{position:absolute;inset:0;z-index:0}
.glass svg{width:100%;height:100%;display:block}
.glass .pane{stroke:#3a2d0e;stroke-width:2.6;stroke-linejoin:round}
/* Brass came, not black lead — three passes: a dark metal core, a lit top edge
   and a shadowed under edge. That bevel is most of what separates real glass
   from coloured shapes, and the gold ties it to the rest of the site. */
.glass .lead-core{fill:none;stroke:#5c4714;stroke-width:6.5;stroke-linejoin:round;opacity:.92}
.glass .lead-hi{fill:none;stroke:rgba(233,200,120,.62);stroke-width:1.7;stroke-linejoin:round;
  transform:translate(-.9px,-.9px)}
.glass .lead-lo{fill:none;stroke:rgba(0,0,0,.55);stroke-width:1.8;stroke-linejoin:round;
  transform:translate(1px,1.1px)}
.glass .cames{fill:none;stroke:rgba(255,240,200,.14);stroke-width:1.1}
/* draw marks: already feathered by their own gradients, so no blend mode here —
   an overlay group is what turned these into a uniform comb before */
.glass .reed{opacity:.9}
.glass .spec{mix-blend-mode:screen;opacity:.62}
/* the light: a soft warm pool that tracks the pointer and lifts the panes it crosses */
/* the backlight: a hot core, a wide warm bloom, and a faint cool spill.
   Screen-blended so it lifts the glass rather than washing it out. */
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(240px circle at var(--lx,50%) var(--ly,42%),rgba(255,247,226,.58),transparent 68%),
    radial-gradient(620px circle at var(--lx,50%) var(--ly,42%),rgba(255,214,150,.26),rgba(240,196,120,.09) 46%,transparent 72%),
    /* a fixed low sun off the right edge — sea glass on a windowsill, not a
       lamp. It sits on the open side, away from the reading column. */
    radial-gradient(880px circle at 86% 26%,rgba(255,224,168,.24),transparent 64%),
    radial-gradient(1200px circle at 74% 52%,rgba(255,236,200,.1),transparent 70%)}
/* dust and imperfection in the light — glass is never clean */
.glassdust{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E")}
/* a leaded outer frame, so the panel reads as a window in a wall */
.glassframe{position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 10px rgba(5,14,23,.85),
             inset 0 0 0 12px rgba(255,236,190,.16),
             inset 0 0 70px 20px rgba(0,0,0,.5)}
/* Base wash: only enough to seat the panel top and bottom. It used to run
   .72/.50/.86 across the whole panel, which flattened the bone and tan panes
   into blue-grey — the reading column is handled by ::after instead. */
.glassveil{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,31,51,.40),rgba(11,31,51,.08) 46%,rgba(11,31,51,.48))}
/* A second, LOCAL scrim behind the reading column only. Measured: the brightest
   pane under the body copy put 19px text at 3.77:1, under the 4.5:1 floor.
   Darkening the whole panel would kill the glass, so this feathers out before
   it reaches the photo and the outer panes, which stay at full saturation. */
.glassveil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,18,31,.56) 0%,rgba(6,18,31,.54) 50%,rgba(6,18,31,0) 72%)}
@media (max-width:980px){ .glassveil::after{background:rgba(6,18,31,.56)} }
#fragile .wrap{z-index:6}
.fragrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.frlist{display:grid;gap:14px;margin-top:34px}
.frlist div{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:rgba(244,241,232,.86)}
.frlist b{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--gold-lit);padding-top:4px;flex:none;width:26px}
.frpane{position:relative;border-radius:14px;overflow:hidden;min-height:330px;
  border:1px solid rgba(224,210,182,.28);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.frpane .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:4;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tan);
  background:linear-gradient(180deg,transparent,rgba(11,31,51,.86))}
@media (max-width:980px){.fragrid{grid-template-columns:1fr;gap:34px}}

/* ============================================================================
   MANTRA
   ============================================================================ */
.mantra{position:relative;background:var(--navy-deep);color:var(--bone);overflow:hidden;min-height:100vh;display:grid;place-items:center;text-align:center}
/* the truck photo, muted right down — it should register as texture, not a picture.
   The source is only 373x249, so it is blurred on purpose rather than upscaled sharp. */
.mantra .photobg{position:absolute;inset:-4%;z-index:0;background:url('../media/truck-ramp.jpg') 50% 46%/cover no-repeat;
  filter:blur(3px) saturate(.35) brightness(.58);opacity:.3;transform:scale(1.06)}
.mantra .photobg::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.72}
.mantra .photoveil{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,rgba(11,31,51,.5),rgba(11,31,51,.93) 78%)}
.mantra .contours,.mgrid{z-index:2}
.mfocus,.mbody,.mantra .wrap{z-index:5}
.mantra .contours{opacity:.13}
.mgrid{position:absolute;inset:-10% -14%;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;overflow:hidden}
.mgrid{gap:0;align-content:center}
.mgrid .row{display:flex;gap:3.2vw;white-space:nowrap;font-weight:700;font-size:clamp(22px,3.4vw,50px);
  letter-spacing:-.02em;color:rgba(224,210,182,.13);line-height:1.5;margin:0}
/* one CSS animation, staggered by custom property — 396 WAAPI instances was the load hitch */
.mgrid span{opacity:0;will-change:transform,opacity;
  animation:mword 3.2s cubic-bezier(.22,1,.36,1) infinite both;
  animation-delay:calc(var(--d) * 1ms)}
.mgrid .row:nth-child(even) span{animation-name:mwordB}
@keyframes mword{
  0%{opacity:0;transform:translateX(30px) scale(1.3)}
  26%{opacity:1;transform:translateX(10px) scale(1)}
  60%{opacity:1;transform:translateX(-8px) scale(1)}
  100%{opacity:0;transform:translateX(-26px) scale(.9)}}
@keyframes mwordB{
  0%{opacity:0;transform:translateX(-30px) scale(1.3)}
  26%{opacity:1;transform:translateX(-10px) scale(1)}
  60%{opacity:1;transform:translateX(8px) scale(1)}
  100%{opacity:0;transform:translateX(26px) scale(.9)}}
.mgrid .row span{opacity:0;transform:scale(1.5)}
.mfocus{position:relative;z-index:4}
.mfocus .word{font-weight:700;font-size:clamp(38px,8.4vw,120px);letter-spacing:-.035em;line-height:1;color:var(--bone);opacity:0;transform:scale(1.28);filter:blur(10px)}
.mfocus .word b{color:var(--gold-lit);font-weight:700}
.mfocus .sub{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);margin-top:26px;opacity:0}
.mbody{position:relative;z-index:4;max-width:56ch;margin:32px auto 0;color:rgba(244,241,232,.8);font-size:16.5px;opacity:0}

/* ============================================================================
   HOW IT WORKS
   ============================================================================ */
#how{position:relative;overflow:visible}
.howgrid{display:grid;grid-template-columns:1fr 1.34fr;gap:clamp(40px,5vw,78px);align-items:start}
.steps{display:grid;gap:clamp(30px,7vh,68px);padding:10vh 0}
.step{position:relative;padding:22px 24px 22px 62px;cursor:pointer;border-radius:16px;
  opacity:.42;transition:opacity .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)}
.step:hover{opacity:.78;background:rgba(255,255,255,.4)}
.step.on{opacity:1;background:rgba(255,255,255,.62);transform:translateX(4px);
  box-shadow:0 20px 44px -30px rgba(18,48,77,.55)}
/* the marker rail: a dot per step, filling gold as it lights */
.step::before{content:"";position:absolute;left:24px;top:32px;width:13px;height:13px;border-radius:50%;
  border:1.5px solid rgba(18,48,77,.32);background:transparent;transition:all .4s var(--ease)}
.step.on::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(196,146,46,.18)}
.step::after{content:"";position:absolute;left:30px;top:50px;bottom:-34px;width:1.5px;
  background:linear-gradient(180deg,rgba(18,48,77,.2),rgba(18,48,77,0));transition:background .4s var(--ease)}
.step:last-of-type::after{display:none}
.step.on::after{background:linear-gradient(180deg,rgba(196,146,46,.6),rgba(196,146,46,0))}
.step .no{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--gold);margin-bottom:10px;display:flex;gap:10px;align-items:center}
.step .no i{display:block;width:0;height:1px;background:var(--gold);transition:width .45s var(--ease);font-style:normal}
.step.on .no i{width:30px}
.step h3{font-size:clamp(22px,2.3vw,30px);letter-spacing:-.028em;font-weight:800;font-variation-settings:'opsz' 32;color:var(--navy)}
.step p{font-size:16px;margin-top:11px;opacity:.8;max-width:40ch;line-height:1.6}
.planwrap{position:sticky;top:calc(50vh);transform:translateY(-50%)}
.planwrap .plan{width:100%}
.plan .ln{stroke:var(--navy);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.plan .th{stroke-width:1.9}
.plan .hair{stroke-width:.7;opacity:.5}
.plan .dash{stroke-dasharray:5 5;opacity:.5}
.plan .tx{fill:var(--navy);opacity:.5;font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.plan .amln{stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round}
.plan .fill-l{fill:rgba(18,48,77,.07)}
.plan .fill-g{fill:rgba(196,146,46,.14)}
.plan .fur{transition:transform .8s var(--ease),opacity .45s var(--ease)}

/* ============================================================================
   OUT OF STATE + GAME
   ============================================================================ */
.route{position:relative}
.routesvg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.routesvg .road{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-dasharray:11 8;opacity:.9}
.states{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* each state is a CTA: click fills the quote form with that destination.
   The fill is a radial reveal from the point you clicked. */
.states a{position:relative;overflow:hidden;isolation:isolate;text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border:1px solid rgba(18,48,77,.28);padding:13px 18px;border-radius:999px;background:rgba(255,255,255,.44);
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.states a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(220,174,74,.95),rgba(196,146,46,.75) 60%,rgba(196,146,46,.55));
  clip-path:circle(0% at var(--rx,50%) var(--ry,50%));
  transition:clip-path .55s var(--ease)}
.states a:hover,.states a:focus-visible{color:var(--navy-deep);border-color:rgba(196,146,46,.9);box-shadow:0 12px 30px -14px rgba(196,146,46,.6)}
.states a:hover::before,.states a:focus-visible::before{clip-path:circle(150% at var(--rx,50%) var(--ry,50%))}
.states a.picked{color:var(--navy-deep);border-color:var(--gold)}
.states a.picked::before{clip-path:circle(150% at 50% 50%)}
.gamewrap{margin-top:52px;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.7);box-shadow:0 26px 60px -32px rgba(18,48,77,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gamebar{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid rgba(18,48,77,.14);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(18,48,77,.66)}
.gamebar .lit{color:var(--gold);font-weight:700}
.gamebar .right{margin-left:auto;display:flex;gap:18px}
#run{width:100%;height:auto;display:block;background:transparent;touch-action:manipulation}
.gamefoot{padding:11px 18px;border-top:1px solid rgba(18,48,77,.14);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(18,48,77,.5);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.gamefoot .btn{margin-left:auto}

/* ============================================================================
   ESTIMATOR
   ============================================================================ */
.estgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center;margin-top:40px}
.picks{display:grid;gap:10px}
.pick{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--navy);
  border:1px solid rgba(18,48,77,.26);background:rgba(255,255,255,.42);border-radius:999px;padding:14px 20px;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.pick:hover{transform:translateX(3px);border-color:rgba(18,48,77,.5)}
.pick.on{background:rgba(18,48,77,.94);color:var(--bone);border-color:var(--navy)}
.pick .pc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;margin-left:auto;opacity:.6}
.truck .ln{stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.truck .hair{stroke-width:.7;opacity:.45}
.truck .tx{fill:var(--navy);font-family:var(--mono);font-size:9px;letter-spacing:.12em;opacity:.55}
.truck .load{opacity:0;transform:translateY(-16px);transform-box:fill-box;transform-origin:50% 100%;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.truck .load.in{opacity:1;transform:none}
.truck .bx{fill:rgba(196,146,46,.2);stroke:var(--navy);stroke-width:1.1}
.truck .bx2{fill:rgba(18,48,77,.09);stroke:var(--navy);stroke-width:1.1}
.truck .tape{stroke:var(--gold);stroke-width:1.1;fill:none}
.estread{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.estread b{color:var(--navy);font-weight:700}

/* ============================================================================
   CHAT
   ============================================================================ */
.chatwrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.chat{border-radius:24px;padding:24px 22px;position:relative;min-height:430px;display:flex;flex-direction:column;
  /* near-white ground so the grey and blue bubbles read as a phone thread
     rather than as two tinted cards floating on frosted glass */
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(252,250,246,.88));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 26px 60px -30px rgba(18,48,77,.6),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.chat .hd{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(18,48,77,.55);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(18,48,77,.14)}
.chat .hd .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 2s infinite}
.chat .hd .tag{margin-left:auto;color:var(--gold);font-weight:700}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.msgs{display:grid;gap:10px;align-content:start;flex:1}
.msg{max-width:80%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5;opacity:0;transform:translateY(12px) scale(.96)}
.msg.in{animation:pop .46s var(--ease) forwards}
@keyframes pop{to{opacity:1;transform:none}}
/* iMessage, so it's familiar on sight: their side grey on the left, your side
   blue on the right. The blue is one step down from Apple's #0B84FF — at the
   real value white text measures 3.65:1, under the 4.5:1 floor for 15px copy;
   #0A70DF measures 4.78:1 and still reads as *that* blue. */
/* The thread sits on the CUSTOMER's phone, so their lines are the blue ones on
   the right and Pristine's are grey on the left — the way round a visitor sees
   their own conversations. */
.msg.pm{background:#e9e9eb;color:#000;border-bottom-left-radius:5px;justify-self:start}
.msg.you{background:#0a70df;color:#fff;border-bottom-right-radius:5px;justify-self:end}
.msg .t{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;opacity:.55;margin-bottom:5px;text-transform:uppercase}
.msg.you .t{opacity:.8}
/* grey, left, tail down-left — the only typing indicator a phone shows you */
.typing{display:inline-flex;gap:5px;align-items:center;background:#e9e9eb;padding:14px 16px;border-radius:18px;border-bottom-left-radius:5px;justify-self:start;opacity:0}
.typing.in{opacity:1}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(18,48,77,.45);animation:bounce 1.25s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.cprog{display:flex;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(18,48,77,.14)}
.cprog i{height:2px;flex:1;background:rgba(18,48,77,.16);border-radius:2px;overflow:hidden;position:relative}
.cprog i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.cprog i.on::after{transform:scaleX(1);transition:transform .4s var(--ease)}

/* ============================================================================
   QUOTE / MANIFEST
   ============================================================================ */
#quote{background:var(--navy-deep);color:var(--bone);position:relative;overflow:hidden}
#quote .contours{opacity:.12}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.manifest{position:relative;background:linear-gradient(180deg,#f6f1e4,#ece3cf);color:var(--ink);
  padding:28px 26px 52px;border-radius:3px;box-shadow:0 34px 70px -30px rgba(0,0,0,.7)}
.manifest::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--navy) 0 14px,transparent 14px 26px);opacity:.85}
.manifest .mh{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(36,31,24,.5);border-bottom:1.5px solid var(--navy);padding:8px 0 12px;margin-bottom:16px}
.manifest .mh b{color:var(--navy)}
.mrow{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(36,31,24,.22)}
.mrow .mk{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(36,31,24,.5)}
.mrow .mv{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--navy)}
.stamp{position:absolute;right:22px;bottom:-16px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:rgba(18,48,77,.72);border:2.5px solid rgba(18,48,77,.55);padding:10px 14px;text-transform:uppercase;
  transform:rotate(-9deg);border-radius:3px;background:rgba(246,241,228,.9)}
.stamp.slam{animation:slam .5s var(--ease) backwards}
@keyframes slam{0%{transform:rotate(-14deg) scale(3.2);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:1}}
.qform{display:grid;gap:14px}
.qform label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;color:rgba(244,241,232,.6)}
.qform input,.qform textarea{width:100%;font-family:var(--sans);font-size:16px;padding:15px 18px;border-radius:999px;
  border:1px solid rgba(224,210,182,.32);background:rgba(244,241,232,.07);color:var(--bone);outline:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .18s var(--ease)}
.qform textarea{min-height:110px;resize:vertical;border-radius:18px}
.qform input:focus,.qform textarea:focus{border-color:var(--tan)}
.ok{display:none}
form.sent .ok{display:block}
form.sent .fields{display:none}

/* ============================================================================
   FOOTER
   ============================================================================ */
footer{background:var(--navy);color:rgba(244,241,232,.78);padding:70px 0 40px;position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);margin-bottom:14px}
footer a{text-decoration:none}
footer .fl{display:grid;gap:9px;font-size:14.5px}
footer .fl a:hover{color:var(--gold-lit)}
.fbot{margin-top:54px;padding-top:22px;border-top:1px solid rgba(224,210,182,.18);display:flex;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.6}
.fbot .cr{margin-left:auto}
.fbot .cr a{color:var(--tan)}

/* sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;gap:1px;background:rgba(224,210,182,.2)}
.callbar a{flex:1;text-align:center;padding:16px 8px;background:var(--navy-deep);color:var(--bone);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.callbar a.gold{background:var(--gold);color:var(--navy-deep);font-weight:700}

@media (max-width:1100px){ .tb{display:none} }
#how{padding-top:clamp(90px,10vw,150px);padding-bottom:clamp(90px,10vw,150px)}
@media (max-width:980px){
  .howgrid,.estgrid,.chatwrap,.qgrid,.fgrid{grid-template-columns:1fr;gap:40px}
  .planwrap{position:static;transform:none}
  .steps{padding:0;gap:32px}
  .step{opacity:1}
  .topnav .links,.topnav .navcta,.topnav .ph{display:none}
  .menubtn{display:flex}
}
@media (max-width:900px){
  .ringwrap{height:360px}
  .rcard{width:212px;height:274px;margin:-137px 0 0 -106px}
}
@media (max-width:760px){
  /* touch floor: every link in the footer and both wordmarks have to clear
     44px of hit area. Padding does it without moving anything visually. */
  footer .fl{gap:2px}
  footer .fl a,footer .fl span{display:flex;align-items:center;min-height:44px}
  .wm{min-height:44px;align-items:center}
  .fbot{gap:12px 20px}
  .fbot .cr{margin-left:0}
  .fbot .cr a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .line .k{width:100%;flex-basis:100%}
  .big b{width:.72em}
  .qstrip{grid-template-columns:1fr}
  .stage{min-height:auto}
  .card{flex:0 0 80vw}
  .mantra{min-height:88vh}
  .callbar{display:flex}
  body{padding-bottom:52px}
}
@media (prefers-reduced-motion:reduce){
  .glowbox::before{animation:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .vid{display:none}
  .mgrid .row span,.mfocus .word,.mfocus .sub,.mbody{opacity:1;transform:none;filter:none}
}