:root{
  --paper:#FFFFFF; --cell:#FFFFFF; --ink:#000000; --ink-2:#222222; --muted:#666666; --rule:#000000;
  --accent:#E4421C; --accent-deep:#C0350F; --accent-ink:#FFFFFF; --tint:#FAE3DC;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --line:2px; --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-inline:var(--gutter);padding-block:0 0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-0.035em;line-height:.95;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
.wrap{max-width:1360px;margin-inline:auto}
[hidden]{display:none!important}

.eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.arrow,.team .who a i{display:inline-block;position:relative;width:18px;height:18px;flex:0 0 18px;font-size:0;line-height:0;text-indent:-9999px;overflow:visible;vertical-align:middle}
.arrow::before,.team .who a i::before{content:"";position:absolute;left:0;top:8px;width:17px;height:2px;background:currentColor;transform:rotate(-45deg);transform-origin:center}
.arrow::after,.team .who a i::after{content:"";position:absolute;right:0;top:0;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.arrow{transition:transform .25s ease}
a:hover .arrow{transform:translate(3px,-3px)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px 8px;position:relative;z-index:20}
.nav .logo{display:flex;align-items:center;width:64px;height:26px;color:var(--ink);background:url("assets/12x-header-mark.png?v=1") center left/contain no-repeat}
.nav .logo svg{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,36px);align-items:center}
.nav li a{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-0.01em;padding-bottom:2px;border-bottom:2px solid transparent}
.nav li a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav li a.cta{color:var(--accent)}
.mobile-nav{display:none}
@media (max-width:720px){
  .nav>nav>ul{display:none}
  .mobile-nav{display:block;position:relative}
  .nav .logo{position:relative;z-index:32}
  .mobile-nav summary{list-style:none;position:relative;z-index:32;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 0 8px 12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);cursor:pointer}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary::marker{content:""}
  .mobile-nav .label{font-size:0}
  .mobile-nav .label::before{content:"Menu";font-size:12px}
  .mobile-nav[open] .label::before{content:"Close"}
  .mobile-nav .burger{position:relative;width:22px;height:16px;display:block}
  .mobile-nav .burger::before,.mobile-nav .burger::after,.mobile-nav .burger span{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .2s ease,top .2s ease,opacity .2s ease}
  .mobile-nav .burger::before{top:0}
  .mobile-nav .burger span{top:7px}
  .mobile-nav .burger::after{top:14px}
  .mobile-nav[open] .burger::before{top:7px;transform:rotate(45deg)}
  .mobile-nav[open] .burger span{opacity:0}
  .mobile-nav[open] .burger::after{top:7px;transform:rotate(-45deg)}
  .mobile-nav ul{display:none;position:fixed;z-index:30;inset:0;width:100%;min-height:100dvh;padding:104px 20px 20px;background:var(--paper);flex-direction:column;align-items:stretch;gap:0}
  .mobile-nav[open] ul{display:flex}
  .mobile-nav li{width:100%;border-top:var(--line) solid var(--rule)}
  .mobile-nav li:nth-last-child(2){border-bottom:var(--line) solid var(--rule)}
  .mobile-nav li:last-child{margin-top:auto;border-top:0}
  .mobile-nav li a{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:82px;padding:16px 4px;border-bottom:0;font-family:var(--display);font-size:clamp(32px,10vw,46px);font-weight:800;letter-spacing:-.04em}
  .mobile-nav li a[aria-current="page"]{background:var(--ink);color:var(--paper)}
  .mobile-nav li a.cta{min-height:92px;padding:18px 20px;background:var(--accent);color:var(--accent-ink);font-size:26px;letter-spacing:-.02em}
  body:has(.mobile-nav[open]){overflow:hidden}
}
/* mobile page switcher: the four link cells double as navigation on phones */

/* page head (inner pages) */
.page-head{padding-block:clamp(36px,6vw,80px) clamp(24px,3.5vw,44px);border-bottom:var(--line) solid var(--rule);display:flex;flex-direction:column;gap:18px}
.page-head h1{font-size:clamp(40px,7.2vw,104px);max-width:16ch}
.page-head h1 em{font-style:normal;color:var(--accent)}
.page-head p{max-width:56ch;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);line-height:1.45}

/* hero (home) — the SBXi grid */
.hero{--line:3px;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));grid-auto-rows:minmax(clamp(135px,17.1vw,270px),auto);width:100%;border-top:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);margin:28px auto 0}
.hero>*{min-width:0}
.hero .big{font-family:var(--display);font-weight:800;letter-spacing:-0.045em;line-height:.9;font-size:clamp(46px,9.2vw,148px);display:flex;align-items:center;padding:clamp(12px,1.6vw,24px) clamp(14px,1.8vw,28px)}
.hero .t1{grid-column:1/11;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule)}
.hero .photo{grid-column:11/21;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);background:#FFFFFF;position:relative;overflow:hidden;color:#14100F}
.hero .photo .cap{position:absolute;left:clamp(14px,1.8vw,28px);top:clamp(14px,1.8vw,24px);font-weight:600;font-size:clamp(14px,1.2vw,18px);z-index:2}
.hero .photo .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);opacity:0;transition:opacity .6s ease}
.hero .photo .slide.on{opacity:1}
.hero .photo .slide .brand{height:clamp(40px,4.6vw,64px);font-size:clamp(22px,2.4vw,32px)}
.hero .photo .slide .brand .name{font-size:1em}
.hero .c{grid-column:span 2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:clamp(14px,1.6vw,22px) clamp(14px,1.8vw,26px);font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,24px);letter-spacing:-0.02em;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);transition:background .2s ease}
.hero .c:first-of-type{border-left:var(--line) solid var(--rule)}
.hero .hero-about{grid-column:1/6}
.hero .hero-team{grid-column:6/11}
.hero .hero-portfolio{grid-column:11/16}
.hero .c:hover{background:var(--cell)}
.hero .c .arrow{font-size:1.15em}
.hero .mid{grid-column:16/21;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);justify-content:center;font-size:clamp(44px,7vw,108px)}
.hero .t3{grid-column:1/13}
.hero .apply{grid-column:13/21;background:var(--accent);color:var(--accent-ink);border-left:var(--line) solid var(--rule);border-right:var(--line) solid var(--rule);border-bottom:0}
.hero .apply:hover{background:var(--accent-deep)}
@media (max-width:720px){
  .hero{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;width:100%;border:var(--line) solid var(--rule)}
  .hero .big{grid-column:1/7;font-size:clamp(50px,15vw,68px);line-height:.82;min-height:0;justify-content:flex-start}
  .hero .t1{order:1;border:0;padding:24px 16px 4px}
  .hero .mid{order:2;border:0;padding:4px 16px}
  .hero .t3{order:3;border:0;border-bottom:var(--line) solid var(--rule);padding:4px 16px 24px}
  .hero .photo{order:4;grid-column:1/7;border:0;border-bottom:var(--line) solid var(--rule);min-height:190px}
  .hero .c:first-of-type{border-left:0}
  .hero .hero-about,.hero .hero-team,.hero .hero-portfolio{order:5;grid-column:span 2;min-height:68px;padding:14px 12px;align-items:center;border-bottom:var(--line) solid var(--rule)}
  .hero .hero-portfolio{border-left:0}
  .hero .c:nth-of-type(3){border-right:0}
  .hero .apply{order:6;grid-column:1/7;min-height:92px;border:0;padding:18px 16px}
}
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-0.01em;border:var(--line) solid var(--accent);background:var(--accent);color:var(--accent-ink);transition:background .2s ease,border-color .2s ease;cursor:pointer}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

/* statement sections (home): eyebrow left, one large paragraph right */
.statement{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 clamp(24px,4vw,64px);padding-block:clamp(40px,6vw,88px);border-bottom:var(--line) solid var(--rule)}
.statement p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,36px);letter-spacing:-0.025em;line-height:1.2;max-width:32ch;text-wrap:balance}
.statement p em{font-style:normal;color:var(--accent)}
@media (max-width:820px){.statement{grid-template-columns:1fr;gap:16px}}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-inline:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule)}
.facts>div{padding:18px 20px 20px;border-right:var(--line) solid var(--rule);display:flex;flex-direction:column;gap:10px}
.facts>div:last-child{border-right:0}
.facts .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts .v{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:720px){.facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(2){border-right:0}.facts>div:nth-child(-n+2){border-bottom:var(--line) solid var(--rule)}}

/* sections */
.section{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 clamp(24px,4vw,64px);padding-block:clamp(48px,7vw,104px);border-bottom:var(--line) solid var(--rule)}
.section .side{display:flex;flex-direction:column;gap:12px}
.section .side .eyebrow{max-width:16ch;line-height:1.5}
.section .main{display:flex;flex-direction:column;gap:clamp(28px,3.5vw,48px)}
.section h2{font-size:clamp(32px,4.6vw,64px);max-width:18ch}
.section h2 em{font-style:normal;color:var(--accent)}
.prose{max-width:62ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--ink-2);display:flex;flex-direction:column;gap:1em}
.more{font-family:var(--display);font-weight:700;font-size:17px;display:inline-flex;gap:8px;align-items:center;color:var(--ink)}
@media (max-width:820px){.section{grid-template-columns:1fr;gap:20px}}

/* origin */
.origin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:var(--line) solid var(--rule)}
.origin .big{padding:clamp(20px,3vw,44px);border-right:var(--line) solid var(--rule);background:var(--cell);display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:280px}
.origin .big .num{font-family:var(--display);font-weight:900;font-size:clamp(96px,13vw,200px);line-height:.85;letter-spacing:-0.06em;color:var(--accent);font-variant-numeric:tabular-nums}
.origin .big .num small{font-size:.5em;letter-spacing:-0.04em;vertical-align:top;margin-left:.04em}
.origin .big .cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:30ch;line-height:1.6}
.origin .txt{padding:clamp(20px,3vw,44px);display:flex;align-items:center}
@media (max-width:720px){.origin{grid-template-columns:1fr}.origin .big{border-right:0;border-bottom:var(--line) solid var(--rule);min-height:0}}

/* pillars / edge */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--line) solid var(--rule)}
.pillars>div{padding:clamp(20px,2.4vw,32px);border-right:var(--line) solid var(--rule);display:flex;flex-direction:column;gap:14px;background:var(--cell)}
.pillars>div:last-child{border-right:0}
.pillars h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-0.025em;line-height:1.1}
.pillars p{color:var(--ink-2);line-height:1.5;font-size:16px}
.pillars .glyph{width:44px;height:44px;display:block}
.pillars .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.pillars{grid-template-columns:1fr}.pillars>div{border-right:0;border-bottom:var(--line) solid var(--rule)}.pillars>div:last-child{border-bottom:0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--line) solid var(--rule)}
.steps>div{padding:clamp(20px,2.4vw,32px);border-right:var(--line) solid var(--rule);display:flex;flex-direction:column;gap:22px}
.steps>div:last-child{border-right:0}
.steps .n{font-family:var(--display);font-weight:900;font-size:clamp(72px,9vw,140px);line-height:.8;letter-spacing:-0.06em;color:var(--accent);font-variant-numeric:tabular-nums}
.steps h3{font-size:22px;letter-spacing:-0.02em;margin-bottom:8px}
.steps p{color:var(--ink-2);font-size:16px;line-height:1.5}
@media (max-width:820px){.steps{grid-template-columns:1fr}.steps>div{border-right:0;border-bottom:var(--line) solid var(--rule)}.steps>div:last-child{border-bottom:0}}

/* logo strip (home) */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--line) solid var(--rule)}
.strip a{display:flex;align-items:center;justify-content:center;min-height:116px;padding:20px;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);background:#FFFFFF;color:#121212;transition:background .2s ease;min-width:0}
.strip a:nth-child(3n){border-right:0}
.strip a:nth-last-child(-n+3){border-bottom:0}
.strip a:hover{background:#F4F2ED}
.strip a.all{background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:18px;gap:8px;letter-spacing:-0.02em;text-align:center}
.strip a.all:hover{background:var(--accent-deep)}
.strip .brand{height:32px}
@media (max-width:560px){.strip{grid-template-columns:1fr 1fr}.strip a{border-right:var(--line) solid var(--rule)!important;border-bottom:var(--line) solid var(--rule)!important;min-height:96px}.strip a:nth-child(2n){border-right:0!important}.strip a:nth-last-child(-n+2){border-bottom:0!important}}

/* brand lockups (their marks, their type) */
.brand{height:36px;display:flex;align-items:center;gap:10px}
.brand img,.brand svg{height:100%;width:auto;display:block}
.brand .name{font-weight:700;font-size:20px;letter-spacing:-0.01em;line-height:1;white-space:nowrap}
.brand.amboras .name{font-family:'Inter',var(--body);color:#005976}
.brand.trellis .name{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;color:#007a68;margin-left:-6px;font-size:1.3em}
.brand.adialante .name{font-family:var(--body);font-weight:700;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:#121212}
.brand.aquashield .tile{height:100%;aspect-ratio:1;background:#0A0A0A;display:flex;align-items:center;justify-content:center;padding:5px}
.brand.aquashield .tile img{height:78%;width:auto}
.brand.aquashield .name{font-family:var(--body);font-weight:600;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:#121212}

/* portfolio: cards */
.plain{padding-block:clamp(32px,4.5vw,64px) 0}
.toggle{display:flex;gap:10px;align-items:center}
.toggle button{background:transparent;border:var(--line) solid transparent;padding:8px 14px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-0.01em;cursor:pointer;color:var(--ink)}
.toggle button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.spot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.spot a{display:flex;flex-direction:column;border:var(--line) solid var(--rule);background:#FFFFFF;color:#121212;min-height:420px;transition:background .2s ease}
.spot a:hover{background:#F4F2ED}
.spot .art{flex:none;height:clamp(200px,20vw,280px);display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px)}
.spot .art .brand{height:clamp(44px,5vw,64px);font-size:clamp(24px,2.6vw,34px)}
.spot .art .brand .name{font-size:1em}
.spot .body{flex:1;border-top:var(--line) solid var(--rule);padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.spot .body h3{font-size:clamp(22px,2vw,28px);letter-spacing:-0.025em}
.spot .body p{color:#2C2A27;font-size:16px;line-height:1.45;max-width:44ch}
.spot .tags{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.spot .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B6560;white-space:nowrap}
.spot .go{font-family:var(--display);font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.spot a.slot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);justify-content:space-between;padding:clamp(18px,2.2vw,28px)}
.spot a.slot:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.spot a.slot h3{font-size:clamp(36px,4.4vw,64px);letter-spacing:-0.04em;max-width:10ch}
.spot a.slot .tag{color:var(--accent-ink);opacity:.8}
@media (max-width:760px){
  .spot{grid-template-columns:1fr;gap:16px;border:0}
  .spot a{min-height:0;border:var(--line) solid var(--rule)}
  .spot .art{min-height:180px}
}
.ledger{border-top:var(--line) solid var(--rule)}
.ledger a{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,1.3fr) minmax(0,1.5fr) 170px;gap:16px 24px;align-items:baseline;padding:20px 4px;border-bottom:var(--line) solid var(--rule);transition:background .2s ease}
.ledger a:hover{background:var(--cell)}
.ledger .co{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-0.02em}
.ledger .d{color:var(--ink-2);font-size:16px}
.ledger .t{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ledger .go{font-family:var(--display);font-weight:700;font-size:14px;white-space:nowrap;text-align:right}
.ledger .head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,1.3fr) minmax(0,1.5fr) 170px;gap:16px 24px;padding:12px 4px;border-bottom:var(--line) solid var(--rule)}
.ledger .head span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.ledger .head{display:none}.ledger a{grid-template-columns:1fr auto;grid-template-areas:"co go" "d d" "t1 t2"}.ledger .co{grid-area:co}.ledger .d{grid-area:d}.ledger .t:nth-of-type(1){grid-area:t1}.ledger .t:nth-of-type(2){grid-area:t2;text-align:right}.ledger .go{grid-area:go}}

/* team */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--line) solid var(--rule)}
.team>div{padding:clamp(20px,2.4vw,32px);border-right:var(--line) solid var(--rule);background:var(--cell);display:flex;flex-direction:column;gap:22px;min-height:220px;justify-content:space-between}
.prior-portfolio .main{display:flex;flex-direction:column;gap:22px}
.prior-portfolio .main>p{max-width:62ch;color:var(--ink-2)}
.prior-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line) solid var(--rule);border-left:var(--line) solid var(--rule)}
.prior-company-grid>div{min-height:220px;padding:28px 24px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:28px;border-right:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule)}
.prior-company-grid .company-logo{width:200px;height:72px;max-width:100%;margin-inline:auto;display:flex;align-items:center;justify-content:center}
.prior-company-grid .company-logo>img{display:block;width:200px;height:72px;max-width:100%;object-fit:contain}
.prior-company-grid .prior-company>p{height:66px;margin:0;padding-top:14px;border-top:1px solid currentColor;font-size:13px;line-height:1.35;font-weight:600}
.prior-company-grid .swvl-lockup{width:200px;height:72px;max-width:100%;display:flex;align-items:center;justify-content:center;gap:12px;color:#ff173d}
.prior-company-grid .swvl-lockup img{width:48px;height:48px}
.prior-company-grid .swvl-lockup b{font-family:var(--display);font-size:34px;letter-spacing:-.05em}
@media (max-width:720px){.prior-company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prior-company-grid>div{min-height:210px;padding:20px 18px}.prior-company-grid .prior-company>p{height:76px}}
.team>div:last-child{border-right:0}
.team .person-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 20%;border-bottom:var(--line) solid var(--rule)}
.team .ini{font-family:var(--display);font-weight:900;font-size:clamp(56px,6vw,84px);letter-spacing:-0.05em;line-height:.9;color:var(--accent)}
.team .who{display:flex;flex-direction:column;gap:4px}
.team .who b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.02em}
.team .who a{color:inherit;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.02em;text-decoration:none}
.team .who a:hover,.team .who a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.team .who a i{color:var(--accent);font-style:normal}
.team .who span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.team{grid-template-columns:1fr}.team>div{border-right:0;border-bottom:var(--line) solid var(--rule);min-height:0}.team>div:last-child{border-bottom:0}}

/* faq */
.faq{border-top:var(--line) solid var(--rule)}
.faq details{border-bottom:var(--line) solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-0.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{font-weight:500;font-size:1.3em;color:var(--accent);transition:transform .25s ease;flex:none;width:1em;text-align:center;line-height:1}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px;max-width:62ch;color:var(--ink-2);line-height:1.55}

/* pitch page */
.pitchgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:var(--line) solid var(--rule);margin-block:clamp(28px,4vw,56px) clamp(48px,7vw,104px)}
.pitchgrid.solo{grid-template-columns:1fr}
.pitchgrid .what{padding:clamp(20px,3vw,44px);border-right:var(--line) solid var(--rule);background:var(--cell);display:flex;flex-direction:column;gap:22px}
.pitchgrid .what h2{font-size:clamp(26px,2.6vw,36px)}
.pitchgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pitchgrid li{padding:16px 0;border-top:var(--line) solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;color:var(--ink-2);line-height:1.5}
.pitchgrid li b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:18px;letter-spacing:-0.02em}
.pitchgrid li .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.pitchgrid .send{padding:clamp(20px,3vw,44px);background:var(--accent);color:var(--accent-ink);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.pitchgrid .send p{font-size:clamp(18px,1.6vw,24px);line-height:1.35;font-weight:500;max-width:22ch}
.pitchgrid .send .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);align-self:flex-start;font-size:18px;padding:18px 24px}
.pitchgrid .send .btn:hover{background:#000;border-color:#000}
.pitchgrid .send .btn .mono{font-family:var(--mono);font-weight:500;font-size:15px;opacity:.85}
.pitchgrid .send small{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
@media (max-width:820px){.pitchgrid{grid-template-columns:1fr}.pitchgrid .what{border-right:0;border-bottom:var(--line) solid var(--rule)}}

/* pitch block (bottom of every page) */
.pitch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--accent);color:var(--accent-ink);border:var(--line) solid var(--accent);margin-block:clamp(48px,7vw,104px) 0;position:relative;overflow:hidden}
.pitch>div{padding:clamp(28px,4vw,64px);position:relative}
.pitch h2{font-size:clamp(56px,9vw,150px);line-height:.85;letter-spacing:-0.05em}
.pitch .right{display:flex;flex-direction:column;justify-content:space-between;gap:36px;border-left:var(--line) solid rgba(255,255,255,.35)}
.pitch p{font-size:clamp(18px,1.6vw,24px);line-height:1.35;max-width:30ch;font-weight:500}
.pitch .row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pitch .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);font-size:18px;padding:18px 24px}
.pitch .btn:hover{background:#000;border-color:#000}
.pitch .btn .mono{font-family:var(--mono);font-weight:500;font-size:15px;opacity:.85}
.pitch .more{color:var(--accent-ink)}
@media (max-width:820px){.pitch{grid-template-columns:1fr}.pitch .right{border-left:0;border-top:var(--line) solid rgba(255,255,255,.35)}}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-block:36px 44px;border-top:var(--line) solid var(--rule)}
.footer .l{display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.footer .l>a{display:block;width:230px;height:41px;background:url("assets/12x-outlier-lockup.png?v=1") center left/contain no-repeat}
.footer .l svg{display:none}
.footer .l small{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.footer ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.footer li a{font-weight:600;font-size:15px}
.footer li a.cta{color:var(--accent)}

/* Hero navigation image reveals */
.hero .c{position:relative;overflow:hidden;isolation:isolate}
.hero .c::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;background-position:center;background-size:cover;transform:scale(1.04);transition:opacity .35s ease,transform .55s ease}
.hero .c .cell-label,.hero .c>.arrow{position:relative;z-index:2}
.hero .c:hover::before,.hero .c:focus-visible::before{opacity:1;transform:scale(1)}
.hero .hero-about::before{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url("assets/san-francisco.jpg");background-position:center 46%}
.hero .hero-team::before{background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url("assets/laith-zraikat.jpg?v=3");background-position:center 24%}
.hero .hero-about:hover,.hero .hero-about:focus-visible,.hero .hero-team:hover,.hero .hero-team:focus-visible{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.hero .hero-portfolio:hover,.hero .hero-portfolio:focus-visible{color:#000;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hero .hover-logos{position:absolute;inset:40px 50px 72px;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:4px;background:#fff;opacity:0;transition:opacity .35s ease;overflow:hidden}
.hero .hero-portfolio:hover .hover-logos,.hero .hero-portfolio:focus-visible .hover-logos{opacity:1}
.hero .logo-column{min-width:0;overflow:hidden}
.hero .logo-track{display:flex;flex-direction:column;align-items:center}
.hero .hover-logos .brand{flex:0 0 62px;min-width:0;width:46px;height:46px;justify-content:center;gap:0;transform:none}
.hero .hover-logos .brand img,.hero .hover-logos .brand svg{width:32px;height:32px;object-fit:contain}
.hero .hover-logos .brand.klarify svg{overflow:hidden}
.hero .hover-logos .brand.aquashield .tile{width:40px;height:40px;flex:0 0 40px}
.hero .hover-logos .brand.aquashield .tile img{filter:none}
.hero .hero-portfolio:hover .logo-column-1 .logo-track,.hero .hero-portfolio:focus-visible .logo-column-1 .logo-track{animation:portfolio-column-up 5s linear infinite}
.hero .hero-portfolio:hover .logo-column-2 .logo-track,.hero .hero-portfolio:focus-visible .logo-column-2 .logo-track{animation:portfolio-column-down 5s linear infinite}
@keyframes portfolio-column-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes portfolio-column-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (hover:none){.hero .c::before,.hero .hover-logos{display:none}}