:root{
  color-scheme:dark;
  --ink:#0f1215;          /* film-base black */
  --ink-2:#161a1e;        /* raised panel */
  --ink-3:#1d2227;
  --print:#ede9e0;        /* silver-gelatin paper */
  --mid:#95938b;          /* matte gray */
  --grid:rgba(237,233,224,.05);
  --dirt:#b04a2a;         /* Oklahoma red-bed */
  --dirt-hi:#d0633f;
  --gold:#d9a441;         /* the viewer's compare divider */
  --ortho:#f2d64b;        /* the viewer's ORTHO tag */
  --hair:rgba(237,233,224,.14);
  --hair-2:rgba(237,233,224,.28);
  --disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --util-h:30px;          /* the thin strip: year, city, phone, client door */
  --nav-h:64px;           /* the bar itself, now one line rather than two stacks */
  --head-h:94px;          /* util + nav. The open menu hangs off this and anchors
                             clear it. Kept as a literal because a custom property
                             cannot be used inside a media query, and because a
                             calc() here would still need the two above to be right. */
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--print);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* PLSS section-line grid over the whole ground */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:96px 96px;
}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding-inline:max(16px,3vw)}
section{scroll-margin-top:calc(var(--head-h) + 8px)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--mid);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--dirt);flex:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:.95;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.display-xl{font-size:clamp(52px,8.6vw,124px)}
.display-l{font-size:clamp(34px,5vw,62px)}
.display-m{font-size:clamp(24px,2.8vw,34px)}
.lede{font-size:clamp(17px,1.6vw,20px);max-width:58ch}
.muted{color:var(--mid)}
.mono{font-family:var(--mono)}
.note{font-family:var(--mono);font-size:12.5px;color:var(--mid);letter-spacing:.02em}
.flag{color:var(--dirt-hi)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--hair-2);border-radius:2px;background:transparent;color:var(--print);
  transition:border-color .18s,background .18s,color .18s;
}
.btn:hover{border-color:var(--print)}
.btn-primary{background:var(--dirt);border-color:var(--dirt)}
.btn-primary:hover{background:var(--dirt-hi);border-color:var(--dirt-hi)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--dirt-hi);outline-offset:3px}

/* ---------- header ---------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(15,18,21,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
/* THE UTILITY STRIP, and why the bar below it is one line.
   Round 10's bar was three stacks: the name over the year, the page links as
   two rows, the quote button over the phone. Measured on 2026-09-20 it put
   SIX different top edges inside 72 px (44, 45, 48, 72, 76, 79), four type
   sizes and two link colours into one bar, and it read as two menus on top of
   one another. The low-value items live up here now at one size, which frees
   the width for all six links on ONE baseline below. Nothing was dropped. */
.util{border-bottom:1px solid var(--hair);background:rgba(15,18,21,.55)}
.util-in{display:flex;align-items:center;justify-content:space-between;height:var(--util-h);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.util-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util-r{display:flex;align-items:center;gap:26px;white-space:nowrap}
.util-r a{color:var(--mid);transition:color .15s}
.util-r a:hover{color:var(--print)}
.util-r .tel{font-variant-numeric:tabular-nums;letter-spacing:.1em}

.nav{display:flex;align-items:center;height:var(--nav-h);gap:16px}
.brand{display:flex;align-items:center;white-space:nowrap;line-height:1}
.brand-name{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.nav-links{display:flex;flex:1;min-width:0;gap:28px;align-items:center}
.nav-pages{display:flex;align-items:center;margin:0 auto}
.nav-row{display:flex;gap:26px;align-items:baseline}
/* ONE size and ONE colour for every page link. A second row at a smaller size
   in a dimmer colour is what made the old bar read as two menus, so if a
   second row is ever wanted again it inherits these and does not override
   them. */
.nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--print);transition:color .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--print)}
.nav-links a[aria-current="page"]{box-shadow:0 10px 0 -8px var(--dirt-hi)}
.nav-cta{display:flex;align-items:center;margin-left:6px}
.nav-cta .btn{padding:8px 16px;line-height:1.2;color:var(--print);box-shadow:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--dirt);color:var(--print);padding:10px 14px;font-family:var(--mono);font-size:13px}
.skip:focus{left:8px}
/* The menu button, shown when the page links no longer fit in the bar. The
   links then drop down under the header as one column. */
.nav-toggle{display:none;order:3;align-items:center;gap:10px;background:none;border:1px solid var(--hair-2);border-radius:2px;color:var(--print);cursor:pointer;padding:9px 12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle .bars i{display:block;height:1.5px;background:var(--print)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* One row of six needs more width than two rows of three did, so the menu
   arrives earlier. The number is MEASURED, not chosen: see the rehearsal note
   in this batch. */
@media(max-width:1050px){
  .nav-toggle{display:inline-flex}
  .nav-links{order:2;justify-content:flex-end}
  .nav-pages{display:none}
  .nav-links a:not(.btn):not(.tel){display:none}
  .nav-cta{margin-left:0}
  header.nav-open .nav-links{
    position:absolute;left:0;right:0;top:var(--head-h);display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--hair);padding:8px max(16px,3vw) 18px;
  }
  header.nav-open .nav-pages{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
  header.nav-open .nav-row{flex-direction:column;align-items:stretch;gap:0}
  header.nav-open .nav-links a:not(.btn):not(.tel){display:block;padding:13px 0;border-bottom:1px solid var(--hair);font-size:14px}
  header.nav-open .nav-links a[aria-current="page"]{box-shadow:none;color:var(--print);border-left:2px solid var(--dirt-hi);padding-left:12px}
  /* the button stands alone in the open menu; the phone is in the strip above,
     visible at every width, so it is never buried behind a tap */
  header.nav-open .nav-cta{display:flex;flex-direction:row;align-items:center;gap:20px;margin-top:18px}
  header.nav-open .nav-cta .btn{display:inline-flex;padding:12px 18px}
}
/* The strip sheds its sentence before it sheds anything anyone taps, and the
   phone survives to the narrowest width. */
@media(max-width:760px){.util-l{display:none}.util-in{justify-content:flex-end}}
@media(max-width:560px){.nav-links{gap:12px}.nav-cta .btn{padding:7px 12px}.nav-toggle .nav-toggle-lbl{display:none}.util-r{gap:16px}}
@media(max-width:430px){.util-in-link{display:none}}
/* Below 460px the bar is brand + menu; the quote button and phone wait in the menu. */
@media(max-width:460px){.nav-cta{display:none}}

/* ---------- breadcrumb ---------- */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mid);padding-top:18px}
.crumbs a:hover{color:var(--print)}
.crumbs .sep{margin:0 10px;opacity:.6}
.crumbs [aria-current]{color:var(--print)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vh,112px) 0 clamp(44px,7vh,88px);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(15,18,21,.93) 0%,rgba(15,18,21,.74) 48%,rgba(15,18,21,.38) 100%),
  linear-gradient(0deg,var(--ink) 0%,rgba(15,18,21,.1) 32%)}
.hero .wrap{position:relative;z-index:1}
.frame{position:relative;padding:clamp(24px,4vw,56px)}
.fid{position:absolute;width:22px;height:22px;pointer-events:none;opacity:.7}
.fid::before,.fid::after{content:"";position:absolute;background:var(--print)}
.fid::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.fid::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.fid.tl{top:0;left:0}.fid.tr{top:0;right:0}.fid.bl{bottom:0;left:0}.fid.br{bottom:0;right:0}
.hero .eyebrow{margin-bottom:22px}
.hero h1 .alt{color:var(--dirt-hi)}
.hero .lede{margin:26px 0 34px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.datastrip{
  margin-top:clamp(36px,6vh,60px);border-top:1px solid var(--hair);padding-top:14px;
  display:flex;flex-wrap:wrap;gap:10px 32px;
  font-family:var(--mono);font-size:12px;color:var(--mid);letter-spacing:.05em;
}
.datastrip b{color:var(--print);font-weight:500}

/* ---------- shared section ---------- */
.sec{padding:clamp(56px,9vh,108px) 0;border-top:1px solid var(--hair)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:30px;flex-wrap:wrap}
.sec-head .aside{max-width:44ch;font-size:15px;color:var(--mid)}
.chrome{border:1px solid var(--hair);border-radius:3px;overflow:hidden;background:var(--ink-2)}
.chrome-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:12px;color:var(--mid);min-width:0}
.chrome-bar .url{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:8px;height:8px;border-radius:50%;background:var(--hair-2);flex:none}
.dot.on{background:var(--dirt-hi)}
.stand-in{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);border:1px dashed var(--hair-2);padding:3px 7px;border-radius:2px;white-space:nowrap}

/* ---------- live demo ---------- */
.demo-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center}
@media(max-width:960px){.demo-grid{grid-template-columns:1fr}}
.demo-stage{position:relative;aspect-ratio:16/10;max-width:100%;background:radial-gradient(120% 90% at 70% 15%,#1f262c 0%,#12161a 60%,#0d1013 100%)}
.demo-stage svg.poster{position:absolute;inset:0;width:100%;height:100%}
.demo-stage img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-grid+.demo-grid{margin-top:clamp(40px,6vh,64px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--hair)}
/* The obliques viewer lays its two panes side by side only above 720px, and it
   needs height for the film strip, so its demo gets the whole width at 16:9. */
.demo-wide{grid-template-columns:1fr;gap:28px}
.demo-wide .demo-stage{aspect-ratio:16/9}
.demo-copy-2{display:grid;grid-template-columns:1.1fr .9fr;gap:8px 48px;align-items:start}
.demo-copy-2 .facts{margin-top:8px}
@media(max-width:860px){.demo-copy-2{grid-template-columns:1fr}}
/* On a phone the embedded viewer is too cramped to be worth it; the
   "Open full screen" button under each demo is the way in. */
@media(max-width:700px){.demo-load{display:none}}
.demo-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0d1013}
.hud{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:12px;color:var(--print);line-height:1.8;pointer-events:none;background:rgba(15,18,21,.78);padding:4px 9px;border-radius:2px}
.demo-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,18,21,.86)}
/* two or more demos on one stage: the buttons sit side by side in the middle */
.demo-pick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 28px)}
.demo-pick .demo-load{position:static;transform:none}
.demo-switch{margin-left:auto;background:none;border:0;color:var(--dirt-hi);font:inherit;cursor:pointer;white-space:nowrap;padding:0}
.demo-switch:hover{color:var(--print)}
@media(max-width:700px){.demo-pick{display:none}}
.demo-cap{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:12px;color:var(--print);text-align:right;pointer-events:none;background:rgba(15,18,21,.78);padding:4px 9px;border-radius:2px}
.demo-copy p{color:var(--mid);margin:18px 0 24px;max-width:46ch}
.facts{list-style:none;border-top:1px solid var(--hair);margin-bottom:26px}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px}
.facts .k{font-family:var(--mono);font-size:12.5px;color:var(--mid);letter-spacing:.04em}
.facts .v{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- time machine ---------- */
.tm-bar a{margin-left:auto;color:var(--dirt-hi);white-space:nowrap}
.tm-bar a:hover{color:var(--print)}
.tm-stage{position:relative;aspect-ratio:1600/964;max-width:100%;background:#1b1d18;overflow:hidden}
.tm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.tm-img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tm-img{transition:none}}
.prov{
  position:absolute;left:14px;top:14px;display:flex;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(15,18,21,.86);border:1px solid var(--hair);padding:8px 12px;border-radius:2px;
}
.prov b{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:.02em;line-height:1}
.prov span{color:var(--mid)}
@media(max-width:600px){.prov{left:8px;top:8px;padding:5px 9px}.prov b{font-size:22px}}
.tm-cap{padding:14px 16px 0;font-size:15.5px;min-height:3.6em;max-width:70ch}
.tm-controls{padding:12px 16px 16px}
.tm-range{width:100%;accent-color:var(--gold);cursor:pointer;height:24px}
.ticks{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--mid)}
.ticks button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:6px 2px;font-variant-numeric:tabular-nums}
.ticks button[aria-pressed="true"]{color:var(--gold)}
.tm-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border-top:1px solid var(--hair)}
@media(max-width:760px){.tm-foot{grid-template-columns:1fr 1fr}}
.tm-foot div{background:var(--ink-2);padding:14px 16px}
.tm-foot .k{display:block;font-family:var(--mono);font-size:12px;color:var(--mid);letter-spacing:.06em;text-transform:uppercase}
.tm-foot .v{font-size:14.5px}

/* ---------- instrument tabs ---------- */
.tabs-scroll{overflow-x:auto;border-bottom:1px solid var(--hair);margin-bottom:28px;scrollbar-width:thin}
.tabs{display:flex;gap:0;min-width:max-content}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--mid);cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:14px 18px 12px;white-space:nowrap;transition:color .15s,border-color .15s;
}
.tab:hover{color:var(--print)}
.tab[aria-selected="true"]{color:var(--print);border-bottom-color:var(--dirt-hi)}
.panel{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
@media(max-width:960px){.panel{grid-template-columns:1fr;gap:26px}}
.panel-art{position:relative}
.panel-art .chrome-bar{justify-content:space-between}
.art{aspect-ratio:16/10;max-width:100%;position:relative;background:#101417;overflow:hidden}
.art > svg{position:absolute;inset:0;width:100%;height:100%}
.panel-copy h3{font-size:clamp(28px,3vw,40px);margin-bottom:14px}
.panel-copy p{color:var(--mid);max-width:48ch}
.spec{list-style:none;margin-top:22px;border-top:1px solid var(--hair)}
.spec li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px}
.spec .k{font-family:var(--mono);font-size:12.5px;color:var(--mid);letter-spacing:.04em;flex:none}
.spec .v{text-align:right}
.who{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--mid)}
.who b{color:var(--print);font-weight:500}

/* oblique split stand-in */
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}
.split .half{position:relative;overflow:hidden;border-right:1px solid var(--hair)}
.split .half:nth-child(2){border-right:0}
.split .half svg{position:absolute;inset:0;width:100%;height:100%}
.split .half img{width:100%;height:100%;object-fit:cover}
.split .lbl{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;background:rgba(15,18,21,.82);border:1px solid var(--hair);padding:3px 7px;border-radius:2px}
.ribbon{grid-column:1 / -1;display:flex;gap:6px;padding:8px;background:var(--ink);border-top:1px solid var(--hair);overflow:hidden}
.ribbon img{width:calc((100% - 30px)/6);aspect-ratio:3/2;object-fit:cover;opacity:.55;border:1px solid transparent;cursor:pointer;transition:opacity .15s}
.ribbon img:hover{opacity:.85}
.ribbon img.sel{opacity:1;border-color:var(--gold)}

/* ---------- delivery ---------- */
.deliver{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:960px){.deliver{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.deliver{grid-template-columns:1fr}}
.deliver article{background:var(--ink);padding:28px 24px 30px;display:flex;flex-direction:column;gap:12px}
.deliver h3{font-size:26px}
.deliver p{color:var(--mid);font-size:15px}
.deliver code{font-family:var(--mono);font-size:12px;color:var(--print);background:var(--ink-3);border:1px solid var(--hair);padding:6px 8px;border-radius:2px;overflow-wrap:anywhere;margin-top:auto}

/* ---------- google earth band ---------- */
.ge{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
@media(max-width:960px){.ge{grid-template-columns:1fr;gap:28px}}
.ge-date{text-transform:uppercase;font-family:var(--disp);font-weight:800;font-size:clamp(64px,10vw,132px);line-height:.85;color:var(--dirt-hi);letter-spacing:-.01em}
.ge p{color:var(--mid);margin-top:18px;max-width:46ch}
.table-wrap{overflow-x:auto;border:1px solid var(--hair)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
thead th{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mid);background:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:500}
td.them{color:var(--mid)}
td.us{color:var(--print)}
.mark{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gold);margin-right:6px}

/* ---------- pillars ---------- */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:860px){.pillar-grid{grid-template-columns:1fr}}
.pillar{background:var(--ink);padding:32px 26px 34px;display:flex;flex-direction:column;gap:14px}
.pillar h3{font-size:clamp(26px,2.6vw,34px)}
.pillar p{color:var(--mid);font-size:15px}
.pillar .spec{margin-top:auto}

/* ---------- gallery ---------- */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.g-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.g-grid{grid-template-columns:1fr}}
.g-item{border:1px solid var(--hair);border-radius:2px;overflow:hidden;background:var(--ink-2)}
.g-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.g-item:hover img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){.g-item img{transition:none}.g-item:hover img{transform:none}}
.g-cap{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--mid);letter-spacing:.05em;border-top:1px solid var(--hair)}
.g-cap b{color:var(--print);font-weight:500}

/* ---------- sectors ---------- */
.sector-list{border-top:1px solid var(--hair)}
.sector{display:grid;grid-template-columns:240px 1fr 200px;gap:10px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--hair)}
@media(max-width:860px){.sector{grid-template-columns:1fr}}
.sector .name{font-family:var(--disp);font-size:clamp(20px,2vw,26px);text-transform:uppercase;font-weight:600;line-height:1.05}
.sector .desc{color:var(--mid);font-size:15px;max-width:64ch}
.sector .uses{font-family:var(--mono);font-size:12.5px;color:var(--mid);letter-spacing:.04em;text-transform:uppercase}
@media(min-width:861px){.sector .uses{text-align:right}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.c-col{display:flex;flex-direction:column;gap:24px}
.c-block{display:flex;flex-direction:column;gap:4px;font-size:15px}
.c-block .k{font-family:var(--mono);font-size:12px;color:var(--mid);text-transform:uppercase;letter-spacing:.08em}
.c-block a:hover{color:var(--dirt-hi)}
.qform{display:flex;flex-direction:column;gap:12px}
.qform label{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--mid)}
.qform input,.qform textarea,.qform select{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:2px;
  color:var(--print);font-family:var(--body);font-size:16px;padding:12px 14px;width:100%;margin-top:5px;
}
.qform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mid) 50%),linear-gradient(135deg,var(--mid) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.qform input:focus,.qform textarea:focus,.qform select:focus{outline:none;border-color:var(--dirt-hi)}
.qform textarea{min-height:110px;resize:vertical}
.qform .btn{align-self:flex-start}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:34px 0 44px}
.foot{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:baseline}
.foot .tagline{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:20px;letter-spacing:.03em}
.foot .fine{font-family:var(--mono);font-size:12px;color:var(--mid)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--mid)}
.foot nav a:hover{color:var(--print)}

/* ---------- page hero (every page but the home page) ---------- */
.page-hero{padding:clamp(36px,6vh,72px) 0 clamp(36px,6vh,64px);position:relative;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0;z-index:0}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-hero .hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(15,18,21,.94) 0%,rgba(15,18,21,.8) 50%,rgba(15,18,21,.5) 100%),
  linear-gradient(0deg,var(--ink) 0%,rgba(15,18,21,.15) 40%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{font-size:clamp(38px,7vw,100px)}
.page-hero h1 .alt{color:var(--dirt-hi)}
.page-hero .lede{margin:22px 0 30px;color:var(--print)}
.page-hero .datastrip{margin-top:clamp(28px,5vh,44px)}

/* ---------- long copy ---------- */
.prose{max-width:66ch;font-size:16.5px}
.prose p{margin-bottom:1.1em;color:var(--print)}
.prose p.muted,.prose .muted{color:var(--mid)}
.prose h2{font-size:clamp(28px,3.2vw,42px);margin:1.6em 0 .55em}
.prose h3{font-size:clamp(22px,2.4vw,28px);margin:1.5em 0 .5em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--dirt-hi)}
.prose a{color:var(--print);border-bottom:1px solid var(--hair-2)}
.prose a:hover{border-bottom-color:var(--dirt-hi)}
.prose strong{font-weight:600}
.split-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 56px;align-items:start}
@media(max-width:900px){.split-2{grid-template-columns:1fr}}
.split-2 .side{position:sticky;top:84px}
@media(max-width:900px){.split-2 .side{position:static}}
.sec-head .aside a{color:var(--print)}

/* ---------- numbered steps ---------- */
.steps{list-style:none;counter-reset:step;border-top:1px solid var(--hair)}
.steps li{counter-increment:step;display:grid;grid-template-columns:64px 1fr;gap:6px 22px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:start}
.steps li::before{content:"0" counter(step);font-family:var(--disp);font-weight:700;font-size:38px;line-height:1;color:var(--dirt-hi);letter-spacing:.02em}
.steps h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:6px}
.steps p{color:var(--mid);font-size:15px;max-width:60ch}
@media(max-width:560px){.steps li{grid-template-columns:1fr;gap:4px}}

/* ---------- product cards on the home page ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:var(--ink);display:flex;flex-direction:column;position:relative}
.card .card-img{aspect-ratio:3/2;overflow:hidden;background:var(--ink-2);border-bottom:1px solid var(--hair)}
.card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){.card .card-img img{transition:none}.card:hover .card-img img{transform:none}}
.card-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-body h3{font-size:clamp(26px,2.6vw,34px)}
.card-body h3 a::after{content:"";position:absolute;inset:0}
.card-body p{color:var(--mid);font-size:15px}
.card-body .who{margin-top:0}
.card-body .ctas{margin-top:auto;padding-top:8px;position:relative;z-index:1}
.card-body .btn{padding:11px 16px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;font-family:var(--disp);font-size:clamp(20px,2.1vw,26px);text-transform:uppercase;font-weight:600;line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--dirt-hi);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--dirt-hi)}
.faq .a{padding:0 0 22px;color:var(--mid);max-width:66ch;font-size:15.5px}
.faq .a p+p{margin-top:.8em}
.faq .a a{color:var(--print);border-bottom:1px solid var(--hair-2)}

/* ---------- call-out band ---------- */
.band{border:1px solid var(--hair);background:var(--ink-2);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center}
@media(max-width:760px){.band{grid-template-columns:1fr}}
.band h2{font-size:clamp(30px,4vw,54px)}
.band p{color:var(--mid);margin-top:12px;max-width:56ch}
.band .ctas{flex-direction:column;align-items:stretch}
@media(max-width:760px){.band .ctas{flex-direction:row}}

/* ---------- a plain photo with a caption ---------- */
.figure{border:1px solid var(--hair);border-radius:2px;overflow:hidden;background:var(--ink-2)}
.figure img{width:100%;height:auto}
.figure figcaption{padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--mid);letter-spacing:.04em;border-top:1px solid var(--hair)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}

/* ---------- controls (the viewer page) ---------- */
.keys{border-top:1px solid var(--hair)}
.keys div{display:grid;grid-template-columns:200px 1fr;gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px}
@media(max-width:560px){.keys div{grid-template-columns:1fr;gap:2px}}
.keys .k{font-family:var(--mono);font-size:12.5px;color:var(--print);letter-spacing:.04em}
.keys .v{color:var(--mid)}
kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--hair-2);border-radius:3px;padding:1px 6px;color:var(--print);background:var(--ink-3)}

/* ---------- staging notice (only next.aerialok.com shows it) ---------- */
.staging{display:none;background:var(--dirt);color:var(--print);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px 12px}
body.is-staging .staging{display:block}

/* footer, two rows */
.foot{display:block}
.foot-top{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;align-items:baseline}
.foot-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.foot .fine a:hover{color:var(--print)}
.sector .name a:hover{color:var(--dirt-hi)}
a.c-block:hover span:last-child{color:var(--dirt-hi)}