/* Dome Ebie portfolio, Variation B2 (problem-led). Plain CSS, no build step. */
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geist-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#f4f0e8;--s1:#fbf9f4;--s2:#eae5da;--line:#d8d1c2;
  --ink:#14130f;--ink2:#4a473f;--mut:#6f6a5e;
  --acc:#e5481f;--accT:#fbe0d6;--dacc:#ff6b3d;
  --violet:#5b3fd6;--violetT:#e7e1fa;--green:#2c7a4b;--greenT:#dceee3;--blue:#1b6aa8;--blueT:#d9e8f4;
  --dmut:#a8a296;--dline:#34322b;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --dur-micro:150ms;--dur-standard:240ms;--dur-reveal:640ms;--stagger:80ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-reveal:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}
em{font-style:italic;color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:8px}

.wrap{padding-inline:var(--pad)}
.section{padding-block:clamp(56px,8vw,96px)}
.eyebrow,.label{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.eyebrow{color:var(--acc)}
.label{font-size:10px;color:var(--mut)}
.display{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em}
.h2{font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.02em;font-family:var(--serif);font-weight:400;max-width:15ch}
.lede{font-size:clamp(16px,1.3vw,19px);color:var(--ink2);line-height:1.55;max-width:60ch}
.head{display:grid;gap:20px;margin-bottom:clamp(32px,5vw,56px)}

/* buttons and chips */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:500;font-size:14px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);transition:background var(--dur-standard) var(--ease-standard),color var(--dur-standard) var(--ease-standard),border-color var(--dur-standard) var(--ease-standard),transform 100ms}
.btn .arr{display:inline-block;width:0;opacity:0;overflow:hidden;transition:width var(--dur-standard) var(--ease-standard),opacity var(--dur-standard) var(--ease-standard),transform var(--dur-standard) var(--ease-standard)}
.btn:hover{background:var(--acc);border-color:var(--acc);color:var(--s1)}
.btn:hover .arr{width:16px;opacity:1;transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn--out{background:transparent;color:var(--ink)}
.btn--out:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--acc{background:var(--acc);border-color:var(--acc);color:var(--s1)}
.btn--acc:hover{background:var(--ink);border-color:var(--ink)}
.btn--dark{background:var(--dacc);border-color:var(--dacc);color:var(--ink)}
.btn--dark:hover{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btn--dout{background:transparent;color:var(--bg);border-color:var(--dline)}
.btn--dout:hover{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);transition:background var(--dur-micro) ease-out,border-color var(--dur-micro) ease-out}
.chip:hover{background:var(--s2);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip--acc{background:var(--accT);color:var(--acc);border-color:transparent}
.chip--violet{background:var(--violetT);color:var(--violet);border-color:transparent}
.chip--green{background:var(--greenT);color:var(--green);border-color:transparent}
.chip--blue{background:var(--blueT);color:var(--blue);border-color:transparent}
.chip--dark{border-color:var(--dline);color:var(--bg)}
.chip--dark:hover{background:var(--dline);border-color:var(--dmut)}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.logo{font-family:var(--serif);font-size:28px}
.nav ul{display:flex;gap:36px;align-items:center}
.nav a.l{font-size:14px;color:var(--ink2);position:relative;padding-bottom:4px;transition:color var(--dur-micro) ease-out}
.nav a.l::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-micro) ease-out}
.nav a.l:hover,.nav a.l[aria-current]{color:var(--ink)}
.nav a.l:hover::after,.nav a.l[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:none;color:var(--ink);cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(32px,6vw,72px) 40px}
.hero .display{font-size:clamp(46px,6.2vw,92px);max-width:13ch;margin-block:24px 32px}
.hero .lede{margin-bottom:32px}
.profile{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:28px}
.profile .name{font-family:var(--serif);font-size:34px;margin-bottom:14px}
.profile dl{margin:0}
.profile .row{border-top:1px solid var(--line);padding:14px 0}
.profile dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.profile dd{margin:0;font-size:15px;font-weight:500}
.problem-tags{padding-bottom:clamp(40px,6vw,72px)}

/* problems */
.problem{display:grid;grid-template-columns:96px minmax(0,1.15fr) minmax(0,1fr) 220px;gap:48px;padding:44px 0;border-top:1px solid var(--line);align-items:start;transition:background var(--dur-standard) var(--ease-standard),padding var(--dur-standard) var(--ease-standard);border-radius:0}
.problem:last-child{border-bottom:1px solid var(--line)}
.problem:hover{background:var(--s1);padding-inline:20px;border-radius:12px;margin-inline:-20px}
.problem .no{font-family:var(--serif);font-style:italic;font-size:64px;color:var(--acc);line-height:1}
.problem h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1.08;letter-spacing:-.01em}
.problem .move p{color:var(--ink2);margin-top:10px;max-width:46ch}
.problem .proof .p-name{font-family:var(--serif);font-size:28px;margin:10px 0}

/* proof band */
.dark{background:var(--ink);color:var(--bg)}
.dark .eyebrow{color:var(--dacc)}
.dark .h2 em{color:var(--dacc)}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.metric .n{font-family:var(--serif);font-size:clamp(52px,5.3vw,76px);line-height:1;letter-spacing:-.02em}
.metric .label{color:var(--dmut);display:block;margin-top:10px}

/* cases */
.cases{display:grid;gap:20px}
.case{display:grid;grid-template-columns:320px 1fr;gap:56px;padding:40px;background:var(--s1);border:1px solid var(--line);border-radius:20px;transition:border-color var(--dur-standard) var(--ease-standard),box-shadow var(--dur-standard) var(--ease-standard),transform var(--dur-standard) var(--ease-standard)}
.case:hover{border-color:var(--ink);box-shadow:0 12px 28px -6px rgba(20,19,15,.14);transform:translateY(-4px)}
.case h3{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.4vw,48px);line-height:1;margin:14px 0 8px}
.case .plat{font-size:14px;color:var(--mut)}
.case .more{display:inline-flex;gap:8px;align-items:center;margin-top:28px;font-weight:500;font-size:14px}
.case .more span{color:var(--acc);transition:transform var(--dur-standard) var(--ease-standard)}
.case:hover .more span{transform:translateX(8px)}
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.story p{font-size:15px;color:var(--ink2);margin-top:10px}

/* method */
.alt{background:var(--s2)}
.moves{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.move-card{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:24px}
.move-card .k{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--acc)}
.move-card h3{font-family:var(--serif);font-weight:400;font-size:36px;margin:12px 0}
.move-card p{font-size:14px;color:var(--ink2)}
.move-card.last{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.move-card.last .k{color:var(--dacc)}.move-card.last p{color:var(--dmut)}
.quote{font-family:var(--serif);font-size:clamp(46px,7.2vw,104px);line-height:.98;letter-spacing:-.02em;margin-top:clamp(40px,6vw,72px);max-width:14ch}

/* domains */
.domains{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{border:1px solid var(--line);border-radius:20px;padding:32px;display:grid;gap:20px;align-content:start}
.box.dark{border-color:var(--ink)}

/* UK */
.uk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uk article{background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:32px;display:grid;gap:16px;align-content:start}
.uk h3{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.04}
.uk p{font-size:15px;color:var(--ink2)}

/* leadership */
.lead{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:72px;align-items:start}
.lead h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.2vw,60px);line-height:1.02;letter-spacing:-.01em;margin-block:24px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stat{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:28px}
.stat .n{font-family:var(--serif);font-size:clamp(56px,6vw,84px);line-height:1;letter-spacing:-.02em;display:block}
.stat .label{display:block;margin-top:10px}
.stat.hi{background:var(--ink);border-color:var(--ink)}.stat.hi .n{color:var(--dacc)}.stat.hi .label{color:var(--dmut)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:72px;margin-bottom:48px}
.about p{font-size:17px;color:var(--ink2);line-height:1.6;max-width:48ch;padding-top:36px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.values div{border:1px solid var(--line);background:var(--s1);border-radius:16px;padding:28px;font-family:var(--serif);font-size:30px;line-height:1.08}
.values div:last-child{background:var(--accT);border-color:transparent}

/* contact */
.contact{padding-block:clamp(64px,9vw,112px)}
.contact .big{font-family:var(--serif);font-style:italic;font-size:clamp(88px,14vw,200px);line-height:.92;letter-spacing:-.03em;margin-block:32px 40px}
.contact .lede{color:var(--dmut);margin-bottom:40px;font-size:clamp(16px,1.5vw,20px)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--dline);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dmut)}

/* reveal (progressive enhancement: only hidden when JS is running) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal);transition-delay:calc(var(--i,0)*var(--stagger))}
.js .rv.in{opacity:1;transform:none}
.js .hero-in{opacity:0;transform:translateY(24px);animation:rise var(--dur-reveal) var(--ease-reveal) forwards;animation-delay:calc(var(--d,0)*1ms)}
@keyframes rise{to{opacity:1;transform:none}}
.js .nav{animation:fade 240ms ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero .display em{animation:warm 400ms ease-out 700ms both}
@keyframes warm{from{color:var(--ink)}to{color:var(--acc)}}

/* responsive */
@media (max-width:1180px){
  .problem{grid-template-columns:72px 1fr 1fr;gap:32px}.problem .proof{grid-column:2/-1}
  .metrics{grid-template-columns:repeat(3,1fr)}
  .moves{grid-template-columns:repeat(3,1fr)}
  .case{grid-template-columns:1fr;gap:28px}
  .lead,.about{grid-template-columns:1fr;gap:32px}.about p{padding-top:0}
}
@media (max-width:900px){
  .nav ul{display:none}.menu-btn{display:inline-block}
  .nav.open ul{display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:20px var(--pad) 28px;border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr}
  .uk,.values,.domains,.story{grid-template-columns:1fr}
}
@media (max-width:640px){
  .problem{grid-template-columns:1fr;gap:16px;padding:28px 0}.problem .proof{grid-column:auto}
  .problem:hover{padding-inline:0;margin-inline:0;background:none}
  .metrics{grid-template-columns:1fr 1fr}.moves{grid-template-columns:1fr}
  .case{padding:24px}.stats{grid-template-columns:1fr 1fr}.stat{padding:20px}
  .box,.uk article{padding:24px}
}
@media (hover:none){.case:hover{transform:none;box-shadow:none}.btn:active,.case:active{transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:120ms!important;animation-duration:120ms!important;animation-delay:0ms!important;transition-delay:0ms!important}
  .js .rv,.js .hero-in{transform:none!important}
  .case:hover,.btn:hover .arr{transform:none!important}
}