/* ===================================================================
     STUDIO NIM — ABOUT PAGE
     Same design language as the home + project pages: paper/ink, one
     yellow accent (#FFF300), the S\N backslash seam.

     SLASH RULE: backslash "\" only. Vertical bar = negative rotation,
     horizontal bar = positive rotation. The only yellow slash is the
     hero monogram; elsewhere the seam is ink / white.
  =================================================================== */
  :root{
    --paper:   #FFFFFF;
    --soft:    #F5F5F3;
    --ink:     #111111;
    --ink-2:   #555555;
    --line:    #E7E7E5;
    --accent:  #FFF300;

    --font-display: 'Optima', 'Optima Nova LT', Candara, 'Noto Sans', Calibri, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --container: 1680px;
    --pad: clamp(1.4rem, 5vw, 5rem);
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; background:var(--paper); }
  body{
    background:var(--paper); color:var(--ink);
    font-family:var(--font-display); font-weight:400;
    font-size:1.05rem; line-height:1.5;
    overflow-x:hidden; -webkit-font-smoothing:antialiased;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M4 2 L4 18.6 L8.4 14.6 L11 20.4 L13.8 19.1 L11.2 13.5 L17.2 13.5 Z' fill='%23888888' stroke='white' stroke-width='1'/></svg>") 4 2, auto;
  }
  a, button{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M4 2 L4 18.6 L8.4 14.6 L11 20.4 L13.8 19.1 L11.2 13.5 L17.2 13.5 Z' fill='%23666666' stroke='white' stroke-width='1'/></svg>") 4 2, pointer; }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  section{ position:relative; }
  .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
  ::selection{ background:var(--ink); color:var(--accent); }

  .grain{
    position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* reading progress: "\" stands upright at 100% */
  .seam-progress{
    position:fixed; right:calc(var(--pad) * .5); bottom:1.6rem; z-index:400; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:.55rem; mix-blend-mode:difference;
  }
  .seam-progress .slash{ width:2px; height:44px; background:#fff; transform:rotate(-30deg); transition:transform .15s linear; }
  .seam-progress .pct{ font-family:var(--font-mono); font-size:.72rem; color:#fff; letter-spacing:.05em; }
  @media (max-width:900px){ .seam-progress{ display:none; } }

  /* nav (difference blend) */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:900;
    display:flex; align-items:center; justify-content:space-between;
    padding:clamp(1rem,2vw,1.5rem) var(--pad); mix-blend-mode:difference; color:#fff;
  }
  .nav-logo{ font-weight:500; font-size:1.1rem; letter-spacing:.16em; }
  .nav-links{ display:flex; gap:clamp(1.4rem,2.4vw,2.8rem); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; }
  .nav-links a{ position:relative; padding-bottom:3px; }
  .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff; transition:width .3s var(--ease); }
  .nav-links a:hover::after{ width:100%; }
  .nav-toggle{ display:none; background:none; border:none; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; color:#fff; }

  .nav-mobile{
    position:fixed; inset:0; background:var(--ink); color:var(--paper); z-index:1200;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    padding:var(--pad); transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .nav-mobile.is-open{ transform:translateY(0); }
  .nav-mobile a{ font-size:2.2rem; font-weight:500; }
  .nav-mobile a span{ color:var(--paper); opacity:.5; margin-right:.4rem; }
  .nav-mobile-close{ position:absolute; top:1.6rem; right:var(--pad); background:none; border:none; color:var(--paper); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; }

  .eyebrow{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2); margin-bottom:1rem; display:block; }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.from-left{ transform:translateX(-20px); }
  .reveal.from-right{ transform:translateX(20px); }
  .reveal.is-visible{ opacity:1; transform:translate(0,0); }

  /* ===================================================================
     01 · HERO — a pinned statement. The word HALF fills along the seam
     as the studio introduces itself: "We are the other half."
  =================================================================== */
  .a-hero{ height:210vh; }
  .a-hero-stage{
    position:sticky; top:0; height:100svh; overflow:hidden;
    display:flex; align-items:flex-end; justify-content:flex-start;
  }
  .a-hero-fold{ position:absolute; top:0; right:0; width:40%; height:34%; background:var(--ink); clip-path:polygon(30% 0, 100% 0, 100% 100%); z-index:0; }
  .a-hero-mark{ position:absolute; top:9%; right:6%; z-index:1; color:var(--paper); font-size:clamp(1.6rem,4vw,3.4rem); font-weight:500; }
  .a-hero-mark i{ font-style:normal; color:var(--accent); }
  .a-hero-inner{ position:relative; z-index:2; width:100%; padding:0 var(--pad) clamp(5rem,10vh,8rem); }
  .a-hero-inner h1{ font-size:clamp(2.7rem,7.4vw,6.8rem); font-weight:500; letter-spacing:-.01em; line-height:1.18; max-width:17ch; }
  /* "other half" is two stacked layers of the same words: an outline
     behind and a solid fill in front. JS clips the solid layer along the
     seam so the phrase fills in as the hero scrolls. Same words on both
     layers means it can never be unreadable. */
  .a-hero-fill{ display:inline-grid; vertical-align:baseline; }
  .a-hero-fill > span{ grid-area:1/1; }
  .a-hero-fill .ol{ color:transparent; -webkit-text-stroke:1.4px var(--ink); }
  .a-hero-fill .fl{ color:var(--ink); will-change:clip-path; }
  .a-hero-sub{ margin-top:1.5rem; max-width:46ch; font-size:clamp(1.05rem,1.35vw,1.25rem); color:var(--ink-2); }

  /* Same minimal scroll-mouse used on the homepage, for consistency:
     a black outline, the wheel ticking down in the brand yellow, fading
     out as the hero fold opens. */
  .a-hero-mouse{
    position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
    z-index:2; width:28px; pointer-events:none; will-change:opacity;
  }
  .a-hero-mouse svg{ display:block; width:100%; height:auto; overflow:visible; }
  .a-hero-mouse .wheel{ animation:a-wheel 2s infinite var(--ease); }
  @keyframes a-wheel{
    0%   { transform:translateY(0);    opacity:1; }
    55%  { transform:translateY(13px); opacity:0; }
    56%  { transform:translateY(0);    opacity:0; }
    100% { transform:translateY(0);    opacity:1; }
  }

  /* ===================================================================
     02 · STORY — sticky label + large body, mirrors the project page.
  =================================================================== */
  .story{ padding-block:clamp(5rem,10vw,8rem); border-top:1px solid var(--line); }
  .story-grid{ display:grid; grid-template-columns:.4fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
  .story-label{ position:sticky; top:clamp(6rem,12vh,8rem); }
  .story-label h2{ font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:500; line-height:1.25; max-width:14ch; }
  .story-body p{ font-size:clamp(1.25rem,2vw,1.8rem); font-weight:500; line-height:1.5; letter-spacing:-.005em; }
  .story-body p + p{ margin-top:1.6rem; }
  .story-body em{ font-style:normal; box-shadow:inset 0 -0.4em var(--accent); }

  /* ===================================================================
     03 · PRINCIPLES — three, arriving as a horizontal triptych.
  =================================================================== */
  .principles{ padding-block:clamp(4rem,8vw,7rem); border-top:1px solid var(--line); }
  .principles h2{ font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.01em; margin-bottom:clamp(2.4rem,5vw,4rem); max-width:20ch; }
  .prin-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
  .prin{ border-top:2px solid var(--ink); padding-top:1.4rem; }
  .prin .n{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); }
  .prin h3{ margin-top:1rem; font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:500; }
  .prin p{ margin-top:.8rem; color:var(--ink-2); font-size:1rem; }

  /* ===================================================================
     04 · PROCESS — the seam drawn across five nodes (scroll-driven on
     desktop, scroll-drawn vertical seam on mobile). Same as home.
  =================================================================== */
  .process-wrap{ height:260vh; border-top:1px solid var(--line); }
  .process-stage{ position:sticky; top:0; height:100svh; display:flex; align-items:center; }
  .process-head{ margin-bottom:clamp(2rem,4vw,3rem); }
  .process-head h2{ font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.01em; }
  .process-grid{ display:grid; grid-template-columns:minmax(280px,1fr) 1.3fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; width:100%; }
  .process-svg{ width:100%; max-width:420px; height:auto; }
  .process-svg .track{ stroke:var(--line); stroke-width:2; }
  .process-svg .draw{ stroke:var(--ink); stroke-width:2.5; }
  .process-svg .node{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; transition:fill .3s var(--ease); }
  .process-svg .node.is-on{ fill:var(--accent); }
  .process-panel .step-count{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2); display:block; margin-bottom:.7rem; }
  .process-panel h3{ font-size:clamp(2rem,3.6vw,3.2rem); font-weight:500; }
  .process-panel p{ margin-top:1rem; max-width:44ch; color:var(--ink-2); font-size:clamp(1.05rem,1.3vw,1.25rem); }

  .process-mobile{ display:none; position:relative; padding-left:1.6rem; }
  .process-mobile .m-track{ position:absolute; left:.4rem; top:0; bottom:0; width:2px; background:var(--line); }
  .process-mobile .m-draw{ position:absolute; left:.4rem; top:0; width:2px; height:0%; background:var(--ink); }
  .process-m-item{ padding-block:1.7rem; border-top:1px solid var(--line); }
  .process-m-item:last-child{ border-bottom:1px solid var(--line); }
  .process-m-item h3{ font-size:1.45rem; font-weight:500; }
  .process-m-item h3 b{ color:var(--ink-2); font-weight:400; margin-right:.4rem; font-family:var(--font-mono); font-size:1rem; }
  .process-m-item p{ margin-top:.6rem; color:var(--ink-2); }

  /* ===================================================================
     05 · SERVICES — full list, two columns.
  =================================================================== */
  .services{ padding-block:clamp(5rem,10vw,8rem); border-top:1px solid var(--line); }
  .services h2{ font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.01em; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
  .svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,4rem); }
  .svc-group{ border-top:1px solid var(--line); padding-top:1.4rem; margin-bottom:1.6rem; }
  .svc-group .g-idx{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); }
  .svc-group h3{ margin-top:.8rem; font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:500; }
  .svc-group ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
  .svc-group li{ position:relative; padding-left:1rem; color:var(--ink-2); font-size:1rem; }
  .svc-group li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; background:var(--ink); }

  /* ===================================================================
     06 · STATS
  =================================================================== */
  .stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .stat{ text-align:center; padding:clamp(2.2rem,4vw,3.2rem) 1rem; border-left:1px solid var(--line); }
  .stat:first-child{ border-left:none; }
  .stat b{ display:block; font-size:clamp(2rem,4vw,3.4rem); font-weight:500; }
  .stat span{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-2); margin-top:.5rem; }

  /* ===================================================================
     07 · CTA + FOOTER
  =================================================================== */
  .cta{ background:var(--ink); color:var(--paper); padding-block:clamp(5rem,11vw,9rem); text-align:center; }
  .cta h2{ font-size:clamp(2rem,5vw,4rem); font-weight:500; letter-spacing:-.01em; max-width:18ch; margin-inline:auto; }
  .cta .btns{ margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
  .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:1.05rem 1.9rem; border:1px solid currentColor; color:inherit; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
  .cta .btn:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }

  .contact{ padding-block:clamp(4rem,8vw,6rem); }
  .contact-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
  .contact-meta div span{ display:block; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2); margin-bottom:.55rem; }
  .contact-meta div{ font-size:1.02rem; }
  .site-footer{ border-top:1px solid var(--line); padding:1.6rem var(--pad); display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-2); }

  /* ===================== responsive ===================== */
  @media (max-width:1024px){
    .story-grid{ grid-template-columns:1fr; gap:1.6rem; }
    .story-label{ position:relative; top:0; }
    .prin-grid{ grid-template-columns:1fr; gap:2rem; }
    .process-grid{ grid-template-columns:1fr; }
    .svc-cols{ grid-template-columns:1fr; gap:0; }
    .stats-grid{ grid-template-columns:1fr 1fr; }
    .stat:nth-child(3){ border-left:none; }
    .stat:nth-child(n+3){ border-top:1px solid var(--line); }
    .contact-meta{ grid-template-columns:1fr 1fr; }
  }

  @media (max-width:900px){
    .nav-links{ display:none; }
    .nav-toggle{ display:block; }

    /* HERO — keep the pinned fill (shorter pin) */
    .a-hero{ height:180vh; }
    .a-hero-stage{ min-height:520px; }
    .a-hero-fold{ width:60%; height:24%; clip-path:polygon(50% 0, 100% 0, 100% 100%); }
    .a-hero-mark{ top:5%; right:5%; font-size:clamp(1.3rem,6vw,1.8rem); }
    .a-hero-inner h1{ max-width:14ch; }

    /* PROCESS — pinned stepper off; scroll-drawn seam + reveals on */
    .process-wrap{ height:auto; }
    .process-stage{ position:relative; height:auto; padding-block:4rem 2rem; }
    .process-grid{ display:none; }
    .process-mobile{ display:block; }
  }

  @media (max-width:768px){
    .contact-meta{ grid-template-columns:1fr; gap:1.4rem; }
    .stats-grid{ grid-template-columns:1fr 1fr; }
    .cta .btns{ flex-direction:column; align-items:stretch; }
    .cta .btn{ justify-content:center; }
    .site-footer{ flex-direction:column; }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .reveal{ transition:opacity .3s linear; transform:none; }
    .a-hero-mouse .wheel{ animation:none; }
  }