/* Huffman Corporation site styles
   Layout: white pages, Huffman blue media panels (drone video, with a self drafting blueprint until footage arrives).
   Home moves one full screen page at a time; inner pages follow Maman: media band, big title, quiet sections. */
:root{
  --white:#FFFFFF;
  --paper:#F5F8FC;   /* faint blue white for alternating sections */
  --ink:#0B1B33;
  --steel:#52627A;
  --rule:#DCE4EE;
  --blue:#0663C9;    /* HC logo blue */
  --blue-deep:#03489A;
  --sky:#E8F1FC;
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --max:1280px; --gut:clamp(16px,4.5vw,64px); --hdr:88px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.022em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.eb{color:var(--blue)}
.lede{font-size:1.22rem;color:var(--steel);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:.8em;font:600 1.02rem var(--body);padding:1.05em 1.7em;background:var(--blue);color:#fff;border:1.5px solid var(--blue);text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff}
.btn.onblue{background:#fff;color:var(--blue);border-color:#fff}
.btn.onblue:hover{background:transparent;color:#fff}
.more{display:inline-flex;align-items:center;gap:16px;font-weight:600;text-decoration:none;color:var(--blue)}
.more i{display:block;width:46px;height:1.5px;background:currentColor;position:relative;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.more i::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.more:hover i{width:78px}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .35s,box-shadow .35s,color .35s;color:var(--ink)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:var(--hdr)}
.hdr .logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.hdr .logo img{height:46px;width:auto;display:block}
.hdr .logo span{font:600 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;line-height:1.35;opacity:.85}
.hdr .logo .w{display:none}
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:28px}
.hdr .right a{font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.hdr .right a:hover{color:var(--blue)}
.burger{display:flex;align-items:center;gap:12px;background:none;border:0;color:inherit;font:600 1rem var(--body);cursor:pointer;padding:8px 0}
.burger span{display:grid;gap:6px}
.burger span i{display:block;width:30px;height:2px;background:currentColor;transition:transform .35s}
.burger:hover span i:last-child{transform:translateX(-9px)}
.hdr[data-tone="dark"]{color:#fff}
.hdr[data-tone="dark"] .logo .b{display:none}
.hdr[data-tone="dark"] .logo .w{display:block}
.hdr[data-tone="dark"] .right a:hover{color:#CFE2FA}
.hdr.solid{background:#fff;box-shadow:0 1px 0 var(--rule);color:var(--ink)}
.hdr.solid .logo .b{display:block}.hdr.solid .logo .w{display:none}
@media (max-width:800px){:root{--hdr:74px}.hdr .right a{display:none}.hdr .logo span{display:none}.hdr .logo img{height:40px}}

/* ---------- full screen menu (blue) ---------- */
.menu{position:fixed;inset:0;z-index:60;background:var(--blue);color:#fff;overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility .75s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu .top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);padding-top:env(safe-area-inset-top,0px)}
.menu .top img{height:46px;width:auto}
.menu .close{background:none;border:0;color:#fff;font:600 1rem var(--body);display:flex;align-items:center;gap:12px;cursor:pointer}
.menu .close i{width:26px;height:26px;position:relative;display:block}
.menu .close i::before,.menu .close i::after{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:#fff;transform:rotate(45deg)}
.menu .close i::after{transform:rotate(-45deg)}
.menu-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;padding-block:28px 64px}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m;display:grid;gap:2px}
.menu ol>li{counter-increment:m}
.menu .big{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,5vw,3.8rem);letter-spacing:-.025em;line-height:1.12;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.menu .big::before{content:"0" counter(m);font:500 .78rem var(--mono);letter-spacing:.14em;opacity:.7;min-width:2.6em}
.menu ol:hover .big{opacity:.55}
.menu ol .big:hover{opacity:1;transform:translateX(12px)}
.menu .subs{display:flex;flex-wrap:wrap;gap:4px 20px;padding:4px 0 14px 4.6em}
.menu .subs a{text-decoration:none;opacity:.78;font-size:.98rem}
.menu .subs a:hover{opacity:1;text-decoration:underline}
.menu aside{border-left:1px solid rgba(255,255,255,.25);padding-left:44px;display:grid;gap:28px;align-content:start;min-width:0}
.menu aside dt{opacity:.75}
.menu aside dd{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:1.55rem;overflow-wrap:anywhere;user-select:all}
.menu aside p{opacity:.85;font-size:.98rem}
@media (max-width:860px){.menu-grid{grid-template-columns:1fr}.menu aside{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.25);padding-top:28px}.menu .subs{padding-left:0}}

/* ---------- media panels: drone video, poster, or drafting blueprint ---------- */
.media{position:relative;overflow:hidden;background-color:var(--blue);background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;max-width:100%}
.media canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.media .poster,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media video{opacity:0;transition:opacity .8s}
.media.has-video video{opacity:1}
.media.has-video canvas,.media.has-video .tag{display:none}
.media.has-poster canvas{display:none}
.media .tag{position:absolute;left:18px;bottom:16px;right:18px;font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);display:flex;gap:10px;align-items:center}
.media .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.media.has-poster .tag{text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* photo slots on white */
.slot{position:relative;background:var(--sky);background-image:linear-gradient(rgba(6,99,201,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(6,99,201,.08) 1px,transparent 1px);background-size:24px 24px;overflow:hidden;max-width:100%}
.slot>span{position:absolute;left:14px;right:14px;bottom:12px;font:500 .68rem var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.slot>img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- inner page hero (Maman: media band, then the title on white) ---------- */
.phero{height:clamp(380px,66vh,680px);position:relative}
.phero .media{position:absolute;inset:0}
.phero .crumb{position:absolute;left:0;right:0;bottom:28px;color:#fff;z-index:2}
.ptitle{padding-block:clamp(56px,8vw,110px) clamp(40px,6vw,80px)}
.ptitle .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:end}
.ptitle h1{font-size:clamp(2.8rem,6.6vw,6rem)}
.ptitle h1 small{display:block;font-size:.34em;font-weight:500;letter-spacing:0;color:var(--blue);margin-bottom:14px}
.ptitle .side{display:grid;gap:20px;min-width:0}
@media (max-width:860px){.ptitle .wrap{grid-template-columns:1fr}}

section.s{padding-block:clamp(64px,9vw,128px)}
section.alt{background:var(--paper)}
.head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px);max-width:820px}
.head h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.split>div{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose{display:grid;gap:20px;max-width:66ch}
.prose p{font-size:1.1rem}
.prose p.first{font-size:1.32rem;color:var(--ink);line-height:1.5}

/* blue band */
.band{background:var(--blue);color:#fff}
.band .eb{color:#CFE2FA}
.band .lede{color:#DCE9FA}
.cta{padding-block:clamp(90px,13vw,170px)}
.cta .wrap{display:grid;gap:30px}
.cta h2{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:15ch}
.cta h2 a{text-decoration:none;border-bottom:3px solid #fff}
.cta h2 a:hover{opacity:.8}
.cta .row{display:flex;gap:44px;flex-wrap:wrap;font-size:1.1rem}
.cta .row b{display:block;font-family:var(--display);font-size:1.6rem;user-select:all}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.stats div{padding:26px 22px 8px 0;display:grid;gap:6px}
.stats div+div{padding-left:22px;border-left:1px solid var(--rule)}
.stats b{font-family:var(--display);font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.stats span{color:var(--steel)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0;padding-left:0}}

/* lists of things */
.rows{border-top:1px solid var(--ink)}
.rows>div{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:start}
.rows h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.rows p{color:var(--steel)}
.rows .n{font:500 .8rem var(--mono);letter-spacing:.14em;color:var(--blue);padding-top:.5em}
@media (max-width:760px){.rows>div{grid-template-columns:1fr;gap:8px}}

/* people */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.person{display:grid;gap:8px;min-width:0}
.person .slot{aspect-ratio:4/5;margin-bottom:10px}
.person b{font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em}
.person span{color:var(--steel);font-size:.95rem}
.person.lead .slot{aspect-ratio:4/5}
@media (max-width:900px){.people{grid-template-columns:1fr 1fr}}

/* projects */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{font:600 .95rem var(--body);padding:.62em 1.15em;border:1.5px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer}
.filters button:hover{border-color:var(--blue)}
.filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.plhead,.prow{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:20px;align-items:center}
.plhead{padding:12px 0;color:var(--steel);border-bottom:1.5px solid var(--ink)}
.prow{padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:padding .4s cubic-bezier(.2,.7,.2,1),background .3s}
.prow:hover{padding-left:18px;background:var(--sky)}
.prow h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.015em}
.prow span{color:var(--steel);font-size:.95rem}
.prow .go{justify-self:end;width:34px;height:34px;border:1.5px solid var(--rule);display:grid;place-items:center;transition:background .3s,border-color .3s}
.prow .go::before{content:"";width:8px;height:8px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);margin-left:-3px}
.prow:hover .go{background:var(--blue);border-color:var(--blue)}
.prow:hover .go::before{border-color:#fff}
@media (max-width:760px){.plhead span:not(:first-child){display:none}.plhead,.prow{grid-template-columns:1fr 34px}.prow span{display:none}.prow span.loc{display:block}}
.peek{position:fixed;z-index:35;width:320px;height:210px;pointer-events:none;opacity:0;transform:translate(26px,-50%) scale(.9);transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:0 26px 50px rgba(11,27,51,.28)}
.peek.on{opacity:1;transform:translate(26px,-50%) scale(1)}
@media (hover:none){.peek{display:none}}
.featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.fcard{display:grid;gap:14px;text-decoration:none;min-width:0}
.fcard .media{aspect-ratio:4/3.3}
.fcard h3{font-size:1.5rem}
.fcard span{color:var(--steel);font-size:.95rem}
.fcard:hover h3{color:var(--blue)}
.fcard .media{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .media{transform:scale(.985)}
@media (max-width:860px){.featured{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule);margin:0}
.facts div{padding:22px 20px 22px 0;display:grid;gap:6px}
.facts div+div{padding-left:20px;border-left:1px solid var(--rule)}
.facts dt{color:var(--steel)}
.facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.25rem}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--rule)}}
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.gal .slot{aspect-ratio:4/3;grid-column:span 2}
.gal .slot.big{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal .slot,.gal .slot.big{grid-column:span 1;grid-row:auto;aspect-ratio:4/3}.gal .slot.big{grid-column:span 2}}
.next{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:36px}
.next a{text-decoration:none;display:grid;gap:6px}
.next b{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.02em}
.next a:hover b{color:var(--blue)}
.vid{display:inline-flex;align-items:center;gap:18px;text-decoration:none;font-weight:600}
.vid i{width:60px;height:60px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none}
.vid i::before{content:"";border-left:17px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.vid small{display:block;color:var(--steel);font-weight:400}

/* sectors (services) */
.sectors{display:grid;gap:clamp(56px,8vw,110px)}
.sector{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.sector:nth-child(even) .media{order:2}
.sector .media{aspect-ratio:16/11}
.sector>div{display:grid;gap:14px;min-width:0}
.sector h3{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.sector p{color:var(--steel)}
.sector ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.sector li a{text-decoration:none;display:flex;gap:12px;align-items:center}
.sector li a::before{content:"";width:12px;height:2px;background:var(--blue)}
.sector li a:hover{color:var(--blue)}
@media (max-width:860px){.sector{grid-template-columns:1fr}.sector:nth-child(even) .media{order:0}}

/* process steps */
.step{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,4vw,64px);padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--rule);align-items:start}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{font-family:var(--display);font-size:clamp(3.4rem,7vw,5.6rem);font-weight:700;line-height:.85;letter-spacing:-.04em;color:var(--blue)}
.step>div{display:grid;gap:12px;min-width:0}
.step h3{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.step p{color:var(--steel)}
.step .media{aspect-ratio:16/10}
@media (max-width:860px){.step{grid-template-columns:1fr}}

/* quote */
.quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.22;letter-spacing:-.02em;color:var(--steel)}

/* forms */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,6vw,96px)}
.cinfo{display:grid;gap:30px;align-content:start;margin:0}
.cinfo dt{color:var(--steel)}
.cinfo dd{margin:8px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.015em;overflow-wrap:anywhere}
.cinfo dd.sel{user-select:all}
.cinfo dd small{display:block;font:400 1rem var(--body);color:var(--steel);letter-spacing:0;margin-top:4px}
form.quote-form{display:grid;gap:22px;background:var(--paper);padding:clamp(22px,3.6vw,44px)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:8px;font-weight:600;font-size:.98rem}
input,select,textarea{font:400 1.06rem var(--body);padding:.85em .9em;border:1.5px solid var(--rule);background:#fff;color:var(--ink);width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--sky)}
textarea{min-height:140px;resize:vertical}
.notice{border-left:3px solid var(--blue);background:#fff;padding:16px 18px}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}

/* footer (blue) */
.foot{background:var(--blue);color:#fff;padding-block:72px 36px;font-size:.98rem}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot .brand{display:grid;gap:18px;align-content:start}
.foot .brand img{width:76px;height:auto}
.foot .brand p{font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.015em;line-height:1.2;max-width:16ch}
.foot h4{font:500 .74rem var(--mono);letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px;opacity:.75}
.foot a{display:block;text-decoration:none;padding:3px 0}
.foot a:hover{text-decoration:underline}
.foot .fine{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.28);padding-top:22px;font-size:.86rem;opacity:.85}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .brand{grid-column:1/-1}}

/* reveal on scroll (inner pages) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.24,1)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}

/* ===== v4: Metic influence. Clean white start, tape measure rulers, inline menu, call button ===== */
@media (min-width:1000px){:root{--gut:clamp(84px,6.5vw,104px)}}
.hdr .nav{display:flex;gap:4px;margin-left:auto}
.hdr .nav a{font-weight:600;font-size:.98rem;text-decoration:none;padding:.5em .75em;position:relative}
.hdr .nav a::after{content:"";position:absolute;left:.75em;right:.75em;bottom:.25em;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hdr .nav a:hover::after,.hdr .nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .right{margin-left:18px}
.hdr .call{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff!important;padding:.75em 1.1em;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr .call:hover{background:var(--blue-deep)}
.hdr .call svg{width:16px;height:16px;flex:none}
.hdr[data-tone="dark"] .call{background:#fff;color:var(--blue)!important}
.hdr .burger{display:none}
@media (max-width:1180px){.hdr .nav{display:none}.hdr .burger{display:flex}.hdr .right{margin-left:auto}}
@media (max-width:800px){.hdr .right a.call{display:inline-flex}.hdr .call .long{display:none}}
@media (min-width:801px){.hdr .call .short{display:none}}

/* rulers */
.ruler{position:fixed;top:0;bottom:0;width:44px;z-index:38;pointer-events:none;background:#fff}
.ruler.l{left:0;border-right:1px solid var(--rule)}
.ruler.r{right:0;border-left:1px solid var(--rule)}
.ruler canvas{width:100%;height:100%;display:block}
@media (max-width:999px){.ruler{display:none}}
@media (min-width:1000px){.hdr,.menu{padding-inline:44px}.foot,.band,.closing{margin-inline:0}}

/* video grade for raw, flat drone footage */
.media video.graded{filter:saturate(1.38) contrast(1.14) brightness(1.04)}

/* inner pages now start on clean white, media band follows the title */
.ptitle{padding-top:calc(var(--hdr) + clamp(48px,7vw,96px))}
.phero{height:clamp(320px,62vh,640px);margin-inline:var(--gut);margin-bottom:clamp(48px,7vw,96px)}
.phero .media{transition:clip-path 1.3s cubic-bezier(.75,0,.2,1)}
.js .phero:not(.in) .media{clip-path:inset(49.5% 0 49.5% 0)}

/* ===== v5 ===== */
.ruler{z-index:45}
.foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
.foot .sign{grid-column:1/-1;display:grid;gap:10px;justify-items:start;border-top:1px solid rgba(255,255,255,.28);padding-top:clamp(40px,6vw,72px);margin-top:12px}
.foot .sign img{width:min(640px,100%);height:auto;display:block;margin-bottom:14px}
.foot .motto{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.025em;line-height:1}
.foot .since{font:500 .8rem var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}}

/* ===== v6: loader, header wordmark, compact footer, story video ===== */
html.loading body::before{content:"";position:fixed;inset:0;background:#fff;z-index:99}
html.loading main *,html.loading .hero *{animation-play-state:paused!important}
.loader{position:fixed;inset:0;z-index:100;background:#fff;display:grid;grid-template-rows:1fr auto;clip-path:inset(0);transition:clip-path .9s cubic-bezier(.75,0,.2,1)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader.enter{clip-path:inset(100% 0 0 0)}
.loader.enter,.loader:not(.out){transition-duration:.62s}
.ld-c{display:grid;place-content:center;justify-items:center;gap:20px;padding-inline:24px}
.ld-brand{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.ld-mark{height:clamp(48px,6vw,76px);width:auto}
.ld-wm{height:clamp(42px,5.4vw,66px);width:auto}
.ld-motto{font-family:var(--display);font-weight:600;font-size:clamp(.9rem,1.25vw,1.05rem);text-transform:uppercase;color:var(--blue);letter-spacing:.22em;white-space:nowrap;animation:ldin 1.1s cubic-bezier(.16,.84,.24,1) .25s both}
@keyframes ldin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ld-line{display:block;width:min(240px,62vw);height:34px;margin-top:6px}
.ld-bot{display:flex;justify-content:center;padding:0 24px clamp(20px,4vh,40px)}
.ld-n{font:500 .95rem var(--mono);letter-spacing:.24em;color:var(--blue);font-variant-numeric:tabular-nums}
@media (max-width:600px){.ld-brand{flex-direction:column}.ld-motto{font-size:.8rem}}

.hdr .logo .wm{height:26px;width:auto}
.hdr .logo img:not(.wm){height:42px}
@media (max-width:800px){.hdr .logo .wm{height:19px}.hdr .logo img:not(.wm){height:34px}}

.foot .wrap{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));align-items:start}
.foot .sign{grid-column:auto;border-top:0;padding-top:0;margin-top:0;gap:8px}
.foot .sign img{width:min(280px,100%);margin-bottom:10px}
.foot .motto{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.01em}
.foot .since{font-size:.7rem}
@media (max-width:900px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .sign{grid-column:1/-1}}

.embed{position:relative;aspect-ratio:16/9;background:var(--ink);max-width:100%}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.is-story .prose{max-width:none}

.phero{margin-inline:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}

/* blue pages turn the header and rulers blue */
.ruler{transition:background .45s ease,border-color .45s ease}
body[data-tone="blue"] .ruler{background:var(--blue);border-color:rgba(255,255,255,.22)}
body[data-tone="blue"] .hdr.solid{background:var(--blue);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18)}
body[data-tone="blue"] .hdr.solid .logo .b{display:none}
body[data-tone="blue"] .hdr.solid .logo .w{display:block}
body[data-tone="blue"] .hdr .call{background:#fff;color:var(--blue)!important}
body[data-tone="blue"] .hdr .nav a:hover{color:#CFE2FA}

/* header name set in type */
.hdr .logo .wmtext{display:block;font-family:"Playfair Display SC",Georgia,"Times New Roman",serif;font-weight:900;font-size:21px;line-height:.9;letter-spacing:.005em;color:var(--blue);text-transform:none;opacity:1}
.hdr[data-tone="dark"] .logo .wmtext,body[data-tone="blue"] .hdr.solid .logo .wmtext{color:#fff}
@media (max-width:800px){.hdr .logo .wmtext{font-size:16px;display:block}}

/* ===== v7: project boxes, groups we've built for, job listings, inquiry ===== */
.bigstat{justify-self:end;align-self:start;text-align:right;display:grid;gap:4px}
.bigstat b{font-family:var(--display);font-size:clamp(3.4rem,7vw,6.4rem);font-weight:700;line-height:.85;letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.bigstat span{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
@media (max-width:860px){.bigstat{justify-self:start;text-align:left}}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px)}
.pbox{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--rule);text-decoration:none;color:var(--ink);min-width:0;transition:border-color .3s,box-shadow .4s,transform .4s cubic-bezier(.2,.7,.2,1)}
.pbox-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0756AE}
.pbox-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pbox-tag{position:absolute;top:12px;left:12px;background:var(--blue);color:#fff;padding:.4em .65em;font-size:.62rem;letter-spacing:.14em}
.pbox-txt{display:grid;align-content:start;gap:6px;padding:16px 18px 20px}
.pbox-txt h3{font-size:1.18rem;line-height:1.2}
.pbox-txt span{color:var(--steel);font-size:.9rem}
.pbox-txt .loc{font-size:.84rem}
.pbox-txt .more{margin-top:8px;color:var(--blue);font-size:.95rem}
.pbox.story{border-color:var(--blue)}
.pbox.story:hover{box-shadow:0 24px 50px rgba(3,22,52,.14);transform:translateY(-3px)}
.pbox.story:hover .pbox-img img{transform:scale(1.04)}
.gwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gbox{background:#fff;display:grid;place-items:center;aspect-ratio:16/9;padding:18px 22px}
.gbox img{max-width:100%;max-height:52px;width:auto;height:auto;filter:grayscale(1) brightness(0);opacity:.62;transition:opacity .3s}
.gbox:hover img{opacity:.95}
.joblist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.joblist li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:center;padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid var(--rule)}
.joblist h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.joblist p{color:var(--steel);margin-top:6px;max-width:48ch}
.joblist .meta{display:grid;gap:4px;font-size:.92rem;color:var(--steel)}
.joblist .meta .mono{color:var(--blue)}
.joblist .act{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn.line{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn.line:hover{background:var(--blue);color:#fff}
@media (max-width:860px){.joblist li{grid-template-columns:1fr}.joblist .act{justify-content:flex-start}}

/* story video: Watch on YouTube with a skip-to note on the right */
.vidrow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.skip{display:flex;align-items:center;gap:14px;max-width:360px;text-align:left;background:#EAF2FC;border:1.5px solid #B9D3F3;padding:12px 16px;cursor:pointer;font:inherit;color:var(--ink);transition:background .3s,border-color .3s}
.skip b{flex:none;font-family:var(--display);font-size:1.1rem;color:#fff;background:var(--blue);padding:.35em .6em;font-variant-numeric:tabular-nums}
.skip span{font-size:.92rem;line-height:1.4;color:var(--steel)}
.skip:hover{background:#DCEAFB;border-color:var(--blue)}
@media (max-width:700px){.vidrow{flex-direction:column;align-items:flex-start}}

/* story pages: compact title, the video first */
.is-story .ptitle{padding-bottom:clamp(22px,3vw,36px)}
.is-story .ptitle .wrap{grid-template-columns:1fr}
.is-story .ptitle .side{display:none}
.is-story .ptitle h1{font-size:clamp(2.2rem,4.6vw,4.2rem)}
.pvideo .wrap{display:grid;gap:22px}
.pvideo .embed{box-shadow:0 40px 90px rgba(3,22,52,.22)}
.is-story .prose .first{font-family:var(--display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.25;letter-spacing:-.02em;color:var(--blue);font-weight:600}