/* ══ TOKENS ══ */
    :root {
      --bg:#080807;--surface:#0f0f0d;--surface2:#141410;
      --border:#1f1f18;--border2:#2a2a1e;
      --text:#f0ede4;--muted:#7a7a65;--muted2:#4a4a38;
      --accent:#f5c800;--accent-dim:rgba(245,200,0,0.09);
      /* Sampled from the Laylock logo artwork so the mark sits flush in the nav bar */
      --logo:#231f20;--logo-line:#37312f;
      /* positive/"live" status indicator */
      --live:#4ade80;--live-glow:rgba(74,222,128,0.55);
      --blue:#4ab3f4;--blue-glow:rgba(74,179,244,0.55);--blue-dim:rgba(74,179,244,0.12);
      --nav-h:68px;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--text);font-family:'Barlow',sans-serif;font-weight:300;font-size:16px;line-height:1.65;min-height:100vh;overflow-x:hidden}

    /* ══ NAV ══ */
    nav{
      position:fixed;top:0;left:0;right:0;height:var(--nav-h);
      background:linear-gradient(to right,var(--logo) 0%,var(--logo) 20%,rgba(35,31,32,0.97) 55%,rgba(35,31,32,0.92) 100%);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid var(--logo-line);
      display:flex;align-items:center;justify-content:space-between;
      padding:0 24px 0 14px;z-index:200;
      transition:transform 0.3s ease;
    }
    nav.nav-hidden{transform:translateY(-100%)}
    .nav-logo{cursor:pointer;user-select:none;display:flex;align-items:center;flex-shrink:0}
    /* Mobile logo */
    .nav-logo img{height:52px;width:auto;display:block}

    /* Hamburger - MOBILE ONLY */
    .nav-burger{
      display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
      width:40px;height:40px;background:transparent;border:1px solid var(--border2);
      cursor:pointer;flex-shrink:0;transition:border-color 0.2s;
    }
    .nav-burger:hover{border-color:var(--accent)}
    .nav-burger span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform 0.3s ease,opacity 0.2s ease}
    .nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    .nav-burger.open span:nth-child(2){opacity:0}
    .nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

    /* Desktop nav links - hidden on mobile */
    .nav-links{display:none;gap:0;list-style:none}
    .nav-links a{
      font-family:'Barlow Condensed',sans-serif;font-size:0.95rem;letter-spacing:0.18em;text-transform:uppercase;
      /* lifted from --muted: the nav bar now sits on the lighter logo grey */
      color:#8f8f78;text-decoration:none;padding:10px 20px;transition:color 0.2s;position:relative;
    }
    .nav-links a::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 0.25s ease}
    .nav-links a:hover{color:var(--text)}.nav-links a:hover::after{transform:scaleX(1)}
    .nav-links a.active{color:var(--accent)}.nav-links a.active::after{transform:scaleX(1)}

    /* Mobile dropdown */
    .nav-dropdown{
      display:none;position:fixed;top:var(--nav-h);left:0;right:0;
      background:rgba(35,31,32,0.99);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid var(--logo-line);z-index:199;
      opacity:0;transform:translateY(-8px);pointer-events:none;
      transition:opacity 0.25s ease,transform 0.25s ease;
    }
    .nav-dropdown.open{opacity:1;transform:translateY(0);pointer-events:all}
    .nav-dropdown ul{list-style:none;padding:8px 0 16px}
    .nav-dropdown ul li a{
      display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;letter-spacing:0.22em;text-transform:uppercase;
      color:#8f8f78;text-decoration:none;padding:14px 24px;border-bottom:1px solid var(--logo-line);transition:color 0.2s,background 0.2s;
    }
    .nav-dropdown ul li:last-child a{border-bottom:none}
    .nav-dropdown ul li a:hover,.nav-dropdown ul li a.active{color:var(--accent);background:rgba(245,200,0,0.04)}

    /* ══ PAGES - multi-page: each page is its own document ══ */
    .page{display:block;min-height:calc(100vh - var(--nav-h));padding-top:var(--nav-h);animation:fadeIn 0.35s ease}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    /* ══ SHARED ══ */
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      font-family:'Barlow Condensed',sans-serif;font-size:0.95rem;letter-spacing:0.2em;text-transform:uppercase;
      color:#080807;background:var(--accent);padding:14px 28px;cursor:pointer;border:none;text-decoration:none;
      transition:background 0.2s,transform 0.15s;-webkit-tap-highlight-color:transparent;
    }
    .btn:hover{background:#ffd31a}.btn:active{transform:scale(0.97)}
    .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
    .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

    footer{border-top:1px solid var(--border);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
    footer p{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted2)}

    .page-tag{font-family:'Barlow Condensed',sans-serif;font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .page-tag::before{content:'';display:block;width:20px;height:1px;background:var(--accent)}
    #svg-defs{position:absolute;width:0;height:0;overflow:hidden}
    .net-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
    .net-layer svg{position:absolute;inset:0;width:100%;height:100%}

    /* ══ HOME ══ */
    .hero{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding:40px 24px 36px;position:relative;overflow:hidden}
    .hero-bg{position:absolute;inset:0;z-index:0;
      background:radial-gradient(ellipse 55% 55% at 0% 0%,#080807 0%,rgba(8,8,7,0.88) 38%,transparent 62%),
        radial-gradient(ellipse 70% 60% at 75% 40%,rgba(245,200,0,0.04) 0%,transparent 70%),
        radial-gradient(ellipse 40% 40% at 15% 85%,rgba(245,200,0,0.02) 0%,transparent 65%)}
    .hero>*:not(.hero-bg):not(.net-layer){position:relative;z-index:2}
    .hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:0.92rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:10px}
    .hero-eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--accent)}
    .hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.8rem,18vw,9rem);line-height:0.88;letter-spacing:0.015em;color:var(--text);margin-bottom:22px}
    .hero h1 .hl{color:var(--accent)}
    .hero h1 .outline{-webkit-text-stroke:1.5px rgba(240,237,228,0.18);color:transparent}
    .hero-sub{font-size:1rem;color:var(--muted);max-width:480px;margin-bottom:36px;line-height:1.75}
    .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

    /* Metrics - mobile 2x2 grid */
    .metrics-strip{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
    .metric{padding:22px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
    .metric:nth-child(even){border-right:none}
    .metric:nth-last-child(-n+2){border-bottom:none}
    .metric-label{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px}
    /* all four metric values share one font and size */
    .metric-val,.metric-val.sm,.metric-val.live{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:0.05em;line-height:1.15;color:var(--text);padding-top:0}
    .metric-val.live{color:var(--live);display:flex;align-items:center;gap:7px}
    /* inline so the flag follows the text instead of floating when the label wraps */
    .metric-val.flag-val{display:block}
    .metric-val.flag-val svg{display:inline-block;vertical-align:2px;margin-left:9px;border:1px solid rgba(255,255,255,0.16)}
    /* 5 cells in a 2-col grid leaves an orphan - let the last one span the row */
    .metrics-strip .metric:last-child{grid-column:1 / -1;border-right:none}
    .metric-val.live::before{content:'';display:block;width:6px;height:6px;background:var(--live);border-radius:50%;box-shadow:0 0 6px var(--live-glow);animation:blink 2s infinite;flex-shrink:0}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}

    /* ══ ABOUT - Timeline style ══ */
    .about-hero{padding:28px 24px 36px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
    .about-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 95% 50%,rgba(245,200,0,0.03) 0%,transparent 70%)}
    /* decorative layers excluded, or they'd lose their absolute positioning (as .hero does) */
    .about-hero>*:not(.about-hero-bg):not(.net-layer){position:relative;z-index:2}
    .about-hero h1,.about-hero h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,10vw,5rem);line-height:0.95;letter-spacing:0.03em;margin-bottom:16px;font-weight:400}
    .about-hero p{color:var(--muted);font-size:0.98rem;line-height:1.85;max-width:680px}
    .about-hero p strong{color:var(--text);font-weight:500}

    /* Timeline */
    .timeline{padding:0 24px;position:relative}
    .timeline::before{content:'';position:absolute;left:36px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--accent) 0%,var(--border2) 60%,transparent 100%)}
    .tl-item{display:grid;grid-template-columns:60px 1fr;gap:0 20px;padding:36px 0;border-bottom:1px solid var(--border);position:relative}
    .tl-item:last-child{border-bottom:none}
    .tl-left{display:flex;flex-direction:column;align-items:center;padding-top:4px;position:relative}
    .tl-dot{width:12px;height:12px;border:2px solid var(--accent);background:var(--bg);transform:rotate(45deg);flex-shrink:0;position:relative;z-index:2}
    .tl-dot.active-dot{background:var(--accent)}
    .tl-year{font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.08em;color:var(--muted2);margin-top:8px;writing-mode:horizontal-tb}
    .tl-right{}
    .tl-label{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
    .tl-title{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.04em;color:var(--text);line-height:1;margin-bottom:10px}
    .tl-body{font-size:0.95rem;color:var(--muted);line-height:1.8}
    .tl-body strong{color:var(--text);font-weight:500}
    .tl-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:#9a9a88;border:1px solid #43432f;padding:5px 10px}

    /* ══ SYSTEM ══ */
    #page-system{min-height:unset}
    .system-header{padding:28px 24px 22px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
    .system-header-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 88% 45%,rgba(245,200,0,0.03) 0%,transparent 70%)}
    .system-header>*{position:relative;z-index:2}
    .system-header h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,9vw,5rem);line-height:0.95;letter-spacing:0.03em;margin-bottom:10px}
    .system-header p{color:var(--muted);font-size:0.9rem;line-height:1.75;max-width:480px}
    .sys-instructions{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
    .sys-instr{display:flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted2)}
    .sys-instr-dot{width:6px;height:6px;border-radius:50%;background:var(--muted2);flex-shrink:0}
    .sys-instr-dot.hover{background:var(--accent)}.sys-instr-dot.active{background:var(--blue);box-shadow:0 0 5px var(--blue-glow)}

    .system-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 12px 60px;overflow:hidden;border-bottom:1px solid var(--border)}
    .stage-overlay{position:absolute;inset:0;background:rgba(6,6,5,0.78);opacity:0;pointer-events:none;transition:opacity 0.4s ease;z-index:2}
    .stage-overlay.active{opacity:1}

    /* SVG frame - dashed/circuit board style */
    .svg-frame{position:relative;z-index:3;width:100%;max-width:720px}
    .svg-frame-inner{
      position:relative;
      border:1px solid #2a2a20;
      background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(245,200,0,0.025) 0%,transparent 60%);
      box-shadow:inset 0 0 40px rgba(0,0,0,0.5),0 0 0 1px rgba(245,200,0,0.06);
    }
    /* Circuit-style corners - L-brackets with dot */
    .svg-frame-inner::before,.svg-frame-inner::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--accent);border-style:solid;z-index:5;pointer-events:none}
    .svg-frame-inner::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
    .svg-frame-inner::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
    .svg-corner-tr,.svg-corner-bl{position:absolute;width:20px;height:20px;border-color:var(--accent);border-style:solid;z-index:5;pointer-events:none}
    .svg-corner-tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
    .svg-corner-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
    /* Corner dots */
    .svg-cdot{position:absolute;width:4px;height:4px;background:var(--accent);z-index:6;pointer-events:none}
    .svg-cdot.tl{top:2px;left:2px}.svg-cdot.tr{top:2px;right:2px}
    .svg-cdot.bl{bottom:2px;left:2px}.svg-cdot.br{bottom:2px;right:2px}
    /* Top label bar */
    .svg-frame-topbar{
      position:absolute;top:-1px;left:18px;right:18px;
      display:flex;align-items:center;justify-content:space-between;
      font-family:'Barlow Condensed',sans-serif;font-size:0.58rem;letter-spacing:0.22em;
      color:var(--muted2);background:var(--bg);padding:0 8px;z-index:6;pointer-events:none;
    }
    .svg-frame-topbar span:last-child{color:var(--border2)}
    /* Subtle scanline */
    .svg-scan{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
    .svg-scan::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(74,179,244,0.12),transparent);animation:scan 5s linear infinite}
    @keyframes scan{0%{top:-2px}100%{top:101%}}

    #trench-svg{width:100%;height:auto;display:block}

    .comp-group{cursor:pointer;-webkit-tap-highlight-color:transparent}
    .comp-shape{transition:transform 0.38s cubic-bezier(0.34,1.45,0.64,1),filter 0.3s ease}
    /* Roof - transparent hit zone, no flicker */
    #comp-roof{pointer-events:bounding-box}
    #comp-roof:hover  .comp-shape{transform:translateY(-16px);filter:drop-shadow(0 0 9px rgba(245,200,0,0.55))}
    #comp-frame:hover .comp-shape{transform:translateY(-6px);filter:drop-shadow(0 0 9px rgba(245,200,0,0.55))}
    #comp-floor:hover .comp-shape{transform:translateY(10px);filter:drop-shadow(0 0 9px rgba(245,200,0,0.55))}
    .comp-group.is-active .comp-shape{filter:drop-shadow(0 0 14px rgba(74,179,244,0.85)) drop-shadow(0 0 3px rgba(74,179,244,1))}
    #comp-roof.is-active  .comp-shape{transform:translateY(-22px)}
    #comp-frame.is-active .comp-shape{transform:translateY(-8px)}
    #comp-floor.is-active .comp-shape{transform:translateY(14px)}

    .pin-group{opacity:0;pointer-events:none;transition:opacity 0.3s ease 0.18s}
    .pin-group.visible{opacity:1;pointer-events:all}
    .pin-pulse{animation:pinpulse 2s ease-in-out infinite}
    @keyframes pinpulse{0%,100%{r:8;opacity:0.55}50%{r:13;opacity:0.15}}
    .pin-dash{stroke:var(--blue);stroke-width:1;stroke-dasharray:4 3;animation:dashmove 1.2s linear infinite}
    @keyframes dashmove{to{stroke-dashoffset:-14}}

    .comp-tabs{position:absolute;bottom:10px;right:12px;display:flex;gap:5px;z-index:10}
    .comp-tab{
      font-family:'Barlow Condensed',sans-serif;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;
      color:var(--muted2);background:rgba(10,10,9,0.92);border:1px solid var(--border);padding:7px 12px;
      cursor:pointer;transition:color 0.2s,border-color 0.2s,background 0.2s;-webkit-tap-highlight-color:transparent;
    }
    .comp-tab:hover{color:var(--accent);border-color:var(--accent)}
    .comp-tab.is-active{color:var(--blue);border-color:var(--blue);background:var(--blue-dim)}

    .info-panel{
      position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:2px solid var(--blue);
      z-index:300;opacity:0;transform:translateY(20px);pointer-events:none;
      transition:opacity 0.35s ease,transform 0.38s cubic-bezier(0.22,1,0.36,1);
      max-height:55vh;overflow-y:auto;
    }
    .info-panel.visible{opacity:1;transform:translateY(0);pointer-events:all}
    .panel-header{padding:14px 18px 10px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;background:var(--surface);z-index:1}
    .panel-comp-num{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.1em;color:var(--blue);margin-bottom:1px}
    .panel-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:0.04em;color:var(--text);line-height:1}
    .panel-close{width:28px;height:28px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;transition:border-color 0.2s,color 0.2s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
    .panel-close:hover{border-color:var(--blue);color:var(--blue)}
    .panel-body{padding:14px 18px}
    .panel-desc{font-size:0.87rem;color:var(--muted);line-height:1.65;margin-bottom:12px}
    .panel-specs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
    .pspec{background:var(--surface2);border:1px solid var(--border);padding:7px 9px}
    .pspec-key{font-family:'Barlow Condensed',sans-serif;font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px}
    .pspec-val{font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;letter-spacing:0.06em;color:var(--text)}
    .panel-sub-img{width:100%;height:70px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
    .panel-feature{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
    .feature-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 5px var(--blue-glow);flex-shrink:0}
    .feature-text{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue)}

    .system-specs{display:grid;grid-template-columns:1fr;border-top:1px solid var(--border)}
    .spec-item{padding:28px 24px;border-bottom:1px solid var(--border)}
    .spec-item:last-child{border-bottom:none}
    .spec-num{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--accent);opacity:0.55;margin-bottom:8px}
    .spec-title{font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text);margin-bottom:6px}
    .spec-desc{font-size:0.92rem;color:var(--muted);line-height:1.7}

    /* ══ CONTACT - redesigned ══ */
    .contact-grid{display:grid;grid-template-columns:1fr}
    /* Left panel */
    .contact-left{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
    .contact-left-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 0% 100%,rgba(245,200,0,0.04) 0%,transparent 65%)}
    .contact-left>*{position:relative;z-index:2}
    /* Big headline area */
    .contact-headline{padding:44px 24px 32px;border-bottom:1px solid var(--border)}
    .contact-headline h1,.contact-headline h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,14vw,6rem);line-height:0.85;letter-spacing:0.02em;color:var(--text);margin-bottom:10px;font-weight:400}
    .contact-headline h1 span,.contact-headline h2 span{color:var(--accent);display:block}
    .contact-headline p{color:var(--muted);font-size:0.98rem;line-height:1.8;max-width:340px}
    /* Team section */
    .contact-team{padding:0}
    .contact-person{
      padding:24px 24px;border-bottom:1px solid var(--border);
      display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:center;
    }
    .contact-person:last-child{border-bottom:none}
    .person-initial{
      width:44px;height:44px;border:1px solid var(--border2);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:0.05em;color:var(--accent);
    }
    .person-name{font-family:'Barlow Condensed',sans-serif;font-size:1rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);margin-bottom:3px}
    .person-role{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px}
    .person-email a{font-size:0.88rem;color:var(--muted);text-decoration:none;transition:color 0.2s;word-break:break-all}
    .person-email a:hover{color:var(--accent)}
    /* Location strip */
    .contact-location{padding:20px 24px;display:flex;align-items:center;gap:12px}
    .loc-icon{width:28px;height:28px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .loc-label{font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:2px}
    .loc-val{font-family:'Barlow Condensed',sans-serif;font-size:0.9rem;letter-spacing:0.1em;color:var(--text)}
    /* Right panel - form */
    .contact-right{padding:32px 24px 44px}
    .form-heading{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted2);margin-bottom:24px;display:flex;align-items:center;gap:10px}
    .form-heading::after{content:'';flex:1;height:1px;background:var(--border)}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .field{margin-bottom:16px}
    .field label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px}
    .field input,.field textarea,.field select{
      width:100%;background:var(--surface2);border:1px solid var(--border2);
      color:var(--text);font-family:'Barlow',sans-serif;font-size:1rem;font-weight:300;
      padding:12px 14px;outline:none;transition:border-color 0.2s,background 0.2s;
      appearance:none;-webkit-appearance:none;border-radius:0;
    }
    .field input::placeholder,.field textarea::placeholder{color:var(--muted2)}
    .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);background:rgba(245,200,0,0.03)}
    .field textarea{resize:vertical;min-height:100px}
    /* Select option readability fix */
    .field select option{background:#1a1a16;color:var(--text)}
    .contact-privacy{font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted2);margin-top:16px}

    /* ══ DESKTOP ≥768px ══ */
    @media(min-width:768px){
      :root{--nav-h:80px}
      nav{padding:0 40px 0 16px}
      /* Bigger logo on desktop - 66px (~30% more than 51px) */
      .nav-logo img{height:66px;width:auto}
      /* Show desktop links, hide hamburger */
      .nav-links{display:flex}
      .nav-burger,.nav-dropdown{display:none!important}

      .hero{padding:0 52px}
      .hero-bg{background:
        radial-gradient(ellipse 32% 55% at 0% 0%,#080807 0%,rgba(8,8,7,0.9) 42%,transparent 65%),
        radial-gradient(ellipse 55% 65% at 78% 48%,rgba(245,200,0,0.045) 0%,transparent 70%),
        radial-gradient(ellipse 35% 45% at 15% 85%,rgba(245,200,0,0.025) 0%,transparent 65%)}
      .hero h1{font-size:clamp(4.5rem,10vw,9rem)}
      .hero-eyebrow{font-size:1.05rem}
      .hero-sub{font-size:1.15rem;max-width:520px}

      /* Metrics - single row on desktop */
      .metrics-strip{display:flex;border-top:1px solid var(--border)}
      .metric{flex:1;padding:30px 40px;border-right:1px solid var(--border);border-bottom:none}
      .metric:nth-child(even){border-right:1px solid var(--border)}
      .metric:last-child{border-right:none}
      .metric-val,.metric-val.sm,.metric-val.live{font-size:1.55rem}

      /* About */
      .about-hero{padding:44px 52px 40px}
      .timeline{padding:0 52px}
      .timeline::before{left:62px}
      .tl-item{grid-template-columns:80px 1fr;gap:0 24px;padding:44px 0}

      /* System */
      .system-header{padding:44px 52px 36px}
      .system-header h2{font-size:clamp(2.8rem,5.5vw,5rem)}
      .system-header p{font-size:1.08rem}
      .system-stage{padding:32px 52px 80px;min-height:500px}
      .comp-tabs{bottom:22px;right:52px}
      .comp-tab{font-size:0.72rem;letter-spacing:0.18em;padding:8px 16px}

      .info-panel{
        bottom:32px;left:52px;right:auto;width:360px;
        border-top:none;border:1px solid var(--border2);border-left:3px solid var(--blue);
        max-height:none;overflow-y:visible;transform:translateX(-28px);
      }
      .info-panel.visible{transform:translateX(0)}

      .system-specs{grid-template-columns:repeat(3,1fr)}
      .spec-item{padding:40px 52px;border-right:1px solid var(--border);border-bottom:none}
      .spec-item:last-child{border-right:none}

      /* Contact */
      .contact-grid{grid-template-columns:1fr 1.15fr;min-height:calc(100vh - var(--nav-h))}
      .contact-left{border-bottom:none;border-right:1px solid var(--border)}
      .contact-headline{padding:60px 44px 36px}
      .contact-headline h1,.contact-headline h2{font-size:clamp(3.5rem,5vw,5.5rem)}
      .contact-person{padding:26px 44px}
      .contact-location{padding:22px 44px}
      .contact-right{padding:60px 52px 44px}

      footer{padding:24px 52px}
      .page-tag{font-size:0.82rem}
    }
    /* ══ ABSTRACT SYSTEM DIAGRAM ══ */
    #system-svg{width:100%;height:auto;display:block}

    /* Issue 2 fix - on mobile the info panel rises from the bottom, so keep
       the component tabs at the TOP of the frame where the panel can't cover them */
    @media(max-width:767px){
      .comp-tabs{top:10px;bottom:auto;right:10px}
    }

    /* ══ CONTACT FORM - states & consent ══ */
    .form-consent{display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px}
    .form-consent input{width:16px;height:16px;margin-top:3px;flex-shrink:0;accent-color:var(--accent)}
    .form-consent label{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);line-height:1.5;margin:0}
    .form-consent a{color:var(--accent);text-decoration:none}
    .form-consent a:hover{text-decoration:underline}
    .field input.invalid,.field textarea.invalid,.field select.invalid{border-color:#e0564a;background:rgba(224,86,74,0.05)}
    .form-consent.invalid label{color:#e0564a}
    .field-error{display:none;color:#e0564a;font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;margin-top:6px}
    .field-error.show{display:block}
    .btn:disabled{opacity:0.5;cursor:not-allowed}
    .form-success{display:none;border:1px solid var(--blue);border-left:3px solid var(--blue);background:var(--blue-dim);padding:22px 24px;margin-top:6px}
    .form-success.show{display:block;animation:fadeIn 0.35s ease}
    .form-success h3{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.04em;color:var(--text);margin-bottom:8px}
    .form-success p{color:var(--muted);font-size:0.92rem;line-height:1.7;margin-bottom:8px}
    .form-success a{color:var(--accent);text-decoration:none}
    .form-success a:hover{text-decoration:underline}

    /* ══ LEGAL / PRIVACY PAGE ══ */
    .legal{max-width:760px;margin:0 auto;padding:40px 24px 64px}
    .legal h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,9vw,4rem);letter-spacing:0.03em;margin-bottom:6px}
    .legal .updated{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted2);margin-bottom:28px}
    .legal h2{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin:28px 0 8px}
    .legal p{color:var(--muted);line-height:1.8;margin-bottom:12px}
    .legal ul{color:var(--muted);line-height:1.8;margin:0 0 12px 20px}
    .legal a{color:var(--accent);text-decoration:none}
    .legal a:hover{text-decoration:underline}

    /* ══ CONTACT - social/location links ══ */
    .loc-val a{color:var(--text);text-decoration:none;transition:color 0.2s}
    .loc-val a:hover{color:var(--accent)}

    /* ══ CONTACT - headshots ══ */
    .person-photo{width:96px;height:96px;object-fit:cover;display:block;flex-shrink:0;border:1px solid var(--border2)}
    @media(min-width:768px){.person-photo{width:116px;height:116px}}

    /* ══ GENERAL - light paragraph text, bold white for the emphasised phrases ══ */
    .hero-sub,.about-hero p,.tl-body,.contact-headline p,.legal p,.legal ul{
      color:#9a9a88;font-weight:300;
    }
    .hero-sub strong,.about-hero p strong,.tl-body strong,.contact-headline p strong,.legal p strong{
      color:var(--text);font-weight:700;
    }

    /* Stacked tag bullets (e.g. the Q4 2026 events list) */
    .tl-tags{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
    .tl-tags .tl-tag{margin-top:0}

    /* About body copy sits a little lighter than the rest of the site */
    #page-about .about-hero p,#page-about .tl-body{color:#b2b2a0}

    /* ══ FOOTER LINKS ══ */
    .footer-legal{display:flex;flex-direction:column;gap:4px}
    .footer-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
    .footer-made{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted2);white-space:nowrap}
    .footer-made svg{display:block;flex-shrink:0;border:1px solid rgba(255,255,255,0.15)}
    footer a{color:var(--muted2);text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;transition:color 0.2s}
    footer a:hover{color:var(--accent)}

    /* ══ SYSTEM ELEMENT CARDS (v2 - replaces the v1 SVG diagram) ══ */
    .system-cards{display:grid;grid-template-columns:1fr;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .sys-card{
      display:block;width:100%;text-align:left;cursor:pointer;
      background:var(--surface);color:var(--text);border:none;border-bottom:1px solid var(--border);
      padding:28px 24px;font-family:inherit;position:relative;
      transition:background 0.2s,box-shadow 0.2s;-webkit-tap-highlight-color:transparent;
    }
    .sys-card:last-child{border-bottom:none}
    .sys-card:hover{background:var(--surface2)}
    .sys-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
    .sys-card.is-active{background:var(--blue-dim);box-shadow:inset 3px 0 0 var(--blue)}
    .sys-card-icon{display:block;width:46px;height:46px;margin-bottom:16px;color:var(--accent);transition:color 0.2s}
    .sys-card-icon svg{width:100%;height:100%;display:block}
    .sys-card.is-active .sys-card-icon{color:var(--blue)}
    .sys-card-num{display:block;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.06em;color:var(--accent);opacity:0.55;margin-bottom:4px}
    .sys-card-title{display:block;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:0.04em;line-height:1;margin-bottom:9px}
    .sys-card-tease{display:block;font-size:0.92rem;color:var(--muted);line-height:1.6;margin-bottom:16px;max-width:46ch}
    .sys-card-more{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted2);transition:color 0.2s}
    .sys-card:hover .sys-card-more{color:var(--accent)}
    .sys-card.is-active .sys-card-more{color:var(--blue)}
    @media(min-width:768px){
      .system-cards{grid-template-columns:repeat(3,1fr)}
      .sys-card{border-bottom:none;border-right:1px solid var(--border);padding:44px 36px}
      .sys-card:last-child{border-right:none}
    }

    @media(min-width:768px) and (max-width:1024px){
      .system-stage{padding:24px 32px 72px}
      .comp-tabs{right:32px}
      .spec-item,.about-hero,.contact-headline,.contact-person{padding-left:32px;padding-right:32px}
    }