/* ============================================================ SFbei design system */
:root{
  --ink:#080d16;
  --ink-2:#0e1524;
  --ink-3:#182133;
  --paper:#ffffff;
  --paper-2:#f6f4f0;
  --paper-3:#edeae3;
  --accent:#e8a13a;
  --accent-2:#ffbe5c;
  --accent-deep:#8a5410;
  --on-dark:#eef1f6;
  --on-dark-mute:#98a2b5;
  --on-light:#0a1120;
  --on-light-mute:#5a6478;
  --line-d:rgba(255,255,255,.13);
  --line-l:rgba(10,17,32,.13);
  --sans:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --disp:'Space Grotesk','Inter',ui-sans-serif,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1240px;
  --pad:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --navh:74px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--on-light);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--disp); font-weight:700; line-height:1.08; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
table{border-collapse:collapse; width:100%}
::selection{background:var(--accent); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); width:100%}
.wrap-narrow{max-width:820px; margin-inline:auto; padding-inline:var(--pad); width:100%}
.sec{padding-block:clamp(64px,8.5vw,120px); position:relative}
.sec--tight{padding-block:clamp(48px,6vw,84px)}
.dark{background:var(--ink); color:var(--on-dark)}
.dark .muted{color:var(--on-dark-mute)}
.light{background:var(--paper)}
.light .muted,.warm .muted{color:var(--on-light-mute)}
.warm{background:var(--paper-2)}
.divider{border-top:1px solid var(--line-l)}
.dark .divider{border-top-color:var(--line-d)}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:#1a1204; padding:12px 18px; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; display:inline-flex; align-items:center; gap:11px}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); flex:none}
.dark .eyebrow{color:var(--accent)}
.light .eyebrow,.warm .eyebrow{color:var(--accent-deep)}
.h-xl{font-size:clamp(2.5rem,6.2vw,4.9rem)}
.h-lg{font-size:clamp(1.95rem,4.4vw,3.35rem)}
.h-md{font-size:clamp(1.45rem,2.7vw,2.1rem)}
.h-sm{font-size:clamp(1.12rem,1.8vw,1.35rem); letter-spacing:-.018em}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; max-width:62ch}
.prose{font-size:16.8px; line-height:1.75; max-width:68ch; color:var(--on-light-mute)}
.dark .prose{color:var(--on-dark-mute)}
.prose p+p,.prose ul+p,.prose p+ul,.prose h3{margin-top:1.05em}
.prose h3{font-size:1.22rem; color:var(--on-light); margin-top:1.7em}
.dark .prose h3{color:#fff}
.prose strong{color:var(--on-light); font-weight:600}
.dark .prose strong{color:#fff}
.prose a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px}
.dark .prose a{color:var(--accent)}
.prose ul{list-style:none; display:grid; gap:9px}
.prose ul li{padding-left:22px; position:relative}
.prose ul li::before{content:""; position:absolute; left:2px; top:.66em; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.prose ol{counter-reset:n; display:grid; gap:9px}
.prose ol li{padding-left:30px; position:relative; counter-increment:n}
.prose ol li::before{content:counter(n) "."; position:absolute; left:0; font-family:var(--mono); font-size:13px; color:var(--accent-deep); top:.15em}
.dark .prose ol li::before{color:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:15px; font-weight:600; line-height:1;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:11px 20px; font-size:14px}
.btn-amber{background:var(--accent); color:#1a1204; border-color:var(--accent)}
.btn-amber:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-ink{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-3); border-color:var(--ink-3)}
.btn-ghost-d{border-color:rgba(255,255,255,.32); color:#fff}
.btn-ghost-d:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn-ghost-l{border-color:var(--line-l); color:var(--on-light)}
.btn-ghost-l:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--navh); display:flex; align-items:center;
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease);
  border-bottom:1px solid transparent}
.nav.solid,.nav.opaque{background:rgba(8,13,22,.9); backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--line-d); height:64px}
.nav-in{display:flex; align-items:center; gap:24px; width:100%}
.brand{font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.03em; color:#fff; display:inline-flex; align-items:baseline; flex:none}
.brand i{color:var(--accent); font-style:normal}
.nav-links{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav-links > li{position:relative}
.nav-links a,.nav-links .top{font-size:14.5px; font-weight:500; color:rgba(255,255,255,.84); display:inline-flex; align-items:center; gap:6px; padding-block:8px; cursor:pointer}
.nav-links a:hover,.nav-links .top:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-links .top svg{width:11px; height:11px; opacity:.7; transition:transform .25s var(--ease)}
.nav-links li:hover .top svg,.nav-links li:focus-within .top svg{transform:rotate(180deg)}
.submenu{position:absolute; top:100%; left:-18px; min-width:230px; background:rgba(14,21,36,.97); backdrop-filter:blur(14px);
  border:1px solid var(--line-d); border-radius:12px; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.nav-links li:hover .submenu,.nav-links li:focus-within .submenu{opacity:1; visibility:visible; transform:none}
.submenu a{display:block; padding:10px 14px; border-radius:8px; font-size:14.5px; color:rgba(255,255,255,.8)}
.submenu a:hover{background:rgba(255,255,255,.08); color:#fff}
.submenu .d{display:block; font-size:12px; color:var(--on-dark-mute); margin-top:2px; font-weight:400}
.nav-cta{flex:none}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center; flex:none}
.burger span{display:block; width:22px; height:1.5px; background:#fff; position:relative; transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:1.5px; background:#fff; transition:.3s var(--ease)}
.burger span::before{top:-7px} .burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0; transform:rotate(45deg)}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg)}
.drawer{position:fixed; inset:0; z-index:99; background:var(--ink); padding:calc(var(--navh) + 20px) var(--pad) 40px; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease)}
body.menu-open .drawer{opacity:1; pointer-events:auto}
.drawer h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-mute); margin:26px 0 10px; font-weight:500}
.drawer a{display:block; font-family:var(--disp); font-size:1.35rem; font-weight:700; color:#fff; padding-block:9px; letter-spacing:-.03em}
.drawer a:hover{color:var(--accent)}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:flex; margin-left:12px}
  .nav-in{gap:0}
}
@media (max-width:400px){ .nav-cta{display:none} .burger{margin-left:auto} }

/* ---------- page header (interior pages) ---------- */
.phead{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#fff;
  padding-block:calc(var(--navh) + clamp(48px,7vw,92px)) clamp(48px,7vw,88px); min-height:min(64vh,560px); display:flex; align-items:flex-end}
.phead-bg{position:absolute; inset:0; z-index:0}
.phead-bg img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
.phead::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(8,13,22,.92) 0%, rgba(8,13,22,.66) 42%, rgba(8,13,22,.3) 72%, rgba(8,13,22,.55) 100%),
             linear-gradient(to bottom, rgba(8,13,22,.75) 0%, rgba(8,13,22,.2) 40%, rgba(8,13,22,.75) 100%)}
.phead-in{position:relative; z-index:2; width:100%}
.phead h1{margin-top:20px; max-width:19ch; text-shadow:0 2px 40px rgba(8,13,22,.8)}
.phead .lede{margin-top:22px; color:rgba(255,255,255,.88); text-shadow:0 1px 24px rgba(8,13,22,.85)}
.phead .cta-row{margin-top:32px}
.phead--plain{min-height:0; padding-block:calc(var(--navh) + clamp(44px,6vw,76px)) clamp(40px,5vw,64px); background:var(--ink)}

/* breadcrumbs */
.crumbs{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mute); display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5}

/* ---------- layout helpers ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,76px); align-items:center}
.split--top{align-items:start}
.split--41{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:900px){ .split,.split--41{grid-template-columns:1fr; gap:34px} }
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* ---------- figures ---------- */
.figure{position:relative; overflow:hidden; border-radius:14px; background:var(--paper-3); margin:0}
.dark .figure{background:var(--ink-3)}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.figure:hover img{transform:scale(1.045)}
.ar-45{aspect-ratio:4/5} .ar-11{aspect-ratio:1/1} .ar-43{aspect-ratio:4/3}
.ar-1610{aspect-ratio:16/10} .ar-169{aspect-ratio:16/9} .ar-32{aspect-ratio:3/2} .ar-219{aspect-ratio:21/9}
.figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  background:linear-gradient(transparent, rgba(8,13,22,.9)); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase}

/* ---------- cards ---------- */
.card{border:1px solid var(--line-l); border-radius:14px; background:var(--paper); padding:26px 24px 28px;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column}
.dark .card{background:var(--ink-2); border-color:var(--line-d)}
.card:hover{border-color:var(--ink); transform:translateY(-4px); box-shadow:0 20px 44px -28px rgba(8,13,22,.55)}
.dark .card:hover{border-color:var(--accent); box-shadow:none}
.card h3{font-size:1.08rem; letter-spacing:-.02em}
.card p{font-size:14.9px; line-height:1.62; margin-top:10px; color:var(--on-light-mute)}
.dark .card p{color:var(--on-dark-mute)}
.card .ic{width:34px; height:34px; border-radius:9px; background:var(--ink); color:var(--accent); display:grid; place-items:center; margin-bottom:16px}
.dark .card .ic{background:rgba(232,161,58,.14)}
.card .ic svg{width:19px; height:19px}
.card .more{margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); display:inline-flex; gap:8px; align-items:center}
.dark .card .more{color:var(--accent)}
.card-link{display:flex; flex-direction:column; height:100%}
.card-media{border-radius:14px 14px 0 0; overflow:hidden; aspect-ratio:16/10; background:var(--paper-3)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.card-photo{border:1px solid var(--line-l); border-radius:14px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease)}
.card-photo:hover{border-color:var(--ink); transform:translateY(-4px); box-shadow:0 20px 44px -28px rgba(8,13,22,.55)}
.card-photo:hover .card-media img{transform:scale(1.05)}
.card-photo .body{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.dark .card-photo{background:var(--ink-2); border-color:var(--line-d)}
.dark .card-photo:hover{border-color:var(--accent)}
.tagrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tagrow li,.tag{font-family:var(--mono); font-size:11px; color:var(--on-light-mute); border:1px solid var(--line-l); border-radius:5px; padding:3px 8px; white-space:nowrap}
.dark .tagrow li,.dark .tag{color:var(--on-dark-mute); border-color:var(--line-d)}

/* ---------- stats ---------- */
.statbar{background:var(--ink-2); border-block:1px solid var(--line-d); color:var(--on-dark)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-d)}
.stat{background:var(--ink-2); padding:clamp(24px,3.2vw,40px) clamp(16px,2vw,26px)}
.stat .n{font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,3.8vw,2.9rem); letter-spacing:-.04em; color:#fff; line-height:1}
.stat .n .suf{color:var(--accent)}
.stat .l{font-size:13.5px; color:var(--on-dark-mute); margin-top:10px; line-height:1.45}
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* ---------- marquee ---------- */
.marquee{overflow:hidden; border-block:1px solid var(--line-l); background:var(--paper-2); padding-block:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; width:max-content; animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-light-mute);
  padding-inline:22px; display:inline-flex; align-items:center; gap:22px; white-space:nowrap}
.marquee span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}

/* ---------- steps / numbered ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l); border-radius:14px; overflow:hidden}
.dark .steps{background:var(--line-d); border-color:var(--line-d)}
.step{background:var(--paper); padding:28px 24px 32px}
.dark .step{background:var(--ink-2)}
.step .k{font-family:var(--mono); font-size:11.5px; color:var(--accent-deep); letter-spacing:.14em; font-weight:500}
.dark .step .k{color:var(--accent)}
.step h3{font-size:1.1rem; margin-top:14px}
.step p{font-size:14.7px; line-height:1.62; margin-top:9px; color:var(--on-light-mute)}
.dark .step p{color:var(--on-dark-mute)}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ---------- checked list ---------- */
.incl{display:grid; border-top:1px solid var(--line-l)}
.dark .incl{border-top-color:var(--line-d)}
.incl li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:16px; padding:17px 0; border-bottom:1px solid var(--line-l); align-items:start}
.dark .incl li{border-bottom-color:var(--line-d)}
.incl .tk{color:var(--accent); margin-top:3px}
.incl .tk svg{width:16px; height:16px}
.incl b{display:block; font-size:15.5px; font-weight:600}
.incl .d{display:block; font-size:14.5px; margin-top:4px; line-height:1.6; color:var(--on-light-mute)}
.dark .incl .d{color:var(--on-dark-mute)}

/* ---------- timeline ---------- */
.tl{display:grid; gap:0; border-left:1px solid var(--line-l); margin-left:8px}
.dark .tl{border-left-color:var(--line-d)}
.tl li{position:relative; padding:0 0 34px 32px}
.tl li::before{content:""; position:absolute; left:-5px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--paper)}
.warm .tl li::before{box-shadow:0 0 0 4px var(--paper-2)}
.dark .tl li::before{box-shadow:0 0 0 4px var(--ink)}
.tl .yr{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--accent-deep)}
.dark .tl .yr{color:var(--accent)}
.tl h3{font-size:1.1rem; margin-top:7px}
.tl p{font-size:15.3px; line-height:1.66; margin-top:8px; color:var(--on-light-mute)}
.dark .tl p{color:var(--on-dark-mute)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line-l); border-radius:14px}
.dark .tbl-wrap{border-color:var(--line-d)}
.tbl{min-width:640px; font-size:15px}
.tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; text-align:left;
  padding:16px 18px; color:var(--on-light-mute); border-bottom:1px solid var(--line-l); font-weight:500; background:var(--paper-2); white-space:nowrap}
.dark .tbl th{color:var(--on-dark-mute); border-bottom-color:var(--line-d); background:var(--ink-3)}
.tbl td{padding:16px 18px; border-bottom:1px solid var(--line-l); vertical-align:top}
.dark .tbl td{border-bottom-color:var(--line-d)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .2s var(--ease)}
.tbl tbody tr:hover{background:var(--paper-2)}
.dark .tbl tbody tr:hover{background:var(--ink-3)}
.tbl .co{font-weight:600}
.tbl .sub{display:block; font-size:13.3px; color:var(--on-light-mute); margin-top:3px}
.dark .tbl .sub{color:var(--on-dark-mute)}

/* ---------- filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-l);
  border-radius:999px; padding:8px 15px; cursor:pointer; transition:.25s var(--ease); color:var(--on-light-mute); background:var(--paper)}
.chip:hover{border-color:var(--ink); color:var(--on-light)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.dark .chip{border-color:var(--line-d); color:var(--on-dark-mute); background:transparent}
.dark .chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#1a1204}

/* ---------- events ---------- */
.evt{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:26px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line-l)}
.dark .evt{border-bottom-color:var(--line-d)}
.evt:first-child{border-top:1px solid var(--line-l)}
.dark .evt:first-child{border-top-color:var(--line-d)}
.evt .date{font-family:var(--mono); text-align:center; border:1px solid var(--line-l); border-radius:11px; padding:12px 8px}
.dark .evt .date{border-color:var(--line-d)}
.evt .date .m{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep)}
.dark .evt .date .m{color:var(--accent)}
.evt .date .d{font-family:var(--disp); font-size:1.85rem; font-weight:700; line-height:1.05; margin-top:2px}
.evt h3{font-size:1.16rem}
.evt .meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-light-mute); margin-top:9px; display:flex; flex-wrap:wrap; gap:14px}
.dark .evt .meta{color:var(--on-dark-mute)}
.evt p{font-size:15.2px; line-height:1.65; margin-top:10px; color:var(--on-light-mute); max-width:64ch}
.dark .evt p{color:var(--on-dark-mute)}
@media (max-width:760px){ .evt{grid-template-columns:88px minmax(0,1fr); gap:18px} .evt > .act{grid-column:1/-1} }

/* ---------- jobs ---------- */
.job{display:block; border:1px solid var(--line-l); border-radius:14px; padding:26px 26px 28px; transition:.3s var(--ease); background:var(--paper)}
.job:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:0 20px 44px -28px rgba(8,13,22,.5)}
.job h3{font-size:1.22rem}
.job .meta{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px}
.job p{font-size:15.2px; line-height:1.65; margin-top:14px; color:var(--on-light-mute)}
.job .more{margin-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); display:inline-flex; gap:8px}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.gal .figure{cursor:zoom-in}
.gal .s3{grid-column:span 3} .gal .s4{grid-column:span 4} .gal .s5{grid-column:span 5}
.gal .s6{grid-column:span 6} .gal .s7{grid-column:span 7} .gal .s8{grid-column:span 8} .gal .s12{grid-column:span 12}
@media (max-width:900px){ .gal{grid-template-columns:repeat(2,1fr)} .gal .figure{grid-column:span 1 !important; aspect-ratio:4/3 !important} }
@media (max-width:560px){ .gal{grid-template-columns:1fr} }
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(8,13,22,.96); display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,60px)}
.lightbox.on{display:flex}
.lightbox img{max-width:100%; max-height:82vh; border-radius:10px; object-fit:contain}
.lightbox .cap{position:absolute; left:0; right:0; bottom:26px; text-align:center; color:rgba(255,255,255,.8); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.lightbox button{position:absolute; color:#fff; width:52px; height:52px; border-radius:50%; border:1px solid var(--line-d); display:grid; place-items:center; transition:.25s var(--ease)}
.lightbox button:hover{background:rgba(255,255,255,.12)}
.lb-close{top:22px; right:22px}
.lb-prev{left:18px; top:50%; transform:translateY(-50%)}
.lb-next{right:18px; top:50%; transform:translateY(-50%)}
.lightbox svg{width:20px; height:20px}

/* ---------- forms ---------- */
.form-card{background:var(--paper); border:1px solid var(--line-l); border-radius:16px; padding:clamp(24px,3.2vw,36px); box-shadow:0 26px 60px -40px rgba(8,13,22,.5)}
.dark .form-card{background:var(--ink-2); border-color:var(--line-d); box-shadow:none}
.form-card h3{font-size:1.26rem}
.form-card .hint{font-size:14.3px; margin-top:8px; color:var(--on-light-mute)}
.dark .form-card .hint{color:var(--on-dark-mute)}
form{display:grid; gap:16px; margin-top:24px}
.field{display:grid; gap:7px}
.field.two{grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .field.two{grid-template-columns:1fr} }
label{font-size:12px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; font-family:var(--mono); color:var(--on-light-mute)}
.dark label{color:var(--on-dark-mute)}
label .rq{color:var(--accent)}
input,textarea,select{width:100%; font:inherit; font-size:15px; font-family:var(--sans); border-radius:10px; padding:13px 15px;
  border:1px solid var(--line-l); background:var(--paper-2); color:var(--on-light);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.dark input,.dark textarea,.dark select{background:rgba(255,255,255,.05); border-color:var(--line-d); color:#fff}
textarea{min-height:104px; resize:vertical; line-height:1.6}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,161,58,.22)}
input::placeholder,textarea::placeholder{color:var(--on-light-mute); opacity:.72}
.dark input::placeholder,.dark textarea::placeholder{color:rgba(255,255,255,.38)}
.dark select option{background:var(--ink-2); color:#fff}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{font-size:12.4px; line-height:1.55; color:var(--on-light-mute)}
.dark .consent{color:var(--on-dark-mute)}
.form-msg{display:none; margin-top:16px; font-size:15px; line-height:1.6; border-radius:11px; padding:18px 20px}
.form-msg.ok{display:block; border:1px solid var(--accent); background:rgba(232,161,58,.12)}
.form-msg.err{display:block; border:1px solid var(--line-l)}
.dark .form-msg.err{border-color:var(--line-d)}
.form-msg a{color:var(--accent-deep); text-decoration:underline}
.dark .form-msg a{color:var(--accent)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-l)}
.dark .faq{border-top-color:var(--line-d)}
.faq details{border-bottom:1px solid var(--line-l)}
.dark .faq details{border-bottom-color:var(--line-d)}
.faq summary{list-style:none; cursor:pointer; padding:23px 0; display:flex; gap:20px; align-items:flex-start;
  font-family:var(--disp); font-weight:700; font-size:clamp(1rem,1.6vw,1.18rem); letter-spacing:-.018em; transition:color .25s var(--ease)}
.faq summary:hover{color:var(--accent-deep)}
.dark .faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{margin-left:auto; flex:none; width:20px; height:20px; position:relative; margin-top:3px}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:var(--accent-deep); transition:transform .3s var(--ease), opacity .3s var(--ease)}
.dark .faq summary .pm::before,.dark .faq summary .pm::after{background:var(--accent)}
.faq summary .pm::before{left:0; top:9.5px; width:20px; height:1.5px}
.faq summary .pm::after{left:9.5px; top:0; width:1.5px; height:20px}
.faq details[open] summary .pm::after{transform:scaleY(0); opacity:0}
.faq .ans{padding:0 0 26px; max-width:72ch; font-size:15.8px; line-height:1.72; color:var(--on-light-mute)}
.dark .faq .ans{color:var(--on-dark-mute)}
.faq .ans a{color:var(--accent-deep); text-decoration:underline}
.dark .faq .ans a{color:var(--accent)}

/* ---------- callout ---------- */
.callout{border-left:2px solid var(--accent); padding:6px 0 6px 24px}
.callout h3{font-size:1.1rem}
.callout p{margin-top:11px; font-size:15.5px; line-height:1.7; color:var(--on-light-mute); max-width:60ch}
.dark .callout p{color:var(--on-dark-mute)}

/* ---------- final cta ---------- */
.final{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); text-align:center; color:#fff}
.final-bg{position:absolute; inset:0; z-index:0}
.final-bg img{width:100%; height:100%; object-fit:cover; opacity:.42}
.final::after{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(90% 90% at 50% 50%, rgba(8,13,22,.72), rgba(8,13,22,.96))}
.final-in{position:relative; z-index:2}
.final h2{margin-inline:auto; max-width:18ch}
.final .lede{margin:22px auto 0; color:rgba(255,255,255,.85)}
.final .cta-row{justify-content:center; margin-top:36px}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--on-dark); border-top:1px solid var(--line-d); padding-block:64px 40px}
.foot{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:32px}
@media (max-width:1000px){ .foot{grid-template-columns:1fr 1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:640px){ .foot{grid-template-columns:1fr 1fr} }
footer h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-mute); margin-bottom:16px; font-weight:500}
footer li{margin-bottom:10px; font-size:14.4px; color:var(--on-dark-mute)}
footer a:hover{color:var(--accent)}
.foot-brand p{color:var(--on-dark-mute); font-size:14.6px; margin-top:16px; max-width:34ch; line-height:1.65}
.foot-brand address{font-style:normal; margin-top:18px; font-size:14.4px; color:var(--on-dark-mute); line-height:1.7}
.foot-bottom{margin-top:48px; padding-top:22px; border-top:1px solid var(--line-d); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:13px; color:var(--on-dark-mute)}
.foot-bottom .mono{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase}
.foot-legal{display:flex; gap:18px; flex-wrap:wrap}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
/* clip lives on the inner <picture>: an element clipped to zero height has a zero
   intersection rect, so the observer would never fire on .rv-img itself */
.rv-img > picture{display:block; width:100%; height:100%; clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease)}
.rv-img.in > picture{clip-path:inset(0 0 0 0)}
.rv-img figcaption{opacity:0; transition:opacity .55s var(--ease) .3s}
.rv-img.in figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .rv-img > picture{clip-path:none}
  .rv-img figcaption{opacity:1}
}

/* ---------- home hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:-6% 0 0; z-index:0; will-change:transform}
.hero-media img{width:100%; height:112%; object-fit:cover; object-position:center 32%; animation:kb 26s var(--ease) forwards}
@keyframes kb{from{transform:scale(1.1)} to{transform:scale(1)}}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(80% 62% at 22% 78%, rgba(8,13,22,.9) 0%, rgba(8,13,22,.55) 45%, transparent 78%),
    linear-gradient(100deg, rgba(8,13,22,.78) 0%, rgba(8,13,22,.5) 38%, rgba(8,13,22,.12) 68%, rgba(8,13,22,.4) 100%),
    linear-gradient(to bottom, rgba(8,13,22,.72) 0%, rgba(8,13,22,.1) 28%, rgba(8,13,22,.3) 58%, rgba(8,13,22,.9) 100%)}
.hero-in{position:relative; z-index:2; width:100%; padding-block:clamp(48px,9vh,110px) clamp(40px,7vh,72px)}
.hero h1{color:#fff; max-width:15ch; margin-top:22px; text-shadow:0 2px 40px rgba(8,13,22,.85), 0 1px 4px rgba(8,13,22,.55)}
.hero h1 .amber{color:var(--accent)}
.hero-sub{color:rgba(255,255,255,.9); margin-top:24px; max-width:52ch; font-size:clamp(1.02rem,1.6vw,1.28rem);
  line-height:1.55; text-shadow:0 1px 24px rgba(8,13,22,.9)}
.hero .cta-row{margin-top:36px}
.hero-badge{display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.9); background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 18px; backdrop-filter:blur(8px)}
.hero-badge b{color:var(--accent); font-weight:500}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55);
  display:flex; flex-direction:column; align-items:center; gap:9px}
.scroll-cue::after{content:""; width:1px; height:36px; background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.3);transform-origin:top}40%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}
@media (max-width:640px){ .scroll-cue{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-media img{animation:none} }

/* rule section over a photo */
.rulebg{position:absolute; inset:0; z-index:0}
.rulebg img{width:100%; height:100%; object-fit:cover; opacity:.32}
.rulescrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(8,13,22,.97) 30%, rgba(8,13,22,.55) 100%)}