/* ===================================================================
   ALTO GARY : concept v3
   Dark cinematic ground · signature gold · smoky violet as support
   =================================================================== */
:root{
  --ink:#0B0D11; --ink-2:#11141A; --ink-3:#171B23; --ink-4:#1E232D;
  --bone:#F2EDE4; --on-bone:#14171C;
  --text:#F5F2EB; --muted:#A9B0BD; --dim:#7E8694;
  --gold:#D9B679; --gold-br:#EDCF98; --gold-dp:#8E7340;
  --lilac:#A79CD4;        /* smoky violet : restrained support accent */
  --violet:#6E62A6;
  --violet-glow:rgba(167,156,212,.16);
  --line:rgba(255,255,255,.09); --line-s:rgba(255,255,255,.17);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1280px; --gut:clamp(1.25rem,4.5vw,4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.gold{color:var(--gold)} .lil{color:var(--lilac)}

/* ---------------------------------------------------------- reveals ----- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------------------------------------------------- chapter rail ------ */
.rail{position:fixed;right:max(1rem,2vw);top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:.95rem;align-items:flex-end}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-height:30px;
  text-decoration:none;opacity:.42;transition:opacity .35s var(--ease)}
.rail a:hover,.rail a.on{opacity:1}
.rail .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:0;transform:translateX(6px);transition:all .35s var(--ease);white-space:nowrap}
.rail a:hover .lbl,.rail a.on .lbl{opacity:1;transform:none}
.rail .tick{width:18px;height:2px;background:var(--muted);border-radius:2px;transition:all .35s var(--ease)}
.rail a.on .tick{width:30px;background:var(--gold)}
@media(max-width:1100px){.rail{display:none}}

/* ---------------------------------------------------------- header ------ */
.hdr{position:fixed;inset:0 0 auto;z-index:70;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(11,13,17,.82);backdrop-filter:saturate(170%) blur(16px);border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.mark{font-family:var(--serif);font-size:1.42rem;text-decoration:none;letter-spacing:.01em}
.mark i{color:var(--gold);font-style:normal}
.nav{margin-left:auto;display:flex;gap:clamp(1rem,2vw,2rem)}
.nav a{font-size:.88rem;color:var(--muted);text-decoration:none;transition:color .25s}
.nav a:hover{color:var(--text)}
.nav-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-s);color:var(--text);
  border-radius:6px;padding:.5rem .8rem;font:inherit;font-size:.85rem;cursor:pointer}
@media(max-width:860px){.nav{display:none}.nav-btn{display:block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:.4rem var(--gut) 1.1rem}
  .nav.open a{padding:.85rem 0;border-top:1px solid var(--line);font-size:1rem;color:var(--text)}}

/* ------------------------------------------------------------- hero ----- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;
  align-items:center;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 26%;
  /* Treated as atmosphere, not a legible photograph: the only available source is
     690x800, too small to carry a full-bleed hero sharply. Blur + heavy darkening
     turn a resolution limit into intentional cinematic depth. */
  filter:grayscale(1) contrast(1.04) brightness(.32) blur(2px);transform:scale(1.14)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 62% at 78% 34%,rgba(217,182,121,.26),transparent 70%),
    radial-gradient(44% 52% at 92% 72%,var(--violet-glow),transparent 72%),
    linear-gradient(94deg,var(--ink) 26%,rgba(11,13,17,.86) 52%,rgba(11,13,17,.30) 100%),
    linear-gradient(0deg,var(--ink) 1%,transparent 38%)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero > .wrap{position:relative;padding-block:clamp(5.2rem,9vh,7.5rem) clamp(1.9rem,4vh,3.2rem)}
.kicker{display:flex;align-items:center;gap:.85rem;margin-bottom:1.7rem}
.kicker .ln{height:1px;width:clamp(26px,4vw,56px);background:var(--gold)}
.hero h1{font-family:var(--serif);font-size:clamp(3rem,8.4vw,7.4rem);line-height:.92;letter-spacing:-.03em;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-lede{margin-top:1.4rem;font-size:clamp(1.12rem,1.9vw,1.55rem);line-height:1.4;max-width:34ch;color:var(--text)}
.hero-sub{margin-top:1rem;color:var(--muted);max-width:56ch;font-size:1.02rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.65rem;border-radius:3px;
  font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:transform .35s var(--ease),background .25s,border-color .25s,box-shadow .35s}
.btn:hover{transform:translateY(-2px)}
.btn--p{background:var(--gold);color:#0B0D11}
.btn--p:hover{background:var(--gold-br);box-shadow:0 12px 30px -12px rgba(217,182,121,.5)}
.btn--g{border-color:var(--line-s);color:var(--text)}
.btn--g:hover{border-color:var(--lilac);color:var(--lilac)}
.hero-meta{align-self:end;border-top:1px solid var(--line);
  background:linear-gradient(0deg,rgba(11,13,17,.9),transparent)}
.hero-meta .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;padding-block:1rem;align-items:center}
.hero-meta .mono{color:var(--muted)}
/* On small screens the hero content is taller than the viewport, so the credential
   strip must flow after it rather than overlap the call to action. */
@media(max-width:860px){
  .hero{min-height:auto;padding-top:5.5rem}
  .hero .wrap{padding-block:2.5rem 2.75rem}
  .hero-meta{position:static;background:none;border-top:1px solid var(--line)}
  .hero-meta .wrap{gap:.45rem 1.5rem;padding-block:1.1rem}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  /* At this width the photograph behind the credential kicker is brighter than
     it is on desktop, dropping the line to 3.3:1. A soft local scrim, not a box. */
  /* At this width the hero copy runs over a brighter patch of the photograph and
     under the gold glow, putting the kicker at 3.3:1 and the tail of the
     sub-heading at 4.0:1. Deepen the image and lay a full-width scrim across the
     top of the overlay: edge to edge, so there is no box behind the text. */
  .hero-bg img{filter:grayscale(1) contrast(1.04) brightness(.24) blur(2px)}
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(11,13,17,.74) 0%,rgba(11,13,17,.64) 20%,
      rgba(11,13,17,.22) 38%,transparent 50%),
    radial-gradient(52% 62% at 78% 34%,rgba(217,182,121,.26),transparent 70%),
    radial-gradient(44% 52% at 92% 72%,var(--violet-glow),transparent 72%),
    linear-gradient(94deg,var(--ink) 26%,rgba(11,13,17,.86) 52%,rgba(11,13,17,.30) 100%),
    linear-gradient(0deg,var(--ink) 1%,transparent 38%)}
}

/* ------------------------------------------------------- brand strip ---- */
.strip{border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:1.05rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.strip-t{display:flex;gap:3.2rem;width:max-content;animation:slide 46s linear infinite}
.strip-t span{font-family:var(--serif);font-size:1.38rem;color:var(--dim);white-space:nowrap}
.strip-t b{color:var(--gold);font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}

/* ----------------------------------------------------------- section ---- */
.sec{padding-block:clamp(4.5rem,10vw,8.5rem);position:relative}
.sec+.sec{border-top:1px solid var(--line)}
.shead{max-width:62ch;margin-bottom:clamp(2.4rem,5.5vw,4.2rem)}
.shead h2{font-family:var(--serif);font-size:clamp(2.1rem,4.8vw,3.7rem);margin-top:.85rem}
.shead p{color:var(--muted);font-size:1.08rem;margin-top:1.05rem;max-width:56ch}

/* ------------------------------------------------------- capability ----- */
.caps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:720px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.caps{grid-template-columns:repeat(4,1fr)}}
.cap{background:var(--ink-2);padding:1.9rem 1.5rem 1.7rem;position:relative;overflow:hidden;
  transition:background .45s var(--ease)}
.cap::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--lilac));transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.cap:hover{background:var(--ink-3)}
.cap:hover::before{transform:scaleX(1)}
.cap .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--gold)}
.cap h3{font-size:1.14rem;font-weight:600;letter-spacing:-.005em;margin:.85rem 0 .6rem}
.cap p{color:var(--muted);font-size:.93rem;line-height:1.56}

/* ------------------------------------------- orchestration panel -------- */
.orch{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media(min-width:1000px){.orch{grid-template-columns:.92fr 1.08fr}}
.panel{background:linear-gradient(170deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-s);
  border-radius:12px;padding:1.15rem;position:relative;overflow:hidden;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.panel::after{content:"";position:absolute;inset:-40% -10% auto;height:70%;pointer-events:none;
  background:radial-gradient(60% 70% at 70% 0%,var(--violet-glow),transparent 70%)}
.pbar{display:flex;align-items:center;justify-content:space-between;
  padding:.15rem .35rem .9rem;border-bottom:1px solid var(--line);margin-bottom:.9rem;position:relative}
.leds{display:flex;gap:.32rem}
.leds i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.leds i.a{background:var(--gold);box-shadow:0 0 8px rgba(217,182,121,.7)}
.flow{display:grid;gap:.5rem;position:relative}
.node{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.022);
  position:relative;cursor:default;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.node:hover{border-color:rgba(217,182,121,.55);background:rgba(217,182,121,.07);transform:translateX(4px)}
.node .ix{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--gold)}
.node .nm{font-size:.93rem;font-weight:500}
.node .nm small{display:block;color:var(--muted);font-weight:400;font-size:.78rem;margin-top:.12rem;letter-spacing:0}
.node .st{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.22rem .55rem;white-space:nowrap}
.node.human{border-color:rgba(167,156,212,.5);background:rgba(167,156,212,.09)}
.node.human .ix,.node.human .st{color:var(--lilac)}
.node.human .st{border-color:rgba(167,156,212,.45)}
/* the pulse that travels the pipeline */
.node.live{border-color:rgba(217,182,121,.75);background:rgba(217,182,121,.11)}
.node.live .st{color:var(--gold);border-color:rgba(217,182,121,.5)}
.node.human.live{border-color:rgba(167,156,212,.85);background:rgba(167,156,212,.16)}
.pcap{margin-top:.95rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--dim);text-align:center;text-transform:uppercase}

/* ------------------------------------------------------- through-line --- */
.tl{position:relative;padding-left:clamp(0px,4vw,74px)}
.tl-spine{position:absolute;left:clamp(0px,1.6vw,28px);top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
.tl-spine::after{content:"";position:absolute;inset:0 auto auto 0;width:2px;height:var(--fill,0%);border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--lilac));box-shadow:0 0 14px rgba(217,182,121,.4)}
@media(max-width:780px){.tl{padding-left:1.6rem}.tl-spine{left:0}}
.row{position:relative;display:grid;gap:1.1rem 2.6rem;padding:2.2rem 0;border-top:1px solid var(--line)}
@media(min-width:900px){.row{grid-template-columns:1.1fr .9fr}}
.row:first-of-type{border-top:0}
.row::before{content:"";position:absolute;left:calc(clamp(0px,1.6vw,28px) - clamp(0px,4vw,74px) - 4px);
  top:2.9rem;width:10px;height:10px;border-radius:50%;background:var(--ink);
  border:2px solid var(--gold);transition:box-shadow .5s var(--ease),background .5s}
.row.in::before{box-shadow:0 0 0 5px rgba(217,182,121,.14)}
@media(max-width:780px){.row::before{left:-1.6rem;margin-left:-4px}}
.row .now{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--lilac)}
.row h3{font-family:var(--serif);font-size:clamp(1.55rem,2.9vw,2.25rem);margin:.6rem 0 0}
.row p{color:var(--muted);margin-top:.75rem;font-size:.99rem}
.forged{border-left:2px solid var(--violet);background:rgba(110,98,166,.1);border-radius:0 8px 8px 0;
  padding:1.05rem 1.25rem}
.forged .mono{color:var(--lilac);margin-bottom:.5rem;display:block}
.forged p{color:var(--muted);margin:0;font-size:.93rem}

/* ----------------------------------------------------------- exhibits --- */
.exh{display:grid;gap:1.4rem}
.ex{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-2);
  display:grid;transition:border-color .45s var(--ease),transform .45s var(--ease)}
.ex:hover{border-color:var(--line-s);transform:translateY(-3px)}
@media(min-width:900px){.ex{grid-template-columns:1.02fr .98fr}}
.ex-b{padding:clamp(1.5rem,3.4vw,2.6rem)}
.tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;border-radius:999px;padding:.34rem .8rem;margin-bottom:1rem}
.tag--sys{color:var(--gold);background:rgba(217,182,121,.1);border:1px solid rgba(217,182,121,.3)}
.tag--meth{color:var(--lilac);background:rgba(167,156,212,.1);border:1px solid rgba(167,156,212,.34);border-style:dashed}
.tag--cap{color:var(--muted);border:1px dashed var(--line-s)}
.ex h3{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.12}
.ex p{color:var(--muted);margin-top:.85rem;font-size:.97rem}
.ex-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.ex-meta li{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.3rem .55rem}
.ex-v{background:var(--ink-3);border-left:1px solid var(--line);display:grid;place-items:center;
  padding:clamp(1.3rem,3vw,2.2rem);position:relative;overflow:hidden;min-height:260px}
@media(max-width:899px){.ex-v{border-left:0;border-top:1px solid var(--line)}}
/* score meters */
.score{width:100%;display:grid;gap:.75rem}
.srow{display:grid;grid-template-columns:8.5rem 1fr 1.6rem;align-items:center;gap:.8rem}
.srow .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.srow .t{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.srow .f{height:100%;border-radius:99px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-dp));
  transition:width 1.3s var(--ease)}
.srow.in .f{width:var(--w)}
.srow .v{font-family:var(--serif);font-size:1.3rem;color:var(--gold);text-align:right}
/* knowledge-base viz */
.kb{display:grid;gap:.55rem;width:100%}
.kb-r{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:6px;background:rgba(255,255,255,.02);font-size:.8rem;color:var(--muted)}
.kb-r i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.kb-r.out{border-color:rgba(167,156,212,.4);background:rgba(167,156,212,.08);color:var(--lilac)}
.kb-r.out i{background:var(--lilac)}
/* assistant grid viz */
.ag{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
.ag div{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.02);
  display:grid;place-items:center;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;
  color:var(--muted);text-align:center;padding:.3rem;transition:all .4s var(--ease)}
.ag div.c{border-color:rgba(217,182,121,.5);background:rgba(217,182,121,.1);color:var(--gold)}
.ex:hover .ag div{border-color:rgba(167,156,212,.3)}
.vnote{position:absolute;bottom:.8rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------- tech by outcome ------ */
.out{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:760px){.out{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.out{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.out--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1140px){.out--2{grid-template-columns:repeat(2,1fr)}}
.oc{background:var(--ink-2);padding:1.7rem 1.45rem;transition:background .4s var(--ease)}
.oc:hover{background:var(--ink-3)}
.oc .verb{font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:var(--text)}
.oc .verb span{color:var(--gold)}
.oc p{color:var(--muted);font-size:.89rem;margin:.6rem 0 1rem;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:.38rem}
.chips li{font-size:.8rem;color:var(--muted);background:var(--ink-4);border:1px solid var(--line);
  border-radius:4px;padding:.27rem .55rem}
.chips li.cap2{background:transparent;border-style:dashed;border-color:rgba(167,156,212,.35);color:var(--lilac)}


/* -------------------------------------------------- work portfolio ------ */
.pf{display:grid;gap:clamp(1.3rem,2.8vw,2rem)}
.pj{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink-2);
  display:grid;transition:border-color .45s var(--ease),transform .45s var(--ease)}
.pj:hover{border-color:var(--line-s);transform:translateY(-3px)}
@media(min-width:980px){
  .pj{grid-template-columns:.87fr 1.13fr}
  .pj--flip{grid-template-columns:1.13fr .87fr}
  .pj--flip .pj-b{order:2}
  .pj--flip .pj-shot{border-left:0;border-right:1px solid var(--line)}
}
.pj-b{padding:clamp(1.5rem,3.2vw,2.5rem);display:flex;flex-direction:column;align-items:flex-start}
.pj-b>*{max-width:100%}
.pj-shot{background:var(--ink-3);border-top:1px solid var(--line);
  padding:clamp(1rem,2.4vw,1.9rem);display:grid;align-content:center;gap:.75rem}
@media(max-width:979px){.pj-shot{padding:1.1rem .85rem 1.4rem}}
@media(min-width:980px){.pj-shot{border-top:0;border-left:1px solid var(--line)}}
.frame{border:1px solid var(--line-s);border-radius:9px;overflow:hidden;background:#05070A;
  box-shadow:0 26px 60px -32px rgba(0,0,0,.95)}
.frame-bar{display:flex;align-items:center;gap:.38rem;padding:.5rem .72rem;background:var(--ink-4);
  border-bottom:1px solid var(--line)}
.frame-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);flex:none}
.frame-bar span{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);
  margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame img{width:100%;height:auto}
.shotnote{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.65}
.pj h3{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.13;margin:.35rem 0 0}
.pj .sub{color:var(--lilac);font-size:.88rem;margin-top:.5rem}
.pj dl{margin:1.4rem 0 0;display:grid;gap:1rem}
.pj dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pj dd{margin:.35rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.56;max-width:46ch}
.pj-foot{margin-top:auto;padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;align-items:center}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.status i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.status.live i{background:var(--gold);box-shadow:0 0 9px rgba(217,182,121,.75)}
.status.gated i{background:transparent;border:1px solid var(--gold)}
.pj-foot .lnk{font-size:.85rem}

/* more work (expandable) */
.more{margin-top:clamp(1.6rem,3.4vw,2.4rem);border:1px solid var(--line);border-radius:12px;
  background:var(--ink-2);overflow:hidden}
.more>summary{list-style:none;cursor:pointer;padding:1.2rem clamp(1.2rem,3vw,1.9rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease),background .3s var(--ease)}
.more>summary::-webkit-details-marker{display:none}
.more>summary:hover{color:var(--gold);background:var(--ink-3)}
.more>summary .pm{font-size:1.1rem;line-height:1;color:var(--gold);transition:transform .4s var(--ease)}
.more[open]>summary{border-bottom:1px solid var(--line)}
.more[open]>summary .pm{transform:rotate(45deg)}
.mg{display:grid;gap:1px;background:var(--line)}
@media(min-width:780px){.mg{grid-template-columns:repeat(2,1fr)}}
.mi{background:var(--ink-2);padding:1.6rem clamp(1.2rem,3vw,1.9rem)}
.mi h4{font-family:var(--serif);font-size:1.3rem;line-height:1.2;margin:.55rem 0 0;font-weight:400}
.mi p{color:var(--muted);font-size:.89rem;margin-top:.6rem;line-height:1.58}
.mi .lnk{margin-top:.9rem;display:inline-block;font-size:.82rem}

/* ------------------------------------------------- capability depth ----- */
.depth{display:flex;flex-wrap:wrap;gap:.65rem 1.7rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.depth span{display:inline-flex;align-items:center;gap:.45rem}
.depth i{width:22px;height:0;flex:none}
.depth i.s1{border-top:2px solid var(--gold)}
.depth i.s2{border-top:1px solid var(--line-s)}
.depth i.s3{border-top:1px dashed rgba(167,156,212,.55)}
.oc .lvl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:1.15rem 0 .5rem;display:block}
.chips li.hands{border-color:rgba(217,182,121,.42);color:var(--text);background:rgba(217,182,121,.07)}
.chips li.sup{background:var(--ink-4);border-color:var(--line-s);color:var(--muted)}
.chips li.expl{background:transparent;border-style:dashed;border-color:rgba(167,156,212,.4);color:var(--lilac)}


/* ------------------------------------------------------------- hire ---- */
.hire{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);overflow:hidden;
  display:grid}
@media(min-width:960px){.hire{grid-template-columns:1fr 1fr}}
.hire-a{padding:clamp(1.7rem,3.4vw,2.8rem);border-bottom:1px solid var(--line)}
@media(min-width:960px){.hire-a{border-bottom:0;border-right:1px solid var(--line)}}
.hire-a h2{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.14;margin:.7rem 0 0}
.hire-a p{color:var(--muted);font-size:.97rem;margin-top:1rem;max-width:44ch}
.hire-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.facts{padding:clamp(1.7rem,3.4vw,2.8rem);display:grid;gap:1.15rem;align-content:center}
.facts div{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.facts b{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);font-weight:400;padding-top:.3rem;min-width:8.6rem}
.facts span{color:var(--muted);font-size:.93rem;line-height:1.55}
.facts span i{font-style:normal;color:var(--text)}
.facts .dev{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.facts .dev li{position:relative;padding-left:.95rem;line-height:1.55}
.facts .dev li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;
  background:var(--gold)}
.facts .dev em{font-style:normal;color:var(--gold)}
/* a long label gets its own line rather than squeezing the column beside it */
.facts .stack{grid-template-columns:1fr;gap:.55rem}
.facts .dev-meta{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.6}

/* ---- the portfolio sits in the field of marks it came from -------
   Built from the approved brand-logos wall: the same marks, inverted and
   ghosted back to atmosphere so the breadth reads without competing with
   the portfolio images or the text on top of them. */
#publication{isolation:isolate}
#publication::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url(assets/brand-marks-ghost.png);
  background-image:image-set(url(assets/brand-marks-ghost.webp) type("image/webp"),
                             url(assets/brand-marks-ghost.png) type("image/png"));
  background-repeat:no-repeat;background-position:72% clamp(1rem,4vw,3.25rem);
  background-size:min(1520px,138%) auto;opacity:.15;
  -webkit-mask-image:radial-gradient(44% 42% at 79% 18%,#000,rgba(0,0,0,.3) 60%,transparent 88%);
          mask-image:radial-gradient(44% 42% at 79% 18%,#000,rgba(0,0,0,.3) 60%,transparent 88%)}
#publication::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 30% at 76% 9%,rgba(217,182,121,.11),transparent 70%),
    radial-gradient(50% 34% at 72% 80%,rgba(167,156,212,.12),transparent 74%)}
#publication>.wrap{position:relative;z-index:1}
@media(max-width:860px){
  #publication::before{background-position:50% 9.5rem;
    background-size:min(900px,215%) auto;opacity:.13;
    -webkit-mask-image:radial-gradient(86% 13% at 50% 12%,#000,rgba(0,0,0,.3) 62%,transparent 90%);
            mask-image:radial-gradient(86% 13% at 50% 12%,#000,rgba(0,0,0,.3) 62%,transparent 90%)}}

/* reserved media slot */
.slot{margin-top:1.1rem;border:1px dashed rgba(167,156,212,.38);border-radius:8px;
  background:rgba(167,156,212,.045);min-height:116px;display:grid;place-items:center;
  padding:1.1rem;text-align:center}
.slot span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lilac);line-height:1.8}


/* ------------------------------------------------- proof-run receipt --- */
.rcpt{border:1px solid var(--line-s);border-radius:10px;overflow:hidden;background:var(--ink);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.95);width:100%}
.rcpt-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1rem;background:var(--ink-4);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rcpt-h .ok{color:var(--gold);border:1px solid rgba(217,182,121,.45);border-radius:999px;
  padding:.18rem .6rem;background:rgba(217,182,121,.1)}
.rcpt-b{list-style:none;margin:0;padding:.3rem 0;counter-reset:step}
.rcpt-b li{display:grid;grid-template-columns:1.45rem 1fr;gap:.75rem;align-items:start;
  padding:.62rem 1rem;position:relative}
.rcpt-b li+li{border-top:1px solid rgba(255,255,255,.05)}
.rcpt-b li::before{counter-increment:step;content:"";width:9px;height:9px;border-radius:50%;
  margin-top:.42rem;margin-left:.2rem;border:1px solid var(--line-s);background:transparent;
  grid-column:1;grid-row:1}
.rcpt-b b,.rcpt-b span{grid-column:2}
.rcpt-b li.done::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 9px rgba(217,182,121,.5)}
.rcpt-b li.hold::before{background:transparent;border-color:var(--gold);border-width:2px}
.rcpt-b li.human::before{background:var(--lilac);border-color:var(--lilac);box-shadow:0 0 9px rgba(167,156,212,.5)}
.rcpt-b b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text);font-weight:400}
.rcpt-b span{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;margin-top:.22rem}
.rcpt-b li.human b{color:var(--lilac)}
.rcpt-f{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;
  padding:.75rem 1rem;border-top:1px solid var(--line);background:var(--ink-2);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}

/* attribution line inside a portfolio card */
.attrib{margin-top:1.3rem;padding-left:.9rem;border-left:2px solid var(--violet);
  color:var(--muted);font-size:.85rem;line-height:1.55;max-width:46ch}
.attrib b{color:var(--text);font-weight:500}

/* ------------------------------------------------------------- press ---- */
.press{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:800px){.press{grid-template-columns:repeat(2,1fr)}}
.pi{background:var(--ink-2);padding:1.8rem 1.5rem;display:flex;flex-direction:column}
.pi .out2{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pi h3{font-family:var(--serif);font-size:1.4rem;margin:.7rem 0 .6rem;line-height:1.2}
.pi p{color:var(--muted);font-size:.92rem}
.lnk{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.1rem;
  color:var(--gold);font-weight:600;font-size:.9rem;text-decoration:none;transition:gap .3s var(--ease)}
.lnk:hover{gap:.75rem}
.nolink{margin-top:auto;padding-top:1.1rem;color:var(--dim);font-size:.82rem}

/* ----------------------------------------------------------- contact ---- */
.contact{background:linear-gradient(165deg,var(--ink-3),var(--ink-2));border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.8rem,4.5vw,3.4rem);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:-50% -20% auto;height:80%;pointer-events:none;
  background:radial-gradient(50% 60% at 30% 0%,rgba(217,182,121,.12),transparent 70%)}
.cgrid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);position:relative}
@media(min-width:900px){.cgrid{grid-template-columns:1fr 1.05fr}}
.contact h2{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem)}
.contact .sub{color:var(--muted);margin-top:1rem;font-size:1.04rem;max-width:44ch}
.fld{margin-bottom:1rem}
.fld label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:.97rem;color:var(--text);
  background:rgba(11,13,17,.6);border:1px solid var(--line-s);border-radius:7px;padding:.78rem .9rem;
  transition:border-color .3s,background .3s}
.fld textarea{min-height:118px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);background:var(--ink-4)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.note{color:var(--dim);font-size:.82rem;margin-top:.9rem}

/* ------------------------------------------------------- live form ----- */
.fld .req{color:var(--gold)}
.ferr{display:none;margin:.45rem 0 0;font-size:.84rem;color:#E8A49B}
.ferr.show{display:block}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#C9796C}
.fcount{margin:.4rem 0 0;text-align:right;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;color:var(--dim)}
.fcount.over{color:#E8A49B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstatus{display:none;margin:1rem 0 0;font-size:.9rem;line-height:1.55;padding:.85rem 1rem;
  border-radius:7px;border:1px solid var(--line-s)}
.fstatus.show{display:block}
.fstatus.ok{color:var(--text);border-color:rgba(217,182,121,.45);background:rgba(217,182,121,.1)}
.fstatus.err{color:#F0C4BD;border-color:rgba(201,121,108,.5);background:rgba(201,121,108,.12)}
#contact-form{position:relative}
#cf-submit[disabled]{opacity:.6;cursor:progress}

/* ------------------------------------------------------------ footer ---- */
.ftr{border-top:1px solid var(--line);padding-block:2.4rem 3rem;color:var(--dim);font-size:.88rem}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}
.ftr .fn{max-width:56ch;line-height:1.6}

/* ============================ SIGNATURE FEATURE: capability constellation */
.con-wrap{display:grid;gap:clamp(1.5rem,2.8vw,2.4rem);align-items:center}
@media(min-width:1040px){.con-wrap{grid-template-columns:1.3fr .7fr}}

.con-stage{position:relative;aspect-ratio:1/.9;width:100%;max-width:780px;margin-inline:auto;
  isolation:isolate}
/* the pool of light the whole thing sits in */
.con-stage::before{content:"";position:absolute;inset:-12% -8%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(44% 44% at 34% 28%,rgba(217,182,121,.14),transparent 72%),
    radial-gradient(46% 46% at 72% 74%,rgba(167,156,212,.15),transparent 74%);
  transition:opacity .6s var(--ease)}
.con-stage.live::before{opacity:1}

.con-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}

/* two strokes per edge: a soft halo under a crisp core */
.con-edge{fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke .5s var(--ease),stroke-width .5s var(--ease),opacity .5s var(--ease)}
.con-edge.halo{stroke:rgba(167,156,212,.16);stroke-width:5;opacity:0}
.con-edge.core{stroke:rgba(188,179,216,.5);stroke-width:1.4}
.con-stage.ready .con-edge{animation:draw 1.25s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.con-edge.core.hot{stroke:url(#conGrad);stroke-width:2.1;opacity:1}
.con-edge.halo.hot{opacity:1;stroke:rgba(217,182,121,.2);stroke-width:9}
.con-edge.core.cool{opacity:.1}
.con-edge.halo.cool{opacity:0}
/* one sweep of light along the active edges, then it settles */
.con-edge.core.hot.sweep{animation:sweep .8s var(--ease) 1 forwards}
@keyframes sweep{
  0%{stroke-dasharray:16 var(--len);stroke-dashoffset:var(--len)}
  70%{stroke-dasharray:16 var(--len);stroke-dashoffset:calc(var(--len) * -1)}
  71%{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
  100%{stroke-dasharray:var(--len);stroke-dashoffset:0}
}

/* ---- nodes: a glass disc with a lit rim ---- */
.con-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:clamp(108px,19%,146px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:0;padding:.5rem;background:none;
  font-family:var(--mono);font-size:clamp(.68rem,1.1vw,.72rem);letter-spacing:.07em;
  text-transform:uppercase;color:var(--text);text-align:center;line-height:1.35;
  transition:transform .45s var(--ease),color .4s var(--ease),opacity .45s var(--ease)}
.con-node span{position:relative;z-index:2;display:block}
/* the disc */
.con-node::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:0;
  background:
    radial-gradient(68% 58% at 50% 16%,rgba(255,255,255,.07),transparent 62%),
    linear-gradient(170deg,rgba(32,37,48,.96),rgba(14,17,23,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -14px 28px -18px rgba(0,0,0,.9),
    0 18px 34px -18px rgba(0,0,0,.95),
    0 0 0 6px rgba(11,13,17,.6);
  transition:box-shadow .5s var(--ease),background .5s var(--ease)}
/* the rim, which is what lights up */
.con-node::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;
  border:1px solid rgba(217,182,121,.34);
  transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.con-node:hover,.con-node:focus-visible{transform:translate(-50%,-50%) scale(1.07);color:var(--gold-br)}
.con-node:hover::after,.con-node:focus-visible::after{border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(217,182,121,.28),0 0 40px -6px rgba(217,182,121,.55)}
.con-node.on{transform:translate(-50%,-50%) scale(1.1);color:var(--gold-br)}
.con-node.on::before{background:
    radial-gradient(70% 60% at 50% 14%,rgba(217,182,121,.2),transparent 64%),
    linear-gradient(170deg,rgba(44,38,27,.97),rgba(18,19,22,.97))}
.con-node.on::after{border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(217,182,121,.4),0 0 54px -6px rgba(217,182,121,.65)}
.con-node.dim{opacity:.46}
.con-node:focus-visible{outline:none}
.con-node:focus-visible::after{outline:2px solid var(--gold);outline-offset:6px}
/* a slow, staggered breath so the cluster is alive without blinking */
.con-stage.live .con-node::after{animation:breathe 7s var(--ease) infinite;animation-delay:var(--b,0s)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}
.con-stage.live .con-node.on::after,
.con-stage.live .con-node:hover::after{animation:none;opacity:1}

/* ---- core ---- */
.con-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(118px,21%,160px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;pointer-events:none;z-index:1;
  background:
    radial-gradient(60% 60% at 50% 34%,rgba(167,156,212,.3),transparent 70%),
    linear-gradient(170deg,rgba(28,27,42,.97),rgba(13,15,21,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 46px -22px rgba(0,0,0,.95);
  border:1px solid rgba(167,156,212,.5);
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.22rem);color:var(--text);
  line-height:1.16;padding:.7rem}
.con-core::after{content:"";position:absolute;inset:-18px;border-radius:50%;
  border:1px solid rgba(167,156,212,.2);animation:halo 6s var(--ease) infinite}
.con-core::before{content:"";position:absolute;inset:-34px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,156,212,.13),transparent 68%);z-index:-1}
@keyframes halo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.16}}

/* ---- readout ---- */
.con-read{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  padding:clamp(1.4rem,3vw,2.1rem);min-height:330px;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.con-read::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--lilac));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.con-read.active::before{transform:scaleX(1)}
.con-read .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lilac)}
.con-read h3{font-family:var(--serif);font-size:clamp(1.45rem,2.5vw,2rem);margin:.6rem 0 0;line-height:1.14}
.con-read p{color:var(--muted);margin-top:.85rem;font-size:.97rem}
.con-read .prf{margin-top:auto;padding-top:1.3rem}
.con-read .prf .mono{display:block;margin-bottom:.6rem;color:var(--dim)}

/* the verified project chip */
.con-proj{display:flex;align-items:center;gap:.85rem;text-decoration:none;
  border:1px solid var(--line);border-radius:10px;background:var(--ink-3);
  padding:.85rem 1rem;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.con-proj:hover,.con-proj:focus-visible{border-color:rgba(217,182,121,.5);transform:translateY(-2px)}
.con-proj .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--gold);
  box-shadow:0 0 10px rgba(217,182,121,.7)}
.con-proj .dot.q{background:transparent;border:1px solid var(--gold);box-shadow:none}
.con-proj .tx{min-width:0;flex:1}
.con-proj .nm{display:block;color:var(--text);font-size:.95rem;line-height:1.3}
.con-proj .st{display:block;margin-top:.26rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.con-proj .go{color:var(--gold);flex:none;font-size:.9rem;transition:transform .35s var(--ease)}
.con-proj:hover .go{transform:translateX(3px)}

.con-hint{margin-top:1rem;display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.con-hint i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  animation:hintPulse 2.6s var(--ease) infinite}
@keyframes hintPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.con-read.active .con-hint i{animation:none;opacity:.35}

@media(max-width:700px){
  .con-stage{aspect-ratio:1/1.12;max-width:470px}
  .con-node{width:clamp(104px,29%,124px);font-size:.68rem;letter-spacing:.02em;line-height:1.3}
  .con-core{width:30%;font-size:.95rem}
  .con-node::before{box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 20px -14px rgba(0,0,0,.9),
    0 12px 22px -14px rgba(0,0,0,.95),
    0 0 0 4px rgba(11,13,17,.6)}
  .con-read{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  .con-stage.ready .con-edge{animation:none;stroke-dashoffset:0}
  .con-core::after,.con-hint i{animation:none}
  .con-stage.live .con-node::after{animation:none}
  .con-edge.core.hot.sweep{animation:none}
  .con-read::before{transition:none}
}

/* ------------------------------------------------ concept detail panel - */
.cx{margin-top:1.4rem;border:1px solid var(--line);border-radius:10px;background:var(--ink-3);overflow:hidden}
.cx>summary{list-style:none;cursor:pointer;padding:.95rem 1.2rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease),background .3s var(--ease)}
.cx>summary::-webkit-details-marker{display:none}
.cx>summary:hover{color:var(--gold);background:var(--ink-4)}
.cx>summary .pm{color:var(--gold);font-size:1.05rem;line-height:1;transition:transform .35s var(--ease)}
.cx[open]>summary{border-bottom:1px solid var(--line)}
.cx[open]>summary .pm{transform:rotate(45deg)}
.cx-body{padding:1.3rem 1.2rem 1.5rem}
.cx-shots{display:grid;gap:.7rem}
@media(min-width:640px){.cx-shots{grid-template-columns:repeat(2,1fr)}}
.cx-shots figure{margin:0}
.cx-shots img{width:100%;height:auto;border-radius:7px;border:1px solid var(--line);display:block}
.cx-shots figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.55}
.cx-body dl{margin:1.4rem 0 0;display:grid;gap:.9rem}
.cx-body dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cx-body dd{margin:.3rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.6;max-width:62ch}

/* ------------------------------------------------------- portfolio ----- */
.pw{display:grid;gap:clamp(2.4rem,5vw,4rem)}
.pw-group>h3{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.95rem);margin:0 0 .5rem;font-weight:400}
.pw-group>p{color:var(--muted);font-size:.95rem;margin:0 0 1.4rem;max-width:58ch}

/* layered campaign mosaic */
.mosaic{display:grid;gap:clamp(.7rem,1.6vw,1.1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mosaic{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--ink-3);
  border:1px solid var(--line);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.tile:hover,.tile:focus-within{border-color:rgba(217,182,121,.5);transform:translateY(-3px)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1;
  filter:saturate(.95) brightness(.94);transition:filter .45s var(--ease)}
.tile:hover img{filter:none}
.tile--wide{grid-column:span 2}
@media(min-width:760px){.tile--tall img{aspect-ratio:1/1.32}}
.tile figcaption{position:absolute;inset:auto 0 0;padding:2rem .85rem .8rem;
  background:linear-gradient(0deg,rgba(6,8,11,.97) 0%,rgba(6,8,11,.88) 42%,rgba(6,8,11,.5) 74%,transparent 100%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);line-height:1.45}
.tile figcaption b{display:block;color:var(--gold);font-weight:400;margin-bottom:.2rem}

/* Client marks as individual lit chips rather than one wide white slab.
   Each chip must stay light: the marks carry their own white grounds and
   rely on multiply below to drop them out, so a dark chip would bury the
   black and navy artwork in All-Pro3, HTC and Perfect Pitch. isolation
   keeps that blend inside the chip instead of reaching the charcoal. */
.marks{display:grid;gap:clamp(.75rem,1.8vw,1.1rem);align-items:stretch;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.marks{grid-template-columns:repeat(5,1fr)}}
.mark-chip{isolation:isolate;display:grid;place-items:center;
  background:linear-gradient(176deg,#F4F1EA 0%,#ECE8DF 55%,#E3DED3 100%);
  border:1px solid rgba(217,182,121,.26);border-radius:12px;
  padding:clamp(1rem,2.2vw,1.4rem) clamp(.8rem,1.8vw,1.15rem);
  min-height:clamp(94px,9vw,118px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.92),
             0 0 60px -30px rgba(217,182,121,.18),
             inset 0 1px 0 rgba(255,255,255,.78);
  transition:border-color .5s var(--ease),transform .5s var(--ease),
             box-shadow .5s var(--ease)}
.mark-chip:hover{border-color:rgba(217,182,121,.5);transform:translateY(-2px);
  box-shadow:0 26px 48px -24px rgba(0,0,0,.95),
             0 0 70px -26px rgba(217,182,121,.26),
             inset 0 1px 0 rgba(255,255,255,.85)}
.marks img{width:100%;height:auto;max-height:62px;object-fit:contain;
  mix-blend-mode:multiply;display:block}
.marks-note{margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.6}

/* social pairing */
.social{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:center}
@media(min-width:820px){.social{grid-template-columns:.95fr 1.05fr}}
.social img{width:100%;height:auto;display:block;border-radius:10px}
.social blockquote{margin:0;padding-left:1.1rem;border-left:2px solid var(--violet);
  color:var(--text);font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.38}
.social cite{display:block;margin-top:1rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-style:normal}

/* the phone mockup is lit by the page rather than framed by it, so the campaign
   reads as part of the site instead of a white rectangle dropped onto it */
.social-shot{position:relative;margin:0}
.social-shot::before{content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 38% 30%,rgba(217,182,121,.17),transparent 72%),
    radial-gradient(48% 44% at 66% 74%,rgba(167,156,212,.19),transparent 76%)}
.social-shot picture{position:relative;z-index:1;display:block}
.social-shot img{width:100%;height:auto;display:block;border-radius:0;
  filter:saturate(.95) brightness(.93) contrast(1.02);
  transition:filter .7s var(--ease)}
.social-shot:hover img{filter:none}

/* press coverage, named rather than rebroadcast */
.press-list{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:720px){.press-list{grid-template-columns:repeat(3,1fr)}}
.press-list li{background:var(--ink-2);padding:1.3rem 1.2rem}
.press-list b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:400}
.press-list span{display:block;margin-top:.5rem;color:var(--muted);font-size:.89rem;line-height:1.55}

/* =================================================================== */
/*  VISUAL PASS                                                        */
/* =================================================================== */

/* ---- editorial photography: one lead image, two supporting ------- */
.phero--img{padding-block:clamp(7.5rem,15vh,11rem) clamp(3.5rem,7vw,5.5rem)}
.phero-grid{display:grid;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
@media(min-width:1000px){.phero-grid{grid-template-columns:1.04fr .96fr}}

/* the lead photograph: no frame, no rotation, nothing on top of it */
.lead-shot{position:relative;margin:0;justify-self:center;width:min(100%,440px)}
.lead-shot .ph{position:relative;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:var(--ink-3);
  box-shadow:0 36px 72px -34px rgba(0,0,0,.92)}
.lead-shot img{width:100%;height:auto;display:block;
  filter:saturate(.95) contrast(1.02) brightness(.95);
  transition:filter .7s var(--ease),transform .9s var(--ease)}
.lead-shot:hover img{filter:none;transform:scale(1.015)}
/* the light it sits in */
.lead-shot::before{content:"";position:absolute;inset:-16% -14%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 44% at 44% 34%,rgba(217,182,121,.18),transparent 74%),
    radial-gradient(50% 46% at 66% 74%,rgba(167,156,212,.16),transparent 78%)}
.lead-shot figcaption{margin-top:1.1rem;display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);line-height:1.5}
.lead-shot figcaption b{color:var(--gold);font-weight:400;flex:none}
.lead-shot figcaption::before{content:"";width:22px;height:1px;background:var(--gold);
  flex:none;align-self:center;transition:width .5s var(--ease)}
.lead-shot:hover figcaption::before{width:34px}

/* the supporting pair: asymmetric, generous, never overlapping */
.gal2{display:grid;gap:clamp(1.4rem,3.2vw,2.6rem);align-items:start}
@media(min-width:860px){.gal2{grid-template-columns:1.45fr 1fr}}
.gal2 figure{margin:0;position:relative}
.gal2 .ph{position:relative;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:var(--ink-3);
  box-shadow:0 30px 60px -32px rgba(0,0,0,.9);
  transition:border-color .55s var(--ease),box-shadow .55s var(--ease)}
.gal2 figure:hover .ph{border-color:rgba(217,182,121,.34);
  box-shadow:0 38px 76px -32px rgba(0,0,0,.95)}
.gal2 img{width:100%;height:auto;display:block;
  filter:saturate(.93) contrast(1.02) brightness(.92);
  transition:filter .7s var(--ease),transform .9s var(--ease)}
.gal2 figure:hover img{filter:none;transform:scale(1.015)}
.gal2 figcaption{margin-top:1rem;max-width:46ch}
.gal2 figcaption b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:.4rem}
.gal2 figcaption span{color:var(--muted);font-size:.93rem;line-height:1.6}

/* reveals, once, rather than constant motion */
.ph-rv{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ph-rv.in{opacity:1;transform:none}
.ph-rv.d1{transition-delay:.1s} .ph-rv.d2{transition-delay:.2s}

@media(prefers-reduced-motion:reduce){
  .lead-shot img,.gal2 img{transition:none}
  .lead-shot:hover img,.gal2 figure:hover img{transform:none}
  .ph-rv{opacity:1;transform:none;transition:none}
}

/* ---- product ribbon (homepage visual break) ---------------------- */
.ribbon{position:relative;padding-block:clamp(3rem,7vw,5.5rem);overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 22% 40%,rgba(217,182,121,.1),transparent 72%),
    radial-gradient(52% 62% at 78% 62%,rgba(167,156,212,.12),transparent 76%)}
.ribbon .wrap{position:relative;z-index:1}
.ribbon-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.8rem 2rem;margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.ribbon-head h2{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.5rem);margin:0;max-width:22ch}
.ribbon-head .mono{color:var(--muted)}
.deck{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(.5rem,1.2vw,1rem);align-items:center}
@media(max-width:860px){.deck{grid-template-columns:repeat(3,1fr)}
  .deck a:nth-child(n+4){display:none}}
.deck a{position:relative;display:block;border-radius:8px;overflow:hidden;text-decoration:none;
  border:1px solid var(--line);background:var(--ink-3);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9);
  transition:transform .55s var(--ease),border-color .45s var(--ease),box-shadow .55s var(--ease);
  transform:translateY(var(--off,0)) rotate(var(--rot,0deg))}
.deck a:nth-child(1){--rot:-2.4deg;--off:14px}
.deck a:nth-child(2){--rot:1.4deg;--off:-10px}
.deck a:nth-child(3){--rot:-1deg;--off:6px}
.deck a:nth-child(4){--rot:2deg;--off:-14px}
.deck a:nth-child(5){--rot:-1.6deg;--off:10px}
.deck a:hover,.deck a:focus-visible{transform:translateY(calc(var(--off,0) - 8px)) rotate(0deg) scale(1.04);
  border-color:rgba(217,182,121,.5);z-index:3;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.95),0 0 0 1px rgba(217,182,121,.22)}
.deck img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top left;
  filter:saturate(.9) brightness(.88);transition:filter .5s var(--ease)}
.deck a:hover img{filter:none}
.deck .lb{position:absolute;inset:auto 0 0;padding:1.5rem .6rem .5rem;
  /* the scrim has to stay opaque through the text band, not only at the very
     bottom edge: on the two light screenshots the label was landing on bright
     pixels and measuring 3.4:1. */
  background:linear-gradient(0deg,rgba(6,8,11,.97) 0%,rgba(6,8,11,.95) 64%,
    rgba(6,8,11,.74) 84%,transparent 100%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);text-align:center;line-height:1.35}

/* ---- through-line evidence imagery ------------------------------- */
.forged{position:relative}
.forged-img{margin:.9rem 0 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.forged-img img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.88) brightness(.86) contrast(1.04);transition:filter .55s var(--ease)}
.row:hover .forged-img img{filter:saturate(.96) brightness(.95)}

/* ---- bigger, more cinematic project screenshots ------------------ */
@media(min-width:980px){
  .pj{grid-template-columns:.72fr 1.28fr}
  .pj--flip{grid-template-columns:1.28fr .72fr}
}
.pj-shot{padding:clamp(1rem,2.4vw,2rem)}
.frame{transform:translateY(var(--sp,0px));transition:box-shadow .5s var(--ease)}
.pj:hover .frame{box-shadow:0 46px 90px -32px rgba(0,0,0,.96),0 0 0 1px rgba(217,182,121,.18)}

/* ---- editorial gallery + lightbox (Brand & Speaking) ------------- */
/* Source frames are 300-380px, so tiles are sized to stay at or near native
   resolution. The lightbox is where they get to be large. */
.mosaic{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mosaic{grid-template-columns:repeat(4,1fr)}}
@media(min-width:760px){
  .tile--hero img{aspect-ratio:1/1.12}
  .tile--tall img{aspect-ratio:1/.88}
  .tile--sm img{aspect-ratio:1/1}
  .tile--wide{grid-column:span 2}
  .tile--wide img{aspect-ratio:2/.82}
}
.tile{cursor:zoom-in}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tile .zoom{position:absolute;top:.6rem;right:.6rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:rgba(8,10,14,.72);border:1px solid var(--line-s);
  color:var(--gold);font-size:.8rem;line-height:1;opacity:0;transform:scale(.85);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tile:hover .zoom,.tile:focus-visible .zoom{opacity:1;transform:none}

.lbx{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,8,11,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lbx.on{opacity:1;pointer-events:auto}
.lbx figure{margin:0;max-width:min(92vw,900px);text-align:center;
  transform:scale(.96);transition:transform .45s var(--ease)}
.lbx.on figure{transform:none}
.lbx img{max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:10px;
  border:1px solid var(--line-s);box-shadow:0 44px 90px -30px rgba(0,0,0,.95);display:block;margin-inline:auto}
.lbx figcaption{margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);line-height:1.6}
.lbx figcaption b{display:block;color:var(--gold);font-weight:400;margin-bottom:.3rem}
.lbx-close{position:absolute;top:max(1rem,3vw);right:max(1rem,3vw);min-width:46px;min-height:46px;
  display:grid;place-items:center;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--line-s);color:var(--muted);font-size:1.1rem;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.lbx-close:hover,.lbx-close:focus-visible{color:var(--gold);border-color:var(--gold)}
.lbx-nav{position:absolute;top:50%;translate:0 -50%;min-width:46px;min-height:46px;
  display:grid;place-items:center;border-radius:999px;cursor:pointer;
  background:rgba(17,20,26,.8);border:1px solid var(--line-s);color:var(--muted);font-size:1.1rem;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.lbx-nav:hover,.lbx-nav:focus-visible{color:var(--gold);border-color:var(--gold)}
.lbx-prev{left:max(.6rem,2vw)} .lbx-next{right:max(.6rem,2vw)}
html.lbx-open,html.lbx-open body{overflow:hidden}

/* ---- video feature, more cinematic ------------------------------- */
.vid-embed{box-shadow:0 44px 90px -34px rgba(0,0,0,.96),0 0 0 1px rgba(217,182,121,.12)}
.vid::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(44% 48% at 30% 46%,rgba(217,182,121,.1),transparent 74%),
             radial-gradient(44% 48% at 74% 58%,rgba(167,156,212,.12),transparent 76%)}
.vid{position:relative;isolation:isolate}

@media(prefers-reduced-motion:reduce){
  .lead-shot img,.gal2 img,.social-shot img,.mark-chip,.deck a,.frame{transform:none !important;transition:none}
  .lbx,.lbx figure{transition:none}
}

/* ----------------------------------------------------- reduced motion --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .strip-t{animation:none}
  .srow .f{transition:none;width:var(--w)}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =================================================================== */
/*  SUBPAGES : same design system, page-level components               */
/* =================================================================== */

/* page hero (shorter than the homepage's full-viewport hero) */
.phero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);
  padding-block:clamp(7.5rem,15vh,11rem) clamp(3rem,7vw,5rem)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 90% at 12% 0%,rgba(217,182,121,.09),transparent 64%),
    radial-gradient(52% 64% at 94% 70%,var(--violet-glow),transparent 72%)}
.crumb{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  margin-top:-.7rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .25s var(--ease)}
.crumb:hover{color:var(--gold)}
.phero h1{font-family:var(--serif);font-size:clamp(2.5rem,6vw,5rem);line-height:1;letter-spacing:-.025em;
  max-width:17ch;margin:1.3rem 0 0}
.phero h1 em{font-style:italic;color:var(--gold)}
.phero .lede{margin-top:1.6rem;font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.45;
  max-width:40ch;color:var(--text)}
.phero .sub{margin-top:1.1rem;color:var(--muted);max-width:58ch;font-size:1.02rem}

/* two-up editorial gallery */
.gal{display:grid;gap:clamp(1.1rem,2.6vw,1.9rem)}
@media(min-width:820px){.gal{grid-template-columns:1.18fr .82fr;align-items:start}}
.gal figure{margin:0}
.gal .frame{background:var(--ink-2)}
.gal figcaption{margin-top:.85rem;color:var(--muted);font-size:.9rem;line-height:1.55}

/* numbered talks */
.talks{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.talks li{background:var(--ink-2);padding:1.5rem clamp(1.1rem,2.6vw,1.8rem);
  display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start;
  transition:background .4s var(--ease)}
.talks li:hover{background:var(--ink-3)}
.talks .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--gold);padding-top:.42rem}
.talks h3{font-family:var(--serif);font-size:1.4rem;line-height:1.2;margin:0;font-weight:400}
.talks p{color:var(--muted);font-size:.9rem;margin:.5rem 0 0;line-height:1.56;max-width:62ch}

/* logo wall */
.wall{margin:0}
.wall .frame{background:#F5F2EB;padding:clamp(1.3rem,3.4vw,2.6rem)}
.wall img{width:100%;height:auto;mix-blend-mode:multiply}
.wall figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.65}

/* ------------------------------------------------------- case prose --- */
.prose{max-width:66ch}
.prose h2{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;
  margin:clamp(2.8rem,6vw,4.4rem) 0 0}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-size:1.45rem;line-height:1.2;margin:2.4rem 0 0;font-weight:400}
.prose p{color:var(--muted);margin:1.1rem 0 0;font-size:1.03rem;line-height:1.68}
.prose p strong{color:var(--text);font-weight:500}
.prose .big{color:var(--text);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;
  font-family:var(--serif);max-width:30ch}
.callout{margin-top:1.6rem;padding:1.3rem 1.5rem;border-left:2px solid var(--violet);
  background:rgba(110,98,166,.1);border-radius:0 8px 8px 0}
.callout p{margin:0;color:var(--muted);font-size:.95rem}
.callout p+p{margin-top:.7rem}

/* role list */
.role{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.6rem 0 0;padding:0;list-style:none}
.role li{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:.38rem .65rem}

/* scorecard grid (four meters) */
.meters{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-top:1.8rem}
@media(min-width:620px){.meters{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.meters{grid-template-columns:repeat(4,1fr)}}
.meter{background:var(--ink-2);padding:1.5rem 1.3rem}
.meter .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-height:2.4em;display:block}
.meter .val{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--gold);margin:.7rem 0 0}
.meter .val b{font-size:1rem;color:var(--dim);font-weight:400;font-family:var(--sans)}
.meter .trk{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:.9rem}
.meter .fil{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-dp));
  transition:width 1.3s var(--ease)}
.meter.in .fil{width:var(--w)}
.meter p{color:var(--muted);font-size:.86rem;margin:.9rem 0 0;line-height:1.55}

/* before / after */
.cmp{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:1.8rem}
@media(min-width:860px){.cmp{grid-template-columns:repeat(2,1fr)}}
.cmp>div{background:var(--ink-2);padding:clamp(1.4rem,3vw,2.1rem)}
.cmp .hd{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem}
.cmp .before .hd{color:var(--muted)}
.cmp .after{background:var(--ink-3)}
.cmp .after .hd{color:var(--gold)}
.cmp ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.94rem;line-height:1.6}
.cmp li+li{margin-top:.5rem}
.cmp p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0}
.cmp p+p{margin-top:.9rem}
.cmp .after p{color:var(--text)}
.cmp .sign{color:var(--muted);font-style:italic}
.cmp .tail{margin-top:1.2rem;color:var(--dim);font-size:.88rem}

/* what changed */
.changes{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:760px){.changes{grid-template-columns:repeat(2,1fr)}}
.changes li{background:var(--ink-2);padding:1.5rem 1.35rem;transition:background .4s var(--ease)}
.changes li:hover{background:var(--ink-3)}
.changes h3{font-family:var(--serif);font-size:1.25rem;margin:0;font-weight:400;line-height:1.25}
.changes p{color:var(--muted);font-size:.89rem;margin:.55rem 0 0;line-height:1.55}

/* closing CTA band */
.band{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  padding:clamp(1.8rem,4vw,3.2rem);text-align:center}
.band h2{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.12;margin:.7rem 0 0}
.band p{color:var(--muted);margin:1rem auto 0;max-width:52ch;font-size:1rem}
.band .hero-cta{justify-content:center;margin-top:2rem}

/* skip link, shared */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#0B0D11;
  padding:.8rem 1.2rem;border-radius:0 0 4px 0;font-size:.9rem;text-decoration:none}
.skip:focus{left:0}

/* =================================================================== */
/*  FINAL POLISH                                                       */
/* =================================================================== */

/* ---- hero: one full-width cinematic column ------------------------ */
/* direct child only: the credential strip keeps its own flex row */
.hero > .wrap{display:block}
.hero-copy{min-width:0}
.hero h1{max-width:16ch}
.hero-lede{max-width:36ch}
.hero-sub{max-width:62ch}
.hero-hire{margin-top:1rem}
.hero-hire a{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(217,182,121,.35);padding:.75rem 0 .5rem;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.hero-hire a:hover{color:var(--gold-br);border-color:var(--gold-br)}
@media(min-width:1100px){
  .hero h1{font-size:clamp(3.4rem,9vw,8rem)}
  .hero-lede{font-size:clamp(1.2rem,2.1vw,1.75rem);max-width:40ch}
}

/* ---- recruiter pathway, always visible --------------------------- */
.nav a.hire-link{color:var(--gold);border:1px solid rgba(217,182,121,.42);border-radius:999px;
  padding:.34rem .9rem;transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav a.hire-link:hover{background:rgba(217,182,121,.12);border-color:var(--gold);color:var(--gold-br)}
@media(max-width:860px){.nav a.hire-link{align-self:flex-start}}

/* ---- project screenshots: more prominence ------------------------ */
@media(min-width:980px){
  .pj{grid-template-columns:.78fr 1.22fr}
  .pj--flip{grid-template-columns:1.22fr .78fr}
}
.pj-shot{padding:clamp(.9rem,2vw,1.5rem)}
.frame{box-shadow:0 34px 72px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03)}
.pj:hover .frame{box-shadow:0 40px 84px -34px rgba(0,0,0,.95),0 0 0 1px rgba(217,182,121,.14)}
.frame{transition:box-shadow .5s var(--ease)}

/* the one-line takeaway that replaces a third prose block */
.takeaway{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:1.12rem;line-height:1.35;color:var(--text);max-width:40ch}
.takeaway span{color:var(--gold)}

/* ---- toolkit: lighter ------------------------------------------- */
.oc p{font-size:.88rem;margin:.55rem 0 .9rem}
.oc .verb{font-size:1.26rem}

/* =================================================================== */
/*  ADOBE PORTFOLIO                                                    */
/* =================================================================== */
.vid{display:grid;gap:clamp(1.2rem,2.6vw,2rem);align-items:start}
@media(min-width:900px){.vid{grid-template-columns:1.08fr .92fr}}
.vid-embed{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-s);background:#000;
  box-shadow:0 34px 72px -34px rgba(0,0,0,.95)}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-side h3{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.18;margin:.6rem 0 0}
.vid-side p{color:var(--muted);font-size:.95rem;margin-top:.9rem;max-width:46ch}
.vid-stat{display:flex;align-items:baseline;gap:.7rem;margin-top:1.5rem;
  padding-top:1.3rem;border-top:1px solid var(--line)}
.vid-stat b{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold);font-weight:400}
.vid-stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}

/* publication index */
.pubx{list-style:none;margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(min-width:820px){.pubx{grid-template-columns:repeat(2,1fr)}}
.pubx li{background:var(--ink-2);padding:1.45rem clamp(1.1rem,2.6vw,1.7rem);
  display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:start;
  transition:background .4s var(--ease)}
.pubx li:hover{background:var(--ink-3)}
.pubx li:first-child{grid-column:1/-1}
.pubx .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--gold);padding-top:.4rem}
.pubx h3{font-family:var(--serif);font-size:1.3rem;line-height:1.2;margin:0;font-weight:400}
.pubx p{color:var(--muted);font-size:.89rem;margin:.5rem 0 0;line-height:1.56;max-width:52ch}

/* rights / provenance note */
.prov{margin-top:1.5rem;padding-left:.95rem;border-left:2px solid var(--violet);
  color:var(--muted);font-size:.88rem;line-height:1.6;max-width:64ch}
.prov b{color:var(--text);font-weight:500}

/* =================================================================== */
/*  BRAND INTRO  ~3.0s                                                 */
/*  A typographic logo reveal. Letters settle, light sweeps across the  */
/*  name, a hairline rule draws, the positioning lands, the whole       */
/*  composition holds, then lifts into the homepage.                    */
/*  No geometry: no webs, outlines, orbits, spinners or counters.       */
/*  Injected by script only, so a no-JS visitor never meets it.         */
/* =================================================================== */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink);isolation:isolate;overflow:hidden;
  animation:introOut .55s var(--ease) 2.5s both}

/* the light the name stands in */
.intro-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(34% 30% at 50% 47%,rgba(217,182,121,.3),transparent 76%),
    radial-gradient(62% 52% at 50% 50%,rgba(217,182,121,.07),transparent 78%),
    radial-gradient(70% 58% at 78% 72%,rgba(167,156,212,.14),transparent 80%),
    radial-gradient(64% 54% at 20% 30%,rgba(167,156,212,.1),transparent 80%);
  animation:introGlow 1.5s var(--ease) .25s both}
/* a soft vignette so the edges fall away */
.intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(78% 70% at 50% 50%,transparent 48%,rgba(6,8,11,.58) 100%)}

.intro-stage{position:relative;width:min(94vw,1040px);text-align:center;padding-inline:1rem}

/* ---- the name ---- */
.intro-mark{position:relative;margin:0;font-family:var(--serif);
  font-size:clamp(3.5rem,11.5vw,9rem);line-height:1.02;letter-spacing:-.024em;
  color:var(--text);white-space:nowrap}
.intro-mark .ch{display:inline-block;white-space:pre;
  animation:introCh .56s var(--ease) var(--d) both}
.intro-mark .dot{color:var(--gold);
  animation:introCh .56s var(--ease) var(--d) both,
            introFlare .7s var(--ease) 1.05s both}
/* light passing across the letterforms, lighting only the glyphs */
.intro-sheen{position:absolute;inset:0;pointer-events:none;
  font:inherit;letter-spacing:inherit;white-space:nowrap;
  background:linear-gradient(100deg,
    transparent 40%,rgba(255,244,214,.92) 50%,rgba(237,207,152,.7) 55%,transparent 66%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:introSheen .95s var(--ease) 1s both}

/* ---- the rule ---- */
.intro-rule{position:relative;height:1px;width:min(58%,520px);margin:clamp(1.4rem,2.8vw,2.2rem) auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),var(--lilac),transparent);
  box-shadow:0 0 14px rgba(217,182,121,.4);
  transform:scaleX(0);animation:introRule .62s var(--ease) 1.1s both}

/* ---- the positioning ---- */
.intro-tag{position:relative;margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .95rem;
  font-family:var(--mono);font-size:clamp(.82rem,2.6vw,1.18rem);letter-spacing:.34em;
  text-transform:uppercase;color:var(--text);
  animation:introTag .55s var(--ease) 1.3s both}
.intro-tag b{color:var(--gold);font-weight:400}

.intro-skip{position:absolute;right:max(1rem,3vw);bottom:max(1.2rem,3vw);z-index:2;
  min-height:46px;display:inline-flex;align-items:center;
  background:none;border:1px solid var(--line-s);border-radius:999px;cursor:pointer;
  color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.7rem 1.4rem;
  transition:color .25s var(--ease),border-color .25s var(--ease);
  animation:introTag .45s var(--ease) .5s both}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--gold);border-color:var(--gold)}

@keyframes introCh{
  from{opacity:0;transform:translateY(.34em) scale(.985);filter:blur(12px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes introFlare{
  0%{text-shadow:0 0 0 rgba(217,182,121,0)}
  40%{text-shadow:0 0 30px rgba(237,207,152,.9)}
  100%{text-shadow:0 0 0 rgba(217,182,121,0)}
}
@keyframes introSheen{from{background-position:150% 0}to{background-position:-60% 0}}
@keyframes introRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes introTag{from{opacity:0;letter-spacing:.56em}to{opacity:1}}
@keyframes introGlow{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;transform:scale(1.035);visibility:hidden}}

/* the smallest screens: let the name wrap rather than shrink to nothing */
@media(max-width:420px){
  .intro-mark{white-space:normal;font-size:clamp(2.9rem,15vw,3.6rem)}
  .intro-sheen{display:none}
  .intro-tag{font-size:.74rem;letter-spacing:.17em;gap:.35rem .5rem;flex-wrap:nowrap}
}

@media(max-width:560px){
  .intro-tag{font-size:.76rem;letter-spacing:.18em;gap:.35rem .55rem;flex-wrap:nowrap}
}

/* the page underneath must not scroll while the panel is up */
html.intro-on,html.intro-on body{overflow:hidden}

/* anyone who asked for less motion never sees any of this */
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  html.intro-on,html.intro-on body{overflow:auto}
}
}
}