/* Eagle 1 Drone Washing, v2 concept: "Top-Down".
   The page is a building washed from the roof to the street as you scroll.
   Round 7 (November 12, 2026): this is the November 2 stylesheet, brought back whole, plus the pieces listed in the record
   (README, Round 7): the royal pill header and the footer logo, the forms-off panel, the Good For block on service pages,
   the contact box's narrow-phone rule, the smooth-scroll switch, the map's swipe hint, the faster page-hero fades, the
   lighthouse band and the headline-only hero. (The Open Sky round's metric-matched stand-in faces for the display font were
   tried and left out: with them the careers heading broke into three lines at 390px, where November 2 has two.) */
:root{
  --ink:#051230; --ink-2:#0D2147; --ink-3:#24385E;
  --paper:#FFFFFF; --paper-2:#F2F5F9;
  --concrete:#B6BFC1; --concrete-dark:#9AA5AA;
  --sun:#025FEF; --sun-2:#0B4FD0; --sun-text:#0148C2;
  --peach:#97ACC8; --peach-2:#DCE6F4;
  --sky-1:#EEF5FF; --sky-2:#C2DBFF; --sky-3:#86B6FF;
  --teal:#2F6F7A; --gold:#0D2147; --olive:#7E97BC; --amber:#97ACC8; /* map line colors; the names are from the concept */
  --muted:#4D5A6B; --muted-dark:#BFCADB;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --hand:"Caveat","Segoe Print",cursive;
  --wrap:1200px; --gutter:clamp(16px,4vw,44px);
  --ease:cubic-bezier(.22,1,.36,1); --ease-wash:cubic-bezier(.65,0,.35,1);
  --bolt:#AEB8C4;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
/* In-page jumps glide only after v2.js adds .smooth (at the visitor's first click or key press, or a second after load), so
   arriving from another page at /#section lands on the section at once instead of scrolling the whole page (fix round 2, B7) */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}}

/* The façade: glass panes, concrete mullions and floor slabs, with a fixed sky reflection */
body.v2{
  margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);
  background-color:#9FB1BD;
  background-image:
    linear-gradient(90deg,var(--concrete) 0 14px,transparent 14px),
    linear-gradient(180deg,var(--concrete) 0 28px,var(--concrete-dark) 28px 31px,transparent 31px),
    linear-gradient(180deg,#DCE3E8 0%,#AABAC6 32%,#C7D5E6 64%,#9DAFBC 100%);
  background-size:168px 100%,100% 230px,100% 100vh;
  background-attachment:scroll,scroll,fixed;
  font-variant-numeric:tabular-nums;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;letter-spacing:.005em;line-height:.92;text-wrap:balance}
h2{font-size:clamp(2.8rem,6.2vw,5.6rem)}
h3{font-size:clamp(1.45rem,2.1vw,1.85rem);font-weight:800;line-height:1.02}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}
a[href^="tel:"]{white-space:nowrap} /* round 8: a phone number never breaks across two lines (the contact page's sentence split it at "(352)" and at "448-") */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.skip:focus-visible{outline-color:#fff} /* the skip link opens over the royal pill, where a royal ring would vanish */
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
main{position:relative;z-index:1}
section[id]{scroll-margin-top:90px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:700;font-size:1rem;line-height:1.2;
  padding:15px 24px;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),background-color .2s ease,box-shadow .25s var(--ease),color .2s ease,border-color .2s ease}
.btn-primary{background:var(--sun);color:#fff}
.btn-primary:hover{background:var(--sun-2)}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-dark .btn-ghost{color:#fff}
.on-dark .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.on-dark .form-card .btn-ghost{color:var(--ink)}
.on-dark .form-card .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.chip-btn{font:inherit;font-size:.85rem;font-weight:700;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(5,18,48,.22);
  background:rgba(255,255,255,.82);color:var(--ink);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip-btn:hover{border-color:var(--ink)}
.chip-btn svg{width:16px;height:16px}
.sound-btn .waves{display:none}
.sound-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.sound-btn[aria-pressed=true] .waves{display:inline}
.sound-btn[aria-pressed=true] .mute{display:none}

/* ---------- Header: a floating pill, royal blue (round 7, November 12, 2026) ----------
   The November 2 pill (floating, centered, 1180px at most, drops to the top when you scroll) in royal #025FEF, because the
   new logo is white with a deep blue outline and needs a dark ground. White links (5.4:1 on the royal), a white button with
   royal text (5.4:1), white focus rings. The lockup is 44px tall (105px wide, 160:67); the pill is 62px tall */
.v2 .site-header{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 20px));
  background:var(--sun);border-radius:999px;color:#fff;box-shadow:0 18px 40px -24px rgba(5,18,48,.6);transition:top .35s var(--ease),box-shadow .35s}
.v2 .site-header.scrolled{top:8px}
.v2 .site-header .wrap{max-width:none;padding:0 8px 0 14px}
.v2 .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.v2 .brand{display:flex;align-items:center;flex:none;gap:10px;text-decoration:none;color:#fff}
.v2 .brand-logo{display:block;height:44px;width:auto;aspect-ratio:160/67;transition:transform .35s var(--ease)}
.v2 .brand:hover .brand-logo{transform:translateY(-1px) scale(1.03)}
.v2 .nav{display:flex;align-items:center;gap:14px}
.v2 .nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.v2 .nav ul a{display:block;text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 13px;border-radius:999px;color:#fff;white-space:nowrap;transition:background-color .2s}
.v2 .nav ul a:hover{background:rgba(5,18,48,.28)}
.v2 .site-header .btn{padding:11px 18px;white-space:nowrap;background:#fff;color:var(--sun);border-color:#fff}
.v2 .site-header .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.v2 .menu-btn{display:none;font:inherit;font-weight:700;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.8);border-radius:999px;padding:8px 16px;cursor:pointer}
.v2 .menu-btn:hover{background:rgba(5,18,48,.28)}
.v2 .site-header :focus-visible{outline-color:#fff;outline-offset:2px}

/* ---------- Roof (homepage hero) ---------- */
.roof{position:relative;z-index:1;overflow:hidden;padding:clamp(108px,13vh,150px) 0 0;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%)}
.sky{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;width:min(48vw,640px);aspect-ratio:1;right:2%;top:20%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#F4F9FF 40%,#D3E5FF 70%,rgba(211,229,255,0) 71%);opacity:.95}
.glow{position:absolute;left:-10%;right:-10%;bottom:-25%;height:65%;background:radial-gradient(ellipse at 70% 100%,rgba(255,255,255,.55),transparent 62%)}
.roof-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:end}
.roof-copy{padding-bottom:clamp(40px,7vh,96px)}
.roof h1{font-size:clamp(3.4rem,6.6vw,7.4rem);line-height:.84;color:var(--ink)}
.roof h1 .kicker,.v2 .page-hero .kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;font-size:.82rem;
  letter-spacing:.01em;line-height:1.45;color:var(--ink-3);margin-bottom:20px;max-width:42ch}
.roof h1 .kicker svg{flex:none;color:var(--ink)}
.roof h1 .line{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.roof h1 .line > span{display:block}
@supports (-webkit-text-stroke:2px black){
  .roof h1 .line-outline > span{color:transparent;-webkit-text-stroke:3px var(--ink)}
}
.roof .lede{margin-top:22px;font-size:1.16rem;color:#33435C;max-width:48ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{display:flex;align-items:center;gap:8px;font-weight:650;font-size:.92rem;padding:7px 14px 7px 8px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(5,18,48,.12)}
.trust svg{width:20px;height:20px;flex:none}
.parapet{position:relative;height:34px;background-color:var(--ink-2);
  background-image:radial-gradient(circle,#3B4F75 2.5px,transparent 3.5px);background-size:56px 34px;background-position:28px 50%}

/* The tower you wash yourself */
.wash-game{margin:0;position:relative}
.wg-stage{position:relative;aspect-ratio:400/560;width:100%;max-width:500px;margin-left:auto;touch-action:pan-y;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23FFFFFF' stroke-width='4'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23051230' stroke-width='2'/%3E%3Cpath d='M16 1v7M16 24v7M1 16h7M24 16h7' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M16 1v7M16 24v7M1 16h7M24 16h7' stroke='%23051230' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%23025FEF'/%3E%3C/svg%3E") 16 16,crosshair}
.wg-tower{position:absolute;inset:0;width:100%;height:100%}
#wgCanvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.2s var(--ease)}
.wash-game.spotless #wgCanvas{opacity:0}
.wg-drone{position:absolute;left:0;top:0;width:26%;pointer-events:none;will-change:transform}
.wg-drone svg{width:100%;height:auto;overflow:visible}
.wg-drone .spray{opacity:0;transition:opacity .2s}
.wash-game.washing .wg-drone .spray{opacity:1}
.wg-done{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;padding:14px 22px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.wg-done strong{font-family:var(--display);font-size:1.7rem;font-weight:900;margin-right:6px;color:var(--peach)}
.wg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 0 16px;max-width:500px;margin-left:auto;font-size:.9rem}
.wg-hint{font-weight:700}
#wgOut{font-family:var(--mono);font-weight:700;background:var(--ink);color:#fff;padding:5px 10px;border-radius:6px}
.wg-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.sparkle{position:absolute;width:10px;height:10px;pointer-events:none;background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---------- Panels mounted on the façade ---------- */
.v2 main > section:where(:not(.roof):not(.marquee):not(.page-hero):not(.rail)){
  position:relative;z-index:1;width:min(calc(100% - 24px),1240px);margin:clamp(70px,13vh,150px) auto;
  padding-block:clamp(56px,8vw,104px);background-color:var(--paper);border:1px solid rgba(5,18,48,.14);
  box-shadow:0 40px 70px -45px rgba(5,18,48,.65);
  background-image:radial-gradient(circle at 16px 16px,var(--bolt) 3px,transparent 4px),radial-gradient(circle at calc(100% - 16px) 16px,var(--bolt) 3px,transparent 4px),
    radial-gradient(circle at 16px calc(100% - 16px),var(--bolt) 3px,transparent 4px),radial-gradient(circle at calc(100% - 16px) calc(100% - 16px),var(--bolt) 3px,transparent 4px)}
.v2 main > section.on-dark{background-color:var(--ink);color:#EEF3FA;border-color:rgba(255,255,255,.08);--bolt:#1F3561}
.v2 main > section.on-dark .lede{color:var(--muted-dark)}
.v2 main > section.on-paper{background-color:var(--paper-2)}
.panel-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 64px;align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.panel-head .lede{margin:0}

/* ---------- Same wall, two ways ---------- */
.cmp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"switch switch" "scene table";gap:24px 48px;align-items:start}
.cmp-switch{grid-area:switch;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;justify-self:start;background:var(--paper-2);
  border:1.5px solid rgba(5,18,48,.15);border-radius:999px;padding:5px}
.cmp-switch button{position:relative;z-index:1;font:inherit;font-weight:700;font-size:1rem;padding:12px 22px;border:0;background:none;border-radius:999px;cursor:pointer;color:var(--muted);transition:color .3s ease}
.cmp-switch button[aria-pressed=true]{color:#fff}
.cmp-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);transition:transform .5s var(--ease)}
.cmp[data-mode=drone] .cmp-knob{transform:translateX(100%)}
.cmp-scene{grid-area:scene;margin:0;border-radius:22px;overflow:hidden;border:1.5px solid rgba(5,18,48,.15)}
.cmp-scene svg{width:100%;height:auto}
/* Round 8: beside the table the drawing's frame stretches to the table's height, the scene anchored at the bottom and the sky
   (the drawing's own top color) filling above it, so the two end together instead of leaving a dead corner. Stacked layouts
   (980px and under) keep the drawing's own height. */
@media (min-width:981px){
  .cmp-scene{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;background:#EEF5FF}
  .cmp-scene svg{flex:none}
  /* the sky above the drawing is the pseudo-element's box (it fills what the drawing leaves), with three faint clouds drawn in
     it so a tall frame reads as open sky rather than a blank panel; it needs no height of its own */
  .cmp-scene::before{content:"";display:block;flex:1 1 auto;min-height:0;
    background:radial-gradient(ellipse 84px 20px at 22% 24%,rgba(255,255,255,.95),rgba(255,255,255,0)),
      radial-gradient(ellipse 52px 24px at calc(22% + 44px) calc(24% - 7px),rgba(255,255,255,.95),rgba(255,255,255,0)),
      radial-gradient(ellipse 70px 17px at 74% 50%,rgba(255,255,255,.9),rgba(255,255,255,0)),
      radial-gradient(ellipse 42px 20px at calc(74% + 34px) calc(50% - 6px),rgba(255,255,255,.9),rgba(255,255,255,0)),
      radial-gradient(ellipse 60px 14px at 38% 78%,rgba(255,255,255,.8),rgba(255,255,255,0))}
}
/* from 981 to 1279px the table is narrow and wraps to three lines a cell, which makes it far taller than the drawing, so the
   table gets a little more width there and wraps less */
@media (min-width:981px) and (max-width:1279px){.cmp{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.scene-lift,.scene-drone{transition:opacity .6s var(--ease)}
.cmp[data-mode=drone] .scene-lift{opacity:0}
.cmp[data-mode=lift] .scene-drone{opacity:0}
.cmp-table{grid-area:table;width:100%;border-collapse:collapse;font-size:.98rem}
.cmp-table th,.cmp-table td{text-align:left;padding:13px 12px;border-bottom:1px solid rgba(5,18,48,.12);vertical-align:top;transition:background-color .45s ease,color .45s ease}
.cmp-table thead th{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1;border-bottom:2px solid var(--ink)}
.cmp-table tbody th{font-weight:700;width:30%}
.cmp[data-mode=drone] .us{background:var(--peach-2);font-weight:650}
.cmp[data-mode=drone] .lift{color:#56627A}
.cmp[data-mode=lift] .lift{background:#E9EDF3;font-weight:650}
.cmp[data-mode=lift] .us{color:#56627A}

/* ---------- The rig ---------- */
.v2 main > section.rig{background-color:#071634;
  background-image:linear-gradient(rgba(151,172,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(151,172,200,.07) 1px,transparent 1px),
    radial-gradient(circle at 16px 16px,#1F3561 3px,transparent 4px),radial-gradient(circle at calc(100% - 16px) 16px,#1F3561 3px,transparent 4px),
    radial-gradient(circle at 16px calc(100% - 16px),#1F3561 3px,transparent 4px),radial-gradient(circle at calc(100% - 16px) calc(100% - 16px),#1F3561 3px,transparent 4px);
  background-size:28px 28px,28px 28px,auto,auto,auto,auto}
.rig-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
.rig-fig{margin:0}
.rig-svg{width:100%;height:auto;color:#DCE6F4;overflow:visible}
.rig-svg [fill="#1B3448"]{fill:#071634}
.rig-svg [stroke="#1B3448"]{stroke:#071634}
.rig-svg .part{transition:transform 1.1s var(--ease),opacity .25s ease}
.rig-svg .callout,.rig-svg .frame,.rig-svg .hand{transition:opacity .25s ease}
.rig-svg.has-active .part:not(.on),.rig-svg.has-active .callout:not(.on),.rig-svg.has-active .frame,.rig-svg.has-active .hand{opacity:.2}
.rig-svg .part{cursor:help}
.rig-svg .ldr{fill:none;stroke:var(--sun);stroke-width:1.5}
.rig-svg .callout.on .ldr{stroke-width:2.75}
.rig-svg .dot,.rig-svg .code-bg{fill:var(--sun)}
.rig-svg .code{fill:#fff;font-family:var(--mono);font-weight:700;font-size:16px;text-anchor:middle}
.rig-svg .lbl-name{fill:#DCE6F4;font-family:var(--mono);font-weight:500;font-size:14px}
.rig-svg .hand text{font-family:var(--hand);font-weight:600;font-size:27px;fill:var(--peach)}
.rig-svg .hand path{stroke:var(--peach)}
.rig[data-asm] .rig-svg [data-part="rotors"].part{transform:translateY(-80px)}
.rig[data-asm] .rig-svg [data-part="brain"].part{transform:translateY(-34px)}
.rig[data-asm] .rig-svg [data-part="nozzle"].part{transform:translateY(60px)}
.rig[data-asm] .rig-svg [data-part="hose"].part{opacity:0}
.rig[data-asm] .rig-svg [data-part="truck"].part{transform:translateX(90px)}
.rig[data-asm] .rig-svg [data-part="pilot"].part{transform:translateX(-80px)}
.rig[data-asm] .rig-svg .callout,.rig[data-asm] .rig-svg .hand{opacity:0}
.rig[data-asm].in .rig-svg .part{transform:none;opacity:1}
.rig[data-asm].in .rig-svg [data-part="hose"].part{transition:opacity .6s ease .7s}
.rig[data-asm].in .rig-svg .callout{opacity:1;transition:opacity .5s ease calc(1s + var(--d,0ms))}
.rig[data-asm].in .rig-svg .hand{opacity:1;transition:opacity .8s ease 1.9s}
.rig[data-asm].in .rig-svg.has-active .part:not(.on),.rig[data-asm].in .rig-svg.has-active .callout:not(.on),.rig[data-asm].in .rig-svg.has-active .hand{opacity:.2;transition-delay:0s}
.rig-legend{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.rig-legend button{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;width:100%;text-align:left;font:inherit;color:#fff;background:none;cursor:pointer;
  border:0;border-bottom:1px solid rgba(255,255,255,.12);border-left:3px solid transparent;padding:14px 10px 14px 12px;transition:background-color .2s,border-color .2s}
.rig-legend button:hover,.rig-legend button.on{background:rgba(151,172,200,.08);border-left-color:var(--sun)}
.rig-legend .chip{grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:#fff;font-family:var(--mono);font-weight:700;font-size:.85rem;margin-top:1px}
.rig-legend strong{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.1}
.rig-legend .d{color:var(--muted-dark);font-size:.95rem;line-height:1.45}

/* ---------- Services rail ---------- */
.rail{position:relative;z-index:1;background:var(--ink);color:#EEF3FA;margin:clamp(70px,13vh,150px) 0;
  background-image:radial-gradient(ellipse at 85% 0%,rgba(2,95,239,.35),transparent 55%)}
.rail-pin{padding-block:clamp(56px,8vw,96px)}
.rail.pinned .rail-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:96px 40px}
.rail-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px 40px;margin-bottom:28px}
.rail-head .lede{margin:0;color:var(--muted-dark)}
.rail-progress{grid-column:1 / -1;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.rail-progress span{display:block;height:100%;background:var(--sun);transform-origin:left;transform:scaleX(0)}
.rail-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);padding-bottom:10px;scrollbar-width:thin}
.rail.pinned .rail-viewport{overflow:visible;padding-bottom:0}
.rail-track{display:flex;gap:24px;width:max-content;will-change:transform}
.rail.pinned .rail-track{padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)))}
.svc-card{scroll-snap-align:start;width:min(86vw,940px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;
  background:#FFFFFF;color:var(--ink);border-radius:30px;padding:26px}
.svc-art{background:linear-gradient(180deg,var(--sky-1),var(--sky-2));border-radius:22px;display:grid;place-items:center;padding:20px;color:var(--ink)}
.svc-art svg{width:100%;height:auto}
.svc-tag{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--sun-text);margin:0 0 10px}
.svc-card h3{font-size:clamp(1.9rem,3.2vw,2.9rem);margin-bottom:14px}
.svc-card .svc-body > p:not(.svc-tag){color:var(--muted)}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.svc-more{font-weight:700;color:var(--sun-text)}
.good-for{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.good-for li{position:relative;padding-left:22px;font-weight:650;font-size:.96rem}
.good-for li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--sun);transform:rotate(45deg)}

/* ---------- The flight path ---------- */
.flight-stage{position:relative;margin-top:16px}
.flight-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flight-svg .guide{fill:none;stroke:rgba(5,18,48,.22);stroke-width:2;stroke-dasharray:3 10;stroke-linecap:round}
.flight-svg .trail{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round}
#flightDrone{color:var(--ink)}
.waypoints{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:start;row-gap:clamp(40px,6vw,72px);column-gap:clamp(60px,12vw,200px)}
.wp{position:relative;max-width:440px;padding:22px 24px 24px;background:#FFFFFF;border:1.5px solid rgba(5,18,48,.12);border-radius:24px;box-shadow:0 24px 40px -32px rgba(5,18,48,.6)}
.wp:nth-child(even){justify-self:end;margin-top:clamp(70px,10vw,130px)}
.wp-num{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.8rem;
  background:var(--paper-2);border:2px solid var(--ink);margin-bottom:14px;transition:background-color .35s,border-color .35s}
.wp.reached .wp-num{background:var(--sun);border-color:var(--sun);color:#fff}
.wp h3{margin-bottom:8px}
.wp p{margin:0;color:var(--muted)}
.process-foot{margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;border-top:1px solid rgba(5,18,48,.14);padding-top:28px}
.process-foot p{margin:0;color:var(--muted);max-width:56ch}

/* ---------- The network map ---------- */
.checker{display:block;margin-bottom:22px;max-width:560px}
.checker label{display:block;font-weight:700;margin-bottom:8px}
.checker-row{display:flex;gap:10px}
.checker-row input{flex:1;min-width:0}
.checker-result{margin:12px 0 0;min-height:1.5em;font-weight:600}
.checker-result.yes{color:#1D6B3A}
.checker-result.no{color:var(--sun-text)}
.checker-result a{color:inherit;font-weight:800}
.netmap{margin:0;background:var(--paper-2);border-radius:26px;border:1.5px solid rgba(5,18,48,.1);padding:clamp(12px,2vw,26px);overflow-x:auto}
.netmap-svg{width:100%;min-width:780px;height:auto;font-family:var(--body)}
.net-title{font-family:var(--display);font-weight:900;font-size:32px;fill:var(--ink)}
.net-divider{stroke:rgba(5,18,48,.2);stroke-width:2;stroke-dasharray:4 8}
.ln{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.ln-orange{stroke:var(--sun)}.ln-teal{stroke:var(--teal)}.ln-gold{stroke:var(--gold)}.ln-olive{stroke:var(--olive)}
.loop{fill:none;stroke:rgba(5,18,48,.3);stroke-width:3;stroke-dasharray:2 7}
.loop-lbl{font-family:var(--mono);font-size:12px;fill:#56627A}
.tag text{font-family:var(--mono);font-size:11px;font-weight:700;fill:var(--ink);text-anchor:middle}
.tag .tag-teal + text,.tag .tag-orange + text{fill:#FFFFFF}
.tag-orange{fill:var(--sun)}.tag-teal{fill:var(--teal)}.tag-gold{fill:var(--gold)}
.stn{cursor:pointer}
.stn circle{fill:#FFFFFF;stroke:var(--ink);stroke-width:4;transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease),fill .2s}
.stn-hub circle{stroke-width:5}
.stn text{font-size:15px;font-weight:650;fill:var(--ink)}
.stn text.l{text-anchor:end}.stn text.c{text-anchor:middle}
.stn-hub text{font-weight:800}
.stn .hub-lbl{font-family:var(--display);font-weight:900;font-size:24px}
.stn:hover circle,.stn:focus circle{transform:scale(1.4);fill:var(--sun)}
.stn:hover text,.stn:focus text{fill:var(--sun-text);text-decoration:underline}
.stn:focus{outline:none}
.stn.hit circle{fill:var(--sun);animation:stn-pulse 1.3s ease 2}
@keyframes stn-pulse{50%{stroke-width:14;stroke:rgba(2,95,239,.45)}}
.netmap figcaption{font-family:var(--mono);font-size:.8rem;color:#56627A;margin-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;min-width:0}
.netmap figcaption a{color:var(--sun-text);font-weight:700}
.swipe-hint{display:none;color:var(--sun-text);font-weight:700}
.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin-top:32px}
.region h3{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:4px;font-size:1.4rem}
.region h3 span{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--muted)}
.region ul{list-style:none;margin:0;padding:0;columns:3;column-gap:20px}
.region li{padding:6px 0;break-inside:avoid;font-size:.95rem}
.region li a{text-decoration:none;font-weight:600}
.region li a:hover{color:var(--sun-text)}
.region li.hit a{color:var(--sun-text);font-weight:800}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,90px);align-items:start}
.quote-fill{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5.4vw,5rem);line-height:.95;margin:0 0 14px;color:var(--ink)}
.quote-fill .w{transition:color .45s ease}
.quote-fill.armed .w{color:#C6D0DE}
.quote-fill.armed .w.on{color:var(--ink)}
.pull-cite{font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--sun-text);margin-bottom:40px}
.about h2{font-size:clamp(2.2rem,3.6vw,3rem);margin-bottom:16px}
.about-main > p:not(.quote-fill):not(.pull-cite):not(.hiring-note){color:var(--muted);max-width:60ch}
.faith-card{background:var(--peach-2);border-radius:28px;padding:clamp(24px,3vw,38px)}
.verse{margin:0}
.verse blockquote{margin:0}
.verse p{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1.04;color:var(--ink);margin:0 0 10px}
.verse cite{font-style:normal;font-family:var(--mono);font-size:.85rem;color:#23406E}
.faith-card h3{margin:26px 0 10px}
.faith-card > p{color:#33435C}
.promise{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(5,18,48,.15)}
.promise li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(5,18,48,.15);font-weight:650}
.promise svg{flex:none;margin-top:2px}

/* ---------- The moving band: "New to the Sky, Not to the Work." (directly above the footer since November 11, 2026) ----------
   Round 7: the lighthouse mark stands straight on the royal band as the separator, no plate (its white fill would vanish on
   one). Its height is the cap height of the words: Big Shoulders Display capitals are 0.8125 of the font size (2.6rem to 5.4rem
   here). Only the Pause button stops it (no hover pause); it moves only for visitors who welcome motion and have scripts on. */
.marquee{position:relative;z-index:1;background:var(--sun);color:#fff;padding:0;margin:clamp(70px,13vh,150px) 0 0}
.marquee-stage{position:relative}
.marquee-band{overflow:hidden;border-block:3px solid var(--ink)}
.marquee-track{display:flex;align-items:center;gap:36px;width:max-content;padding:18px 0}
.marquee-track span{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,6vw,5.4rem);line-height:1;white-space:nowrap}
.marquee-track img{flex:none;width:auto;height:clamp(33.8px,4.875vw,70.2px);transform:translateY(clamp(-1.8px,-.125vw,-.9px))}
@keyframes marq{to{transform:translateX(-50%)}}
/* The review row exists only while a review link is set (build/assemble_v2.py writes it with the ask); no empty row otherwise */
.marquee-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-block:22px}
.marquee-copy p{margin:0;max-width:60ch;font-size:1.1rem;font-weight:500}
/* Round 8: Pause and Play is a round 44px icon button at the right end of the strip (an inline SVG, bars or triangle), named
   "Pause" or "Play" for screen readers, with a short royal fade behind it so the moving words do not run under it */
.marquee-toggle{position:absolute;z-index:2;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.marquee-toggle svg{width:16px;height:16px;fill:currentColor}
.marquee-toggle .i-play{display:none}
.marquee.is-paused .marquee-toggle .i-play{display:block}
.marquee.is-paused .marquee-toggle .i-pause{display:none}
.marquee-toggle:hover{background:#fff;color:var(--sun)}
.marquee-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:50%}
.marquee-toggle[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .marquee-stage::after{content:"";position:absolute;z-index:1;top:3px;bottom:3px;right:0;width:clamp(84px,11vw,168px);pointer-events:none;
    background:linear-gradient(90deg,rgba(2,95,239,0),var(--sun) 62%)}
}
/* The band sits directly on the footer: no gap above it and no pale concrete edge (the footer's 16px border-top shows
   as a gray strip between the royal band and the navy footer) */
.v2.v2-home .site-footer{margin-top:0;border-top:0}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side h2,.v2 .faq-grid h2{font-size:clamp(2.2rem,3.8vw,3.3rem)}
.faq-side .lede,.v2 .faq-grid .lede{margin-top:16px}
.faq-list{border-top:2px solid var(--ink)}
.on-dark .faq-list{border-top-color:#fff}
.faq-list details{border-bottom:1px solid rgba(5,18,48,.14)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 54px 22px 0;position:relative;font-weight:700;font-size:1.15rem;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:4px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23051230' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .4s var(--ease),background-color .2s}
.faq-list details[open] summary::after{transform:rotate(45deg);background-color:var(--sun)}
.faq-list summary:hover{color:var(--sun-text)}
.faq-list details p{margin:0 0 22px;color:var(--muted);max-width:62ch}

/* ---------- Quote: a boarding pass ---------- */
.v2 .quote-title{font-size:clamp(3.4rem,10vw,9rem);line-height:.82;margin-bottom:clamp(32px,5vw,56px);color:#fff}
.v2 .quote-title-sm{font-size:clamp(3rem,7.4vw,6.6rem);line-height:.92}
.quote-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,64px);align-items:start}
.v2 .quote .lede{margin-top:0}
.facts{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.facts li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:2px;color:#fff}
.facts span{color:var(--muted-dark)}
.form-card{--stub:88px;position:relative;background:#FFFFFF;color:var(--ink);border-radius:26px;
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px) clamp(22px,3vw,34px) calc(var(--stub) + clamp(22px,3vw,34px));
  -webkit-mask:radial-gradient(circle at var(--stub) 0,transparent 13px,#000 14px) top/100% 51% no-repeat,radial-gradient(circle at var(--stub) 100%,transparent 13px,#000 14px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at var(--stub) 0,transparent 13px,#000 14px) top/100% 51% no-repeat,radial-gradient(circle at var(--stub) 100%,transparent 13px,#000 14px) bottom/100% 51% no-repeat}
.form-card::before{content:"Flight EG1";position:absolute;left:0;top:0;bottom:0;width:var(--stub);border-right:2px dashed rgba(5,18,48,.28);
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-weight:900;font-size:1.9rem;letter-spacing:.02em;color:var(--sun);background:var(--peach-2)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field > label,.field legend{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.01em;color:var(--ink-3)}
fieldset.field{border:0;padding:0;margin:0}
.req{color:var(--sun-text)}
.v2 input[type=text],.v2 input[type=email],.v2 input[type=tel],.v2 select,.v2 textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#FFFFFF;border:1.5px solid #B7C3D3;border-radius:12px;padding:12px 14px;width:100%}
.v2 textarea{min-height:110px;resize:vertical}
.v2 input:focus-visible,.v2 select:focus-visible,.v2 textarea:focus-visible{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-block;padding:8px 15px;border-radius:999px;border:1.5px solid #B7C3D3;font-weight:650;font-size:.94rem;cursor:pointer;background:#fff}
.pill input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible + span{outline:3px solid var(--sun);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.form-foot p,.field > .field-hint{margin:0;font-size:.92rem;color:var(--muted)} /* the helper line under the quote form's Phone field is set like the line by the button */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none}
.form-card.done form{display:none}
.form-card.done .sent{display:block}
.sent h3{font-size:2.4rem;margin-bottom:10px}
.sent dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:20px 0;padding:18px 0;border-block:2px dashed rgba(5,18,48,.25)}
.sent dt{font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--muted)}
.sent dd{margin:2px 0 0;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.05}
.sent::after{content:"";display:block;height:54px;margin:18px 0 6px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 9px,transparent 9px 11px,var(--ink) 11px 12px,transparent 12px 16px)}
.test-note{background:#EAF2FF;border-radius:10px;padding:12px 14px;font-size:.92rem;color:#0A3A8C}
/* Forms off (November 12, 2026): while the site is built without a form key, a call-or-email panel takes each form card's place.
   It keeps the boarding pass (surface, stub, notches, radius, reveal) and sits in the same grid cell; build/build.py writes it */
.call-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:clamp(250px,26vw,310px)}
.call-card-apply{min-height:clamp(200px,20vw,240px)}
.call-card h3{font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;margin:0 0 14px}
.call-card p{margin:0;max-width:34ch;font-size:1.15rem;color:var(--muted)}
.call-actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:26px}
.call-card-apply .call-actions{margin-top:0}
.call-card p.call-address{margin-top:18px;max-width:none;font-weight:700;font-size:1.1rem;color:var(--ink);overflow-wrap:anywhere}
.call-address a{text-underline-offset:4px;text-decoration-thickness:2px}
.call-address a:hover{color:var(--sun-text)}
/* Round 8: beside the facts column the ticket is centered against it (the facts are taller than the ticket); with a form key the
   form card is tall and this rule does not apply to it */
@media (min-width:981px){.call-card{align-self:center}}

/* ---------- Footer: street level ---------- */
.v2 .site-footer{position:relative;z-index:1;background:#040E26;color:var(--muted-dark);padding:clamp(70px,10vw,120px) 0 34px;
  overflow:hidden;margin-top:clamp(70px,13vh,150px);border-top:16px solid var(--concrete);font-size:.95rem}
.v2 .site-footer::before{content:"Eagle 1";position:absolute;left:50%;bottom:-.16em;transform:translateX(-50%);font-family:var(--display);font-weight:900;
  font-size:clamp(7rem,29vw,28rem);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
.v2 .site-footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--sun) 0 64px,transparent 64px 120px);opacity:.55;pointer-events:none}
.v2 .site-footer .wrap{position:relative;z-index:1}
.v2 .footer-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.v2 .brand-foot{display:flex;align-items:center;gap:12px}
.v2 .site-footer .brand-word{color:#fff}
.v2 .footer-cols{display:flex;flex-wrap:wrap;gap:24px 56px}
.v2 .footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v2 .site-footer a{text-decoration:none}
.v2 .site-footer a:hover{color:#fff}
.v2 .footer-legal{margin-top:clamp(60px,12vw,160px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.v2 .footer-legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Inner pages (city, service, hub, 404) ---------- */
.v2 .page-hero{position:relative;z-index:1;overflow:hidden;padding:clamp(128px,16vh,176px) 0 calc(clamp(56px,8vw,96px) + 30px);
  background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 68%,var(--sky-3))}
.v2 .page-hero::before{content:"";position:absolute;width:min(42vw,460px);aspect-ratio:1;right:5%;top:26%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FFFFFF,#F4F9FF 40%,#D3E5FF 70%,transparent 71%);opacity:.85}
.v2 .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background-color:var(--ink-2);
  background-image:radial-gradient(circle,#3B4F75 2.5px,transparent 3.5px);background-size:56px 30px;background-position:28px 50%}
.v2 .page-hero .wrap{position:relative}
.v2 .page-hero h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.86;max-width:13ch}
.v2 .page-hero .lede{margin-top:22px;color:#33435C;font-size:1.18rem}
.v2 .page-hero .hero-ctas,.v2 .page-hero .chips{margin-top:26px}
.v2 .page-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,64px);align-items:end}
.crumbs{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);margin-bottom:24px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs a{text-decoration:none;font-weight:700}
.crumbs a:hover{color:var(--sun-text)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}
.glance{background:rgba(255,255,255,.92);border-radius:24px;padding:24px 26px 12px;border:1px solid rgba(5,18,48,.1);box-shadow:0 30px 50px -36px rgba(5,18,48,.45)}
.glance h2{font-size:1.6rem;margin-bottom:6px}
.glance dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 18px}
.glance dt,.glance dd{margin:0;padding:11px 0;border-bottom:1px solid rgba(5,18,48,.12)}
.glance dt{font-family:var(--mono);font-size:.76rem;color:var(--muted);padding-top:13px}
.glance dd{font-weight:650}
.glance dl > :nth-last-child(-n+2){border-bottom:0}
/* The email address has no spaces and is about 228px wide: beside the labels it runs out of the box (and off the screen)
   on phones narrower than about 380px, so there each label sits above its value */
@media (max-width:380px){.glance dl{grid-template-columns:minmax(0,1fr)}.glance dt{padding-bottom:0}.glance dd{padding-top:2px}}
.art-card{background:#FFFFFF;border-radius:24px;padding:22px;border:1px solid rgba(5,18,48,.1);color:var(--ink)}
.art-card svg{width:100%;height:auto}
/* Service pages: the Good For list (round 3, November 12, 2026; carried over in round 7). The bullets cut from the homepage's
   service cards, set on the commercial, residential and HOA service pages (the window and roof pages have none) as a small
   block directly above the illustration card in the hero's right column. The items keep the shared .good-for look (weight,
   royal diamond) in one column; the label is set like the glance labels (small monospace, muted).
   Below 981px the column stacks under the buttons: heading, intro, buttons, list, illustration */
.v2 .page-hero .hero-good-for{margin-bottom:22px}
.v2 .page-hero .hero-good-for-label{margin:0;font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--muted)}
.v2 .page-hero .hero-good-for .good-for{grid-template-columns:minmax(0,1fr);margin-top:8px}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.split .lede{margin-top:16px}
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.split2 h2{font-size:clamp(2.2rem,3.6vw,3.2rem)}
.split2 .good-for{grid-template-columns:minmax(0,1fr)}
.grime{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.on-dark .grime{border-top-color:#fff}
.grime li{padding:18px 0;border-bottom:1px solid rgba(5,18,48,.14)}
.grime strong{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;margin-bottom:4px}
.grime span{color:var(--muted)}
.svc-rows{list-style:none;margin:32px 0 0;padding:0;border-top:2px solid var(--ink)}
.svc-rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;padding:20px 8px;border-bottom:1px solid rgba(5,18,48,.14);text-decoration:none;
  background:linear-gradient(90deg,rgba(2,95,239,.1),rgba(2,95,239,0)) no-repeat;background-size:0 100%;transition:background-size .5s var(--ease)}
.svc-rows a:hover{background-size:100% 100%}
.svc-rows strong{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.05}
.svc-rows span{grid-column:1;color:var(--muted)}
.svc-rows em{grid-row:1 / span 2;grid-column:2;font-style:normal;font-weight:700;color:var(--sun-text)}
.mini-steps{list-style:none;counter-reset:step;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.mini-steps li{counter-increment:step;position:relative;padding-top:64px}
.mini-steps li::before{content:counter(step);position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--sun);color:#fff;font-family:var(--display);font-weight:900;font-size:1.6rem}
.mini-steps h3{margin-bottom:8px}
.mini-steps p{margin:0;color:var(--muted-dark)}
.v2 .process .lede{margin-top:16px}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid rgba(5,18,48,.2);background:#FFFFFF;text-decoration:none;font-weight:650;transition:border-color .2s,transform .25s var(--ease)}
.chips a:hover{border-color:var(--ink);transform:translateY(-2px)}
.chip-group{font-size:1.5rem;margin-top:32px}
.more-link{margin:28px 0 0}
.more-link a{font-weight:700;color:var(--sun-text)}
.count{font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap;vertical-align:middle}
.dir{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;border-top:2px solid var(--ink)}
.dir li{break-inside:avoid;border-bottom:1px solid rgba(5,18,48,.14)}
.dir a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 4px;text-decoration:none;font-weight:700;
  background:linear-gradient(90deg,rgba(2,95,239,.1),rgba(2,95,239,0)) no-repeat;background-size:0 100%;transition:background-size .5s var(--ease)}
.dir a:hover{background-size:100% 100%;color:var(--sun-text)}
.dir a span{color:var(--muted);font-weight:500;font-size:.88rem}
.dir-1{columns:1;margin-top:28px}
/* Nearby communities on a city page: the map, city checker and hub link straight to them */
.area-stop{scroll-margin-top:96px}
.area-stop:target{background:linear-gradient(90deg,rgba(2,95,239,.14),rgba(2,95,239,0))}
.area-stop:target strong{color:var(--sun-text)}

/* ---------- Plain text pages (privacy) ---------- */
.prose{max-width:76ch}
.prose h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:1.5em 0 .45em}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 1em;padding-left:1.2em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--sun)}
.prose a{color:var(--sun-text);font-weight:700}

/* ---------- Careers ---------- */
.careers-art{margin-top:28px}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:clamp(28px,4vw,44px);counter-reset:role}
.role-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:var(--paper-2);
  border:1.5px solid rgba(5,18,48,.12);border-radius:26px;padding:clamp(24px,3vw,34px)}
/* The big ghosted 01, 02, 03, 04 behind the role cards, drawn with a counter so the page's text has no numerals in it
   (round 7: the words on the careers page are today's, so the numerals are decoration only). The tag sits above the heading
   as on November 2 by order, while the page's text keeps today's order (heading, then tag) */
.role-card{counter-increment:role}
.role-card::before{content:counter(role,decimal-leading-zero);position:absolute;right:16px;top:-10px;z-index:-1;font-family:var(--display);font-weight:900;font-size:clamp(5.4rem,9vw,8rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(2,95,239,.3);pointer-events:none}
.role-tag{order:-1;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--sun-text);margin:0 0 10px}
.role-card h3{font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:.95;max-width:13ch}
.role-card > p:not(.role-tag):not(.role-need){color:var(--muted);margin:14px 0 0}
.role-card .good-for{grid-template-columns:minmax(0,1fr);margin-top:16px}
.role-need{align-self:flex-start;margin:20px 0 0;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:650;font-size:.88rem;line-height:1.3}
.role-actions{margin-top:auto;padding-top:24px}
.hire-steps{list-style:none;counter-reset:hire;padding:0;margin:30px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.hire-steps li{counter-increment:hire;position:relative;padding:16px 0 16px 54px;border-bottom:1px solid rgba(255,255,255,.14)}
.hire-steps li::before{content:counter(hire);position:absolute;left:0;top:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--sun);color:#fff;font-family:var(--display);font-weight:900;font-size:1.25rem}
.hire-steps b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:2px;color:#fff}
.hire-steps span{color:var(--muted-dark)}
.apply .form-card::before{content:"Crew Pass"}
/* Round 8, fix B: where the quote and apply sections stack into one column (980px and under, the existing breakpoint) the card
   comes straight after the lede, and the facts (or the four hiring steps) go under it, so a tap on a "Get a Free Quote" link
   lands with the card's buttons or first field on the first screen instead of a full screen below. CSS only: the first child
   div stops being a box (display:contents), the grid becomes a column with the same gap, and order sets heading, lede, card,
   facts. The tab order stays the page's order (lede, facts links, card), which is the reading order of the copy. Two-column
   widths (981px and up) are untouched. */
@media (max-width:980px){
  .quote-grid{display:flex;flex-direction:column;align-items:stretch}
  .quote-grid > div:first-child{display:contents}
  .quote-grid > div:first-child > .lede{order:1;margin-bottom:0}
  .quote-grid > .form-card{order:2}
  .quote-grid > div:first-child > .facts,.quote-grid > div:first-child > .hire-steps{order:3;margin-top:0}
}
/* and on phones (the existing 640px breakpoint) a jump to the quote or apply section stops 30px under the top, just clear of the
   floating pill (the panel's own 56px of padding puts the heading about 12px under the pill), and the gaps above the card are
   a little tighter, so on a 320 x 700 screen the card's button is whole on the first screen after the jump */
@media (max-width:640px){
  #quote,#apply{scroll-margin-top:30px}
  .quote-grid{gap:24px}
  .v2 .quote-title{margin-bottom:20px}
}
.fine-print{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 44px;margin-top:clamp(40px,6vw,64px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14);font-size:.9rem;color:var(--muted-dark)}
.fine-print p{margin:0}
.fine-print b{color:#fff}
.hiring-note{margin-top:22px;font-weight:650}
.hiring-note a{color:var(--sun-text);font-weight:700}

/* ---------- Façade wash: grime, the side drone and the instrument readout ---------- */
#facadeGrime{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.95;background-size:336px 460px;background-repeat:repeat}
.wash-line{position:fixed;left:0;right:0;top:56vh;height:26px;margin-top:-13px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent);filter:blur(2px);opacity:0;transition:opacity .4s}
.wash-line.on{opacity:1}
.wash-drone{position:fixed;right:clamp(6px,1.6vw,26px);top:56vh;width:clamp(64px,6.4vw,100px);margin-top:-34px;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s}
.wash-drone.on{opacity:1}
.wash-drone svg{width:100%;height:auto;overflow:visible}
.hud{position:fixed;left:8px;top:56vh;z-index:40;display:flex;flex-direction:column;width:84px;font-family:var(--mono);background:rgba(5,18,48,.86);color:#EEF3FA;border-radius:14px;padding:4px 0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translate(-8px,-50%);transition:opacity .4s,transform .45s var(--ease);pointer-events:none}
.hud.on{opacity:1;transform:translate(0,-50%)}
.hud{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} /* round 8: a thin light edge, so the chip reads as a chip over the navy bands too */
.hud div{display:flex;flex-direction:column;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.14)}
.hud div:last-child{border-bottom:0}
@media (max-width:1319px){.hud{display:none}}
.hud b{font-size:.98rem;font-weight:700;color:#fff}
.hud span{font-size:.66rem;color:#AEBBD0}

/* ---------- Motion (all of it switches off for reduced-motion visitors) ---------- */
.rotor{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .rotor{animation:rotor .09s linear infinite alternate}
  @keyframes rotor{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
  .drop{animation:drop .55s linear infinite}
  .drop:nth-child(2){animation-delay:.14s}.drop:nth-child(3){animation-delay:.28s}.drop:nth-child(4){animation-delay:.41s}
  @keyframes drop{from{transform:translateY(0);opacity:.9}to{transform:translateY(16px);opacity:0}}
  .beacon{animation:beacon 1.6s ease-in-out infinite}
  @keyframes beacon{50%{opacity:.25}}
  @keyframes rise{from{transform:translateY(105%)}to{transform:none}}
  @keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes sun-rise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:.9}}
  @keyframes tower-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  @keyframes pop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}60%{transform:translate(-50%,-50%) scale(1.06);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
  @keyframes sparkle{0%{transform:translate(0,0) scale(0) rotate(0);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(1) rotate(160deg);opacity:0}}
  .sun{animation:sun-rise 2.2s var(--ease) both}
  .roof h1 .kicker{animation:fade-up .7s var(--ease) .1s backwards}
  .roof h1 .line > span{animation:rise 1s var(--ease) backwards}
  .roof h1 .line:nth-child(2) > span{animation-delay:.2s}
  .roof h1 .line:nth-child(3) > span{animation-delay:.34s}
  .roof h1 .line:nth-child(4) > span{animation-delay:.48s}
  .roof .lede{animation:fade-up .8s var(--ease) .75s backwards}
  .roof .hero-ctas{animation:fade-up .8s var(--ease) .9s backwards}
  .roof .trust li{animation:fade-up .6s var(--ease) backwards}
  .roof .trust li:nth-child(1){animation-delay:1.05s}.roof .trust li:nth-child(2){animation-delay:1.12s}
  .roof .trust li:nth-child(3){animation-delay:1.19s}.roof .trust li:nth-child(4){animation-delay:1.26s}
  .wash-game{animation:tower-in 1.2s var(--ease) .25s backwards}
  .wg-done:not([hidden]){animation:pop .6s var(--ease)}
  .sparkle{animation:sparkle .9s var(--ease) forwards}
  .v2 .page-hero::before{animation:sun-rise 2s var(--ease) both}
  /* The hero text fades are shorter than on November 2 (round 6b: the heading is at full strength in about half a second) */
  .v2 .page-hero .crumbs{animation:fade-up .4s var(--ease) backwards}
  .v2 .page-hero h1{animation:fade-up .45s var(--ease) backwards}
  .v2 .page-hero .lede{animation:fade-up .5s var(--ease) .1s backwards}
  .v2 .page-hero .hero-ctas,.v2 .page-hero .chips{animation:fade-up .5s var(--ease) .18s backwards}
  .v2 .page-hero .hero-good-for{animation:fade-up .5s var(--ease) .15s backwards}
  .v2 .page-hero .glance,.v2 .page-hero .art-card{animation:tower-in 1s var(--ease) .3s backwards}
  /* The pill has no load-in fade: fade-up's transform would replace the pill's centering transform while it runs, so the
     bar sat half a screen to the right and jumped into place at the end (fix round 2, B4: it is in place from the first frame) */
  .js .marquee-track{animation:marq 40s linear infinite}
  .marquee.is-paused .marquee-track{animation-play-state:paused}

  /* Scroll reveals (v2.js marks only content that starts below the fold) */
  [data-anim="up"]{opacity:0;transform:translateY(22px)}
  [data-anim="up"].in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
  [data-anim="rise"]{clip-path:inset(0 0 100% 0);transform:translateY(24px)}
  [data-anim="rise"].in{clip-path:inset(-.2em -.1em -.25em -.1em);transform:none;transition:clip-path 1s var(--ease-wash) var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
  .rig[data-asm] .rig-svg .ldr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
  .rig[data-asm].in .rig-svg .ldr{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease) calc(1s + var(--d,0ms)),stroke-width .2s}

  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(2,95,239,.95)}
  .btn-primary:hover::after{transform:translateX(130%);transition:transform .75s var(--ease)}
  .faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
  .form-card.done .sent{animation:fade-up .6s var(--ease)}
  .region li.hit{animation:fade-up .5s var(--ease)}
  .role-card,.role-card[data-anim].in{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,opacity .8s var(--ease) var(--d,0ms)}
  .role-card:hover{transform:translateY(-4px);border-color:rgba(5,18,48,.3);box-shadow:0 30px 50px -36px rgba(5,18,48,.6)}
  .role-card::before{transition:transform .6s var(--ease),-webkit-text-stroke-color .4s}
  .role-card:hover::before{transform:translateY(8px) rotate(-4deg);-webkit-text-stroke-color:rgba(2,95,239,.6)}
}
/* Standing still: the line once, centered, no repeats and no button. Reduced motion shows it so; so does a visit without
   scripts, where the band could not be paused (the .js class is added by v2.js) */
@media (prefers-reduced-motion:reduce){
  .marquee-track{width:auto;justify-content:center;padding-inline:var(--gutter)}
  .marquee-track > :nth-child(n+3){display:none}
  .marquee-track span{white-space:normal;text-align:center}
  .marquee-toggle{display:none}
}
html:not(.js) .marquee-track{width:auto;justify-content:center;padding-inline:var(--gutter)}
html:not(.js) .marquee-track > :nth-child(n+3){display:none}
html:not(.js) .marquee-track span{white-space:normal;text-align:center}

/* ---------- Responsive ---------- */
/* The map's swipe hint shows wherever the map is wider than its panel (fix round 2, C4): v2.js marks the panel .is-cut by
   measuring it; without JavaScript, below 905px, where the 780px map stops fitting even with a 17px scrollbar */
@media (max-width:904px){
  .swipe-hint{display:inline}
  .netmap figcaption{position:sticky;left:0}
}
.js .swipe-hint{display:none}
.js .netmap.is-cut .swipe-hint{display:inline}
@media (max-width:1060px){
  .v2 .nav ul a{padding:8px 9px;font-size:.9rem}
}
@media (max-width:980px){
  .roof-grid,.panel-head,.rig-grid,.about-grid,.faq-grid,.quote-grid,.v2 .page-hero-grid,.split,.split2{grid-template-columns:minmax(0,1fr)}
  .roof-copy{padding-bottom:16px}
  .wg-stage,.wg-bar{margin-inline:auto;max-width:460px}
  .sun{top:auto;bottom:6%;right:-18%;width:min(92vw,560px)}
  .v2 .page-hero::before{top:auto;bottom:4%;right:-24%;width:min(86vw,480px);opacity:.6}
  .cmp{grid-template-columns:minmax(0,1fr);grid-template-areas:"switch" "scene" "table"}
  .faq-side{position:static}
  .mini-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-head{grid-template-columns:minmax(0,1fr)}
  .svc-card{grid-template-columns:minmax(0,1fr)}
  .svc-art{max-height:240px}
  .svc-art svg{max-height:200px}
}
@media (max-width:900px){
  /* The menu follows the pill's colors: a white-outlined Menu button, and the open panel is royal with white links and the
     white quote button. On a short screen (a phone on its side) the panel stops at the bottom of the window and scrolls
     inside, so the button is always reachable; v2.js closes it on Escape, an outside tap, tabbing away or growing past 900px */
  .v2 .menu-btn{display:inline-block}
  .v2 .nav{position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:10px;background:var(--sun);
    border-radius:24px;padding:14px;display:none;box-shadow:0 24px 40px -20px rgba(5,18,48,.55);
    max-height:calc(100svh - 84px);overflow-y:auto;overscroll-behavior:contain}
  .v2 .nav.open{display:flex}
  .v2 .nav ul{flex-direction:column}
  .v2 .nav ul a{padding:12px 14px;font-size:1rem}
  .v2 .site-header .btn{padding:14px 18px;font-size:1.02rem}
}
@media (max-width:760px){
  .waypoints{grid-template-columns:minmax(0,1fr);column-gap:0}
  .wp:nth-child(even){justify-self:start;margin-top:0}
  .wp{margin-left:34px}
  .regions{grid-template-columns:minmax(0,1fr)}
  .region ul{columns:2}
  .roles,.fine-print{grid-template-columns:minmax(0,1fr)}
  .hud{display:none}
  .wash-drone{width:52px;right:4px}
}
@media (max-width:640px){
  body.v2{font-size:1rem}
  .v2 main > section:where(:not(.roof):not(.marquee):not(.page-hero):not(.rail)){width:calc(100% - 16px)}
  .roof h1{font-size:clamp(3rem,15vw,4.4rem)}
  .hero-ctas .btn{flex:1 1 auto}
  .good-for,.form-grid,.mini-steps{grid-template-columns:minmax(0,1fr)}
  .dir{columns:1}
  .svc-rows a{grid-template-columns:minmax(0,1fr)}
  .svc-rows em{grid-row:auto;grid-column:1}
  .svc-card{width:86vw;padding:18px}
  .cmp-switch{justify-self:stretch}
  .cmp-switch button{padding:11px 10px;font-size:.95rem}
  .cmp-table thead{display:none}
  .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block;width:100%}
  .cmp-table tr{border-bottom:1px solid rgba(5,18,48,.14);padding:12px 0}
  .cmp-table tbody th{padding:0 0 6px;border:0;width:auto}
  .cmp-table td{border:0;padding:8px 10px;border-radius:10px}
  .cmp-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:2px}
  .form-card{--stub:0px;padding:76px 18px 22px;-webkit-mask:none;mask:none}
  .form-card::before{writing-mode:horizontal-tb;transform:none;bottom:auto;right:0;width:auto;height:58px;border-right:0;border-bottom:2px dashed rgba(5,18,48,.28);border-radius:26px 26px 0 0;font-size:1.6rem}
  .sent dl{grid-template-columns:minmax(0,1fr)}
  .marquee-copy{flex-direction:column;align-items:flex-start}
  .call-card,.call-card-apply{min-height:0}
  .call-actions{flex-direction:column;align-items:stretch;align-self:stretch}
}

/* ---------- Guy's brand and footage (October 29, 2026) ---------- */
.v2 .brand-foot{flex-direction:column;align-items:flex-start;gap:6px}
/* Footer logo (round 7, November 12, 2026): the client's full logo in white, "DRONE WASHING" included, so no separate
   "Drone Washing" text sits beside it. Sized by width so its aspect ratio (480 x 199) holds: 220px at 320, growing with the
   screen (62vw) to 280px from 452px. The sizes attribute in build/brand_v2.py says the same */
.v2 .brand-wordmark{display:block;width:clamp(220px,62vw,280px);height:auto}
.reel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.reel-head .lede{margin-top:14px}
.reel-toggle[hidden]{display:none}
.reel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.reel-card{position:relative;margin:0;border-radius:22px;overflow:hidden;background:var(--ink);aspect-ratio:9 / 16;box-shadow:0 26px 40px -30px rgba(5,18,48,.7)}
.reel-card picture{display:block;height:100%}
.reel-card video,.reel-card img{display:block;width:100%;height:100%;object-fit:cover}
.reel-card img{object-position:58% 50%}
.reel-cap{position:absolute;left:10px;top:10px;max-width:calc(100% - 20px);margin:0;padding:6px 10px;border-radius:10px;background:rgba(5,18,48,.8);
  color:#fff;font-family:var(--mono);font-size:.72rem;font-weight:700;line-height:1.3;pointer-events:none}
.about-face{display:block;width:clamp(116px,13vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 0 24px;
  box-shadow:0 0 0 6px var(--paper),0 0 0 9px var(--sun)}
.about-face img{display:block;width:100%;height:100%;object-fit:cover}
.about-more{margin:28px 0 0}
.about-portrait{margin:0;justify-self:end;width:min(100%,400px);background:#fff;border-radius:28px;padding:12px;
  border:1px solid rgba(5,18,48,.08);box-shadow:0 30px 50px -36px rgba(5,18,48,.55)}
.about-portrait img{display:block;width:100%;height:auto;border-radius:20px}
.about-portrait figcaption{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--muted);padding:12px 6px 4px}
.about-story h2{margin-bottom:18px}
.about-story p{color:var(--ink-3);font-size:1.08rem}
.about-quote{margin:30px 0 0;padding:22px 24px;border-left:4px solid var(--sun);background:#fff;border-radius:0 18px 18px 0}
.about-quote blockquote{margin:0}
.about-quote p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.08;color:var(--ink)}
.about-quote figcaption{margin-top:10px;font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--sun-text)}
.about-still{margin:0;border-radius:24px;overflow:hidden;background:var(--ink);box-shadow:0 30px 50px -36px rgba(5,18,48,.6)}
.about-still img{display:block;width:100%;height:auto}
.about-still figcaption{padding:12px 16px;color:var(--muted-dark);font-family:var(--mono);font-size:.78rem}
.about-values{max-width:880px;margin-inline:auto}
.about-values h2{margin:26px 0 10px;font-size:clamp(1.8rem,3vw,2.4rem)}
.about-cta h2{font-size:clamp(2.4rem,5vw,4rem);color:#fff;margin-bottom:14px}
.about-cta .hero-ctas{margin-top:26px}
@media (max-width:980px){
  .reel-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(62vw,280px);overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:10px;overscroll-behavior-x:contain}
  .reel-card{scroll-snap-align:start}
  .about-portrait{justify-self:start}
}
@media (max-width:900px){
  .v2 .brand-logo{height:40px}
}
.v2 .site-header .wrap{padding-left:26px}
@media (max-width:900px){
  .v2 .site-header .wrap{padding-left:18px}
}
.slot{border:2px dashed var(--sun);border-radius:14px;padding:12px 16px;background:rgba(2,95,239,.06);color:var(--sun-text) !important;
  font-family:var(--mono);font-size:.9rem !important;font-weight:700;line-height:1.5}
.about-quote .slot{margin:0}
.about-story h3{margin:26px 0 8px;font-size:1.45rem}
.about-story h3:first-of-type{margin-top:6px}
/* The story's text column sits at the vertical middle of the tall photo beside it (round 5, November 12, 2026): with the two
   spots left out the text ends well above the photo's foot. Two columns only; the grid is one column up to 980px */
@media (min-width:981px){.about-split .about-story{align-self:center}}

/* ---------- Review fixes (October 29, 2026: the fresh visual review, Hattie and Edie) ---------- */
.roof h1 .line{padding-bottom:.25em;margin-bottom:-.25em}
.v2 .page-hero h1{line-height:.98}
.rail:not(.pinned) .rail-viewport{padding-inline-start:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) var(--gutter)}
.wg-bar{justify-content:center}
.wg-buttons{margin-inline:auto}
#formError:empty{display:none}
.tag .tag-gold + text{fill:#FFFFFF}
.reel-card picture img{object-position:80% 30%}
.about-quote p.slot{font-family:var(--mono);font-weight:700;font-size:.9rem;line-height:1.5;color:var(--sun-text)}
@media (max-width:980px){
  .reel-card{box-shadow:0 12px 20px -16px rgba(5,18,48,.6)}
  .reel-grid{padding-bottom:18px}
}
@media (max-width:640px){
  .rig-svg .lbl-name,.rig-svg .hand{display:none}
}

/* ---------- The first screen: the headline card on the glass curtain wall (Mockup 2026-11-02; round 7) ----------
   Round 7 (November 12, 2026, the owner's order): the dark panel with the two washing clips is off the top of the page. The
   headline, the sentence, both buttons and the four badges stay, laid out like the other panels' heads (.panel-head): the
   headline on the left and the sentence, buttons and badges stacked on the right, so the card is compact and has no empty
   half. Under 981px everything stacks in one column: headline, sentence, buttons, badges. The panel rule above gives the
   card its white surface, bolts, width and padding. */
.facade-hero{position:relative;z-index:1}
.facade-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,4vw,64px);align-items:center}
.facade-copy{display:contents}
.facade-hero h1{grid-column:1;grid-row:1 / span 3;font-size:clamp(3rem,5.6vw,6.4rem);line-height:.86;letter-spacing:-.01em;color:var(--ink)}
.facade-hero h1 .line{display:block}
.facade-hero .lede{grid-column:2;margin-top:0;font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:44ch}
.facade-hero .hero-ctas{grid-column:2;margin-top:26px}
.facade-hero .trust{grid-column:2;margin-top:22px}
.trust-links li{padding:0}
.trust-links a{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;color:inherit;text-decoration:none;border-radius:inherit}
.trust-links a:hover,.trust-links a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){
  .facade-grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .facade-hero h1,.facade-hero .lede,.facade-hero .hero-ctas,.facade-hero .trust{grid-column:1;grid-row:auto}
  .facade-hero h1{font-size:clamp(3rem,10.4vw,5.4rem)}
  .facade-hero .lede{margin-top:24px}
}
@media (max-width:560px){
  .facade-hero h1{font-size:clamp(2.9rem,13vw,4.4rem)}
  .facade-hero .lede{font-size:1.06rem;margin-top:20px}
}

/* ---------- Mockup 2026-11-02: services as a short row with Previous and Next, no pinned scroll ---------- */
.rail-nav{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px}
/* Round 8: one tidy row from 981px: the heading at the left, its sub line beside it standing on the heading's baseline, Previous
   and Next at the far right centered on the heading's height. From 981 to 1100px the three do not fit, so the sub line drops
   under the heading and the buttons stay at the right of it. Under 981px nothing changes. */
@media (min-width:981px){
  .rail-head{grid-template-columns:auto minmax(0,1fr) auto;align-items:end;align-items:last baseline;column-gap:40px}
  .rail-head h2{grid-column:1;grid-row:1}
  .rail-head .lede{grid-column:2;grid-row:1}
  /* centered on the heading's height: the row's bottom is the heading's bottom, so the buttons sit that far up (the heading is
     0.92 of its font size tall; the buttons are 36px) */
  .rail-nav{grid-column:3;grid-row:1;align-self:end;margin-bottom:calc(clamp(2.8rem,6.2vw,5.6rem) * .46 - 18px)}
  .rail-progress{grid-row:2}
}
@media (min-width:981px) and (max-width:1100px){
  .rail-head{grid-template-columns:minmax(0,1fr) auto}
  .rail-head .lede{grid-column:1 / -1;grid-row:2}
  .rail-nav{grid-column:2}
  .rail-progress{grid-row:3}
}
.rail .chip-btn{color:#fff;background:transparent;border-color:rgba(255,255,255,.5)}
.rail .chip-btn:hover{border-color:#fff}
.rail .chip-btn:disabled{opacity:.4;cursor:default}
.rail-viewport{padding-inline:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scroll-padding-inline:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)))}

/* ---------- Mockup 2026-11-02: quote form, when and certificate of insurance ---------- */
.form-card .check{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.form-card .check input{width:20px;height:20px;accent-color:var(--sun);flex:none}

/* Mockup fix round 3: the gauge keeps only Washed; Altitude and Floor read as a working reach nobody has confirmed */
.hud div:nth-child(1),.hud div:nth-child(2){display:none}

/* Mockup fix round 5: [hidden] must win over .field's flex; Previous and Next dim with aria-disabled and keep focus */
.field[hidden]{display:none}
.rail .chip-btn[aria-disabled="true"]{opacity:.4;cursor:default}