@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:400 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic-var.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}

  /* ---- one system, two identities. Parent: pure black and white. Division: brings its own accent. ---- */
  :root{
    --bg:#000000; --fg:#FFFFFF; --g1:#C9C9C9; --g2:#8A8A8A;
    --surface:#0A0A0A; --surface-2:#161616; --line:rgba(255,255,255,.18);
    --accent:#FFFFFF; --accent-soft:#DADADA; --accent-dim:rgba(255,255,255,.42); --on-accent:#000000;
    --glow:transparent; --glow-2:transparent; --smoke:255,255,255;
    --caps:uppercase;
    --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --wrap:min(1160px,100% - 2.5rem);
    --ease:cubic-bezier(.2,.7,.2,1); --snap:cubic-bezier(.7,0,.3,1);
  }
  [data-brand="digital"]{
    --accent:#2E8E80; --accent-soft:#5FA29C; --accent-dim:rgba(46,142,128,.5); --on-accent:#000000;
    --glow:rgba(46,142,128,.5); --glow-2:rgba(46,77,74,.6); --smoke:62,160,145;
    --caps:none;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  h1,h2,h3{text-wrap:balance}
  p,li,figcaption{text-wrap:pretty}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  ::selection{background:var(--accent);color:var(--on-accent)}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  [hidden]{display:none!important}
  ul,ol{list-style:none}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
  .page:focus,.sent:focus{outline:none}
  .wrap{width:var(--wrap);margin-inline:auto}
  .skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.6rem 1rem;z-index:100}
  .skip:focus{left:1rem;top:1rem}

  /* curtain: page transitions and the opening */
  .curtain{position:fixed;inset:0;background:#000;z-index:80;transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
  .curtain.cover{transform:translateY(0);transition:transform .42s var(--snap)}
  .curtain.intro{transition:none}
  .curtain.reveal{transform:translateY(-100.5%);transition:transform .55s var(--snap) .06s}
  .cmark{width:54px;height:54px;border-radius:12px;background:#fff;color:#000;display:grid;place-items:center;font-weight:900;font-stretch:125%;font-size:1.6rem;opacity:0;transform:scale(.9)}
  .curtain.cover .cmark{opacity:1;transform:none;transition:opacity .3s .25s,transform .4s .25s var(--ease)}
  .curtain.intro .cmark{opacity:1;transform:none;transition:none}
  .curtain.reveal .cmark{opacity:0;transition:opacity .15s}

  .progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--fg);transform-origin:left;transform:scaleX(0);z-index:45;pointer-events:none}
  body.in-digital .progress{background:#5FA29C}

  /* nav (parent chrome, always monochrome) */
  .nav{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:transform .4s var(--ease)}
  .nav.hide{transform:translateY(-100%)}
  .nav .wrap{display:flex;align-items:center;gap:1.1rem;height:4.25rem;position:relative}
  .brand{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem;letter-spacing:-.01em;white-space:nowrap}
  .mark{width:26px;height:26px;border-radius:6px;flex:none;background:#fff;display:grid;place-items:center;color:#000;font-weight:900;font-size:.78rem;font-stretch:125%;line-height:1}
  .navtag{display:none;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#5FA29C;border:1px solid rgba(46,142,128,.7);border-radius:4px;padding:.22rem .45rem;line-height:1;white-space:nowrap}
  body.in-digital .navtag{display:inline-flex}
  .links{display:flex;gap:1.6rem;margin-left:auto;font-size:.95rem;color:var(--g1)}
  .links a{padding:.25rem 0;position:relative}
  .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .links a:hover{color:var(--fg)}
  .links a:hover::after,.links a[aria-current="page"]::after{transform:none}
  .links a[aria-current="page"]{color:var(--fg)}
  .links .cta-mobile{display:none}
  .lang{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
  .lang button{background:transparent;border:0;color:var(--g1);padding:.42rem .62rem;cursor:pointer;font:inherit;font-weight:600;font-size:.78rem;line-height:1;transition:background .2s,color .2s}
  .lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
  .menu{display:none;background:transparent;border:0;width:40px;height:40px;cursor:pointer;flex:none;margin-right:-.5rem}
  .menu span{display:block;width:20px;height:2px;background:var(--fg);margin:5px auto;transition:transform .25s var(--snap)}
  .nav.open .menu span:first-child{transform:translateY(7px) rotate(45deg)}
  .nav.open .menu span:last-child{transform:translateY(-7px) rotate(-45deg)}

  /* buttons: auto width, pairs match, sliding fill on hover */
  .btn{position:relative;isolation:isolate;overflow:hidden;will-change:transform;display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.5rem;border-radius:6px;font-weight:600;font-size:.95rem;line-height:1;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .25s,color .25s,transform .3s var(--ease)}
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform .4s var(--snap)}
  .btn:hover::before{transform:none}
  .btn:active{transform:scale(.98)}
  .btn.primary{background:var(--accent);color:var(--on-accent)}
  .btn.primary::before{background:var(--accent-soft)}
  .btn.ghost{border-color:rgba(255,255,255,.4);color:var(--fg)}
  .btn.ghost::before{background:rgba(255,255,255,.08)}
  .btn.ghost:hover{border-color:var(--fg)}
  .btn.small{padding:.62rem 1rem;font-size:.85rem}
  .actions{display:flex;flex-wrap:wrap;gap:.75rem}
  .fab{position:fixed;right:1rem;bottom:1rem;z-index:35;display:none;box-shadow:0 10px 30px rgba(0,0,0,.6)}
  @media(max-width:860px){body.scrolled:not(.on-contact) .fab{display:inline-flex;animation:pop .4s var(--ease) both}}
  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

  /* pages, sections, type */
  .page{display:none}
  .page.active{display:block}
  section{padding:clamp(4.5rem,10vw,8.5rem) 0;border-top:1px solid var(--line);position:relative}
  .page > section:first-child,.noline{border-top:0}
  .noline{padding-top:0}
  h1{font-weight:900;font-stretch:118%;font-size:clamp(2.8rem,7vw,5.8rem);line-height:.96;letter-spacing:-.03em;max-width:13em;text-transform:var(--caps)}
  h2{font-weight:900;font-stretch:112%;font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1;letter-spacing:-.025em;max-width:16em;text-transform:var(--caps)}
  h2.mid{font-size:clamp(1.8rem,3.8vw,2.8rem)}
  .lede{color:var(--g1);font-size:1.15rem;max-width:36em;margin-top:1.4rem}
  .kicker{color:var(--g1);margin-bottom:1rem}
  .crumbs{display:flex;flex-wrap:wrap;gap:.6rem;color:var(--g1);font-size:.9rem;margin-bottom:1.4rem}
  .crumbs a,.of a,.kicker a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:color .2s}
  .crumbs a:hover,.of a:hover,.kicker a:hover{color:var(--fg)}
  .crumbs span{color:var(--g2)}
  .tag2{font-family:var(--serif);font-style:italic;font-optical-sizing:auto;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2;margin-top:1rem;max-width:22em}
  .tag2,.ent,.manifesto,.problems em,.name,.hero .tag,.pw,.ledger .num,.steps li::before{font-weight:500;font-variation-settings:"opsz" 22}
  .more{display:inline-block;margin-top:2.2rem;color:var(--accent-soft);font-weight:600;background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease)}
  .more:hover{background-size:100% 1px}
  .phero{padding:clamp(4rem,10vw,7.5rem) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
  .phero .wrap{position:relative}
  .phero .actions{margin-top:2.2rem}
  .cols{display:grid;gap:2.5rem}
  @media(min-width:900px){.cols{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}}
  .cols .lede{margin-top:0}
  .cols h2 + .lede{margin-top:1.4rem}
  .prose{max-width:38em;display:grid;gap:1.2rem;font-size:1.15rem;color:var(--g1)}
  .prose strong{color:var(--fg);font-weight:600}

  /* smoke canvas */
  .smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}

  /* home hero: the monument */
  .hero{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7rem) 0 clamp(5rem,10vw,8rem);border-top:0;min-height:calc(100vh - 4.25rem);display:flex;align-items:center}
  .hero .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 45% at 50% -8%,var(--glow),transparent 70%)}
  .hero .wrap{position:relative;width:var(--wrap)}
  .monument{max-width:none;line-height:.85;margin-bottom:1.4rem}
  .surname{display:inline-block;white-space:nowrap;text-transform:uppercase;font-weight:900;font-stretch:125%;letter-spacing:-.04em;line-height:.85;font-size:14vw;overflow:hidden;padding-bottom:.04em;vertical-align:top}
  .surname .l{display:inline-block;transform:translateY(112%);animation:letter 1s var(--ease) forwards,glint 7s ease-in-out infinite;animation-delay:calc(.35s + var(--i)*55ms),calc(2.6s + var(--i)*110ms)}
  @keyframes letter{to{transform:none}}
  @keyframes glint{0%,7%,100%{color:var(--fg)}3.5%{color:#6E6E6E}}
  .rule{display:block;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;animation:rulein 1.1s .95s var(--snap) forwards;margin:.2em 0 .1em}
  @keyframes rulein{to{transform:none}}
  .ent{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:0;font-size:clamp(1.6rem,3.6vw,2.8rem);color:var(--fg);margin-top:.55rem;line-height:1.1}
  .hero .tag{display:inline-block;position:relative;font-family:var(--serif);font-style:italic;font-optical-sizing:auto;font-size:clamp(2.1rem,4.8vw,4rem);line-height:1.1;margin:.5rem 0 1.8rem}
  .hero .tag svg{position:absolute;left:-2%;bottom:-.3em;width:104%;height:.5em;overflow:visible;pointer-events:none}
  .hero .tag path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s 1.25s var(--ease) forwards}
  .hero p{max-width:34em;color:var(--g1);font-size:1.2rem;margin-bottom:2.2rem}
  .rise{animation:rise .9s var(--ease) both;animation-delay:var(--d,0s)}
  .cue{position:absolute;right:0;bottom:-2.5rem;width:1px;height:56px;background:linear-gradient(var(--fg),transparent);animation:cue 2s ease-in-out infinite;opacity:.8}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* scroll reveals: quick, small, staggered by list position */
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
  [data-reveal].in{opacity:1;transform:none}

  /* divisions ledger: a real sequence, so it is numbered; outlined names are not open yet */
  .ledger{margin-top:2.5rem;border-top:1px solid var(--line)}
  .ledger a{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.35rem 1rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line);position:relative}
  .ledger a::before{content:"";position:absolute;inset:0 -1rem;background:rgba(255,255,255,.04);opacity:0;transition:opacity .25s;border-radius:6px}
  .ledger a:hover::before{opacity:1}
  .ledger .num{font-family:var(--serif);font-style:italic;color:var(--g2);font-size:1.2rem;position:relative}
  .ledger .dname{position:relative;font-weight:900;font-stretch:118%;font-size:clamp(1.55rem,3.6vw,2.6rem);line-height:1;letter-spacing:-.02em;color:var(--fg);transition:color .3s}
  .ledger .is-soon .dname{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75)}
  .ledger a:hover .is-soon .dname,.ledger .is-soon a:hover .dname{color:var(--fg)}
  .ledger .dline{position:relative;color:var(--g1);grid-column:2/4;font-size:1rem}
  .ledger .dstatus{position:relative;font-size:.85rem;color:var(--g1);white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
  .ledger .is-active .dstatus{color:var(--accent-soft)}
  .ledger .is-active .dstatus::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 10px var(--accent)}50%{box-shadow:0 0 22px var(--accent)}}
  @media(min-width:800px){
    .ledger a{grid-template-columns:3.5rem minmax(0,1.1fr) minmax(0,1.4fr) auto;padding:1.9rem 0;gap:1.4rem}
    .ledger .dline{grid-column:auto}
  }

  /* coming soon: outlined type means not yet filled in */
  .giant{font-size:clamp(4rem,14vw,11.5rem);line-height:.9;letter-spacing:-.04em;max-width:none;text-transform:uppercase;font-stretch:125%;transition:color .5s}
  @supports (-webkit-text-stroke:1px black){.giant{color:transparent;-webkit-text-stroke:2px var(--fg)}.giant:hover{color:var(--fg)}}

  /* division wordmark with hand-drawn ring, drawn when it scrolls into view */
  .division{margin-bottom:2.5rem}
  .wordmark{position:relative;isolation:isolate;display:inline-block;font-weight:900;font-stretch:125%;font-size:clamp(2.8rem,7.8vw,6.4rem);line-height:.95;letter-spacing:-.03em;padding:.28em .42em;margin:-.28em -.42em;max-width:none;text-transform:none}
  .wordmark svg{position:absolute;inset:-6% -4%;width:108%;height:112%;overflow:visible;pointer-events:none;z-index:-1}
  .wordmark path{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
  .wordmark.in path,.phero .wordmark path{animation:draw 1.2s .3s var(--ease) forwards}
  .of{color:var(--g1);margin-top:1.4rem}

  /* service rows and problem rows (links) */
  .services,.problems{margin-top:2.5rem;border-top:1px solid var(--line)}
  .services a,.problems a{position:relative;display:grid;gap:.4rem 2rem;padding:1.7rem 0;border-bottom:1px solid var(--line)}
  .services a::before,.problems a::before{content:"";position:absolute;inset:0 -1rem;background:rgba(255,255,255,.04);opacity:0;transition:opacity .25s;border-radius:6px}
  .services a:hover::before,.problems a:hover::before{opacity:1}
  .services a > *,.problems a > *{position:relative}
  @media(min-width:720px){.services a{grid-template-columns:minmax(0,1fr) minmax(0,2fr);padding:2.1rem 0}.problems a{grid-template-columns:1fr auto;align-items:baseline}}
  .services h3{font-weight:900;font-stretch:112%;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1;letter-spacing:-.02em;transition:color .25s,transform .35s var(--ease)}
  .services a:hover h3{color:var(--accent-soft);transform:translateX(.15em)}
  .services p{color:var(--g1);max-width:34em;font-size:1.08rem}
  .problems em{font-family:var(--serif);font-style:italic;font-optical-sizing:auto;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.15;transition:color .25s}
  .problems span{color:var(--accent-soft);font-weight:600;white-space:nowrap}
  .problems a:hover em{color:var(--accent-soft)}

  /* checklist */
  .list{border-top:1px solid var(--line)}
  .list li{padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--line);position:relative}
  .list li::before{content:"";position:absolute;left:0;top:1.4rem;width:16px;height:12px;background:var(--accent);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 L6 10.5 L14.5 1.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 L6 10.5 L14.5 1.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
  .note{color:var(--g1);max-width:36em;margin-top:1.5rem;font-size:1rem}

  /* numbered steps (a real sequence) */
  .steps{counter-reset:step;display:grid;margin-top:2.5rem;border-top:1px solid var(--line)}
  .steps li{padding:1.5rem 0 1.5rem 3.2rem;position:relative;border-bottom:1px solid var(--line)}
  .steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:1.45rem;font-family:var(--serif);font-style:italic;font-size:1.8rem;line-height:1;color:var(--accent-soft)}
  .steps h3{font-weight:700;font-size:1.18rem;letter-spacing:-.01em;margin-bottom:.3rem}
  .steps p{color:var(--g1);max-width:30em}
  @media(min-width:800px){
    .steps{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;border-top:0}
    .steps li{padding:1.4rem 0 0;border-bottom:0;border-top:1px solid var(--line)}
    .steps li::before{position:static;display:block;margin-bottom:1rem}
  }

  /* principles */
  .principles{display:grid;margin-top:3rem;border-top:1px solid var(--line)}
  @media(min-width:720px){.principles{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}.principles.four{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.principles.four{grid-template-columns:repeat(4,1fr)}}
  .principles li{padding:1.6rem 0;border-bottom:1px solid var(--line)}
  @media(min-width:720px){.principles li{border-bottom:0}}
  .principles strong{display:block;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.3rem}
  .principles span{color:var(--g1)}
  .manifesto{font-family:var(--serif);font-style:italic;font-optical-sizing:auto;font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.15;max-width:24em;margin-top:1.6rem}

  /* work: plates hold a stylized screen of the client's actual design */
  .work-grid{display:grid;gap:2.75rem;margin-top:2.75rem}
  @media(min-width:900px){.work-grid{grid-template-columns:7fr 5fr;gap:2rem 2.5rem}.piece.big{grid-row:1/3}}
  @media(min-width:640px){.work-grid.three{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:960px){.work-grid.three{grid-template-columns:repeat(3,1fr)}}
  .work-grid.three .piece.big{grid-row:auto}
  @media(min-width:700px){.work-grid.two{grid-template-columns:1fr 1fr;gap:2.5rem}}
  .piece{display:block}
  .piece h3{font-weight:700;font-size:1.3rem;letter-spacing:-.01em;transition:color .25s}
  .piece:hover h3{color:var(--accent-soft)}
  .piece .meta{color:var(--accent-soft);font-size:.92rem;margin:.2rem 0 .1rem}
  .piece .ind{color:var(--g1);font-size:.92rem;margin-bottom:.55rem}
  .piece p{color:var(--g1);max-width:34em}
  .plate{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:4/3;margin-bottom:1.1rem;background:linear-gradient(160deg,var(--surface-2),var(--bg));border:1px solid rgba(255,255,255,.08)}
  @media(min-width:900px){.work-grid:not(.three) .piece.big .plate{aspect-ratio:4/5}}
  .plate .pw{position:absolute;left:-.04em;bottom:-.28em;font-family:var(--serif);font-style:italic;font-size:clamp(4rem,12vw,9rem);line-height:.9;color:var(--fg);opacity:.08;white-space:nowrap;letter-spacing:-.02em}
  .plate.p1{background:radial-gradient(55% 45% at 88% 12%,rgba(232,93,4,.22),transparent 70%),radial-gradient(80% 70% at 30% 110%,rgba(46,142,128,.4),transparent 70%),linear-gradient(160deg,#101615,#000)}
  .plate.p2{background:radial-gradient(50% 40% at 85% 15%,rgba(212,175,55,.18),transparent 70%),radial-gradient(70% 60% at 10% 100%,rgba(46,77,74,.7),transparent 70%),linear-gradient(200deg,#0e1211,#000)}
  .plate.p3{background:radial-gradient(70% 60% at 10% 0%,rgba(95,162,156,.34),transparent 70%),linear-gradient(160deg,#101615,#000)}
  .screen{position:absolute;left:9%;right:9%;top:11%;bottom:-8%;transform:perspective(1400px) rotateX(5deg) rotateY(-6deg);transform-origin:50% 40%;transition:transform .7s var(--ease);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
  .screen svg{width:100%;height:auto}
  .piece:hover .screen{transform:perspective(1400px) rotateX(0) rotateY(0) translateY(-6px)}
  .plate.p2 .screen{left:22%;right:22%;top:8%}
  .plate.p3 .screen{left:14%;right:14%;top:10%}
  .hero-plate{aspect-ratio:16/9;margin:0;border-radius:12px}
  .hero-plate .pw{font-size:clamp(4rem,16vw,14rem)}
  .hero-plate .screen{left:22%;right:22%;top:10%;bottom:-10%;transform:perspective(1600px) rotateX(4deg) translateY(var(--py,0px))}
  .hero-plate.p2 .screen{left:34%;right:34%;top:6%}
  .hero-plate.p3 .screen{left:28%;right:28%}
  @media(max-width:640px){.hero-plate{aspect-ratio:4/3}.hero-plate .screen{left:10%;right:10%}.hero-plate.p2 .screen{left:26%;right:26%}.hero-plate.p3 .screen{left:16%;right:16%}}
  .screen img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px;border:1px solid #2B2B2B;background:#0B0B0B}
  .gallery-sec:has(.gallery:empty){display:none}
  .gallery{display:grid;gap:1.25rem;margin-top:2.5rem}
  @media(min-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
  .gallery figure{margin:0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:var(--surface);cursor:zoom-in}
  .gallery img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
  .gallery figure:hover img{transform:scale(1.02)}
  .lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
  .lightbox.open{display:flex;animation:fadein .25s ease both}
  .lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.8)}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  .facts{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.6rem;font-size:.95rem;align-content:start}
  .facts dt{color:var(--g1)}
  .cols-hero{display:grid;gap:2.5rem}
  @media(min-width:900px){.cols-hero{grid-template-columns:7fr 5fr;gap:4rem;align-items:end}}
  .nextlink{display:inline-block;margin-top:.4rem;font-weight:900;font-stretch:118%;font-size:clamp(2.2rem,5.4vw,4rem);letter-spacing:-.03em;line-height:1;transition:color .25s,transform .4s var(--ease)}
  .nextlink:hover{color:var(--accent-soft);transform:translateX(.1em)}
  .also{border-top:1px solid var(--line);margin-top:2.5rem}
  .also li{padding:1rem 0;border-bottom:1px solid var(--line);color:var(--g1);max-width:40em}

  /* faq */
  .faq{margin-top:2.5rem;border-top:1px solid var(--line);max-width:44em}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;padding:1.25rem 0;font-weight:700;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;transition:color .2s}
  .faq summary:hover{color:var(--accent-soft)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--accent-soft);font-weight:400;font-size:1.6rem;line-height:1;flex:none;transition:transform .3s var(--snap)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq p{color:var(--g1);padding:0 0 1.3rem;max-width:40em;animation:rise .4s var(--ease) both}

  /* cta band */
  .ctaband{position:relative;overflow:hidden}
  .ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 95% 100%,var(--glow),transparent 70%)}
  .ctaband .wrap{position:relative}
  .ctaband .actions{margin-top:2.2rem}

  /* founder */
  .founder-grid{display:grid;gap:3rem}
  @media(min-width:900px){.founder-grid{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}}
  .portrait{aspect-ratio:4/5;max-width:420px;border-radius:10px;padding:1.5rem;display:grid;place-items:center;background:radial-gradient(75% 60% at 20% 100%,var(--glow),transparent 70%),linear-gradient(160deg,var(--surface-2),var(--bg));border:1px solid rgba(255,255,255,.08)}
  .portrait svg{width:60%;height:auto}
  .portrait path{fill:none;stroke:var(--fg);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
  .portrait.in path{animation:draw 1.6s .2s var(--ease) forwards}
  .name{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-size:clamp(2.9rem,6.8vw,5rem);letter-spacing:-.015em;line-height:1;margin-top:.3rem;max-width:none;text-transform:none}
  .handle{display:inline-block;margin-top:1.4rem;color:var(--accent-soft);font-weight:600;background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease)}
  .handle:hover{background-size:100% 1px}

  /* contact: underline fields */
  .contact-grid{display:grid;gap:3.5rem}
  @media(min-width:900px){.contact-grid{grid-template-columns:7fr 5fr;gap:5rem;align-items:start}}
  .formsec{padding-top:clamp(2.5rem,5vw,4rem)}
  .contact-grid h2.mid{margin-bottom:2rem}
  .form{display:grid;gap:2rem}
  .row2{display:grid;gap:2rem}
  @media(min-width:600px){.row2{grid-template-columns:1fr 1fr;gap:2rem}}
  .field{display:grid;gap:.55rem;position:relative}
  .field label{font-size:.9rem;color:var(--g1);transition:color .2s}
  .field:focus-within label{color:var(--fg)}
  .field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg);padding:.95rem 0;font:inherit;font-size:1.1rem;width:100%;transition:border-color .25s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--fg)}
  .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .field:focus-within::after{transform:none}
  .field input::placeholder,.field textarea::placeholder{color:rgba(201,201,201,.5)}
  .field select{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 L7 7 L12.5 1.5' fill='none' stroke='%23C9C9C9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;background-size:14px 9px}
  .field select option{background:#0A0A0A;color:#fff}
  .field textarea{min-height:130px;resize:vertical}
  .field.bad input{border-bottom-color:#E0553A}
  .form .btn{justify-self:start;margin-top:.6rem}
  .sent{border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:1.8rem;background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
  .sent svg{width:44px;height:44px}
  .sent circle,.sent path{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
  .sent circle{animation:draw .6s var(--ease) forwards}
  .sent path{animation:draw .5s .45s var(--ease) forwards}
  .sent h3{font-weight:700;font-size:1.25rem;margin-bottom:.4rem}
  .sent p{color:var(--g1)}
  .side h3{font-weight:700;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.6rem}
  .side .block{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
  .side .block:last-child{border-bottom:0;margin-bottom:0}
  .side p{color:var(--g1);max-width:28em}
  .side a.line{color:var(--fg);background:linear-gradient(var(--fg),var(--fg)) no-repeat 0 100%/100% 1px}
  .side .actions{margin-top:1rem}
  .side .steps{margin-top:1.2rem}
  @media(min-width:800px){.side .steps{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}.side .steps li{padding:1.3rem 0 1.3rem 3rem;border-top:0;border-bottom:1px solid var(--line)}.side .steps li::before{position:absolute;margin:0}}

  /* footer with the watermark */
  footer{border-top:1px solid var(--line);position:relative;overflow:hidden}
  .watermark{width:var(--wrap);margin:3rem auto -1.2rem;line-height:.8;pointer-events:none}
  .watermark span{display:inline-block;white-space:nowrap;text-transform:uppercase;font-weight:900;font-stretch:125%;letter-spacing:-.04em;line-height:.8;font-size:14vw;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
  .footgrid{display:grid;gap:2.5rem;padding:3rem 0 2.5rem;border-top:1px solid var(--line)}
  @media(min-width:700px){.footgrid{grid-template-columns:1fr 1fr}}
  @media(min-width:1000px){.footgrid{grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3rem}}
  .footgrid h4{font-size:.95rem;font-weight:700;margin-bottom:.9rem}
  .footgrid ul{display:grid;gap:.5rem;color:var(--g1);font-size:.95rem}
  .footgrid ul a{transition:color .2s}
  .footgrid ul a:hover{color:var(--fg)}
  .footgrid small{color:var(--g2);font-size:.8rem;margin-left:.4rem}
  .footgrid .about{color:var(--g1);max-width:24em;margin-top:1rem;font-size:.95rem}
  .footbottom{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding:1.5rem 0 2.75rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--g1)}

  /* mobile nav */
  @media(max-width:860px){
    .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:1.4rem;padding:1.75rem 1.25rem 2rem;background:#000;border-bottom:1px solid var(--line);font-size:1.6rem;font-weight:700;color:var(--fg);letter-spacing:-.01em}
    .links a::after{display:none}
    .links a[aria-current="page"]{color:var(--g1)}
    .nav.open .links{display:flex}
    .nav.open .links a{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*50ms)}
    .links .cta-mobile{display:inline-flex;align-self:flex-start;font-size:.95rem;font-weight:600;letter-spacing:0;margin-top:.4rem}
    .lang{margin-left:auto}
    .cta{display:none}
    .menu{display:block}
    .hero{min-height:0}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .hero .tag path,.wordmark path,.portrait path,.sent circle,.sent path{stroke-dashoffset:0}
    .surname .l{transform:none}
    [data-reveal]{opacity:1;transform:none}
    .curtain{display:none}
  }

  .lang a{display:inline-flex;align-items:center;color:var(--g1);padding:.42rem .62rem;font-weight:600;font-size:.78rem;line-height:1;transition:background .2s,color .2s}
  .lang a[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
  .lang a:hover{color:var(--fg)}