:root{
    --ink:#0a0a0b;
    --ink-2:#131316;
    --ink-3:#1b1b1e;
    --paper:#f2efe9;
    --paper-2:#e8e4db;
    --accent:#ff3d22;
    --accent-deep:#c22a15;
    --accent-glow:#ff6a4d;
    --stone:#94918a;
    --stone-light:#c7c4bc;
    --line:rgba(245,243,239,0.12);
    --line-strong:rgba(245,243,239,0.22);
    --line-dark:rgba(10,10,11,0.12);
    --line-dark-strong:rgba(10,10,11,0.22);
    --display:'Anton', sans-serif;
    --body:'Archivo', sans-serif;
    --mono:'IBM Plex Mono', monospace;
    --ease:cubic-bezier(.16,.84,.34,1);
    --container: min(1240px, 92vw);
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;}

  ::selection{background:var(--accent);color:var(--ink);}

  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

  .wrap{width:var(--container);margin-inline:auto;}

  .eyebrow{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .eyebrow::before{
    content:'';
    width:.85em;height:.85em;
    background:
      linear-gradient(var(--accent),var(--accent)) 0 0/50% 50% no-repeat,
      linear-gradient(var(--accent),var(--accent)) 100% 100%/50% 50% no-repeat;
    background-color:transparent;
    display:inline-block;
    flex:none;
  }
  .light-section .eyebrow{color:var(--accent-deep);}

  h1,h2,h3{
    font-family:var(--display);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.005em;
    line-height:.92;
  }

  .section{
    padding:clamp(4.5rem,9vw,8.5rem) 0;
    position:relative;
  }
  .light-section{background:var(--paper);color:var(--ink);}
  .light-section .stone{color:#5b584f;}

  .divider-top{border-top:1px solid var(--line);}
  .light-section.divider-top{border-top:1px solid var(--line-dark);}

  .stone{color:var(--stone);}

  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.6em;
    font-family:var(--mono);
    font-size:.82rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:.95em 1.6em;
    border-radius:100px;
    border:1px solid transparent;
    white-space:nowrap;
    overflow:hidden;
    isolation:isolate;
    transition:border-color .4s ease, color .4s ease;
  }
  .btn::before{
    content:'';
    position:absolute;inset:0;z-index:-1;
    border-radius:100px;
    transform:scale(0);
    transform-origin:50% 50%;
    transition:transform .55s var(--ease);
  }
  .btn:hover::before{transform:scale(1);}

  .btn-solid{background:var(--accent);color:var(--ink);}
  .btn-solid::before{background:var(--ink);}
  .btn-solid:hover{color:var(--accent-glow);}

  .btn-ghost{border-color:var(--line-strong);color:var(--paper);}
  .btn-ghost::before{background:var(--accent);}
  .btn-ghost:hover{border-color:var(--accent);color:var(--ink);}
  .light-section .btn-ghost{border-color:var(--line-dark-strong);color:var(--ink);}
  .light-section .btn-ghost::before{background:var(--accent-deep);}
  .light-section .btn-ghost:hover{border-color:var(--accent-deep);color:var(--paper);}

  .btn svg{width:1em;height:1em;transition:transform .3s var(--ease);}
  .btn:hover svg{transform:translate(2px,-2px);}

  /* ---------- checker mark ---------- */
  .checker{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    width:2.2rem;height:2.2rem;
    flex:none;
  }
  .checker i{background:var(--accent);transition:background .4s var(--ease), transform .4s var(--ease);}
  .checker i:nth-child(2n){background:transparent;}
  .logo:hover .checker i{background:var(--accent);}
  .logo:hover .checker i:nth-child(2n){background:var(--paper);}
  .logo:hover .checker i:nth-child(odd){transform:scale(.7);}

  /* ================= NAV ================= */
  header{
    position:fixed;inset:0 0 auto 0;
    z-index:100;
    padding:1.1rem 0;
    background:linear-gradient(to bottom, rgba(10,10,11,.92), rgba(10,10,11,0));
    backdrop-filter:blur(2px);
  }
  header.scrolled{background:rgba(10,10,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
  .logo{display:flex;align-items:center;gap:.7rem;font-family:var(--display);letter-spacing:.02em;}
  .logo .checker{width:1.5rem;height:1.5rem;}
  .logo-text{font-size:1.05rem;line-height:1;}
  .logo-text span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.28em;color:var(--stone);text-transform:uppercase;margin-top:.25rem;}
  .nav-links{display:flex;gap:2.2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;}
  .nav-links a{position:relative;padding-bottom:.3rem;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:1.4rem;}
  .nav-toggle{display:none;}

  /* ================= HERO ================= */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
    padding-top:9rem;
    overflow:hidden;
  }
  .hero-video-wrap{
    position:absolute;inset:0;
    overflow:hidden;
    z-index:-3;
    background:#0a0a0b;
  }
  .hero-video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    filter:grayscale(.2) brightness(.7);
    will-change:transform;
  }
  .hero-scrim{
    position:absolute;inset:0;
    z-index:-2;
    background:
      linear-gradient(180deg, rgba(10,10,11,.78) 0%, rgba(10,10,11,.34) 32%, rgba(10,10,11,.58) 68%, #0a0a0b 100%),
      linear-gradient(90deg, rgba(10,10,11,.5) 0%, transparent 35%, transparent 65%, rgba(10,10,11,.4) 100%);
  }
  .hero-grain{
    position:absolute;inset:0;z-index:-1;opacity:.4;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:5px 5px;
  }
  .hero-frame{
    position:absolute; inset:1.4rem;
    border:1px solid var(--line);
    pointer-events:none;
    z-index:5;
  }

  .mute-toggle{
    position:absolute;
    bottom:1.6rem; right:1.6rem;
    z-index:6;
    width:2.7rem;height:2.7rem;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(10,10,11,.45);
    backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    pointer-events:auto;
    transition:border-color .3s ease, transform .3s var(--ease), background .3s ease;
  }
  .mute-toggle:hover{border-color:var(--accent);transform:scale(1.08);background:rgba(10,10,11,.7);}
  .mute-toggle svg{width:1.1rem;height:1.1rem;stroke:var(--paper);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .mute-toggle .icon-off{display:none;}
  .mute-toggle.is-unmuted .icon-on{display:none;}
  .mute-toggle.is-unmuted .icon-off{display:block;}

  .hero-corner{position:absolute;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--stone);text-transform:uppercase;}
  .hero-corner.tr{top:-.2rem;right:.9rem;background:var(--ink);padding:0 .5rem;}
  .hero-corner.bl{bottom:-.2rem;left:.9rem;background:var(--ink);padding:0 .5rem;}

  .hero-inner{width:var(--container);margin-inline:auto;padding-bottom:clamp(2.5rem,5vw,4rem);}
  .hero-eyebrow{margin-bottom:1.6rem;}
  .hero-title{
    font-size:clamp(3.6rem, 10vw, 8.4rem);
    display:flex;flex-direction:column;
    gap:.02em;
  }
  .hero-title .line{overflow:hidden;}
  .hero-title .line span{display:inline-block;will-change:transform;}
  .hero-title .accent-word{color:var(--accent);}

  .hero-foot{
    margin-top:2.6rem;
    display:flex;
    flex-wrap:wrap;
    gap:2.5rem;
    justify-content:space-between;
    align-items:flex-end;
    border-top:1px solid var(--line);
    padding-top:2rem;
  }
  .hero-sub{max-width:34ch;font-size:1.05rem;color:var(--stone-light);}
  .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}
  .hero-stats{display:flex;gap:2.4rem;}
  .hero-stat b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--paper);}
  .hero-stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);}

  .scroll-cue{
    position:absolute;bottom:1.6rem;left:50%;
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
    z-index:5;
  }
  .scroll-cue .bar{width:1px;height:2.4rem;background:var(--line-strong);position:relative;overflow:hidden;}
  .scroll-cue .bar::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--accent);animation:scrollcue 1.8s ease-in-out infinite;}
  @keyframes scrollcue{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

  /* ============ SECTION HEADS ============ */
  .head-row{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:3rem;
    align-items:end;
    margin-bottom:clamp(2.5rem,5vw,4rem);
  }
  .head-row h2{font-size:clamp(2.2rem,4.6vw,4rem);margin-top:.7rem;}
  .line-mask{display:block;overflow:hidden;}
  .line-inner{display:inline-block;will-change:transform;}
  .head-row .lead{font-size:1.1rem;color:var(--stone-light);max-width:44ch;}
  .light-section .head-row .lead{color:#4b483f;}

  /* ============ PROBLEM ============ */
  .problem-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:4rem;
    align-items:start;
  }
  .problem-list{margin-top:2rem;border-top:1px solid var(--line);}
  .problem-list li{
    display:grid;
    grid-template-columns:2.4rem 1fr;
    gap:1.2rem;
    padding:1.3rem 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
    transition:padding-left .4s var(--ease), background .4s ease;
  }
  .problem-list li:hover{padding-left:.6rem;background:rgba(255,61,34,.04);}
  .problem-list li b{font-family:var(--mono);color:var(--accent);font-size:.85rem;transition:transform .4s var(--ease);}
  .problem-list li:hover b{transform:scale(1.2);}
  .problem-list li p{color:var(--stone-light);font-size:1rem;transition:color .3s ease;}
  .problem-list li:hover p{color:var(--paper);}
  .problem-quote{
    font-family:var(--display);
    font-size:clamp(1.7rem,3vw,2.6rem);
    line-height:1.08;
    text-transform:uppercase;
    padding:2.4rem 0 2.4rem 1.6rem;
    border-left:2px solid var(--accent);
  }
  .problem-quote span{color:var(--stone);}

  /* ============ INSIGHT / PIVOT ============ */
  .pivot-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem;}
  .pivot-col{background:var(--ink);padding:2.4rem;}
  .pivot-col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:1.4rem;}
  .pivot-col.hot h4{color:var(--accent);}
  .pivot-col li{padding:.85rem 0;border-top:1px solid var(--line);display:flex;gap:.8rem;font-size:.98rem;color:var(--stone-light);}
  .pivot-col li:first-of-type{border-top:none;}
  .pivot-col.hot li{color:var(--paper);}
  .pivot-col li em{font-style:normal;color:var(--accent);font-family:var(--mono);}

  /* ============ SYSTEM DIAGRAM ============ */
  .system-wrap{margin-top:3rem;}
  .system-stage{
    position:relative;
    width:100%;
    aspect-ratio:16/9.5;
    max-height:640px;
  }
  .system-stage svg{width:100%;height:100%;overflow:visible;}
  .node-label{
    font-family:var(--display);
    font-size:1rem;
    letter-spacing:.03em;
  }
  .node-desc{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;fill:var(--stone);}
  .sys-chevron{fill:none;stroke:var(--stone);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.4;}
  .node-halo{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;}
  .pulse-dot{opacity:0;}
  .pulse-dot.trail{opacity:0;}

  /* ============ PILLARS ============ */
  .pillar-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .pillar{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:2.4rem 1.8rem;
    display:flex;flex-direction:column;gap:1.1rem;
    min-height:280px;
    position:relative;
    overflow:hidden;
    transition:background .4s ease, transform .5s var(--ease);
  }
  .pillar::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
    transform:scaleY(0);transform-origin:0 100%;transition:transform .5s var(--ease);
  }
  .pillar:hover{background:var(--ink-2);transform:translateY(-6px);}
  .pillar:hover::before{transform:scaleY(1);}
  .pillar .num{
    font-family:var(--mono);font-size:.72rem;color:var(--accent);
    display:inline-block;transition:transform .45s var(--ease);
  }
  .pillar:hover .num{transform:scale(1.35) translateX(2px);}
  .pillar h3{font-size:1.35rem;letter-spacing:.01em;text-transform:none;font-family:var(--body);font-weight:700;}
  .pillar p{font-size:.92rem;color:var(--stone);line-height:1.55;}

  /* ============ PROGRESS BAR ============ */
  .progress-bar{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
    background:transparent;
    transform-origin:0 50%;
  }
  .progress-bar i{
    display:block;height:100%;width:100%;
    background:linear-gradient(90deg, var(--accent), var(--accent-glow));
    transform:scaleX(0);
    transform-origin:0 50%;
  }

  /* ============ SELECTED WORK / PROJECTS (horizontal gallery) ============ */
  #projects{position:relative;}
  .projects-bg-layer{
    position:absolute;inset:0;
    z-index:-1;
    opacity:0;
    pointer-events:none;
  }
  .projects-bg-layer.is-first{opacity:1;}

  .gallery-pin{
    position:relative;
    margin-top:2.5rem;
  }
  .gallery-viewport{
    overflow:hidden;
  }
  .gallery-track{
    display:flex;
    width:max-content;
    gap:1.5px;
    background:var(--line);
    border:1px solid var(--line);
    will-change:transform;
  }
  .project-card{
    background:var(--ink);
    width:min(74vw, 420px);
    aspect-ratio:4/5;
    position:relative;
    overflow:hidden;
    color:var(--paper);
    display:block;
    flex:none;
    perspective:900px;
  }
  .project-art{position:absolute;inset:0;overflow:hidden;}
  .project-parallax{position:absolute;inset:-10% -14%;width:128%;height:120%;will-change:transform;}
  .project-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease);
    will-change:transform;
  }
  .project-card:hover .project-img{transform:scale(1.08);}
  .project-tint{position:absolute;inset:0;opacity:.42;}
  .project-card:nth-child(1) .project-tint{background:linear-gradient(155deg,#ff8a5c,#12202b 75%);}
  .project-card:nth-child(2) .project-tint{background:linear-gradient(200deg,#5a7a8c,#1a1a1c 70%);}
  .project-card:nth-child(3) .project-tint{background:linear-gradient(190deg,#ff5a3c,#151316 75%);}
  .project-card:nth-child(4) .project-tint{background:linear-gradient(170deg,#3d7a86,#101418 75%);}
  .project-card:nth-child(5) .project-tint{background:linear-gradient(160deg,#c98a3f,#151013 75%);}
  .project-card:nth-child(6) .project-tint{background:linear-gradient(210deg,#6a5a8c,#111014 70%);}
  .project-art::after{
    content:'';position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.05) 42%, rgba(0,0,0,.4) 100%);
  }
  .project-content{position:absolute;inset:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;z-index:3;}
  .project-top{display:flex;justify-content:space-between;align-items:flex-start;}
  .project-index{font-family:var(--mono);font-size:.66rem;color:var(--stone-light);letter-spacing:.06em;}
  .project-tag{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-glow);
    border:1px solid rgba(255,106,77,.4);padding:.25em .7em;border-radius:100px;
  }
  .project-title{font-family:var(--display);font-size:1.7rem;line-height:1.02;text-transform:uppercase;}
  .project-desc{
    font-size:.86rem;color:var(--stone-light);margin-top:.5rem;max-width:26ch;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease), opacity .4s ease, margin-top .5s var(--ease);
  }
  .project-card:hover .project-desc{max-height:5rem;opacity:1;margin-top:.6rem;}
  .project-view{
    display:inline-flex;align-items:center;gap:.5em;
    font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--paper);margin-top:.9rem;
    opacity:0;transform:translateY(6px);
    transition:opacity .4s ease, transform .4s var(--ease);
  }
  .project-card:hover .project-view{opacity:1;transform:translateY(0);}
  .project-view svg{width:1em;height:1em;transition:transform .3s var(--ease);}
  .project-card:hover .project-view svg{transform:translate(2px,-2px);}
  .project-card::before{
    content:'';position:absolute;inset:0;border:1px solid transparent;z-index:4;pointer-events:none;
    transition:border-color .4s ease;
  }
  .project-card:hover::before{border-color:var(--accent);}

  /* ---- gallery progress readout ---- */
  .gallery-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:1.6rem;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);
  }
  .gallery-hint{display:flex;align-items:center;gap:.6em;}
  .gallery-hint svg{width:1.1em;height:1.1em;stroke:var(--stone);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:hintNudge 1.8s ease-in-out infinite;}
  @keyframes hintNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
  .gallery-count{color:var(--paper);}
  .gallery-count span{color:var(--stone);}
  .gallery-bar{
    position:relative;
    height:1px;
    background:var(--line);
    margin-top:1rem;
  }
  .gallery-bar i{
    position:absolute;top:0;left:0;height:100%;
    background:var(--accent);
    width:0%;
  }
  @media (max-width:980px){
    .gallery-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
    .gallery-track{padding-bottom:.4rem;}
    .project-card{scroll-snap-align:start;width:78vw;}
    .gallery-hint{display:none;}
  }

  /* ---- See More button ---- */
  .see-more-wrap{display:flex;justify-content:center;margin-top:3.5rem;}
  .see-more-btn{
    position:relative;
    display:inline-flex;align-items:center;gap:.9rem;
    padding:1.25em 2.6em;
    border:1px solid var(--line-strong);
    border-radius:100px;
    overflow:hidden;
    isolation:isolate;
    font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--paper);
    transition:border-color .4s ease, color .4s ease;
  }
  .see-more-fill{
    position:absolute;inset:0;z-index:-1;
    background:var(--accent);
    border-radius:100px;
    transform:scale(0);
    transform-origin:50% 50%;
    transition:transform .55s var(--ease);
  }
  .see-more-btn:hover{border-color:var(--accent);color:var(--ink);}
  .see-more-btn:hover .see-more-fill{transform:scale(1);}
  .see-more-arrow{display:inline-flex;}
  .see-more-arrow svg{width:1.1em;height:1.1em;transition:transform .45s var(--ease);}
  .see-more-btn:hover .see-more-arrow svg{transform:translate(3px,-3px);}

  /* ============ RESULTS (light) ============ */
  .stat-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
    margin-bottom:1px;
  }
  .stat-card{
    background:var(--paper);padding:2.6rem 2rem;
    position:relative;
    transition:background .4s ease;
  }
  .stat-card::after{
    content:'';position:absolute;left:2rem;right:2rem;bottom:1.6rem;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
  }
  .stat-card:hover{background:var(--paper-2);}
  .stat-card:hover::after{transform:scaleX(1);}
  .stat-card .num{
    font-family:var(--display);
    font-size:clamp(2.6rem,5vw,4.2rem);
    color:var(--accent-deep);
    line-height:1;
    display:inline-block;
    transition:transform .5s var(--ease);
  }
  .stat-card:hover .num{transform:translateX(4px);}
  .stat-card p{margin-top:.9rem;font-size:.95rem;color:#4b483f;max-width:30ch;}

  .case-grid{
    margin-top:1px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line-dark);
    border:1px solid var(--line-dark);
  }
  .case-card{
    background:var(--ink);
    aspect-ratio:3/4;
    position:relative;
    overflow:hidden;
    color:var(--paper);
    perspective:900px;
  }
  .case-art{position:absolute;inset:0;overflow:hidden;}
  .case-parallax{position:absolute;inset:-10% 0;width:100%;height:120%;will-change:transform;}
  .case-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 1s var(--ease);
    will-change:transform;
  }
  .case-card:hover .case-img{transform:scale(1.08);}
  .case-tint{position:absolute;inset:0;opacity:.45;}
  .case-card:nth-child(1) .case-tint{background:linear-gradient(160deg,#ff8a5c,#12202b 75%);}
  .case-card:nth-child(2) .case-tint{background:linear-gradient(200deg,#5a7a8c,#1a1a1c 70%);}
  .case-card:nth-child(3) .case-tint{background:linear-gradient(190deg,#ff5a3c,#151316 75%);}
  .case-card:nth-child(4) .case-tint{background:linear-gradient(170deg,#3d7a86,#101418 75%);}
  .case-art::after{
    content:'';position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
  }
  .case-content{position:absolute;inset:0;padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;z-index:3;}
  .case-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-glow);
    transform:translateY(0);transition:transform .5s var(--ease);}
  .case-title{font-family:var(--display);font-size:1.5rem;line-height:1.02;}
  .case-result{
    font-family:var(--mono);font-size:.68rem;color:var(--stone-light);letter-spacing:.02em;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease), opacity .4s ease, margin-top .5s var(--ease);
  }
  .case-card:hover .case-result{max-height:3rem;opacity:1;margin-top:.5rem;}
  .case-card::before{
    content:'';position:absolute;inset:0;border:1px solid transparent;z-index:4;pointer-events:none;
    transition:border-color .4s ease;
  }
  .case-card:hover::before{border-color:var(--accent);}

  /* ============ FIT ============ */
  .fit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.4rem;
    margin-top:2.5rem;
  }
  .fit-card{
    border:1px solid var(--line);
    padding:1.8rem 1.5rem;
    position:relative;
    overflow:hidden;
    transition:border-color .4s ease, transform .5s var(--ease), background .4s ease;
  }
  .fit-card::before{
    content:'';position:absolute;top:-1px;left:0;width:2.2rem;height:2px;background:var(--accent);
    transition:width .5s var(--ease);
  }
  .fit-card:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--ink-2);}
  .fit-card:hover::before{width:100%;}
  .fit-icon{
    width:2.5rem;height:2.5rem;
    display:flex;align-items:center;justify-content:center;
    transform-origin:50% 50%;
  }
  .fit-icon svg{
    width:100%;height:100%;
    stroke:var(--stone-light);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .4s ease;
  }
  .fit-card:hover .fit-icon svg{stroke:var(--accent);}
  .fit-card:hover .fit-icon{animation:iconPop .6s var(--ease);}
  @keyframes iconPop{
    0%{transform:scale(1) rotate(0deg);}
    45%{transform:scale(1.18) rotate(-8deg);}
    100%{transform:scale(1.06) rotate(0deg);}
  }
  .fit-card p{font-size:.98rem;color:var(--stone-light);margin-top:1.4rem;transition:color .3s ease;}
  .fit-card:hover p{color:var(--paper);}

  /* ---- animated client / category logo marquee ---- */
  .logo-marquee-wrap{
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid var(--line);
  }
  .logo-marquee-label{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
    margin-bottom:1.4rem;
  }
  .logo-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .logo-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:marqueeScroll 32s linear infinite;
  }
  .logo-marquee:hover .logo-track{animation-play-state:paused;}
  .logo-item{
    display:flex;align-items:center;gap:1.6rem;
    padding:0 1.6rem;
    font-family:var(--display);
    font-size:clamp(1.3rem,2.4vw,1.9rem);
    letter-spacing:.02em;
    color:var(--stone-light);
    white-space:nowrap;
    text-transform:uppercase;
    transition:color .3s ease;
  }
  .logo-item:hover{color:var(--paper);}
  .logo-sep{width:5px;height:5px;background:var(--accent);flex:none;transform:rotate(45deg);}
  @keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){
    .logo-track{animation:none;}
    .fit-card:hover .fit-icon{animation:none;}
  }

  /* ============ ENGAGE ============ */
  .engage-list{margin-top:2.5rem;border-top:1px solid var(--line);}
  .engage-item{
    display:grid;
    grid-template-columns:.5fr 2fr 3fr;
    gap:2rem;
    align-items:center;
    padding:2.1rem 0;
    border-bottom:1px solid var(--line);
    position:relative;
    transition:padding-left .45s var(--ease), background .45s var(--ease);
  }
  .engage-item:hover{padding-left:1.4rem;background:var(--ink-2);}
  .engage-item::after{
    content:'↗';
    position:absolute;right:0;top:50%;
    transform:translate(12px,-50%);
    font-family:var(--mono);font-size:1.2rem;color:var(--accent);
    opacity:0;transition:opacity .4s ease, transform .4s var(--ease);
  }
  .engage-item:hover::after{opacity:1;transform:translate(0,-50%);}
  .engage-mark{font-family:var(--mono);font-size:.78rem;color:var(--accent);transition:transform .4s var(--ease);}
  .engage-item:hover .engage-mark{transform:scale(1.3);}
  .engage-item h3{font-size:1.5rem;text-transform:none;font-family:var(--body);font-weight:700;transition:color .3s ease;}
  .engage-item p{color:var(--stone);font-size:.96rem;max-width:46ch;}

  /* ============ DIFFERENT ============ */
  .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:2.5rem;}
  .diff-list li{
    display:flex;gap:1rem;
    padding:1.15rem 0;
    border-top:1px solid var(--line);
    font-size:1.02rem;
    color:var(--stone-light);
    transition:padding-left .4s var(--ease), color .3s ease;
  }
  .diff-list li:last-child{border-bottom:1px solid var(--line);}
  .diff-list li b{font-family:var(--mono);color:var(--accent);font-size:.8rem;flex:none;padding-top:.15rem;transition:transform .4s var(--ease);}
  .diff-list li:hover{padding-left:.7rem;color:var(--paper);}
  .diff-list li:hover b{transform:translateX(2px) scale(1.15);}

  /* ============ CONTACT ============ */
  .contact{
    background:var(--ink);
    position:relative;
  }
  .contact-title{
    font-size:clamp(3.4rem,10vw,9rem);
    text-align:left;
  }
  .contact-grid{
    margin-top:3rem;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:3rem;
    align-items:end;
  }
  .contact-rows{border-top:1px solid var(--line);}
  .contact-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:1.3rem 0;
    border-bottom:1px solid var(--line);
    font-family:var(--mono);
    font-size:.95rem;
  }
  .contact-row span:first-child{color:var(--stone);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;}
  .contact-row a{display:flex;align-items:center;gap:.6rem;transition:color .3s ease;}
  .contact-row a:hover{color:var(--accent);}

  footer{
    border-top:1px solid var(--line);
    padding:2.2rem 0;
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--stone);text-transform:uppercase;
    flex-wrap:wrap;gap:1rem;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:980px){
    .nav-links{display:none;}
    .head-row{grid-template-columns:1fr;gap:1.2rem;}
    .problem-grid{grid-template-columns:1fr;}
    .pivot-grid{grid-template-columns:1fr;}
    .pillar-grid{grid-template-columns:repeat(2,1fr);}
    .stat-row{grid-template-columns:1fr;}
    .case-grid{grid-template-columns:repeat(2,1fr);}
    .fit-grid{grid-template-columns:repeat(2,1fr);}
    .engage-item{grid-template-columns:1fr;gap:.6rem;}
    .diff-grid{grid-template-columns:1fr;gap:2rem;}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .pillar-grid{grid-template-columns:1fr;}
    .case-grid{grid-template-columns:1fr;}
    .fit-grid{grid-template-columns:1fr;}
    .hero-foot{flex-direction:column;align-items:flex-start;}
    .hero-stats{gap:1.6rem;flex-wrap:wrap;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }