/* ===================================================================
     CONCEPT — "NIM MEANS HALF"
     One diagonal seam (the S\N backslash) drives every scroll moment.

     SLASH RULES (per brand direction — never break these):
       · The slash is ALWAYS a backslash "\": top-left high, bottom-right
         low. A vertical bar must be rotated NEGATIVE degrees; a
         horizontal bar must be rotated POSITIVE degrees. Never the
         opposite — that produces "/" which is wrong.
       · The slash is rendered in BLACK on light ground, WHITE on dark
         ground (via mix-blend-mode where it crosses both).
       · The ONLY yellow slash on the whole site is the S\N monogram
         top-right inside the hero fold.
  =================================================================== */
  :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;
  }
  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 ===================== */
  .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>");
  }

  /* ===================== scroll progress: the "\" 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); /* vertical bar, negative = "\" */
    transition:transform .15s linear; transform-origin:center;
  }
  .seam-progress .pct{ font-family:var(--font-mono); font-size:.72rem; color:#fff; letter-spacing:.05em; }
  @media (max-width:900px){ .seam-progress{ display:none; } }

  /* ===================================================================
     CURSOR — native behaviour, tinted grey to sit quietly on both the
     white paper and the black fold. Arrow everywhere, darker grey on
     interactive elements. Falls back to the OS cursor if unsupported.
  =================================================================== */
  html, body{ 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, .svc-row, .work-item, label,
  input, select, textarea{ 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; }

  /* ===================================================================
     NAV — white text with mix-blend-mode:difference: automatically
     white over the black fold, black over paper, per pixel.
     Wordmark only — the S\N monogram lives in the hero fold and is
     not repeated here.
  =================================================================== */
  .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; }

  /* ===================== shared: eyebrow (black "\" mark) ===================== */
  .eyebrow{
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--ink-2);
    margin-bottom:1.1rem;
  }

  .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 — the fold. Scroll-driven only; the pointer never moves it.
  =================================================================== */
  .hero-wrap{ height:200vh; }
  .hero-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:flex-end; }
  .hero-fold{ position:absolute; inset:0; will-change:transform; pointer-events:none; }
  .hero-tri{
    position:absolute; inset:0; background:var(--ink);
    clip-path:polygon(34% 0, 100% 0, 100% 66%);
  }
  .hero-mark{
    position:absolute; top:13%; right:8%; color:var(--paper);
    font-size:clamp(2rem,5vw,4.4rem); font-weight:500; letter-spacing:.02em;
  }
  .hero-mark i{ font-style:normal; color:var(--accent); }
  .hero-content{
    position:relative; z-index:2; width:100%;
    padding:0 var(--pad) clamp(5rem,10vh,8rem);
  }
  h1.hero-title{
    font-size:clamp(2.7rem, 7vw, 6.6rem); font-weight:500; letter-spacing:-.01em; line-height:1.18;
    max-width:15ch;
  }
  .hero-sub{ margin-top:1.5rem; max-width:46ch; font-size:clamp(1.05rem,1.35vw,1.25rem); color:var(--ink-2); }
  /* Minimal mouse icon, centered — the wheel ticks downward in the
     brand yellow inside a black outline, inviting the user to scroll.
     JS fades it out as the hero fold opens. */
  .hero-mouse{
    position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
    z-index:2; width:28px; pointer-events:none; will-change:opacity;
  }
  .hero-mouse svg{ display:block; width:100%; height:auto; overflow:visible; }
  .hero-mouse .wheel{ animation:wheel 2s infinite var(--ease); }
  @keyframes 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 · NIM = HALF — pinned on every device
  =================================================================== */
  .half-wrap{ height:260vh; }
  .half-stage{
    position:sticky; top:0; height:100svh; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding-inline:var(--pad);
  }
  .half-word{ display:grid; line-height:.95; user-select:none; }
  .half-word > span{
    grid-area:1/1; font-size:clamp(5.2rem, 24vw, 21rem); font-weight:500; letter-spacing:-.02em;
  }
  .half-outline{ color:transparent; -webkit-text-stroke:1.5px var(--ink); }
  .half-fill{ color:var(--ink); will-change:clip-path; clip-path:polygon(-40% 0, -10% 0, -40% 100%, -70% 100%); }
  .half-caption{ margin-top:1.6rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.14em; color:var(--ink-2); }
  .half-thesis{
    margin-top:1.2rem; font-size:clamp(1.3rem, 2.6vw, 2.1rem); font-weight:500; max-width:26ch; line-height:1.35;
  }
  .half-thesis em{ font-style:normal; box-shadow:inset 0 -0.45em var(--accent); }

  /* ===================================================================
     03 · PHILOSOPHY — split scroll (stacks on mobile, blocks still animate)
  =================================================================== */
  .philo{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
  .philo-left{
    position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center;
    padding-inline:var(--pad); border-right:1px solid var(--line);
  }
  .philo-left blockquote{
    font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:500; line-height:1.32; max-width:22ch;
  }
  .philo-left .credit{ margin-top:1.4rem; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; color:var(--ink-2); }
  .philo-right{ display:flex; flex-direction:column; }
  .philo-block{
    min-height:88vh; display:flex; flex-direction:column; justify-content:center;
    padding:clamp(2rem,4vw,4rem) var(--pad);
  }
  .philo-block p{ font-size:clamp(1.15rem,1.7vw,1.55rem); line-height:1.55; max-width:36ch; color:var(--ink); }
  .philo-block .k{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; color:var(--ink-2); margin-bottom:1rem; display:block; }
  .philo-block em{ font-style:normal; box-shadow:inset 0 -0.45em var(--accent); }

  /* ===================================================================
     04 · SERVICES — rows arrive from the two halves on every device
  =================================================================== */
  .services{ padding-block:clamp(5rem,10vw,8rem); }
  .svc-row{
    border-top:1px solid var(--line);
    padding:clamp(1.6rem,2.6vw,2.4rem) 0;
    display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(1rem,3vw,3rem); align-items:baseline;
    transition:background .35s var(--ease), color .35s var(--ease), padding-left .35s var(--ease);
  }
  .svc-row:last-of-type{ border-bottom:1px solid var(--line); }
  .svc-idx{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-2); }
  .svc-row h3{ font-size:clamp(1.6rem,3vw,2.6rem); font-weight:500; letter-spacing:-.01em; }
  .svc-row .svc-sub{ margin-top:.6rem; font-size:1rem; color:var(--ink-2); max-width:70ch; }
  .svc-row:hover{ background:var(--ink); color:var(--paper); padding-left:1.2rem; }
  .svc-row:hover .svc-idx, .svc-row:hover .svc-sub{ color:rgba(255,255,255,.65); }

  /* ===================================================================
     05 · PROCESS — desktop: the seam is drawn by scroll.
     Mobile: the same stroke draws vertically down the list edge as the
     user scrolls, and each stage reveals in sequence.
  =================================================================== */
  .process-wrap{ height:260vh; }
  .process-stage{ position:sticky; top:0; height:100svh; display:flex; align-items:center; }
  .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); }

  /* ===================================================================
     06 · WORK — corner cut along the "\" direction (top-right)
  =================================================================== */
  .work{ padding-block:clamp(5rem,10vw,9rem); }
  .section-head{ max-width:62ch; margin-bottom:clamp(2.6rem,5vw,4.6rem); }
  .section-head h2{ font-size:clamp(2.1rem,4.4vw,3.8rem); font-weight:500; letter-spacing:-.01em; }
  .work-list{ display:flex; flex-direction:column; gap:clamp(4rem,8vw,7rem); }
  .work-item{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
  .work-item:nth-child(even){ direction:rtl; }
  .work-item:nth-child(even) > *{ direction:ltr; }
  .work-media{
    position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--soft); border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
  }
  .work-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .7s var(--ease); }
  .work-item:hover .work-media img{ transform:scale(1.07); }
  .work-year{ position:absolute; top:1rem; left:1rem; background:var(--paper); padding:.32rem .65rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; }
  .work-info h3{ font-size:clamp(1.7rem,2.7vw,2.5rem); font-weight:500; }
  .work-tags{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2); margin-top:.65rem; text-transform:uppercase; }
  .work-info p{ margin-top:1rem; color:var(--ink-2); max-width:48ch; font-size:1.05rem; }
  .work-more{
    display:inline-flex; align-items:center; gap:.6rem; margin-top:clamp(3.5rem,6vw,5rem);
    font-family:var(--font-mono); font-size:.84rem; letter-spacing:.06em;
    border-bottom:2px solid var(--ink); padding-bottom:.35rem;
  }
  .work-note{ margin-top:1.3rem; max-width:64ch; color:var(--ink-2); font-size:.95rem; }

  /* ===================================================================
     07 · FINALE — horizontal bar, POSITIVE rotation = "\"
  =================================================================== */
  .finale{ background:var(--ink); color:var(--paper); padding-block:clamp(7rem,15vw,12rem); overflow:hidden; }
  .finale .container{ display:flex; flex-direction:column; }
  .finale-line{ font-size:clamp(2rem,5.4vw,4.6rem); font-weight:500; letter-spacing:-.01em; line-height:1.12; }
  .finale-line.right{ align-self:flex-end; text-align:right; }
  .finale-seam{
    align-self:center; width:clamp(80px,12vw,160px); height:3px; background:var(--accent);
    transform:rotate(24deg) scaleX(0); transform-origin:center; margin-block:clamp(1.6rem,3.5vw,3rem);
    will-change:transform;
  }
  .finale-cta{ margin-top:clamp(3rem,6vw,5rem); align-self:center; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
  .btn{
    display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 1.9rem; border:1px solid currentColor;
    background:none; 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);
  }
  .finale .btn:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }

  /* ===================================================================
     08 · START A PROJECT
  =================================================================== */
  .start{ padding-block:clamp(5rem,10vw,8rem); border-top:1px solid var(--line); }
  .start-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
  .start-intro h2{ font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.01em; max-width:14ch; }
  .start-intro p{ margin-top:1.2rem; color:var(--ink-2); max-width:36ch; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
  .form-field{ display:flex; flex-direction:column; gap:.5rem; }
  .form-field.wide{ grid-column:1 / -1; }
  .form-field label{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; color:var(--ink-2); }
  .form-field label b{ color:var(--ink); font-weight:400; }
  .form-field input, .form-field select, .form-field textarea{
    width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink);
    font-family:var(--font-display); font-size:1.02rem; padding:.95rem 1rem; border-radius:0;
    transition:border-color .25s var(--ease); appearance:none; -webkit-appearance:none;
  }
  .form-field select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.5'/></svg>");
    background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
  }
  .form-field textarea{ min-height:150px; resize:vertical; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--ink); }
  .form-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem; }
  .start .btn{ border-color:var(--ink); }
  .start .btn:hover{ background:var(--ink); color:var(--paper); }
  .form-status{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-2); }
  .form-status.is-error{ color:#B00020; }

  /* ===================== 09 · CONTACT ===================== */
  .contact{ padding-block:clamp(4rem,8vw,6rem); }
  .contact-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; border-top:1px solid var(--line); padding-top:2.4rem; }
  .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:1100px){
    .process-grid{ grid-template-columns:1fr; }
    .process-svg{ max-width:320px; }
    .start-grid{ grid-template-columns:1fr; gap:2.4rem; }
  }

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

    /* HERO — pinned fold kept on mobile (shorter pin, scroll-driven).
       Triangle sized so it can never touch the headline. */
    .hero-wrap{ height:170vh; }
    .hero-stage{ min-height:560px; }
    .hero-tri{ clip-path:polygon(60% 0, 100% 0, 100% 30%); }
    .hero-mark{ top:5%; right:6%; font-size:clamp(1.5rem,7vw,2.2rem); }
    .hero-content{ padding-bottom:clamp(6rem,14vh,8rem); }

    /* NIM = HALF — pinned fill animation kept on mobile (shorter pin) */
    .half-wrap{ height:200vh; }
    .half-word > span{ font-size:clamp(4.6rem,30vw,8rem); }
    .half-thesis{ font-size:clamp(1.25rem,5.4vw,1.7rem); }

    /* PHILOSOPHY — single column; blocks still reveal on scroll */
    .philo{ grid-template-columns:1fr; }
    .philo-left{ position:relative; height:auto; padding-block:3.5rem .5rem; border-right:none; }
    .philo-block{ min-height:0; padding-block:1.6rem; }

    .svc-row{ grid-template-columns:1fr; gap:.5rem; padding-block:1.5rem; }
    .svc-row:hover{ padding-left:0; }
    .svc-idx{ font-size:.78rem; }

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

    .work-item, .work-item:nth-child(even){ grid-template-columns:1fr; direction:ltr; gap:1.4rem; }
    .work-media{ clip-path:polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }

    .finale-line.right{ align-self:flex-start; text-align:left; }
    .finale-seam{ align-self:flex-start; margin-left:.4rem; }
    .finale-cta{ align-self:stretch; flex-direction:column; align-items:stretch; }
    .finale-cta .btn{ justify-content:center; }

    .form-grid{ grid-template-columns:1fr; }
    .form-actions .btn{ width:100%; justify-content:center; }
    .contact-meta{ grid-template-columns:1fr; gap:1.4rem; }
    .site-footer{ flex-direction:column; }
  }

  @media (max-width:430px){
    .hero-tri{ clip-path:polygon(66% 0, 100% 0, 100% 24%); }
    .hero-mark{ top:4%; right:5%; }
    h1.hero-title{ font-size:clamp(2.3rem,11.5vw,2.8rem); line-height:1.22; }
    .half-word > span{ font-size:clamp(4.2rem,30vw,7rem); }
  }

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