/* ═══════════════════════════════════════════
   Susie Jo — campaign site
   ═══════════════════════════════════════════ */

:root{
  --ink:#0b0d10;
  --ink-2:#1b2026;
  --grey:#5c646e;
  --grey-2:#8a929c;
  --line:#e3e7ec;
  --paper:#ffffff;
  --paper-2:#f4f6f9;
  --blue-d:#1a4e83;
  --blue:#4c86bd;
  --blue-l:#9fc7e8;
  --blue-p:#d7e7f5;

  --maxw:1240px;
  --pad:clamp(20px, 5vw, 64px);
  --sec-y:clamp(72px, 11vw, 148px);

  --disp:'Anton', 'Arial Narrow', Impact, sans-serif;
  --geo:'Poppins', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden}

img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
mark{background:var(--blue-p); color:inherit; padding:0 .18em}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:#fff; padding:12px 18px}
.skip:focus{left:8px; top:8px}

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

/* ─── type helpers ─── */
.eyebrow{
  font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
  margin-bottom:clamp(18px,2.4vw,28px);
}
.eyebrow.light{color:var(--blue-l)}
.eyebrow.center{text-align:center; margin-top:clamp(56px,8vw,96px)}

.display{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.1rem, 6.4vw, 4.6rem);
  line-height:.98; letter-spacing:.005em; text-transform:uppercase;
}
.display.light{color:#fff}
.display.center{text-align:center}

.grad{
  background:linear-gradient(96deg,var(--ink) 0%,var(--ink) 22%,#2f6a9c 60%,#5f9ad0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-light{
  background:linear-gradient(96deg,#ffffff 0%,#cfe1f1 40%,var(--blue-l) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{
  max-width:60ch; margin-top:clamp(18px,2.6vw,28px);
  font-size:clamp(1rem,1.5vw,1.18rem); color:var(--grey);
}
.lede .hint{display:block; margin-top:.5em; font-size:.86em; color:var(--grey-2)}

.section{padding-block:var(--sec-y)}

/* ─── reveal ─── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ═══ HEADER ═══ */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-head.solid{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.head-inner{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:baseline; gap:10px; color:var(--ink)}
.brand-name{font-family:var(--geo); font-weight:300; font-size:1.15rem; letter-spacing:.06em}
.b-blue{color:var(--blue); font-weight:400}
.brand-tag{
  font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  opacity:.65; white-space:nowrap;
}

.nav-desk{display:none; align-items:center; gap:clamp(18px,2.4vw,34px)}
.nav-desk a{
  font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); transition:color .25s; position:relative; padding-block:4px;
}
.nav-desk a:hover{color:var(--ink)}
.nav-desk a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .3s var(--ease);
}
.nav-desk a:hover::after{right:0}
.nav-desk .nav-cta{
  border:1px solid var(--ink); border-radius:999px; padding:8px 18px; color:var(--ink);
}
.nav-desk .nav-cta::after{display:none}
.nav-desk .nav-cta:hover{background:var(--ink); color:#fff}

.burger{width:38px; height:38px; display:grid; place-content:center; gap:6px; margin-right:-6px}
.burger span{display:block; width:22px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.nav-mob{
  position:fixed; inset:0; z-index:99; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:90px var(--pad) 40px;
}
.nav-mob[hidden]{display:none}
.nav-mob a{
  font-family:var(--disp); font-size:clamp(1.8rem,9vw,2.6rem); line-height:1.18;
  text-transform:uppercase; color:var(--ink);
}
.nav-mob .mob-dl{
  font-family:var(--body); font-size:.85rem; font-weight:600; letter-spacing:.08em;
  color:var(--blue-d); margin-top:26px; text-transform:uppercase;
}

@media (min-width:900px){
  .burger{display:none}
  .nav-desk{display:flex}
  .nav-mob{display:none !important}
}

/* ═══ HERO ═══ */
.hero{
  position:relative; background:var(--paper); color:var(--ink);
  display:grid; grid-template-rows:auto auto; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:auto -20% -30% 30%; height:70%;
  background:radial-gradient(60% 60% at 60% 60%, rgba(92,147,196,.16), transparent 70%);
  pointer-events:none;
}
.hero-photo{position:relative; background:var(--paper-2); overflow:hidden}
.hero-photo::after{
  content:''; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0));
}
.hero-photo img{width:100%; height:min(56svh,460px); object-fit:cover; object-position:50% 8%}
.hero-body{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(26px,6vw,44px) var(--pad) clamp(68px,11vw,96px);
}
.wordmark{
  font-family:var(--geo); font-weight:200;
  font-size:clamp(3.1rem, 13.5vw, 8rem); line-height:.92; letter-spacing:-.012em;
  margin:.06em 0 .2em;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,#2f6a9c 64%,#79aed9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark.on-dark{
  background:linear-gradient(100deg,#ffffff 0%,#ffffff 42%,#a9cdea 72%,var(--blue-l) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-blue{font-weight:200; margin-left:.06em}
.hero-line{
  font-family:var(--geo); font-weight:300;
  font-size:clamp(1.05rem,3.4vw,1.85rem); line-height:1.22; letter-spacing:.03em;
  text-transform:uppercase; color:var(--grey);
}
.hero-line b{font-weight:600; color:var(--ink)}
.hero-roles{
  margin-top:clamp(16px,2.4vw,22px);
  font-family:var(--geo); font-weight:400; letter-spacing:.05em;
  font-size:clamp(.9rem,2vw,1.1rem); color:var(--blue-d);
}
.hero-quote{
  margin-top:clamp(18px,2.6vw,26px); max-width:44ch; padding-left:14px;
  border-left:2px solid var(--blue-p);
  font-style:italic; color:var(--grey); font-size:clamp(.9rem,1.6vw,1.02rem);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.6vw,38px)}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease);
}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn-fill{background:var(--ink); color:#fff}
.btn-fill:hover{background:var(--blue-d)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2); border-color:var(--ink)}
.btn-ghost:hover span{transform:translateY(3px)}

.scroll-cue{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:22px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.6rem; letter-spacing:.22em; color:var(--grey-2); text-transform:uppercase;
}
.scroll-cue i{width:1px; height:34px; background:linear-gradient(var(--grey-2),transparent); animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2); transform-origin:bottom}}

@media (max-width:899px){
  .scroll-cue{display:none}
}

@media (min-width:900px){
  .hero{
    min-height:100svh; grid-template-rows:1fr; grid-template-columns:minmax(340px,42%) 1fr;
    align-items:stretch;
  }
  .hero-photo img{height:100%; min-height:100svh; object-position:50% 12%}
  .hero-body{
    display:flex; flex-direction:column; justify-content:center;
    max-width:none; margin:0;
    padding:96px clamp(32px,5vw,72px) 96px clamp(32px,4.5vw,64px);
  }
  .hero-body>*{max-width:min(680px,100%)}
}
@media (min-width:1400px){
  .hero-body{padding-left:clamp(48px,6vw,110px)}
}

/* ═══ STATEMENT ═══ */
.statement{padding-block:clamp(64px,10vw,132px); border-bottom:1px solid var(--line)}
.big-quote{
  font-family:var(--geo); font-weight:300;
  font-size:clamp(1.35rem,3.6vw,2.6rem); line-height:1.28; letter-spacing:-.01em;
  max-width:22ch;
}
.big-quote em{font-style:normal; color:var(--blue-d); font-weight:500}

/* ═══ LIVES ═══ */
.lives-grid{
  display:grid; gap:clamp(30px,4vw,46px); margin-top:clamp(38px,5vw,60px);
  grid-template-columns:1fr;
}
.life-img{
  aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); margin-bottom:22px;
  border-radius:2px;
}
.life-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.life:hover .life-img img{transform:scale(1.04)}
.life h3{
  font-family:var(--disp); font-size:clamp(1.3rem,2.6vw,1.7rem);
  text-transform:uppercase; margin-bottom:14px;
}
.life ul li{
  position:relative; padding-left:18px; margin-bottom:10px;
  font-size:.94rem; color:var(--grey); line-height:1.6;
}
.life ul li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--blue);
}
@media (min-width:760px){.lives-grid{grid-template-columns:repeat(3,1fr)}}

/* ═══ BAND (calm yet powerful) ═══ */
.band{background:var(--paper-2); padding-block:var(--sec-y)}
.band-media{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  max-width:var(--maxw); margin:0 auto clamp(34px,5vw,56px); padding-inline:var(--pad);
}
.band-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10; border-radius:2px}
.band-media img:first-child{aspect-ratio:1/1}
@media (min-width:760px){
  .band-media{grid-template-columns:.8fr 1.3fr 1.1fr}
  .band-media img{aspect-ratio:4/3}
  .band-media img:first-child{aspect-ratio:4/3}
}
.band-cols{
  display:grid; gap:clamp(28px,4vw,52px); margin-top:clamp(30px,4vw,46px);
  grid-template-columns:1fr;
}
@media (min-width:760px){.band-cols{grid-template-columns:1fr 1fr}}
.band-cols h3{
  font-family:var(--geo); font-weight:600; font-size:clamp(1.15rem,2.3vw,1.6rem);
  line-height:1.25; margin-bottom:16px;
}
.band-cols p{color:var(--grey); margin-bottom:10px; max-width:42ch}

/* ═══ VISION / ACCORDION ═══ */
.acc{margin-top:clamp(36px,5vw,58px); border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{
  width:100%; display:flex; align-items:flex-start; gap:clamp(14px,3vw,32px);
  padding:clamp(22px,3vw,32px) 0; text-align:left;
}
.acc-num{
  font-family:var(--disp); font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--blue); flex:none; padding-top:.28em; letter-spacing:.04em;
}
.acc-title{
  flex:1; font-family:var(--disp); text-transform:uppercase; line-height:1.06;
  font-size:clamp(1.25rem,3.6vw,2.3rem); transition:color .3s;
}
.acc-title em{
  display:block; font-family:var(--body); font-style:normal; font-weight:400;
  font-size:clamp(.82rem,1.4vw,.95rem); letter-spacing:.01em; text-transform:none;
  color:var(--grey); margin-top:8px;
}
.acc-head:hover .acc-title{color:var(--blue-d)}
.acc-ico{
  flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:999px;
  position:relative; margin-top:.15em; transition:border-color .3s, background .3s;
}
.acc-ico::before,.acc-ico::after{
  content:''; position:absolute; inset:50% 10px auto; height:1px; background:var(--ink);
  transition:transform .35s var(--ease), background .3s;
}
.acc-ico::after{transform:rotate(90deg)}
.acc-head:hover .acc-ico{border-color:var(--blue)}
.acc-item.is-open .acc-ico{background:var(--ink); border-color:var(--ink)}
.acc-item.is-open .acc-ico::before,.acc-item.is-open .acc-ico::after{background:#fff}
.acc-item.is-open .acc-ico::after{transform:rotate(0deg)}
.acc-item.is-open .acc-title{color:var(--ink)}

.acc-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr}
.acc-panel>.acc-inner{overflow:hidden}
.acc-inner{padding-left:0}
@media (min-width:760px){.acc-inner{padding-left:calc(clamp(.95rem,1.6vw,1.15rem) + clamp(14px,3vw,32px))}}
.acc-item.is-open .acc-inner{padding-bottom:clamp(30px,4vw,46px)}

.acc-lede{
  font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.55; max-width:60ch; color:var(--ink-2);
  margin-bottom:26px;
}
.acc-list li{
  position:relative; padding-left:20px; margin-bottom:12px; color:var(--grey);
  max-width:72ch; font-size:.96rem;
}
.acc-list li b{color:var(--ink); font-weight:600}
.acc-list li::before{content:''; position:absolute; left:0; top:.66em; width:9px; height:1px; background:var(--blue)}
.acc-note{
  margin-top:22px; padding-left:16px; border-left:2px solid var(--blue);
  font-family:var(--geo); font-weight:500; font-size:1.02rem;
}

.tiers{display:grid; gap:12px; margin-bottom:26px}
@media (min-width:700px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--paper-2); padding:20px; border-radius:2px; border-top:2px solid var(--blue)}
.tier-tag{
  display:block; font-family:var(--disp); text-transform:uppercase;
  font-size:1.02rem; margin-bottom:10px;
}
.tier-fmt{font-size:.88rem; color:var(--ink-2); margin-bottom:6px}
.tier-mv{font-size:.82rem; color:var(--grey)}

.facts{display:grid; gap:16px; margin-bottom:26px}
@media (min-width:700px){.facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.fact{display:flex; gap:14px; align-items:flex-start}
.fact b{
  font-family:var(--disp); font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:.9;
  color:var(--blue-d); flex:none;
}
.fact span{font-size:.85rem; color:var(--grey); line-height:1.5}

.cards2{display:grid; gap:14px}
@media (min-width:700px){.cards2{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line); padding:22px; border-radius:2px; transition:border-color .3s, transform .3s var(--ease)}
.card:hover{border-color:var(--blue); transform:translateY(-2px)}
.card h4{
  font-family:var(--geo); font-weight:600; font-size:1.02rem; margin-bottom:10px;
}
.card p{font-size:.9rem; color:var(--grey)}

/* ═══ FACE OFF ═══ */
.faceoff{background:var(--paper-2)}
.fo-top{display:grid; gap:clamp(28px,4vw,52px); align-items:center}
@media (min-width:900px){.fo-top{grid-template-columns:.85fr 1.15fr}}
.fo-copy p{color:var(--grey); margin-top:14px; max-width:48ch}
.fo-sub{
  font-family:var(--geo); font-weight:500; font-style:italic;
  font-size:clamp(1rem,1.9vw,1.25rem); color:var(--ink) !important; margin-top:18px !important;
}
.fo-img img{width:100%; border-radius:2px}
.fo-img{margin:0; background:#fff; border-radius:2px}

.road{display:grid; gap:14px; margin-top:clamp(24px,3vw,34px)}
@media (min-width:640px){.road{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.road{grid-template-columns:repeat(4,1fr)}}
.road-card{background:#fff; padding:26px 22px; border-radius:2px; border-top:3px solid var(--ink)}
.road-card:nth-child(2){border-top-color:var(--blue-d)}
.road-card:nth-child(3){border-top-color:var(--blue)}
.road-card:nth-child(4){border-top-color:var(--blue-l)}
.road-k{
  display:block; font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.2rem,2.4vw,1.5rem); margin-bottom:14px;
}
.road-card li{
  position:relative; padding-left:16px; margin-bottom:8px; font-size:.9rem; color:var(--grey);
}
.road-card li::before{content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--blue)}

/* ═══ TAPE TO TAPE ═══ */
.tape{padding-block:var(--sec-y)}
.tape-grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(30px,4vw,48px); align-items:center;
}
@media (min-width:900px){.tape-grid{grid-template-columns:1fr .68fr 1fr}}
.tape-copy h3{
  font-family:var(--geo); font-weight:600; font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.3; margin:22px 0 12px;
}
.tape-copy p{color:var(--grey); margin-bottom:12px}
.tape-copy p em{color:var(--ink-2)}
.tape-copy p b{color:var(--ink)}
.tape-sub{
  font-family:var(--geo); font-style:italic; font-weight:400;
  color:var(--grey) !important; margin-top:10px !important;
}
.tape-img{margin:0; order:-1}
.tape-img img{width:100%; border-radius:2px; aspect-ratio:3/4; object-fit:cover}
@media (min-width:900px){.tape-img{order:0} .tape-img img{aspect-ratio:1/1.6}}

/* ═══ HUB ═══ */
.venue{
  margin-top:clamp(36px,5vw,60px); display:grid; gap:clamp(20px,3vw,34px); align-items:center;
}
@media (min-width:900px){
  .venue{grid-template-columns:.8fr 1.2fr}
  .venue.alt .venue-body{order:2}
}
.venue-body h3{
  font-family:var(--disp); text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.4rem,3vw,2.1rem); margin-bottom:14px;
}
.venue-body p{color:var(--grey); max-width:46ch}
.venue-pics{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.venue-pics img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; border-radius:2px}
.venue-pics.four{grid-template-columns:1fr 1fr}

.split{margin-top:clamp(50px,7vw,86px); display:grid; gap:clamp(24px,3.4vw,40px); align-items:start}
@media (min-width:900px){.split{grid-template-columns:.85fr 1.15fr}}
.split-body h3{
  font-family:var(--geo); font-weight:600; font-size:1.15rem; margin:0 0 12px;
}
.split-body h3:nth-of-type(2){margin-top:28px}
.split-body li{
  position:relative; padding-left:18px; margin-bottom:9px; color:var(--grey); font-size:.94rem;
}
.split-body li::before{content:''; position:absolute; left:0; top:.64em; width:8px; height:1px; background:var(--blue)}
.split-img{margin:0}
.split-img img{width:100%; border-radius:2px}
.split-img figcaption{
  margin-top:10px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2);
}

/* ═══ DNA (dark) ═══ */
.dna{background:var(--ink); color:#fff}
.dna-grid{display:grid; gap:clamp(28px,4vw,40px); margin-top:clamp(38px,5vw,58px)}
@media (min-width:820px){.dna-grid{grid-template-columns:repeat(3,1fr)}}
.dna-card img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:2px;
  margin-bottom:20px; filter:saturate(.92);
}
.dna-card h3{
  font-family:var(--disp); text-transform:uppercase; font-size:clamp(1.2rem,2.4vw,1.55rem);
  margin-bottom:12px;
}
.dna-card p{color:rgba(255,255,255,.66); font-size:.94rem}

/* ═══ VALUES ═══ */
.val-list{margin-top:clamp(36px,5vw,56px); border-top:1px solid var(--line)}
.val-list li{
  display:grid; gap:6px 22px; padding:clamp(22px,3vw,32px) 0; border-bottom:1px solid var(--line);
  grid-template-columns:auto 1fr;
}
@media (min-width:820px){.val-list li{grid-template-columns:auto minmax(200px,.5fr) 1.5fr; align-items:start}}
.val-n{font-family:var(--disp); color:var(--blue); font-size:1rem; padding-top:.35em}
.val-list h3{
  font-family:var(--disp); text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.3rem,3vw,2rem);
}
.val-list p{color:var(--grey); max-width:56ch; grid-column:2/-1}
@media (min-width:820px){.val-list p{grid-column:3}}

/* ═══ PROMISES ═══ */
.promises{background:var(--blue-d); color:#fff; padding-block:var(--sec-y)}
.pro-grid{display:grid; gap:clamp(26px,3.6vw,38px); margin-top:clamp(38px,5vw,58px)}
@media (min-width:820px){.pro-grid{grid-template-columns:repeat(3,1fr)}}
.pro img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:2px; margin-bottom:20px}
.pro-n{
  display:block; font-family:var(--disp); text-transform:uppercase;
  font-size:1.25rem; margin-bottom:10px; color:var(--blue-l);
}
.pro p{color:rgba(255,255,255,.8); font-size:.94rem}

/* ═══ GALLERY ═══ */
.gallery{padding-bottom:clamp(48px,7vw,90px)}
.grid-photos{
  display:grid; gap:8px; grid-auto-flow:dense; margin-top:clamp(30px,4vw,46px);
  padding-inline:clamp(8px,2vw,24px);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){.grid-photos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.grid-photos{grid-template-columns:repeat(4,1fr)}}
.ph{
  position:relative; overflow:hidden; background:var(--paper-2); border-radius:2px;
  aspect-ratio:1/1; padding:0; display:block;
}
.ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .3s}
.ph:hover img{transform:scale(1.05)}
.ph.tall{grid-row:span 2; aspect-ratio:1/2}
.ph.wide{grid-column:span 2; aspect-ratio:2/1}
@media (max-width:520px){
  .ph.tall{grid-row:span 1; aspect-ratio:1/1}
}

/* ═══ CONTACT ═══ */
.contact{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding-block:clamp(80px,12vw,150px)}
.contact-media{position:absolute; inset:0}
.contact-media img{width:100%; height:100%; object-fit:cover; object-position:62% 30%}
.contact-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,8,11,.96) 0%, rgba(6,8,11,.88) 40%, rgba(6,8,11,.5) 72%, rgba(6,8,11,.3) 100%);
}
.contact-body{position:relative; z-index:2}
.wordmark.small{font-size:clamp(2.6rem,10vw,5.4rem); margin:.04em 0 .2em}
.contact .hero-line{color:rgba(255,255,255,.72)}
.contact .hero-line b{color:#fff}
.hero-line.small{font-size:clamp(.85rem,2.4vw,1.25rem)}

.contact-rows{margin-top:clamp(32px,4.4vw,50px); max-width:640px; border-top:1px solid rgba(255,255,255,.18)}
.crow{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 16px;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.18);
  transition:padding-left .3s var(--ease);
}
.crow:hover{padding-left:10px}
.crow-k{
  grid-column:1; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-l);
}
.crow-v{
  grid-column:1; grid-row:2; font-family:var(--geo); font-weight:300;
  font-size:clamp(1.05rem,3vw,1.5rem); word-break:break-word;
}
.crow-i{grid-column:2; grid-row:2; font-size:1.3rem; color:var(--blue-l); transition:transform .3s var(--ease)}
.crow:hover .crow-i{transform:translateX(5px)}

/* ═══ FOOTER ═══ */
.site-foot{background:#06080b; color:rgba(255,255,255,.6); padding-block:clamp(48px,6vw,72px) 0}
.foot-grid{display:grid; gap:clamp(28px,4vw,44px)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand{font-family:var(--geo); font-weight:300; font-size:1.5rem; color:#fff; letter-spacing:.04em}
.foot-role{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-l);
  margin-top:8px;
}
.foot-desc{margin-top:14px; font-size:.9rem; max-width:34ch}
.foot-h{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4);
  margin-bottom:14px;
}
.site-foot nav, .foot-grid>div:last-child{display:flex; flex-direction:column; gap:9px}
.site-foot a{font-size:.9rem; transition:color .25s; width:fit-content}
.site-foot a:hover{color:#fff}
.foot-bot{
  margin-top:clamp(38px,5vw,60px); padding-block:22px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35);
}

/* ═══ LIGHTBOX ═══ */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(6,8,11,.96);
  display:grid; place-items:center; padding:clamp(16px,5vw,60px);
  animation:fade .25s var(--ease);
}
.lb[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%; max-height:88vh; object-fit:contain; border-radius:2px}
.lb button{
  position:absolute; color:#fff; width:52px; height:52px; border-radius:999px;
  display:grid; place-content:center; font-size:1.8rem; line-height:1;
  background:rgba(255,255,255,.08); transition:background .25s;
}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb-close{top:16px; right:16px; font-size:1.1rem !important}
.lb-prev{left:12px; top:50%; transform:translateY(-50%)}
.lb-next{right:12px; top:50%; transform:translateY(-50%)}
@media (max-width:600px){
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb button{width:44px; height:44px}
}

/* print */
@media print{
  .site-head,.nav-mob,.scroll-cue,.lb,.hero-cta{display:none !important}
  body{color:#000}
  .hero,.dna,.contact,.promises{background:#fff !important; color:#000 !important}
  .hero-media,.contact-media{display:none}
}

/* ═══════════════════════════════════════════
   HERO VARIANT B — dark backdrop portrait
   (index-dark.html · body.hero-dark)
   ═══════════════════════════════════════════ */
body.hero-dark .site-head:not(.solid) .brand{color:#fff}
body.hero-dark .site-head:not(.solid) .b-blue{color:var(--blue-l)}
body.hero-dark .site-head:not(.solid) .nav-desk a{color:rgba(255,255,255,.82)}
body.hero-dark .site-head:not(.solid) .nav-desk a:hover{color:#fff}
body.hero-dark .site-head:not(.solid) .nav-desk .nav-cta{border-color:rgba(255,255,255,.35); color:#fff}
body.hero-dark .site-head:not(.solid) .nav-desk .nav-cta:hover{background:#fff; color:var(--ink)}
body.hero-dark .site-head:not(.solid) .burger span{background:#fff}
body.hero-dark .burger[aria-expanded="true"] span{background:var(--ink) !important}

body.hero-dark .hero{
  min-height:100svh; background:var(--ink); color:#fff;
  display:grid; grid-template-rows:1fr; grid-template-columns:1fr; align-items:end;
}
body.hero-dark .hero::before{display:none}
body.hero-dark .hero-media{position:absolute; inset:0}
body.hero-dark .hero-media img{width:100%; height:100%; object-fit:cover; object-position:52% 16%}
body.hero-dark .hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,8,11,.96) 0%, rgba(6,8,11,.72) 42%, rgba(6,8,11,.2) 78%, rgba(6,8,11,.45) 100%);
}
body.hero-dark .hero-body{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto; display:block;
  padding:0 var(--pad) clamp(92px,14vh,150px);
}
body.hero-dark .hero-line{color:rgba(255,255,255,.9)}
body.hero-dark .hero-line b{color:#fff}
body.hero-dark .hero-roles{color:var(--blue-l)}
body.hero-dark .hero-quote{color:rgba(255,255,255,.72); border-left-color:rgba(255,255,255,.28)}
body.hero-dark .btn-fill{background:#fff; color:var(--ink)}
body.hero-dark .btn-fill:hover{background:var(--blue-l)}
body.hero-dark .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
body.hero-dark .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
body.hero-dark .scroll-cue{display:flex; color:rgba(255,255,255,.5)}
body.hero-dark .scroll-cue i{background:linear-gradient(rgba(255,255,255,.6),transparent)}

@media (min-width:900px){
  body.hero-dark .hero{align-items:center}
  body.hero-dark .hero-media img{object-position:78% 20%}
  body.hero-dark .hero-media::after{
    background:
      linear-gradient(100deg, rgba(6,8,11,.97) 0%, rgba(6,8,11,.9) 34%, rgba(6,8,11,.55) 56%, rgba(6,8,11,.25) 78%),
      linear-gradient(to top, rgba(6,8,11,.6), transparent 40%);
  }
  body.hero-dark .hero-body{padding:60px var(--pad) 0}
  body.hero-dark .hero-body>*{max-width:min(760px,64%)}
}

/* ─── A/B preview switch — delete this block and the markup once a version is chosen ─── */
.ab-switch{
  position:fixed; z-index:120; right:14px; bottom:14px;
  display:flex; align-items:center; gap:4px; padding:5px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px;
  box-shadow:0 8px 26px rgba(11,13,16,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ab-switch b{
  font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-2); padding:0 8px 0 6px;
}
.ab-switch a{
  font-size:.7rem; font-weight:600; letter-spacing:.04em; color:var(--grey);
  padding:7px 13px; border-radius:999px; transition:background .25s, color .25s;
}
.ab-switch a:hover{background:var(--paper-2); color:var(--ink)}
.ab-switch a[aria-current="page"]{background:var(--ink); color:#fff}
@media (max-width:560px){
  .ab-switch b{display:none}
  .ab-switch{right:10px; bottom:10px}
}