:root{
    --ink:#0A0A0C;          /* deep near black */
    --char:#1C1C22;         /* distinctly lighter charcoal */
    --char-2:#26262E;       /* raised charcoal */
    --plaster:#EDE8E0;      /* soft plaster (text on dark) */
    --stone:#9A968E;        /* muted stone (secondary text) */
    --brass:#B8895A;        /* warm timber / brass accent */
    --brass-soft:#caa078;
    --line:rgba(237,232,224,.12);
    --line-2:rgba(237,232,224,.06);
    --maxw:1180px;
    --display:"Fraunces",Georgia,serif;
    --body:"Inter",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  section[id]{scroll-margin-top:84px}
  body{
    background:var(--ink);color:var(--plaster);
    font-family:var(--body);font-weight:300;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  ::selection{background:var(--brass);color:var(--ink)}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  .eyebrow{
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--brass);font-weight:500;
  }
  h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
  .display{font-size:clamp(2.6rem,7vw,5.6rem)}
  p.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--stone);font-weight:300;max-width:46ch}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    transition:background .4s ease,border-color .4s ease,padding .4s ease;
    border-bottom:1px solid transparent;padding:22px 0;
  }
  header.scrolled{background:rgba(13,13,16,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:14px 0}
  .nav{display:flex;align-items:center;justify-content:space-between}
  .brand{font-family:var(--display);font-size:20px;letter-spacing:.16em;font-weight:500}
  .brand span{color:var(--brass)}
  .nav-links{display:flex;gap:26px;align-items:center;white-space:nowrap}
  .nav-links a{font-size:13px;letter-spacing:.02em;color:var(--stone);transition:color .25s;white-space:nowrap}
  .nav-links a:hover{color:var(--plaster)}
  .nav-cta{border:1px solid var(--line);padding:9px 18px;border-radius:100px;color:var(--plaster)!important;transition:all .25s}
  .nav-cta:hover{border-color:var(--brass);background:var(--brass);color:var(--ink)!important}
  .menu-btn{display:none;background:none;border:0;color:var(--plaster);font-size:13px;letter-spacing:.1em;cursor:pointer}

  /* ---------- HERO / REVEAL ---------- */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
  .hero-room{position:absolute;inset:0;z-index:0}
  /* the "wall" gradient — warm timber light pooling from one side */
  .hero-room::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(120% 90% at 78% 30%, rgba(184,137,90,.16), transparent 55%),
      radial-gradient(100% 80% at 12% 90%, rgba(30,30,40,.6), transparent 60%),
      linear-gradient(180deg,#0D0D10,#16161A 60%,#101014);
  }
  /* hidden tech nodes that reveal on pointer proximity / scroll */
  .node{
    position:absolute;width:13px;height:13px;border-radius:50%;
    background:var(--brass);opacity:0;transform:scale(.4);
    transition:opacity .6s ease,transform .6s ease;
    box-shadow:0 0 0 0 rgba(184,137,90,.5);
  }
  .node::after{
    content:attr(data-label);position:absolute;left:22px;top:-4px;white-space:nowrap;
    font-family:var(--body);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--brass-soft);opacity:0;transition:opacity .6s ease .1s;
  }
  .node.lit{opacity:1;transform:scale(1);animation:pulse 3.4s ease-out infinite}
  .node.lit::after{opacity:.9}
  .node.lbl-left::after{left:auto;right:22px;text-align:right}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,137,90,.35)}70%{box-shadow:0 0 0 16px rgba(184,137,90,0)}100%{box-shadow:0 0 0 0 rgba(184,137,90,0)}}
  .hero-inner{position:relative;z-index:2;padding-top:90px}
  .hero h1{margin:18px 0 26px;max-width:16ch}
  .hero h1 em{font-style:italic;color:var(--brass-soft)}
  .hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.03em;
    padding:15px 26px;border-radius:100px;transition:all .28s;cursor:pointer;border:1px solid transparent;
  }
  .btn-primary{background:var(--brass);color:var(--ink);font-weight:500}
  .btn-primary:hover{background:var(--brass-soft);transform:translateY(-2px)}
  .btn-ghost{border-color:var(--line);color:var(--plaster)}
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft)}
  .hero-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);text-align:center}
  .hero-hint .dot{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--brass),transparent)}

  /* ---------- SECTION SCAFFOLD ---------- */
  section{position:relative}
  .band{padding:120px 0}
  .band-line{border-top:1px solid var(--line-2)}
  .sec-head{max-width:52ch;margin-bottom:64px}
  .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);margin:16px 0 20px}
  .reveal{opacity:0;transform:translateY(26px);filter:blur(5px);
    transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1),filter .75s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none;filter:blur(0)}

  /* ---------- PROBLEM / THESIS ---------- */
  .thesis{background:var(--ink);}
  .thesis .big{
    font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.22;
    font-weight:300;max-width:22ch;
  }
  .thesis .big b{font-weight:500;color:var(--brass-soft);font-style:italic}
  .thesis-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
  .compare{display:grid;gap:14px}
  .compare .row{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;font-size:14px;color:var(--stone)}
  .compare .row .k{font-family:var(--display);color:var(--plaster);font-size:15px;min-width:130px}
  .compare .row.us{border-color:rgba(184,137,90,.4);background:rgba(184,137,90,.06)}
  .compare .row.us .k{color:var(--brass-soft)}
  .tick{margin-left:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

  /* ---------- PATHS (homeowner / corporate) ---------- */
  .paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .path{
    position:relative;border:1px solid var(--line);border-radius:20px;padding:40px 36px 36px;
    background:linear-gradient(180deg,var(--char-2),var(--char));overflow:hidden;transition:border-color .3s,transform .3s;
  }
  .path:hover{border-color:rgba(184,137,90,.45);transform:translateY(-4px)}
  .path::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle,rgba(184,137,90,.12),transparent 70%);}
  .path h3{font-size:1.7rem;margin:14px 0 12px}
  .path p{color:var(--stone);font-size:15px;margin-bottom:26px}
  .path ul{list-style:none;display:grid;gap:13px}
  .path li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--plaster)}
  .path li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass);margin-top:8px;flex:0 0 auto}
  .path .ptag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}

  /* ---------- PROCESS ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .step{padding:34px 28px;border-right:1px solid var(--line);position:relative;background:var(--char)}
  .step:last-child{border-right:0}
  .step .num{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--brass);margin-bottom:auto}
  .step h4{font-family:var(--display);font-size:1.3rem;font-weight:400;margin:20px 0 10px}
  .step p{font-size:13.5px;color:var(--stone)}

  /* ---------- FABRICATION feature ---------- */
  .fab{background:var(--ink);}
  .fab-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .fab-stat{display:flex;gap:40px;margin-top:34px;flex-wrap:wrap}
  .fab-stat div .n{font-family:var(--display);font-size:2.4rem;color:var(--brass-soft);line-height:1}
  .fab-stat div .n .pre,.fab-stat div .n .u{font-size:1.4rem;color:var(--stone)}
  .fab-stat div .l{font-size:12px;letter-spacing:.06em;color:var(--stone);margin-top:6px}
  /* the swatch wall — material samples */
  .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .sw{aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;border:1px solid var(--line);background-size:cover;background-position:center;background-repeat:no-repeat}
  .sw span{position:absolute;left:12px;bottom:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .sw::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45))}
  .sw .chip{position:absolute;top:14px;right:14px;width:11px;height:11px;border-radius:50%;background:rgba(184,137,90,.95);z-index:3;box-shadow:0 0 0 4px rgba(255,255,255,.08)}

  /* ---------- MOMENTS (scroll-driven scenes) ---------- */
  .moments{background:var(--char);}
  .moment{
    display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;
    padding:64px 0;border-top:1px solid var(--line-2);
  }
  .moment:first-of-type{border-top:0}
  .moment.flip .m-copy{order:2}
  .moment .m-copy .eyebrow{display:block;margin-bottom:14px}
  .moment .m-copy h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:14px}
  .moment .m-copy h3 em{font-style:italic;color:var(--brass-soft)}
  .moment .m-copy p{color:var(--stone);font-size:15.5px;max-width:42ch}
  .scene{
    position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;
    border:1px solid var(--line);background:#0a0a0d;
    transition:box-shadow 1s ease,border-color 1s ease;
  }
  .scene svg{width:100%;height:100%;display:block}
  .scene .lamp{opacity:1;transition:opacity 1.1s ease}
  .scene.play .lamp{opacity:0}                 /* lights fade OUT as person leaves */
  .scene .figure-out{transform:translateX(0);opacity:1;transition:transform 1.6s cubic-bezier(.4,0,.2,1),opacity 1.2s ease}
  .scene.play .figure-out{transform:translateX(46px);opacity:0}
  .scene .screen-on{opacity:0;transition:opacity .9s ease .3s}
  .scene.play .screen-on{opacity:1}            /* tv wakes when seated */
  .scene .person-sit{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}
  .scene.play .person-sit{opacity:1;transform:none}
  .scene .shade{transition:transform 1.7s cubic-bezier(.4,0,.2,1)}
  .scene.play .shade{transform:translateY(-78px)}  /* shades lift at dawn */
  .scene .dawn{opacity:0;transition:opacity 1.4s ease}
  .scene.play .dawn{opacity:1}
  .scene .pin{opacity:0;transform:scale(.5);transform-origin:center;transition:opacity .6s ease .5s,transform .6s ease .5s}
  .scene.play .pin{opacity:1;transform:scale(1)}
  .scene-tag{position:absolute;left:16px;bottom:14px;font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--brass-soft);z-index:3;opacity:0;transition:opacity .6s ease .6s}
  .scene.play .scene-tag{opacity:.92}
  /* arrival: gates slide apart to reveal lit door */
  .scene .gate-l{transform:translateX(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
  .scene.play .gate-l{transform:translateX(-92px)}
  .scene .gate-r{transform:translateX(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
  .scene.play .gate-r{transform:translateX(92px)}
  .scene .path-light{opacity:0;transition:opacity .5s ease}
  .scene.play .path-light{opacity:1}
  .scene .path-light:nth-of-type(1){transition-delay:.3s}
  .scene .path-light:nth-of-type(2){transition-delay:.55s}
  .scene .path-light:nth-of-type(3){transition-delay:.8s}
  /* security: arming sweep + lock */
  .scene .arm-ring{opacity:0;transform-origin:center;transition:opacity 1s ease}
  .scene.play .arm-ring{opacity:1;animation:armpulse 2.6s ease-out .4s infinite}
  @keyframes armpulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
  .scene .lock-shut{opacity:0;transition:opacity .6s ease .6s}
  .scene.play .lock-shut{opacity:1}
  .scene .win-dark{opacity:0;transition:opacity 1.1s ease}
  .scene.play .win-dark{opacity:1}
  /* climate: warmth gradient fills */
  .scene .warmth{opacity:0;transition:opacity 1.5s ease}
  .scene.play .warmth{opacity:1}
  .scene .wave{opacity:0;transition:opacity .8s ease}
  .scene.play .wave{opacity:.9;animation:rise 3s ease-in-out .3s infinite}
  @keyframes rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  /* corporate: room display FLIPS like a split-flap board, free -> in use */
  .scene .disp-card{transform-box:fill-box;transform-origin:center}
  .scene .disp-free{transform-box:fill-box;transform-origin:center center;transform:scaleY(1);opacity:1;
    transition:transform .42s cubic-bezier(.6,0,.9,.4) .9s,opacity 0s linear 1.31s}
  .scene.play .disp-free{transform:scaleY(0);opacity:0}            /* card folds down out of view */
  .scene .disp-busy{transform-box:fill-box;transform-origin:center center;transform:scaleY(0);opacity:0;
    transition:transform .42s cubic-bezier(.1,.6,.4,1) 1.32s,opacity 0s linear 1.32s}
  .scene.play .disp-busy{transform:scaleY(1);opacity:1}            /* new card unfolds into view */
  .scene .flip-seam{opacity:0;transition:opacity .2s ease 1.28s}
  .scene.play .flip-seam{opacity:.5}
  .scene .desk-glow{opacity:0;transition:opacity 1.1s ease .3s}
  .scene.play .desk-glow{opacity:1}

  /* ---------- NETWORK band ---------- */
  .net{background:var(--ink);}
  .net-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
  .bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:8px}
  .bar{flex:1;background:linear-gradient(180deg,var(--brass-soft),var(--brass));border-radius:7px 7px 0 0;
    height:14%;transition:height 1.1s cubic-bezier(.3,.8,.3,1)}
  .net.play .bar{height:var(--h)}
  .net-note{font-size:12.5px;color:var(--stone);margin-top:14px;letter-spacing:.02em}

  /* ---------- OPEN / ADAPTIVE ---------- */
  .open{background:var(--char)}
  .open-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .open h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 20px}
  .open h2 em{font-style:italic;color:var(--brass-soft)}
  .open-points{list-style:none;display:grid;gap:20px;margin-top:8px}
  .open-points li{display:flex;gap:15px}
  .open-points .oi{width:28px;height:28px;flex:0 0 auto;color:var(--brass);margin-top:2px}
  .open-points .oi svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .open-points .t{font-size:15px;color:var(--plaster)}
  .open-points .t b{font-weight:500}
  .open-points .t span{display:block;color:var(--stone);font-size:13.5px;margin-top:3px}
  /* contrast card: locked vs open */
  .vs{display:grid;gap:14px}
  .vs .vs-row{border:1px solid var(--line);border-radius:16px;padding:22px 24px}
  .vs .vs-row .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;color:var(--stone)}
  .vs .vs-row.locked .lbl{color:var(--stone)}
  .vs .vs-row.open-r{border-color:rgba(184,137,90,.4);background:rgba(184,137,90,.06)}
  .vs .vs-row.open-r .lbl{color:var(--brass-soft)}
  .vs .vs-row p{font-size:14px;color:var(--stone);line-height:1.5}
  .vs .vs-row.open-r p{color:var(--plaster)}
  .vs .vs-row .x{color:#8a7f74}

  /* ---------- SIMPLICITY ---------- */
  .simple{background:var(--char);}
  .simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .simple h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 20px}
  .simple h2 em{font-style:italic;color:var(--brass-soft)}
  .simple-points{list-style:none;display:grid;gap:22px;margin-top:8px}
  .simple-points li{display:flex;gap:16px}
  .simple-points .si{width:30px;height:30px;flex:0 0 auto;color:var(--brass);margin-top:2px}
  .simple-points .si svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .simple-points .t{font-size:15px;color:var(--plaster)}
  .simple-points .t b{font-weight:500}
  .simple-points .t span{display:block;color:var(--stone);font-size:13.5px;margin-top:3px}
  /* the "one tap" visual */
  .tap-card{border:1px solid var(--line);border-radius:20px;padding:38px 34px;background:var(--char-2);text-align:center}
  .tap-card .scene-row{display:flex;justify-content:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
  .tap-chip{padding:11px 18px;border:1px solid var(--line);border-radius:100px;font-size:13px;color:var(--stone);
    display:flex;align-items:center;gap:9px;transition:all .3s}
  .tap-chip .d{width:7px;height:7px;border-radius:50%;background:#3a3a44;transition:background .3s}
  .tap-card.lit .tap-chip{border-color:rgba(184,137,90,.4);color:var(--plaster)}
  .tap-card.lit .tap-chip .d{background:var(--brass)}
  .tap-card .tap-chip:nth-child(1){transition-delay:.05s}
  .tap-card .tap-chip:nth-child(2){transition-delay:.2s}
  .tap-card .tap-chip:nth-child(3){transition-delay:.35s}
  .tap-card .tap-chip:nth-child(4){transition-delay:.5s}
  .tap-card .one{font-family:var(--display);font-size:1.5rem;color:var(--plaster);margin-bottom:6px}
  .tap-card .one em{font-style:italic;color:var(--brass-soft)}
  .tap-card .cap{font-size:13px;color:var(--stone)}

  /* ---------- SYSTEMS / WHAT WE INSTALL ---------- */
  .systems{background:var(--ink);}
  .sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .sys{
    border:1px solid var(--line);border-radius:18px;padding:30px 28px;
    background:linear-gradient(180deg,var(--char-2),var(--char));
    transition:border-color .3s,transform .3s;display:flex;flex-direction:column;
  }
  .sys:hover{border-color:rgba(184,137,90,.42);transform:translateY(-4px)}
  .sys .ic{width:40px;height:40px;color:var(--brass);margin-bottom:18px}
  .sys .ic svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .sys h3{font-size:1.28rem;margin-bottom:6px}
  .sys .sub{font-size:12.5px;color:var(--brass);letter-spacing:.04em;margin-bottom:16px}
  .sys ul{list-style:none;display:grid;gap:9px;margin-top:2px}
  .sys li{font-size:13.5px;color:var(--stone);display:flex;gap:9px;line-height:1.45}
  .sys li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);margin-top:7px;flex:0 0 auto;opacity:.7}
  .sys-foot{margin-top:46px;text-align:center;font-size:14.5px;color:var(--stone)}
  .sys-foot b{color:var(--plaster);font-weight:500}

  /* ---------- CASE STUDIES ---------- */
  .cases{background:var(--ink);}
  .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .case{
    border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--char-2);
    transition:border-color .3s,transform .3s;display:flex;flex-direction:column;
  }
  .case:hover{border-color:rgba(184,137,90,.4);transform:translateY(-4px)}
  .case .ph{aspect-ratio:4/3;position:relative;overflow:hidden}
  .case .ph::after{content:attr(data-ph);position:absolute;left:14px;bottom:12px;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(237,232,224,.55);z-index:2}
  .ph-1{background:linear-gradient(135deg,#7a5230,#46342a 60%,#241c16)}
  .ph-2{background:linear-gradient(135deg,#2c2c33,#3f3a44 55%,#1a1a20)}
  .ph-3{background:linear-gradient(135deg,#8a8378,#5a564e 60%,#2e2c28)}
  .case .ph .pinpt{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--brass);
    box-shadow:0 0 0 4px rgba(184,137,90,.18)}
  .case .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
  .case .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
  .case h3{font-size:1.3rem;line-height:1.15}
  .case p{font-size:14px;color:var(--stone)}
  .case .specs{display:flex;gap:18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
  .case .specs div .n{font-family:var(--display);font-size:1.25rem;color:var(--brass-soft);line-height:1}
  .case .specs div .l{font-size:10.5px;letter-spacing:.05em;color:var(--stone);margin-top:3px}
  .case-disclaimer{font-size:12px;color:var(--stone);text-align:center;margin-top:34px;letter-spacing:.03em;font-style:italic}

  /* ---------- PARTNERS ---------- */
  .partners{background:var(--ink)}
  .partners-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
  .quote-card{
    border:1px solid var(--line);border-radius:20px;padding:34px 32px;background:var(--char-2);
    transition:border-color .3s;
  }
  .quote-card + .quote-card{margin-top:18px}
  .quote-card:hover{border-color:rgba(184,137,90,.4)}
  .quote-card blockquote{font-family:var(--display);font-size:1.18rem;line-height:1.4;font-weight:300;color:var(--plaster)}
  .quote-card .who{display:flex;align-items:center;gap:13px;margin-top:20px}
  .quote-card .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brass),#6b4626);flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--ink);font-size:14px;font-weight:600}
  .quote-card .who .nm{font-size:14px;color:var(--plaster)}
  .quote-card .who .rl{font-size:12px;color:var(--stone)}
  .partner-points{list-style:none;display:grid;gap:16px;margin-top:26px}
  .partner-points li{display:flex;gap:14px;font-size:15px;color:var(--plaster)}
  .partner-points li b{color:var(--brass-soft);font-weight:500}
  .partner-points li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);margin-top:8px;flex:0 0 auto}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--char);}
  .contact-card{
    border:1px solid var(--line);border-radius:24px;padding:64px 56px;
    background:radial-gradient(120% 140% at 80% 0%,rgba(184,137,90,.1),transparent 55%),var(--char-2);
    display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
  }
  .contact-card h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:18px}
  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
  .field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
  .field input,.field select,.field textarea{
    background:var(--char);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
    color:var(--plaster);font-family:var(--body);font-size:15px;font-weight:300;transition:border-color .25s;
  }
  .field textarea{line-height:1.6;min-height:100px;width:100%;box-sizing:border-box;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
  .field select{appearance:none;cursor:pointer}
  .form-note{font-size:12px;color:var(--stone);margin-top:10px}
  #formMsg{font-size:14px;color:var(--brass-soft);margin-top:14px;min-height:20px}

  /* ---------- FOOTER ---------- */
  footer{padding:54px 0 40px;border-top:1px solid var(--line)}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .foot .brand{font-size:18px}
  .foot small{color:var(--stone);font-size:12.5px;letter-spacing:.03em}
  .foot-links{display:flex;gap:26px}
  .foot-links a{font-size:12.5px;color:var(--stone);letter-spacing:.06em}
  .foot-links a:hover{color:var(--brass-soft)}

  /* ---------- RESPONSIVE ---------- */
  /* Collapse the inline nav to a menu before it gets cramped */
  @media(max-width:1100px){
    .nav-links{display:none}
    .nav-links.open{display:flex;position:absolute;top:58px;right:22px;left:22px;flex-direction:column;
      background:var(--char-2);padding:20px 24px;border:1px solid var(--line);border-radius:16px;gap:18px;
      box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:60}
    .nav-links.open a{font-size:15px}
    .nav-links.open .nav-cta{text-align:center}
    .menu-btn{display:block}
  }
  @media(max-width:860px){
    .thesis-grid,.fab-grid,.contact-card{grid-template-columns:1fr;gap:40px}
    .partners-grid{grid-template-columns:1fr;gap:36px}
    .case-grid{grid-template-columns:1fr;gap:18px}
    .sys-grid{grid-template-columns:1fr;gap:16px}
    .simple-grid{grid-template-columns:1fr;gap:34px}
    .open-grid{grid-template-columns:1fr;gap:34px}
    .paths-grid{grid-template-columns:1fr}
    .moment,.net-grid{grid-template-columns:1fr;gap:28px}
    .moment.flip .m-copy{order:0}
    .moment .scene{order:-1}
    .steps{grid-template-columns:1fr 1fr}
    .step:nth-child(2){border-right:0}.step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line)}
    .contact-card{padding:44px 30px}
    .wrap{padding:0 22px}
    .band{padding:84px 0}
  }
  @media(max-width:520px){
    .steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}
    .fab-stat{gap:26px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none;filter:none}
    .scene .disp-free{opacity:0;transform:scaleY(0)}
    .scene .disp-busy{opacity:1;transform:scaleY(1)}
    .scene .flip-seam{opacity:.5}
    html{scroll-behavior:auto}
  }

  /* ---------- ACTIVE NAV + SUBPAGE HERO ---------- */
  .nav-links a.active{color:var(--brass-soft)}
  .page-hero{position:relative;padding:150px 0 90px;overflow:hidden}
  .page-hero::before{content:"";position:absolute;inset:0;z-index:0;
    background:radial-gradient(120% 90% at 78% 10%,rgba(184,137,90,.14),transparent 55%),linear-gradient(180deg,#0D0D10,#16161A)}
  .page-hero .wrap{position:relative;z-index:1}
  .page-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);margin:16px 0 22px;max-width:18ch}
  .page-hero h1 em{font-style:italic;color:var(--brass-soft)}
  .page-hero .lead{max-width:52ch}
  .page-hero .hero-actions{margin-top:34px}
  /* split chooser on landing page */
  .choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .choose-grid-3{grid-template-columns:1fr 1fr 1fr}
  .choose{position:relative;border:1px solid var(--line);border-radius:22px;padding:46px 40px;overflow:hidden;
    background:linear-gradient(180deg,var(--char-2),var(--char));transition:border-color .3s,transform .3s;display:block}
  .choose:hover{border-color:rgba(184,137,90,.5);transform:translateY(-5px)}
  .choose::before{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;
    background:radial-gradient(circle,rgba(184,137,90,.14),transparent 70%)}
  .choose .ptag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
  .choose h3{font-size:2rem;margin:14px 0 12px}
  .choose p{color:var(--stone);font-size:15px;margin-bottom:26px}
  .choose .go{font-size:14px;color:var(--brass-soft);letter-spacing:.03em}
  @media(max-width:900px){.choose-grid-3{grid-template-columns:1fr}}
  @media(max-width:760px){.choose-grid{grid-template-columns:1fr}}

/* ---- What we believe ---- */
.believe{background:var(--char);}
.believe-title{font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:16px 0 44px;max-width:18ch}
.creed{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.creed .item{background:rgba(237,232,224,.03);border:1px solid var(--line);border-radius:14px;padding:26px 22px;transition:border-color .4s ease,background .4s ease}
.creed .item:hover{border-color:rgba(184,137,90,.4);background:rgba(237,232,224,.05)}
.creed .n{font-family:var(--display);font-size:1.05rem;color:var(--brass);margin-bottom:14px}
.creed h3{font-size:1.22rem;line-height:1.18;margin-bottom:12px}
.creed p{font-size:14px;color:var(--stone);line-height:1.55;font-weight:300}
@media(max-width:1080px){.creed{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.creed{grid-template-columns:1fr}}

/* ---- What we do that others won't ---- */
.wont{background:var(--ink);}
.wont-title{font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:16px 0 14px;max-width:20ch}
.wont-sub{color:var(--stone);max-width:56ch;margin-bottom:44px;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;line-height:1.5}
.wont-list{display:grid;gap:14px}
.wont-row{background:rgba(237,232,224,.03);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;padding:32px 34px;transition:border-color .4s ease}
.wont-row:hover{border-color:rgba(184,137,90,.4)}
.wont-row .us h3{font-size:1.5rem;line-height:1.18;margin-bottom:11px;color:var(--plaster)}
.wont-row .us h3 .mk{color:var(--brass-soft);font-style:italic}
.wont-row .us p{color:var(--stone);font-size:16px;line-height:1.6;font-weight:300}
.wont-row .them{align-self:center;border-left:1px solid var(--line);padding-left:38px}
.wont-row .them .lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:8px}
.wont-row .them p{color:var(--stone);font-size:15px;line-height:1.55;font-weight:300}
@media(max-width:760px){.wont-row{grid-template-columns:1fr;gap:18px;padding:26px 24px}.wont-row .them{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}}

/* ---- FAQ ---- */
.faq{background:var(--char)}
.faq-title{font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:16px 0 40px;max-width:20ch}
.faq-list{display:grid;border-top:1px solid var(--line)}
.faq-item{background:transparent;padding:30px 0;border-bottom:1px solid var(--line)}
.faq-item h3{font-size:1.35rem;line-height:1.25;margin-bottom:12px;color:var(--plaster)}
.faq-item p{font-size:16px;color:var(--stone);line-height:1.62;font-weight:300;max-width:74ch}

/* ---- Founders / Who we are ---- */
.prose{max-width:68ch;display:grid;gap:18px}
.prose p{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--stone);line-height:1.7;font-weight:300}
.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.founder{background:rgba(237,232,224,.03);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.f-portrait{aspect-ratio:4/3;background:linear-gradient(135deg,#1a1a20,#101014);display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}
.f-portrait::after{content:attr(data-ph);position:absolute;bottom:12px;left:16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.f-init{font-family:var(--display);font-size:2.4rem;color:var(--brass);opacity:.5}
.f-body{padding:26px 28px}
.f-body .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.f-body h3{font-size:1.5rem;margin:10px 0 12px;color:var(--plaster)}
.f-body p{font-size:15px;color:var(--stone);line-height:1.6;font-weight:300}
@media(max-width:760px){.founder-grid{grid-template-columns:1fr}}

/* ---- Complex automation ideas ---- */
.ideas{background:var(--char);}
.ideas-title{font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:16px 0 14px;max-width:22ch}
.ideas-sub{color:var(--stone);max-width:58ch;margin-bottom:46px;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.5}
.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.idea{background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:28px 26px;transition:border-color .4s ease,transform .4s ease}
.idea:hover{border-color:rgba(184,137,90,.45);transform:translateY(-3px)}
.idea .trigger{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.idea .trigger::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 10px 1px rgba(184,137,90,.6)}
.idea h3{font-size:1.32rem;line-height:1.2;margin-bottom:11px;color:var(--plaster)}
.idea p{font-size:14.5px;color:var(--stone);line-height:1.6;font-weight:300}
@media(max-width:980px){.ideas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ideas-grid{grid-template-columns:1fr}}

/* ---- Hero sensing mesh (ambient animation) ---- */
.mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.mesh line{stroke:rgba(184,137,90,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.mesh .signal{stroke:var(--brass-soft);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0}
/* nodes breathe continuously even without pointer */
@media (prefers-reduced-motion:no-preference){
  .node{animation:nodeBreathe 4.5s ease-in-out infinite}
  .node:nth-child(3){animation-delay:.6s}
  .node:nth-child(4){animation-delay:1.2s}
  .node:nth-child(5){animation-delay:1.8s}
  .node:nth-child(6){animation-delay:2.4s}
}
@keyframes nodeBreathe{
  0%,100%{opacity:.5;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.05)}
}
/* lit (pointer-near) still overrides with the stronger pulse */
.node.lit{opacity:1;animation:pulse 3.4s ease-out infinite}

/* ---- How it works / process ---- */
.process{background:var(--char)}
.process-title{font-size:clamp(2rem,4vw,3rem);line-height:1.04;margin:16px 0 14px;max-width:22ch}
.process-sub{color:var(--stone);max-width:56ch;margin-bottom:50px;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);overflow:visible;border:none;border-radius:0}
.step{background:var(--char);display:flex;flex-direction:column;padding:36px 28px;align-items:flex-start}
.step .sn{font-family:var(--display);font-size:2rem;color:var(--brass);line-height:1;margin-bottom:20px}
.step h3{font-size:1.1rem;line-height:1.25;margin-bottom:10px;color:var(--plaster)}
.step p{font-size:14px;color:var(--stone);line-height:1.65;font-weight:300}
.step .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-top:14px}
@media(max-width:680px){.step{padding:26px 20px}.step .sn{font-size:1.7rem;margin-bottom:14px}}

/* ---- Platforms strip ---- */
.platforms{margin-top:64px;border-top:1px solid var(--line);padding-top:36px}
.platforms .plabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);text-align:center;margin-bottom:24px}
.plogos{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;align-items:center}
.plogos span{font-family:var(--display);font-size:1.15rem;color:var(--plaster);opacity:.62;letter-spacing:.02em;transition:opacity .3s}
.plogos span:hover{opacity:1;color:var(--brass-soft)}
@media(max-width:640px){.plogos{gap:12px 26px}.plogos span{font-size:1rem}}

/* ---- Legal page ---- */
.legal-wrap{max-width:760px}
.legal-h1{font-size:clamp(2.4rem,5vw,3.4rem);margin:14px 0 22px}
.legal-intro{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--stone);font-weight:300;line-height:1.6;max-width:62ch}
.legal-meta{font-size:14px;color:var(--stone);line-height:1.6;margin-top:20px}
.legal-meta a{color:var(--brass-soft)}
.legal-updated{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-top:8px;opacity:.7}
.legal-wrap h2{font-family:var(--display);font-weight:500;font-size:1.8rem;color:var(--plaster);margin:54px 0 8px;padding-top:30px;border-top:1px solid var(--line)}
.legal-wrap h3{font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--plaster);margin:28px 0 8px}
.legal-wrap p{font-size:16px;color:var(--stone);line-height:1.7;font-weight:300;max-width:68ch}
.legal-wrap p a{color:var(--brass-soft)}
.legal-disclaimer{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;font-style:italic;color:var(--stone);opacity:.85}

/* ---- Ticker ---- */
.ticker-band{overflow:hidden;white-space:nowrap;padding:13px 0;background:var(--brass);user-select:none}
@media(prefers-reduced-motion:reduce){.ticker-band{display:none}}
.ticker-track{display:inline-block;animation:ticker 36s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:inline-block;font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding:0 28px}
.ticker-sep{display:inline-block;color:var(--ink);opacity:.35;font-size:.7rem}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---- Stats band ---- */
.stats-band{padding:80px 0;background:var(--char)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;text-align:center}
.stat-item .val{font-family:var(--display);font-size:clamp(3rem,5vw,4.8rem);font-weight:300;color:var(--brass-soft);line-height:1;margin-bottom:4px;letter-spacing:-.02em}
.stat-item .val .u{font-size:clamp(1.6rem,2.5vw,2.4rem);color:var(--stone);margin-left:2px}
.stat-item .lbl{font-size:.875rem;color:var(--stone);font-weight:300;line-height:1.45;max-width:16ch;margin:8px auto 0}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
.stat-item .val .pre{font-size:clamp(1.6rem,2.5vw,2.4rem);color:var(--stone);margin-right:1px}

/* ═══════════════════════════════════════════════════
   INTERACTIVE FEATURES
   ═══════════════════════════════════════════════════ */

/* 1 ── Custom cursor */
.cur-dot,.cur-ring{position:fixed;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);}
.cur-dot{width:5px;height:5px;background:var(--brass);z-index:9999;}
.cur-ring{width:30px;height:30px;border:1px solid rgba(184,137,90,.45);z-index:9998;transition:width .18s,height .18s,border-color .18s,opacity .25s;}
.cur-ring.hover{width:46px;height:46px;border-color:var(--brass-soft);}
body.custom-cursor *{cursor:none!important;}
@media(hover:none){.cur-dot,.cur-ring{display:none!important}}

/* 2 ── Card tilt */
.choose,.idea,.sys-card,.case{will-change:transform;transition:transform .12s ease;}

/* 3 ── Time greeting */
#timeGreeting{display:block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:20px;min-height:1em;transition:opacity .8s ease;}

/* ---- What disappears ---- */
.dp-header{max-width:52ch;margin-bottom:52px;}
.dp-grid{border-top:1px solid var(--line);}
.dp-row{display:grid;grid-template-columns:1fr 32px 1fr;align-items:baseline;gap:0 16px;padding:17px 0;border-bottom:1px solid var(--line-2);transition:background .2s;}
.dp-row:hover{background:rgba(255,255,255,.018);}
.dp-gone{font-size:15px;color:var(--stone);font-weight:300;}
.dp-sep{font-size:.9rem;color:var(--brass);opacity:.55;text-align:center;}
.dp-replace{font-size:15px;color:var(--plaster);font-weight:300;line-height:1.5;}
@media(max-width:600px){
  .dp-row{grid-template-columns:1fr;gap:3px;padding:14px 0;}
  .dp-sep{display:none;}
  .dp-gone{font-size:13px;}
  .dp-gone::before{content:'× ';color:var(--brass);opacity:.5;font-size:.8em;}
  .dp-replace{font-size:14px;color:var(--brass-soft);}
}

/* 4 ── Scene demo */
.scene-demo{padding:80px 0;}
.scene-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;}
.sc-btn{padding:9px 24px;border-radius:100px;border:1px solid var(--char-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);background:transparent;cursor:pointer;font-family:var(--body);transition:border-color .25s,color .25s,background .25s;}
.sc-btn:hover,.sc-btn.active{border-color:var(--brass);color:var(--brass);background:rgba(184,137,90,.07);}
.scene-stage{max-width:580px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--char-2);}
.scene-svg{display:block;width:100%;}
#sc-room{transition:fill .7s ease;}
#sc-glow-c{transition:stop-color .7s ease,stop-opacity .7s ease;}
#sc-glow{transition:opacity .7s ease;}
#sc-floor-g{transition:stop-color .7s ease;}
#sc-blind{transition:height .7s ease;}
#sc-music{transition:opacity .5s ease;}
#sc-arc-dot{}
.scene-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px auto 0;max-width:580px;}
.sc-chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px solid var(--char-2);color:var(--stone);transition:border-color .4s,color .4s,background .4s;}
.sc-chip.on{border-color:var(--brass);color:var(--brass-soft);background:rgba(184,137,90,.07);}

/* 5 ── Quiz */
.quiz-band{padding:80px 0;background:var(--char-2);}
.quiz-inner{max-width:600px;margin:0 auto;}
.quiz-card{background:var(--char-2);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:clamp(28px,5vw,52px);margin-top:40px;}
.quiz-prog{display:flex;gap:6px;margin-bottom:36px;}
.q-pip{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.07);transition:background .4s;}
.q-pip.done{background:var(--brass);}
.quiz-q{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.25;color:var(--plaster);margin-bottom:28px;}
.quiz-opts{display:flex;flex-direction:column;gap:10px;}
.q-opt{padding:14px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.07);font-size:14.5px;color:var(--stone);cursor:pointer;background:transparent;text-align:left;font-family:var(--body);line-height:1.45;transition:border-color .18s,color .18s,background .18s;}
.q-opt:hover{border-color:var(--brass);color:var(--plaster);background:rgba(184,137,90,.05);}
.q-opt.chosen{border-color:var(--brass);color:var(--brass-soft);background:rgba(184,137,90,.1);}
.quiz-result{display:none;}
.quiz-result.show{display:block;animation:fadeUp .5s ease both;}
.quiz-rec-box{border:1px solid rgba(184,137,90,.2);border-radius:14px;padding:28px;margin:24px 0;background:linear-gradient(135deg,rgba(184,137,90,.07),transparent 55%);}
.quiz-rec-box h3{font-family:var(--display);font-size:1.4rem;margin-bottom:10px;color:var(--plaster);}
.quiz-rec-box p{font-size:14px;color:var(--stone);line-height:1.65;}
.quiz-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.q-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:100px;background:rgba(184,137,90,.12);color:var(--brass-soft);}
.quiz-restart{background:none;border:none;color:var(--stone);font-size:13px;cursor:pointer;text-decoration:underline;margin-top:16px;font-family:var(--body);transition:color .2s;display:inline-block;}
.quiz-restart:hover{color:var(--brass-soft);}

/* 6 ── Before/After slider */
.ba-section{padding:80px 0;}
.ba-wrap{position:relative;max-width:680px;margin:0 auto;border-radius:16px;overflow:hidden;user-select:none;touch-action:pan-y;aspect-ratio:4/3;border:1px solid var(--char-2);cursor:col-resize;}
.ba-side{position:absolute;inset:0;overflow:hidden;}
.ba-before{z-index:2;clip-path:inset(0 50% 0 0);}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;z-index:4;transform:translateX(-50%);width:2px;background:var(--brass);pointer-events:none;}
.ba-knob{position:absolute;top:50%;left:0;width:38px;height:38px;border-radius:50%;background:var(--brass);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(184,137,90,.25),0 4px 16px rgba(0,0,0,.6);}
.ba-knob::before,.ba-knob::after{content:'';display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;position:absolute;top:50%;transform:translateY(-50%);}
.ba-knob::before{border-right:6px solid var(--ink);left:9px;}
.ba-knob::after{border-left:6px solid var(--ink);right:9px;}
.ba-lbl{position:absolute;z-index:3;bottom:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--plaster);background:rgba(10,10,12,.82);padding:4px 11px;border-radius:100px;backdrop-filter:blur(6px);pointer-events:none;}
.ba-lbl.l{left:14px;}.ba-lbl.r{right:14px;}
@media(max-width:640px){.ba-wrap{aspect-ratio:3/2}}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ════════ MOMENT SCENES — sensing-viewport treatment (homes · offices · spaces) ════════
   A restrained, cohesive layer that makes every scroll-driven scene read as a single
   high-tech sensing system: a masked spatial grid, a slow brass scan sweep, live
   target-lock pins, a warming active frame, and a HUD status caption. All purely
   container-level so the existing per-scene storytelling underneath is untouched. */

/* faint spatial grid — masked to a soft circular field, like a live sensor feed */
.scene::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(184,137,90,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(184,137,90,.05) 0 1px, transparent 1px 34px);
  opacity:0;transition:opacity 1.1s ease .25s;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 45%, #000 50%, transparent 100%);
          mask-image:radial-gradient(125% 125% at 50% 45%, #000 50%, transparent 100%);
}
.scene.play::before{opacity:.5}

/* slow brass scan sweep — the unifying "it is sensing" cue */
.scene::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 42%, rgba(184,137,90,.10) 47%,
    rgba(214,176,128,.22) 50%, rgba(184,137,90,.10) 53%, transparent 58%);
  transform:translateX(-100%);opacity:0;
}
.scene.play::after{animation:sceneScan 5.2s cubic-bezier(.55,0,.45,1) .5s infinite}
@keyframes sceneScan{
  0%{transform:translateX(-100%);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}

/* the viewport frame warms while the scene is actively sensing */
.scene.play{box-shadow:inset 0 0 0 1px rgba(184,137,90,.14), inset 0 0 38px rgba(184,137,90,.045)}

/* pins read as live target locks rather than static dots */
.scene.play .pin{animation:pinBreathe 2.6s ease-in-out 1.1s infinite}
@keyframes pinBreathe{0%,100%{opacity:1}50%{opacity:.48}}

/* ════════ APPLE-STYLE SCROLL SYSTEM ════════ */

/* staggered grid entrances — cards arrive in sequence, not as a blob */
.sys-grid>.reveal:nth-child(2),.case-grid>.reveal:nth-child(2),.choose-grid>.reveal:nth-child(2){transition-delay:.06s}
.sys-grid>.reveal:nth-child(3),.case-grid>.reveal:nth-child(3),.choose-grid>.reveal:nth-child(3){transition-delay:.12s}
.sys-grid>.reveal:nth-child(4){transition-delay:.18s}
.sys-grid>.reveal:nth-child(5){transition-delay:.24s}
.sys-grid>.reveal:nth-child(6){transition-delay:.3s}

/* hero recede — JS drives transform/opacity; hint fades first */
.hero-inner,.hero-room,.page-hero .wrap{will-change:transform,opacity}

/* ── Pinned scene demo: stage sticks, scroll scrubs through the day ── */
.scene-demo.pinned{padding:0;height:340vh;position:relative}
.scene-demo.pinned .wrap{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:60px;padding-bottom:30px;
}
.demo-progress{width:min(580px,100%);margin:26px auto 0;height:2px;border-radius:2px;background:var(--char-2);overflow:hidden}
.demo-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-soft));border-radius:2px}

/* ── Scrollytelling moments: sticky stage, crossfading scenes, dimming copy ── */
.moments-scrolly{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(44px,6vw,84px);align-items:start}
.scrolly-stagecol{position:sticky;top:calc(50vh - 200px)}
.scrolly-stage{position:relative;aspect-ratio:16/11}
.scrolly-stage .scene{
  position:absolute;inset:0;aspect-ratio:auto;
  opacity:0;transform:scale(.965);pointer-events:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),
             box-shadow 1s ease,border-color 1s ease;
}
.scrolly-stage .scene.active{opacity:1;transform:none;pointer-events:auto}
.scrolly-copy .m-copy{
  min-height:82vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.16;transition:opacity .55s ease;
}
.scrolly-copy .m-copy.active{opacity:1}
.scrolly-copy .m-copy:first-child{min-height:64vh}
.scrolly-copy .m-copy:last-child{min-height:64vh}

/* scene caption → HUD status readout with a live blinking indicator */
.scene-tag{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  padding:5px 14px 5px 9px;border-radius:7px;
  background:linear-gradient(90deg, rgba(8,8,11,.74), rgba(8,8,11,0))}
.scene-tag::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--brass-soft);box-shadow:0 0 7px var(--brass-soft)}
.scene.play .scene-tag::before{animation:tagBlink 1.8s steps(1,end) .6s infinite}
@keyframes tagBlink{0%,55%{opacity:1}56%,100%{opacity:.25}}