/* IEMG Development — site.css
   Tokens first, then base, nav, components, sections, pages, responsive. */

:root{
  --bg:#FFFFFF; --bg-2:#F6F5F2;
  --ink:#141412; --ink-2:#5C5A55; --ink-3:#85827A;
  --line:rgba(20,20,18,.10); --line-2:rgba(20,20,18,.18);
  --gold:#B8963E; --gold-ink:#8A6F2E; --gold-tint:rgba(184,150,62,.12);
  --nav-bg:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(20,20,18,.04),0 12px 32px -16px rgba(20,20,18,.16);
  --sheen:.28;
  --font-display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --maxw:1180px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --nav-h:66px;
  --pad-x:24px;
  --sec-y:96px;
  --gutter:8px;
}
html[data-theme="dark"]{
  --bg:#0E0E0F; --bg-2:#161618;
  --ink:#F2F1EC; --ink-2:#A9A79F; --ink-3:#77756E;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --gold:#D9BC6A; --gold-ink:#E3C97A; --gold-tint:rgba(217,188,106,.14);
  --nav-bg:rgba(14,14,15,.74);
  --shadow:0 2px 8px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.6);
  --sheen:.55;
}

/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

/* display type: Jost caps */
h1,h2,h3,.feature-name,.card-name,.leader-name{
  font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.2;
}
h1{font-size:clamp(28px,4.2vw,44px);font-weight:400}
h2{font-size:clamp(22px,2.6vw,30px);font-weight:400}
h3,.feature-name,.leader-name{font-size:14px}
.card-name{font-size:13px}
p{margin:0;color:var(--ink-2)}
p + p{margin-top:20px}

img,svg{display:block}
img{max-width:100%}

a{color:inherit}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sec-y) var(--pad-x)}

/* grounds: sections alternate --bg and --bg-2; one dark band per page */
.bg-2{background:var(--bg-2)}
/* the dark band: --ink ground, --bg text. Tokens are swapped inside it so every component follows. */
.band-dark{
  --bg:#141412; --bg-2:#141412;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.74); --ink-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.3);
  --gold:#D9BC6A; --gold-ink:#D9BC6A; --sheen:.55;
  background:var(--bg);color:var(--ink);
}
html[data-theme="dark"] .band-dark{
  --bg:#F2F1EC; --bg-2:#F2F1EC;
  --ink:#0E0E0F; --ink-2:rgba(14,14,15,.74); --ink-3:rgba(14,14,15,.6);
  --line:rgba(14,14,15,.14); --line-2:rgba(14,14,15,.3);
  --gold:#8A6F2E; --gold-ink:#8A6F2E; --sheen:.28;
}

.eyebrow{
  font-family:var(--font-display);font-size:11.5px;font-weight:500;line-height:1.4;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold-ink);
  margin:0 0 16px;
}
.lead{font-size:20px;line-height:1.55;color:var(--ink)}
.meta{font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
p.meta + p.meta{margin-top:4px}
.caption{font-size:14px;font-weight:500;line-height:1.5;color:var(--ink-3);margin:12px 0 0}

.sec-head{margin-bottom:32px}
.sec-eyebrow{margin-bottom:24px}
.only-dark{display:none}
html[data-theme="dark"] .only-dark{display:block}
html[data-theme="dark"] .only-light{display:none}
.page-head .lead{margin-top:24px;max-width:62ch}
.anchor{scroll-margin-top:calc(var(--nav-h) + 24px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bg);color:var(--ink);
  padding:12px 20px;border:1px solid var(--line-2);
  font-size:14px;font-weight:600;
}
.skip:focus{left:16px;top:16px}

/* ---------- links and buttons ---------- */

.tlink{
  display:inline-block;
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:2px;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.tlink:hover{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;border-radius:0;
  font:500 13px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .25s var(--ease-out);
}
.btn:active{transform:translateY(1px);transition-duration:.06s}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-primary:hover{background:var(--bg);color:var(--ink)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- nav ---------- */

.site-header{position:sticky;top:0;z-index:60}
.nav{position:relative;z-index:2;background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .35s var(--ease-out)}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(20,20,18,.25)}
html[data-theme="dark"] .nav.scrolled{box-shadow:0 12px 30px -16px rgba(0,0,0,.65)}

.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  height:var(--nav-h);display:flex;align-items:center;gap:24px;
}

.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.wm-main{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);line-height:1;margin-right:-.22em}
.wm-rule{width:1px;height:20px;background:var(--line-2)}
.wm-sub{font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-2);line-height:1}

.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  position:relative;font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  padding:6px 0;white-space:nowrap;transition:color .25s var(--ease-out);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-actions{display:flex;align-items:center;gap:12px;margin-left:8px}
.nav-cta{flex:none}

.theme-toggle{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  color:var(--ink-2);cursor:pointer;padding:0;
  transition:color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.theme-toggle:hover{color:var(--ink);border-color:var(--line)}
.icon-sun{display:none}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}

.hamburger{
  display:none;width:44px;height:44px;padding:0;
  background:transparent;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.hamburger span{display:block;width:22px;height:1px;background:var(--ink);transition:transform .3s var(--ease-out),opacity .2s var(--ease-out)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:1;background:var(--bg);
  padding:calc(var(--nav-h) + 40px) var(--pad-x) 40px;
  display:flex;flex-direction:column;
}
.menu[hidden]{display:none}
.menu-links{display:flex;flex-direction:column;gap:12px}
.menu-links a{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;color:var(--ink);text-decoration:none}
.menu-links a[aria-current="page"]{color:var(--gold-ink)}
.menu .btn{margin-top:32px;align-self:flex-start}
.menu-foot{margin-top:auto;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- photography ---------- */

.ph{position:relative;overflow:hidden;background:var(--bg-2)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-16x9{aspect-ratio:16/9}
.ph-4x3{aspect-ratio:4/3}
.ph-3x2{aspect-ratio:3/2}
.ph-4x5{aspect-ratio:4/5}
.ph-inna img{object-position:50% 20%}
.ph-matt img{object-position:50% 15%}
.ph-pano{aspect-ratio:1320/425}
.ph-winding img{object-position:50% 4%}
.ph-trim img{transform:scale(1.03)} /* hero-poster.jpg has a thin dark border baked in */
.ph-link{display:block;color:inherit;text-decoration:none}
.ph-link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.ph-empty{display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--line);background:var(--bg-2);font-family:var(--font-display);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.stack{display:flex;flex-direction:column;gap:56px}
.proj-cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:16px}
.proj + .proj{margin-top:96px}
.proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:16px}
.proj-head h2,.svc-title h2{font-size:clamp(18px,2vw,22px)}
.proj-head .meta{white-space:nowrap}
.proj-desc{font-size:16px;max-width:68ch;margin:0 0 32px}
.mosaic{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:var(--gutter)}
.mosaic-hero{grid-row:span 2;aspect-ratio:auto;height:100%}
.proj-row{margin-top:var(--gutter)}

figure{margin:0}

/* full-bleed breathers: edge to edge, no text; the photo pans with the scroll where the browser supports it */
.breather{height:70vh;overflow:hidden;background:var(--bg-2)}
.breather--short{height:56vh}
.breather img{width:100%;height:100%;object-fit:cover}
@keyframes breather-pan{from{object-position:50% 30%}to{object-position:50% 70%}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .breather img{animation:breather-pan linear both;animation-timeline:view()}
  }
}

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(18px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  html.js [data-reveal].is-in{opacity:1;transform:none}
}

/* ---------- hero: the film fills the first screen and fades into a solid band that carries the headline ---------- */

.hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--nav-h));background:#0E0E0F}
.hero-img{position:relative;flex:1 1 auto;min-height:240px;overflow:hidden;background:#0E0E0F}
.hero-img img,.hero-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.hero-video{opacity:0;transition:opacity .6s var(--ease-out)}
.hero-img.is-playing .hero-video{opacity:1}
.hero-img.is-playing .hero-poster{opacity:0;transition:opacity .6s var(--ease-out) .2s}
@media (prefers-reduced-motion: reduce){.hero-video{display:none}}

/* the band is #0E0E0F in both themes, so it carries the dark-theme tokens */
.hero-band{
  --bg:#0E0E0F; --ink:#F2F1EC; --gold:#D9BC6A; --sheen:.55;
  position:relative;flex:none;display:flex;align-items:center;
  min-height:max(96px,11svh);background:#0E0E0F;
}
.hero-band::before{
  content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);pointer-events:none;
  height:calc((100svh - var(--nav-h)) * .12);
  background:linear-gradient(to bottom,rgba(14,14,15,0),#0E0E0F);
}
/* one row: headline left, button right */
.hero-band .wrap{
  width:100%;padding-top:16px;padding-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:20px 40px;
}
.hero-band h1{font-size:min(2.15vw,32px);font-weight:300;letter-spacing:.22em;line-height:1.3;color:#ECE8E1;white-space:nowrap;text-align:center;width:100%;margin:0}
/* the headline is always one centred line: the size follows the viewport so it never wraps, and the tracking tightens on phones to keep it as large as one line allows */
@media (max-width:900px){.hero-band h1{font-size:2.7vw;letter-spacing:.12em}}

/* ---------- home ---------- */

.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.col-1-7{grid-column:1 / span 7}
.col-8-12{grid-column:8 / span 5}

.statement{font-size:20px;line-height:1.55;color:var(--ink);max-width:60ch;margin:0}
.statement + .leaders-2,.statement + div{margin-top:56px}

/* in construction: full-width frames stacked */
.ph-wide{aspect-ratio:2.4}
.build + .build{margin-top:48px}

/* interior breather: the picture pins while the process section rides up over it */
.reveal{position:relative;height:150svh;overflow-x:clip} /* clip, not hidden: hidden would turn the section into a scroll container and break the sticky image */
.reveal::after{content:"";position:absolute;inset:0;background:#EFE8E3;opacity:.08;pointer-events:none}
.reveal img{position:sticky;top:0;width:100%;height:100svh;object-fit:cover;display:block}
.grade{filter:saturate(.55) sepia(.14)}
.rise{position:relative;z-index:1;background:var(--bg);margin-top:-28svh}
.rise--bg-2{background:var(--bg-2)}
.graded img{filter:saturate(.8) sepia(.06)}
.graded::after{content:"";position:absolute;inset:0;background:#EFE8E3;opacity:.04;pointer-events:none}

/* where we build: a plain two-column list */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin:0;padding:0;list-style:none}
.places p{margin-top:8px;font-size:16px}

/* ---------- captions ---------- */

.feature-cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:16px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px var(--gutter)}
.cards-2 figcaption{padding-right:24px}
.card-name{margin:16px 0 0}
.card-name + .meta{margin-top:8px}
.cap-meta{text-align:right}

/* ---------- leadership ---------- */

.leaders-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.leader-name{margin:20px 0 6px}
.leader-role{font-size:14px;font-weight:500;color:var(--ink-3);margin:0 0 14px}

.profile{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start;scroll-margin-top:calc(var(--nav-h) + 24px)}
.profile + .profile{margin-top:72px}

/* ---------- columns, steps ---------- */

.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.cols-2 p,.cols-3 p{margin-top:12px;font-size:16px}
.sec-intro{max-width:64ch}
.sec-intro + .cols-2{margin-top:48px}

.engage{display:flex;flex-direction:column;align-items:flex-start}
.engage p{margin:12px 0 20px}
.engage .tlink{margin-top:auto}

.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.step-num{font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.18em;color:var(--gold-ink);margin:0 0 14px}
.step h3{font-size:13px;margin:0 0 10px}
.step p:last-child{font-size:15px}

.plist{list-style:none;margin:48px 0 0;padding:0}
.plist li{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:baseline;padding:24px 0}
.plist .step-num{margin:0}
.plist p:last-child{font-size:16px}

/* ---------- services rows ---------- */

.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.svc + .svc{margin-top:96px}
.svc-title{grid-column:1 / span 4}
.svc-who{margin-top:12px;max-width:34ch;font-size:15px;color:var(--ink-3)}
.svc-body{grid-column:5 / span 4}
.svc-body p{font-size:16px}
.svc-fig{grid-column:9 / span 4}

/* ---------- contact band, contact page ---------- */

.band h2{max-width:760px}
.band-text{margin-top:24px;max-width:56ch}
.band-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:24px}
.band .btn-row{margin-top:32px}

.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.info-block + .info-block{margin-top:32px}
.contact-grid h3 + .info-block{margin-top:24px}
.info-label{font-family:var(--font-display);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin:0 0 8px}
.info-value{font-size:17px;color:var(--ink);margin:0}
.info-value a{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.info-value a:hover{color:var(--gold-ink)}

.land h2{max-width:760px}
.land-text{margin-top:24px;max-width:64ch}
.land .tlink{margin-top:28px}

/* sell and contact forms */
.form-intro{margin-bottom:28px}
.sell-form{max-width:680px}
.sell-direct{margin-top:56px}
.info-row{display:flex;flex-wrap:wrap;gap:24px 56px;margin-top:24px}
.info-row .info-block + .info-block{margin-top:0}

/* ---------- footer ---------- */

.footer .wrap{padding-bottom:40px}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:start}
.footer-logo img{height:120px;width:auto}
.footer-nav{display:flex;flex-direction:column;gap:12px}
.footer-nav a{font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .25s var(--ease-out)}
.footer-nav a:hover{color:var(--ink)}
.footer-contact{font-size:15px;color:var(--ink-2);margin:0;line-height:1.9;text-align:right}
.footer-contact a{text-decoration:none}
.footer-contact a:hover{color:var(--ink)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  .nav-links{gap:18px}
  .nav-links a{letter-spacing:.1em}
  .nav-inner{gap:14px}
  .nav-cta{padding:0 18px}
}

/* the caps nav needs about 940px; below that it folds into the menu */
@media (max-width:960px){
  .nav-links,.nav-actions .theme-toggle,.nav-cta{display:none}
  .hamburger{display:flex}
  .nav-actions{margin-left:0}
}

@media (max-width:900px){
  :root{--sec-y:64px}

  body{font-size:16px}
  .lead{font-size:18px}
  .statement{font-size:18px}

  .hero-band{min-height:0}
  .hero-band .wrap{padding-top:20px;padding-bottom:28px}

  .col-1-7,.col-8-12{grid-column:1 / -1}
  .col-8-12{margin-top:32px}

  .feature-cap{flex-direction:column;gap:6px}

  .cards-3{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
  }
  .cards-3::-webkit-scrollbar{display:none}
  .cards-3 > *{flex:0 0 84vw;scroll-snap-align:start}

  .cards-2{grid-template-columns:1fr;gap:40px}
  .cards-2 figcaption{padding-right:0}
  .leaders-2{grid-template-columns:1fr;gap:40px}
  .profile{grid-template-columns:1fr;gap:24px}
  .profile + .profile{margin-top:56px}
  .cols-3{grid-template-columns:1fr;gap:32px}
  .places{grid-template-columns:1fr;gap:24px}
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic-hero{grid-column:1 / -1;grid-row:auto;aspect-ratio:3/4;height:auto}
  .proj-cap,.proj-head{flex-direction:column;align-items:flex-start;gap:6px}
  .proj + .proj{margin-top:64px}
  .stack{gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:48px}

  .steps,.steps--3{grid-template-columns:1fr;gap:28px}
  .plist li{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .svc-title,.svc-body,.svc-fig{grid-column:1 / -1}
  .svc + .svc{margin-top:64px}
  .cols-2{grid-template-columns:1fr;gap:32px}
  .cap-meta{text-align:left}
  .statement + .leaders-2,.statement + div{margin-top:40px}

  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-contact{text-align:left}
  .footer-bottom{margin-top:40px}
}

@media (max-width:480px){
  :root{--pad-x:16px}
}

/* lighter grade for the aerial reveal; the living room keeps the full grade */
.grade--light{filter:saturate(.78) sepia(.08)}
.reveal--light::after{opacity:.04}
/* closing section: one airy block instead of two stacked bands */
.close .wrap{padding-top:136px;padding-bottom:136px}
.close-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.close-row + .close-row{margin-top:104px;padding-top:104px;border-top:1px solid var(--line)}
.close-text h2{max-width:22ch;margin:0}
.close-text .eyebrow{margin-bottom:20px}
.close .band-links{margin-top:28px}
.close .btn{flex:none}
@media (max-width:900px){
  .close .wrap{padding-top:88px;padding-bottom:88px}
  .close-row{flex-direction:column;align-items:flex-start;gap:28px}
  .close-row + .close-row{margin-top:72px;padding-top:72px}
}

/* Home: the hero runs up under the sticky header, which stays clear over the film (html.nav-over-hero, set by site.js)
   and takes the glass back once the hero has scrolled away. An open menu (body.is-locked) always gets the normal header. */
body[data-nav="over-hero"] .hero{margin-top:calc(-1 * (var(--nav-h) + 1px));min-height:100svh}
/* faint scrim under the clear header so the light ink holds on bright frames of the film */
body[data-nav="over-hero"] .hero-img::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--nav-h) * 2.4);background:linear-gradient(rgba(14,14,15,.42),rgba(14,14,15,0));pointer-events:none}
body[data-nav="over-hero"] .nav{transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,-webkit-backdrop-filter .24s ease,backdrop-filter .24s ease}
body[data-nav="over-hero"] :is(.wm-main,.wm-sub,.nav-links a,.theme-toggle){transition:color .24s ease,border-color .24s ease}
body[data-nav="over-hero"] :is(.wm-rule,.hamburger span){transition:background-color .24s ease,transform .3s var(--ease-out),opacity .2s var(--ease-out)}
body[data-nav="over-hero"] .nav-cta{transition:background-color .24s ease,color .24s ease,border-color .24s ease}
html.nav-over-hero body:not(.is-locked) .site-header{--ink:#F2F1EC;--ink-2:#F2F1EC;--line:rgba(242,241,236,.3);--line-2:rgba(242,241,236,.5)}
html.nav-over-hero body:not(.is-locked) .nav{background-color:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.nav-over-hero body:not(.is-locked) .nav-cta{background:transparent;color:#F2F1EC;border-color:#F2F1EC}
html.nav-over-hero body:not(.is-locked) .nav-cta:hover{background:#F2F1EC;color:#0E0E0F}

/* Projects grid: a caps filter row over square-cornered 4:3 tiles */
.pfilter{display:flex;flex-wrap:wrap;gap:8px 32px;margin:56px 0 24px}
.pfilter button{
  position:relative;padding:6px 0;background:none;border:0;cursor:pointer;
  font:500 12.5px/1.4 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  transition:color .25s var(--ease-out);
}
.pfilter button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.pfilter button:hover,.pfilter button[aria-pressed="true"]{color:var(--ink)}
.pfilter button[aria-pressed="true"]::after{transform:scaleX(1)}
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gutter);margin:0;padding:0;list-style:none}
.ptag{position:absolute;top:12px;left:12px;z-index:1;padding:6px 8px;background:rgba(14,14,15,.85);color:#F2F1EC;font:500 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:900px){.ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ptiles{grid-template-columns:1fr}}