:root{
    --bg:#0b0d10;
    --bg-alt:#12151a;
    --panel:#171b21;
    --panel-2:#1d222a;
    --steel:#8b93a0;
    --steel-light:#c7cdd6;
    /* --cobalt is BACKGROUND-ONLY: 2.9:1 on --panel-2, fails as text.
       Use --cobalt-light (5.1:1+) or --cobalt-pale for coloured text. */
    --cobalt:#2f5fde;
    --cobalt-dark:#2450c4;   /* pressed/hover fill — white on this is 6.6:1 */
    --cobalt-light:#5b8dff;
    --cobalt-pale:#9fc0ff;
    --white:#f5f7fa;
    --line:rgba(255,255,255,0.09);
    --line-strong:rgba(255,255,255,0.16);
    --font-display:'Oswald',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;scroll-padding-top:80px;}

  body{
    background:var(--bg);
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img,video{max-width:100%;display:block;}
  /* the hidden attribute always wins over component display rules */
  [hidden]{display:none !important;}

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

  /* visually hidden but available to screen readers */
  .sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  /* skip link — hidden until keyboard-focused */
  .skip-link{
    position:absolute;
    top:0;left:0;
    z-index:1200;
    transform:translateY(-120%);
    background:var(--cobalt);
    color:#fff;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:14px 22px;
    transition:transform .2s ease;
  }
  .skip-link:focus{transform:translateY(0);}

  .container{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:20px;
    height:1px;
    background:var(--cobalt-light);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:0.01em;
    line-height:1.05;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:14px 26px;
    border-radius:2px;
    transition:all .2s ease;
    cursor:pointer;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--cobalt);
    color:#fff;
  }
  /* darken on hover — lightening dropped white text to 3.13:1 */
  .btn-primary:hover{background:var(--cobalt-dark);}
  .btn-outline{
    border-color:var(--line-strong);
    color:var(--white);
  }
  .btn-outline:hover{border-color:var(--cobalt-light);color:var(--cobalt-light);}

  /* ===== NAV ===== */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(11,13,16,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 32px;
    max-width:1240px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-size:19px;
    letter-spacing:0.02em;
    font-weight:600;
  }
  .logo .cube{width:auto;height:34px;flex-shrink:0;display:block;}
  .logo strong{color:var(--white);}
  .logo span{color:var(--steel);font-weight:400;}

  .nav-links{
    display:flex;
    gap:28px;
    align-items:center;
  }
  .nav-links a{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--steel-light);
    transition:color .2s ease;
    position:relative;
    /* six items in a mono face crowd the logo before the mobile breakpoint;
       never let a label break across two lines */
    white-space:nowrap;
  }
  /* tighten before collapsing, so the desktop bar stays legible in between */
  @media(max-width:1120px){
    .nav-links{gap:20px;}
    .nav-links a{font-size:12px;letter-spacing:0.04em;}
    .nav-cta{gap:18px;}
  }
  .nav-links a:hover{color:var(--cobalt-light);}

  .nav-cta{display:flex;align-items:center;gap:28px;}

  .nav-toggle{
    display:none;
    background:none;border:none;
    color:var(--white);
    cursor:pointer;
    /* 44x44 minimum touch target */
    min-width:44px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:11px;
  }

  /* six nav links: tighten spacing just above the hamburger breakpoint */
  @media(min-width:1081px) and (max-width:1180px){
    .nav-links{gap:22px;}
    .nav-links a{font-size:12.5px;letter-spacing:.04em;}
  }

  /* quote CTA that lives inside the mobile menu only */
  .nav-links .nav-quote{display:none;}

  @media(max-width:1080px){
    .nav-links{
      position:fixed;
      top:var(--header-h,64px);left:0;right:0;
      background:var(--bg-alt);
      flex-direction:column;
      /* stretch, not center — otherwise rows are only as wide as their text */
      align-items:stretch;
      gap:0;
      border-bottom:1px solid var(--line);
      max-height:0;
      overflow:hidden;
      /* visibility keeps collapsed links out of the tab order */
      visibility:hidden;
      transition:max-height .3s ease, visibility 0s linear .3s;
    }
    .nav-links.open{
      max-height:420px;
      visibility:visible;
      transition:max-height .3s ease, visibility 0s;
    }
    .nav-links a{
      /* block, or width:100% is ignored on an inline element and the
         tappable area shrinks to the width of the label text */
      display:block;
      padding:18px 32px;
      width:100%;
      border-top:1px solid var(--line);
    }
    .nav-cta .btn-primary{display:none;}
    .nav-toggle{display:inline-flex;}
    .nav-links .nav-quote{
      display:block;
      background:var(--cobalt);
      color:#fff;
      text-align:center;
    }
    .nav-links .nav-quote:hover{background:var(--cobalt-dark);color:#fff;}
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:120px;
    padding-bottom:40px;
    background:
      radial-gradient(ellipse at 75% 20%, rgba(47,95,222,0.16), transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    overflow:hidden;
  }
  .blueprint-grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 75%);
    opacity:0.5;
  }
  .crosshair{
    position:absolute;
    width:18px;height:18px;
  }
  .crosshair::before,.crosshair::after{
    content:"";
    position:absolute;
    background:var(--steel);
  }
  .crosshair::before{width:100%;height:1px;top:50%;}
  .crosshair::after{height:100%;width:1px;left:50%;}
  .cr-1{top:120px;right:8%;}
  .cr-2{bottom:18%;right:22%;}

  /* the video now carries the right-hand side of the hero, so the copy
     column no longer shares the grid with the old panel card */
  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,640px);
    gap:60px;
    align-items:center;
    width:100%;
  }
  .hero-panel[hidden]{display:none;}

  .hero-copy h1{
    font-size:clamp(40px,5.4vw,74px);
    margin:18px 0 24px;
  }
  .hero-copy h1 .accent{color:var(--cobalt-light);}
  .hero-copy p{
    font-size:17px;
    color:var(--steel-light);
    max-width:520px;
    margin-bottom:36px;
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}

  /* each spec stays on one line; wraps as whole items, never mid-phrase */
  .hero-spec-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 22px;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--steel);
    letter-spacing:0.04em;
  }
  .hero-spec-line li{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .hero-spec-line li::before{
    content:"";
    width:5px;height:5px;
    border-radius:50%;
    background:var(--cobalt-light);
    flex-shrink:0;
  }

  .hero-panel{
    position:relative;
    aspect-ratio:4/5;
    border:1px solid var(--line-strong);
    border-radius:2px;
    background:
      linear-gradient(160deg, var(--panel-2), var(--panel) 60%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .hero-panel svg{width:62%;height:62%;}
  .hero-panel .hero-cube-img{width:66%;height:auto;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,0.5));}
  .hero-panel-label{
    position:absolute;
    bottom:20px;left:20px;right:20px;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--steel);
    display:flex;
    justify-content:space-between;
    letter-spacing:0.04em;
  }
  .hero-panel-tag{
    position:absolute;
    top:20px;left:20px;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--cobalt-light);
    letter-spacing:0.06em;
    border:1px solid rgba(91,141,255,0.35);
    padding:4px 10px;
    border-radius:2px;
  }

  @media(max-width:900px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-panel{max-width:340px;margin:0 auto;}
  }

  /* ===== STATS BAR ===== */
  .stats-bar{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-alt);
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .stat{
    padding:40px 32px;
    border-right:1px solid var(--line);
  }
  .stat:last-child{border-right:none;}
  .stat-num{
    font-family:var(--font-display);
    font-size:clamp(32px,4vw,48px);
    color:var(--cobalt-light);
    line-height:1;
  }
  .stat-label{
    margin-top:10px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--steel-light);
    letter-spacing:0.02em;
  }
  @media(max-width:720px){
    .stats-grid{grid-template-columns:1fr;}
    .stat{border-right:none;border-bottom:1px solid var(--line);}
  }

  /* ===== SECTION SHARED ===== */
  section{padding:120px 0;}
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head h2{
    font-size:clamp(28px,3.6vw,44px);
    margin-top:16px;
  }
  .section-head p{
    color:var(--steel-light);
    margin-top:18px;
    font-size:16px;
  }

  /* ===== WHAT WE DO ===== */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--bg);
    padding:36px 28px;
    transition:background .25s ease;
  }
  .service-card:hover{background:var(--panel);}
  .service-num{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--cobalt-light);
  }
  .service-card h3{
    font-size:20px;
    margin:22px 0 14px;
    text-transform:none;
    font-family:var(--font-display);
  }
  .service-card p{
    color:var(--steel-light);
    font-size:14.5px;
  }
  @media(max-width:900px){
    .services-grid{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:560px){
    .services-grid{grid-template-columns:1fr;}
  }

  /* ===== PROCESS ===== */
  .process{background:var(--bg-alt);}
  .process-list{
    display:flex;
    flex-direction:column;
  }
  .process-step{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:32px;
    padding:36px 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .process-list .process-step:last-child{border-bottom:1px solid var(--line);}
  .process-step .p-num{
    font-family:var(--font-mono);
    font-size:14px;
    color:var(--steel);
  }
  .process-step h3{
    font-size:22px;
    text-transform:none;
    font-family:var(--font-display);
    margin-bottom:8px;
  }
  .process-step p{color:var(--steel-light);font-size:15px;max-width:640px;}
  @media(max-width:640px){
    .process-step{grid-template-columns:1fr;gap:10px;}
  }

  /* ===== REELS ===== */
  .reels-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .reel-card{
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:2px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
  }
  .reel-card:hover{border-color:var(--line-strong);transform:translateY(-3px);}
  .reel-thumb{
    aspect-ratio:9/16;
    background:linear-gradient(160deg,var(--panel-2),var(--bg-alt));
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .reel-play{
    width:52px;height:52px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(11,13,16,0.6);
    display:flex;align-items:center;justify-content:center;
  }
  .reel-thumb .rt-tag{
    position:absolute;top:14px;left:14px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--steel);
  }
  .reel-body{padding:18px 20px 22px;}
  .reel-body p{
    font-size:14px;
    color:var(--steel-light);
    margin-bottom:14px;
    min-height:42px;
  }
  .reel-link{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--cobalt-light);
    letter-spacing:0.04em;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .reels-note{
    margin-top:28px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--steel);
  }
  .reels-note a{color:var(--cobalt-light);}
  .reels-note a:hover{text-decoration:underline;}
  @media(max-width:900px){
    .reels-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto;}
  }

  /* ===== CONTACT / CTA ===== */
  .contact{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  .contact h2{font-size:clamp(30px,4vw,46px);margin-top:16px;}
  .contact p{color:var(--steel-light);margin-top:18px;max-width:440px;}
  .contact-info{margin-top:36px;font-family:var(--font-mono);font-size:13.5px;color:var(--steel-light);display:flex;flex-direction:column;gap:10px;}
  .contact-info a:hover{color:var(--cobalt-light);}

  form{display:flex;flex-direction:column;gap:16px;}
  .field{display:flex;flex-direction:column;gap:8px;}
  /* sentence case: uppercase adds friction on form labels without adding character */
  label{font-family:var(--font-mono);font-size:13px;letter-spacing:0.02em;color:var(--steel-light);}
  label .req{color:var(--cobalt-light);margin-left:2px;}
  input,textarea,select{
    background:var(--bg);
    border:1px solid var(--line-strong);
    color:var(--white);
    padding:13px 14px;
    border-radius:2px;
    font-family:var(--font-body);
    font-size:14.5px;
  }
  input:focus,textarea:focus,select:focus{border-color:var(--cobalt-light);}
  textarea{resize:vertical;min-height:110px;}

  /* inline form feedback — replaces the blocking alert() */
  .form-status{
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.5;
    padding:12px 14px;
    border-radius:2px;
    border:1px solid transparent;
  }
  .form-status[hidden]{display:none;}
  .form-status.ok{
    color:var(--cobalt-pale);
    border-color:rgba(159,192,255,0.35);
    background:rgba(47,95,222,0.10);
  }
  .form-status.err{
    color:#ffb4b4;
    border-color:rgba(255,140,140,0.35);
    background:rgba(255,90,90,0.08);
  }

  @media(max-width:860px){
    .contact-grid{grid-template-columns:1fr;}
  }

  /* ===== FOOTER ===== */
  footer{
    padding:32px;
    border-top:1px solid var(--line);
  }
  .footer-inner{
    max-width:1240px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--steel);
  }
  .footer-inner a{color:var(--steel);}
  .footer-inner a:hover{color:var(--cobalt-light);}
  .footer-social{display:flex;gap:24px;}

  /* ===== HERO VIDEO BACKDROP ===== */
  .hero-video-wrap{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
  }
  .hero-video-wrap video,
  .hero-video-wrap img.hero-poster{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  /* keeps the footage from washing out the blueprint identity and
     guarantees the headline keeps its contrast over moving pixels */
  .hero-video-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(11,13,16,0.92) 38%, rgba(11,13,16,0.55) 70%, rgba(11,13,16,0.72) 100%),
      linear-gradient(180deg, rgba(11,13,16,0.85) 0%, transparent 30%, rgba(11,13,16,0.9) 100%),
      radial-gradient(ellipse at 72% 40%, rgba(47,95,222,0.20), transparent 60%);
  }

  /* ===== ONE PANEL / PANEL SYSTEM ===== */
  .panel-system{border-top:1px solid var(--line);}
  .ps-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:64px;
    align-items:center;
  }
  .ps-copy h2{font-size:clamp(30px,4vw,50px);margin-top:16px;}
  .ps-copy h2 .muted{color:var(--steel);display:block;}
  .ps-copy > p{color:var(--steel-light);margin-top:20px;font-size:16px;max-width:520px;}

  .ps-list{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .ps-list li{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:14px;
    align-items:start;
  }
  .ps-list .tick{
    width:22px;height:22px;
    border-radius:50%;
    border:1px solid rgba(91,141,255,0.45);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    margin-top:2px;
  }
  .ps-list .tick svg{width:11px;height:11px;}
  .ps-list b{
    color:var(--white);
    font-weight:600;
    display:block;
    margin-bottom:3px;
  }
  .ps-list p{color:var(--steel-light);font-size:14.5px;line-height:1.55;}

  /* A black-on-white shop drawing can't sit directly on the dark ground —
     framing it as an actual drawing sheet makes the contrast intentional. */
  .ps-sheet{
    border:1px solid var(--line-strong);
    border-radius:3px;
    overflow:hidden;
    background:var(--panel);
  }
  .ps-sheet-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:11px 16px;
    border-bottom:1px solid var(--line-strong);
    background:var(--bg-alt);
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
  }
  .ps-sheet-bar .dwg{color:var(--cobalt-light);}
  .ps-sheet-img{background:#fff;padding:14px;}
  .ps-sheet-img img{width:100%;height:auto;display:block;}
  .ps-sheet-note{
    padding:14px 16px;
    border-top:1px solid var(--line-strong);
    background:var(--bg-alt);
    font-size:13.5px;
    color:var(--steel-light);
    line-height:1.55;
  }

  .ps-specs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:56px;
  }
  .ps-spec{
    background:var(--bg);
    padding:24px 22px;
  }
  .ps-spec .k{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    margin-bottom:8px;
  }
  .ps-spec .v{color:var(--steel-light);font-size:14.5px;line-height:1.5;}
  @media(max-width:980px){
    .ps-grid{grid-template-columns:1fr;gap:44px;}
    .ps-specs{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:560px){
    .ps-specs{grid-template-columns:1fr;}
  }

  /* ===== PRECISION / STAT COUNTERS ===== */
  .precision{background:var(--bg-alt);border-top:1px solid var(--line);}
  .precision-head{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:end;
    padding-bottom:36px;
    border-bottom:1px solid var(--line);
    margin-bottom:48px;
  }
  .precision-head h2{font-size:clamp(30px,4vw,50px);}
  .precision-head h2 .muted{color:var(--steel);display:block;}
  .precision-head p{color:var(--steel-light);font-size:16px;max-width:460px;}

  /* photo spans both card rows; four stat cards fill a 2x2 beside it */
  .precision-grid{
    display:grid;
    grid-template-columns:0.95fr 1fr 1fr;
    gap:24px;
  }
  .precision-photo{
    grid-row:span 2;
    border:1px solid var(--line-strong);
    border-radius:2px;
    overflow:hidden;
    background:var(--panel);
    min-height:300px;
  }
  .precision-photo img{width:100%;height:100%;object-fit:cover;}

  .stat-card{
    border:1px solid var(--line-strong);
    border-radius:2px;
    background:linear-gradient(160deg,var(--panel-2),var(--panel) 70%);
    padding:30px 28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:28px;
    min-height:300px;
  }
  .stat-card .sc-label{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
  }
  /* counter rolls up when the card scrolls into view */
  .stat-card .sc-num{
    font-family:var(--font-display);
    font-size:clamp(44px,6vw,72px);
    line-height:1;
    color:var(--white);
    font-variant-numeric:tabular-nums;
  }
  .stat-card .sc-body{
    color:var(--steel-light);
    font-size:14.5px;
    line-height:1.55;
  }
  @media(max-width:980px){
    .precision-head{grid-template-columns:1fr;gap:24px;align-items:start;}
    .precision-grid{grid-template-columns:1fr 1fr;}
    /* spanning full width, the square crop would run enormously tall */
    .precision-photo{grid-column:1/-1;grid-row:auto;min-height:0;height:260px;}
  }
  @media(max-width:640px){
    .precision-grid{grid-template-columns:1fr;}
    .stat-card{min-height:0;}
  }

  /* ===== TESTED / PERFORMANCE ===== */
  .tested{border-top:1px solid var(--line);}
  .tested-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:64px;
    align-items:center;
  }
  .tested-photo{
    border:1px solid var(--line-strong);
    border-radius:2px;
    overflow:hidden;
    position:relative;
    background:var(--panel);
  }
  .tested-photo img{width:100%;height:auto;display:block;}
  /* Body font, not mono — a monospaced caption under a photograph reads as
     code output rather than as a description of the picture. Sits visually
     separate from the image via its own panel and a cobalt rule. */
  .tested-photo figcaption{
    padding:18px 20px;
    border-top:1px solid var(--line);
    font-family:var(--font-body);
    font-size:14.5px;
    line-height:1.55;
    letter-spacing:0;
    text-transform:none;
    color:var(--steel-light);
    background:var(--bg-alt);
    display:flex;
    gap:14px;
    align-items:stretch;
  }
  .tested-photo figcaption::before{
    content:"";
    flex-shrink:0;
    width:3px;
    background:var(--cobalt-light);
    border-radius:2px;
  }
  .tested-photo figcaption b{color:var(--white);font-weight:600;}
  .tested-photo figcaption .cap-orange{color:#ff9a5c;font-weight:600;}
  .tested-photo figcaption .cap-blue{color:var(--cobalt-pale);font-weight:600;}
  .tested h2{font-size:clamp(30px,4vw,48px);margin-top:16px;}
  .tested p{color:var(--steel-light);margin-top:20px;font-size:16px;}

  .test-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
  }
  .test-badge{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--cobalt-light);
    border:1px solid rgba(91,141,255,0.35);
    border-radius:2px;
    padding:7px 13px;
  }
  .partners{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px 22px;
    margin-top:32px;
    padding-top:26px;
    border-top:1px solid var(--line);
    font-family:var(--font-display);
    font-size:17px;
    letter-spacing:0.1em;
    color:var(--steel);
  }
  .partners .dot{color:var(--line-strong);}
  @media(max-width:900px){
    .tested-grid{grid-template-columns:1fr;gap:40px;}
  }

  /* ===== PROJECTS ===== */
  .projects{background:var(--bg-alt);border-top:1px solid var(--line);}
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .project-card{
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--panel);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
  }
  .project-card:hover{border-color:var(--cobalt-light);transform:translateY(-3px);}
  .project-plate{
    aspect-ratio:16/10;
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg,var(--panel-2),var(--bg-alt));
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .project-plate img{
    width:100%;height:100%;
    object-fit:cover;
    /* desaturate slightly so photos sit inside the dark palette instead of
       fighting it; full colour on hover rewards the interaction */
    filter:saturate(0.72) brightness(0.82);
    transition:filter .3s ease, transform .4s ease;
  }
  .project-card:hover .project-plate img{
    filter:saturate(1) brightness(0.95);
    transform:scale(1.03);
  }
  /* cobalt scrim keeps the category tag legible over any photo */
  .project-plate::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(11,13,16,0.55) 0%, transparent 42%, rgba(11,13,16,0.35) 100%);
    pointer-events:none;
  }
  .project-plate .project-cat{z-index:2;}
  .project-plate svg{width:54%;height:auto;opacity:0.75;}
  .project-cat{
    position:absolute;
    top:14px;left:14px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    border:1px solid rgba(91,141,255,0.35);
    background:rgba(11,13,16,0.72);
    padding:4px 10px;
    border-radius:2px;
  }
  .project-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .project-body h3{
    font-size:20px;
    text-transform:none;
    font-family:var(--font-display);
  }
  .project-body p{color:var(--steel-light);font-size:14.5px;flex:1;}
  .project-link{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    margin-top:4px;
  }
  @media(max-width:980px){.projects-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:640px){.projects-grid{grid-template-columns:1fr;}}

  /* ===== INTRO ANIMATION — 3-piece collision with heavy impact ===== */
  .intro-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background:#08090c;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:30px;
    transition:opacity .7s ease, visibility .7s ease;
    overflow:hidden;
  }
  /* cinematic backdrop: dark vignette + faint center glow that intensifies on impact */
  .intro-overlay::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(160px 160px at 50% 46%, rgba(47,111,206,0.10), transparent 70%),
      radial-gradient(ellipse at 50% 46%, #12161d 0%, #08090c 70%);
  }
  .intro-overlay::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 46%, rgba(0,0,0,0.85), transparent 60%);
    -webkit-mask-image:radial-gradient(circle at 50% 46%, rgba(0,0,0,0.85), transparent 60%);
  }
  .intro-overlay.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* stage holds the shake on impact (impact lands ~1.2s) */
  .intro-stage{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:introShake .5s cubic-bezier(.36,.07,.19,.97) forwards .85s;
  }
  @keyframes introShake{
    0%{transform:translate(0,0);}
    12%{transform:translate(-6px,4px);}
    24%{transform:translate(7px,-3px);}
    36%{transform:translate(-5px,3px);}
    48%{transform:translate(4px,2px);}
    60%{transform:translate(-3px,-2px);}
    74%{transform:translate(2px,1px);}
    88%{transform:translate(-1px,1px);}
    100%{transform:translate(0,0);}
  }

  /* white impact flash at the moment of collision */
  .impact-flash{
    position:absolute;
    left:50%;top:48%;
    width:60px;height:60px;
    transform:translate(-50%,-50%) scale(0.2);
    border-radius:50%;
    /* peak softened from 0.95 to 0.55 — a hard white burst is a photosensitivity risk */
    background:radial-gradient(circle, rgba(212,228,255,0.55) 0%, rgba(159,192,255,0.32) 40%, transparent 70%);
    opacity:0;
    pointer-events:none;
    z-index:5;
    animation:flash .4s ease-out forwards .85s;
  }
  @keyframes flash{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.2);}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(2.6);}
  }


  .intro-cube{
    position:relative;
    width:210px;
    height:194px;
  }
  /* contact shadow grounding the weight, appears on impact */
  .intro-cube::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-14px;
    width:160px;
    height:26px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse, rgba(0,0,0,0.75), transparent 72%);
    opacity:0;
    animation:shadowIn .35s ease forwards .9s;
  }
  @keyframes shadowIn{to{opacity:1;}}

  .intro-cube .face{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    will-change:transform,opacity;
    filter:drop-shadow(0 16px 20px rgba(0,0,0,0.5));
  }

  /* Three pieces fly in from their sides and slam together at ~1.15s.
     Long travel + hard decelerating ease = heavy mass. All three land together. */
  .intro-cube .face-left{
    transform:translate(-70vw,0);
    animation:slamLeft .75s cubic-bezier(.7,0,.85,1) forwards .1s;
  }
  .intro-cube .face-right{
    transform:translate(70vw,0);
    animation:slamRight .75s cubic-bezier(.7,0,.85,1) forwards .1s;
  }
  .intro-cube .face-top{
    transform:translate(0,-70vh);
    animation:slamTop .75s cubic-bezier(.7,0,.85,1) forwards .1s;
  }
  @keyframes slamLeft{
    0%{opacity:0;transform:translate(-70vw,0);}
    30%{opacity:1;}
    100%{opacity:1;transform:translate(0,0);}
  }
  @keyframes slamRight{
    0%{opacity:0;transform:translate(70vw,0);}
    30%{opacity:1;}
    100%{opacity:1;transform:translate(0,0);}
  }
  @keyframes slamTop{
    0%{opacity:0;transform:translate(0,-70vh);}
    30%{opacity:1;}
    100%{opacity:1;transform:translate(0,0);}
  }

  .intro-word{
    position:relative;
    z-index:2;
    font-family:var(--font-display);
    letter-spacing:0.18em;
    font-size:16px;
    color:var(--white);
    opacity:0;
    animation:introFadeUp .55s ease forwards 1.35s;
  }
  .intro-word span{color:var(--steel);font-weight:400;}
  @keyframes introFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  .intro-line{
    position:relative;
    z-index:2;
    width:0;
    height:2px;
    background:linear-gradient(90deg,#2f6fce,#9fc0ff);
    animation:introLine .45s ease forwards 1.65s;
  }
  @keyframes introLine{to{width:76px;}}

  @media(max-width:520px){
    .intro-cube{width:160px;height:148px;}
  }

  @media(prefers-reduced-motion:reduce){
    .intro-overlay{display:none;}
  }

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ===== PROJECT DETAIL PAGES ===== */
  .proj-hero{
    position:relative;
    padding:170px 0 70px;
    background:
      radial-gradient(ellipse at 70% 10%, rgba(47,95,222,0.16), transparent 60%),
      var(--bg);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .proj-hero .container{position:relative;z-index:2;}
  .back-link{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:28px;
    padding:6px 0;
  }
  .back-link:hover{color:var(--cobalt-light);}
  .proj-hero h1{font-size:clamp(34px,5vw,64px);margin:16px 0 0;}
  .proj-lede{
    color:var(--steel-light);
    font-size:17px;
    max-width:620px;
    margin-top:20px;
  }
  .proj-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 48px;
    margin-top:38px;
    padding-top:26px;
    border-top:1px solid var(--line);
  }
  .proj-meta dt{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    margin-bottom:5px;
  }
  .proj-meta dd{color:var(--white);font-size:15.5px;}

  .proj-body{padding:96px 0;}
  .proj-cols{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:64px;
    align-items:start;
  }
  .proj-main{display:flex;flex-direction:column;gap:44px;}
  .proj-main h2{
    font-size:clamp(24px,3vw,32px);
    text-transform:none;
    margin-bottom:16px;
  }
  .proj-main p{color:var(--steel-light);font-size:16px;line-height:1.65;}
  .proj-main p + p{margin-top:14px;}

  .proj-quote{
    border-left:3px solid var(--cobalt-light);
    background:var(--panel);
    padding:26px 28px;
    border-radius:2px;
  }
  .proj-quote p{
    color:var(--white);
    font-size:17.5px;
    line-height:1.6;
    font-style:italic;
  }
  .proj-quote p::before{content:"\201C";}
  .proj-quote p::after{content:"\201D";}

  .proj-tags{display:flex;flex-wrap:wrap;gap:9px;}
  .proj-tag{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    color:var(--steel-light);
    border:1px solid var(--line-strong);
    border-radius:2px;
    padding:6px 12px;
  }

  .proj-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:110px;}
  .proj-photo-lg{
    border:1px solid var(--line-strong);
    border-radius:2px;
    overflow:hidden;
    aspect-ratio:16/11;
    background:var(--panel);
  }
  .proj-photo-lg img{
    width:100%;height:100%;
    object-fit:cover;
    filter:saturate(0.8) brightness(0.88);
  }
  .proj-feats{
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--panel);
    padding:26px 24px;
  }
  .proj-feats h3{
    font-size:15px;
    font-family:var(--font-mono);
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    margin-bottom:18px;
  }
  .proj-feats ul{display:flex;flex-direction:column;gap:13px;}
  .proj-feats li{
    color:var(--steel-light);
    font-size:14.5px;
    line-height:1.5;
    padding-left:20px;
    position:relative;
  }
  .proj-feats li::before{
    content:"";
    position:absolute;
    left:0;top:8px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--cobalt-light);
  }

  .proj-results{
    background:var(--bg-alt);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:80px 0;
  }
  .proj-results h2{font-size:clamp(24px,3vw,34px);margin-bottom:36px;}
  .results-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .result{background:var(--bg);padding:30px 26px;}
  .result .r-k{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    margin-bottom:12px;
  }
  .result .r-v{
    font-family:var(--font-display);
    font-size:clamp(28px,3.4vw,40px);
    line-height:1;
    color:var(--cobalt-light);
    font-variant-numeric:tabular-nums;
  }

  .proj-more{padding:96px 0;}
  .proj-cta{
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;
  }
  .proj-cta h2{font-size:clamp(28px,3.6vw,42px);margin-top:16px;}
  .proj-cta p{color:var(--steel-light);margin-top:16px;max-width:520px;}
  .proj-cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

  @media(max-width:980px){
    .proj-cols{grid-template-columns:1fr;gap:48px;}
    .proj-side{position:static;}
    /* spanning the full column, 16:11 runs far too tall */
    .proj-photo-lg{aspect-ratio:auto;height:240px;}
    .results-grid{grid-template-columns:1fr 1fr;}
    .proj-cta{grid-template-columns:1fr;}
  }
  @media(max-width:560px){
    .results-grid{grid-template-columns:1fr;}
    .proj-hero{padding:140px 0 56px;}
  }

  /* ===== MGO SIPS / SPEC SECTION ===== */
  .sips{border-top:1px solid var(--line);background:var(--bg-alt);}

  .why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-bottom:80px;
  }
  .why-card{background:var(--bg-alt);padding:30px 26px;transition:background .25s ease;}
  .why-card:hover{background:var(--panel);}
  .why-card .wc-ico{
    width:34px;height:34px;
    border:1px solid rgba(91,141,255,0.35);
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .why-card .wc-ico svg{width:16px;height:16px;}
  .why-card h3{font-size:17px;text-transform:none;margin-bottom:9px;}
  .why-card p{color:var(--steel-light);font-size:14.5px;line-height:1.55;}
  @media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.why-grid{grid-template-columns:1fr;}}

  /* comparison table — wide content scrolls in its own container */
  .table-wrap{
    overflow-x:auto;
    border:1px solid var(--line-strong);
    border-radius:2px;
    background:var(--panel);
    -webkit-overflow-scrolling:touch;
  }
  table.spec{
    width:100%;
    border-collapse:collapse;
    /* only the 4-column comparison needs this floor; the 3-column spec
       tables fit a half-width column without scrolling */
    min-width:620px;
  }
  .spec-cols table.spec{min-width:0;}
  .spec-cols table.spec th,
  .spec-cols table.spec td{padding:14px 16px;}
  table.spec caption{
    text-align:left;
    padding:16px 20px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    border-bottom:1px solid var(--line-strong);
    background:var(--bg-alt);
  }
  table.spec th,table.spec td{
    padding:15px 20px;
    text-align:left;
    border-bottom:1px solid var(--line);
    font-size:14.5px;
    vertical-align:top;
  }
  table.spec thead th{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--steel);
    font-weight:500;
    background:var(--bg-alt);
    white-space:nowrap;
  }
  table.spec tbody th{
    color:var(--white);
    font-weight:600;
    font-family:var(--font-body);
    font-size:14.5px;
    letter-spacing:0;
    text-transform:none;
  }
  table.spec td{color:var(--steel-light);}
  table.spec tbody tr:last-child th,
  table.spec tbody tr:last-child td{border-bottom:none;}
  /* the Titanwall column is the one being argued for — mark it */
  table.spec .col-own{background:rgba(47,95,222,0.07);}
  table.spec thead .col-own{color:var(--cobalt-light);}

  .verdict{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
  }
  .verdict .mark{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    font-weight:500;
    white-space:nowrap;
  }
  .verdict .yes{color:#5fd39a;}
  .verdict .partly{color:#e8b567;}
  .verdict .no{color:#ff8c8c;}
  .verdict .detail{color:var(--steel);font-size:13.5px;}

  .spec-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:24px;
  }
  @media(max-width:900px){.spec-cols{grid-template-columns:1fr;}}

  .spec-note{
    margin-top:16px;
    font-size:13.5px;
    color:var(--steel);
    line-height:1.55;
  }
  .spec-makeup{
    margin-top:26px;
    padding:20px 22px;
    border:1px solid var(--line);
    border-left:3px solid var(--cobalt-light);
    border-radius:2px;
    background:var(--panel);
    color:var(--steel-light);
    font-size:15px;
    line-height:1.6;
  }
  .spec-makeup b{color:var(--white);font-weight:600;}

  .benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px 28px;
    margin-top:44px;
    padding-top:34px;
    border-top:1px solid var(--line);
  }
  .benefits li{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:12px;
    align-items:start;
    color:var(--steel-light);
    font-size:14.5px;
    line-height:1.5;
  }
  .benefits svg{width:16px;height:16px;margin-top:3px;}
  @media(max-width:900px){.benefits{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.benefits{grid-template-columns:1fr;}}

  .apps-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:56px;
  }
  .app-card{
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--panel);
    padding:26px 22px;
    transition:border-color .2s ease, transform .2s ease;
  }
  .app-card:hover{border-color:var(--cobalt-light);transform:translateY(-3px);}
  .app-card .ac-num{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    color:var(--cobalt-light);
    margin-bottom:14px;
  }
  .app-card h3{font-size:18px;text-transform:none;margin-bottom:10px;}
  .app-card p{color:var(--steel-light);font-size:14px;line-height:1.55;}
  @media(max-width:900px){.apps-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.apps-grid{grid-template-columns:1fr;}}

  /* ============================================================
     BROCHURE-DERIVED COMPONENTS
     ============================================================ */

  /* generic captioned figure — photos lifted from the print brochure */
  .figure{
    border:1px solid var(--line-strong);
    border-radius:3px;
    overflow:hidden;
    background:var(--panel);
  }
  .figure img{width:100%;height:auto;display:block;}
  .figure figcaption{
    padding:14px 18px;
    border-top:1px solid var(--line);
    background:var(--bg-alt);
    font-size:14px;
    line-height:1.55;
    color:var(--steel-light);
  }
  .figure figcaption b{color:var(--white);font-weight:600;}

  /* white-background technical drawings read as drawing sheets, not raw assets */
  .figure .sheet-img{background:#fff;padding:12px;}

  .split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .split.wide-left{grid-template-columns:1.15fr 1fr;}
  .split.wide-right{grid-template-columns:1fr 1.15fr;}
  .split h2{font-size:clamp(26px,3.4vw,40px);margin-top:16px;}
  .split-copy > p{color:var(--steel-light);margin-top:18px;font-size:16px;line-height:1.65;}
  @media(max-width:900px){
    .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr;gap:36px;}
  }

  /* ---- numbered step list ---- */
  .steps{display:flex;flex-direction:column;margin-top:28px;}
  .step-row{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:20px;
    padding:20px 0;
    border-top:1px solid var(--line);
    align-items:start;
  }
  .steps .step-row:last-child{border-bottom:1px solid var(--line);}
  .step-row .n{
    width:34px;height:34px;
    border-radius:50%;
    border:1px solid rgba(91,141,255,0.45);
    color:var(--cobalt-light);
    font-family:var(--font-mono);
    font-size:13px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .step-row h3{font-size:17px;text-transform:none;margin-bottom:7px;}
  .step-row p{color:var(--steel-light);font-size:14.5px;line-height:1.55;}

  /* ---- R-value comparison bars ---- */
  .rbars{display:flex;flex-direction:column;gap:26px;margin-top:32px;}
  .rbar-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    margin-bottom:10px;
  }
  .rbar-name{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--steel-light);
  }
  .rbar-val{
    font-family:var(--font-display);
    font-size:26px;
    line-height:1;
    color:var(--steel);
  }
  .rbar-row.own .rbar-name{color:var(--cobalt-light);}
  .rbar-row.own .rbar-val{color:var(--white);font-size:30px;}
  .rbar-track{
    height:14px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden;
  }
  .rbar-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg, var(--steel) 0%, #6b7382 100%);
    transition:width 1.1s cubic-bezier(.2,.7,.3,1);
  }
  .rbar-row.own .rbar-fill{
    background:linear-gradient(90deg, var(--cobalt) 0%, var(--cobalt-light) 100%);
  }
  .rbar-note{margin-top:22px;font-size:13.5px;color:var(--steel);line-height:1.55;}

  /* ---- fire performance ---- */
  .fire-wrap{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:32px;
    align-items:center;
    padding:30px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    background:linear-gradient(160deg,var(--panel-2),var(--panel) 70%);
  }
  .class-a{width:132px;text-align:center;flex-shrink:0;}
  .class-a .shield{
    border:2px solid var(--cobalt-light);
    border-radius:6px 6px 46% 46% / 6px 6px 34% 34%;
    padding:16px 10px 24px;
  }
  .class-a .lbl{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    color:var(--steel-light);
  }
  .class-a .big{
    font-family:var(--font-display);
    font-size:52px;
    line-height:1;
    color:var(--white);
    margin-top:2px;
  }
  .class-a .std{
    margin-top:12px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--cobalt-light);
    line-height:1.5;
  }
  .fire-facts{display:flex;flex-direction:column;gap:12px;}
  .fire-facts li{
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:baseline;
    padding-bottom:11px;
    border-bottom:1px solid var(--line);
    color:var(--steel-light);
    font-size:14.5px;
  }
  .fire-facts li:last-child{border-bottom:none;padding-bottom:0;}
  .fire-facts .v{
    font-family:var(--font-mono);
    font-size:13.5px;
    color:var(--cobalt-light);
    white-space:nowrap;
  }
  @media(max-width:640px){
    .fire-wrap{grid-template-columns:1fr;gap:24px;padding:24px;}
    .class-a{width:auto;max-width:150px;}
  }

  /* ---- cost comparison ---- */
  .cost-note{
    margin-top:18px;
    padding:18px 20px;
    border:1px solid var(--line);
    border-left:3px solid var(--cobalt-light);
    border-radius:2px;
    background:var(--panel);
  }
  .cost-note ul{display:flex;flex-direction:column;gap:10px;}
  .cost-note li{
    color:var(--steel-light);
    font-size:14px;
    line-height:1.55;
    padding-left:20px;
    position:relative;
  }
  .cost-note li::before{
    content:"";
    position:absolute;left:0;top:8px;
    width:6px;height:6px;border-radius:50%;background:var(--cobalt-light);
  }
  table.spec td.save{color:#5fd39a;font-family:var(--font-mono);font-size:13.5px;white-space:nowrap;}
  table.spec tr.total th,table.spec tr.total td{
    background:rgba(47,95,222,0.09);
    font-weight:600;
    color:var(--white);
    border-top:1px solid var(--line-strong);
  }

  /* ---- big headline stat ---- */
  .headline-stat{
    margin-top:32px;
    padding:34px 30px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    background:
      radial-gradient(ellipse at 22% 0%, rgba(47,95,222,0.18), transparent 62%),
      var(--panel);
    text-align:center;
  }
  .headline-stat .hs-num{
    font-family:var(--font-display);
    font-size:clamp(44px,7vw,84px);
    line-height:1;
    color:var(--cobalt-light);
    font-variant-numeric:tabular-nums;
  }
  .headline-stat .hs-lbl{
    margin-top:12px;
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--steel-light);
  }

  /* ---- yes/no comparison columns ---- */
  .vs-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:44px;
  }
  .vs-col{
    border:1px solid var(--line-strong);
    border-radius:3px;
    overflow:hidden;
    background:var(--panel);
  }
  .vs-col .vs-head{
    padding:15px 20px;
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    border-bottom:1px solid var(--line-strong);
  }
  .vs-col.good .vs-head{background:rgba(95,211,154,0.12);color:#7fe0b0;}
  .vs-col.bad .vs-head{background:rgba(255,140,140,0.10);color:#ff9d9d;}
  .vs-col ul{padding:20px;display:flex;flex-direction:column;gap:13px;}
  .vs-col li{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:12px;
    align-items:start;
    color:var(--steel-light);
    font-size:14.5px;
    line-height:1.5;
  }
  .vs-col .ic{font-family:var(--font-mono);font-size:14px;line-height:1.4;}
  .vs-col.good .ic{color:#5fd39a;}
  .vs-col.bad .ic{color:#ff8c8c;}
  @media(max-width:760px){.vs-grid{grid-template-columns:1fr;}}

  /* ---- partner network grid ---- */
  .net-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:44px;
  }
  .net-card{background:var(--bg);padding:26px 22px;transition:background .25s ease;}
  .net-card:hover{background:var(--panel);}
  .net-card h3{
    font-size:14px;
    font-family:var(--font-mono);
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--cobalt-light);
    margin-bottom:10px;
  }
  .net-card p{color:var(--steel-light);font-size:14px;line-height:1.5;}
  @media(max-width:900px){.net-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.net-grid{grid-template-columns:1fr;}}

  /* ---- case study callout ---- */
  .case-callout{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    align-items:start;
    padding:26px 28px;
    margin-top:32px;
    border:1px solid rgba(255,154,92,0.30);
    border-left:3px solid #ff9a5c;
    border-radius:3px;
    background:rgba(255,154,92,0.06);
  }
  .case-callout .cc-year{
    font-family:var(--font-display);
    font-size:34px;
    line-height:1;
    color:#ff9a5c;
    white-space:nowrap;
  }
  .case-callout h3{font-size:19px;text-transform:none;margin-bottom:9px;}
  .case-callout p{color:var(--steel-light);font-size:15px;line-height:1.6;}
  @media(max-width:640px){.case-callout{grid-template-columns:1fr;gap:14px;}}

  /* ---- page cross-links ---- */
  .page-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:24px;
  }
  .page-link-card{
    border:1px solid var(--line-strong);
    border-radius:3px;
    background:var(--panel);
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color .2s ease, transform .2s ease;
  }
  .page-link-card:hover{border-color:var(--cobalt-light);transform:translateY(-3px);}
  .page-link-card h3{font-size:20px;text-transform:none;}
  .page-link-card p{color:var(--steel-light);font-size:14.5px;flex:1;}
  .page-link-card .go{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--cobalt-light);
  }
  @media(max-width:760px){.page-links{grid-template-columns:1fr;}}

  /* ---- applications list with detail ---- */
  .app-detail{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:44px;
  }
  .app-detail > div{background:var(--bg-alt);padding:28px 24px;}
  .app-detail h3{font-size:17px;text-transform:none;margin-bottom:9px;}
  .app-detail p{color:var(--steel-light);font-size:14px;line-height:1.55;}
  .app-detail .ad-num{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.08em;
    color:var(--cobalt-light);
    margin-bottom:12px;
  }
  @media(max-width:900px){.app-detail{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.app-detail{grid-template-columns:1fr;}}

  /* ===== R-VALUE (panel-system.html#r-value) ===== */
  .rv{border-top:1px solid var(--line);}
  .rv-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;}
  .rv-intro .section-head{margin-bottom:0;}
  .rv-intro .section-head .rv-lede{font-size:19px;color:var(--white);}
  .rv-intro-copy p,.rv-sub p{color:var(--steel-light);font-size:16px;line-height:1.7;}
  .rv-intro-copy p + p,.rv-sub p + p{margin-top:14px;}
  .rv .rv-goal{
    color:var(--white);
    font-weight:500;
    border-left:3px solid var(--cobalt-light);
    padding-left:16px;
  }

  .rv-block{margin-top:96px;}
  .rv-sub{max-width:760px;}
  .rv-sub h3,.rv-choose-head h3,.rchart-head h3{
    font-size:clamp(22px,2.6vw,30px);
    text-transform:none;
    margin-bottom:16px;
  }

  /* core selector — the bead photos double as the control */
  .rv-cores{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;}
  .rv-core{
    display:grid;
    grid-template-columns:150px 1fr;
    align-items:stretch;
    text-align:left;
    background:var(--panel);
    border:1px solid var(--line-strong);
    border-radius:3px;
    overflow:hidden;
    cursor:pointer;
    color:var(--white);
    font:inherit;
    padding:0;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .rv-core img{width:100%;height:100%;object-fit:cover;min-height:128px;}
  .rv-core:hover{border-color:rgba(91,141,255,.5);}
  .rv-core[aria-pressed="true"]{
    border-color:var(--cobalt-light);
    background:linear-gradient(160deg,rgba(47,95,222,.14),var(--panel) 70%);
    box-shadow:inset 0 0 0 1px var(--cobalt-light);
  }
  .rv-core-body{display:flex;flex-direction:column;gap:3px;padding:18px 20px;}
  .rv-core-name{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1;}
  .rv-core-full{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
  .rv-core-r{margin-top:10px;font-family:var(--font-display);font-size:22px;color:var(--cobalt-light);line-height:1;}
  .rv-core-r small{font-family:var(--font-mono);font-size:11.5px;color:var(--steel);letter-spacing:.04em;}
  .rv-core-pts{margin-top:8px;font-size:13.5px;color:var(--steel-light);}

  .rv-choose{margin-top:64px;}
  .rv-choose-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:24px;}
  .rv-choose-head h3{margin-bottom:0;}
  .rv-choose-head p{color:var(--steel);font-size:14px;}
  .rv-now b{color:var(--cobalt-light);font-weight:600;}

  .rv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .rv-card{
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--bg);
    background-size:28px 28px,28px 28px,100% 100%;
    display:flex;flex-direction:column;
  }
  .rv-thick{padding:26px 26px 0;display:flex;align-items:baseline;gap:12px;}
  .rv-thick .in{font-family:var(--font-display);font-size:clamp(34px,3.6vw,46px);font-weight:600;line-height:1;}
  .rv-thick .mm{font-family:var(--font-mono);font-size:13px;color:var(--steel);}
  .rv-cut{display:block;width:100%;height:auto;padding:6px 18px 0;}
  .rv-cut .face{fill:#8a929c;}
  .rv-cut .skin{fill:#b9c0c9;}
  .rv-cut .skin-t{fill:#d9dee4;}
  .rv-cut .core{fill:url(#beads-eps);}
  .rv[data-core="gps"] .rv-cut .core{fill:url(#beads-gps);}
  .rv-cut .edge{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1;}
  .rv-cut .dim{fill:none;stroke:var(--cobalt-light);stroke-width:1.2;}

  .rv-vals{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong);margin-top:auto;}
  .rv-vals > div{padding:16px 20px 20px;transition:background .25s ease, opacity .25s ease;}
  .rv-vals > div + div{border-left:1px solid var(--line-strong);}
  .rv-vals dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);}
  .rv-vals dd{font-family:var(--font-display);font-size:clamp(28px,3vw,38px);line-height:1.1;margin-top:4px;color:var(--steel-light);}
  .rv[data-core="eps"] .rv-eps,
  .rv[data-core="gps"] .rv-gps{background:rgba(47,95,222,.12);}
  .rv[data-core="eps"] .rv-eps dd,
  .rv[data-core="gps"] .rv-gps dd{color:var(--cobalt-light);}
  .rv[data-core="eps"] .rv-eps dt,
  .rv[data-core="gps"] .rv-gps dt{color:var(--cobalt-pale);}
  .rv[data-core="eps"] .rv-gps,
  .rv[data-core="gps"] .rv-eps{opacity:.55;}

  /* chart */
  .rchart{
    margin-top:44px;
    border:1px solid var(--line-strong);
    border-radius:3px;
    background:var(--panel);
    overflow:hidden;
  }
  .rchart-head{padding:26px 28px 0;}
  .rchart-head h3{margin-bottom:6px;}
  .rchart-head p{color:var(--steel-light);font-size:15px;}
  .rchart-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:stretch;}
  .rchart-scroll{overflow-x:auto;padding:18px 14px 10px 10px;}
  .rchart-svg{display:block;width:100%;min-width:560px;height:auto;}
  .rchart-svg .gl{stroke:rgba(255,255,255,.06);stroke-width:1;}
  .rchart-svg .axl{stroke:var(--steel);stroke-width:1.2;}
  .rchart-svg .ax{fill:var(--steel);font-family:var(--font-mono);font-size:11.5px;}
  .rchart-svg .axt{fill:var(--steel);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;}
  .rchart-svg .band{fill:rgba(91,141,255,.09);}
  .rchart-svg .band-edge{stroke:rgba(91,141,255,.55);stroke-width:1;stroke-dasharray:4 4;}
  .rchart-svg .band-t{fill:var(--cobalt-light);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;}
  .rchart-svg .band-s{fill:var(--cobalt-pale);font-family:var(--font-display);font-size:16px;}
  .rchart-svg .area{fill:rgba(91,141,255,.07);}
  .rchart-svg .curve{fill:none;stroke:#5b8dff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;}
  .rchart-svg .pt circle{fill:var(--bg);stroke:var(--cobalt-pale);stroke-width:2;}
  .rchart-svg .pl{fill:var(--white);font-family:var(--font-mono);font-size:12.5px;font-weight:500;}
  .rchart-svg .tick{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:2 3;}
  .rchart-svg .brk-l{fill:none;stroke:var(--white);stroke-width:1.3;}
  .rchart-svg .bb{fill:var(--white);font-family:var(--font-display);font-size:24px;font-weight:600;}
  .rchart-svg .bs{fill:var(--steel-light);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;}

  /* draw-on when scrolled into view (the .reveal observer adds .in) */
  .rchart.reveal .curve{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .15s;}
  .rchart.reveal.in .curve{stroke-dashoffset:0;}
  .rchart.reveal .pt,.rchart.reveal .brk{opacity:0;transition:opacity .45s ease;}
  .rchart.reveal.in .pt{opacity:1;transition-delay:calc(var(--d) + .6s);}
  .rchart.reveal.in .brk{opacity:1;transition-delay:1.5s;}

  .rchart-keys{
    border-left:1px solid var(--line-strong);
    background:var(--bg-alt);
    display:flex;flex-direction:column;
  }
  .rchart-keys li{
    display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
    padding:18px 22px;
    font-size:14px;line-height:1.5;color:var(--steel-light);
  }
  .rchart-keys li + li{border-top:1px solid var(--line);}
  .k-ic{
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(91,141,255,.45);
    display:flex;align-items:center;justify-content:center;
  }
  .k-ic svg{width:16px;height:16px;fill:none;stroke:var(--cobalt-light);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .rchart-note{
    padding:12px 28px;
    border-top:1px solid var(--line);
    font-size:12.5px;color:var(--steel);
  }

  /* build for performance */
  .rv-climates{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
  .rv-climates li{
    font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--steel-light);
    border:1px solid var(--line-strong);border-radius:2px;
    padding:8px 14px;
  }
  .rv-flow{
    list-style:none;
    display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;
    gap:1px;background:var(--line);border:1px solid var(--line);
    margin-top:22px;
  }
  .rv-flow li{background:var(--bg);padding:24px 22px;display:flex;flex-direction:column;gap:10px;position:relative;}
  .rv-flow li:not(.rv-flow-out)::after{
    content:"";position:absolute;right:-7px;top:50%;
    width:12px;height:12px;background:var(--bg);
    border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
    transform:translateY(-50%) rotate(45deg);z-index:2;
  }
  .rv-flow .n{font-family:var(--font-mono);font-size:12px;color:var(--cobalt-light);}
  .rv-flow b{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.2;}
  .rv-flow li > span:not(.n){color:var(--steel-light);font-size:14px;line-height:1.5;}
  .rv-flow .rv-flow-out{background:linear-gradient(160deg,rgba(47,95,222,.18),var(--bg) 80%);}
  .rv-flow-out b{color:var(--cobalt-pale);}

  /* closing line */
  .rv-close{
    margin-top:96px;
    padding:64px 40px;
    text-align:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:radial-gradient(ellipse at 50% 0%, rgba(47,95,222,.14), transparent 65%);
  }
  .rv-q1{font-size:clamp(17px,2vw,21px);color:var(--steel);}
  .rv-q1 span{color:var(--steel-light);text-decoration:line-through;text-decoration-color:rgba(255,140,140,.55);text-decoration-thickness:2px;}
  .rv-q2{
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;
    font-size:clamp(28px,4.2vw,52px);line-height:1.08;
    max-width:900px;margin:18px auto 0;color:var(--white);
  }
  .rv-sign{margin-top:20px;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-light);}
  .rv-close .btn{margin-top:30px;white-space:normal;}

  @media(max-width:980px){
    .rv-intro{grid-template-columns:1fr;gap:28px;}
    .rv-cards{grid-template-columns:1fr;}
    .rv-card{display:grid;grid-template-columns:1fr 1.1fr;}
    .rv-card .rv-thick{grid-column:1 / -1;}
    .rv-card .rv-cut{align-self:center;}
    .rv-card .rv-vals{grid-template-columns:1fr;border-top:none;border-left:1px solid var(--line-strong);margin-top:0;}
    .rv-card .rv-vals > div{display:flex;flex-direction:column;justify-content:center;}
    .rv-card .rv-vals > div + div{border-left:none;border-top:1px solid var(--line-strong);}
    .rchart-body{grid-template-columns:1fr;}
    .rchart-keys{border-left:none;border-top:1px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr;}
    .rchart-keys li + li{border-top:none;}
    .rchart-keys li:nth-child(n+3){border-top:1px solid var(--line);}
    .rv-flow{grid-template-columns:1fr 1fr;}
    .rv-flow li:not(.rv-flow-out)::after{display:none;}
  }
  @media(max-width:640px){
    .rv-block{margin-top:72px;}
    .rv-cores{grid-template-columns:1fr;}
    .rv-core{grid-template-columns:112px 1fr;}
    .rv-card{grid-template-columns:1fr;}
    .rv-card .rv-cut{max-width:300px;margin:0 auto;}
    .rv-card .rv-vals{grid-template-columns:1fr 1fr;border-left:none;border-top:1px solid var(--line-strong);}
    .rv-card .rv-vals > div + div{border-top:none;border-left:1px solid var(--line-strong);}
    .rchart-keys{grid-template-columns:1fr;}
    .rchart-keys li:nth-child(n+2){border-top:1px solid var(--line);}
    .rv-flow{grid-template-columns:1fr;}
    .rv-close{padding:48px 20px;}
  }
  @media(prefers-reduced-motion:reduce){
    .rchart.reveal .curve{stroke-dashoffset:0;transition:none;}
    .rchart.reveal .pt,.rchart.reveal .brk{opacity:1;transition:none;}
  }

  .meta-link{color:inherit;border-bottom:1px dashed rgba(91,141,255,.6);}
  .meta-link:hover{color:var(--cobalt-light);}
  .inline-link{color:var(--cobalt-light);white-space:nowrap;}
  .inline-link:hover{text-decoration:underline;}
  .table-link{
    display:inline-block;margin-top:14px;
    font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
    color:var(--cobalt-light);padding:6px 0;
  }
  .table-link:hover{text-decoration:underline;}

  /* ===== INSIDE THE BUILD (inside-the-building.html) ===== */
  .split-copy em{font-style:normal;color:var(--white);}

  /* assembly sequence chips */
  .pk-seq{
    list-style:none;
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;
    margin-top:26px;
  }
  .pk-seq li{
    font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--white);
    border:1px solid var(--line-strong);background:var(--panel);
    padding:8px 12px;border-radius:2px;
  }
  .pk-seq li:first-child,.pk-seq li:last-child{border-color:rgba(91,141,255,.55);color:var(--cobalt-pale);}
  .pk-seq li{position:relative;}
  .pk-seq li + li{margin-left:28px;}
  .pk-seq li + li::before{
    content:"\2192";
    position:absolute;left:-21px;top:50%;transform:translateY(-50%);
    color:var(--cobalt-light);font-size:14px;
  }

  /* floor system detail */
  .pk-fig{
    border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;
    background:var(--panel);
  }
  .pk-head{
    display:flex;justify-content:space-between;gap:16px;
    padding:11px 16px;border-bottom:1px solid var(--line-strong);background:var(--bg-alt);
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
  }
  .pk-head .dwg{color:var(--cobalt-light);}
  .pk-body{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:center;
    padding:26px 22px;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--bg);
    background-size:28px 28px,28px 28px,100% 100%;
  }
  .pk-svg{display:block;width:100%;height:auto;overflow:visible;}
  .pk-svg .mgo{fill:#a3aab3;}
  .pk-svg .glue{fill:#c9a66b;}
  .pk-svg .beads{fill:url(#pk-beads);}
  .pk-svg .wood{fill:#d9a45c;}
  .pk-svg .bay{fill:#9a6a35;}
  .pk-svg .osb{fill:url(#pk-osb);}
  .pk-svg .grain{stroke:#b88240;stroke-width:1.2;fill:none;}
  .pk-svg .ol{fill:none;stroke:rgba(0,0,0,.45);stroke-width:1;}
  .pk-svg .pk-lead{stroke:rgba(91,141,255,.55);stroke-width:1;}
  .pk-svg .pk-num{fill:var(--bg);stroke:var(--cobalt-light);stroke-width:1.5;}
  .pk-svg .pk-num-t{fill:var(--white);font-family:var(--font-mono);font-size:12px;font-weight:500;}

  /* layers drop onto one another, bottom first */
  .pk-fig.reveal .pk-layer{opacity:0;transform:translateY(-34px);transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);}
  .pk-fig.reveal.in .pk-layer{opacity:1;transform:none;transition-delay:calc(var(--i) * .28s + .2s);}

  .pk-legend{list-style:none;display:flex;flex-direction:column;gap:14px;}
  .pk-legend li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;}
  .pk-legend .n{
    width:26px;height:26px;border-radius:50%;
    border:1px solid var(--cobalt-light);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:12px;color:var(--white);
  }
  .pk-legend b{display:block;font-family:var(--font-display);font-weight:600;font-size:16.5px;line-height:1.25;color:var(--white);}
  .pk-legend span:not(.n){font-size:13px;color:var(--steel);}

  /* x-ray walkthrough */
  .xray{
    display:grid;
    grid-template-columns:minmax(260px,420px) minmax(0,1fr);
    gap:64px;
    align-items:start;
    margin-top:8px;
  }
  .xr-stage{position:sticky;top:calc(var(--header-h,72px) + 24px);}
  .xr-fig{
    position:relative;
    margin:0 auto;
    height:min(calc(100vh - var(--header-h,72px) - 60px), 900px);
    aspect-ratio:542 / 1312;
    max-width:100%;
  }
  .xr-fig img{
    width:100%;height:100%;display:block;object-fit:contain;
    /* the photo's outer strips hold retouched background — fade them into the page */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .xr-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .xr-dim{fill:rgba(9,11,15,.66);opacity:0;transition:opacity .45s ease;}
  .xr-out{fill:rgba(91,141,255,.16);stroke:#7aa4ff;stroke-width:3;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .45s ease;}
  .xr-dim.on,.xr-out.on{opacity:1;}

  .xr-pin{
    position:absolute;transform:translate(-50%,-50%);
    width:28px;height:28px;border-radius:50%;
    border:1.5px solid var(--cobalt-light);
    background:rgba(11,13,16,.88);
    color:var(--white);font-family:var(--font-mono);font-size:12px;
    cursor:pointer;padding:0;
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .xr-pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;}   /* 46px hit area */
  .xr-pin:hover{background:rgba(47,95,222,.55);}
  .xr-pin[aria-pressed="true"]{
    background:var(--cobalt);border-color:#9fc0ff;
    transform:translate(-50%,-50%) scale(1.15);
    box-shadow:0 0 0 6px rgba(91,141,255,.22);
  }

  .xr-steps{list-style:none;padding:12vh 0 24vh;}
  .xr-step{
    min-height:56vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:0 0 0 28px;
    border-left:2px solid var(--line-strong);
    opacity:.38;
    transition:opacity .4s ease, border-color .4s ease;
  }
  .xr-step.is-active{opacity:1;border-left-color:var(--cobalt-light);}
  .xray[data-active=""] .xr-step{opacity:1;}
  .xr-n{font-family:var(--font-mono);font-size:13px;color:var(--cobalt-light);letter-spacing:.08em;}
  .xr-step h3{font-size:clamp(26px,3vw,38px);margin:10px 0 14px;}
  .xr-step p{color:var(--steel-light);font-size:16.5px;line-height:1.65;max-width:520px;}
  .xr-parts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
  .xr-parts li{
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--steel-light);
    border:1px solid var(--line-strong);border-radius:2px;padding:6px 10px;
  }
  .xr-step.is-active .xr-parts li{border-color:rgba(91,141,255,.45);}
  .xr-note{
    margin-top:12px;padding:18px 20px;
    border:1px solid var(--line-strong);border-left:3px solid var(--cobalt-light);border-radius:2px;
    background:var(--panel);color:var(--steel-light);font-size:14.5px;
  }

  /* why we show you */
  .see-inside h2{font-size:clamp(28px,3.8vw,48px);margin-top:16px;max-width:980px;}
  .see-inside .si-dim{color:var(--steel);display:block;}
  .si-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;max-width:980px;}
  .si-cols p{color:var(--steel-light);font-size:16px;line-height:1.7;}
  .see-inside + .rv-close{margin-top:72px;}

  .page-links-3{grid-template-columns:repeat(3,1fr);}

  /* ===== ELECTRICAL (panel-system.html#electrical) ===== */
  #electrical{background:linear-gradient(180deg,var(--bg-alt),var(--bg) 85%);}
  .elec-split{align-items:center;}
  .elec-split .split-copy > p:first-child{margin-top:0;}
  .no-list{list-style:none;display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);}
  .no-list li{
    display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;
    padding:18px 22px;font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.9vw,22px);line-height:1.25;color:var(--white);
  }
  .no-list li + li{border-top:1px solid var(--line);}
  .no-list .x{
    width:30px;height:30px;border-radius:50%;
    border:1px solid rgba(255,140,140,.5);
    position:relative;
  }
  .no-list .x::before,.no-list .x::after{
    content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#ff9b9b;border-radius:1px;
  }
  .no-list .x::before{transform:translate(-50%,-50%) rotate(45deg);}
  .no-list .x::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .no-list li.yes{background:rgba(47,95,222,.12);color:var(--cobalt-pale);}
  .no-list li.yes .x{border-color:var(--cobalt-light);}
  .no-list li.yes .x::before{width:6px;background:var(--cobalt-light);transform:translate(-80%,15%) rotate(45deg);}
  .no-list li.yes .x::after{width:11px;background:var(--cobalt-light);transform:translate(-25%,-50%) rotate(-50deg);}

  .outlet{
    display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center;
    margin-top:88px;
  }
  .outlet-fig{position:relative;margin:0;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--panel);}
  .outlet-fig img{width:100%;height:auto;display:block;}
  .ol-pin{
    position:absolute;transform:translate(-50%,-50%);
    width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--cobalt);border:1.5px solid #cfe0ff;color:#fff;
    font-family:var(--font-mono);font-size:12px;font-weight:500;
    box-shadow:0 2px 10px rgba(0,0,0,.45);
  }
  .outlet-copy h3{font-size:clamp(28px,3.4vw,42px);margin:14px 0 14px;}
  .outlet-copy > p{color:var(--steel-light);font-size:16px;line-height:1.65;}
  .outlet-keys{list-style:none;margin-top:24px;display:flex;flex-direction:column;border-top:1px solid var(--line);}
  .outlet-keys li{
    display:flex;align-items:center;gap:10px;
    padding:12px 0;border-bottom:1px solid var(--line);
    color:var(--white);font-size:15.5px;
  }
  .outlet-keys i{
    font-style:normal;flex-shrink:0;
    width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--cobalt);color:#fff;font-family:var(--font-mono);font-size:11.5px;
  }
  .outlet-keys i.i3{margin-left:-6px;}
  .outlet-keys i.none{background:transparent;border:1px solid rgba(255,140,140,.55);color:#ff9b9b;}
  .outlet-keys li:last-child{color:var(--steel-light);}
  .outlet-note{margin-top:14px;font-size:13px !important;color:var(--steel) !important;}
  .outlet-sign{
    margin-top:22px !important;padding-left:16px;border-left:3px solid var(--cobalt-light);
    color:var(--white) !important;font-weight:500;
  }

  @media(max-width:980px){
    .xray{grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:36px;}
    .pk-body{grid-template-columns:1fr;}
    .page-links-3{grid-template-columns:1fr 1fr;}
    .outlet{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:36px;}
  }
  @media(max-width:760px){
    /* phone: the building pins to the top half; the steps scroll up beneath it */
    .xray{grid-template-columns:1fr;gap:0;}
    .xr-stage{
      top:var(--header-h,64px);z-index:5;
      background:linear-gradient(180deg,var(--bg-alt) 88%,rgba(18,21,26,0));
      padding:10px 0 18px;
    }
    .xr-fig{height:44vh;}
    .xr-steps{padding:4vh 0 30vh;}
    .xr-step{min-height:44vh;justify-content:flex-start;padding-top:8px;}
    .xr-step h3{font-size:26px;}
    .si-cols{grid-template-columns:1fr;gap:16px;}
    .page-links-3{grid-template-columns:1fr;}
    .outlet{grid-template-columns:1fr;gap:28px;margin-top:64px;}
    .outlet-fig{max-width:380px;margin:0 auto;width:100%;}
  }
  @media(prefers-reduced-motion:reduce){
    .pk-fig.reveal .pk-layer{opacity:1;transform:none;transition:none;}
    .xr-dim,.xr-out,.xr-step,.xr-pin{transition:none;}
  }

  /* ===== BASE PLATE STEP-THROUGH (panel-system.html#base-plate) ===== */
  .bp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:stretch;}

  .bp-stage{
    border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;
    background:var(--panel);display:flex;flex-direction:column;
  }
  .bp-bar{
    display:flex;justify-content:space-between;gap:16px;
    padding:11px 16px;border-bottom:1px solid var(--line-strong);background:var(--bg-alt);
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
  }
  .bp-bar .dwg{color:var(--cobalt-light);}
  .bp-count b{color:var(--white);font-weight:500;}
  .bp-draw{
    flex:1;display:flex;align-items:center;
    padding:18px 14px 8px;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--bg);
    background-size:28px 28px,28px 28px,100% 100%;
  }
  .bp-svg{display:block;width:100%;height:auto;overflow:visible;}

  /* drawing */
  .bp-svg .c-top{fill:url(#bp-conc);}
  .bp-svg .c-front{fill:#6c737d;}
  .bp-svg .c-side{fill:#575e67;}
  .bp-svg .edge{fill:none;stroke:rgba(0,0,0,.4);stroke-width:1.2;stroke-linejoin:round;}
  .bp-svg .dust circle{fill:#d8c7a2;}
  .bp-svg .sweep{fill:rgba(159,192,255,.35);opacity:0;}
  .bp-svg .chalk{fill:none;stroke:#7aa4ff;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:0;}
  .bp-svg .chalk.bl{stroke:#cfe0ff;stroke-dasharray:1;}
  .bp-svg .dim{fill:none;stroke:#cfe0ff;stroke-width:1.6;}
  .bp-svg .dim-t{fill:#fff;font-family:var(--font-display);font-size:34px;font-weight:600;}
  .bp-svg .dim-s{fill:#aeb6c1;font-family:var(--font-mono);font-size:17px;letter-spacing:.06em;}
  .bp-svg .butyl{fill:none;stroke:#1d2024;stroke-width:12;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;}
  .bp-svg .butyl-hi{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;}
  .bp-svg .w-top{fill:#c7b37c;}
  .bp-svg .w-front{fill:#ad9a63;}
  .bp-svg .w-side{fill:#96844f;}
  .bp-svg .grain{fill:none;stroke:rgba(94,76,34,.4);stroke-width:1.3;}
  .bp-svg .hidden{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;stroke-dasharray:5 5;}
  .bp-svg .washer{fill:#d3d9df;stroke:#7b838c;stroke-width:1.2;}
  .bp-svg .washer-hole{fill:#3a3f46;}
  .bp-svg .rod{fill:#b0b8c1;stroke:#6b737c;stroke-width:1.1;}
  .bp-svg .thread{stroke:#6b737c;stroke-width:1;}
  .bp-svg .nut{fill:#9ca4ae;stroke:#5a616a;stroke-width:1.2;}
  .bp-svg .nut-face{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1;}
  .bp-svg .twist{opacity:0;}
  .bp-svg .twist path{fill:none;stroke:#7aa4ff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

  /* build-up by step */
  .bp-svg [data-from],.bp-svg [data-only]{transition:opacity .35s ease;}
  .bp.js .bp-svg [data-from]:not(.on){opacity:0;}
  .bp.js .bp-svg [data-only]:not(.on){opacity:0;}
  .bp-svg .drop,.bp-svg .drop2{transform-box:fill-box;}

  .play .now .chalk{animation:bpDraw .7s cubic-bezier(.4,0,.2,1) both;}
  .play .now .chalk:nth-of-type(2){animation-delay:.25s;}
  .play .now .chalk:nth-of-type(3){animation-delay:.45s;}
  .play .now .dim,.play .now .dim-t,.play .now .dim-s{animation:bpFade .4s ease both .75s;}
  .play .now .butyl,.play .now .butyl-hi{animation:bpDraw 1s cubic-bezier(.4,0,.2,1) both;}
  .play .now .butyl:nth-of-type(3),.play .now .butyl-hi:nth-of-type(4){animation-delay:.35s;}
  .play .now .drop{animation:bpDrop .7s cubic-bezier(.2,.8,.25,1.05) both;}
  .play .now .bolt-set .drop2{animation:bpDrop2 .5s cubic-bezier(.2,.8,.25,1.05) both;animation-delay:calc(var(--i) * .18s);}
  .play .now .twist{animation:bpTwist 1.1s ease both;animation-delay:calc(var(--i) * .18s + .55s);}
  .play .dust.on circle{animation:bpDust .55s ease forwards;animation-delay:calc(var(--d) + .45s);}
  .play .sweep.on{animation:bpSweep 1.3s cubic-bezier(.4,0,.2,1) both .35s;}
  @keyframes bpDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
  @keyframes bpFade{from{opacity:0;}to{opacity:1;}}
  @keyframes bpDrop{from{opacity:0;transform:translateY(-80px);}to{opacity:1;transform:none;}}
  @keyframes bpDrop2{from{opacity:0;transform:translateY(-46px);}to{opacity:1;transform:none;}}
  @keyframes bpTwist{0%,100%{opacity:0;}30%,70%{opacity:1;}}
  @keyframes bpDust{to{opacity:0;transform:translate(26px,-8px);}}
  @keyframes bpSweep{0%{opacity:0;transform:translateX(-10px);}15%{opacity:1;}85%{opacity:1;}100%{opacity:0;transform:translateX(370px);}}

  /* component finder */
  .bp-stage[data-hl] .bp-svg [data-part]{opacity:.16;transition:opacity .25s ease, filter .25s ease;}
  .bp-stage[data-hl="bolt"] .bp-svg [data-part="bolt"],
  .bp-stage[data-hl="washer"] .bp-svg [data-part="washer"],
  .bp-stage[data-hl="plate"] .bp-svg [data-part="plate"],
  .bp-stage[data-hl="butyl"] .bp-svg [data-part="butyl"],
  .bp-stage[data-hl="footing"] .bp-svg [data-part="footing"]{opacity:1;filter:drop-shadow(0 0 7px rgba(91,141,255,.95));}
  .bp-stage[data-hl] .bp-svg .dust,.bp-stage[data-hl] .bp-svg .sweep{opacity:0;}

  .bp-parts{padding:14px 16px 16px;border-top:1px solid var(--line-strong);background:var(--bg-alt);}
  .bp-parts-label{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-light);margin-bottom:10px;}
  .bp-parts-label small{font-size:11px;color:var(--steel);text-transform:none;letter-spacing:.02em;}
  .bp-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .bp-chip{
    font:inherit;font-size:13.5px;color:var(--steel-light);
    background:var(--panel);border:1px solid var(--line-strong);border-radius:2px;
    padding:9px 13px;min-height:40px;cursor:pointer;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
  }
  .bp-chip:hover{border-color:rgba(91,141,255,.55);color:var(--white);}
  .bp-chip[aria-pressed="true"]{border-color:var(--cobalt-light);background:rgba(47,95,222,.2);color:var(--white);}

  /* step panel */
  .bp-panel{
    border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);
    display:flex;flex-direction:column;min-width:0;
  }
  .bp-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line-strong);}
  .bp-tabs [role="tab"]{
    font:inherit;background:none;border:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    padding:14px 12px 12px;min-height:58px;text-align:left;
    color:var(--steel);border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color .2s ease,border-color .2s ease,background .2s ease;
  }
  .bp-tabs [role="tab"] + [role="tab"]{border-left:1px solid var(--line);}
  .bp-tabs .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;}
  .bp-tabs .t{font-size:12.5px;line-height:1.25;}
  .bp-tabs [role="tab"]:hover{color:var(--white);background:rgba(255,255,255,.02);}
  .bp-tabs [role="tab"].done .n{color:var(--cobalt-light);}
  .bp-tabs [role="tab"][aria-selected="true"]{color:var(--white);border-bottom-color:var(--cobalt-light);background:rgba(47,95,222,.12);}
  .bp-tabs [role="tab"][aria-selected="true"] .n{color:var(--cobalt-pale);}

  .bp-steps{flex:1;padding:30px 28px 10px;}
  .bp.js .bp-step:not(.is-on){display:none;}
  .bp:not(.js) .bp-step + .bp-step{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}
  .bp:not(.js) .bp-tabs,.bp:not(.js) .bp-controls,.bp:not(.js) .bp-count{display:none;}
  .bp-step.is-on{animation:bpFadeUp .35s ease both;}
  @keyframes bpFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .bp-n{font-family:var(--font-mono);font-size:13px;color:var(--cobalt-light);letter-spacing:.08em;}
  .bp-step h3{font-size:clamp(26px,2.8vw,36px);margin:8px 0 12px;}
  .bp-step > p{color:var(--steel-light);font-size:17px;line-height:1.6;}
  .bp-note{
    margin-top:20px;padding:14px 16px;
    border:1px solid rgba(91,141,255,.3);border-left:3px solid var(--cobalt-light);border-radius:2px;
    background:rgba(47,95,222,.08);
  }
  .bp-note b{display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-pale);margin-bottom:6px;}
  .bp-note p,.bp-note li{color:var(--steel-light);font-size:14.5px;line-height:1.55;}
  .bp-note ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
  .bp-note li{padding-left:16px;position:relative;}
  .bp-note li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cobalt-light);}

  .bp-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 28px 24px;}
  .bp-controls .btn{padding:12px 18px;}
  .bp-controls .btn:disabled{opacity:.35;cursor:default;border-color:var(--line-strong);color:var(--steel);}
  .bp-progress{display:flex;gap:6px;flex:1;max-width:160px;}
  .bp-progress i{flex:1;height:3px;border-radius:2px;background:var(--line-strong);transition:background .3s ease;}
  .bp-progress i.on{background:var(--cobalt-light);}

  @media(max-width:980px){
    .bp{grid-template-columns:1fr;}
  }
  @media(max-width:560px){
    .bp-tabs .t{display:none;}
    .bp-tabs [role="tab"]{align-items:center;padding:14px 4px 12px;}
    .bp-tabs .n{font-size:13px;}
    .bp-steps{padding:24px 18px 6px;}
    .bp-controls{padding:16px 18px 20px;}
    .bp-progress{display:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .play .now .chalk,.play .now .dim,.play .now .dim-t,.play .now .dim-s,.play .now .butyl,.play .now .butyl-hi,
    .play .now .drop,.play .now .bolt-set .drop2,.play .now .twist,.play .sweep.on,.bp-step.is-on{animation:none;}
    .play .dust.on circle{animation:none;opacity:0;}
  }

  /* ===== EXPANDING CARD GRID (applications) ===== */
  button.app-card{
    font:inherit;color:inherit;text-align:left;cursor:pointer;
    display:flex;flex-direction:column;align-items:flex-start;
    width:100%;
  }
  .app-card .ac-title{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.2;margin-bottom:10px;color:var(--white);}
  .app-card .ac-text{display:block;color:var(--steel-light);font-size:14px;line-height:1.55;flex:1;}
  .xp-more{
    margin-top:18px;display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt-light);
  }
  .xp-more i{position:relative;width:18px;height:18px;border:1px solid rgba(91,141,255,.55);border-radius:50%;}
  .xp-more i::before,.xp-more i::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:var(--cobalt-light);transform:translate(-50%,-50%);transition:transform .25s ease;}
  .xp-more i::after{transform:translate(-50%,-50%) rotate(90deg);}
  .xp-more .xp-more-close{display:none;}
  .xp-card[aria-expanded="true"]{border-color:var(--cobalt-light);background:linear-gradient(170deg,rgba(47,95,222,.16),var(--panel) 70%);transform:none;}
  .xp-card[aria-expanded="true"] .xp-more-open{display:none;}
  .xp-card[aria-expanded="true"] .xp-more-close{display:inline;}
  .xp-card[aria-expanded="true"] .xp-more i::after{transform:translate(-50%,-50%) rotate(0deg);}

  .xp-panel{
    grid-column:1 / -1;
    border:1px solid var(--cobalt-light);border-radius:3px;
    background:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px),
      var(--bg);
    background-size:28px 28px,28px 28px,100% 100%;
    position:relative;
    animation:xpOpen .35s cubic-bezier(.2,.8,.2,1) both;
  }
  .xp-panel[hidden]{display:none;}
  @keyframes xpOpen{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
  .xp-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 30px 32px;}
  .xp-types{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:14px;}
  .xp-types li{padding-left:16px;border-left:2px solid rgba(91,141,255,.45);}
  .xp-types b{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--white);margin-bottom:3px;}
  .xp-types span{color:var(--steel-light);font-size:14.5px;line-height:1.55;}
  .xp-link{display:inline-block;margin-top:20px;white-space:normal;}
  /* grid items may shrink below their content width, so one long line can't widen the column */
  .xp-grid > *{min-width:0;}
  .xp-projects{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
  .xp-proj{
    display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;
    border:1px solid var(--line-strong);border-radius:2px;background:var(--panel);overflow:hidden;
    padding-right:16px;transition:border-color .2s ease,transform .2s ease;
  }
  .xp-proj:hover{border-color:var(--cobalt-light);transform:translateX(3px);}
  .xp-proj img{width:92px;height:64px;object-fit:cover;filter:saturate(.8) brightness(.9);}
  .xp-proj b{display:block;font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--white);}
  .xp-proj small{font-family:var(--font-mono);font-size:11.5px;color:var(--steel);letter-spacing:.03em;}
  .xp-proj i{font-style:normal;color:var(--cobalt-light);}
  .xp-cta{margin-top:18px;white-space:normal;}

  /* ===== PROCESS ACCORDION ===== */
  .xp-acc .process-step{display:block;padding:0;}
  .ps-h{margin:0;font-size:inherit;text-transform:none;line-height:1.3;}
  .ps-toggle{
    font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;width:100%;
    display:grid;grid-template-columns:120px 1fr 40px;gap:32px;align-items:center;
    padding:30px 0;
  }
  .ps-toggle .p-num{font-family:var(--font-mono);font-size:14px;color:var(--steel);transition:color .25s ease;}
  .ps-title{display:block;font-family:var(--font-display);font-weight:600;font-size:22px;text-transform:none;color:var(--white);margin-bottom:6px;}
  .ps-sum{display:block;font-family:var(--font-body);font-weight:400;text-transform:none;letter-spacing:0;color:var(--steel-light);font-size:15px;line-height:1.6;max-width:640px;}
  .ps-icon{
    justify-self:end;position:relative;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line-strong);transition:border-color .25s ease,background .25s ease,transform .3s ease;
  }
  .ps-icon::before,.ps-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:var(--steel-light);transform:translate(-50%,-50%);}
  .ps-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease;}
  .ps-toggle:hover .ps-icon{border-color:var(--cobalt-light);}
  .is-open .ps-toggle .p-num{color:var(--cobalt-light);}
  .is-open .ps-icon{border-color:var(--cobalt-light);background:rgba(47,95,222,.18);}
  .is-open .ps-icon::after{transform:translate(-50%,-50%) rotate(0deg);}

  .ps-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1);}
  .is-open .ps-body{grid-template-rows:1fr;}
  .ps-clip{overflow:hidden;min-height:0;}
  .ps-inner{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;
    margin-left:152px;padding:0 0 34px;
    opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .35s ease;
  }
  .is-open .ps-inner{opacity:1;transform:none;transition-delay:.08s;}
  .ps-inner img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line-strong);border-radius:3px;}
  .ps-detail p{color:var(--white);font-size:16px;line-height:1.65;}
  .ps-facts{list-style:none;margin:14px 0 4px;display:flex;flex-direction:column;gap:8px;}
  .ps-facts li{color:var(--steel-light);font-size:14.5px;padding-left:18px;position:relative;}
  .ps-facts li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cobalt-light);}
  .ps-detail .inline-link{display:inline-block;margin-top:14px;white-space:normal;}

  /* ===== BEYOND THE ENVELOPE: ask about it ===== */
  a.net-card{display:flex;flex-direction:column;color:inherit;position:relative;}
  a.net-card p{flex:1;}
  .net-ask{
    margin-top:16px;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);
    transition:color .2s ease;
  }
  .net-ask i{font-style:normal;transition:transform .2s ease;}
  a.net-card:hover,a.net-card:focus-visible{background:var(--panel);box-shadow:inset 0 0 0 1px var(--cobalt-light);}
  a.net-card:hover .net-ask,a.net-card:focus-visible .net-ask{color:var(--cobalt-light);}
  a.net-card:hover .net-ask i{transform:translateX(4px);}

  /* ===== quote form topic ===== */
  .form-interest{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 12px 10px 14px;border:1px solid rgba(91,141,255,.45);border-radius:2px;background:rgba(47,95,222,.12);
    font-size:14px;color:var(--steel-light);
  }
  .form-interest[hidden]{display:none;}
  .form-interest b{color:var(--white);font-weight:600;}
  .form-interest button{
    font:inherit;font-size:20px;line-height:1;color:var(--steel-light);background:none;border:0;cursor:pointer;
    width:32px;height:32px;border-radius:50%;
  }
  .form-interest button:hover{color:var(--white);background:rgba(255,255,255,.06);}
  .form-flash{animation:formFlash 1.2s ease;}
  @keyframes formFlash{0%{box-shadow:0 0 0 0 rgba(91,141,255,.0);}25%{box-shadow:0 0 0 6px rgba(91,141,255,.35);}100%{box-shadow:0 0 0 0 rgba(91,141,255,0);}}

  @media(max-width:900px){
    .xp-inner{grid-template-columns:1fr;gap:28px;padding:24px 20px 26px;}
    .ps-toggle{grid-template-columns:48px 1fr 36px;gap:14px;padding:24px 0;}
    .ps-inner{margin-left:0;grid-template-columns:1fr;gap:18px;}
  }
  @media(max-width:560px){
    .ps-title{font-size:20px;}
    .ps-sum{font-size:14.5px;}
    .xp-proj{grid-template-columns:76px 1fr auto;}
    .xp-proj img{width:76px;height:58px;}
  }
  @media(prefers-reduced-motion:reduce){
    .xp-panel{animation:none;}
    .ps-body,.ps-inner,.ps-icon::after{transition:none;}
  }

  /* =====================================================================
     ROUND 2 INTERACTIONS
     ===================================================================== */

  /* ---- shared controls: segmented buttons, filter chips, labels ---- */
  .ctl-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
  .seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--bg);}
  .seg button{
    font:inherit;font-size:13.5px;color:var(--steel-light);background:none;border:0;cursor:pointer;
    padding:10px 14px;min-height:42px;transition:background .2s ease,color .2s ease;
  }
  .seg button + button{border-left:1px solid var(--line-strong);}
  .seg button:hover{color:var(--white);background:rgba(255,255,255,.03);}
  .seg button[aria-checked="true"]{background:var(--cobalt);color:#fff;}
  .ctl-check{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--steel-light);cursor:pointer;min-height:42px;}
  .ctl-check input{width:18px;height:18px;accent-color:var(--cobalt);cursor:pointer;padding:0;border:0;background:transparent;}

  .filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
  .filters button{
    font:inherit;font-size:13.5px;color:var(--steel-light);cursor:pointer;
    background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;
    padding:8px 14px;min-height:40px;display:inline-flex;align-items:center;gap:8px;
    transition:border-color .2s ease,background .2s ease,color .2s ease;
  }
  .filters button span{font-family:var(--font-mono);font-size:11.5px;color:var(--steel);}
  .filters button:hover{border-color:rgba(91,141,255,.55);color:var(--white);}
  .filters button[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}
  .filters button[aria-pressed="true"] span{color:rgba(255,255,255,.8);}
  .is-filtered-out{display:none !important;}

  /* ---- #3 stats bar links ---- */
  a.stat-link{display:block;color:inherit;position:relative;transition:background .25s ease;}
  a.stat-link:hover{background:rgba(47,95,222,.07);}
  .stat-go{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);transition:color .2s ease,transform .2s ease;}
  a.stat-link:hover .stat-go{color:var(--cobalt-light);transform:translateX(3px);}

  /* ---- #1 exploded drawing highlights ---- */
  .ps-list .ex-hl{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%;}
  .ps-list .ex-hl b{display:block;color:var(--white);font-weight:600;margin-bottom:3px;transition:color .2s ease;}
  .ps-list .ex-p{display:block;color:var(--steel-light);font-size:14.5px;line-height:1.55;}
  .ps-list li{border-radius:3px;margin:-8px -10px;padding:8px 10px;transition:background .2s ease;}
  .ps-list li:has(.ex-hl:hover),.ps-list li:has(.ex-hl[aria-pressed="true"]){background:rgba(47,95,222,.1);}
  .ps-list .ex-hl[aria-pressed="true"] b,.ps-list .ex-hl:hover b{color:var(--cobalt-pale);}
  button.ps-spec{font:inherit;color:inherit;background:var(--bg);border:0;padding:24px 22px;text-align:left;cursor:pointer;display:block;width:100%;transition:background .2s ease;}
  button.ps-spec .k,button.ps-spec .v{display:block;}
  button.ps-spec:hover{background:var(--panel);}
  button.ps-spec[aria-pressed="true"]{background:rgba(47,95,222,.14);box-shadow:inset 0 -2px 0 var(--cobalt-light);}
  .ex-wrap{position:relative;}
  .ex-overlay{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);pointer-events:none;z-index:2;}
  .ex-overlay [data-zone]{fill:rgba(47,95,222,.30);stroke:#2f5fde;stroke-width:5;stroke-linejoin:round;opacity:0;transition:opacity .3s ease;}
  .ex-wrap[data-hl] .ex-overlay [data-zone].on{opacity:1;}
  .ex-wrap::after{content:"";position:absolute;inset:0;background:rgba(11,13,16,.0);pointer-events:none;transition:background .3s ease;z-index:1;}
  .ex-wrap[data-hl]::after{background:rgba(11,13,16,.28);}
  .ex-tip{color:var(--cobalt-light);}

  /* ---- #4 why-builders links ---- */
  a.why-link{display:flex;flex-direction:column;color:inherit;transition:background .25s ease,box-shadow .25s ease,transform .25s ease;}
  a.why-link p{flex:1;}
  .why-go{margin-top:16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);transition:color .2s ease;}
  a.why-link:hover{box-shadow:inset 0 0 0 1px var(--cobalt-light);transform:translateY(-2px);}
  a.why-link:hover .why-go{color:var(--cobalt-light);}

  /* ---- #5 comparison controls ---- */
  .cmp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:16px;}
  .cmp-table[data-show="osb"] tr > :nth-child(4),
  .cmp-table[data-show="stick"] tr > :nth-child(3){display:none;}
  .cmp-table tbody tr{transition:opacity .25s ease;}
  .cmp-note{margin-top:10px;font-size:13.5px;color:var(--steel);}
  .cmp-note[hidden]{display:none;}

  /* ---- #6 thickness picker ---- */
  .tp{border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);padding:20px;margin-bottom:16px;}
  .tp-controls{display:flex;flex-wrap:wrap;gap:14px 22px;}
  .tp-group{display:flex;flex-direction:column;gap:8px;}
  .tp-result{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .tp-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;}
  .tp-rv{font-family:var(--font-display);font-size:clamp(40px,5vw,56px);font-weight:600;line-height:1;color:var(--cobalt-light);}
  .tp-sub{font-family:var(--font-mono);font-size:12.5px;color:var(--steel);}
  .tp-bar{height:6px;border-radius:3px;background:var(--line-strong);margin:16px 0 14px;overflow:hidden;}
  .tp-bar i{display:block;height:100%;background:linear-gradient(90deg,#2f5fde,#9fc0ff);border-radius:3px;transition:width .45s cubic-bezier(.2,.8,.2,1);}
  .tp-uses{font-size:14.5px;color:var(--steel-light);}
  .tp-uses b{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-pale);margin-right:6px;}
  .tp-table tbody tr{cursor:pointer;transition:background .2s ease;}
  .tp-table tbody tr:hover{background:rgba(255,255,255,.03);}
  .tp-table tbody tr.is-sel{background:rgba(47,95,222,.14);}
  .tp-table tbody tr.is-sel th{color:var(--white);box-shadow:inset 3px 0 0 var(--cobalt-light);}

  /* ---- #7 stat card links ---- */
  a.stat-card-link{display:flex;flex-direction:column;color:inherit;transition:border-color .25s ease,transform .25s ease;}
  a.stat-card-link .sc-body{flex:1;}
  .sc-go{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .2s ease;}
  a.stat-card-link:hover{transform:translateY(-3px);}
  a.stat-card-link:hover .sc-go{color:#fff;}

  /* ---- #8 fire photo halves + test badges ---- */
  .halves{position:relative;}
  .halves img{display:block;width:100%;height:auto;}
  .half{position:absolute;top:0;bottom:0;border:0;padding:0;background:transparent;cursor:pointer;}
  .half-l{left:0;width:51%;}
  .half-r{right:0;width:49%;}
  .half::before{content:"";position:absolute;inset:0;background:rgba(8,10,14,.72);opacity:0;transition:opacity .35s ease;}
  .halves[data-focus="stick"] .half-r::before,.halves[data-focus="sip"] .half-l::before{opacity:1;}
  .half-tag{
    position:absolute;bottom:14px;padding:7px 11px;border-radius:2px;
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
    background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.22);transition:background .25s ease,border-color .25s ease;
  }
  .half-l .half-tag{left:14px;}
  .half-r .half-tag{right:14px;}
  .half-l[aria-pressed="true"] .half-tag{background:#c2571b;border-color:#ff9a5c;}
  .half-r[aria-pressed="true"] .half-tag{background:var(--cobalt);border-color:var(--cobalt-pale);}
  .half:hover .half-tag{border-color:rgba(255,255,255,.55);}
  button.test-badge{font:inherit;background:transparent;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;}
  button.test-badge:hover{border-color:var(--cobalt-light);}
  button.test-badge[aria-expanded="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}
  .badge-info{margin-top:14px;padding:14px 16px;border:1px solid rgba(91,141,255,.35);border-left:3px solid var(--cobalt-light);border-radius:2px;background:rgba(47,95,222,.08);}
  .badge-info[hidden],.badge-info p[hidden]{display:none;}
  .badge-info p{color:var(--steel-light);font-size:14.5px;line-height:1.6;}
  .badge-info b{color:var(--white);}

  /* ---- #9 project filter: fade cards in ---- */
  .projects-grid .project-card.just-shown{animation:xpOpen .35s ease both;}

  /* ---- #10 reel pop-up ---- */
  .reel-dialog{
    border:1px solid var(--line-strong);border-radius:4px;padding:0;background:var(--bg-alt);color:var(--white);
    width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);
  }
  .reel-dialog::backdrop{background:rgba(5,6,9,.82);}
  .reel-dialog .rd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line-strong);}
  .reel-dialog .rd-bar a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt-light);}
  .reel-dialog .rd-close{font:inherit;font-size:22px;line-height:1;color:var(--steel-light);background:none;border:0;cursor:pointer;width:40px;height:40px;border-radius:50%;}
  .reel-dialog .rd-close:hover{background:rgba(255,255,255,.07);color:#fff;}
  .reel-dialog .rd-frame{background:#fff;height:min(720px,calc(100vh - 110px));}
  .reel-dialog iframe{display:block;width:100%;height:100%;border:0;}

  /* ---- #11 on-site clip ---- */
  .clip{position:relative;background:#000;}
  .clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
  .clip-btn{
    position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
    background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.35);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;
  }
  .clip-btn:hover{background:var(--cobalt);border-color:var(--cobalt-pale);}
  .clip-btn span{display:block;width:14px;height:16px;position:relative;}
  .clip-btn[data-state="paused"] span{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:4px;}
  .clip-btn[data-state="playing"] span::before,.clip-btn[data-state="playing"] span::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:#fff;border-radius:1px;}
  .clip-btn[data-state="playing"] span::before{left:2px;}
  .clip-btn[data-state="playing"] span::after{right:2px;}

  /* ---- #16 on-this-page menu ---- */
  .page-menu{
    display:block;padding:0;max-width:none;margin:0;
    position:sticky;top:var(--header-h,72px);z-index:50;
    background:rgba(11,13,16,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .page-menu .container{min-width:0;}
  .page-menu ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 0;margin:0 -8px;}
  .page-menu ul::-webkit-scrollbar{display:none;}
  .page-menu a{
    display:block;white-space:nowrap;padding:9px 12px;border-radius:2px;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);
    transition:color .2s ease,background .2s ease;
  }
  .page-menu a:hover{color:var(--white);background:rgba(255,255,255,.04);}
  .page-menu a[aria-current="true"]{color:#fff;background:rgba(47,95,222,.22);box-shadow:inset 0 -2px 0 var(--cobalt-light);}

  /* ---- #13 five-layer panel ---- */
  .fl-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:26px;}
  .fl-list button{
    font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
    display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
    padding:14px 16px;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);
    transition:border-color .2s ease,background .2s ease;
  }
  .fl-list button:hover{border-color:rgba(91,141,255,.55);}
  .fl-list button[aria-pressed="true"]{border-color:var(--cobalt-light);background:rgba(47,95,222,.14);}
  .fl-list b{display:block;color:var(--white);font-weight:600;margin-bottom:2px;}
  .fl-list span{color:var(--steel-light);font-size:14.5px;line-height:1.5;}
  .sw{width:34px;height:22px;border-radius:2px;margin-top:2px;border:1px solid rgba(0,0,0,.35);}
  .sw-skin{background:linear-gradient(180deg,#f5f7f9,#c3c9d0);}
  .sw-glue{background:linear-gradient(180deg,#e0b877,#b3874a);}
  .sw-core{background:radial-gradient(circle at 30% 35%,#fff 0 2.5px,transparent 3px) 0 0/8px 8px,#d6dbe1;}
  .fl-fig{border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--panel);margin:0;}
  .fl-bar{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px solid var(--line-strong);background:var(--bg-alt);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
  .fl-bar .dwg{color:var(--cobalt-light);}
  .fl-draw{padding:14px 18px 4px;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),var(--bg);background-size:28px 28px,28px 28px,100% 100%;}
  .fl-svg{display:block;width:100%;height:auto;overflow:visible;}
  .fl-svg .fl-edge{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1;}
  .fl-layer{cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,filter .3s ease;}
  .fl-fig[data-sel] .fl-layer{opacity:.28;}
  .fl-fig[data-sel="skin"] .fl-layer[data-layer="skin"],
  .fl-fig[data-sel="glue"] .fl-layer[data-layer="glue"],
  .fl-fig[data-sel="core"] .fl-layer[data-layer="core"]{opacity:1;transform:translateX(-26px);filter:drop-shadow(0 0 10px rgba(91,141,255,.75));}
  .fl-tip{padding:10px 16px;border-top:1px solid var(--line-strong);background:var(--bg-alt);font-size:13px;color:var(--steel);}

  /* ---- #15 chase steps + spots ---- */
  .step-btn{font:inherit;color:inherit;background:none;border:0;border-left:2px solid transparent;text-align:left;cursor:pointer;width:100%;padding-left:12px;margin-left:-14px;transition:border-color .2s ease,background .2s ease;}
  .step-btn .step-txt{display:block;}
  .step-btn .step-h{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--white);margin-bottom:4px;}
  .step-btn .step-p{display:block;color:var(--steel-light);font-size:14.5px;line-height:1.55;}
  .step-btn:hover{background:rgba(255,255,255,.02);}
  .step-btn[aria-pressed="true"]{border-left-color:var(--cobalt-light);background:rgba(47,95,222,.08);}
  .step-btn[aria-pressed="true"] .n{color:var(--cobalt-pale);border-color:var(--cobalt-light);}
  .pin-wrap{position:relative;}
  .spot{position:absolute;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2;}
  .spot::before{content:"";position:absolute;inset:0;border:3px solid #2f5fde;border-radius:50%;background:rgba(47,95,222,.16);}
  .spot::after{content:"";position:absolute;inset:-10px;border:2px solid rgba(47,95,222,.5);border-radius:50%;animation:spotPulse 1.6s ease-out infinite;}
  .spot.on{opacity:1;}
  /* image area inside the 12px sheet padding: 552 x 600 source */
  .spot-1{left:calc(12px + (100% - 24px) * .712);top:calc(12px + (100% - 24px) * .108);width:15%;aspect-ratio:1;}
  .spot-2{left:calc(12px + (100% - 24px) * .66);top:calc(12px + (100% - 24px) * .853);width:68%;aspect-ratio:9;}
  .spot-2::before,.spot-2::after{border-radius:8px;}
  .spot-3{left:calc(12px + (100% - 24px) * .712);top:calc(12px + (100% - 24px) * .38);width:15%;aspect-ratio:1;}
  @keyframes spotPulse{from{opacity:1;transform:scale(.9);}to{opacity:0;transform:scale(1.25);}}

  /* ---- #17 floor-system layers ---- */
  .pk-legend li{display:block;}
  .pk-legend button{
    font:inherit;color:inherit;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;text-align:left;width:calc(100% + 16px);
    display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;padding:6px 8px;margin:-6px -8px;
    transition:background .2s ease,border-color .2s ease;
  }
  .pk-legend button:hover{background:rgba(255,255,255,.03);}
  .pk-legend button[aria-pressed="true"]{border-color:var(--cobalt-light);background:rgba(47,95,222,.14);}
  .pk-legend button[aria-pressed="true"] .n{background:var(--cobalt);}
  .pk-lt b{display:block;font-family:var(--font-display);font-weight:600;font-size:16.5px;line-height:1.25;color:var(--white);}
  .pk-lt span{font-size:13px;color:var(--steel);}
  .pk-rebuild{font:inherit;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-light);background:none;border:1px solid var(--line-strong);border-radius:2px;padding:5px 10px;cursor:pointer;}
  .pk-rebuild:hover{color:#fff;border-color:var(--cobalt-light);}
  .pk-fig.reveal.in[data-lift] .pk-layer{opacity:.3;transition-delay:0s;}
  .pk-fig.reveal.in[data-lift] .pk-layer.lifted{opacity:1;transform:translateX(-18px);filter:drop-shadow(0 0 8px rgba(91,141,255,.8));transition-delay:0s;}

  /* ---- #18 finished / structure ---- */
  .xr-view{display:inline-flex;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;margin:0 0 22px;}
  .xr-view button{font:inherit;font-size:13.5px;color:var(--steel-light);background:var(--panel);border:0;padding:10px 16px;min-height:42px;cursor:pointer;}
  .xr-view button + button{border-left:1px solid var(--line-strong);}
  .xr-view button[aria-pressed="true"]{background:var(--cobalt);color:#fff;}
  .xr-dim-all{fill:rgba(9,11,15,.72);opacity:0;transition:opacity .45s ease;}
  .xr-out-all{fill:rgba(91,141,255,.1);stroke:rgba(122,164,255,.75);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .45s ease;}
  .xray[data-view="structure"] .xr-dim-all,.xray[data-view="structure"] .xr-out-all{opacity:1;}
  .xray[data-view="structure"] .xr-dim.on{opacity:.35;}

  /* ---- #19 rating bars ---- */
  .rate{display:inline-flex;align-items:center;gap:4px;}
  .rate i{width:18px;height:8px;border-radius:2px;background:var(--line-strong);}
  .rate em{font-style:normal;margin-left:8px;font-size:14px;}
  .rate.r3 i{background:#5fd39a;}
  .rate.r3 em{color:#5fd39a;}
  .rate.r2 i:nth-child(-n+2){background:#e8b567;}
  .rate.r2 em{color:#e8b567;}
  .rate.r1 i:first-child{background:#ff8c8c;}
  .rate.r1 em{color:#ff8c8c;}
  .side-table tbody tr{transition:background .2s ease;}
  .side-table tbody tr:hover{background:rgba(255,255,255,.025);}

  /* ---- #20 calculator ---- */
  .calc{border:1px solid var(--cobalt-light);border-radius:3px;background:linear-gradient(170deg,rgba(47,95,222,.14),var(--panel) 60%);padding:24px 24px 20px;display:flex;flex-direction:column;gap:18px;}
  .calc-head h3{font-size:clamp(22px,2.4vw,28px);text-transform:none;}
  .calc-head p{margin-top:6px;font-size:13.5px;color:var(--steel);}
  .calc-row{display:flex;flex-direction:column;gap:10px;cursor:pointer;}
  .calc-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;color:var(--steel-light);}
  .calc-lbl output{font-family:var(--font-mono);font-size:14px;color:var(--white);}
  .calc input[type="range"]{width:100%;accent-color:var(--cobalt-light);height:28px;cursor:pointer;background:transparent;border:0;padding:0;border-radius:0;}
  .calc-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:4px;}
  .calc-out > div{background:var(--bg);padding:14px 16px;}
  .calc-out dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
  .calc-out dd{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin-top:4px;color:var(--white);font-variant-numeric:tabular-nums;}
  .calc-out .total{grid-column:1 / -1;background:rgba(47,95,222,.16);}
  .calc-out .total dd{color:var(--cobalt-pale);font-size:clamp(32px,3.6vw,44px);}

  /* ---- #21 frost wall race ---- */
  .race{margin-top:40px;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);padding:24px 24px 20px;}
  .race-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
  .race-head h3{font-size:clamp(20px,2.2vw,26px);text-transform:none;}
  .race-replay{padding:10px 14px;}
  .race-day{margin:18px 0 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
  .race-day b{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--white);letter-spacing:0;margin-left:6px;font-variant-numeric:tabular-nums;}
  .race-row{display:grid;grid-template-columns:220px 1fr 170px;gap:16px;align-items:center;padding:10px 0;}
  .race-name{font-size:14.5px;color:var(--steel-light);}
  .race-row.own .race-name{color:var(--white);font-weight:600;}
  .race-track{height:16px;border-radius:3px;background:var(--bg);border:1px solid var(--line);overflow:hidden;}
  .race-track i{display:block;height:100%;width:0;background:#8b929c;border-radius:2px;}
  .race-row.own .race-track i{background:linear-gradient(90deg,#2f5fde,#7aa4ff);}
  .race-end{font-family:var(--font-mono);font-size:12px;color:var(--steel);opacity:.35;transition:opacity .3s ease,color .3s ease;}
  .race-end.done{opacity:1;color:var(--white);}
  .race-row.own .race-end.done{color:#5fd39a;}
  .race-axis{display:flex;justify-content:space-between;margin:4px 170px 0 236px;font-family:var(--font-mono);font-size:11px;color:var(--steel);}

  /* ---- #22 grow ---- */
  .grow-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px;}

  /* ---- #23 project pager ---- */
  .proj-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0;max-width:none;margin:0 0 64px;}
  .pp{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel);transition:border-color .2s ease,transform .2s ease;}
  .pp:hover{border-color:var(--cobalt-light);}
  .pp-prev:hover{transform:translateX(-3px);}
  .pp-next{text-align:right;}
  .pp-next:hover{transform:translateX(3px);}
  .pp-dir{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt-light);}
  .pp-title{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,22px);color:var(--white);}

  /* ---- #24 back to top ---- */
  .to-top{
    position:fixed;right:18px;bottom:18px;z-index:80;width:48px;height:48px;border-radius:50%;
    background:var(--cobalt);border:1px solid var(--cobalt-pale);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.45);
    opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .2s ease;
  }
  .to-top.show{opacity:1;transform:none;pointer-events:auto;}
  .to-top:hover{background:var(--cobalt-dark);}
  .to-top svg{width:18px;height:18px;}

  @media(max-width:900px){
    .race-row{grid-template-columns:1fr;gap:6px;}
    .race-axis{margin:4px 0 0;}
    .race-end{opacity:.5;}
    .proj-pager{grid-template-columns:1fr;}
    .pp-next{text-align:left;}
  }
  @media(max-width:560px){
    .rate i{width:11px;height:6px;}
    .rate em{margin-left:6px;font-size:13px;}
    .calc-out{grid-template-columns:1fr;}
    .tp{padding:16px;}
    .seg button{padding:10px 12px;}
  }
  @media(prefers-reduced-motion:reduce){
    .fl-layer,.tp-bar i,.spot,.half::before{transition:none;}
    .spot::after{animation:none;}
  }

  /* card grids placed inside a text column get two columns, not four */
  .split-copy .net-grid{grid-template-columns:1fr 1fr;}
  @media(max-width:520px){.split-copy .net-grid{grid-template-columns:1fr;}}

  /* ===== QUOTE FORM v2 ===== */
  .quote-form{position:relative;}
  /* the global form{display:flex} rule would otherwise beat [hidden] */
  .quote-form[hidden]{display:none;}
  button.btn-outline{background:transparent;}
  a[href^="tel:"]{white-space:nowrap;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field-row .field{min-width:0;}
  .quote-form label .opt{font-size:11.5px;color:var(--steel);margin-left:4px;letter-spacing:0;}
  .quote-form input::placeholder,.quote-form textarea::placeholder{color:rgba(139,147,160,.65);}
  .quote-form select{
    appearance:none;-webkit-appearance:none;
    font-family:var(--font-body);font-size:14.5px;
    padding-right:38px;cursor:pointer;
    background-color:var(--bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b93a0' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
    color:var(--white);
  }
  .quote-form select:invalid,.quote-form select option[value=""]{color:var(--steel);}
  .quote-form select option{background:var(--bg-alt);color:var(--white);}
  .quote-form [aria-invalid="true"]{border-color:#ff8c8c;}
  .quote-form [aria-invalid="true"]:focus{border-color:#ffb4b4;}
  .field-err{font-size:13px;color:#ffb4b4;line-height:1.4;margin-top:-2px;}
  .field-err[hidden]{display:none;}
  .form-actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:6px;}
  .form-privacy{font-size:12.5px;color:var(--steel);line-height:1.5;}
  .form-privacy a{color:var(--steel-light);text-decoration:underline;text-underline-offset:2px;}
  .form-privacy a:hover{color:var(--cobalt-light);}
  #quoteSubmit[disabled]{opacity:.75;cursor:progress;}
  #quoteSubmit .spin{
    width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
    animation:qspin .7s linear infinite;
  }
  @keyframes qspin{to{transform:rotate(360deg);}}
  .form-status a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

  /* honeypot: off-screen rather than display:none, which some bots skip */
  .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

  .quote-done{
    border:1px solid rgba(91,141,255,.35);
    border-radius:3px;
    background:linear-gradient(160deg,rgba(47,95,222,.12),var(--panel) 70%);
    padding:36px 32px;
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    align-self:start;
  }
  .quote-done[hidden]{display:none;}
  .quote-done:focus{outline:none;}
  .qd-icon{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--cobalt-light);
    display:flex;align-items:center;justify-content:center;margin-bottom:6px;
  }
  .qd-icon svg{width:22px;height:22px;fill:none;stroke:var(--cobalt-light);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .quote-done h3{font-size:clamp(22px,2.6vw,28px);text-transform:none;}
  .quote-done p{color:var(--steel-light);font-size:15.5px;line-height:1.6;}
  .quote-done p b{color:var(--white);font-weight:600;}
  .quote-done .qd-sub{font-size:14px;color:var(--steel);}
  .quote-done .qd-sub a{color:var(--cobalt-light);}
  .quote-done .btn{margin-top:10px;}
  @media(max-width:560px){
    .field-row{grid-template-columns:1fr;}
    .quote-done{padding:28px 22px;}
  }
  @media(prefers-reduced-motion:reduce){#quoteSubmit .spin{animation:none;}}

  /* ===== LEGAL PAGES ===== */
  .legal-body{max-width:760px;padding-top:8px;padding-bottom:24px;}
  .legal-date{font-family:var(--font-mono);font-size:12.5px;color:var(--steel);letter-spacing:.04em;}
  .legal-body h2{font-size:clamp(20px,2.2vw,24px);text-transform:none;margin:40px 0 12px;}
  .legal-body p,.legal-body li{color:var(--steel-light);font-size:16px;line-height:1.7;}
  .legal-body p + p{margin-top:12px;}
  .legal-body ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px;}
  .legal-body a{color:var(--cobalt-light);text-decoration:underline;text-underline-offset:2px;}
  .proj-lede a.inline-link{white-space:nowrap;}