:root{
    --black:#0a0a0b;
    --black-soft:#141416;
    --black-card:#1b1b1e;
    --paper:#edeae1;
    --paper-dim:#a9a69c;
    --paper-faint:#605e58;
    --accent:#ff2d55;
    --display: 'Bebas Neue', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(.16,.8,.24,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; background:var(--black); }
  body{
    background:var(--black);
    color:var(--paper);
    font-family:var(--body);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent); color:var(--black); }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }

  /* ---------- shutter intro ---------- */
  .curtain{ position:fixed; inset:0; z-index:500; pointer-events:none; }
  .curtain-clip{
    position:absolute; inset:-15%;
    clip-path:circle(150% at 50% 50%);
    transition:clip-path 1.15s var(--ease);
  }
  body.curtain-open .curtain-clip{ clip-path:circle(0% at 50% 50%); }
  .curtain-iris{ position:absolute; inset:0; background:var(--black); }
  .curtain-flash{ position:absolute; inset:-15%; z-index:3; background:#fff; opacity:0; }
  body.curtain-open .curtain-flash{ animation:curtainFlash .6s ease-out forwards; }
  @keyframes curtainFlash{ 0%{opacity:0;} 14%{opacity:1;} 55%{opacity:0;} 100%{opacity:0;} }
  .curtain-mark{
    position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:22px;
    opacity:0; transform:scale(.94); animation:curtainMarkIn .9s var(--ease) .15s forwards;
  }
  .curtain-name{
    font-family:var(--display); font-size:clamp(34px,11vw,150px); letter-spacing:.02em;
    text-transform:uppercase; color:var(--paper); line-height:1; text-align:center;
  }
  .curtain-eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  }
  .curtain-bar{ width:140px; height:2px; background:rgba(237,234,225,.15); overflow:hidden; }
  .curtain-bar-fill{ display:block; height:100%; width:0%; background:var(--accent); animation:curtainBarFill 1.3s var(--ease) .35s forwards; }
  @keyframes curtainMarkIn{ to{ opacity:1; transform:scale(1); } }
  @keyframes curtainBarFill{ to{ width:100%; } }
  body.curtain-done .curtain{ display:none; }
  @media (prefers-reduced-motion: reduce){ .curtain{ display:none !important; } }

  /* ---------- custom cursor ---------- */
  .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:400; border-radius:50%; transform:translate(-50%,-50%); }
  .cursor-dot{ width:6px; height:6px; background:var(--accent); }
  .cursor-ring{ width:32px; height:32px; border:1px solid rgba(237,234,225,.45); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
  .cursor-ring.hovering{ width:58px; height:58px; border-color:var(--accent); background:rgba(255,45,85,.08); }
  @media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none !important; } }

  /* ---------- grain overlay ---------- */
  .grain{
    position:fixed; inset:-100px; z-index:200; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainshift 8s steps(8) infinite;
  }
  @keyframes grainshift{
    0%{ transform:translate(0,0); } 12.5%{ transform:translate(-5%,10%); }
    25%{ transform:translate(-15%,5%); } 37.5%{ transform:translate(7%,-10%); }
    50%{ transform:translate(-5%,15%); } 62.5%{ transform:translate(15%,0); }
    75%{ transform:translate(0,10%); } 87.5%{ transform:translate(-10%,5%); }
    100%{ transform:translate(0,0); }
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 5vw; transition:all .5s var(--ease);
  }
  .nav.scrolled{
    padding:16px 5vw; background:rgba(10,10,11,.7);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(237,234,225,.08);
  }
  .nav-mark{ font-family:var(--display); font-size:22px; letter-spacing:.08em; }
  .nav-mark span{ color:var(--accent); }
  .nav-links{ display:flex; gap:36px; list-style:none; }
  .nav-links a{
    font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--paper-dim); position:relative; transition:color .3s;
  }
  .nav-links a:hover{ color:var(--paper); }
  .nav-toggle{ display:none; background:none; border:0; color:var(--paper); font-size:22px; cursor:pointer; }

  /* text-roll hover, used on nav + footer links */
  .link-roll{ display:inline-flex; flex-direction:column; overflow:hidden; height:1em; line-height:1; vertical-align:top; }
  .link-roll span{ display:block; transition:transform .45s var(--ease); }
  a:hover .link-roll span{ transform:translateY(-100%); }

  @media (max-width:760px){
    .nav-links{
      position:fixed; inset:0 0 0 auto; width:72vw; height:100vh;
      background:var(--black-soft); flex-direction:column; justify-content:center;
      align-items:flex-start; gap:28px; padding:0 36px;
      transform:translateX(100%); transition:transform .5s var(--ease);
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-toggle{ display:block; z-index:101; }
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative; overflow:hidden; background:var(--black);
  }
  .hero-media{
    position:relative; width:100%; overflow:hidden;
    background:var(--black);
  }
  .hero-media img{
    width:100%; height:auto; display:block;
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(10,10,11,.1) 0%, rgba(10,10,11,.42) 55%, rgba(10,10,11,.97) 100%);
  }
  .hero-spot{
    position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:overlay;
    background:radial-gradient(circle at var(--x,50%) var(--y,35%), rgba(255,255,255,.22), transparent 42%);
  }
  .hero-content{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    padding:0 5vw 64px;
  }
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--accent); margin-bottom:18px; opacity:0; animation:riseIn .8s var(--ease) .2s forwards;
  }
  .hero-title{
    font-family:var(--display); line-height:.86; letter-spacing:.01em;
    font-size:clamp(40px, 13vw, 168px); text-transform:uppercase; overflow:hidden;
  }
  .hero-title .line{ overflow:hidden; }
  .hero-title span{
    display:block; transform:translateY(110%); opacity:0;
    animation:riseIn 1s var(--ease) forwards;
  }
  .hero-title .l2{ color:transparent; -webkit-text-stroke:1.5px var(--paper); }
  .hero-title .line:nth-child(1) span{ animation-delay:.35s; }
  .hero-title .line:nth-child(2) span{ animation-delay:.5s; }
  @keyframes riseIn{ to{ transform:translateY(0); opacity:1; } }

  .hero-subtitle{
    font-family:var(--mono); font-size:14px; letter-spacing:.35em; text-transform:uppercase;
    color:var(--paper-dim); margin-top:14px;
    opacity:0; animation:fadeUp .9s var(--ease) .75s forwards;
  }

  .hero-foot{
    display:flex; justify-content:space-between; align-items:flex-end; margin-top:34px;
    gap:24px; flex-wrap:wrap;
    opacity:0; animation:fadeUp .9s var(--ease) .9s forwards;
  }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
  .hero-tagline{ max-width:360px; color:var(--paper-dim); font-size:15px; line-height:1.6; }
  .hero-meta{ font-family:var(--mono); font-size:12px; color:var(--paper-faint); text-align:right; line-height:1.8; }
  .scroll-cue{
    position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%);
    font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--paper-faint);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    opacity:0; animation:fadeUp .9s var(--ease) 1.2s forwards;
  }
  .scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation:bardrop 1.8s ease-in-out infinite; }
  @keyframes bardrop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

  /* ---------- marquee ---------- */
  .marquee-wrap{
    border-top:1px solid rgba(237,234,225,.1); border-bottom:1px solid rgba(237,234,225,.1);
    padding:20px 0; overflow:hidden; background:var(--black-soft);
  }
  .marquee{ display:flex; width:max-content; animation:scroll 32s linear infinite; }
  .marquee-wrap:hover .marquee{ animation-play-state:paused; }
  .marquee-item{
    font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--paper-dim);
    display:flex; align-items:center; gap:14px; padding:0 28px; white-space:nowrap;
  }
  .marquee-item b{ color:var(--paper); font-weight:500; }
  .marquee-item .dot{ color:var(--accent); }
  @keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ---------- section shell ---------- */
  section{ padding:140px 5vw; position:relative; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap; }
  .section-num{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.15em; margin-bottom:14px; display:block; }
  .section-title{ font-family:var(--display); font-size:clamp(30px,6vw,72px); text-transform:uppercase; line-height:.95; }
  .section-sub{ font-family:var(--mono); font-size:12px; color:var(--paper-faint); max-width:240px; text-align:right; line-height:1.7; }
  .keywords{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:60px;
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-faint);
  }
  .keywords span{ padding:6px 14px; border:1px solid rgba(237,234,225,.15); border-radius:999px; }
  .keywords span:hover{ color:var(--paper); border-color:var(--accent); transition:.3s; }

  .reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .tilt{ transition:transform .45s var(--ease); transform-style:preserve-3d; will-change:transform; }

  /* ---------- gallery (masonry, natural aspect ratios) ---------- */
  .gallery{ columns:3 320px; column-gap:22px; }
  @media (max-width:900px){ .gallery{ columns:2 240px; } }
  @media (max-width:560px){ .gallery{ columns:1; } }

  /* ---------- editorial project pages (constrained width, magazine rhythm) ---------- */
  .editorial-intro{ max-width:680px; margin:0 auto 56px; text-align:center; }
  .editorial-intro p{ color:var(--paper-dim); font-size:18px; line-height:1.8; }

  .editorial-meta{
    display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
    max-width:760px; margin:0 auto 72px; padding:26px 0;
    border-top:1px solid rgba(237,234,225,.14); border-bottom:1px solid rgba(237,234,225,.14);
  }
  .editorial-meta-item{ text-align:center; }
  .editorial-meta-item .label{
    display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--paper-faint); margin-bottom:6px;
  }
  .editorial-meta-item .value{ font-family:var(--display); font-size:19px; text-transform:uppercase; letter-spacing:.02em; }

  .editorial{ max-width:780px; margin:0 auto; }
  .editorial-block{ margin-bottom:56px; }
  .editorial-block.full{ max-width:820px; margin-left:auto; margin-right:auto; }
  .editorial-block.pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .editorial-block.offset{ max-width:400px; }
  .editorial-block.offset.right{ margin-left:auto; margin-right:0; }
  .editorial-block .frame{ margin-bottom:0; }

  .editorial-text{ max-width:600px; margin:0 auto 56px; }
  .editorial-text p{ color:var(--paper-dim); font-size:17px; line-height:1.8; }

  @media (max-width:760px){
    .editorial-block.pair{ grid-template-columns:1fr; gap:20px; }
    .editorial-block.offset,.editorial-block.offset.right{ max-width:100%; margin:0; }
    .editorial-meta{ gap:24px 40px; }
  }

  /* legacy editorial-gallery (still used where a simpler grouped layout suffices) */
  .editorial-gallery{ display:flex; flex-direction:column; gap:28px; }
  .editorial-row.pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .editorial-row.feature{ max-width:600px; margin:0 auto; }
  .editorial-row .frame{ margin-bottom:0; }
  @media (max-width:700px){
    .editorial-row.pair{ grid-template-columns:1fr; }
    .editorial-row.feature{ max-width:100%; }
  }

  .frame{
    position:relative; overflow:hidden; border-radius:2px; background:var(--black-card);
    break-inside:avoid; margin-bottom:22px; display:block; cursor:pointer;
  }
  .art{
    position:relative; width:100%; height:auto; display:block;
    clip-path:circle(0% at 50% 50%);
    transition:clip-path 1.1s var(--ease);
  }
  .frame.in .art{ clip-path:circle(75% at 50% 50%); }
  .frame:hover .frame-glow{ background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.94) 100%); }

  .frame-glow{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.9) 100%); transition:background .5s var(--ease); pointer-events:none; }

  .cap{ position:absolute; left:18px; bottom:16px; right:18px; z-index:3; }
  .cap .artist{ font-family:var(--display); font-size:22px; letter-spacing:.02em; text-transform:uppercase; }
  .cap .meta{ font-family:var(--mono); font-size:11px; color:var(--paper-dim); margin-top:4px; letter-spacing:.03em; }

  /* ---------- pinned story sequence ---------- */
  .story{ background:var(--black); }
  .story-block{ position:relative; overflow:hidden; }
  .story-block + .story-block{ margin-top:2px; }
  .story-media{
    position:relative; width:100%; max-height:82vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:var(--black);
  }
  .story-bg{
    width:100%; height:auto; max-height:82vh; object-fit:contain; display:block;
  }
  .story-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.22) 42%, rgba(10,10,11,.92) 100%);
  }
  .story-text{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:0 5vw 48px; max-width:640px;
  }
  .story-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin-bottom:16px; }
  .story-heading{ font-family:var(--display); font-size:clamp(28px,6.4vw,64px); text-transform:uppercase; line-height:1.02; margin-bottom:16px; }
  .story-copy{ font-size:16px; color:var(--paper-dim); line-height:1.75; max-width:44ch; }

  /* ---------- about ---------- */
  .about{ display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; }
  @media (max-width:820px){ .about{ grid-template-columns:1fr; } }
  .about-portrait{
    border-radius:2px; overflow:hidden; position:relative;
  }
  .about-portrait img{
    width:100%; height:auto; display:block;
  }
  .about-body p{ color:var(--paper-dim); font-size:16px; line-height:1.85; margin-bottom:22px; max-width:52ch; }
  .about-body p strong{ color:var(--paper); font-weight:600; }

  .spec-sheet{ margin-top:36px; border-top:1px solid rgba(237,234,225,.12); }
  .spec-row{
    display:flex; justify-content:space-between; padding:14px 0; gap:20px;
    border-bottom:1px solid rgba(237,234,225,.12); font-family:var(--mono); font-size:12.5px;
  }
  .spec-row span:first-child{ color:var(--paper-faint); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
  .spec-row span:last-child{ color:var(--paper); text-align:right; }
  @media (max-width:600px){
    .spec-row{ flex-direction:column; gap:6px; }
    .spec-row span:last-child{ text-align:left; }
  }

  /* ---------- secondary services ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; }
  @media (max-width:820px){ .services-grid{ grid-template-columns:1fr; } }

  /* ---------- personal / about-me section ---------- */
  .personal{ display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:center; }
  @media (max-width:900px){ .personal{ grid-template-columns:1fr; gap:40px; } }
  .personal-media{ border-radius:2px; overflow:hidden; background:var(--black-card); }
  .personal-media img{ width:100%; height:auto; display:block; }
  .personal-media-placeholder{
    aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, var(--black-card), var(--black-soft));
    border:1px solid rgba(237,234,225,.1);
  }
  .personal-media-placeholder span{
    font-family:var(--display); font-size:22px; color:var(--paper-faint); letter-spacing:.03em; text-transform:uppercase;
  }
  .personal-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin-bottom:20px; }
  .personal-heading{ font-family:var(--display); font-size:clamp(34px,4.2vw,58px); text-transform:uppercase; line-height:1.04; margin-bottom:26px; }
  .personal-body p{ color:var(--paper-dim); font-size:17px; line-height:1.85; max-width:52ch; }
  .personal-body p + p{ margin-top:18px; }
  .personal-cta{
    display:inline-flex; align-items:center; gap:12px; margin-top:36px;
    font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper); padding-bottom:6px; border-bottom:1px solid var(--accent);
    transition:gap .3s var(--ease), color .3s var(--ease);
  }
  .personal-cta:hover{ gap:18px; color:var(--accent); }
  .personal-cta .arrow{ transition:transform .3s var(--ease); }
  .personal-cta:hover .arrow{ transform:translateX(4px); }

  /* ---------- interactive category browser ---------- */
  .cat-browser{ max-width:1080px; margin:0 auto; }
  .cat-nav{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
    margin-bottom:48px; border-bottom:1px solid rgba(237,234,225,.14); padding-bottom:0;
  }
  .cat-btn{
    background:none; border:none; cursor:pointer; font-family:inherit;
    font-family:var(--display); font-size:clamp(18px,2.4vw,26px); text-transform:uppercase; letter-spacing:.02em;
    color:var(--paper-faint); padding:0 18px 18px; position:relative;
    transition:color .35s var(--ease);
  }
  .cat-btn::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--accent); transform:scaleX(0); transform-origin:center;
    transition:transform .4s var(--ease);
  }
  .cat-btn:hover{ color:var(--paper); }
  .cat-btn.active{ color:var(--paper); }
  .cat-btn.active::after{ transform:scaleX(1); }

  .cat-panel{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; min-height:360px; }
  .cat-media{ border-radius:2px; overflow:hidden; }
  .cat-media img{
    width:100%; height:auto; display:block;
    opacity:1; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .cat-content{ opacity:1; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease); }
  .cat-panel.switching .cat-media img,
  .cat-panel.switching .cat-content{ opacity:0; transform:translateY(10px); }
  .cat-tag{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }
  .cat-content h3{ font-family:var(--display); font-size:clamp(28px,3.4vw,42px); text-transform:uppercase; margin:14px 0 18px; line-height:1.05; }
  .cat-content p{ color:var(--paper-dim); font-size:16px; line-height:1.75; max-width:46ch; margin-bottom:26px; }
  .cat-content a.cat-link{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper); border-bottom:1px solid var(--accent); padding-bottom:5px;
    transition:gap .3s var(--ease), color .3s var(--ease);
  }
  .cat-content a.cat-link:hover{ gap:16px; color:var(--accent); }

  @media (max-width:760px){
    .cat-panel{ grid-template-columns:1fr; gap:28px; }
    .cat-nav{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
    .cat-nav::-webkit-scrollbar{ display:none; }
    .cat-btn{ flex:0 0 auto; padding:0 14px 16px; font-size:18px; }
  }

  /* ---------- featured projects strip ---------- */
  .featured-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
  .featured-card{
    position:relative; display:block; border-radius:2px; overflow:hidden; background:var(--black-card);
  }
  .featured-card img{ width:100%; height:auto; display:block; }
  .featured-card .frame-glow{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.92) 100%); }
  .featured-card .cap{ position:absolute; left:22px; bottom:20px; right:22px; }
  .featured-card .cap .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; display:block; margin-bottom:8px; }
  .featured-card .cap h3{ font-family:var(--display); font-size:26px; text-transform:uppercase; letter-spacing:.02em; }
  .featured-card .cap p{ font-family:var(--body); font-size:13px; color:var(--paper-dim); margin-top:6px; }
  .service-card{
    display:block; position:relative; border-radius:2px; overflow:hidden;
    background:var(--black-card);
  }
  .service-card .art{ clip-path:none; width:100%; height:auto; display:block; }
  .service-card:hover .frame-glow{ background:linear-gradient(180deg, rgba(10,10,11,.05) 20%, rgba(0,0,0,.96) 100%); }
  .service-card .frame-glow{ background:linear-gradient(180deg, rgba(10,10,11,.1) 30%, rgba(0,0,0,.92) 100%); }
  .service-cap{ position:absolute; left:20px; right:20px; bottom:20px; }
  .service-cap h3{ font-family:var(--display); font-size:26px; text-transform:uppercase; letter-spacing:.02em; }
  .service-cap p{ font-family:var(--body); font-size:13px; color:var(--paper-dim); margin-top:8px; line-height:1.55; max-width:34ch; }
  .badge-soon{
    position:absolute; top:16px; right:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--paper); background:rgba(0,0,0,.55); border:1px solid rgba(237,234,225,.25);
    border-radius:999px; padding:4px 10px;
  }

  /* ---------- clients ---------- */
  .clients-wrap{ border-top:1px solid rgba(237,234,225,.1); background:var(--black-soft); overflow:hidden; }
  .clients-marquee{ display:flex; width:max-content; animation:scroll 34s linear infinite; padding:46px 0; }
  .clients-wrap:hover .clients-marquee{ animation-play-state:paused; }
  .client-item{
    font-family:var(--display); font-size:clamp(24px,3.6vw,38px); text-transform:uppercase;
    color:var(--paper-faint); padding:0 34px; letter-spacing:.02em; transition:color .4s;
  }
  .client-item:hover{ color:var(--paper); }
  .client-item i{ color:var(--accent); font-style:normal; padding:0 6px; }

  /* ---------- contact ---------- */
  .contact{ text-align:center; padding-top:150px; padding-bottom:80px; }
  .contact-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; margin-bottom:20px; }
  .contact-title{
    font-family:var(--display); font-size:clamp(38px,10vw,120px); text-transform:uppercase; line-height:.9;
    display:inline-block; position:relative;
  }
  .contact-title a{ position:relative; display:inline-block; }
  .contact-title a::after{
    content:''; position:absolute; left:0; bottom:6%; width:100%; height:6%; background:var(--accent);
    transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
  }
  .contact-title a:hover::after{ transform:scaleX(1); }
  .contact-sub{ font-family:var(--mono); font-size:13px; color:var(--paper-dim); margin-top:26px; }
  .contact-sub a:hover{ color:var(--accent); }

  .footer-row{
    display:flex; justify-content:space-between; align-items:flex-start; margin-top:110px;
    padding-top:26px; border-top:1px solid rgba(237,234,225,.1);
    font-family:var(--mono); font-size:11.5px; color:var(--paper-faint); flex-wrap:wrap; gap:20px;
  }
  .footer-addr{ text-align:left; line-height:1.8; }
  .socials{ display:flex; gap:22px; }
  .socials a{ color:var(--paper-dim); transition:color .3s; }
  .socials a:hover{ color:var(--accent); }

  @media (max-width:600px){
    .hero-foot{ align-items:flex-start; }
    .hero-meta{ text-align:left; }
    .section-head{ align-items:flex-start; }
    .section-sub{ text-align:left; max-width:100%; }
    section{ padding:100px 6vw; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- cross-link row (bottom of each service page) ---------- */
  .crosslink-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
  @media (max-width:820px){ .crosslink-grid{ grid-template-columns:1fr; } }
  .crosslink-card{
    display:block; padding:30px 28px; border:1px solid rgba(237,234,225,.14); border-radius:2px;
    transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  }
  .crosslink-card:hover{ border-color:var(--accent); background:rgba(255,45,85,.05); transform:translateY(-3px); }
  .crosslink-card .num{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.15em; display:block; margin-bottom:12px; }
  .crosslink-card h3{ font-family:var(--display); font-size:26px; text-transform:uppercase; letter-spacing:.02em; }
  .crosslink-card p{ font-family:var(--body); font-size:13px; color:var(--paper-dim); margin-top:8px; line-height:1.55; }

  .soon-note p{ color:var(--paper-dim); font-size:16px; line-height:1.85; margin-bottom:20px; max-width:62ch; }
  .soon-note p strong{ color:var(--paper); font-weight:600; }

  /* ---------- breadcrumb (for nested project pages) ---------- */
  .breadcrumb{
    position:absolute; z-index:2; top:100px; left:5vw;
    font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--paper-faint);
  }
  .breadcrumb a{ color:var(--paper-dim); border-bottom:1px solid rgba(237,234,225,.25); transition:color .3s, border-color .3s; }
  .breadcrumb a:hover{ color:var(--accent); border-color:var(--accent); }

  /* ---------- horizontal timeline + dynamic panel ---------- */
  .h-timeline{ max-width:1080px; margin:0 auto; }
  .h-timeline-track{ position:relative; display:flex; justify-content:space-between; gap:24px; padding:8px 0 4px; }
  .h-timeline-line{
    position:absolute; left:0; right:0; top:22px; height:2px;
    background:rgba(237,234,225,.15);
  }
  .h-timeline-progress{
    position:absolute; left:0; top:0; height:100%; width:0%;
    background:var(--accent); transition:width .6s var(--ease);
  }
  .h-timeline-node{
    position:relative; z-index:1; flex:1; min-width:0;
    background:none; border:none; cursor:pointer; padding:0 4px;
    display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
    font-family:inherit;
  }
  .h-timeline-dot{
    width:28px; height:28px; border-radius:50%; background:var(--black);
    border:2px solid rgba(237,234,225,.3);
    transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .h-timeline-node.active .h-timeline-dot{
    border-color:var(--accent); background:var(--accent); transform:scale(1.2);
    box-shadow:0 0 0 8px rgba(255,45,85,.15);
  }
  .h-timeline-node:hover .h-timeline-dot{ border-color:var(--accent); }
  .h-timeline-date{
    font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--paper-faint);
    transition:color .4s var(--ease); white-space:nowrap;
  }
  .h-timeline-title{
    font-family:var(--display); font-size:clamp(18px,2.4vw,26px); text-transform:uppercase;
    letter-spacing:.02em; color:var(--paper-dim); transition:color .4s var(--ease); line-height:1.15;
  }
  .h-timeline-node.active .h-timeline-date{ color:var(--accent); }
  .h-timeline-node.active .h-timeline-title,
  .h-timeline-node:hover .h-timeline-title{ color:var(--paper); }

  .h-timeline-panel{ margin-top:64px; }
  .h-timeline-panel-text{
    max-width:680px; margin:0 auto 48px; text-align:center;
    opacity:1; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .h-timeline-content-date{
    font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; text-transform:uppercase;
  }
  .h-timeline-content h3{
    font-family:var(--display); font-size:clamp(36px,5vw,58px); text-transform:uppercase;
    letter-spacing:.02em; margin:12px 0 20px; line-height:1.05;
  }
  .h-timeline-text p{ color:var(--paper-dim); line-height:1.75; font-size:17px; max-width:62ch; margin:0 auto; }
  .h-timeline-text p + p{ margin-top:14px; }

  .h-timeline-media{
    display:flex; flex-direction:column; gap:20px;
    opacity:1; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .h-timeline-media-main{ width:100%; border-radius:2px; overflow:hidden; position:relative; }
  .h-timeline-media-secondary{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .h-timeline-media-item{ border-radius:2px; overflow:hidden; position:relative; }
  .h-timeline-media img{ width:100%; height:auto; display:block; }

  .h-timeline-panel.switching .h-timeline-panel-text,
  .h-timeline-panel.switching .h-timeline-media{
    opacity:0; transform:translateY(10px);
  }

  @media (max-width:760px){
    .h-timeline-track{ overflow-x:auto; justify-content:flex-start; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
    .h-timeline-track::-webkit-scrollbar{ display:none; }
    .h-timeline-node{ flex:0 0 auto; min-width:150px; }
    .h-timeline-line{ left:65px; right:65px; }
    .h-timeline-panel{ margin-top:36px; }
    .h-timeline-media-secondary{ grid-template-columns:1fr; }
  }

  /* ---------- 404 page ---------- */
  .notfound{
    min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:140px 5vw 80px;
  }
  .notfound-num{
    font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent);
    text-transform:uppercase; margin-bottom:20px;
  }
  .notfound-title{
    font-family:var(--display); font-size:clamp(52px,12vw,160px); text-transform:uppercase;
    line-height:.9; margin-bottom:28px;
  }
  .notfound-body{ color:var(--paper-dim); font-size:16px; line-height:1.8; max-width:52ch; margin-bottom:44px; }
  .notfound-links{
    font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--paper-faint);
    margin-top:36px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  }
  .notfound-links a{ color:var(--paper-dim); border-bottom:1px solid rgba(237,234,225,.25); transition:color .3s, border-color .3s; }
  .notfound-links a:hover{ color:var(--paper); border-color:var(--accent); }