/* ============================================================================
   PRISTINE MOVING — v2
   Family: print-tech on a coastal ground. Signature move: the departure wall.
   Spine: water -> horizon -> sand -> ground -> dark band.
   ============================================================================ */

/* ---- wordmark face -------------------------------------------------------
   Montserrat Light, self-hosted, latin only, two weights. This is a THIRD
   family on a site whose doctrine caps at two, and it earns the exception by
   being used for exactly one string: the wordmark. It never sets body copy,
   a heading or a control — if it ever starts to, cut it back to Bricolage.
   swap, not block: the nav must not wait on 19KB to paint a logo. */
@font-face{font-family:'Montserrat';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/montserrat-300.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/montserrat-400.woff2') format('woff2')}


/* ---- liquid metal --------------------------------------------------------
   Same construction as the nxtlvl chrome, different alloy. What makes that one
   work is not the colour, it is the SHAPE of the ramp: nine stops that run
   dark -> light -> white -> dark repeatedly, angled about 10deg off horizontal,
   drifting sideways very slowly. The eye reads repeated bright bands crossing a
   form as a reflection; it reads a single light-to-dark sweep as a gradient
   somebody painted on. The first attempt here was one vertical sweep at 7s and
   that is exactly why it looked stuck on.

   The alloy is sampled from this palette rather than from steel — warm taupe
   through bone, with the white peaks doing the work. No saturated gold: gold is
   the CTA colour on this site, and a gold logo would spend it.

   Speed is deliberately slow (18s+). nxtlvl runs 11-26s and never lets two
   elements share a tempo. */
:root{
  --pm-metal:linear-gradient(100deg,
    #857a65 0%, #c9bda1 11%, #fffdf6 22%, #948a74 33%,
    #ece3cf 45%, #7d7360 57%, #ffffff 68%, #c3b79b 80%, #857a65 100%);
}

: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:11.5px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:24px;opacity:.85}
.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)}
/* the section number is a landmark, not a footnote — it gets its own chip */
.kick b{color:var(--navy-deep);font-weight:800;font-family:var(--sans);font-size:15px;
  letter-spacing:.01em;background:var(--gold-lit);border-radius:5px;padding:4px 9px 4px 10px;
  line-height:1;display:inline-block;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.mantra .kick b,#quote .kick b,#fragile .kick b{background:var(--gold);color:var(--navy-deep)}
.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;align-items:center;gap:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.8)}
/* 24px is the WCAG 2.2 pointer target floor; these are 15px of text in a
   72px bar, so the height is free. */
.topnav .links a{text-decoration:none;position:relative;padding-bottom:3px;
  display:inline-flex;align-items:center;min-height:24px}
.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="estimate"] [data-nk="estimate"]::after,
body[data-page="faq"] [data-nk="faq"]::after,
body[data-page="about"] [data-nk="about"]::after{transform:scaleX(1)}

/* ---- the More dropdown ----
   Sections that aren't pages live in here, so the top level can be four
   honest destinations instead of a mix of anchors and pages wearing labels
   that don't say which is which. */
.drop{position:relative;display:flex;align-items:center}
.dropbtn{font:inherit;color:inherit;background:none;border:0;padding:0 0 3px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:24px;letter-spacing:inherit;
  text-transform:inherit;position:relative}
.dropbtn svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--ease)}
.drop.open .dropbtn svg{transform:rotate(180deg)}
.dropbtn::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)}
.dropbtn:hover::after,.drop.open .dropbtn::after{transform:scaleX(1)}
.dropmenu{position:absolute;top:calc(100% + 16px);right:0;min-width:288px;z-index:61;
  display:grid;gap:2px;padding:10px;border-radius:14px;
  background:rgba(9,26,43,.97);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(224,210,182,.2);box-shadow:0 26px 54px -24px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.drop.open .dropmenu{opacity:1;visibility:visible;transform:none}
.topnav .links .dropmenu a{display:grid;gap:3px;padding:11px 12px;border-radius:9px;
  min-height:44px;align-content:center;text-decoration:none;
  transition:background .18s var(--ease)}
.topnav .links .dropmenu a:hover{background:rgba(196,146,46,.16)}
.topnav .links .dropmenu a::after{display:none}    /* no underline sweep in here */
.dropmenu b{font-size:11px;letter-spacing:.14em;color:var(--bone);font-weight:700;line-height:1.3}
.dropmenu span{font-family:var(--sans);font-size:12.5px;letter-spacing:0;
  text-transform:none;color:rgba(244,241,232,.56);line-height:1.35}
.topnav .ph{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--bone);text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:24px}
.navcta{flex:none}
/* The lockup: mark + wordmark. The mark carries the brand and the wordmark
   carries the name, so below 560px the wordmark drops and the mark stands on
   its own — which is the reason to have a mark at all. */
.wm{display:flex;align-items:center;min-height:24px;gap:11px;font-weight:700;font-size:21px;
  letter-spacing:.02em;color:var(--bone);text-decoration:none;flex:none}
.wm__mark{flex:none;width:auto;height:26px;display:block;fill:currentColor;
  transition:transform 420ms var(--ease)}
.wm:hover .wm__mark{transform:translateY(-1px) scale(1.04)}
.wm__txt{display:flex;align-items:baseline;gap:9px;min-width:0}
.wm .name{position:relative;display:inline-block;line-height:1;
  font-family:'Montserrat',var(--sans);font-weight:400;letter-spacing:.2em;
  /* letter-spacing adds a trailing space after the last glyph, which pushes
     the lockup visibly off-centre against the mark. text-indent puts it back. */
  text-indent:.2em;font-size:19px}
.wm small{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;font-weight:400;color:var(--tan);text-transform:uppercase}
/* footer gets the stacked lockup, where there is room for it to breathe */
.wm--stack{flex-direction:column;align-items:flex-start;gap:12px}
.wm--stack .wm__mark{height:40px}
.wm--stack .name{font-size:22px;letter-spacing:.26em;text-indent:.26em}
@media (max-width:560px){
  .topnav .wm__txt{display:none}
  .topnav .wm__mark{height:30px}
}
@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)}
/* Two routes out of the hero share the last cell. Equal weight on purpose —
   one hands the move to a human, the other is the self-serve estimator, and
   we do not know which one any given arrival wants. */
.qgo{display:flex;gap:10px;align-items:stretch}
.qgo .btn{justify-content:center;white-space:nowrap}
.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 title rides on a ghosted glass strip at all times; only the bio expands
   on hold. Both states stay navy glass rather than flipping to a bone panel —
   a light/dark swap mid-transition passes through a muddy low-contrast midpoint,
   and the ghosting is the point. */
.rbody{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:15px 18px 16px;
  background:linear-gradient(180deg,rgba(11,31,51,0),rgba(11,31,51,.30) 32%,rgba(11,31,51,.50));
  backdrop-filter:blur(8px) saturate(1.12);-webkit-backdrop-filter:blur(8px) saturate(1.12);
  border-top:1px solid rgba(224,210,182,.22);
  transition:background .44s var(--ease),border-color .44s var(--ease),
             padding .44s var(--ease),backdrop-filter .44s var(--ease)}
.ringwrap.held .rbody{padding:17px 20px 19px;
  background:linear-gradient(180deg,rgba(11,31,51,.08),rgba(11,31,51,.76) 24%,rgba(11,31,51,.93));
  backdrop-filter:blur(15px) saturate(1.2);-webkit-backdrop-filter:blur(15px) saturate(1.2);
  border-top-color:rgba(224,210,182,.4)}
.ringwrap.held .rlab{opacity:0}
.rbody .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--gold-lit);display:block;margin-bottom:6px}
.rbody h3{color:var(--bone);font-size:18px;margin-bottom:0;text-shadow:0 1px 12px rgba(6,18,31,.6)}
/* the bio: zero-height until held, so nothing but the title shows at rest */
.rdet{display:block;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .32s var(--ease),margin-top .5s var(--ease)}
.ringwrap.held .rdet{max-height:220px;opacity:1;margin-top:7px}
.rbody p{font-size:13.5px;color:rgba(244,241,232,.86);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-lit);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}
.rnav{position:relative;z-index:2}
.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 — broken glass. An impact fracture: radial cracks, concentric rings,
   a real polygon per shard. The cracks are GAPS (each shard pulled towards its
   own centre) showing the dark section behind, not strokes drawn on top —
   that difference is most of why this reads as glass rather than as a decal.
   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 .shard{stroke:rgba(4,12,21,.55);stroke-width:.8;stroke-linejoin:round}
/* the bright line you get looking into a fresh break */
.glass .edge{stroke:rgba(255,248,232,.5);stroke-width:1.4;stroke-linecap:round;fill:none}
.glass .loose{fill:rgba(226,235,242,.42);stroke:rgba(255,250,240,.5);stroke-width:.7}

/* It breaks when it scrolls into view, travelling outward from the impact —
   one ring at a time, 34ms apart. Before that the shards sit slightly out
   from centre and transparent, so the panel arrives whole-ish and then goes. */
.glass .shard,.glass .edge,.glass .loose{
  opacity:0;transform:scale(1.035);transform-origin:944px 172px;transform-box:view-box}
.glass.broke .shard,.glass.broke .edge,.glass.broke .loose{
  animation:shatter .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--ring,0) * 34ms)}
@keyframes shatter{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .glass .shard,.glass .edge,.glass .loose{opacity:1;transform:none}
  .glass.broke .shard,.glass.broke .edge,.glass.broke .loose{animation:none}
}
/* 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%)}
/* Stacked layout puts the copy over the whole panel, and `slice` magnifies the
   fracture so a single pale shard can fill the reading column. Flat scrim,
   a touch deeper than the desktop gradient's darkest point. */
@media (max-width:980px){ .glassveil::after{background:rgba(6,18,31,.66)} }
#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}}

/* ---- Exhibits A–C: the "don't be like these guys" carousel ----
   The broken glass sets the mood; these photos make the argument. One box,
   figures cross-faded inside it, auto-advancing until you touch it. */
.oops{position:relative}
.oopshd{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.oopshd .ex{color:var(--gold);font-weight:700}
.oopshd b{color:rgba(244,241,232,.62);font-weight:400;letter-spacing:.16em}
.oopsbox{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;
  max-height:min(56vh,520px);background:rgba(6,18,31,.55);
  border:1px solid rgba(224,210,182,.22);
  box-shadow:0 30px 64px -30px rgba(0,0,0,.75)}
.oopsfig{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.oopsfig.on{opacity:1;transform:none;pointer-events:auto}
.oopsfig img{width:100%;height:100%;object-fit:cover;display:block}
/* the caption sits on a gradient of its own so it never depends on what the
   photo happens to be doing down there */
.oopsfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  font-size:14.5px;line-height:1.45;color:#fff;
  background:linear-gradient(0deg,rgba(4,12,21,.94) 0%,rgba(4,12,21,.78) 46%,rgba(4,12,21,0) 100%)}
.oopsnav{display:flex;align-items:center;gap:14px;margin-top:14px}
.oarw{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(224,210,182,.34);color:var(--bone);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.oarw:hover{border-color:var(--gold);background:rgba(196,146,46,.14)}
.oarw svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.oopsdots{display:flex;gap:7px;flex:1}
.oopsdots i{height:3px;flex:1;border-radius:2px;background:rgba(224,210,182,.24);
  overflow:hidden;position:relative}
.oopsdots i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.oopsdots i.on::after{transform:scaleX(1)}
.oopsnote{margin-top:14px;font-size:15px;color:rgba(244,241,232,.72)}
.oopsnote b{color:var(--gold-lit);font-weight:700}
@media (prefers-reduced-motion:reduce){
  .oopsfig{transition:none;transform:none}
}

/* ============================================================================
   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)}
/* NO TRANSITION ON .fur. EVER. This is the whole "furniture lags behind the
   truck" bug, and it survived a rewrite of the loading maths because the maths
   was never wrong.

   There used to be `transition: transform .8s` here, from back when loading was
   discrete — a piece teleported between the lawn and its slot, and an 800ms
   ease made the jump look like a glide. The truck itself has never had a
   transition. So once both were being driven per scroll frame, the truck
   snapped to each new transform and the furniture spent 800ms easing toward
   the one it had already been given: the truck left, the load followed, and
   while you were still scrolling the pieces were chasing a target they never
   reached — which is them sliding in and out through the side of the cargo box.

   The transforms are welded: a piece's stowed transform is the departure
   composed onto its slot, so it is the same matrix the truck gets. A
   transition breaks that weld at RENDER time, which is why checking the
   transform attributes said everything was fine. Measure getScreenCTM, not
   getAttribute, if this is ever in doubt again. */

/* ============================================================================
   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}
.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 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}}
/* ---- THE STAMP, ported from Movology ----------------------------------
   It lands on the manifest card, not on the thank-you box, because that is
   where a rubber stamp actually goes — on the document. Ink is navy, not gold:
   gold on the bone card measures 2.49:1, navy measures 11.97:1, and a stamp you
   cannot read is a graphic. The turbulence mask is what stops it looking like a
   CSS border — it eats the ink unevenly, the way a real pad does. */
.stampzone{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:3px}
.rstamp{position:absolute;right:26px;bottom:22px;width:228px;padding:13px 14px 11px;
  border:3px double var(--navy);border-radius:6px;color:var(--navy);text-align:center;
  transform:rotate(-9deg);mix-blend-mode:multiply;opacity:.86;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:slamin 420ms cubic-bezier(.2,1.6,.35,1) both}
.rstamp::before{content:"";position:absolute;inset:4px;border:1px solid var(--gold);border-radius:3px;opacity:.7}
.rstamp i{display:block;width:26px;height:26px;margin:0 auto 7px;border:2px solid var(--navy);border-radius:50%;position:relative}
.rstamp i::after{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--navy)}
.rstamp b{display:block;font:800 25px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.rstamp small{display:block;font:500 8.5px/1.6 var(--mono);letter-spacing:.15em;text-transform:uppercase;margin-top:4px}
@keyframes slamin{0%{transform:rotate(-14deg) scale(3.2);opacity:0}
  60%{transform:rotate(-9deg) scale(.94);opacity:.95}
  100%{transform:rotate(-9deg) scale(1);opacity:.86}}
/* the card takes the hit */
.manifest.shake{animation:mshake 320ms var(--ease)}
@keyframes mshake{0%{transform:translate(0,0)}30%{transform:translate(1px,3px)}
  60%{transform:translate(-1px,-1px)}100%{transform:translate(0,0)}}
/* the little status ribbon steps aside once the real stamp lands */
.manifest .stamp{transition:opacity .3s var(--ease)}
.manifest.stamped .stamp{opacity:0}
@media (max-width:520px){.rstamp{width:198px;right:16px;bottom:16px}.rstamp b{font-size:21px}}
.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}
/* honeypot — off-screen and zero-size, so it never becomes a tap target */
.qform .hp{position:absolute;width:0;height:0;opacity:0;pointer-events:none;left:-9999px}
.qform button[disabled]{opacity:.6;cursor:progress}
/* a failed send has to be loud: gold rule, and the phone number in the text */
.qerr{margin-top:14px;padding:13px 16px 13px 17px;border-radius:12px;font-size:14.5px;line-height:1.5;
  color:#fbe9c4;background:rgba(196,146,46,.14);border-left:3px solid var(--gold-lit)}
.qerr[hidden]{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}
/* 24px is WCAG 2.2's target-size floor for a pointer, and a 14.5px link is
   15px tall on its own. Below 760px these grow to 44px for thumbs; this is
   the mouse case, and it costs nothing visually. */
footer .fl{display:grid;gap:5px;font-size:14.5px}
footer .fl a,footer .fl span{display:flex;align-items:center;min-height:24px}
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;
  align-items:center;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);display:inline-flex;align-items:center;min-height:24px}
.fbot a:not(.cr a){display:inline-flex;align-items:center;min-height:24px}

/* 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}
  /* stacked, the pair gets a full row to itself — split it evenly rather than
     letting the longer label make one button dominate */
  .qgo{gap:8px}
  .qgo .btn,.qgo .magwrap{flex:1 1 0;min-width:0}
  .qgo .magwrap .btn{width:100%}
  .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}
}

/* ---- "more than a truckload" ---------------------------------------------
   Kyle's note: the fill gauge could read as a ceiling to someone with a five
   bedroom house. This sits directly under it and says otherwise. */
.bigmove{margin-top:44px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding:20px 24px;border-radius:14px;background:rgba(255,255,255,.5);
  border-left:4px solid var(--gold);box-shadow:0 18px 40px -30px rgba(18,48,77,.55)}
.bigmove b{font-size:18px;font-weight:800;color:var(--navy);flex:0 0 auto}
.bigmove span{font-size:15.5px;line-height:1.55;color:rgba(36,31,24,.86);flex:1 1 320px}


/* ===== HIGHWAY LINE ART (behind the services ring) ===== */
/* ---------------------------------------------------------------------
   Highway line-art background  (pairs with the .roadart inline SVG)

   Decorative only. A wide, short band anchored to the bottom of the
   section, sitting behind the card carousel. The viewBox is 1440x340 and
   the vanishing point is near its TOP edge, so the carriageways fan down
   and out through the bottom corners.

   Tuning:
     --roadart-ink          stroke colour (default: inherits `color`)
     --roadart-opacity      desktop opacity  (default .34)
     --roadart-opacity-sm   <=720px opacity  (default .30)
     --roadart-height       band height      (default 46%)

   Group weights below are deliberately uneven: at .25-.4 opacity the eye
   needs a hierarchy (road edges > hills > rails > poles > posts) or the
   whole thing flattens into one grey haze.
   --------------------------------------------------------------------- */

.roadart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;

  /* Band height, clamped at BOTH ends -- this is what keeps the drawing
     readable, and both limits are load-bearing.

     `slice` is bottom-anchored (xMidYMax) and scales to COVER the band, so
     the band's aspect decides what you see of a 1440:340 (4.24:1) viewBox:

       too SHORT  -> it crops off the TOP, which is where the horizon, the
                     hills and the vanishing point live. 23.7vw = width/4.22,
                     so the band is never shorter than the art itself.
       too TALL   -> it zooms in and crops the SIDES; past ~1.4x you are left
                     with a narrow central strip of stray diagonals. 37.5vw
                     keeps at least ~900 of the 1440 viewBox units on screen.

     A 46% band is inside both limits from roughly 1100px up; the clamp is
     what catches tablet widths, where 46% of a tall section is far too much.
     vw assumes a full-bleed section -- override --roadart-height if not. */
  height: clamp(23.7vw, var(--roadart-height, 36%), 29vw);
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 0;

  /* The one knob. Every stroke in the drawing is currentColor, so the ink is
     whatever --roadart-ink says; with the property unset this falls back to
     `currentColor`, which on the `color` property means "inherit" -- so a
     plain `color: var(--navy)` on the wrapping section also just works. */
  color: var(--roadart-ink, currentColor);
  opacity: var(--roadart-opacity, 0.52);

  /* paths deliberately run past the viewBox edges; keep them clipped so this
     layer can never push a scrollbar even in a section without overflow:hidden */
  overflow: hidden;

  /* The foreground tarmac runs straight into the bottom of the section, and
     where #services ends and #takeon begins that made a hard tonal step right
     across the page. Fade the nearest slice out instead -- it costs nothing
     (the drawing's detail all lives in the top half, near the vanishing
     point) and the road now reads as receding into the page rather than being
     guillotined by the section boundary. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
}

.roadart g {
  fill: none;
  stroke: currentColor;
  /* no stroke-width here: every path that needs one carries its own, scaled
     by its depth. A single width for the whole drawing is what made it read
     as a wireframe. */
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* very light wash on the road surface only -- the sole filled element */
.roadart__wash {
  fill: currentColor;
  fill-opacity: 0.06;
  stroke: none;
}

/* horizon: the quietest line in the drawing */
.roadart__horizon {
  stroke-width: 1;
  opacity: 0.38;
}

/* per-layer weights all live in the depth block further down; only the
   shared defaults belong up here */
/* Narrow viewports: the height clamp above already does the geometry work
   (a 390px screen lands on the 37.5vw ceiling, ~146px, which keeps ~900
   viewBox units in shot). All that is left is to sit back a little further,
   since the art is denser per pixel once the band is that small. */
@media (max-width: 720px) {
  .roadart {
    opacity: var(--roadart-opacity-sm, 0.52);
    /* The art is now six-lane and detailed, and at 390px the full 1440-unit
       viewBox scales to about a quarter size — legible as a smudge and
       nothing more. Let the band grow past the "show it all" floor so
       `slice` crops the outer shoulders and zooms the middle instead. */
    height: clamp(30vw, var(--roadart-height-sm, 40%), 46vw);
    /* same hairline feather as desktop -- see the note on the base rule */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
  }
}

/* In forced-colours mode every stroke is repainted in a system colour at full
   contrast, which turns a quiet backdrop into a cage over the content. It is
   pure decoration, so drop it rather than fight it. */
@media (forced-colors: active) {
  .roadart { display: none; }
}

/* ---- highway: depth ------------------------------------------------------
   Everything was one flat ink weight, so the poles, the road and the hills all
   sat on the same plane. Three things separate them now: opacity by distance
   (far things are fainter), a warm-to-cool shift (the horizon goes bluer, the
   foreground stays in the ink), and parallax — each band gets its own scroll
   rate via --px, so the foreground slides faster than the hills. */
/* Depth planes. Aerial perspective does most of the work — a drawing at one
   ink weight and one tone reads flat no matter how many lines are in it — and
   the masses (hills, tarmac, median, signs) are filled so the eye reads
   "mountain" and "road" rather than "some lines up there". Individual paths
   carry their own stroke-width from the generator, scaled by how far away
   they are, so this block sets colour and opacity and leaves weight alone.

   Every selector here is doubled up on purpose: the shared `.roadart g`
   reset sets `fill:none` at (0,1,1), which out-specifies a bare
   `.roadart__wash` at (0,1,0) — so the first version of this drew every
   mass as an empty outline and the road, the hills and the sign panels all
   came out hollow. */
.roadart .roadart__ground    {fill:rgba(146,126,88,.2);stroke:none}
.roadart .roadart__hills-far {fill:rgba(109,138,162,.34);stroke:rgba(109,138,162,.6);stroke-width:1}
.roadart .roadart__hills-mid {fill:rgba(93,123,149,.44);stroke:rgba(93,123,149,.78);stroke-width:1.2}
.roadart .roadart__hills-near{fill:rgba(66,98,125,.56);stroke:rgba(66,98,125,.92);stroke-width:1.4}
.roadart .roadart__horizon   {opacity:.42;color:#5d7b95}
.roadart .roadart__wash      {fill:rgba(40,66,92,.26);stroke:none}
.roadart .roadart__shoulder  {fill:rgba(40,66,92,.14);stroke:none}
.roadart .roadart__median    {fill:rgba(120,104,74,.26);stroke:none}
.roadart .roadart__oshade    {fill:rgba(18,48,77,.16);stroke:none}
.roadart .roadart__odeck     {fill:rgba(45,72,99,.8);stroke:rgba(18,48,77,.9);stroke-width:1.1}
.roadart .roadart__overpass  {opacity:.85;color:#23486b}
.roadart .roadart__edges     {opacity:1;color:#12304d}
.roadart .roadart__dashes    {opacity:.92;stroke-linecap:butt;color:#12304d}
.roadart .roadart__barrier   {fill:rgba(18,48,77,.2);stroke:rgba(18,48,77,.66);stroke-width:1.1}
.roadart .roadart__bjoint    {opacity:.4}
.roadart .roadart__rails     {opacity:.8;color:#1b3d61}
.roadart .roadart__posts     {opacity:.55}
.roadart .roadart__delin     {opacity:.42}
.roadart .roadart__brush     {opacity:.4;color:#5f6f4e}
.roadart .roadart__poles     {opacity:.85;color:#1b3d61}
.roadart .roadart__lamps     {opacity:.85;color:#1b3d61;fill:currentColor;stroke:none}
.roadart .roadart__gantry    {opacity:.88;color:#12304d}
/* the green panels: the one bit of colour, because an overhead sign that
   isn't green doesn't read as an overhead sign */
.roadart .roadart__signs     {fill:rgba(42,86,60,.85);stroke:rgba(18,48,77,.85);stroke-width:1.3}
/* the nearest bay of rail, heavier, so something sits clearly in FRONT of the
   cards' plane rather than all of it behind */
.roadart .roadart__fore      {opacity:.5;color:#12304d}

/* the parallax itself — transform only, so it never triggers layout.
   Rates rise with nearness; the spread is what sells the depth. */
.roadart g{will-change:transform}
.roadart.plx .roadart__hills-far {transform:translate3d(calc(var(--px,0px) * .05),0,0)}
.roadart.plx .roadart__hills-mid {transform:translate3d(calc(var(--px,0px) * .11),0,0)}
.roadart.plx .roadart__hills-near{transform:translate3d(calc(var(--px,0px) * .19),0,0)}
.roadart.plx .roadart__horizon   {transform:translate3d(calc(var(--px,0px) * .08),0,0)}
.roadart.plx .roadart__overpass,
.roadart.plx .roadart__odeck,
.roadart.plx .roadart__oshade    {transform:translate3d(calc(var(--px,0px) * .28),0,0)}
.roadart.plx .roadart__gantry,
.roadart.plx .roadart__signs     {transform:translate3d(calc(var(--px,0px) * .46),0,0)}
.roadart.plx .roadart__poles,
.roadart.plx .roadart__lamps     {transform:translate3d(calc(var(--px,0px) * .58),0,0)}
.roadart.plx .roadart__rails     {transform:translate3d(calc(var(--px,0px) * .66),0,0)}
.roadart.plx .roadart__posts     {transform:translate3d(calc(var(--px,0px) * .72),0,0)}
.roadart.plx .roadart__delin     {transform:translate3d(calc(var(--px,0px) * .78),0,0)}
.roadart.plx .roadart__brush     {transform:translate3d(calc(var(--px,0px) * .88),0,0)}
.roadart.plx .roadart__bjoint    {transform:translate3d(calc(var(--px,0px) * .84),0,0)}
.roadart.plx .roadart__dashes    {transform:translate3d(calc(var(--px,0px) * .90),0,0)}
.roadart.plx .roadart__fore      {transform:translate3d(calc(var(--px,0px) * 1.25),0,0)}
@media (prefers-reduced-motion:reduce){ .roadart.plx g{transform:none!important} }


/* ============================================================================
   GET A ROUGH IDEA — autocomplete, county map, truck marker
   ============================================================================ */
.estgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}
.acfield{position:relative;margin-bottom:18px}
.acfield label,.datepair label,.pickhd{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;color:rgba(36,31,24,.6)}
.pickhd{margin-top:26px}
.ac,.datepair input{width:100%;font-family:var(--sans);font-size:16px;padding:14px 17px;
  border-radius:12px;border:1px solid rgba(18,48,77,.26);background:rgba(255,255,255,.72);
  color:var(--ink);outline:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.ac:focus,.datepair input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,146,46,.18)}
.datepair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* a date input has a minimum intrinsic width (~180px in Chromium) that a 1fr
   column can't shrink below, so two of them burst the row on a phone */
.datepair input{min-width:0}
@media (max-width:520px){ .datepair{grid-template-columns:1fr} }

.aclist{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px;
  list-style:none;background:#fffdf7;border:1px solid rgba(18,48,77,.18);border-radius:12px;
  box-shadow:0 26px 50px -22px rgba(18,48,77,.5);max-height:290px;overflow:auto}
.aclist[hidden]{display:none}
.aclist li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 12px;border-radius:8px;font-size:15px;cursor:pointer;min-height:44px}
.aclist li span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gold);opacity:.9}
.aclist li:hover,.aclist li.on{background:rgba(196,146,46,.16)}

.picks{display:flex;flex-wrap:wrap;gap:9px}
.pick{width:auto;flex:0 0 auto;font-family:var(--sans);font-size:14.5px;padding:12px 16px;min-height:44px;border-radius:999px;
  border:1px solid rgba(18,48,77,.26);background:rgba(255,255,255,.6);color:var(--navy);cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.pick:hover{border-color:var(--gold)}
.pick.on{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.pick.multi{border-style:dashed}
.estread{margin-top:20px;font-size:15px;color:rgba(36,31,24,.82)}
.estread b{color:var(--navy);font-weight:700}

/* ---- the map ---- */
.maproom{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#f6f1e4,#eee6d3);
  border:1px solid rgba(18,48,77,.16);box-shadow:0 30px 64px -34px rgba(18,48,77,.6);aspect-ratio:720/560}
.maphd{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;
  padding:13px 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(18,48,77,.6);background:linear-gradient(180deg,rgba(246,241,228,.95),rgba(246,241,228,0))}
.maphd b{color:var(--gold)}

/* Both maps stack in the same box and one is hidden. They share a vocabulary:
   land is paper, everything outside the subject is duller paper, water is the
   sheet behind, freeways are gold, the route is navy. Real coastlines and
   state lines come from the Census boundaries via genmaps.mjs. */
.mapsvg{position:absolute;inset:0;width:100%;height:100%}
.mapsvg[hidden]{display:none}
.cmap{background:#9db9cb}                 /* the Pacific */
.usmap{background:#c9dae5}                /* open water */
/* the land that isn't the subject: Baja and the rest of California on one,
   Canada and Mexico on the other. Dulled, so the eye lands on the county. */
.mout{fill:#e2dac6;stroke:rgba(18,48,77,.22);stroke-width:1}
.mland{fill:#faf6ea;stroke:rgba(18,48,77,.5);stroke-width:1.6;stroke-linejoin:round}
.mnear{fill:#ece5d3;stroke:rgba(18,48,77,.22);stroke-width:1}
.mhome{fill:rgba(196,146,46,.15);stroke:none}          /* California */
.mstate{fill:none;stroke:rgba(18,48,77,.26);stroke-width:1}
.mgratp{fill:none;stroke:rgba(18,48,77,.1);stroke-width:.8}
.mroad{fill:none;stroke:var(--gold);stroke-width:2.3;opacity:.72;
  stroke-linecap:round;stroke-linejoin:round}
/* state routes are thinner and quieter than the interstates — a road map with
   one stroke weight is a plate of noodles */
.mroad2{fill:none;stroke:#b08a3c;stroke-width:1.3;opacity:.5;
  stroke-linecap:round;stroke-linejoin:round}
.mwater{fill:#9db9cb;stroke:rgba(18,48,77,.3);stroke-width:.8}
/* high ground, drawn the way a sketched map shows it */
.mrelief{fill:none;stroke:rgba(18,48,77,.13);stroke-width:.85;
  stroke-linecap:round;stroke-linejoin:round}
/* route shields: not the real outlines, but the read is instant */
.shield rect{stroke-width:1.2}
.shield[hidden]{display:none}
.shield text{font-family:var(--mono);font-size:9px;font-weight:700;
  text-anchor:middle;letter-spacing:0}
.shield.si rect{fill:#12304d;stroke:#f5f0e1}
.shield.si text{fill:#f5f0e1}
.shield.ss rect{fill:#faf6ea;stroke:rgba(18,48,77,.6)}
.shield.ss text{fill:#12304d}
.mst{font-family:var(--mono);font-size:10px;fill:rgba(18,48,77,.42);
  letter-spacing:.08em;text-anchor:middle}
.mtowns circle{fill:rgba(18,48,77,.34);transition:fill .2s var(--ease),r .2s var(--ease)}
.mtowns circle.on{fill:var(--gold);r:5.5;stroke:var(--navy);stroke-width:1.6}
.mtn{font-family:var(--mono);font-size:10.5px;fill:rgba(18,48,77,.62);letter-spacing:.06em;
  paint-order:stroke;stroke:rgba(245,240,225,.9);stroke-width:3;stroke-linejoin:round}
.usmap .mtn{font-size:11.5px}

/* the route: a dashed line that crawls from A to B so the direction reads */
.mroute{fill:none;stroke:var(--navy);stroke-width:2.8;stroke-dasharray:8 8;
  stroke-linecap:round;opacity:.8;animation:crawl 1.1s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-16}}
.mpins circle{stroke:#f5f0e1;stroke-width:2.2}
.mpins .pa{fill:var(--navy)} .mpins .pb{fill:var(--gold)}
.mlabels .plab{font-family:var(--mono);font-size:11px;fill:var(--navy);letter-spacing:.1em;
  text-transform:uppercase;paint-order:stroke;stroke:rgba(245,240,225,.92);stroke-width:3.4;
  stroke-linejoin:round}

.mscale path{fill:none;stroke:rgba(18,48,77,.72);stroke-width:2}
.mscale text{font-family:var(--mono);font-size:11px;fill:rgba(18,48,77,.72);
  letter-spacing:.1em;text-anchor:middle;paint-order:stroke;
  stroke:rgba(245,240,225,.85);stroke-width:3;stroke-linejoin:round}

.maplegend{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:11px 16px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(18,48,77,.62);display:flex;align-items:center;gap:7px;
  background:linear-gradient(0deg,rgba(246,241,228,.95),rgba(246,241,228,0))}
.maplegend[hidden]{display:none}
.maplegend i{width:10px;height:10px;border-radius:50%;display:inline-block;
  border:1.5px solid rgba(245,240,225,.9)}
.maplegend .lg-a{background:var(--navy)}
.maplegend .lg-b{background:var(--gold)}
.maplegend .lg-r{width:16px;height:3px;border-radius:2px;border:0;background:var(--gold);opacity:.7}

/* ---- the truck marker ---- */
/* It keeps the same pixel size on both maps: a longer move should not make
   the load look smaller. JS drives left/top directly on every frame, so no
   CSS transition here — one would fight the animation. */
.tmark{position:absolute;z-index:5;width:clamp(62px,11.5%,96px);
  transform:translate(-50%,-72%);pointer-events:none}
.tmark.flip svg{transform:scaleX(-1)}
.tmark[hidden]{display:none}
.tmark svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 10px rgba(18,48,77,.35))}
.tbox{fill:#f6f1e4;stroke:var(--navy);stroke-width:3}
.tcab{fill:#f6f1e4;stroke:var(--navy);stroke-width:3;stroke-linejoin:round}
.twheel{fill:#f6f1e4;stroke:var(--navy);stroke-width:3}
.tload rect{fill:var(--gold);opacity:0;animation:crate .34s var(--ease) forwards;
  animation-delay:calc(var(--i) * 45ms)}
@keyframes crate{from{opacity:0;transform:translateY(5px)}to{opacity:.9;transform:none}}
.tcap{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 0 rgba(246,241,228,.9)}
.tmark.flip .tcap{transform:translateX(-50%)}

@media (max-width:980px){
  .estgrid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:640px){
  .mtn{font-size:13px} .mst{font-size:12px} .mlabels .plab{font-size:13px}
  /* "310 miles · most of a day on the road" wraps at this width and lands on
     top of the mode label, so stack them instead of sharing a row */
  .maphd{flex-direction:column;align-items:flex-start;gap:3px;font-size:9px;padding:11px 14px}
  .maplegend{font-size:8px;letter-spacing:.1em;gap:5px}
}
@media (prefers-reduced-motion:reduce){
  .tload rect{animation:none;opacity:.9}
  .mroute{animation:none}
}

/* ============================================================================
   FAQ — native <details>, so it works with no JS and the browser handles
   keyboard and find-in-page for us. The only script is the one that closes
   the siblings.
   ============================================================================ */
.faqgrid{display:grid;grid-template-columns:1.4fr .6fr;gap:52px;align-items:start}
.faqlist{display:grid;gap:10px}
.fq{border:1px solid rgba(18,48,77,.16);border-radius:12px;background:rgba(255,255,255,.42);
  overflow:hidden;transition:border-color .2s var(--ease),background .2s var(--ease)}
.fq[open]{border-color:rgba(196,146,46,.5);background:rgba(255,255,255,.72)}
.fq summary{display:flex;align-items:center;gap:16px;padding:17px 20px;min-height:44px;
  cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;color:var(--navy)}
.fq summary::-webkit-details-marker{display:none}
.fq summary span{flex:1}
/* the +/− is drawn from two rules so it can cross-fade without a font */
.fq summary i{position:relative;flex:0 0 16px;width:16px;height:16px}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;background:var(--gold);
  border-radius:1px;transition:transform .26s var(--ease),opacity .26s var(--ease)}
.fq summary i::before{left:0;right:0;top:7px;height:2px}
.fq summary i::after{top:0;bottom:0;left:7px;width:2px}
.fq[open] summary i::after{transform:scaleY(0);opacity:0}
.fq summary:hover{color:var(--navy-deep)}
.fqa{padding:0 20px 19px;font-size:15.5px;line-height:1.62;color:rgba(36,31,24,.84)}
.fqa p{max-width:62ch}
.faqside{display:grid;gap:16px;position:sticky;top:calc(var(--navh) + 22px)}
.faqcard{padding:24px 22px;border-radius:14px;background:var(--navy);color:var(--bone);
  box-shadow:0 26px 54px -30px rgba(18,48,77,.75)}
.faqcard .fk{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.faqcard p{font-size:15px;line-height:1.55;color:rgba(244,241,232,.82)}
.faqcard .btn.dark{background:var(--bone);color:var(--navy-deep);border-color:var(--bone)}
.faqcard .btn.dark.ghost{background:transparent;color:var(--bone)}
@media (max-width:980px){
  .faqgrid{grid-template-columns:1fr;gap:34px}
  .faqside{position:static}
}

/* ============================================================================
   WHY US — the merged section. "We move with you" used to be its own
   full-bleed band; it now sits as the heading over the six promises, which is
   what that line was always trying to say. Below the ring, a plain scannable
   list: the carousel is the hook, but nobody can scan a carousel, and a
   mover's site has to answer "do you do X?" in about two seconds.
   ============================================================================ */
.whybody{max-width:70ch;margin-top:18px;font-size:16.5px;line-height:1.68;color:rgba(36,31,24,.86)}
.whybody em{font-style:normal;font-weight:700;color:var(--navy)}

.promises{margin-top:40px}
.pmhd{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(36,31,24,.55);margin-bottom:18px}
.pmhd b{color:var(--gold);font-weight:700}
.pmhd u{text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.pmgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr)}
.pmgrid li{position:relative;padding:18px 18px 18px 20px;border-radius:12px;
  background:rgba(255,255,255,.5);border:1px solid rgba(18,48,77,.14)}
/* a gold rule down the left edge, so the tiles read as a set of promises
   rather than as six unrelated cards */
.pmgrid li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:2px;background:var(--gold)}
.pmgrid b{display:block;font-size:16px;color:var(--navy);margin-bottom:5px}
.pmgrid span{display:block;font-size:14.5px;line-height:1.5;color:rgba(36,31,24,.78)}

.svcblock{margin-top:48px}
/* .svchd is restyled as a full headline in the #takeon block near the foot of
   this file; this is the fallback for anywhere else it gets used. */
.svchd{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(36,31,24,.55);margin-bottom:16px}
.svclist{list-style:none;margin:0;padding:0;display:grid;gap:9px 34px;
  grid-template-columns:repeat(3,1fr)}
.svclist li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.5;
  color:rgba(36,31,24,.86);min-height:24px;display:flex;align-items:flex-start}
/* Pinned to the FIRST line, not the middle of the block. Four of the twelve
   items wrap to two lines on a phone, and a vertically-centred dot on those
   sat in the gap between the lines, pointing at nothing. */
.svclist li::before{content:"";position:absolute;left:0;top:.72em;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}
.svcnote{margin-top:18px;font-size:14.5px;color:rgba(36,31,24,.62)}

@media (max-width:980px){
  .pmgrid,.svclist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .pmgrid,.svclist{grid-template-columns:1fr}
  .whybody{font-size:15.5px}
}

/* The road art is bottom-anchored at a fixed band height, so as this section
   grew it stopped being a backdrop and started sitting on top of the services
   list. Reserve the band's own height at the foot of the section: the CTA row
   still lands on the tarmac, which is where it looked right, and the list
   above it stays on clean paper. */



/* "Everything we take on" sits in its OWN section below the highway art, not
   on top of it — the road is the divider between the two. So no scrim, no
   card: it's on clean paper and just needs the heading rule to open it. */
.svcblock{margin-top:0}

@media (max-width:620px){
  .svcblock{padding:24px 20px 20px}
}


/* ============================================================================
   EVERYTHING WE TAKE ON — the offer list, as its own navy block.

   It was on paper, and the section directly after it (#how) is also on paper,
   so the two ran together and this one had no edge of its own: the thing that
   actually says "here is what you can hire us for" looked like a footnote to
   the carousel above it. Navy gives it a start and an end, and it puts the
   gold bullets and the typing cursor on the one backdrop where they carry.

   Running order through the page is now sand (carousel + highway) -> navy
   (the offer) -> paper (how it works), which is the alternation the rest of
   the page already uses.
   ============================================================================ */
#takeon{position:relative;background:var(--navy-deep);color:var(--bone)}
#takeon .wrap{position:relative;z-index:2}
/* the faint blueprint grid is drawn for light paper; on navy it needs to be
   light-on-dark or it simply disappears */
#takeon .gridlines{opacity:.5;mix-blend-mode:screen}

#takeon .svclist li{color:rgba(244,241,232,.9)}
#takeon .svclist li::before{background:var(--gold-lit)}
#takeon .svcnote{color:rgba(244,241,232,.62)}
#takeon .ctanote{color:rgba(244,241,232,.6)}

/* `.btn dark` is the light-section treatment — a navy outline on white. Inside
   a navy block the solid one vanishes and the ghost one is invisible, so both
   flip. This is the same fix .faqcard carries. */
#takeon .btn.dark{background:var(--bone);color:var(--navy-deep);border-color:var(--bone)}
#takeon .btn.dark.ghost{background:transparent;color:var(--bone);
  border-color:rgba(244,241,232,.5)}
#takeon .btn.dark:hover,#takeon .btn.dark:focus-visible{
  color:var(--navy-deep);border-color:var(--gold-lit);
  box-shadow:0 14px 38px -18px rgba(220,174,74,.7)}
#takeon .btn.dark.ghost:hover,#takeon .btn.dark.ghost:focus-visible{color:#fff7e6}

/* ---- the headline -------------------------------------------------------
   Was a 10px mono kicker, which is why it read as a label on the list rather
   than as the name of what we sell. It is an h2 now and takes the site's own
   headline scale (one step up from the standard clamp, since this is the
   offer), so it lands at about the weight of "We move with you" above it. */
.svchd{display:block;font-family:var(--sans);font-weight:800;
  font-size:clamp(34px,4.6vw,62px);line-height:1.08;letter-spacing:-.04em;
  text-transform:none;color:var(--bone);margin:0 0 4px;
  font-variation-settings:'opsz' 72;
  /* the typed line changes width every 55ms; without this the gold rule under
     it and the list below would jitter on every character */
  min-height:1.08em}
.svchd::after{content:"";display:block;width:64px;height:3px;margin-top:20px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold-lit),rgba(220,174,74,0))}
.svctop{display:block;margin-bottom:26px}

/* ---- the cursor ---------------------------------------------------------
   A filled block that sits on the baseline and scales with the type, so it
   stays the same optical weight from 34px to 62px. It only blinks once the
   line is finished — while characters are still landing, a blinking cursor
   just reads as flicker. */
.tw-cur{display:inline-block;vertical-align:-.06em;margin-left:.09em;
  width:.14em;height:.82em;border-radius:2px;
  background:var(--gold-lit);box-shadow:0 0 18px -2px rgba(220,174,74,.55);
  transition:opacity 90ms linear}
.tw-cur.off{opacity:0}
@media (prefers-reduced-motion:reduce){ .tw-cur{display:none} }


/* The road art is bottom-anchored inside #services and the carousel sits over
   it — the cards stand on the tarmac, which is the whole point of putting the
   drawing there. Reserve the band's ceiling so the ring's arrows clear the
   horizon, and no more: any extra just pushes the road away from the cards. */
#services{padding-bottom:clamp(250px,21vw,330px)}
@media (max-width:720px){ #services{padding-bottom:clamp(170px,38vw,260px)} }

/* ============================================================================
   LOGO INTRO — the wave sweeps in and leaves the monogram behind

   The mark is a PM built around one wave that cuts through both letters, so
   the motion is already in the drawing: the reveal just follows it. A mask
   whose edge runs at the wave's own angle travels left to right, a gold shine
   rides that edge, and the letterforms are uncovered by its passage.

   RULES THIS HAS TO OBEY, all of them learned the hard way on other sites:
   - The curtain is built by JS and only by JS. A curtain that ships in the
     HTML is a curtain that can get stuck over the page if a script throws.
   - Once per session. An intro on every page view is a reason to leave.
   - prefers-reduced-motion skips it outright.
   - Any click, key or scroll skips it.
   - It never blocks the page: the real content is laid out underneath the
     whole time, so nothing about the load order changes.
   ========================================================================= */
.lgo{position:fixed;inset:0;z-index:9999;background:none;
  display:grid;place-items:center;overflow:hidden}
/* The navy is painted by this, not by a background colour, so the page can be
   opened through a hole in it. See the note in site.js. */
.lgo__defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- the roller door -----------------------------------------------------
   The page opens the way a storage unit does. The whole door — slats, bottom
   rail and the logo painted on it — is one element that travels up and out,
   so the lockup rides the door rather than being crossfaded off it. That is
   the difference between a door opening and two things happening at once.

   Slats are a repeating-linear-gradient rather than an image: it is a few
   hundred bytes, it is razor sharp at any DPR, and the pitch can be tuned by
   changing one number. Each slat gets a bright top edge, a long body and a
   dark crease, which is what corrugation actually looks like in raking light. */
.lgo__door{position:absolute;inset:0;z-index:1;will-change:transform;
  display:grid;place-items:center;overflow:hidden;
  background:
    /* 1 — micro grain. Real rolled steel is never perfectly smooth, and a
       few percent of noise is the difference between "metal" and "gradient". */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    /* 2 — the sunlit diagonal from the reference photo */
    linear-gradient(118deg,transparent 28%,rgba(255,255,255,.055) 45%,transparent 63%),
    /* 3 — vertical brushing. Barely visible on its own; it is what stops the
       slats reading as printed stripes, because real metal varies ALONG the
       slat as well as across it. */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.014) 0px, rgba(0,0,0,.018) 2px,
      rgba(255,255,255,.009) 5px, rgba(0,0,0,.013) 7px, rgba(255,255,255,.014) 11px),
    /* 4 — THE SLAT PROFILE. This is the whole job. A shutter slat is not a
       stripe, it is a curved panel: a specular line on the rolled top edge, a
       face that falls away through the light, a dark crease where it laps the
       slat below, and a thin bounce of light kicked back up out of that crease.
       Nine stops per 15px because every one of those is a real feature of the
       cross-section — the previous five-stop version had the crease but none
       of the curvature, so it read flat. */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.24)  0px,
      rgba(255,255,255,.145) 1px,
      rgba(255,255,255,.06)  3px,
      rgba(255,255,255,.012) 6px,
      rgba(0,0,0,.065)       9px,
      rgba(0,0,0,.205)      12px,
      rgba(0,0,0,.35)       13.4px,
      rgba(0,0,0,.155)      14.4px,
      rgba(255,255,255,.065) 15px),
    /* 5 — a broad sheen across the upper door, like a window opposite */
    linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 17%,
      transparent 37%,transparent 64%,rgba(0,0,0,.11) 100%),
    /* 6 — edge falloff, so the door has sides rather than running to infinity */
    linear-gradient(90deg,rgba(0,0,0,.34) 0%,transparent 11%,
      transparent 89%,rgba(0,0,0,.30) 100%),
    /* 7 — the door's own body, lit from the upper left */
    linear-gradient(103deg,#1b3550 0%,#24405e 34%,#162b42 72%,#0f2338 100%)}

/* The guide channels the door runs in. Cheap, and a big part of why the thing
   reads as an object in a building rather than a texture on the screen. */
.lgo__door::before,.lgo__door::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(13px,2.1vw,26px);z-index:1;pointer-events:none}
.lgo__door::before{left:0;background:linear-gradient(90deg,
  #0a1a2b 0%,#152c44 38%,#27445f 58%,rgba(8,20,33,.88) 86%,rgba(8,20,33,0) 100%)}
.lgo__door::after{right:0;background:linear-gradient(270deg,
  #0a1a2b 0%,#152c44 38%,#27445f 58%,rgba(8,20,33,.88) 86%,rgba(8,20,33,0) 100%)}

/* The bottom rail: heavier than a slat, with a rolled lip, a bright leading
   edge and the shadow it throws on whatever is below it. This single detail is
   most of what says "door" rather than "striped rectangle". */
.lgo__rail{position:absolute;left:0;right:0;bottom:0;height:19px;z-index:2;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.30) 0px, rgba(255,255,255,.12) 2px,
      rgba(255,255,255,.02) 5px, rgba(0,0,0,.10) 10px,
      rgba(0,0,0,.26) 15px, rgba(0,0,0,.05) 17px, rgba(255,255,255,.14) 19px),
    linear-gradient(103deg,#2c4a68,#1a3350 52%,#0c1d2f);
  box-shadow:0 20px 38px -10px rgba(0,0,0,.7)}

.lgo__in{position:relative;z-index:2}
.lgo[hidden]{display:none}
.lgo__in{display:grid;justify-items:center;gap:0;will-change:transform,opacity}

/* --- the mark ------------------------------------------------------------ */
.lgo__markwrap{position:relative;width:min(46vw,380px);line-height:0;
  /* OPTICAL CENTRING. Measured, not guessed: rasterising the mark and taking
     the centre of mass of the ink puts it 75px right of the geometric centre
     of its 1000-unit box — the M's solid leg and the thick right shoulder
     outweigh the thin wave tail on the left. Centre it geometrically and it
     reads pushed right, which is exactly what it looked like.
     Correcting the FULL 7.5% overshoots: the eye weights extent as well as
     area, so a long thin tail still counts for something. Half the difference
     is the usual compromise and it is what lands here. */
  transform:translateX(-3.75%)}
.lgo__mark{display:block;width:100%;height:auto;color:var(--bone);
  /* Brass, only here. The intro is one moment and can afford to be rich; a
     logo that shimmers permanently in the nav is a distraction and a battery
     cost. Everywhere else the mark stays flat bone. */
  fill:url(#pmmetal);
  /* The sweep is a clip-path polygon with a slanted leading edge, NOT an
     oversized mask. The first version used mask-size:260% with an animated
     mask-position, and the percentage maths for a mask image larger than its
     box — offset = (100% - size) x position — meant the "fully revealed" end
     state actually left 96% of the mark unmasked and therefore invisible. A
     polygon has no such maths: the two right-hand vertices are simply where
     the wipe has got to, and the 22% horizontal offset between top and bottom
     is what tilts the edge to the wave's own angle. */
  clip-path:polygon(-24% 0, -24% 0, -46% 100%, -46% 100%);
  will-change:clip-path}
/* the shine that rides the mask edge — gold, at the wave's angle */
.lgo__shine{position:absolute;inset:-12% -30%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 44%,rgba(220,174,74,.9) 50%,transparent 56%);
  filter:blur(6px);transform:translateX(-60%)}

/* --- the wordmark -------------------------------------------------------- */
.lgo__name{font-family:'Montserrat',var(--sans);font-weight:300;color:var(--bone);
  font-size:clamp(26px,5.4vw,52px);line-height:1;margin-top:clamp(16px,2.8vw,28px);
  letter-spacing:.42em;text-indent:.42em;opacity:0;white-space:nowrap}
.lgo__sub{font-family:'Montserrat',var(--sans);font-weight:300;color:var(--tan);
  font-size:clamp(9px,1.5vw,13px);letter-spacing:.34em;text-indent:.34em;
  margin-top:clamp(8px,1.4vw,14px);opacity:0;white-space:nowrap}
.lgo__rule{display:flex;align-items:center;gap:14px;margin-top:clamp(10px,1.6vw,16px);
  opacity:0;color:rgba(224,210,182,.5)}
.lgo__rule i{display:block;width:clamp(26px,5vw,54px);height:1px;background:currentColor}
.lgo__rule span{font-family:var(--mono);font-size:clamp(8px,1.2vw,10px);letter-spacing:.3em;
  /* letter-spacing puts a gap after the LAST glyph too, so the visible text
     sits left of its own box and the rules either side look uneven. Same fix
     as the wordmark. */
  text-indent:.3em}

.lgo__skip{position:absolute;right:20px;bottom:18px;font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,241,232,.45);background:none;border:0;cursor:pointer;
  padding:12px 14px;min-height:44px}
.lgo__skip:hover,.lgo__skip:focus-visible{color:var(--bone)}

/* While the curtain is up nothing underneath may scroll — but the layout is
   already final, so lifting it reveals a page that is done, not one that then
   reflows. */
html.lgo-on,html.lgo-on body{overflow:hidden}

@media (prefers-reduced-motion:reduce){ .lgo{display:none!important} }