:root{
    --base:#FFFFFF;
    --contrast:#1c2a2e;
    --accent-1:#1f4e5f;
    --accent-2:#2e6e85;
    --accent-3:#b0651f;
    --accent-4:#65767c;
    --accent-5:#FBFAF3;
    --line: rgba(28,42,46,0.12);
    --line-strong: rgba(28,42,46,0.22);
    --maxw: 1220px;
    --ease: cubic-bezier(.16,.84,.44,1);
    --font-head:"Space Grotesk", "Roboto Slab", Georgia, serif;
    --font-body:"Inter","Fira Sans",Arial,sans-serif;
    --font-mono:"Roboto Mono", monospace;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--contrast);
    background:var(--base);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:var(--font-head);
    margin:0 0 .5em;
    line-height:1.12;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  p{line-height:1.65;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
  img,svg{display:block;max-width:100%;}
  ::selection{background:var(--accent-3);color:#fff;}

  a:focus-visible, button:focus-visible{outline:2px solid var(--accent-3);outline-offset:3px;}
  .skip-link{
    position:absolute;left:-999px;top:0;background:var(--contrast);color:#fff;padding:12px 20px;z-index:999;
  }
  .skip-link:focus{left:12px;top:12px;}

  /* reveal-on-scroll base state: content is fully visible without JS */
  .reveal{opacity:1;transform:none;}
  .js .reveal{opacity:0;transform:translateY(26px);}
  @media (prefers-reduced-motion: reduce){
    .js .reveal{opacity:1;transform:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- HEADER ---------- */
  header.site{
    position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 40px;
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(10px) saturate(1.4);
    border-bottom:1px solid var(--line);
    transition:box-shadow .3s ease;
  }
  header.site.scrolled{box-shadow:0 6px 24px rgba(28,42,46,0.06);}
  .logo{font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:.02em;text-decoration:none;color:var(--contrast);}
  nav.main ul{list-style:none;display:flex;gap:32px;margin:0;padding:0;flex-wrap:wrap;}
  nav.main a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--contrast);position:relative;padding:4px 0;}
  nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent-3);transition:width .25s var(--ease);}
  nav.main a:hover::after,nav.main a:focus-visible::after,nav.main a.active::after{width:100%;}
  .header-cta{display:none;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:3px;
    font-weight:600;font-size:.92rem;text-decoration:none;
    border:1px solid transparent;transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    font-family:var(--font-body);
    cursor:pointer;
  }
  .btn-primary{background:var(--accent-3);color:#fff;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(176,101,31,0.32);}
  .btn-outline{border-color:var(--line-strong);color:var(--contrast);}
  .btn-outline:hover{transform:translateY(-2px);background:var(--contrast);border-color:var(--contrast);color:#fff;}
  .btn-outline.on-dark{border-color:rgba(255,255,255,0.35);color:#fff;}
  .btn-outline.on-dark:hover{background:#fff;color:var(--contrast);}
  @media(min-width:900px){.header-cta{display:inline-flex;}}
  @media(max-width:900px){nav.main{display:none;}}

  /* ---------- PAGE HERO (secondary pages) ---------- */
  .page-hero{
    position:relative;padding:170px 40px 90px;text-align:center;background:var(--base);overflow:hidden;
  }
  .page-hero .hero-grid{
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px);
    mask-image:radial-gradient(ellipse 70% 60% at center, black 40%, transparent 90%);
  }
  .page-hero .hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;}
  .page-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);}
  .page-hero p.lead{font-size:1.15rem;color:var(--accent-4);max-width:640px;margin:20px auto 0;}
  .breadcrumb{
    font-family:var(--font-mono);font-size:.76rem;color:var(--accent-4);letter-spacing:.04em;
    display:flex;gap:8px;justify-content:center;margin-bottom:18px;
  }
  .breadcrumb a{color:var(--accent-2);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}

  /* ---------- HERO (homepage) ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding:150px 40px 90px;
    background:var(--base);
    overflow:hidden;
  }
  .hero-grid{
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px);
    mask-image:radial-gradient(ellipse 70% 60% at center, black 40%, transparent 90%);
  }
  .hero-glow{
    position:absolute;top:-10%;left:50%;translate:-50% 0;width:900px;height:900px;
    background:radial-gradient(circle, rgba(46,110,133,0.14) 0%, rgba(251,250,243,0) 65%);
    pointer-events:none;
  }
  .corner-tick{position:absolute;width:28px;height:28px;border:1px solid var(--line-strong);opacity:.7;}
  .corner-tick.tl{top:100px;left:40px;border-right:none;border-bottom:none;}
  .corner-tick.tr{top:100px;right:40px;border-left:none;border-bottom:none;}
  .corner-tick.bl{bottom:40px;left:40px;border-right:none;border-top:none;}
  .corner-tick.br{bottom:40px;right:40px;border-left:none;border-top:none;}
  @media(max-width:760px){.corner-tick{display:none;}}

  .hud{
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--accent-2);
    display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;opacity:.85;
  }
  .hud span{white-space:nowrap;}
  .hud span::before{content:"·";margin-right:22px;color:var(--line-strong);}
  .hud span:first-child::before{display:none;}

  .hero-eyebrow{
    text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:600;
    color:var(--accent-2);margin-bottom:20px;font-family:var(--font-body);
  }
  .hero h1{font-size:clamp(2.3rem, 5.4vw, 4.6rem);max-width:17ch;position:relative;z-index:2;}
  .hero p.lead{font-size:1.2rem;color:var(--accent-4);max-width:640px;margin:24px auto 38px;position:relative;z-index:2;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2;}
  .scroll-cue{
    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-4);font-family:var(--font-mono);
  }
  .scroll-cue .dash{width:1px;height:34px;background:var(--accent-4);animation:cue 1.8s ease-in-out infinite;}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  .airflow{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;}
  .airflow path{fill:none;stroke:var(--accent-2);stroke-width:1.3;stroke-dasharray:8 10;animation:flow 7s linear infinite;}
  .airflow path:nth-child(2){stroke:var(--accent-3);animation-duration:9s;animation-direction:reverse;}
  .airflow path:nth-child(3){stroke:var(--accent-1);animation-duration:11s;}

  @keyframes flow{to{stroke-dashoffset:-360;}}

  /* ---------- STANDARDS MARQUEE ---------- */
  .marquee-strip{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--accent-5);padding:18px 0;overflow:hidden;
  }
  .marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;}
  .marquee-track span{
    font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;color:var(--accent-1);
    padding:0 34px;white-space:nowrap;display:flex;align-items:center;gap:10px;
  }
  .marquee-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-3);}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

  /* ---------- SECTION SHELLS ---------- */
  section{padding:120px 0;position:relative;}
  .section-tight{padding:80px 0;}
  .bg-accent5{background:var(--accent-5);}
  .bg-contrast{background:var(--contrast);color:var(--base);}
  .bg-contrast h2,.bg-contrast h3,.bg-contrast h4{color:var(--base);}
  .eyebrow{
    text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;
    color:var(--accent-3);margin-bottom:16px;display:block;font-family:var(--font-body);
  }
  .section-head{max-width:660px;margin:0 auto 60px;text-align:center;}
  .section-head.left{text-align:left;margin:0 0 44px;}
  .section-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem);}
  .section-head p{color:var(--accent-4);font-size:1.08rem;}
  .bg-contrast .section-head p{color:#b9c6c6;}
  .prose{max-width:760px;margin:0 auto;}
  .prose p{color:var(--contrast);font-size:1.05rem;margin-bottom:1.2em;}
  .prose h2{font-size:1.6rem;color:var(--accent-1);margin-top:1.8em;}
  .prose h3{font-size:1.25rem;color:var(--accent-1);margin-top:1.4em;}
  .prose ul,.prose ol{color:var(--contrast);padding-left:1.3em;margin-bottom:1.2em;}
  .prose li{margin-bottom:.5em;line-height:1.6;}
  .prose blockquote{
    border-left:2px solid var(--accent-3);margin:1.6em 0;padding:.2em 0 .2em 1.4em;
    font-style:italic;color:var(--accent-1);font-size:1.1rem;
  }
  .prose strong{color:var(--accent-1);}
  .answer-box{
    background:var(--accent-5);border:1px solid var(--line-strong);border-left:4px solid var(--accent-3);
    padding:26px 28px;border-radius:4px;margin:0 0 2em;
  }
  .answer-box p{margin:0;font-size:1.08rem;color:var(--contrast);}
  .answer-box .eyebrow{margin-bottom:10px;}

  /* ---------- PINNED ZOOM DIAGRAM ---------- */
  .diagram-pin{position:relative;height:300vh;}
  .diagram-stage{
    position:sticky;top:0;height:100svh;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;background:var(--contrast);
  }
  .diagram-stage::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px);
  }
  .diagram-copy{
    position:absolute;top:12%;left:0;right:0;text-align:center;color:var(--base);z-index:5;padding:0 32px;
  }
  .diagram-copy .eyebrow{color:var(--accent-3);}
  .diagram-copy h2{font-size:clamp(1.7rem,3.8vw,2.5rem);max-width:700px;margin:0 auto 18px;}
  .diagram-copy p{max-width:640px;margin:0 auto;color:#b9c6c6;font-size:1.06rem;}
  .diagram-svg-wrap{width:min(78vw,920px);transform-origin:center center;position:relative;z-index:2;}
  .diagram-svg-wrap svg{width:100%;height:auto;overflow:visible;}
  .duct{fill:none;stroke:#e8ede9;stroke-width:2;}
  .duct-fill{fill:#2a3f45;stroke:#4a616a;stroke-width:1.5;}
  .duct-accent{stroke:var(--accent-3);}
  .dim-line{stroke:rgba(232,237,233,0.35);stroke-width:1;stroke-dasharray:2 3;}
  .callout{opacity:0;}
  .callout text{fill:var(--base);font-family:var(--font-body);font-size:13px;font-weight:600;}
  .callout .lbl-sub{fill:#9fb0b0;font-size:11px;font-weight:400;font-family:var(--font-mono);}
  .callout .lbl-line{stroke:var(--accent-3);stroke-width:1.5;}
  .callout .lbl-dot{fill:var(--accent-3);}
  .diagram-frame{position:absolute;inset:26px;border:1px solid rgba(255,255,255,0.08);pointer-events:none;z-index:1;}
  .diagram-frame::before,.diagram-frame::after{
    content:attr(data-tag);position:absolute;font-family:var(--font-mono);font-size:.68rem;color:rgba(255,255,255,0.3);letter-spacing:.06em;
  }
  .diagram-frame::before{top:-20px;left:0;content:"FJELLUFT / VENTILASJONSSKJEMA";}
  .diagram-frame::after{bottom:-20px;right:0;content:"MÅLESTOKK 1:50 (SKJEMATISK)";}

  /* ---------- CASE / FEATURED PROJECTS ---------- */
  .cases{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);}
  .case{
    display:grid;grid-template-columns:120px 1fr;gap:32px;background:var(--base);padding:44px 40px;align-items:center;
    transition:background .3s ease;
  }
  .case:hover{background:var(--accent-5);}
  @media(max-width:720px){.case{grid-template-columns:1fr;gap:16px;}}
  .case .case-num{
    font-family:var(--font-head);font-size:3rem;font-weight:700;color:transparent;
    -webkit-text-stroke:1.4px var(--accent-2);
  }
  .case h3{font-size:1.3rem;color:var(--accent-1);margin-bottom:8px;}
  .case p{color:var(--accent-4);margin:0 0 16px;max-width:60ch;}
  .case-stats{display:flex;gap:28px;flex-wrap:wrap;}
  .case-stats div{font-family:var(--font-mono);font-size:.82rem;color:var(--accent-2);}
  .case-stats strong{display:block;font-family:var(--font-head);font-size:1.3rem;color:var(--contrast);font-weight:600;}
  .case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .case-tags span{
    font-family:var(--font-mono);font-size:.72rem;color:var(--accent-1);background:var(--accent-5);
    border:1px solid var(--line-strong);padding:4px 10px;border-radius:20px;
  }

  /* ---------- SERVICES ---------- */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
  .card{
    padding:38px 32px;background:var(--base);
    transition:background .3s ease;
    position:relative;
  }
  .card:hover{background:var(--accent-5);}
  .card:hover .icon path,.card:hover .icon circle,.card:hover .icon rect{stroke-dashoffset:0;}
  .card .icon{width:40px;height:40px;margin-bottom:22px;color:var(--accent-1);}
  .card .icon path,.card .icon circle,.card .icon rect{
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1s var(--ease);
  }
  .card .num{
    font-family:var(--font-mono);font-size:.78rem;color:var(--accent-3);letter-spacing:.06em;display:block;margin-bottom:10px;
  }
  .card h3{font-size:1.15rem;color:var(--accent-1);}
  .card p{color:var(--accent-4);font-size:.98rem;margin:0 0 14px;}
  .card a.card-link{font-size:.86rem;font-weight:600;color:var(--accent-3);text-decoration:none;}
  .card a.card-link:hover{text-decoration:underline;}
  .services-cta{text-align:center;margin-top:52px;}

  /* ---------- WHY US ---------- */
  .why-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:start;}
  @media(min-width:900px){.why-grid{grid-template-columns:0.9fr 1.1fr;}}
  .stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-strong);margin-top:32px;border:1px solid var(--line-strong);}
  .stat{padding:22px 20px 22px 0;background:var(--accent-5);}
  .stat:first-child{padding-left:0;}
  .stat .stat-num{font-family:var(--font-head);font-size:2.8rem;font-weight:700;color:var(--accent-1);display:flex;align-items:baseline;gap:2px;}
  .stat .stat-num .suffix{font-size:1.4rem;color:var(--accent-3);}
  .stat .stat-label{font-size:.88rem;color:var(--accent-4);margin-top:4px;}
  .why-list{list-style:none;margin:0;padding:0;}
  .why-list li{
    position:relative;padding:18px 0 18px 32px;border-bottom:1px solid var(--line);color:var(--contrast);
  }
  .why-list li:first-child{padding-top:0;}
  .why-list li:last-child{border-bottom:none;}
  .why-list li::before{
    content:"";position:absolute;left:0;top:27px;width:16px;height:2px;background:var(--accent-3);
  }

  /* ---------- PROCESS TIMELINE ---------- */
  .timeline{position:relative;max-width:960px;margin:0 auto;}
  .timeline-track{position:absolute;left:24px;top:10px;bottom:10px;width:2px;background:var(--line);}
  @media(min-width:760px){.timeline-track{left:50%;transform:translateX(-1px);}}
  .timeline-track-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent-3);transform-origin:top;}
  .t-step{position:relative;padding:0 0 64px 64px;}
  .t-step:last-child{padding-bottom:0;}
  @media(min-width:760px){
    .t-step{width:50%;padding:0 0 96px 0;}
    .t-step:nth-child(odd){padding-right:60px;text-align:right;}
    .t-step:nth-child(even){margin-left:50%;padding-left:60px;}
  }
  .t-num{
    position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
    background:var(--base);border:2px solid var(--accent-3);color:var(--accent-1);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;z-index:2;
  }
  @media(min-width:760px){
    .t-step:nth-child(odd) .t-num{right:-24px;left:auto;}
    .t-step:nth-child(even) .t-num{left:-24px;}
  }
  .t-step h4{color:var(--accent-1);font-size:1.15rem;}
  .t-step p{color:var(--accent-4);margin:0 0 10px;}
  .t-step ul{color:var(--accent-4);margin:0;padding-left:1.2em;text-align:left;}
  .t-step:nth-child(odd) ul{padding-left:0;padding-right:1.2em;}
  @media(max-width:760px){.t-step:nth-child(odd) ul{padding-left:1.2em;padding-right:0;}}

  /* ---------- CTA BAND ---------- */
  .cta-band{text-align:center;}
  .cta-band .wrap{max-width:700px;}
  .cta-band h2{font-size:clamp(1.7rem,3.6vw,2.3rem);}
  .cta-band p.lead2{color:#b9c6c6;margin-bottom:34px;}
  .cta-band .btn-primary:hover{box-shadow:0 10px 28px rgba(176,101,31,0.45);}
  .cta-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
  .cta-direct{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;font-family:var(--font-mono);font-size:.86rem;color:#9fb0b0;}
  .cta-direct a{color:#dfe6e6;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.25);}
  .cta-direct a:hover{border-color:var(--accent-3);color:#fff;}

  /* ---------- TEAM ---------- */
  .team-card{
    display:grid;grid-template-columns:1fr;gap:20px;background:var(--base);border:1px solid var(--line);
    padding:40px;margin-bottom:2px;
  }
  @media(min-width:760px){.team-card{grid-template-columns:200px 1fr;}}
  .team-avatar{
    width:96px;height:96px;border-radius:50%;background:var(--accent-5);border:2px solid var(--accent-3);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.8rem;font-weight:700;color:var(--accent-1);
  }
  .team-card h3{color:var(--accent-1);font-size:1.3rem;margin-bottom:2px;}
  .team-role{font-family:var(--font-mono);font-size:.82rem;color:var(--accent-3);margin-bottom:16px;display:block;}
  .team-card p{color:var(--contrast);}
  .cert-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
  .cert-tags span{
    font-family:var(--font-mono);font-size:.72rem;color:var(--accent-1);background:var(--accent-5);
    border:1px solid var(--line-strong);padding:4px 10px;border-radius:20px;
  }

  /* ---------- CONTACT FORM ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr;gap:60px;}
  @media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;}}
  .contact-info dl{margin:24px 0 0;}
  .contact-info dt{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-4);margin-top:20px;}
  .contact-info dd{margin:4px 0 0;font-size:1.1rem;color:var(--contrast);}
  .contact-info dd a{text-decoration:none;color:var(--accent-1);}
  .contact-info dd a:hover{color:var(--accent-3);}
  .hs-form-wrap{background:var(--accent-5);border:1px solid var(--line-strong);border-radius:6px;padding:36px;}
  .hs-form-wrap .hs-placeholder-note{
    font-family:var(--font-mono);font-size:.72rem;color:var(--accent-4);border:1px dashed var(--line-strong);
    padding:10px 14px;border-radius:4px;margin-bottom:20px;
  }
  .fj-form label{display:block;font-size:.86rem;font-weight:600;color:var(--contrast);margin:0 0 6px;}
  .fj-form .field{margin-bottom:18px;}
  .fj-form input,.fj-form select,.fj-form textarea{
    width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:4px;
    font-family:var(--font-body);font-size:.95rem;background:var(--base);color:var(--contrast);
  }
  .fj-form input:focus,.fj-form select:focus,.fj-form textarea:focus{outline:2px solid var(--accent-2);outline-offset:1px;}
  .fj-form textarea{resize:vertical;min-height:110px;}
  .fj-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media(max-width:520px){.fj-form .field-row{grid-template-columns:1fr;}}
  .fj-form .consent{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--accent-4);margin-bottom:20px;}
  .fj-form .consent input{width:auto;margin-top:3px;}
  .fj-form button{width:100%;justify-content:center;}
  .fj-form-status{margin-top:14px;font-size:.88rem;font-family:var(--font-mono);}

  /* ---------- BLOG ---------- */
  .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
  .post-card{background:var(--base);padding:34px 30px;transition:background .3s ease;}
  .post-card:hover{background:var(--accent-5);}
  .post-card .post-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--accent-4);margin-bottom:14px;}
  .post-card h3{font-size:1.15rem;color:var(--accent-1);margin-bottom:10px;}
  .post-card h3 a{text-decoration:none;color:inherit;}
  .post-card h3 a:hover{color:var(--accent-3);}
  .post-card p{color:var(--accent-4);font-size:.95rem;margin:0 0 16px;}
  .post-card .card-link{font-size:.86rem;font-weight:600;color:var(--accent-3);text-decoration:none;}
  .post-tag{
    font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-2);
  }
  .article-hero{padding:170px 40px 60px;text-align:center;}
  .article-meta{font-family:var(--font-mono);font-size:.78rem;color:var(--accent-4);margin-top:16px;}
  .faq-block{border-top:1px solid var(--line);padding:22px 0;}
  .faq-block h3{font-size:1.05rem;color:var(--accent-1);margin-bottom:8px;}
  .faq-block p{color:var(--contrast);margin:0;}

  /* ---------- FOOTER ---------- */
  footer.site{background:var(--accent-5);padding:60px 0 32px;border-top:1px solid var(--line);}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:40px;}
  @media(min-width:760px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;}}
  footer.site h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-4);font-weight:600;}
  footer.site a{text-decoration:none;color:var(--contrast);}
  footer.site a:hover{color:var(--accent-3);}
  footer.site .foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
  .foot-bottom{border-top:1px solid var(--line);padding-top:22px;font-size:.82rem;color:var(--accent-4);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-family:var(--font-mono);}

  @media(max-width:640px){
    section{padding:80px 0;}
    .diagram-pin{height:240vh;}
    .wrap{padding:0 24px;}
  }


/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-toggle{display:none;position:relative;width:32px;height:32px;border:none;background:none;cursor:pointer;padding:0;margin-left:12px;z-index:70;}
.nav-toggle span{position:absolute;left:4px;right:4px;height:2px;background:var(--contrast);transition:transform .25s var(--ease), opacity .25s var(--ease);}
.nav-toggle span:nth-child(1){top:10px;}
.nav-toggle span:nth-child(2){top:16px;}
.nav-toggle span:nth-child(3){top:22px;}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media(max-width:900px){
	.nav-toggle{display:inline-block;}
	nav.main{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--base);padding:24px 40px;overflow-y:auto;z-index:59;}
	nav.main.open{display:block;}
	nav.main ul{flex-direction:column;gap:6px;}
	nav.main a{display:block;padding:14px 0;font-size:1.05rem;}
	body.nav-open{overflow:hidden;}
}