/* Eagle 1 Drone Washing, v2 concept: "Top-Down".
   The page is a building washed from the roof to the street as you scroll. */
/* Stand-ins for Big Shoulders Display while it loads (Open Sky fix round 2, November 11, 2026). The plain "Arial Narrow"
   fallback drew weight 900 as a wide black face, so "Clean Buildings." broke onto two lines and the hero jumped 117px when
   the font arrived. These local faces are scaled to the display face's widths (measured: Arial Narrow Bold 96% at weight
   900 and 90% at 800; Arial Bold 78.7% and 73.8% where Arial Narrow is missing) with its ascent and descent, so headings
   wrap the same before and after the swap */
@font-face{font-family:"E1 Display Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold"),local("LiberationSansNarrow-Bold");
  font-weight:850 1000;size-adjust:96%;ascent-override:102.1%;descent-override:21.9%;line-gap-override:0%}
@font-face{font-family:"E1 Display Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),local("Liberation Sans Narrow Bold"),local("LiberationSansNarrow-Bold");
  font-weight:1 849;size-adjust:90%;ascent-override:108.9%;descent-override:23.3%;line-gap-override:0%}
@font-face{font-family:"E1 Display Wide Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
  font-weight:850 1000;size-adjust:78.7%;ascent-override:124.5%;descent-override:26.7%;line-gap-override:0%}
@font-face{font-family:"E1 Display Wide Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
  font-weight:1 849;size-adjust:73.8%;ascent-override:132.8%;descent-override:28.5%;line-gap-override:0%}
: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","E1 Display Fallback","E1 Display Wide Fallback",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --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;
  /* Open Sky (November 11, 2026): one pair of outer margins, the pale sky tone step, and one header height
     that every offset below the sticky bar is measured from */
  --m:clamp(20px,3.9vw,64px); --sky-pale:#DCE9FF; --ink-4:#0C2156;
  --hdr-h:60px; --brand-h:44px;
  --hero-h:max(560px,100svh); --media-w:calc(var(--hero-h) * 9 / 16);
  /* the homepage hero's royal field holds the bar from this width: four links and the pill (fix round 2; moved up 11.54px
     for the wider logo lockup in round 5, November 12, 2026) */
  --field-min:calc(257.36px + 28.086rem + 2 * var(--m));
}
@media (min-width:700px){:root{--hdr-h:68px;--brand-h:50px}}
@media (min-width:1024px){:root{--hdr-h:76px;--brand-h:56px;--field-min:calc(271.71px + 28.086rem + 2 * var(--m))}}
*,*::before,*::after{box-sizing:border-box}
/* Every jump (anchors, Skip to Content, focus) stops clear of the sticky bar (fix round 2). Arriving from another page lands
   at once; in-page jumps glide only after v2.js adds .smooth, at the visitor's first click or key or a second after load */
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr-h)}
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}}

/* The page sits on a flat sky-grey; white panels and dark bands separate by tone, not lines */
body.v2{
  margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);
  background-color:#C3D1DE;
  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(2rem,4.4vw,4.2rem)}
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}
.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}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.skip:focus-visible{outline-color:#fff} /* the skip link opens over the royal bar, where a royal ring would vanish */
main{position:relative;z-index:1}
section[id]{scroll-margin-top:26px} /* plus the bar height from html's scroll-padding-top */

/* ---------- 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: the royal bar (Open Sky, November 11, 2026) ----------
   The white logo lockup, white links and one white pill. The links never wrap: when the row cannot hold them
   they drop one at a time from the right (container queries below); up to 58.75em (940px) the menu button takes over.
   Fix round 2: the switch moved from 900 to 940px, where the wordmark, all six links and the pill fit with a 17px
   classic scrollbar taking its share of the width and with either the web font or the Windows fallback (both
   font hosts blocked): 0.922 x 921 - 17 = 832px of row for 824px of content, plus 20px to spare. On inner pages
   no link is ever hidden while the Menu button is; the drops below only act in the homepage's royal field.
   Round 5 (November 12, 2026): the logo is the lockup, 105.1 / 119.4 / 133.7px wide at 44 / 50 / 56px tall (the old wordmark
   was 92.0 / 107.9 / 124.0px at 34 / 40 / 46px). The switch to the Menu stays at 58.75em; every drop threshold below and
   --field-min moved up by the logo's growth: 11.54px under 1024px, 9.69px from 1024px.
   The logo's aspect-ratio is pinned to 160:67 (the 160px file), because the 320 and 480 files round their heights differently
   (133 and 200px) and would draw up to 1px wider on 2x and 3x screens, past what the thresholds measured.
   The bar's text is set in rem and the switch in em (fix round 2), so a visitor who raises the browser's default
   font size gets larger links and the Menu earlier (at 24px, up to 1410px); the logo, gaps and margins stay px */
.v2 .site-header{position:sticky;top:0;z-index:50;background:var(--sun);color:#fff}
.v2 .header-row{display:flex;align-items:center;gap:26px;max-width:none;margin:0;padding:0 var(--m);height:var(--hdr-h);container:hdr / inline-size}
.v2 .brand{display:flex;align-items:center;flex:none;min-height:44px;text-decoration:none;color:#fff}
.v2 .brand-logo{display:block;height:var(--brand-h);width:auto;aspect-ratio:160/67}
.v2 .brand-word{font-family:var(--display);font-weight:900;font-size:1.45rem;line-height:.9;letter-spacing:.01em}
.v2 .brand-word small{display:block;font-family:var(--body);font-size:.8125rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:2px}
.v2 .nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.v2 .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.v2 .nav ul a{display:flex;align-items:center;min-height:44px;color:#fff;font-size:.9375rem;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
  text-decoration-thickness:2px;text-underline-offset:6px}
.v2 .nav ul a:hover{text-decoration-line:underline}
.v2 .site-header .btn{min-height:44px;padding:0 20px;border:0;background:#fff;color:var(--sun);font-size:.9375rem;font-weight:600;white-space:nowrap}
.v2 .site-header .btn:hover{background:var(--ink);color:#fff;transform:none}
.v2 .menu-btn{display:none}
.v2 .site-header :focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
.v2 .site-header .btn:focus-visible,.v2 .menu-btn:focus-visible{border-radius:999px}
/* Links drop from the right (FAQ first) when the row cannot hold them. Thresholds are the row's content width:
   logo + 26 + links and their 26px gaps + 26 + pill + 8px slack. Measured November 11, 2026 with the old wordmark
   107.9px (40px tall) or 124.0px (46px), and moved up on November 12, 2026 for the lockup (119.4px at 50px, 133.7px at 56px):
   links 59.1 / 92.2 / 95.1 / 43.8 / 54.5 / 30.1px, pill 159.2px. Since fix round 2 each
   threshold is its fixed part in px (logo, gaps, pill padding, slack) plus its text in rem (the links and the pill's
   label, measured at 16px), so the drops follow the browser's default font size; at 16px they are the same widths */
@media (min-width:58.8125em){
  @container hdr (max-width:calc(309.30px + 33.371rem)){.v2 .nav li:nth-child(n+6){display:none}}
  @container hdr (max-width:calc(283.26px + 31.4925rem)){.v2 .nav li:nth-child(n+5){display:none}}
  @container hdr (max-width:calc(257.26px + 28.086rem)){.v2 .nav li:nth-child(n+4){display:none}}
  @container hdr (max-width:calc(231.29px + 25.347rem)){.v2 .nav li:nth-child(n+3){display:none}}
  @container hdr (max-width:calc(205.34px + 19.406rem)){.v2 .nav li:nth-child(n+2){display:none}}
  @container hdr (max-width:calc(179.33px + 13.644rem)){.v2 .nav ul{display:none}}
}
@media (min-width:1024px) and (min-width:58.8125em){
  @container hdr (max-width:calc(323.65px + 33.371rem)){.v2 .nav li:nth-child(n+6){display:none}}
  @container hdr (max-width:calc(297.61px + 31.4925rem)){.v2 .nav li:nth-child(n+5){display:none}}
  @container hdr (max-width:calc(271.61px + 28.086rem)){.v2 .nav li:nth-child(n+4){display:none}}
  @container hdr (max-width:calc(245.64px + 25.347rem)){.v2 .nav li:nth-child(n+3){display:none}}
  @container hdr (max-width:calc(219.59px + 19.406rem)){.v2 .nav li:nth-child(n+2){display:none}}
  @container hdr (max-width:calc(193.58px + 13.644rem)){.v2 .nav ul{display:none}}
}

/* ---------- Roof (homepage hero) ---------- */
.roof{position:relative;z-index:1;overflow:hidden;padding:clamp(108px,13vh,150px) 0 0;
  background:var(--sky-1)}
.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:#EDF4FF;opacity:.5}
.glow{position:absolute;left:-10%;right:-10%;bottom:-25%;height:65%;background:transparent}
.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 .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}
/* The hero's trust chips (.trust, .trust-links) were retired in Open Sky (November 11, 2026): the four facts are one plain line (.trust-line) */
.parapet{position:relative;height:34px;background-color:var(--ink-2)}

/* 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}
.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(--body);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 ----------
   Inner pages only since Open Sky (November 11, 2026): the homepage's sections are full-width fields instead.
   :where() keeps the specificity at (0,1,2), so every inner-page variant below still wins as before. */
.v2 main > section:where(:not(.roof):not(.marquee):not(.page-hero):not(.rail):not(.v2-home *)){
  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)}
.v2 main > section.facade-hero{margin-top:clamp(16px,2.5vh,28px);padding-top:clamp(40px,6vh,76px)}
.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}
.flight .panel-head{grid-template-columns:minmax(0,1fr);gap:16px}

/* ---------- 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,background-color .3s ease}
.cmp-switch button[aria-pressed=true]{color:#fff;background:var(--ink)}
.cmp-knob{display:none}
.cmp[data-mode=drone] .cmp-knob{transform:translateX(100%)}
.cmp-scene{grid-area:scene;margin:0;border-radius:22px;overflow:hidden}
.cmp-scene svg{width:100%;height:auto}
.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}
.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(--body);font-weight:700;font-size:16px;text-anchor:middle}
.rig-svg .lbl-name{fill:#DCE6F4;font-family:var(--body);font-weight:500;font-size:14px}
.rig-svg .hand text{font-family:var(--display);font-weight:800;font-size:26px;fill:var(--peach)} /* the note is set in the display face (Open Sky); Caveat is no longer loaded */
.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;display:flex;flex-direction:column;gap:3px}
.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-left:3px solid transparent;padding:13px 10px 13px 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(--body);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}
.rail-pin{padding-block:clamp(56px,8vw,96px)}
.rail.pinned .rail-pin{position:sticky;top:0;height:100svh;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:var(--sky-1);border-radius:22px;display:grid;place-items:center;padding:20px;color:var(--ink)}
.svc-art svg{width:100%;height:auto}
.svc-tag{font-size:.95rem;font-weight:650;color:var(--sun-text);margin:6px 0 14px}
.svc-card h3{font-size:clamp(1.9rem,3.2vw,2.9rem);margin-bottom:4px}
.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:var(--paper-2);border-radius:24px}
.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;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;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(--body);font-size:12px;fill:#56627A}
.tag text{font-family:var(--body);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(--body);font-size:.9rem;color:#56627A;margin-top:12px;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(--body);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(1.5rem,3.4vw,2.2rem);line-height:1.05;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(--body);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:clamp(1.25rem,2.4vw,1.6rem);line-height:1.1;color:var(--ink);margin:0 0 10px}
.verse cite{font-style:normal;font-family:var(--body);font-size:.95rem;color:#23406E}
.faith-card h3{margin:26px 0 10px}
.faith-card > p{color:#33435C}
.promise{list-style:none;margin:20px 0 0;padding:0}
.promise li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-weight:650}
.promise svg{flex:none;margin-top:2px}

/* ---------- Reviews marquee ---------- */
.marquee{position:relative;z-index:1;background:var(--sun);color:#fff;padding:0 0 clamp(36px,5vw,56px);margin:clamp(70px,13vh,150px) 0}
.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;animation:marq 40s linear infinite}
.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{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:50%;padding:11px}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:16px 40px;padding-top:28px}
.marquee-copy p{margin:0;max-width:60ch;font-size:1.1rem;font-weight:500}

/* ---------- 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:calc(var(--hdr-h) + 46px)}
.faq-side h2,.v2 .faq-grid h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.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:0}
.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}
.facts li{padding:10px 0}
.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; /* taste-skill-ignore: boarding-pass ticket die-cut mask, not a gradient fill */
  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} /* taste-skill-ignore: boarding-pass ticket die-cut mask, not a gradient fill */
.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(--body);font-weight:700;font-size:.9rem;letter-spacing:0;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;clip:rect(0 0 0 0)}
.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(--body);font-size:.9rem;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)} /* taste-skill-ignore: drawn boarding-pass barcode, shown only after the form is sent */
.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)}

/* ---------- Footer: the navy field where the name returns large (Open Sky, November 11, 2026) ----------
   The wordmark leads; the description and the two link lists sit on one grid in white, the legal line under them. */
.v2 .site-footer{position:relative;z-index:1;background:var(--ink);color:#fff;margin-top:clamp(70px,13vh,150px);
  padding:clamp(64px,8vw,112px) 0 clamp(32px,4vw,48px);font-size:1rem;line-height:1.5}
.v2 .site-footer .wrap{max-width:none;padding-inline:var(--m)}
.v2 .footer-row{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.v2 .brand-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.v2 .footer-about{margin:32px 0 0;max-width:30ch;font-size:1.125rem;line-height:1.5;color:#fff}
.v2 .footer-areas{margin:14px 0 0;max-width:48ch;font-size:1rem;color:var(--sky-pale)}
.v2 .footer-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.v2 .footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.v2 .site-footer a{color:#fff;text-decoration:none}
.v2 .footer-list a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration-thickness:2px;text-underline-offset:5px}
.v2 .site-footer a:hover{text-decoration-line:underline}
.v2 .site-footer :focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
.v2 .footer-legal{margin-top:clamp(48px,7vw,96px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;color:var(--sky-pale)}
.v2 .footer-legal a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* "Privacy Policy" stays on one line and is a 44px tap target like the footer's other links (fix round 2) */
.v2 .footer-legal a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
@media (min-width:560px){
  .v2 .footer-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:32px}
}
@media (min-width:1024px){
  .v2 .footer-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .v2 .footer-brand{grid-column:1 / span 6}
  .v2 .footer-cols{grid-column:7 / -1;column-gap:24px}
}

/* ---------- Inner pages (city, service, hub, 404) ---------- */
.v2 .page-hero{position:relative;z-index:1;overflow:hidden;padding:clamp(48px,8vh,88px) 0 calc(clamp(56px,8vw,96px) + 30px);
  background:var(--sky-1)}
.v2 .page-hero::before{content:"";position:absolute;width:min(42vw,460px);aspect-ratio:1;right:5%;top:26%;border-radius:50%;
  background:#EDF4FF;opacity:.45}
.v2 .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background-color:var(--ink-2)}
.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(--body);font-size:.9rem;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:#FFFFFF;border-radius:24px;padding:24px 26px 12px}
.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:9px 0}
.glance dt{font-family:var(--body);font-size:.9rem;color:var(--muted);padding-top:13px}
.glance dd{font-weight:650}
/* 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}}
.glance dl > :nth-last-child(-n+2){border-bottom:0}
.art-card{background:#FFFFFF;border-radius:24px;padding:22px;color:var(--ink)}
.art-card svg{width:100%;height:auto}
/* Service pages: the Good For list (round 3, November 12, 2026). The bullets cut from the homepage's service cards,
   set on the commercial, residential and HOA service pages (round 3b took them off the window and roof pages) 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 (body face, .9rem, 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(--body);font-size:.9rem;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:14px 0}
.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:18px 8px;text-decoration:none;transition:background-color .25s ease}
.svc-rows a:hover{background-color:rgba(2,95,239,.08)}
.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(--body);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}
.dir a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 4px;text-decoration:none;font-weight:700;transition:background-color .25s ease}
.dir a:hover{background-color:rgba(2,95,239,.08);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:32px}
.area-stop:target{background:rgba(2,95,239,.1)}
.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)}
.role-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;background:var(--paper-2);
  border-radius:26px;padding:clamp(24px,3vw,34px)}
.role-n{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{font-size:.95rem;font-weight:650;color:var(--sun-text);margin:6px 0 0}
.role-card h3{font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:.98}
.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}
.hire-steps li{counter-increment:hire;position:relative;padding:14px 0 14px 54px}
.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"}
.fine-print{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 44px;margin-top:clamp(40px,6vw,64px);padding-top:24px;
  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}

/* ---------- Facade wash: retired in the taste pass. The grime texture muddied the clean flat ground
   and the fixed instrument gauge overlapped body text; the scroll-wash gimmick no longer fits the
   facade-video hero. Hidden here (the now-inert JS handlers do no harm). ---------- */
#facadeGrime,.wash-line,.wash-drone,.hud{display:none!important}
#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:rgba(255,255,255,.5);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(--body);background:var(--ink);color:#EEF3FA;border-radius:14px;padding:4px 0;
  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 div{display:flex;flex-direction:column;padding:8px 10px}
.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(.2) 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 .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}
  .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 .glance,.v2 .page-hero .art-card{animation:tower-in 1s var(--ease) .3s backwards}
  .v2 .page-hero .hero-good-for{animation:fade-up .5s var(--ease) .15s backwards}
  /* The bar no longer fades in on load (fix round 2): it is at full strength and in place from the first frame */

  /* 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:hover{transform:translateY(-2px)}
  .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)}
  .role-n{transition:transform .6s var(--ease),-webkit-text-stroke-color .4s}
  .role-card:hover .role-n{transform:translateY(8px) rotate(-4deg);-webkit-text-stroke-color:rgba(2,95,239,.6)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;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}
}

/* ---------- Responsive ---------- */
@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:58.75em){
  /* The site's menu, kept: a navy pill opens the full list and the quote pill under the royal bar. On a short screen
     (a phone on its side) the panel stops at the bottom of the window and scrolls inside, so the quote pill is always
     reachable (fix round 2); v2.js closes it on Escape, an outside click, tabbing away or growing past 940px */
  .v2 .menu-btn{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;padding:0 20px;border:0;border-radius:999px;
    background:var(--ink);color:#fff;font:inherit;font-size:.9375rem;font-weight:600;line-height:1;cursor:pointer}
  .v2 .nav{position:absolute;top:var(--hdr-h);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:14px;margin:0;
    padding:6px var(--m) 24px;background:var(--sun);max-height:calc(100svh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
  .v2 .nav.open{display:flex}
  .v2 .nav ul{flex-direction:column;gap:0}
  .v2 .nav ul a{min-height:48px;font-size:1.0625rem}
  .v2 .site-header .btn{min-height:52px;font-size:1.0625rem}
}
/* The map's swipe hint shows wherever the map is wider than its panel (fix round 2): 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: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):not(.v2-home *)){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(--body);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)}
  .call-card,.call-card-apply{min-height:0}
  .call-actions{flex-direction:column;align-items:stretch;align-self:stretch}
  .marquee-copy{flex-direction:column;align-items:flex-start}
}

/* ---------- Guy's brand and footage (October 29, 2026) ---------- */
/* Footer logo (round 5, November 12, 2026): the client's full logo in white, "DRONE WASHING" included. Sized by width so its
   aspect ratio (480 x 199) holds, with the same presence the old wordmark had by height: 240px at 320 growing with the
   screen to 325px at 500 (65vw), 325px to 1139px, then 28.5vw up to 410px from 1440px. The sizes attribute in
   build/brand_v2.py says the same */
.v2 .brand-wordmark{display:block;width:clamp(240px,65vw,325px);height:auto}
@media (min-width:1024px){.v2 .brand-wordmark{width:clamp(325px,28.5vw,410px)}}
.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}
.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 11px;border-radius:10px;background:rgba(5,18,48,.82);
  color:#fff;font-family:var(--body);font-size:.85rem;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}
.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}
.about-portrait img{display:block;width:100%;height:auto;border-radius:20px}
.about-portrait figcaption{font-family:var(--body);font-size:.9rem;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(--body);font-size:.82rem;font-weight:700;color:var(--sun-text)}
.about-still{margin:0;border-radius:24px;overflow:hidden;background:var(--ink)}
.about-still img{display:block;width:100%;height:auto}
.about-still figcaption{padding:12px 16px;color:var(--muted-dark);font-family:var(--body);font-size:.9rem}
.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}
}
.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(--body);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, so phones are unchanged */
@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(--body);font-weight:700;font-size:.9rem;line-height:1.5;color:var(--sun-text)}
@media (max-width:980px){
  .reel-grid{padding-bottom:18px}
}
@media (max-width:640px){
  .rig-svg .lbl-name,.rig-svg .hand{display:none}
}

/* ---------- Mockup 2026-11-02: the facade hero. A glass curtain wall whose panes are real Eagle 1 jobs ---------- */
.facade-hero{position:relative;z-index:1;background:var(--sky-1);padding-top:clamp(104px,13vh,140px);overflow:hidden}
.facade-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.facade-copy{align-self:center;padding-bottom:clamp(56px,10vh,120px)}
.facade-hero h1{font-size:clamp(3.6rem,7.2vw,8rem);line-height:.86;letter-spacing:-.01em;color:var(--ink)}
.facade-hero h1 .line{display:block}
.facade-hero .lede{margin-top:28px;font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:44ch}
.facade-hero .hero-ctas{margin-top:30px}
.facade-wall{position:relative;align-self:end;max-height:min(80vh,780px);overflow:hidden;
  margin-right:calc(-1 * ((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter)));
  background:var(--ink);border-top:clamp(16px,2vw,26px) solid var(--ink-2);
  padding:clamp(12px,1.3vw,18px) clamp(12px,1.3vw,18px) 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,14px);align-items:start}
.pane{margin:0;position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2)}
.pane:nth-of-type(2){margin-top:clamp(40px,7vh,84px)}
.pane:nth-of-type(3){margin-top:clamp(16px,3vh,32px)}
.pane video{display:block;width:100%;height:100%;object-fit:cover}
.pane figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);margin:0;padding:6px 10px;
  background:var(--ink);color:#fff;font-size:.82rem;font-weight:650;line-height:1.25}
.clips-btn{position:absolute;top:12px;right:12px;z-index:2;background:var(--ink);color:#fff;border-color:rgba(255,255,255,.5)}
.clips-btn:hover{border-color:#fff}
@media (max-width:980px){
  .facade-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .facade-copy{padding-bottom:0}
  .facade-wall{margin-inline:calc(-1 * var(--gutter));max-height:none}
}
@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}
  .facade-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pane:nth-of-type(3){display:none}
  .pane:nth-of-type(2){margin-top:32px}
}

/* ---------- 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}
.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 1: two tall panes, a two-line headline, the wall inside its panel, footage early on phones */
.facade-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.facade-hero h1{font-size:clamp(3rem,5vw,5.8rem)}
.facade-copy{align-self:start;padding-top:clamp(8px,3vh,32px)}
.facade-wall{margin-right:0;align-self:stretch;max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.pane{aspect-ratio:9/19}
.pane:nth-of-type(2){margin-top:clamp(48px,9vh,96px)}
@media (max-width:980px){
  .facade-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .facade-copy{display:contents}
  .facade-hero h1{order:1;font-size:clamp(3rem,9vw,5.4rem)}
  .facade-hero .lede{order:2}
  .facade-hero .hero-ctas{order:3}
  .facade-wall{order:4;margin-top:32px;margin-inline:calc(-1 * var(--gutter))}
  .facade-hero .trust{order:5;margin:24px 0 clamp(32px,6vh,56px)}
}
@media (max-width:560px){
  .facade-hero h1{font-size:clamp(2.9rem,13vw,4.4rem)}
  .pane:nth-of-type(2){margin-top:40px}
}

/* Mockup fix round 2 (Shannon): captions leave the clips for the staggered gaps, set like signage on the wall */
.facade-wall{padding-bottom:clamp(12px,1.3vw,18px);align-items:start}
.pane{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible;background:none}
.pane:nth-of-type(2){margin-top:0}
.pane-up{flex-direction:column-reverse}
.pane video{width:100%;height:auto;aspect-ratio:9/19;object-fit:cover;background:var(--ink-2)}
.pane figcaption{position:static;max-width:none;display:flex;align-items:center;gap:12px;
  min-height:clamp(64px,9vh,96px);padding:0 2px;background:none;color:#fff;
  font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,1.65vw,1.65rem);letter-spacing:.015em;line-height:1.05}
.cap-mark{flex:none;width:30px;height:14px;color:var(--sky-3)}
.clips-btn{position:static;margin-left:auto;flex:none;width:40px;height:40px;padding:0;display:grid;place-items:center;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer;
  transition:border-color .2s,background-color .2s}
.clips-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.clips-btn:focus-visible{outline:3px solid var(--sky-3);outline-offset:3px}
.clips-btn svg{width:14px;height:14px;fill:currentColor}
.clips-btn .i-play{display:none}
.clips-btn.is-paused .i-play{display:block}
.clips-btn.is-paused .i-pause{display:none}
@media (max-width:560px){
  .pane:nth-of-type(2){margin-top:0}
  .pane figcaption{font-size:1.05rem;gap:8px;min-height:60px}
  .cap-mark{display:none}
  .clips-btn{width:34px;height:34px}
}

/* 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],.clips-btn[hidden]{display:none}
.rail .chip-btn[aria-disabled="true"]{opacity:.4;cursor:default}

/* =====================================================================================================
   Open Sky homepage (November 11, 2026), from the approved mockup 3-open-sky.html. Scoped to .v2-home.
   Every section is a full-width flat field with the page's one pair of outer margins (--m); no two
   neighbouring fields share a colour; royal is for the hero and the band only. Square media, pill
   buttons, no gradients, no shadows at rest, no hairline rules, no outlined boxes.
   ===================================================================================================== */
body.v2-home{background-color:#fff}
.v2-home main > section{position:relative;padding:clamp(72px,8.4vw,120px) var(--m)}
.v2-home main > section > .wrap{max-width:none;margin:0;padding-inline:0}
.v2-home{--h2:clamp(52px,14vw,72px)}
@media (min-width:700px){.v2-home{--h2:clamp(72px,10.4vw,112px)}}
@media (min-width:1024px){.v2-home{--h2:clamp(64px,7.5vw,150px)}}
.v2-home main h2{font-size:var(--h2);line-height:.92;letter-spacing:-.015em}
.nw{white-space:nowrap}

/* One button shape: a fully round pill, 52px tall; royal on white, white on royal, navy on the photograph */
.v2-home .btn{min-height:52px;padding:0 30px;border:0;font-size:18px;font-weight:600;line-height:1.1}
.v2-home .btn-primary:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--sun)}
.btn-light:hover{background:var(--ink);color:#fff}
.btn-navy{background:var(--ink);color:#fff}
.btn-navy:hover{background:var(--sun);color:#fff}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:600;line-height:1.1;color:#fff;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;transition:text-underline-offset .2s var(--ease)}
.text-link:hover{text-underline-offset:4px}
.v2-home .open-hero :focus-visible,.v2-home .ticker :focus-visible{outline-color:#fff}

/* A clip's pause control: the shared Pause Clips flag as a small navy pill at the clip's lower right */
.clips-pill{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--body);font-size:15px;font-weight:600;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.clips-pill:hover{background:#fff;color:var(--sun)}
.clips-pill:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.clips-pill[hidden]{display:none}

/* ---------- Hero: phone first. The royal bar, the clip, then the royal field ---------- */
.v2-home main > section.open-hero{padding:0;background:var(--sun);color:#fff}
.open-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "copy"}
/* Fix round 2: on a short phone the clip gives up height (never under 200px) so the quote button is on the first screen.
   The clip is the screen less the bar, the copy above the button and 8px: 60 + 24 + 18 + 22 + 52 + 8 = 184px of fixed
   parts, a six-line lede (153px, the 360px case) and the two-line headline (1.84 x 16.6% of the field), which comes to
   100svh - 324.8px - 30.544vw. Tall phones keep the clip they had (300px or 40% of the screen) */
.hero-media{grid-area:media;position:relative;margin:0;height:clamp(200px,calc(100svh - 324.8px - 30.544vw),max(300px,40svh));overflow:hidden;background:var(--ink)}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-copy{grid-area:copy;container-type:inline-size;padding:24px var(--m) 44px}
/* "Clean Buildings." measures 5.85em: 16.6cqi fills about 94% of the phone field, 15.4cqi about 90% elsewhere.
   -0.04em pulls the ink of "C" and "N" onto the shared left edge */
.v2-home .open-hero h1{margin:0 0 0 -.04em;font-size:16.6cqi;font-weight:900;line-height:.92;letter-spacing:-.03em;color:#fff}
.open-hero h1 .line{display:block}
.v2-home .open-hero .lede{margin:18px 0 0;max-width:34em;font-size:17px;line-height:1.5;color:#fff;text-wrap:pretty}
.open-hero .hero-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px}
.open-hero .hero-ctas .btn{align-self:stretch}
.trust-line{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 .3em;font-size:16px;font-weight:500;line-height:1.5;color:#fff}
@media (min-width:700px){
  /* Stacked tablets and narrow windows (fix round 2): the headline is also capped at 13% of the screen height and the
     clip takes what the screen has left above the button: the bar, 36 + 28 + 26px of space, the three-line lede
     (86px), the 52px button, 8px to spare and the headline's two lines; at least 200px, at most half the screen */
  .hero-media{height:clamp(200px,calc(100svh - var(--hdr-h) - 1.84 * min(13.6vw,13svh) - 236px),50svh)}
  .hero-copy{padding:36px var(--m) 52px}
  .v2-home .open-hero h1{font-size:min(15.4cqi,13.6vw,13svh);letter-spacing:-.02em}
  .v2-home .open-hero .lede{margin-top:28px;font-size:19px}
  .open-hero .hero-ctas{flex-direction:row;align-items:center;gap:32px;margin-top:26px}
  .open-hero .hero-ctas .btn{align-self:auto}
  .trust-line{margin-top:22px;font-size:17px}
}
/* Short landscape screens under 1000px (a phone on its side, 200% zoom on a laptop): the clip stands beside the copy at
   9:16 of the space under the bar, and the type is sized to the height, so the headline and the quote button share
   the first screen (fix round 2) */
@media (max-width:999.98px) and (min-aspect-ratio:4/3) and (max-height:640px){
  .open-hero{grid-template-columns:minmax(0,1fr) calc((100svh - var(--hdr-h)) * 9 / 16);grid-template-areas:"copy media"}
  .hero-media{height:auto;min-height:calc(100svh - var(--hdr-h))}
  .hero-copy{padding:18px var(--m) 28px}
  .v2-home .open-hero h1{font-size:min(15.4cqi,16.5svh);letter-spacing:-.02em}
  .v2-home .open-hero .lede{margin-top:12px;font-size:16px;line-height:1.45}
  .open-hero .hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:14px}
  .open-hero .hero-ctas .btn{align-self:auto}
  .trust-line{margin-top:14px;font-size:15px}
}
/* Desktop: two flat regions, the royal field and the footage at its natural 9:16. The header sits inside the
   royal field while the hero is under it (v2.js adds .is-solid about one bar height before the hero has scrolled away).
   From 1000px since fix round 2, so a 1024px window that gives 15 to 17px to a classic scrollbar keeps this layout */
@media (min-width:1000px) and (min-aspect-ratio:6/5){
  .open-hero{min-height:var(--hero-h);grid-template-columns:minmax(0,1fr) var(--media-w);grid-template-areas:"copy media"}
  .hero-media{height:auto;min-height:0}
  .hero-copy{align-self:end;padding:calc(var(--hdr-h) + 32px) var(--m) var(--m)}
  .v2-home .open-hero h1{font-size:min(15.4cqi,calc(var(--hero-h) * .17))}
  .v2-home .open-hero .lede{margin-top:32px;max-width:31em;font-size:clamp(18px,1.32vw,20px)}
  .open-hero .hero-ctas{margin-top:30px}
  .clips-pill{right:20px;bottom:20px}
  .v2-home .site-header{margin-bottom:calc(-1 * var(--hdr-h))}
  .js .v2-home .site-header:not(.is-solid){background:transparent}
  /* The bar stays in the field only where the field holds the logo, at least four links and the pill (--field-min:
     the row content those need, 706.7px, or 721.1px from 1024px, with the round 5 lockup (695.2px and 711.4px with the old
     wordmark), plus the row's margins). Narrower, the row
     spans the page from the start: a solid bar with all six links (fix round 2). The clamp() is a step between the two */
  .js .v2-home .site-header:not(.is-solid) .header-row{background:var(--sun);
    width:clamp(calc(100% - var(--media-w)),calc((var(--field-min) - 100% + var(--media-w)) * 100000),100%)}
}
/* The bar's empty half turns royal at the same scroll position where v2.js makes the bar solid (two bar heights before the
   hero ends), driven by the scroll itself rather than a script, so even a fast flick or a jump to #section never paints
   a frame with the page showing through the bar (fix round 2). A step, not a fade: royal from that position on */
@supports (animation-timeline:scroll()){
  @media (min-width:1000px) and (min-aspect-ratio:6/5){
    .js .v2-home .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sun);opacity:0;pointer-events:none;
      animation:bar-solid linear both;animation-timeline:scroll(root block);
      animation-range:calc(var(--hero-h) - 2 * var(--hdr-h) - 1px) calc(var(--hero-h) - 2 * var(--hdr-h))}
  }
  @keyframes bar-solid{from{opacity:0}to{opacity:1}}
}

/* ---------- What We Wash: heading, line and the stair tower clip on the left; five large rows on the right ---------- */
.v2-home main > section.svc-sec{background:#fff;color:var(--ink)}
.v2-home .svc-head .lede{margin:16px 0 0;max-width:22em;font-size:17px;font-weight:500;line-height:1.45;color:var(--ink);text-wrap:balance} /* no lone "Ground." (fix round 2) */
.svc-list{list-style:none;margin:36px 0 0;padding:0}
/* Rows sit 76px apart (padding plus margin), so each "More About" link reads with its own row, not as a label over the next */
.svc-list > li + li{margin-top:40px}
.svc-row{display:block;margin:0 calc(var(--m) * -1);padding:18px var(--m);color:var(--ink);text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.v2-home .svc-row h3{margin:0;font-size:clamp(34px,9.6vw,40px);font-weight:800;line-height:1;letter-spacing:-.01em}
.v2-home .svc-row .svc-tag{margin:8px 0 0;font-size:17px;font-weight:600;line-height:1.4;color:inherit}
.svc-row p{margin:6px 0 0;max-width:36em;font-size:17px;line-height:1.45}
.v2-home .svc-row .svc-more{display:inline-block;margin-top:10px;font-weight:600;color:var(--sun-text);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.svc-row:hover,.svc-row:focus-visible{background:var(--sun);color:#fff}
.v2-home .svc-row:hover .svc-more,.v2-home .svc-row:focus-visible .svc-more{color:#fff}
.svc-row:focus-visible{outline:3px solid var(--ink);outline-offset:0;border-radius:0}
.svc-clip{margin:40px 0 0}
.svc-clip-box{position:relative}
.svc-clip video{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 30%;background:var(--ink)}
.svc-cta{margin:36px 0 0}
@media (min-width:700px){
  .v2-home .svc-head .lede{font-size:19px}
  .v2-home .svc-row h3{font-size:clamp(44px,5.6vw,56px)}
  .v2-home .svc-row .svc-tag,.svc-row p{font-size:18px}
}
@media (min-width:1024px){
  /* The row links are body size from here (19px), so rows can sit 44px apart without a link reading as a label over the next */
  .svc-list > li + li{margin-top:0}
  .svc-row{padding-block:22px}
  .v2-home .svc-row h3{font-size:clamp(44px,3.8vw,72px)}
  .v2-home .svc-row .svc-more{font-size:19px}
}
/* 1024 to 1279: the five full rows run far taller than a 9:16 clip can be in a left column (measured: a 353px hole at
   1024), so the section keeps the phone order (heading, rows, clip, button). Each row sets its name and line beside its
   paragraph, and the clip is a wide band cropped from its 9:16 frame around the drone */
@media (min-width:1024px) and (max-width:1279px){
  .svc-row{columns:2;column-gap:24px}
  .svc-row p:not(.svc-tag){break-before:column;margin:0;max-width:none}
  .svc-clip video{aspect-ratio:16 / 9;object-position:50% 20%}
}
@media (min-width:1280px){
  /* Left: the heading and line, the stair tower clip, the button. Right: the five rows. The clip takes the height the
     rows leave between the line and the button, at its natural 9:16 and never wider than the left column */
  .v2-home main > section.svc-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px}
  .svc-head{grid-column:1 / span 5;grid-row:1}
  .v2-home .svc-head .lede{margin-top:24px}
  .svc-clip{grid-column:1 / span 5;grid-row:2;position:relative;min-height:360px;margin:48px 0 0;container-type:inline-size}
  .svc-clip-box{position:absolute;left:0;bottom:0;height:min(100%,calc(100cqi * 16 / 9));aspect-ratio:9 / 16}
  .svc-clip video{height:100%;aspect-ratio:auto;object-position:50% 50%}
  .svc-list{grid-column:6 / -1;grid-row:1 / span 3;margin:-22px 0 -24px}
  .svc-row{margin:0 -28px;padding:22px 28px}
  .svc-cta{grid-column:1 / span 5;grid-row:3;margin:32px 0 0}
}

/* Shared homepage pieces: section heads, ledes, secondary buttons (navy pills, never outlined) */
.v2-home .panel-head{gap:20px 64px;margin-bottom:clamp(40px,5vw,72px)}
.v2-home .lede{max-width:36em;font-size:17px;line-height:1.5;color:inherit;text-wrap:pretty} /* no single word left on a lede's last line (fix round 2) */
.v2-home .btn-ghost{border:0;background:var(--ink);color:#fff}
.v2-home .btn-ghost:hover{background:var(--sun);color:#fff;border-color:transparent}
/* The sent panel's Start Another Request sits in the white boarding pass, where .on-dark .form-card .btn-ghost would
   set its label navy on the navy pill: white on navy here too (fix round 2). The careers page keeps its own button */
.v2-home .form-card .btn-ghost{color:#fff}
.v2-home .form-card .btn-ghost:hover{background:var(--sun);color:#fff;border-color:transparent}
@media (min-width:700px){.v2-home .lede{font-size:19px}}
@media (min-width:981px){.v2-home .panel-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

/* ---------- Same Wall. Better Way.: the photograph band, then the comparison on white ----------
   Phone and tablet: the photograph, then a navy field with white type. From 1150px: navy type straight on the
   bright sky, upper left, clear of the palms (measured: see the Open Sky record). --photo-sky is sampled from the
   photograph's sky and only shows while the photograph is loading or missing. */
.v2-home main > section.cmp-sec{padding:0;background:#fff;color:var(--ink)}
.photo-band{--photo-sky:#86A4DA;position:relative;background:var(--ink);color:#fff}
.photo-band picture{display:block}
.band-img{display:block;width:100%;height:68svh;min-height:380px;object-fit:cover;object-position:67% 30%;background-color:var(--photo-sky)}
.band-copy{padding:40px var(--m) 56px}
.v2-home .photo-band h2{margin:0;font-size:clamp(56px,16vw,104px);letter-spacing:-.02em;color:inherit}
.photo-band h2 .line{display:block}
.band-lede{margin:20px 0 0;max-width:30em;font-size:17px;line-height:1.5}
.photo-band .btn{margin-top:28px}
.cmp-body{padding:clamp(72px,8.4vw,120px) var(--m)}
@media (min-width:700px){
  .band-img{height:64svh}
  .band-copy{padding:56px var(--m) 72px}
  .band-lede{font-size:19px}
}
@media (min-width:1150px){
  .photo-band{height:clamp(560px,82svh,1100px);overflow:hidden;background:var(--photo-sky)}
  .photo-band picture{position:absolute;inset:0}
  .band-img{position:absolute;inset:0;height:100%;min-height:0;object-position:30% 30%}
  .band-copy{position:absolute;left:0;top:17%;padding:0 var(--m);color:var(--ink)}
  .v2-home .photo-band h2{font-size:var(--h2)}
  .band-lede{margin-top:24px;max-width:min(24em,calc(40vw - var(--m)));text-wrap:balance}
  .photo-band .btn{background:var(--ink);color:#fff}
  .photo-band .btn:hover{background:var(--sun);color:#fff}
  .photo-band .btn:focus-visible{outline-color:var(--ink)}
}
/* The comparison, flat: a tone-step switch, a square scene, a table separated by space and tone, no rules */
.v2-home .cmp{gap:32px 56px}
.v2-home .cmp-switch{border:0;background:var(--sky-pale);padding:6px}
.v2-home .cmp-switch button{min-height:48px;padding:0 24px;color:var(--ink);font-size:17px;font-weight:600}
.v2-home .cmp-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.v2-home .cmp-scene{border-radius:0}
/* The scene's panel is as tall as the table beside it: flat pale sky above, the drawing anchored to its ground line at
   the bottom, never stretched or cropped. Where the drawing would fill under 55% of that panel the panel stacks above
   the table instead: measured November 11, 2026, it reaches 55% at 1316px (52% at 1300, 62% at 1420, 70 to 78% from
   1500), so the two sit side by side from 1340px. Stacked, the drawing is capped at 720px wide (405px tall), centred,
   with the ground line carried across the panel */
.v2-home .cmp-scene{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;position:relative;background:var(--sky-pale)}
.v2-home .cmp-scene svg{position:relative;z-index:1;flex:none;width:min(100%,720px);height:auto;margin-inline:auto}
.v2-home .cmp-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;padding-top:min(4.6875%,33.75px);background:#C8CFD8}
@media (max-width:1339px){
  .v2-home .cmp{grid-template-columns:minmax(0,1fr);grid-template-areas:"switch" "scene" "table"}
}
.v2-home .cmp-table{font-size:1.0625rem;line-height:1.45}
.v2-home .cmp-table th,.v2-home .cmp-table td{border:0;padding:15px 16px}
.v2-home .cmp-table thead th{padding-top:4px;font-size:clamp(1.4rem,2vw,1.75rem);border:0}
.v2-home .cmp-table tbody th{padding-left:0}
.v2-home .cmp[data-mode=drone] .us{background:var(--sky-pale)}
.v2-home .cmp[data-mode=lift] .lift{background:#E9EDF3}
/* The highlighted column changes tone, never weight, so no column changes width when the mode flips (fix round 2: the
   bold column had moved the table about 5px on every toggle). These out-rank the base .cmp[data-mode] weights */
.v2-home .cmp[data-mode] .cmp-table td{font-weight:400}
.v2-home .cmp[data-mode] .cmp-table thead th{font-weight:800}
@media (max-width:640px){
  .v2-home .cmp-table tr{border:0;padding:0 0 18px}
  .v2-home .cmp-table tbody th{padding:0 0 8px}
  .v2-home .cmp-table td{border-radius:0;padding:10px 12px}
  .v2-home .cmp-table td::before{font-size:.8125rem;color:inherit}
}

/* ---------- Meet the Rig.: the labelled drawing on a full-width navy field, two typefaces, flat fills ---------- */
.v2-home main > section.rig{background:var(--ink);color:#fff}
.v2-home main > section.rig .lede{color:var(--sky-pale)}
.v2-home .rig-grid{gap:clamp(32px,5vw,80px)}
.v2-home .rig-svg{color:var(--sky-pale)}
.v2-home .rig-svg [fill="#1B3448"]{fill:var(--ink)}
.v2-home .rig-svg [stroke="#1B3448"]{stroke:var(--ink)}
/* Royal for the active part: its filled shapes (the fill sits on the part's group or on its shapes), the hose's line */
.v2-home .rig-svg .part.on[fill="#1B3448"],.v2-home .rig-svg .part.on [fill="#1B3448"]{fill:var(--sun)}
.v2-home .rig-svg .part.on[data-part="hose"]{color:var(--sun)}
.v2-home .rig-svg .lbl-name{fill:#fff;font-size:15px}
/* The note keeps its arrow but is set straight in the display face */
.v2-home .rig-svg .hand text{transform:none;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.01em;fill:#fff}
.v2-home .rig-svg .hand path{stroke:var(--sky-pale)}
.v2-home .rig-legend{gap:4px}
.v2-home .rig-legend button{border:0;padding:14px 16px;align-items:center}
.v2-home .rig-legend button:hover{background:var(--ink-4)}
.v2-home .rig-legend button.on{background:var(--sun)}
.v2-home .rig-legend .chip{background:var(--sun);font-size:.875rem}
.v2-home .rig-legend button.on .chip{background:#fff;color:var(--sun)}
.v2-home .rig-legend strong{font-size:clamp(1.4rem,1.8vw,1.75rem)}
.v2-home .rig-legend .d{color:var(--sky-pale);font-size:1rem}
.v2-home .rig-legend button.on .d{color:#fff}
/* Fix round 2. A picked part dims the other labels to 55%, not 20%: names stay 6:1 on the navy field and the letters 3.3:1
   on their discs. The lettered discs pick their part too (v2.js), so they take the pointer */
.v2-home .rig-svg.has-active .callout:not(.on),.v2-home .rig-svg.has-active .hand,
.v2-home .rig[data-asm].in .rig-svg.has-active .callout:not(.on),.v2-home .rig[data-asm].in .rig-svg.has-active .hand{opacity:.55}
.v2-home .rig-svg .callout{cursor:pointer}
/* Phones show the letters without names, so each disc grows around its own centre until its letter draws at 11px or more
   (16 units times the drawing's scale times --mk; the scale is the column width over 720) */
@media (max-width:640px){
  .v2-home .rig-svg{--mk:1.06}
  .v2-home .rig-svg .code-bg,.v2-home .rig-svg .code{transform-box:fill-box;transform-origin:center;transform:scale(var(--mk))}
}
@media (max-width:519px){.v2-home .rig-svg{--mk:1.28}}
@media (max-width:429px){.v2-home .rig-svg{--mk:1.42}}
@media (max-width:389px){.v2-home .rig-svg{--mk:1.56}}
@media (max-width:359px){.v2-home .rig-svg{--mk:1.78}}

/* ---------- Watch the Drone Work.: five pieces of footage in one row, square, captions beneath ---------- */
.v2-home main > section.reel{background:#fff;color:var(--ink)}
.v2-home .reel-head{margin-bottom:clamp(40px,5vw,64px)}
.v2-home .reel-toggle{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600}
.v2-home .reel-toggle:hover{background:var(--sun)}
.v2-home .reel-toggle[hidden]{display:none}
.v2-home .reel-grid{gap:clamp(12px,1.6vw,24px)}
.v2-home .reel-card{border-radius:0;overflow:visible;background:none;aspect-ratio:auto}
.v2-home .reel-card video,.v2-home .reel-card picture{display:block;width:100%;height:auto;aspect-ratio:9 / 16;background:var(--ink)}
.v2-home .reel-card video{object-fit:cover}
.v2-home .reel-card picture img{width:100%;height:100%;object-fit:cover}
.v2-home .reel-cap{position:static;max-width:none;margin:12px 0 0;padding:0;border-radius:0;background:none;color:var(--ink);
  font-family:var(--display);font-size:clamp(1.25rem,1.6vw,1.6rem);font-weight:800;line-height:1.05;letter-spacing:.01em;
  text-wrap:balance} /* a caption that wraps in the five-across row splits as evenly as its words allow (fix round 2) */
/* Tablets show the whole row of five; phones keep the swipe */
@media (min-width:700px) and (max-width:980px){
  .v2-home .reel-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;
    scroll-snap-type:none;padding-bottom:0}
}

/* ---------- From the First Walkthrough to the Last.: four flat tiles on pale sky, the path in royal ---------- */
.v2-home main > section.flight{background:var(--sky-pale);color:var(--ink)}
.v2-home .flight .panel-head{grid-template-columns:minmax(0,1fr)}
.v2-home .flight-svg .guide{stroke:var(--ink);stroke-opacity:.3;stroke-width:2.5;stroke-dasharray:2 9}
.v2-home .flight-svg .trail{stroke:var(--sun);stroke-width:5}
.v2-home .wp{max-width:500px;padding:28px 30px 32px;border-radius:0;background:#fff}
.v2-home .wp-num{width:56px;height:56px;border:0;background:var(--ink);color:#fff;font-size:1.9rem}
.v2-home .wp.reached .wp-num{background:var(--sun)}
.v2-home .wp h3{margin-bottom:10px;font-size:clamp(2rem,2.8vw,2.75rem);font-weight:800;line-height:1}
.v2-home .wp p{color:var(--ink)}
/* The foot keeps the base 28px above it (fix round 2), so the drone parked at the end of the path stays clear of the sentence */
.v2-home .process-foot p{color:var(--ink);font-size:17px}
@media (min-width:700px){.v2-home .process-foot p{font-size:19px}}

/* ---------- 23 Stops. Two States.: the checker and the transit map on white, the map's panel flat and square ---------- */
.v2-home main > section.network{background:#fff;color:var(--ink)}
.v2-home .netmap{border-radius:0;background:var(--sky-pale)}
.v2-home .netmap figcaption{color:var(--ink);font-size:1rem}
/* Each region's count sits beside its heading, not inside it: one face per headline */
.region-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.region-head p{margin:0;font-size:1rem;font-weight:500;color:var(--ink)}
.v2-home .region h3{display:block;border:0;padding:0;margin:0;font-size:clamp(1.6rem,2vw,2rem)}

/* ---------- Run by Guy Jones.: pale sky field, Guy's portrait and words as one navy block, the faith card as a flat
   white tile ---------- */
.v2-home main > section.about{background:var(--sky-pale);color:var(--ink)}
.v2-home .about > h2{margin-bottom:clamp(32px,4.4vw,64px)}
.v2-home .about-main{container:about / inline-size}
/* The portrait frame (round 4, November 12, 2026; the owner picked the navy option): the square headshot sits flush in
   a navy block that fills the About column, so no empty field shows beside it. Side by side from 460px of column (the
   photo 42% of the block, 200px at least, the quote centred beside it); narrower, the photo on top at full width and
   the quote on the navy plate below. From 981px, where the faith card sits beside it, the block's top lines up with the
   card's. The photo draws from 200px to about 460px wide, and the sizes in _body.html follow it */
.v2-home .about-pair{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;margin:0 0 36px;background:var(--ink)}
.v2-home .about-face{width:100%;margin:0;border-radius:0}
.v2-home .about-said{container-type:inline-size;align-self:center;padding:24px 22px 28px}
@container about (min-width:460px){
  .v2-home .about-pair{grid-template-columns:minmax(200px,42%) minmax(0,1fr)}
  .v2-home .about-said{padding:16px clamp(22px,5cqi,40px)}
}
/* The quote sizes to its own column (8cqi is about two lines of it), never under 20px (1.25rem), is kept from leaving
   one word alone on its last line by text-wrap: pretty (a browser without it may still leave one), and is white on the
   navy (18.49:1). While the scroll fill runs, the words waiting their turn are #7E93BC (5.98:1 on the navy) and turn
   white as they fill; under reduced motion the fill never arms, so the quote stays plain white */
.v2-home .quote-fill{margin:0 0 12px;font-size:clamp(1.25rem,8cqi,2.4rem);text-wrap:pretty;color:#fff}
.v2-home .quote-fill.armed .w{color:#7E93BC}
.v2-home .quote-fill.armed .w.on{color:#fff}
.v2-home .about-said .pull-cite{margin:0;font-size:1rem;color:var(--sky-pale)}
.v2-home .about-main > p:not(.quote-fill):not(.pull-cite):not(.hiring-note){color:var(--ink)}
.v2-home .about h2{font-size:var(--h2)}
.v2-home .faith-card{border-radius:0;background:#fff}
.v2-home .faith-card > p,.v2-home .verse cite{color:var(--ink)}
.v2-home .hiring-note a{color:var(--sun-text)}

/* The two long headings keep to two lines at every width: same face and weight, a capped size */
.v2-home .flight h2{font-size:min(var(--h2),9.2vw)}
.v2-home .faq h2{font-size:min(var(--h2),11.5vw)}

/* ---------- Questions Owners Ask Before Booking.: white field, items separated by tone, not rules ---------- */
.v2-home main > section.faq{background:#fff;color:var(--ink)}
.v2-home .faq h2{margin-bottom:clamp(28px,4vw,56px)}
.v2-home .faq-grid{gap:28px 24px}
.v2-home .faq-side{position:static}
.v2-home .faq-side .lede{margin:0;max-width:22em}
.v2-home .faq-list{border:0;display:flex;flex-direction:column;gap:8px}
.v2-home .faq-list details{background:var(--sky-pale);padding:0 20px}
.v2-home .faq-list summary{padding:20px 52px 20px 0;font-size:1.125rem}
.v2-home .faq-list summary::after{right:0;background-color:#fff}
.v2-home .faq-list details[open] summary::after{background-color:var(--sun)}
.v2-home .faq-list summary:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.v2-home .faq-list details p{margin:0;padding:0 0 22px;color:var(--ink);font-size:1.0625rem}
@media (min-width:981px){
  .v2-home .faq-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .v2-home .faq-side{grid-column:1 / span 4}
  .v2-home .faq-list{grid-column:5 / -1}
  .v2-home .faq-list details{padding:0 28px}
}

/* ---------- Get a Free Quote.: navy field, the boarding pass flat and square-cornered ---------- */
.v2-home main > section.quote{background:var(--ink);color:#fff}
.v2-home .quote-title{margin-bottom:clamp(36px,5vw,64px);font-size:var(--h2);line-height:.92}
.v2-home .quote .lede{color:#fff}
.v2-home .facts b{font-size:clamp(1.4rem,1.8vw,1.6rem)}
.v2-home .facts span{color:var(--sky-pale)}
.v2-home .form-card{border-radius:0}
.v2-home .form-card::before{background:var(--sky-pale);color:var(--sun)}
.v2-home .test-note{border-radius:0;background:var(--sky-pale);color:var(--ink)}
@media (max-width:640px){.v2-home .form-card::before{border-radius:0}}

/* ---------- The band: New to the Sky, Not to the Work., royal, directly between the quote and the footer ---------- */
.v2-home main > section.ticker{padding:30px 0;background:var(--sun);color:#fff;overflow:hidden}
.ticker-view{overflow:hidden}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-group{display:flex;align-items:center;flex:none}
.ticker-line{margin:0;padding:0 .42em;font-family:var(--display);font-size:clamp(42px,6vw,96px);font-weight:800;line-height:1.05;
  letter-spacing:-.01em;white-space:nowrap}
/* The lighthouse stands straight on the royal band as a separator (round 5, November 12, 2026): no plate, because its white
   fill would vanish on one. Its height is the cap height of the band's words: Big Shoulders Display's capitals are 0.8125 of
   the font size (measured from the face, November 12, 2026) and the words are clamp(42px,6vw,96px). The face's capitals sit
   0.0208em above the middle of the line box, so the mark rises by that much. */
.ticker-mark{display:block;flex:none;height:clamp(34.13px,4.875vw,78px);transform:translateY(clamp(-2px,-.125vw,-.88px))}
.ticker-mark img{display:block;width:auto;height:100%}
.ticker-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px 32px;padding:0 var(--m)}
.ticker-foot:empty,.ticker-foot:not(:has(.ticker-ask)){padding:0}
.ticker-ask{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-right:auto;padding-top:20px}
.ticker-ask p{margin:0;max-width:44em;font-size:17px;font-weight:500;line-height:1.5}
.ticker-toggle{display:none;align-items:center;min-height:44px;margin-top:14px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.ticker-toggle:hover{background:#fff;color:var(--sun)}
.ticker-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
@media (min-width:1024px){.v2-home main > section.ticker{padding-top:44px}}
/* Moving only where motion is welcome; only the button pauses it (no hover or focus pause) */
@media (prefers-reduced-motion:no-preference){
  .js .v2-home main > section.ticker{padding-bottom:16px}
  .js .ticker-foot{padding:0 var(--m)}
  .js .ticker-toggle{display:inline-flex}
  .js .ticker-track{animation:drift 38s linear infinite}
  .ticker.is-paused .ticker-track{animation-play-state:paused}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
/* Standing still: the whole line once, wrapped to fit the width, no repeats and no button. The same without JavaScript,
   where the band never moves and has no working button (fix round 2) */
@media (prefers-reduced-motion:reduce){
  .ticker-view{padding:0 var(--m)}
  .ticker-track,.ticker-group{display:block;width:auto}
  .ticker-line:not(.ticker-first),.ticker-mark{display:none}
  .ticker-line{display:block;padding:0;white-space:normal;text-wrap:balance}
}
html:not(.js) .ticker-view{padding:0 var(--m)}
html:not(.js) .ticker-track,html:not(.js) .ticker-group{display:block;width:auto}
html:not(.js) .ticker-line:not(.ticker-first),html:not(.js) .ticker-mark{display:none}
html:not(.js) .ticker-line{display:block;padding:0;white-space:normal;text-wrap:balance}

/* The quote, the band and the footer meet with no gap */
.v2-home .site-footer{margin-top:0}