:root{
      --paper:#F5F3EE;
      --ink:#151713;
      --muted:#6B6F66;
      --line:rgba(17,18,15,.14);
      --soft:#E9E5DC;
      --acid:#B7C46B;
      --max:1560px;
      --font-site:"Elza", Arial, sans-serif;
      --pad:clamp(18px,3.2vw,52px);
      --header:82px;
      --s1:8px;
      --s2:12px;
      --s3:16px;
      --s4:24px;
      --s5:32px;
      --s6:48px;
      --s7:72px;
      --s8:96px;
    }

    *{box-sizing:border-box}
    html{
      background:var(--paper);
      color:var(--ink);
      scroll-behavior:smooth;
      scroll-snap-type:y mandatory;
    }
    body{
      margin:0;
      background:var(--paper);
      font-family:var(--font-site);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}

    .progress{
      position:fixed;
      z-index:100;
      inset:0 auto auto 0;
      width:0;
      height:2px;
      background:var(--ink);
    }

    .header{
      position:fixed;
      z-index:90;
      inset:0 0 auto 0;
      height:var(--header);
      padding:18px var(--pad);
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:start;
      color:#fff;
      mix-blend-mode:difference;
      pointer-events:none;
    }
    .header > *{pointer-events:auto}

    .logo{
      width:clamp(112px,10.5vw,165px);
      height:auto;
      margin-top:1px;
      /* The external logo asset is black. Make it white before the header's
         difference blend is applied, so it contrasts with every section. */
      filter:invert(1);
      position:relative;
      z-index:1;
    }

    .index{
      font-family:var(--font-site);
      font-size:11px;
      letter-spacing:.045em;
      color:inherit;
      margin-top:3px;
    }

    .header-contact{
      justify-self:end;
      font-size:12px;
      line-height:1;
      margin-top:3px;
      color:inherit;
      border-bottom:1px solid currentColor;
      padding-bottom:3px;
    }

    .frame{
      height:100svh;
      min-height:100svh;
      scroll-snap-align:start;
      scroll-snap-stop:always;
      position:relative;
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }

    .grid{
      width:min(100%,var(--max));
      height:100%;
      min-height:0;
      margin:auto;
      padding:calc(var(--header) + var(--s6)) var(--pad) var(--s5);
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      grid-template-rows:auto 1fr auto;
      column-gap:clamp(14px,1.45vw,24px);
      row-gap:var(--s5);
    }

    .label{
      grid-column:1/4;
      font-family:var(--font-site);
      font-size:11px;
      line-height:1.5;
      text-transform:uppercase;
      letter-spacing:.045em;
      color:var(--muted);
    }

    .hero .grid{align-items:end}
    .hero-line{
      grid-column:1/13;
      align-self:center;
      font-size:clamp(62px,9.8vw,152px);
      line-height:.89;
      letter-spacing:-.052em;
      font-weight:550;
      max-width:1420px;
      margin:0;
    }
    .hero-line em{
      font-style:normal;
      display:inline-block;
      border-bottom:.09em solid var(--ink);
    }
    .hero-bottom{
      grid-column:1/13;
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:inherit;
      align-items:end;
    }
    .hero-note{
      grid-column:1/4;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
      max-width:285px;
    }
    .hero-copy{
      grid-column:8/13;
      font-size:clamp(20px,2vw,31px);
      line-height:1.12;
      letter-spacing:-.024em;
      max-width:700px;
      margin:0;
    }

    .chapter .grid{
      align-items:end;
    }

    .chapter-number{
      grid-column:1/3;
      align-self:start;
      font-family:var(--font-site);
      font-size:11px;
      color:var(--muted);
    }

    .chapter-word{
      grid-column:1/9;
      align-self:center;
      margin:0;
      font-size:clamp(86px,15vw,232px);
      line-height:.76;
      letter-spacing:-.058em;
      font-weight:560;
    }

    .chapter-copy{
      grid-column:9/13;
      align-self:end;
      font-size:clamp(18px,1.45vw,25px);
      line-height:1.18;
      letter-spacing:-.015em;
      margin:0;
      max-width:520px;
    }

    .chapter-copy small{
      display:block;
      margin-top:var(--s4);
      font-family:var(--font-site);
      font-size:11px;
      line-height:1.5;
      color:var(--muted);
      letter-spacing:.01em;
    }

    .experiment{
      background:var(--ink);
      color:var(--paper);
      border-bottom-color:rgba(244,241,234,.15);
    }
    .experiment .label,
    .experiment .chapter-number,
    .experiment .chapter-copy small{
      color:rgba(244,241,234,.55);
    }
    .experiment .chapter-word{
      position:relative;
    }
    .experiment .chapter-word::after{
      content:"";
      position:absolute;
      width:.44em;
      height:.44em;
      border-radius:50%;
      background:var(--acid);
      right:-.12em;
      top:.02em;
    }



    .system-word{
      grid-column:1/13;
      align-self:center;
      margin:0;
      font-size:clamp(52px,8.8vw,138px);
      line-height:.9;
      letter-spacing:-.045em;
      font-weight:550;
      max-width:1300px;
    }
    .system-word span{
      color:rgba(14,14,12,.28);
    }

    .system-bottom{
      grid-column:1/13;
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:inherit;
      align-items:end;
    }

    .principles{
      grid-column:1/7;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      border-top:1px solid var(--line);
    }
    .principle{
      min-height:95px;
      padding:12px 14px 8px 0;
      border-bottom:1px solid var(--line);
      font-size:13px;
      display:flex;
      justify-content:space-between;
      gap:10px;
    }
    .principle:nth-child(odd){border-right:1px solid var(--line);padding-right:16px}
    .principle:nth-child(even){padding-left:16px}
    .principle b{
      font-family:var(--font-site);
      font-size:10px;
      color:var(--muted);
      font-weight:400;
    }

    .system-copy{
      grid-column:9/13;
      font-size:clamp(18px,1.45vw,25px);
      line-height:1.18;
      letter-spacing:-.015em;
      margin:0;
    }

    .final .grid{align-items:end}
    .final-title{
      grid-column:1/13;
      align-self:center;
      margin:0;
      font-size:clamp(74px,13vw,202px);
      line-height:.79;
      letter-spacing:-.058em;
      font-weight:560;
    }
    .final-title span{
      color:var(--muted);
    }

    .final-bottom{
      grid-column:1/13;
      display:grid;
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:inherit;
      align-items:end;
    }

    .domain{
      grid-column:1/4;
      align-self:end;
      display:flex;
      flex-direction:column;
      gap:var(--s2);
      color:var(--muted);
    }

    .domain-kicker{
      font-family:var(--font-site);
      font-size:10px;
      letter-spacing:.045em;
      text-transform:uppercase;
    }

    .domain strong{
      font-size:clamp(18px,1.5vw,24px);
      line-height:1;
      letter-spacing:-.015em;
      color:var(--ink);
      font-weight:500;
    }

    .contact-panel{
      grid-column:7/13;
      border-top:1px solid var(--line);
      padding-top:var(--s3);
    }

    .contact-meta{
      display:flex;
      justify-content:space-between;
      gap:var(--s3);
      margin-bottom:var(--s6);
      font-family:var(--font-site);
      font-size:10px;
      line-height:1.4;
      letter-spacing:.035em;
      text-transform:uppercase;
      color:var(--muted);
    }

    .mail{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--s4);
      width:100%;
      padding:0 0 var(--s3);
      border-bottom:1px solid currentColor;
      font-size:clamp(24px,3vw,48px);
      line-height:1;
      letter-spacing:-.03em;
    }

    .mail-arrow{
      font-size:.72em;
      transition:transform .35s cubic-bezier(.2,.7,.2,1);
    }

    .mail:hover .mail-arrow{
      transform:translate(6px,-6px);
    }

    .contact-address{
      margin:10px 0 0;
      font-style:normal;
      font-family:var(--font-site);
      font-size:9px;
      line-height:1.5;
      letter-spacing:.025em;
      color:inherit;
      opacity:.5;
    }

    .contact-note{
      max-width:430px;
      margin:var(--s3) 0 0;
      font-size:13px;
      line-height:1.45;
      color:var(--muted);
    }

    .cursor-mark{
      position:fixed;
      z-index:120;
      width:8px;
      height:8px;
      border-radius:50%;
      background:#fff;
      mix-blend-mode:difference;
      pointer-events:none;
      transform:translate(-50%,-50%);
      opacity:0;
    }

    @media (pointer:fine){
      body{cursor:none}
      a{cursor:none}
      .cursor-mark{opacity:1}
    }

    @media(max-width:820px){
      :root{--header:68px}
      .header{
        grid-template-columns:1fr auto;
      }
      .index{display:none}
      .header-contact{font-size:11px}
      .grid{
        padding-top:calc(var(--header) + var(--s5));
        padding-bottom:var(--s4);
      }
      .label{grid-column:1/8}
      .hero-line{
        font-size:clamp(58px,17vw,110px);
        align-self:center;
      }
      .hero-note{
        grid-column:1/7;
        font-size:11px;
      }
      .hero-copy{
        grid-column:3/13;
        margin-top:var(--s5);
        font-size:clamp(21px,6vw,31px);
      }
      .chapter-word{
        grid-column:1/13;
        font-size:clamp(74px,21vw,150px);
      }
      .chapter-copy{
        grid-column:3/13;
        margin-top:var(--s6);
        font-size:clamp(20px,5.5vw,28px);
      }
      .system-word{
        font-size:clamp(48px,13vw,94px);
      }
      .principles{
        grid-column:1/13;
        margin-bottom:28px;
      }
      .system-copy{
        grid-column:3/13;
        font-size:clamp(20px,5.5vw,28px);
      }
      .final-title{
        font-size:clamp(68px,19vw,135px);
      }
      .domain{grid-column:1/7}
      .contact-panel{
        grid-column:2/13;
        margin-top:var(--s5);
      }
      .contact-meta{
        margin-bottom:var(--s5);
        flex-direction:column;
        gap:var(--s1);
      }
      .mail{
        font-size:clamp(22px,6.2vw,32px);
      }
      .experiment .chapter-word::after{
        width:.35em;height:.35em;
      }
    }

    
    @media (max-height:760px) and (min-width:821px){
      .grid{
        padding-top:calc(var(--header) + var(--s4));
        padding-bottom:var(--s4);
        row-gap:var(--s3);
      }
      .hero-line{font-size:clamp(58px,8.6vw,128px)}
      .chapter-word{font-size:clamp(76px,13vw,190px)}
      .system-word{font-size:clamp(48px,7.6vw,112px)}
      .final-title{font-size:clamp(64px,11vw,164px)}
      .chapter-copy,
      .system-copy{font-size:clamp(17px,1.25vw,22px)}
    }

    @media (max-width:820px){
      html{scroll-snap-type:y mandatory}
      .frame{height:100svh;min-height:100svh;scroll-snap-stop:always}
      .grid{
        height:100%;
        min-height:0;
        row-gap:var(--s4);
      }
    }


    /* restrained motion system */
    .hero-line,
    .chapter-word,
    .system-word,
    .final-title,
    .chapter-copy,
    .system-copy,
    .hero-copy,
    .contact-panel,
    .principles{
      will-change:transform,opacity;
    }

    .reveal{
      opacity:1;
      transform:translateY(34px);
      transition:
        opacity .8s cubic-bezier(.2,.7,.2,1),
        transform .8s cubic-bezier(.2,.7,.2,1);
    }

    .js .reveal{
      opacity:0;
      transform:translateY(34px);
    }

    .js .reveal.is-visible{
      opacity:1;
      transform:translateY(0);
    }

    .chapter-word,
    .final-title,
    .system-word{
      transform-origin:left center;
    }

    .experiment .chapter-word::after{
      animation:floatDot 4.8s ease-in-out infinite;
    }

    @keyframes floatDot{
      0%,100%{transform:translate(0,0) scale(1)}
      50%{transform:translate(-10px,12px) scale(.88)}
    }

    .hero-line em{
      position:relative;
      border-bottom:0;
    }

    .hero-line em::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-.03em;
      height:.07em;
      background:currentColor;
      transform:scaleX(0);
      transform-origin:left;
      animation:drawLine 1s cubic-bezier(.2,.7,.2,1) .45s forwards;
    }

    @keyframes drawLine{
      to{transform:scaleX(1)}
    }

    .principle{
      transition:
        padding .35s cubic-bezier(.2,.7,.2,1),
        background .35s ease;
    }

    .principle:hover{
      padding-left:10px;
      background:rgba(17,18,15,.035);
    }

    .principle:nth-child(even):hover{
      padding-left:26px;
    }

    .contact-panel::before{
      content:"";
      display:block;
      width:0;
      height:1px;
      background:var(--ink);
      margin-top:-17px;
      margin-bottom:16px;
      transition:width .9s cubic-bezier(.2,.7,.2,1);
    }

    .contact-panel.is-visible::before{
      width:100%;
    }



    /* — Sarangal section color system — */
    .hero{
      background:#F5F3EE;
      color:#151713;
    }

    .learn-section{
      background:#DDE6DC;
      color:#151713;
    }

    .experiment{
      background:#151713;
      color:#F5F3EE;
    }

    .tech-section{
      background:#DCE8EB;
      color:#151713;
    }

    .system{
      background:#E9DDD1;
      color:#151713;
    }

    .contact-section{
      background:#1B1D19;
      color:#F5F3EE;
      border-bottom-color:rgba(243,241,235,.14);
    }

    .contact-section .label,
    .contact-section .domain,
    .contact-section .contact-meta,
    .contact-section .contact-note{
      color:rgba(243,241,235,.58);
    }

    .contact-section .domain strong{
      color:#F5F3EE;
    }

    .contact-section .contact-panel{
      border-top-color:rgba(243,241,235,.22);
    }

    .contact-section .mail::before{
      background:#F5F3EE;
    }

    .contact-section .mail:hover{
      color:#1B1D19;
    }

    /* LEARN: expansion / accumulation */
    .learn-field{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
    }

    .learn-field span{
      position:absolute;
      width:clamp(8px,1vw,14px);
      aspect-ratio:1;
      border-radius:50%;
      background:#151713;
      opacity:.16;
    }

    .learn-field span::after{
      content:"";
      position:absolute;
      inset:50%;
      width:1px;
      height:1px;
      border:1px solid rgba(17,18,15,.22);
      border-radius:50%;
      transform:translate(-50%,-50%);
      animation:learnExpand 5.6s cubic-bezier(.16,.8,.2,1) infinite;
    }

    .learn-field span:nth-child(1){left:16%;top:29%;animation-delay:.2s}
    .learn-field span:nth-child(2){left:37%;top:19%;animation-delay:1s}
    .learn-field span:nth-child(3){left:61%;top:38%;animation-delay:1.8s}
    .learn-field span:nth-child(4){left:81%;top:24%;animation-delay:2.5s}
    .learn-field span:nth-child(5){left:72%;top:68%;animation-delay:3.1s}
    .learn-field span:nth-child(2)::after{animation-delay:.7s}
    .learn-field span:nth-child(3)::after{animation-delay:1.5s}
    .learn-field span:nth-child(4)::after{animation-delay:2.3s}
    .learn-field span:nth-child(5)::after{animation-delay:3s}

    @keyframes learnExpand{
      0%{width:1px;height:1px;opacity:.45}
      72%,100%{width:clamp(120px,17vw,270px);height:clamp(120px,17vw,270px);opacity:0}
    }

    .learn-section.is-active .chapter-word{
      animation:learnSettle .85s cubic-bezier(.16,.8,.2,1) both;
    }

    @keyframes learnSettle{
      from{transform:translateY(24px);letter-spacing:-.02em;opacity:.25}
      to{transform:translateY(0);letter-spacing:-.052em;opacity:1}
    }

    /* EXPERIMENT: looping / controlled irregularity */
    .experiment.is-active .experiment-orbit{
      animation-duration:15s;
    }

    .experiment.is-active .chapter-word{
      animation:experimentShift 1.05s cubic-bezier(.16,.8,.2,1) both;
    }

    @keyframes experimentShift{
      0%{transform:translateX(-18px) rotate(-1.6deg);opacity:.25}
      48%{transform:translateX(7px) rotate(.6deg);opacity:1}
      100%{transform:translateX(0) rotate(0);opacity:1}
    }

    /* TECHNOLOGY: scan / precision */
    .tech-section .chapter-word{
      position:relative;
    }

    .tech-section .chapter-word::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-.08em;
      width:0;
      height:2px;
      background:#151713;
    }

    .tech-section.is-active .chapter-word::after{
      animation:techLine 1.15s cubic-bezier(.16,.8,.2,1) .18s forwards;
    }

    @keyframes techLine{
      to{width:min(55%,520px)}
    }

    .tech-section.is-active .tech-radar{
      animation:techResolve .9s cubic-bezier(.16,.8,.2,1) both;
    }

    @keyframes techResolve{
      from{opacity:0;transform:translateY(-50%) scale(.88)}
      to{opacity:.34;transform:translateY(-50%) scale(1)}
    }

    /* MAKE: assembly / alignment */
    .system .principle{
      transform:translateY(18px);
      opacity:0;
    }

    .system.is-active .principle{
      animation:assemble .62s cubic-bezier(.16,.8,.2,1) forwards;
    }

    .system.is-active .principle:nth-child(1){animation-delay:.14s}
    .system.is-active .principle:nth-child(2){animation-delay:.23s}
    .system.is-active .principle:nth-child(3){animation-delay:.32s}
    .system.is-active .principle:nth-child(4){animation-delay:.41s}

    @keyframes assemble{
      to{transform:translateY(0);opacity:1}
    }

    .system.is-active .system-word{
      animation:makeLock .9s cubic-bezier(.16,.8,.2,1) both;
    }

    @keyframes makeLock{
      from{transform:scale(.985);letter-spacing:-.025em;opacity:.4}
      to{transform:scale(1);letter-spacing:-.045em;opacity:1}
    }

    /* CONTACT: resolution / stillness */
    .contact-resolve{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
    }

    .contact-resolve span{
      position:absolute;
      left:50%;
      top:50%;
      width:1px;
      height:1px;
      border:1px solid rgba(243,241,235,.11);
      border-radius:50%;
      transform:translate(-50%,-50%);
      opacity:0;
    }

    .contact-section.is-active .contact-resolve span:nth-child(1){
      animation:resolveRing 2s cubic-bezier(.16,.8,.2,1) forwards;
    }
    .contact-section.is-active .contact-resolve span:nth-child(2){
      animation:resolveRing 2s cubic-bezier(.16,.8,.2,1) .18s forwards;
    }
    .contact-section.is-active .contact-resolve span:nth-child(3){
      animation:resolveRing 2s cubic-bezier(.16,.8,.2,1) .36s forwards;
    }

    @keyframes resolveRing{
      0%{width:1px;height:1px;opacity:.45}
      100%{width:min(82vw,1100px);height:min(82vw,1100px);opacity:0}
    }

    .contact-section.is-active .final-title{
      animation:contactResolve .95s cubic-bezier(.16,.8,.2,1) both;
    }

    @keyframes contactResolve{
      from{transform:translateY(20px);opacity:.15}
      to{transform:translateY(0);opacity:1}
    }

    /* section-specific divider treatment */
    .learn-section::after{opacity:.16}
    .experiment::after{opacity:.14}
    .tech-section::after{opacity:.12}
    .system::after{opacity:.13}
    .contact-section::after{opacity:.16}

    @media(max-width:640px){
      .learn-field span:nth-child(4),
      .learn-field span:nth-child(5){display:none}
      .learn-field span::after{
        animation-duration:6.5s;
      }
      .contact-resolve{opacity:.55}
    }

    /* — Creative spatial layer — */
    .frame::after{
      content:"";
      position:absolute;
      inset:auto var(--pad) 18px var(--pad);
      height:1px;
      background:linear-gradient(90deg,currentColor 0 6%,transparent 6% 100%);
      opacity:.12;
      pointer-events:none;
    }

    .ambient-grid{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.3;
      background-image:
        linear-gradient(to right, var(--line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line) 1px, transparent 1px);
      background-size:clamp(72px,8vw,128px) clamp(72px,8vw,128px);
      mask-image:linear-gradient(to bottom,transparent 3%,#000 34%,transparent 96%);
      transform:perspective(900px) rotateX(62deg) scale(1.35) translateY(18%);
      transform-origin:center bottom;
      animation:gridDrift 16s linear infinite alternate;
    }

    @keyframes gridDrift{
      to{transform:perspective(900px) rotateX(62deg) scale(1.42) translate(2.5%,-2%)}
    }

    .hero-orbit{
      position:absolute;
      width:clamp(170px,19vw,300px);
      aspect-ratio:1;
      border:1px solid var(--line);
      border-radius:50%;
      right:var(--pad);
      top:19%;
      pointer-events:none;
      animation:orbitTurn 24s linear infinite;
    }

    .hero-orbit::before,
    .hero-orbit::after{
      content:"";
      position:absolute;
      inset:20%;
      border:1px solid var(--line);
      border-radius:50%;
    }
    .hero-orbit::after{inset:42%}

    .hero-orbit span{
      position:absolute;
      font-family:var(--font-site);
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:.08em;
      background:var(--paper);
      padding:3px 6px;
      white-space:nowrap;
    }
    .hero-orbit span:nth-child(1){left:50%;top:-7px;transform:translateX(-50%)}
    .hero-orbit span:nth-child(2){right:-28px;top:58%}
    .hero-orbit span:nth-child(3){left:-12px;bottom:20%}

    @keyframes orbitTurn{to{transform:rotate(360deg)}}
    .hero-orbit span{animation:orbitCounter 24s linear infinite}
    @keyframes orbitCounter{to{transform:rotate(-360deg)}}
    .hero-orbit span:nth-child(1){transform:translateX(-50%)}
    .hero-orbit span:nth-child(1){animation:orbitCounterTop 24s linear infinite}
    @keyframes orbitCounterTop{
      from{transform:translateX(-50%) rotate(0)}
      to{transform:translateX(-50%) rotate(-360deg)}
    }

    .chapter-word{
      transition:
        transform .8s cubic-bezier(.16,.8,.2,1),
        opacity .8s cubic-bezier(.16,.8,.2,1),
        letter-spacing .6s cubic-bezier(.16,.8,.2,1);
    }
    .frame.is-active .chapter-word{
      letter-spacing:-.052em;
    }

    .experiment-orbit{
      position:absolute;
      right:clamp(28px,7vw,120px);
      top:14%;
      width:clamp(210px,27vw,420px);
      aspect-ratio:1;
      border-radius:50%;
      border:1px solid rgba(244,241,234,.18);
      pointer-events:none;
      animation:slowSpin 20s linear infinite;
    }
    .experiment-orbit::before,
    .experiment-orbit::after{
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(244,241,234,.14);
    }
    .experiment-orbit::before{inset:19%}
    .experiment-orbit::after{inset:40%}
    .experiment-orbit i{
      position:absolute;
      width:11px;height:11px;border-radius:50%;
      background:var(--acid);
      box-shadow:0 0 0 8px rgba(185,196,106,.08);
    }
    .experiment-orbit i:nth-of-type(1){left:48%;top:-6px}
    .experiment-orbit i:nth-of-type(2){right:12%;bottom:18%}
    .experiment-orbit i:nth-of-type(3){left:9%;top:45%}
    .experiment-orbit span{
      position:absolute;
      font-family:var(--font-site);
      font-size:9px;
      letter-spacing:.08em;
      color:rgba(244,241,234,.55);
    }
    .experiment-orbit span:nth-of-type(1){left:52%;top:8%}
    .experiment-orbit span:nth-of-type(2){right:3%;bottom:30%}
    .experiment-orbit span:nth-of-type(3){left:2%;top:52%}

    @keyframes slowSpin{to{transform:rotate(360deg)}}

    .tech-radar{
      position:absolute;
      right:-7vw;
      top:50%;
      width:clamp(300px,48vw,740px);
      aspect-ratio:1;
      transform:translateY(-50%);
      border-radius:50%;
      opacity:.34;
      pointer-events:none;
      background:
        repeating-radial-gradient(circle,var(--line) 0 1px,transparent 1px 54px);
    }
    .tech-radar::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      background:conic-gradient(from 0deg,transparent 0 78%,rgba(17,18,15,.11) 87%,transparent 94%);
      animation:radarSweep 6s linear infinite;
    }
    .tech-radar span{
      position:absolute;
      width:7px;height:7px;border-radius:50%;
      background:var(--ink);
      opacity:.5;
      animation:radarPulse 2.6s ease-in-out infinite;
    }
    .tech-radar span:nth-child(1){left:33%;top:29%}
    .tech-radar span:nth-child(2){left:58%;top:55%;animation-delay:.8s}
    .tech-radar span:nth-child(3){left:28%;top:65%;animation-delay:1.5s}
    @keyframes radarSweep{to{transform:rotate(360deg)}}
    @keyframes radarPulse{50%{transform:scale(2);opacity:.14}}

    .make-marquee{
      position:absolute;
      left:0;right:0;
      top:17%;
      overflow:hidden;
      white-space:nowrap;
      opacity:.08;
      pointer-events:none;
      transform:rotate(-3deg) scale(1.05);
    }
    .make-marquee div{
      width:max-content;
      font-size:clamp(58px,8vw,130px);
      font-weight:650;
      letter-spacing:-.04em;
      animation:marquee 20s linear infinite;
    }
    @keyframes marquee{to{transform:translateX(-50%)}}

    .principle span{
      transition:transform .35s cubic-bezier(.16,.8,.2,1);
    }
    .principle:hover span{transform:translateX(6px)}

    .mail{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      transition:padding .35s cubic-bezier(.16,.8,.2,1);
    }
    .mail::before{
      content:"";
      position:absolute;
      z-index:-1;
      inset:100% 0 0;
      background:var(--ink);
      transition:inset .45s cubic-bezier(.16,.8,.2,1);
    }
    .mail:hover{
      color:var(--paper);
      padding-left:14px;
      padding-right:14px;
    }
    .mail:hover::before{inset:0}

    .header-contact{
      position:relative;
      overflow:hidden;
    }

    /* Tablet */
    @media (max-width:1180px){
      :root{--pad:clamp(22px,3.4vw,40px)}
      .hero-line{font-size:clamp(64px,10.8vw,118px)}
      .hero-copy{grid-column:7/13}
      .chapter-word{grid-column:1/8;font-size:clamp(80px,15vw,170px)}
      .chapter-copy{grid-column:8/13}
      .system-copy{grid-column:8/13}
      .contact-panel{grid-column:6/13}
      .hero-orbit{opacity:.7;top:16%}
      .experiment-orbit{opacity:.78}
    }

    /* Tablet portrait */
    @media (max-width:980px) and (min-width:641px){
      :root{
        --header:76px;
        --pad:28px;
      }
      .grid{
        padding-top:calc(var(--header) + 34px);
        padding-bottom:28px;
      }
      .hero-line{
        grid-column:1/12;
        font-size:clamp(68px,12vw,110px);
      }
      .hero-note{grid-column:1/5}
      .hero-copy{grid-column:6/13;font-size:clamp(21px,3vw,30px)}
      .chapter-word{
        grid-column:1/13;
        font-size:clamp(88px,17vw,155px);
        align-self:center;
      }
      .chapter-copy{
        grid-column:7/13;
        font-size:clamp(18px,2.4vw,24px);
      }
      .experiment-orbit{
        width:330px;
        right:-70px;
        top:17%;
      }
      .tech-radar{
        width:540px;
        right:-210px;
        opacity:.25;
      }
      .system-word{
        grid-column:1/12;
        font-size:clamp(64px,11vw,105px);
      }
      .principles{grid-column:1/7}
      .system-copy{grid-column:7/13}
      .final-title{font-size:clamp(88px,16vw,150px)}
      .domain{grid-column:1/5}
      .contact-panel{grid-column:5/13}
      .mail{font-size:clamp(25px,3.7vw,36px)}
    }

    /* Mobile */
    @media (max-width:640px){
      :root{
        --header:64px;
        --pad:18px;
        --s6:36px;
      }
      html{scroll-snap-type:y mandatory}
      .header{padding:15px var(--pad)}
      .logo{width:112px}
      .header-contact{font-size:10px}
      .grid{
        padding-top:calc(var(--header) + 24px);
        padding-bottom:20px;
        row-gap:18px;
      }
      .frame{height:100svh;min-height:100svh}
      .label{
        grid-column:1/10;
        font-size:9px;
      }

      .hero-line{
        grid-column:1/13;
        font-size:clamp(54px,16.5vw,82px);
        line-height:.9;
        max-width:none;
        align-self:center;
      }
      .hero-bottom{grid-column:1/13}
      .hero-note{
        grid-column:1/8;
        font-size:10px;
        line-height:1.45;
      }
      .hero-copy{
        grid-column:2/13;
        font-size:clamp(18px,5.4vw,25px);
        margin-top:18px;
      }
      .hero-orbit{
        width:150px;
        right:-38px;
        top:18%;
        opacity:.45;
      }
      .ambient-grid{
        opacity:.2;
        background-size:72px 72px;
      }

      .chapter-number{grid-column:1/5;font-size:9px}
      .chapter-word{
        grid-column:1/13;
        font-size:clamp(64px,19vw,100px);
        line-height:.82;
        align-self:center;
      }
      .chapter-copy{
        grid-column:2/13;
        font-size:clamp(17px,5vw,23px);
        line-height:1.2;
        margin-top:0;
      }
      .chapter-copy small{
        font-size:9px;
        margin-top:14px;
      }

      .experiment-orbit{
        width:210px;
        right:-78px;
        top:16%;
        opacity:.55;
      }
      .experiment-orbit span{display:none}
      .experiment .chapter-word::after{
        width:.28em;height:.28em;
        right:.02em;
      }

      .tech-radar{
        width:380px;
        right:-220px;
        opacity:.22;
      }

      .system-word{
        grid-column:1/13;
        font-size:clamp(54px,15.6vw,84px);
        align-self:center;
      }
      .system-bottom{grid-column:1/13}
      .principles{
        grid-column:1/13;
        margin-bottom:16px;
      }
      .principle{
        min-height:60px;
        font-size:11px;
      }
      .system-copy{
        grid-column:2/13;
        font-size:clamp(17px,5vw,23px);
      }
      .make-marquee{top:20%}
      .make-marquee div{font-size:66px}

      .final-title{
        grid-column:1/13;
        font-size:clamp(62px,18vw,96px);
        align-self:center;
      }
      .final-bottom{grid-column:1/13}
      .domain{
        grid-column:1/7;
        gap:8px;
      }
      .domain strong{font-size:16px}
      .contact-panel{
        grid-column:1/13;
        margin-top:18px;
      }
      .contact-meta{
        margin-bottom:20px;
        font-size:8px;
      }
      .mail{
        font-size:clamp(20px,5.6vw,28px);
        padding-bottom:12px;
      }
      .contact-address{
      margin:10px 0 0;
      font-style:normal;
      font-family:var(--font-site);
      font-size:9px;
      line-height:1.5;
      letter-spacing:.025em;
      color:inherit;
      opacity:.5;
    }

    .contact-note{
        font-size:10px;
        margin-top:10px;
      }
      .mail:hover{
        padding-left:8px;
        padding-right:8px;
      }
    }

    @media (max-width:640px) and (max-height:700px){
      .grid{padding-top:78px;padding-bottom:14px}
      .hero-line{font-size:clamp(48px,14.5vw,68px)}
      .hero-copy{font-size:17px}
      .chapter-word{font-size:clamp(58px,16vw,82px)}
      .chapter-copy{font-size:16px}
      .system-word{font-size:clamp(48px,14vw,72px)}
      .principle{min-height:48px}
      .final-title{font-size:clamp(56px,16vw,82px)}
      .contact-meta{margin-bottom:12px}
    }

    @media (orientation:landscape) and (max-height:560px){
      .hero-orbit,.experiment-orbit,.tech-radar{opacity:.18}
      .grid{padding-top:68px;padding-bottom:14px}
      .hero-line{font-size:clamp(50px,9vw,78px)}
      .chapter-word{font-size:clamp(66px,12vw,110px)}
      .chapter-copy,.system-copy{font-size:16px}
      .final-title{font-size:clamp(64px,12vw,105px)}
    }


    h1,h2,p{ text-wrap:pretty; }
    .hero-line,.chapter-word,.system-word,.final-title{ text-wrap:balance; }

    .frame{
      content-visibility:auto;
      contain-intrinsic-size:100svh;
      contain:layout paint style;
    }

    .ambient-grid,
    .hero-orbit,
    .experiment-orbit,
    .tech-radar::after,
    .tech-radar span,
    .make-marquee div,
    .learn-field span::after,
    .portfolio-orbit{
      animation-play-state:paused;
    }

    .frame.is-active .ambient-grid,
    .frame.is-active .hero-orbit,
    .frame.is-active .hero-orbit span,
    .frame.is-active .experiment-orbit,
    .frame.is-active .tech-radar::after,
    .frame.is-active .tech-radar span,
    .frame.is-active .make-marquee div,
    .frame.is-active .learn-field span::after,
    .frame.is-active .portfolio-orbit{
      animation-play-state:running;
    }

    @media (max-width:640px){
      .ambient-grid{opacity:.12}
      .hero-orbit{opacity:.34}
      .tech-radar{opacity:.16}
      .make-marquee{opacity:.055}
      .experiment-orbit{opacity:.46}
    }


    /* PORTFOLIO: selected work / reveal */
    .portfolio-section{
      background:#E4E1EA;
      color:#151713;
    }

    .portfolio-section .grid{
      grid-template-rows:auto minmax(0,1fr);
      align-items:center;
    }

    .portfolio-kicker{
      grid-column:1/4;
      align-self:start;
      font-size:11px;
      line-height:1.5;
      text-transform:uppercase;
      letter-spacing:.045em;
      color:#6B6F66;
    }

    .portfolio-title{
      grid-column:1/7;
      grid-row:2;
      align-self:center;
      margin:0;
      font-size:clamp(66px,9.8vw,150px);
      line-height:.84;
      letter-spacing:-.052em;
      font-weight:560;
      max-width:5.2ch;
      position:relative;
      z-index:2;
    }

    .portfolio-card{
      grid-column:7/13;
      grid-row:2;
      align-self:center;
      display:grid;
      grid-template-columns:1.18fr .82fr;
      height:clamp(300px,46vh,430px);
      min-height:0;
      border-top:1px solid rgba(21,23,19,.18);
      border-bottom:1px solid rgba(21,23,19,.18);
      overflow:hidden;
      transition:transform .45s cubic-bezier(.16,.8,.2,1);
      position:relative;
      z-index:2;
    }

    .portfolio-card:hover{
      transform:translateY(-8px);
    }

    .portfolio-media{
      min-height:0;
      height:100%;
      overflow:hidden;
      background:#F5F3EE;
    }

    .portfolio-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s cubic-bezier(.16,.8,.2,1);
    }

    .portfolio-card:hover .portfolio-media img{
      transform:scale(1.035);
    }

    .portfolio-info{
      padding:var(--s4);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:var(--s4);
      background:rgba(255,255,255,.18);
    }

    .portfolio-meta{
      display:flex;
      justify-content:space-between;
      gap:12px;
      font-size:10px;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:#6B6F66;
    }

    .portfolio-info h3{
      margin:auto 0 0;
      font-size:clamp(28px,3.1vw,52px);
      line-height:.94;
      letter-spacing:-.035em;
      font-weight:550;
    }

    .portfolio-info p{
      margin:12px 0 0;
      font-size:13px;
      line-height:1.45;
      color:#5F625C;
      max-width:32ch;
    }

    .portfolio-open{
      margin-top:var(--s4);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-top:12px;
      border-top:1px solid rgba(21,23,19,.16);
      font-size:12px;
    }

    .portfolio-open span:last-child{
      font-size:20px;
      transition:transform .35s cubic-bezier(.16,.8,.2,1);
    }

    .portfolio-card:hover .portfolio-open span:last-child{
      transform:translate(5px,-5px);
    }

    .portfolio-orbit{
      position:absolute;
      left:-7vw;
      top:16%;
      width:clamp(240px,34vw,520px);
      aspect-ratio:1;
      border:1px solid rgba(21,23,19,.11);
      border-radius:50%;
      pointer-events:none;
    }

    .portfolio-orbit::before,
    .portfolio-orbit::after{
      content:"";
      position:absolute;
      border:1px solid rgba(21,23,19,.09);
      border-radius:50%;
    }
    .portfolio-orbit::before{inset:18%}
    .portfolio-orbit::after{inset:39%}

    .portfolio-section.is-active .portfolio-orbit{
      animation:portfolioTurn 18s linear infinite;
    }

    @keyframes portfolioTurn{
      to{transform:rotate(360deg)}
    }


    @media (max-height:780px) and (min-width:981px){
      .portfolio-section .grid{
        padding-top:calc(var(--header) + 22px);
        padding-bottom:22px;
        row-gap:18px;
      }
      .portfolio-title{
        font-size:clamp(58px,8.7vw,128px);
      }
      .portfolio-card{
        height:clamp(270px,43vh,350px);
      }
      .portfolio-info{
        padding:18px;
        gap:14px;
      }
      .portfolio-info h3{
        font-size:clamp(26px,2.6vw,42px);
      }
      .portfolio-info p{
        font-size:12px;
        line-height:1.4;
      }
      .portfolio-open{
        margin-top:14px;
      }
    }

    @media (max-width:980px){
      .portfolio-title{
        grid-column:1/6;
        grid-row:2;
        font-size:clamp(58px,10vw,104px);
      }
      .portfolio-card{
        grid-column:6/13;
        grid-row:2;
        grid-template-columns:1.05fr .95fr;
        height:clamp(300px,43vh,390px);
      }
      .portfolio-info{
        padding:18px;
      }
    }

    @media (max-width:640px){
      .portfolio-section .grid{
        grid-template-rows:auto auto minmax(0,1fr);
        align-items:start;
        row-gap:14px;
      }
      .portfolio-kicker{
        grid-column:1/10;
        grid-row:1;
        font-size:9px;
      }
      .portfolio-title{
        grid-column:1/13;
        grid-row:2;
        font-size:clamp(52px,15vw,78px);
        line-height:.84;
        align-self:start;
        max-width:none;
      }
      .portfolio-card{
        grid-column:1/13;
        grid-row:3;
        align-self:stretch;
        grid-template-columns:1.15fr .85fr;
        height:auto;
        min-height:0;
        max-height:none;
      }
      .portfolio-media{
        min-height:0;
        height:100%;
      }
      .portfolio-info{
        padding:14px;
        gap:10px;
      }
      .portfolio-meta{
        font-size:8px;
        gap:6px;
        flex-direction:column;
      }
      .portfolio-info h3{
        font-size:clamp(24px,7.5vw,34px);
        line-height:.95;
      }
      .portfolio-info p{
        font-size:10px;
        line-height:1.35;
        margin-top:8px;
      }
      .portfolio-open{
        margin-top:10px;
        padding-top:8px;
        font-size:10px;
      }
      .portfolio-open span:last-child{
        font-size:16px;
      }
      .portfolio-orbit{
        width:210px;
        left:-105px;
        top:18%;
        opacity:.45;
      }
    }

    @media (max-width:640px) and (max-height:720px){
      .portfolio-section .grid{
        padding-top:76px;
        padding-bottom:14px;
        row-gap:10px;
      }
      .portfolio-title{
        font-size:clamp(46px,13.5vw,66px);
      }
      .portfolio-info p{
        display:none;
      }
      .portfolio-card{
        grid-template-columns:1.25fr .75fr;
      }
    }

    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
      .reveal{opacity:1!important;transform:none!important}
      .cursor-mark{display:none}
      body{cursor:auto}
    }
  .logo svg{width:100%;height:auto;display:block}.header .logo svg .st0{fill:#fff!important}