/* =============================================================
   Myles Holman — Portfolio
   Shared design system. Used across all pages.
   ============================================================= */

:root{
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --paper:#f3efe7;
  --paper-2:#ebe5d9;
  --mute:#6b6660;
  --rule:rgba(10,10,10,.12);
  --rule-soft:rgba(10,10,10,.06);
  --accent:#ff002e;
  --accent-2:#f5d44a;
  --serif:"Zodiak",ui-serif,Georgia,serif;
  --sans:"Author",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1480px;
  --gutter:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;overflow-x:clip}
body{
  background-image:
    radial-gradient(1200px 600px at 110% -10%,rgba(255,0,46,.05),transparent 60%),
    radial-gradient(1000px 600px at -10% 30%,rgba(245,212,74,.08),transparent 60%);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--paper)}

/* ---------- Heading weight normaliser (Zodiak variable: titles 600, ledes 500 — true weights) ---------- */
h1,h2,h3,h4,h5,h6{font-weight:600;font-style:normal}
.section__title,.case-hero__title,.case-section__title,.case-next__title,
.about-hero__title,.cta__title,.arch-era__year,.arch-era__title,.case__name,
.case-section__num,.foot__sig,.case__title{font-weight:600!important}
.lede,.case-pull,.case-hero__lede,.quote__body{font-weight:500!important}
.section__title .italic,.case-hero__title .italic,.case-section__title .italic,
.case-next__title .italic,.about-hero__title .italic,.cta__title .italic,
.arch-era__year .italic,.arch-era__title .italic,.case__name .italic,
.italic{font-style:italic;font-weight:600}
.case-pull em{font-style:italic;font-weight:500}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.rule{height:1px;background:var(--rule);width:100%}
.rule-soft{height:1px;background:var(--rule-soft);width:100%}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-80{margin-top:80px}.mt-120{margin-top:120px}
.pt-0{padding-top:0!important}

/* ---------- Type ---------- */
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.display{font-family:var(--serif);font-weight:600;line-height:.92;letter-spacing:-.02em}
.italic{font-style:italic}
.kicker{font:500 13px/1.3 var(--sans);letter-spacing:.02em;color:var(--ink)}
.lede{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.body{font-size:17px;line-height:1.6;color:var(--ink)}
.body p+p{margin-top:18px}
.body em{font-style:italic;color:var(--accent)}
.mute{color:var(--mute)}
.accent{color:var(--accent)}
.handwrite{font-family:var(--serif);font-style:italic;color:var(--accent)}
.dot-divider{display:inline-block;width:4px;height:4px;background:var(--ink);border-radius:50%;margin:0 12px;vertical-align:middle}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:rgba(243,239,231,.78);border-bottom:1px solid var(--rule-soft)}
.nav__inner{display:flex;align-items:center;padding:16px var(--gutter);max-width:var(--maxw);margin:0 auto;gap:0}
.brand{display:flex;align-items:center;gap:2px;font:600 14px/1 var(--sans);letter-spacing:.01em;opacity:0;pointer-events:none;max-width:0;overflow:hidden;transition:opacity .45s var(--ease),max-width .45s var(--ease)}
.nav.is-scrolled .brand{opacity:1;pointer-events:auto;max-width:240px}
.brand__wordmark{display:block;height:32px;width:auto}
.brand__leaf{display:inline-block;font-size:24px;line-height:1;transform-origin:50% 92%;animation:leaf-sway 4.8s var(--ease) infinite}
.brand:hover .brand__leaf{animation-duration:1.8s}
@keyframes leaf-sway{0%,100%{transform:rotate(-4deg) scale(1)}25%{transform:rotate(3deg) scale(1.04)}50%{transform:rotate(7deg) scale(1)}75%{transform:rotate(-1deg) scale(1.02)}}

/* legacy two-column hero scaffolding kept available but suppressed; superseded by .hero__composition */
/* Links sit left-flush at rest; on scroll, brand expands beside them and ctas push right via margin-left:auto, which centres the links visually */
.nav__links{display:flex;gap:32px;font:500 16px/1 var(--sans);color:var(--ink);margin-left:24px;margin-right:auto;transition:font-size .3s var(--ease),gap .3s var(--ease),margin .45s var(--ease)}
.nav.is-scrolled .nav__links{font-size:13px;gap:28px;margin-left:48px}
.nav__links a{position:relative;padding:6px 2px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__ctas{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav__cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border:1px solid var(--ink);border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:.005em;transition:all .3s var(--ease),padding .3s var(--ease),font-size .3s var(--ease);white-space:nowrap}
.nav.is-scrolled .nav__cta{padding:10px 16px;font-size:13px}
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.nav__cta--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nav__cta--ghost{background:transparent;color:var(--ink)}
.nav__cta--ghost:hover{background:var(--ink);color:var(--paper)}
.nav__cta svg{width:14px;height:14px;flex-shrink:0}
.nav__cta .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:1040px){.nav__links{display:none}}
@media(max-width:720px){.nav__cta--ghost{display:none}}

/* ---------- Cursor ---------- */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s var(--ease),background .25s var(--ease),width .25s var(--ease),height .25s var(--ease)}
.cursor.is-hover{width:48px;height:48px;background:rgba(255,0,46,.16);border:1px solid var(--accent)}
@media(hover:none){.cursor{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:999px;font:500 14px/1 var(--sans);border:1px solid var(--ink);transition:all .35s var(--ease)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:12px 20px;font-size:13px}

/* ---------- Button FX (hover magic) ---------- */
.fx-btn{--fx-sweep:var(--accent);position:relative;overflow:hidden;isolation:isolate}
.fx-btn::before{content:"";position:absolute;inset:0;background:var(--fx-sweep);transform:translateX(-101%);transition:transform .55s cubic-bezier(.65,0,.35,1);z-index:-1}
.fx-btn:hover::before{transform:translateX(0)}
.fx-label{position:relative;display:inline-block;overflow:hidden;line-height:1.05;vertical-align:middle}
.fx-label > span{display:inline-block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.fx-label > span::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap}
.fx-btn:hover .fx-label > span{transform:translateY(-105%)}
.fx-arrow{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;overflow:hidden;flex-shrink:0}
.fx-arrow > *{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.fx-arrow > *:nth-child(2){transform:translateX(-130%)}
.fx-btn:hover .fx-arrow > *:first-child{transform:translateX(130%)}
.fx-btn:hover .fx-arrow > *:nth-child(2){transform:translateX(0)}
.case__cta.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--solid.fx-btn:hover{background:var(--ink);border-color:var(--ink)}
.hero__cta.fx-btn{--fx-sweep:var(--ink)}
.hero__cta.fx-btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost.fx-btn{--fx-sweep:var(--ink)}
.btn--ghost.fx-btn:hover{background:transparent}
.hero__cta .fx-arrow{width:1.25em;height:1.25em}

/* ---------- Section header ---------- */
.section{padding:120px 0;position:relative}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark .rule,.section--dark .rule-soft{background:rgba(243,239,231,.14)}
.section--dark .eyebrow{color:rgba(243,239,231,.55)}
.section--dark .mute{color:rgba(243,239,231,.7)}
.section__head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:end;margin-bottom:80px}
@media(max-width:900px){.section__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}
.section__title{font-family:var(--serif);font-size:clamp(34px,4vw,56px);line-height:1.12;letter-spacing:-.02em;padding-bottom:.06em}
.section__title .italic{font-style:italic;color:var(--accent)}
.section__intro{font-size:18px;line-height:1.5;color:var(--mute);max-width:54ch}
.section--dark .section__intro{color:rgba(243,239,231,.7)}

/* ---------- Hero (homepage) — see v3 block below ---------- */
@keyframes rise{from{transform:translateY(110%)} to{transform:translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,0,46,.18)} 50%{box-shadow:0 0 0 7px rgba(255,0,46,0)}}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:24px}
.stat__n{font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em}
.stat__l{font:400 11px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* ---------- Marquee strip ---------- */
.strip{
  border-top:1px solid var(--rule);
  border-bottom:0;
  padding:40px 0;
  margin-top:0;
  overflow:hidden;
  background:rgba(10,10,10,.02);
  /* inside .hero: anchored to the bottom of the first-load fold */
  width:100%;
}
.strip__track{
  display:flex;
  gap:clamp(56px, 7vw, 110px);
  width:max-content;
  animation:scroll 50s linear infinite;
  align-items:center;
}
.strip__logo{
  display:block;
  height:clamp(22px, 2.4vh, 34px);
  width:auto;
  flex:none;
  opacity:.72;
  filter:grayscale(1) contrast(1.05);
  transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.strip__logo:hover{opacity:1; filter:grayscale(0) contrast(1)}

/* Optical balance. The marks are height-matched, which is not the same as weight-matched:
   measured ink mass per unit height runs Deloitte 100, Oracle 78, Globant 65 against
   Chainalysis 34, eBay 15, Yogen Fruz 14 — so the three heavy wordmarks shouted over the
   rest, and Oracle is 191px wide against eBay's 65px. Height and opacity are tuned per mark
   to bring the row into one band instead of equalising the boxes. */
.strip__logo[alt="Deloitte"]        {height:clamp(19px,2.06vh,29px);opacity:.42}
.strip__logo[alt="Oracle"]          {height:clamp(19px,2.06vh,29px);opacity:.48}
.strip__logo[alt="Globant"]         {height:clamp(21px,2.26vh,32px);opacity:.54}
.strip__logo[alt="Vistaprint"]      {opacity:.76}
.strip__logo[alt="Sun Microsystems"]{height:clamp(23px,2.54vh,36px);opacity:.82}
.strip__logo[alt="eBay"]            {height:clamp(24px,2.64vh,37px);opacity:.86}
.strip__logo[alt="Yogen Früz"]      {height:clamp(24px,2.60vh,37px);opacity:.90}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Work cards (homepage) ---------- */
.work{display:grid;gap:80px}
.case{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.case:nth-child(even){grid-template-columns:7fr 5fr}
.case:nth-child(even) .case__copy{order:2}
@media(max-width:900px){.case,.case:nth-child(even){grid-template-columns:1fr}.case:nth-child(even) .case__copy{order:0}}
.case__num{font:400 12px/1 var(--mono);letter-spacing:.15em;color:var(--mute)}
.case__sector{margin-top:24px;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.case__name{font-family:var(--serif);font-size:clamp(40px,4.8vw,72px);line-height:1.14;letter-spacing:-.02em;margin-top:12px;padding-bottom:.06em}
.case__name .italic{font-style:italic}
.case__desc{font-size:17px;line-height:1.55;margin-top:20px;color:var(--mute);max-width:48ch}
.case__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tag{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink)}
.case__cta{margin-top:32px;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:500 14px/1 var(--sans);transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),gap .35s var(--ease),transform .35s var(--ease)}
.case__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);gap:18px;transform:translateY(-1px)}
.case__visual{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(0,0,0,.03),0 30px 60px -30px rgba(0,0,0,.18);transition:transform .6s var(--ease)}
.case__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(10,10,10,.04));pointer-events:none;z-index:1}
.case__visual svg{position:absolute;inset:0;width:100%;height:100%}
.viz-bg{position:absolute;inset:0}
@media (hover:none){.case__thumb{opacity:.92;transform:none}}
@media (max-width:900px){.case__thumb{width:57%;right:14px;bottom:14px}}

/* ---------- Timeline ---------- */
.timeline{margin-top:24px;position:relative;padding:48px 0}
.timeline__rail{height:1px;background:var(--rule);position:relative}
.timeline__scroll{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:32px 0 16px;scrollbar-width:none}
.timeline__scroll::-webkit-scrollbar{display:none}
.t-item{min-width:280px;max-width:320px;scroll-snap-align:start;position:relative;padding-top:32px}
.t-item::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:50%}
.t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.t-year{font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--mute);text-transform:uppercase}
.t-title{font-family:var(--serif);font-size:32px;line-height:1.05;letter-spacing:-.01em;margin-top:10px}
.t-role{font-size:13px;color:var(--mute);margin-top:8px}
.t-note{font-size:14px;line-height:1.5;margin-top:14px;color:var(--ink)}
.section--dark .t-item::before{background:var(--ink);border-color:var(--paper)}
.section--dark .t-item.is-accent::before{background:var(--accent);border-color:var(--accent)}
.section--dark .t-role{color:rgba(243,239,231,.55)}
.section--dark .t-note{color:rgba(243,239,231,.85)}

/* ---------- Capabilities / Cards grid ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.caps{grid-template-columns:1fr}}
.cap{border:1px solid var(--rule);border-radius:16px;padding:32px;background:rgba(255,255,255,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cap:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
details.cap{padding:0}
details.cap > summary{padding:32px;list-style:none;cursor:pointer;display:block;outline:none}
details.cap > summary::-webkit-details-marker{display:none}
details.cap > summary::marker{display:none}
.cap__icon{width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin-bottom:24px}
.cap__title{font-family:var(--serif);font-size:32px;line-height:1.05;margin-bottom:12px}
.cap__desc{color:var(--mute);font-size:15px;line-height:1.55;margin-bottom:32px}
.cap__cue{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:7px 12px 7px 14px;border-radius:999px;background:rgba(255,0,46,.08);color:var(--accent);transition:background .25s var(--ease)}
.cap__cue-label{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.cap__cue svg{transition:transform .35s var(--ease)}
details.cap[open] .cap__cue{background:rgba(255,0,46,.15)}
details.cap[open] .cap__cue svg{transform:rotate(180deg)}
details.cap[open] > summary .cap__cue span::after{content:" closed";display:none}
.cap__list{margin:0 32px 32px;padding-top:24px;border-top:1px solid var(--rule);display:grid;gap:6px;font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);cursor:pointer}
.cap__list li{list-style:none;display:flex;align-items:center;gap:10px}
.cap__list li::before{content:"";width:14px;height:1px;background:var(--accent)}
.section--dark .cap{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.section--dark .cap__icon{background:var(--accent);color:var(--ink)}
.section--dark .cap__desc{color:rgba(243,239,231,.7)}
.section--dark .cap__list{color:rgba(243,239,231,.9)}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:40px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);position:relative}
.quote__mark{position:absolute;top:24px;right:32px;font-family:var(--serif);font-size:80px;line-height:1;color:var(--accent);opacity:.4}
.quote__body{font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.quote__by{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);flex-wrap:wrap;gap:12px}
.quote__who{display:flex;flex-direction:column;gap:2px}
.quote__name{font:600 14px/1 var(--sans)}
.quote__role{font:400 13px/1.3 var(--mono);color:var(--mute);letter-spacing:.02em}

/* ---------- Numbers band ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(243,239,231,.14);border-bottom:1px solid rgba(243,239,231,.14);padding:64px 0}
@media(max-width:900px){.numbers{grid-template-columns:repeat(2,1fr)}}
.num__n{font-family:var(--serif);font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.02em;color:var(--paper)}
.num__n .accent{color:var(--accent)}
.num__l{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.55);margin-top:12px;max-width:24ch}

/* ---------- Roster table ---------- */
.now{border-top:1px solid var(--rule)}
.now__row{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.now__y{grid-column:span 2;font:400 12px/1.4 var(--mono);color:var(--mute);letter-spacing:.1em}
.now__r{grid-column:span 4;font-size:15px}
.now__s{grid-column:span 3;font-size:15px;color:var(--mute)}
.now__c{grid-column:span 3;font-family:var(--serif);font-size:22px;letter-spacing:-.01em}
.now__c.is-current::after{content:"●";color:var(--accent);font-size:10px;vertical-align:middle;margin-left:10px}
@media(max-width:900px){
  .now__y,.now__r,.now__s,.now__c{grid-column:span 12;padding:6px 0}
  .now__row > *{border:0}
  .now__row{display:grid;grid-template-columns:repeat(12,1fr);padding:18px 0;border-bottom:1px solid var(--rule)}
  .now__y{grid-column:span 12}
  .now__r{grid-column:span 8}
  .now__s{grid-column:span 4;text-align:right}
  .now__c{grid-column:span 12;margin-top:6px}
}

/* ---------- CTA panel ---------- */
.cta{padding:140px 0;text-align:left;position:relative}
.cta__title{font-family:var(--serif);font-size:clamp(44px,6.4vw,104px);line-height:1.14;letter-spacing:-.025em;max-width:18ch;padding-bottom:.06em}
.cta__title .italic{font-style:italic;color:var(--accent)}
.cta__row{display:flex;gap:24px;align-items:center;margin-top:48px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.foot{padding:64px 0 32px;border-top:1px solid var(--rule)}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__col h5{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.foot__col a,.foot__col p{display:block;font-size:14px;line-height:1.7;color:var(--ink)}
.foot__col a:hover{color:var(--accent)}
.foot__bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font:400 12px/1 var(--mono);color:var(--mute);letter-spacing:.05em;gap:16px;flex-wrap:wrap}
.foot__sig{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.02em;font-style:italic}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.06s}
.reveal.delay-2{transition-delay:.12s}
.reveal.delay-3{transition-delay:.18s}
.reveal.delay-4{transition-delay:.24s}

/* =============================================================
   Case study page styles
   ============================================================= */
.case-hero{padding:160px 0 80px;position:relative}
.case-hero__meta{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:48px;font-size:13px;color:var(--mute)}
.case-hero__meta b{color:var(--ink);font-weight:600;margin-right:8px}
.case-hero__sector{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:24px;display:block}
.case-hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:1.14;letter-spacing:-.025em;max-width:20ch;padding-bottom:.06em}
.case-hero__title .italic{font-style:italic;color:var(--accent)}
.case-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.25;letter-spacing:-.005em;max-width:60ch;margin-top:48px;color:var(--ink)}
.case-hero__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px;padding-top:32px;border-top:1px solid var(--rule)}
@media(max-width:900px){.case-hero__facts{grid-template-columns:repeat(2,1fr)}}
.fact h6{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.fact p{font-size:15px;line-height:1.5}
.fact .accent{color:var(--accent);font-weight:500}

.case-hero__visual{margin-top:96px;border-radius:16px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--rule);background:var(--paper-2);position:relative;box-shadow:0 1px 0 rgba(0,0,0,.03),0 60px 100px -40px rgba(0,0,0,.25)}
.case-hero__visual svg{position:absolute;inset:0;width:100%;height:100%}

.case-section{padding:96px 0}
.case-section__head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:baseline;margin-bottom:48px}
@media(max-width:700px){.case-section__head{grid-template-columns:1fr;gap:16px}}
.case-section__num{font-family:var(--serif);font-size:clamp(48px,5vw,80px);line-height:1.1;letter-spacing:-.02em;color:var(--accent);font-style:italic;padding-bottom:.05em}
.case-section__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-section__intro{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.3;color:var(--ink);max-width:54ch;margin-top:24px}

.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;margin-top:48px}
@media(max-width:700px){.case-grid{grid-template-columns:1fr;gap:32px}}
.case-grid h4{font-family:var(--serif);font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.case-grid p{font-size:16px;line-height:1.6;color:var(--mute)}

.case-pull{padding:48px;margin:64px 0;border-left:2px solid var(--accent);font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.01em}
.case-pull cite{display:block;margin-top:16px;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-weight:500}

.case-vis{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--rule);background:var(--paper-2);margin-top:48px;box-shadow:0 30px 60px -30px rgba(0,0,0,.2)}
.case-vis svg{position:absolute;inset:0;width:100%;height:100%}
.case-vis__caption{margin-top:14px;font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:64px 0;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.case-stats{grid-template-columns:repeat(2,1fr)}}
.case-stats .n{font-family:var(--serif);font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em}
.case-stats .n .accent{color:var(--accent)}
.case-stats .l{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:8px;max-width:24ch}

.case-next{padding:120px 0;border-top:1px solid var(--rule)}
.case-next__row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
@media(max-width:700px){.case-next__row{grid-template-columns:1fr}}
.case-next__label{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.case-next__title{font-family:var(--serif);font-size:clamp(40px,4.8vw,68px);line-height:1.14;letter-spacing:-.02em;padding-bottom:.06em}
.case-next__title:hover .arrow{margin-left:20px}
.case-next__title .arrow{display:inline-block;margin-left:8px;transition:margin-left .35s var(--ease)}

/* =============================================================
   Archive page styles
   ============================================================= */
.arch-hero{padding:160px 0 64px}
.arch-hero__sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--accent);margin-bottom:24px}
.arch-hero__intro{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;color:var(--ink);max-width:58ch;margin-top:48px}

.arch-era{padding:96px 0;border-top:1px solid var(--rule);position:relative}
.arch-era:first-of-type{border-top:0}
.arch-era__head{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;margin-bottom:64px}
@media(max-width:900px){.arch-era__head{grid-template-columns:1fr;gap:24px}}
.arch-era__year{font-family:var(--serif);font-size:clamp(56px,7vw,112px);line-height:1.06;letter-spacing:-.03em;color:var(--ink);padding-bottom:.04em}
.arch-era__year .italic{font-style:italic;color:var(--accent)}
.arch-era__years{font:400 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.arch-era__title{font-family:var(--serif);font-size:clamp(32px,3.6vw,52px);line-height:1.14;letter-spacing:-.01em;margin-bottom:24px;padding-bottom:.04em}
.arch-era__body{font-size:17px;line-height:1.6;color:var(--ink);max-width:60ch}
.arch-era__body p+p{margin-top:14px}

.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:900px){.arch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.arch-grid{grid-template-columns:1fr}}
.arch-card{border:1px solid var(--rule);border-radius:12px;padding:24px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.arch-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.arch-card__art{aspect-ratio:4/3;border-radius:8px;overflow:hidden;margin-bottom:20px;background:var(--paper-2);position:relative;border:1px solid var(--rule-soft)}
.arch-card__art svg{position:absolute;inset:0;width:100%;height:100%}
.arch-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.arch-card__tag{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.arch-card__title{font-family:var(--serif);font-size:24px;line-height:1.1;letter-spacing:-.01em}
.arch-card__year{font:400 11px/1 var(--mono);color:var(--mute);margin-top:6px;letter-spacing:.1em}
.arch-card__desc{font-size:14px;line-height:1.55;color:var(--mute);margin-top:12px}

.arch-roster{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.arch-roster{grid-template-columns:repeat(2,1fr)}}
.arch-pill{font:400 12px/1 var(--mono);letter-spacing:.06em;padding:14px 16px;border:1px solid var(--rule);border-radius:999px;color:var(--ink);background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:space-between;gap:8px;text-transform:uppercase}
.arch-pill span{color:var(--mute);font-size:10px;letter-spacing:.14em}

.arch-counter{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;padding:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(max-width:900px){.arch-counter{grid-template-columns:repeat(2,1fr)}}
.arch-counter .n{font-family:var(--serif);font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-.02em}
.arch-counter .n .accent{color:var(--accent)}
.arch-counter .l{font:400 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:10px}

/* =============================================================
   About + Contact page styles
   ============================================================= */
.about-hero{padding:160px 0 64px}
.about-hero__title{font-family:var(--serif);font-weight:600!important;font-size:clamp(40px,5.4vw,88px);line-height:1.14;letter-spacing:-.022em;max-width:20ch;padding-bottom:.06em}
.about-hero__title .italic{font-weight:600!important}
.about-hero__title .italic{font-style:italic;color:var(--accent)}
.about-hero__lede{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.3;max-width:60ch;margin-top:40px}

.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;margin-top:clamp(40px,5vh,64px)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-grid h4{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.about-grid p{font-size:17px;line-height:1.65;margin-bottom:18px}
/* pulled up: on a wide display the band between the lede and the stance read as a hole */
.ai-heatmap-section{margin-top:clamp(44px,5vh,68px)}
.ai-heatmap-label{font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:32px}
.ai-heatmap-wrap{display:block;width:100%}
.ai-heatmap{width:100%;height:auto;display:block;overflow:visible}
.ai-heatmap__year{font:400 11px/1 var(--mono);letter-spacing:.1em;fill:rgba(10,10,10,.45);text-anchor:end}
.ai-heatmap__tick{font:400 11px/1 var(--mono);letter-spacing:.18em;fill:rgba(10,10,10,.5)}
.ai-heatmap rect{transition:fill .25s var(--ease)}

/* ---- The stance: three views of one dataset, on one clock (initStanceSweep) ----
   The heatmap sweeps in year order; while it crosses a year, that year's bar rises and
   the cumulative curve is wiped in through it. Every delay is a custom property set
   once in JS, so the whole run is a single class toggle. */
.ai-heatmap.is-armed rect[data-yi]{
  opacity:0;
  transform:scale(.4);
  transform-box:fill-box;
  transform-origin:center;
}
.ai-heatmap.is-armed.is-in rect[data-yi]{
  opacity:1;
  transform:none;
  transition:opacity .4s var(--ease) var(--d,0ms),
             transform .5s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms);
}
/* the <=700px stance is a separate grid of monthly cells; same sweep, same switch */
.stance.is-armed .stance__cell{opacity:0;transform:scale(.4)}
.stance.is-armed.is-in .stance__cell{
  opacity:1;transform:none;
  transition:opacity .4s var(--ease) var(--d,0ms),
             transform .5s cubic-bezier(.2,.9,.3,1.3) var(--d,0ms);
}

.stance-panels{display:grid;grid-template-columns:2fr 3fr;gap:clamp(32px,4vw,72px);
  margin-top:clamp(40px,6vh,72px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--rule)}
.stance-panel__title{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:0 0 20px}
.stance-panel__svg{display:block;width:100%;height:auto;overflow:visible}
.stance-panel__tick{font:400 11px/1 var(--mono);letter-spacing:.1em;fill:rgba(10,10,10,.45)}

.stance-panels.is-armed .stance-bar__fill{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.stance-panels.is-armed.is-in .stance-bar__fill{transform:none;
  transition:transform var(--t,430ms) cubic-bezier(.45,.2,.55,.85) var(--d,0ms)}   /* near-linear: the bar counts with its row */
.stance-panels.is-armed .stance-wipe{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.stance-panels.is-armed.is-in .stance-wipe{transform:none;transition:transform var(--t,2500ms) linear}
.stance-panels.is-armed .stance-dot circle{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.stance-panels.is-armed.is-in .stance-dot circle{opacity:1;transform:none;
  transition:opacity .2s var(--ease) var(--d,0ms),transform .4s cubic-bezier(.2,.9,.3,1.5) var(--d,0ms)}
.stance-panels.is-armed .stance-panel__tick{opacity:0}
.stance-panels.is-armed.is-in .stance-panel__tick{opacity:1;transition:opacity .5s var(--ease) .2s}

/* linked focus. Only once the run is done: the per-cell delays would otherwise make a
   hover take seconds to answer. */
.ai-heatmap-section.is-done .ai-heatmap rect[data-yi],
.ai-heatmap-section.is-done .stance-bar,
.ai-heatmap-section.is-done .stance-dot circle{transition:opacity .22s var(--ease)}
.ai-heatmap-section.has-year .ai-heatmap rect[data-yi]:not(.is-year),
.ai-heatmap-section.has-year .stance-bar:not(.is-year),
.ai-heatmap-section.has-year .stance-dot:not(.is-year) circle{opacity:.2}
.ai-heatmap-section.has-year .is-year .stance-panel__tick{fill:var(--accent)}
.stance-bar,.stance-dot,.ai-heatmap rect[data-yi]{cursor:crosshair}

@media(max-width:700px){
  .stance-panels{grid-template-columns:1fr;gap:36px}
}
@media (prefers-reduced-motion: reduce){
  .ai-heatmap.is-armed rect[data-yi],.stance.is-armed .stance__cell,
  .stance-panels.is-armed .stance-bar__fill,.stance-panels.is-armed .stance-wipe,
  .stance-panels.is-armed .stance-dot circle,.stance-panels.is-armed .stance-panel__tick{
    opacity:1;transform:none;transition:none!important}
}

/* ---- About: the headline, drawn as a year ruler ----
   One tick a year from 2005. The baseline inks in left to right, turns accent as it
   enters the fintech years, and "fintech" in the headline types one letter per year
   as it does (initAboutRuler). Every delay hangs off --i so the sweep is one class. */
.yr{position:relative;margin-top:clamp(56px,8vh,96px);padding-top:64px;padding-bottom:58px;
  --n:21;--step:105ms;outline:none;cursor:crosshair;touch-action:pan-y}
.yr__track{display:block;position:relative;height:22px}
.yr__base{position:absolute;left:0;bottom:0;height:1px;background:var(--ink);opacity:.55;
  width:calc(var(--a) / var(--n) * 100%);transform:scaleX(0);transform-origin:left}
.yr__base--accent{left:calc(var(--a) / var(--n) * 100%);width:calc((var(--n) - var(--a)) / var(--n) * 100%);
  height:3px;bottom:-1px;background:var(--accent);opacity:1}
.yr__tick{position:absolute;bottom:0;left:calc(var(--i) / var(--n) * 100%);width:1px;height:9px;
  background:var(--ink);opacity:0;transform:scaleY(0);transform-origin:bottom;
  transition:height .25s var(--ease),opacity .25s var(--ease)}
.yr__tick--major{height:18px}
.yr__tick--accent{background:var(--accent)}
.yr__tick.is-on{height:22px;opacity:1!important}
.yr__label{position:absolute;top:calc(100% + 12px);left:calc(var(--i) / var(--n) * 100%);
  transform:translateX(-50%);font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute);opacity:0}
.yr__label--first{transform:none}
.yr__label--now{transform:translateX(-100%);color:var(--accent)}
.yr__note{position:absolute;right:0;top:calc(100% + 34px);font:400 11px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);opacity:0;white-space:nowrap}
.yr__now{position:absolute;right:-4px;bottom:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(255,0,46,.15);opacity:0;
  animation:pulse 2.4s var(--ease) infinite}
/* the flag rides the ruler: the year in the display face, its era in the label face */
.yr__flag{position:absolute;top:0;left:0;display:flex;align-items:baseline;gap:12px;white-space:nowrap;
  pointer-events:none;opacity:0;will-change:transform}
.yr__flag-year{font:italic 600 34px/1 var(--serif);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.yr__flag.is-accent .yr__flag-year{color:var(--accent)}
.yr__flag-era{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.yr:focus-visible .yr__flag-year{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

.yr.is-in .yr__base{transform:none;transition:transform calc(var(--a) * var(--step)) linear}
.yr.is-in .yr__base--accent{transition:transform calc((var(--n) - var(--a)) * var(--step)) linear calc(var(--a) * var(--step))}
.yr.is-in .yr__tick{opacity:.4;transform:none;
  transition:opacity .3s var(--ease) calc(var(--i) * var(--step)),transform .3s var(--ease) calc(var(--i) * var(--step)),height .25s var(--ease)}
.yr.is-in .yr__tick--major{opacity:.7}
.yr.is-in .yr__tick--accent{opacity:1}
.yr.is-in .yr__label{opacity:1;transition:opacity .4s var(--ease) calc(var(--i) * var(--step))}
.yr.is-in .yr__flag{opacity:1;transition:opacity .3s var(--ease)}
.yr.is-in .yr__note,.yr.is-in .yr__now{opacity:1;transition:opacity .5s var(--ease) calc(var(--n) * var(--step))}
@media(max-width:700px){
  .yr{padding-top:52px}
  .yr__flag-year{font-size:26px}
  .yr__label{font-size:10px;letter-spacing:.08em}
}
@media (prefers-reduced-motion: reduce){
  .yr.is-in .yr__base,.yr.is-in .yr__base--accent,.yr.is-in .yr__tick,.yr.is-in .yr__label,
  .yr.is-in .yr__note,.yr.is-in .yr__now{transition:none}
  .yr__now{animation:none}
}

/* ---- The signature, blown up behind the words as texture ----
   The device is lifted from the testimonial on snyx.com: one oversized glyph at a
   few percent ink sitting behind the text, never competing with it. There the glyph
   is an opening quote; here it is the site's own signature, which is the mark this
   page is signed with. Ink not paper, so it reads on the light ground. */
.about-hero{position:relative;overflow:hidden;padding-bottom:40px}
.about-hero > .wrap{position:relative;z-index:1}
.hero-mark{
  position:absolute;
  z-index:0;
  top:50%;
  right:calc(var(--gutter) * -1);
  width:min(58vw,860px);
  transform:translate3d(0,-50%,0);
  color:var(--ink);
  opacity:.055;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.hero-mark svg{display:block;width:100%;height:auto}
@media(max-width:900px){
  .hero-mark{width:min(86vw,560px);right:calc(var(--gutter) * -1.4);opacity:.05}
}


.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
@media(max-width:700px){.contact-form{grid-template-columns:1fr}}
.contact-form .full{grid-column:span 2}
@media(max-width:700px){.contact-form .full{grid-column:span 1}}
.contact-form label{display:block;font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:18px 20px;border:1px solid var(--rule);border-radius:12px;
  background:rgba(255,255,255,.5);font:400 16px/1.4 var(--sans);color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:none;border-color:var(--ink);background:#fff;
}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
@media(max-width:700px){.contact-channels{grid-template-columns:1fr}}
.channel{padding:32px;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.channel:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.channel h5{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.channel a,.channel p{font-family:var(--serif);font-size:24px;line-height:1.15;letter-spacing:-.01em}

/* =============================================================
   Utilities
   ============================================================= */
.dark-bg{background:var(--ink);color:var(--paper)}
.dark-bg .rule{background:rgba(243,239,231,.14)}
.dark-bg .arch-card{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.1)}
.dark-bg .arch-card__desc{color:rgba(243,239,231,.7)}
.dark-bg .arch-card__title,.dark-bg .case-grid h4{color:var(--paper)}
.dark-bg .arch-pill{background:rgba(255,255,255,.04);border-color:rgba(243,239,231,.14);color:rgba(243,239,231,.92)}
.dark-bg .arch-pill span{color:rgba(243,239,231,.5)}

/* ===============================================================
   EDITORIAL HERO COMPOSITION v3 — full-bleed portrait, magazine cover
   =============================================================== */

/* ===========================================================
   HERO — composition mirrors mylesholman.com reference:
     LEFT  : eyebrow, myles wordmark, role label, lede, two text links
     RIGHT : large inked caricature, anchored to the bottom of the fold
   Rebuilt 2026-05-23 (round 3) after studying the live site directly.
   =========================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* wrap takes the full fold via flex:1; strip sits at the bottom of hero */
  overflow:hidden;
  padding:0;
}

.hero__wrap{
  position:relative;
  z-index:2;
  /* clear nav at top, NO bottom padding — portrait anchors to bottom of fold */
  padding-top:clamp(96px,12vh,140px);
  padding-bottom:0;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ---- 2-col grid: intro centred | portrait bottom-anchored, scales to fill ---- */
.hero__grid{
  display:grid;
  /* portrait gets the larger share, like the reference */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(32px,4vw,80px);
  /* per-cell alignment via align-self below; row stretches to fill .hero__wrap */
  align-items:stretch;
  flex:1;
}

/* ---- LEFT: editorial intro column, vertically centred within the row ---- */
.hero__intro{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.2vh,28px);
  /* The hero overflows the fold (portrait is taller than the viewport), so
     centring against the grid row pushes the intro low. Instead, pin the column
     to the visible fold height and centre within that — reads as middle-aligned
     against the on-screen portrait regardless of how tall the figure runs. */
  align-self:start;
  min-height:calc(100svh - clamp(96px,12vh,140px));
  justify-content:center;
}

/* every animated child starts hidden + slightly translated; data-anim drives reveal */
.hero__intro [data-anim]{
  opacity:0;
  transform:translateY(18px);
  animation:hero-reveal 1s var(--ease) forwards;
}
.hero__intro [data-anim="eyebrow"]   {animation-delay:.20s}
.hero__intro [data-anim="mark"]      {animation-delay:.32s}
.hero__intro [data-anim="manifesto"] {animation-delay:.55s}
.hero__intro [data-anim="lede"]      {animation-delay:.85s}
.hero__intro [data-anim="actions"]   {animation-delay:1.05s}

@keyframes hero-reveal{
  to{opacity:1;transform:translateY(0)}
}

/* eyebrow: small mono w/ red tick mark before it */
.hero__eyebrow{
  margin:0;
  padding-bottom:15px;
  display:inline-flex;align-items:center;gap:12px;
  font:400 12px/1 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);
}
.hero__eyebrow-mark{
  width:24px;height:1px;background:var(--accent);
  display:inline-block;
}

/* wordmark — slightly larger than before; entrance scale gives it a snap */
.hero__mark{
  /* flush to the column edge: the 'm' opens on a round stroke, so its ink sits ~2px
     left of the flat stems of 'Designer' and the lede below — the overshoot a curve
     needs to read as aligned. (The old -9px nudge was set while the animated copy was
     centring itself in the column, so it never landed anywhere near the margin.) */
  margin:0;
  padding:6px 0 4px;
}
.hero__mark-img{
  display:block;
  width:clamp(240px, 24vw, 380px);
  height:auto;
  color:var(--ink);
}

/* manifesto: the new editorial statement */
.hero__manifesto{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(36px, 4.4vw, 64px);
  line-height:.98;
  letter-spacing:-.018em;
  color:var(--ink);
}
.hero__manifesto-line{
  display:block;
}
.hero__manifesto-line--tail{
  /* slight optical indent */
  padding-left:.08em;
}
.hero__manifesto em{
  font-style:italic;
  color:var(--accent);
  font-weight:600;
  /* reveal the accent word a beat later than its host line */
  display:inline-block;
  opacity:0;
  animation:fade-up .9s var(--ease) 1s forwards;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* lede */
.hero__lede{
  margin:0;
  max-width:44ch;
  font-family:var(--sans);
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.55;
  color:var(--ink);
}

/* actions: one primary pill + two quieter text links beneath */
.hero__actions{
  display:flex;flex-direction:column;
  gap:18px;
  margin-top:clamp(8px,1vh,16px);
  align-items:flex-start;
}

/* PRIMARY CTA — bold, oxblood, large */
.hero__cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 28px;
  background:var(--accent);color:var(--paper);
  border:1px solid var(--accent);
  border-radius:999px;
  font:500 16px/1 var(--sans);letter-spacing:.005em;
  white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
  box-shadow:0 8px 24px -10px rgba(255,0,46,.4);
  position:relative;
}
.hero__cta:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
  transform:translateY(-1px);
  box-shadow:0 12px 30px -10px rgba(10,10,10,.45);
}
.hero__cta-arrow{
  width:20px;height:20px;
  transition:transform .3s var(--ease);
}
.hero__cta:hover .hero__cta-arrow{transform:translateX(5px)}

/* ---- RIGHT: inked caricature with ink-bleed reveal + breathing + parallax ---- */
.hero__portrait{
  position:relative;
  margin:0;
  margin-right:calc(var(--gutter) * -1);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  /* fill the full grid cell — strip is anchored at the bottom of .hero */
  height:100%;
  align-self:stretch;
  perspective:1200px;
}

/* tilt wrapper — JS sets --tx and --ty in degrees on mousemove */
.hero__portrait-tilt{
  width:100%;height:100%;
  display:flex;align-items:flex-end;justify-content:flex-end;
  transform:rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
  will-change:transform;
}

/* stage — handles the breathing scale loop after entrance */
.hero__portrait-stage{
  height:100%;
  display:flex;align-items:flex-end;justify-content:flex-end;
  animation:portrait-breathe 9s ease-in-out 2.2s infinite;
  transform-origin:50% 90%;
}
@keyframes portrait-breathe{
  0%, 100% {transform:scale(1.000)}
  50%      {transform:scale(1.012)}
}

/* image — ink-bleed mask reveal entrance, then sits */
.hero__portrait-img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:right bottom;
  margin-left:auto;
  /* mask wipe: starts fully clipped from bottom, reveals upward */
  -webkit-mask-image:linear-gradient(to top,
    black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
          mask-image:linear-gradient(to top,
    black 0%, black var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%), transparent 100%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  animation:portrait-ink-bleed 1.8s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
@keyframes portrait-ink-bleed{
  0%   {--reveal: 0%; opacity:0; filter:blur(3px) contrast(.92)}
  25%  {opacity:1}
  100% {--reveal:100%; opacity:1; filter:blur(0) contrast(1)}
}

/* register the custom property so it animates smoothly */
@property --reveal{
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

/* ============================================================
   2026-07 type rebuild — Zodiak (display) / Author (text) /
   Fragment Mono (labels). Plate captions for real product shots.
   ============================================================ */
.case__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s var(--ease)}
.case__visual:hover .case__shot{transform:scale(1.03)}
/* a plate module mounts here and fills the plate box, clipping itself. The blanket
   .case__visual svg rule above already stretches whatever SVG it draws. */
.plate{position:absolute;inset:0;overflow:hidden}
.plate-cap{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:baseline;gap:12px;padding:9px 14px;background:var(--paper);border:1px solid var(--rule);font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);box-shadow:0 10px 24px -12px rgba(10,10,10,.35);max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate-cap__no{color:var(--accent);flex:none}

/* ============================================================
   ACT II — broadsheet layer (2026-07-04, free-rein pass; scale dialled in 2026-09-20)
   Stacked paper case sheets, banner names, ink ledger + marquee,
   CTA + mail line, ink footer, chapter drop caps.

   Type scale is anchored to the 14px nav / 16px body, not to the viewport:
   statements (CTA, ledger thesis) top out around 60px, section titles and case
   banners around 48-54px, stat numbers around 42px. The hero manifesto stays the
   loudest type on the site. The first pass ran 2-3x that and read as shouting.
   ============================================================ */

/* ---- broadsheet scale, site-wide ---- */
.section__title{font-size:clamp(30px,3vw,48px);line-height:1.1;letter-spacing:-.02em}
.cta{padding:clamp(120px,18vh,200px) 0}
.cta__title{font-size:clamp(34px,4vw,64px);line-height:1.06;letter-spacing:-.022em;max-width:none}
.cta__title .italic{white-space:nowrap}
.case-hero__title{font-size:clamp(32px,3.6vw,56px);line-height:1.08;max-width:18ch}
.case-section__num{font-size:clamp(30px,2.8vw,44px)}
.case-next__title{font-size:clamp(30px,3.2vw,50px);line-height:1.1}
.case-stats .n{font-size:clamp(30px,2.8vw,44px)}
.case-pull{font-size:clamp(22px,2vw,32px);line-height:1.2;border-left:3px solid var(--accent)}
.arch-era__year{font-size:clamp(36px,3.6vw,58px);line-height:1.04}
.arch-counter .n{font-size:clamp(28px,2.6vw,42px)}
.about-hero__title{font-size:clamp(32px,3.6vw,56px);line-height:1.08}
.arch-hero__intro,.about-hero__lede{font-size:clamp(19px,1.5vw,24px)}
/* ---- no widows ----
   Running text pulls a word down rather than stranding one on the last line
   ("...research led, AI fluent, end to / end."). Headings that wrap get balanced
   lines instead of a long line and a stub. Both degrade to normal wrapping. */
p,li,figcaption,blockquote,.lede,.case__desc,.case__lede,.case-hero__lede,
.case-section__intro,.about-hero__lede,.arch-hero__intro,.section__intro,
.hero__lede,.foot__col p,.plate-cap,.cap__list li{text-wrap:pretty}
.section__title,.case__name,.case-next__title,.case-section__title,
.arch-era__title,.about-hero__title,.case-hero__title,.quote__body{text-wrap:balance}

/* second rung: ledes and in-page section headings, kept clearly under the titles
   they sit beneath (they had drifted to within a few px of them) */
.case-hero__lede{font-size:clamp(19px,1.6vw,25px);line-height:1.35}
.case-section__title,.arch-era__title{font-size:clamp(26px,2.6vw,40px);line-height:1.16}
.case-section__intro{font-size:clamp(18px,1.4vw,21px);line-height:1.5}

/* chapter drop caps on case-study section intros */
.case-section__intro::first-letter{float:left;font-size:2.9em;line-height:.8;padding:.05em .12em 0 0;font-style:italic;font-weight:600;color:var(--accent)}

/* ---- the case deck: five sheets of paper stacking on scroll ---- */
#cases.section{padding-bottom:0}
.work{display:block}
.case{background:var(--paper);border:1px solid var(--rule);box-shadow:0 -26px 60px -34px rgba(10,10,10,.4);padding:clamp(24px,4vw,64px)}
.case:nth-child(even){background:var(--paper-2)}
.case+.case{margin-top:clamp(48px,8vh,96px)}
/* The name heads its own column rather than banding across the whole sheet: a
   full-width masthead spent a line of card width on two words and left a long
   empty stretch between the name and the docket. Docket over name follows the
   site's own eyebrow-then-title pattern. */
.case__copy>.case__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  margin:0 0 clamp(10px,1.4vh,16px)}
.case__meta .case__sector{margin:0}
.case__copy>.case__name{margin:0 0 clamp(18px,2.9vh,34px);padding:0;
  font-size:clamp(30px,3vw,48px);line-height:1.02;letter-spacing:-.02em}
.case__num{color:var(--accent)}
/* the description carries the sheet opposite a 500px plate, so it is set as a
   standfirst — serif, display-adjacent size, narrow measure — not as 17px UI text.
   Set small it left the column two-thirds empty whatever the alignment. */
.case__desc{color:var(--ink);font-family:var(--serif);font-weight:500;
  font-size:clamp(17px,1.25vw,21px);line-height:1.5;letter-spacing:0;max-width:40ch}
/* air either side of the standfirst — it is the one soft block between two hard ones */
.case__tags{margin-top:clamp(28px,4vh,46px)}
.case__cta{margin-top:clamp(26px,3.4vh,38px)}
.case__copy>.case__desc{margin-top:0}

/* plate and copy both hang off the rule. The base card centres its two columns
   against each other, which on a sheet this tall dropped the copy ~110px below the
   plate; and an auto banner row quietly ate a slice of the sheet's spare height. */
@media(min-width:901px){
  .case{align-items:start}
  /* the copy block is much shorter than the plate beside it, so centre it on the
     plate's height — top-aligning it left a 300px hole under the CTA */
  .case__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%}
}
@media(min-width:901px) and (min-height:640px){
  /* no min-height: the sheet is as tall as its plate, so the copy column is exactly
     the plate's height and the CTA anchors to the plate's bottom edge */
  .case{position:sticky;--deck:clamp(84px,10vh,108px)}
  .case+.case{margin-top:10vh}
  .case:nth-child(1){top:var(--deck);z-index:1}
  .case:nth-child(2){top:calc(var(--deck) + 14px);z-index:2}
  .case:nth-child(3){top:calc(var(--deck) + 28px);z-index:3}
  .case:nth-child(4){top:calc(var(--deck) + 42px);z-index:4}
  .case:nth-child(5){top:calc(var(--deck) + 56px);z-index:5}
  .work{padding-bottom:10vh}
}

/* ---- ink ledger: the record, set in stone ---- */
.ledger{background:var(--ink);color:var(--paper);padding:clamp(96px,14vh,180px) 0 0;margin-top:clamp(80px,12vh,140px);position:relative;z-index:6}
.ledger .eyebrow{color:rgba(243,239,231,.5)}
.ledger__thesis{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.8vw,60px);line-height:1.08;letter-spacing:-.02em;max-width:18ch;margin-top:40px;padding-bottom:.06em}
.ledger__thesis em{font-style:italic;color:var(--accent)}
.ledger__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:clamp(56px,9vh,110px);padding:44px 0 clamp(64px,10vh,120px);border-top:1px solid rgba(243,239,231,.16)}
.ledger__cell .n{font-family:var(--serif);font-weight:600;font-size:clamp(28px,2.6vw,42px);line-height:1;display:block;color:var(--paper)}
.ledger__cell .n i{font-style:italic;color:var(--accent)}
.ledger__cell .l{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.5);display:block;margin-top:14px}
@media(max-width:900px){.ledger__grid{grid-template-columns:1fr 1fr;gap:40px 24px}}

/* type marquee riding the ledger's lower edge */
.tickr{overflow:hidden;border-top:1px solid rgba(243,239,231,.16);padding:18px 0}
.tickr__track{display:inline-flex;align-items:baseline;gap:40px;width:max-content;animation:tickr 30s linear infinite;will-change:transform}
.tickr__track span{font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:rgba(243,239,231,.72)}
.tickr__track b{font:400 12px/1 var(--mono);color:var(--accent)}
@keyframes tickr{to{transform:translateX(-50%)}}

/* ---- giant mail line under the CTA ---- */
.cta__mail{display:inline-block;margin-top:clamp(36px,5vh,56px);font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:.06em;transition:color .3s var(--ease)}
.cta__mail:hover{color:var(--accent)}

/* ---- ink footer: the sign-off ---- */
.foot{background:var(--ink);border-top:none;padding:clamp(72px,11vh,140px) 0 36px;position:relative;z-index:6;color:var(--paper)}
.foot__top{grid-template-columns:3fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.foot__top{grid-template-columns:1fr 1fr}}
.foot__col h5{color:rgba(243,239,231,.4)}
.foot__col a{color:rgba(243,239,231,.75)}
.foot__col a:hover{color:var(--accent)}
.foot .foot__col p{color:rgba(243,239,231,.55)!important}
.foot__sig{font-size:clamp(34px,3.4vw,54px);letter-spacing:-.02em;color:var(--paper);display:block;padding-bottom:.08em}
.foot__bot{border-top-color:rgba(243,239,231,.16);color:rgba(243,239,231,.45)}
.foot__bot .copy-mark{color:var(--accent)}

/* "matter." types itself, letter by letter, with the stop a beat late (js/site.js
   typeAccentWord). Letters keep their layout box and fade in place, so the line never
   reflows; the caret is moved to the measured right edge of the last letter instead. */
.hero__manifesto em,.hero-m__manifesto em{position:relative}
/* !important on display: the mobile hero sets `.hero-m__manifesto span{display:block}`
   to stack its three lines, and that rule is more specific than this one — without the
   override every typed letter becomes its own line. */
.type__ch,.type__caret{display:inline-block!important}
.type__ch{opacity:0}
.type__caret{position:absolute;left:0;top:.16em;width:.05em;height:.74em;
  background:var(--accent);transform:translateX(0);
  transition:transform .085s linear;
  animation:type-blink .85s steps(1,end) infinite}
.type__caret.is-done{animation:none;opacity:0;
  transition:opacity .45s ease .4s,transform .085s linear}
@keyframes type-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* hero manifesto: now set as three short lines — "Designer of" / "things that" /
   "matter." — so the accent word owns a line of its own. The longest line is short
   enough that the intro column stops being the limit and the fold does: the size
   tracks the smaller of width (4.4vw) and fold height (7svh) so the third line and
   the CTA under it never get pushed past the ticker on a shallow window. */
.hero__manifesto{font-size:clamp(30px,min(4.4vw,7svh),68px)}
/* "matter." stands alone on its own line — no leading word to optically indent past */
.hero__manifesto-line--tail{padding-left:0}