:root{
    --paper:#EEF1F2;
    --paper-dim:#E4E8EA;
    --ink:#161B22;
    --panel:#1D2530;
    --panel-2:#242E3B;
    --amber:#FA4802;
    --amber-dim:#c93a02;
    --steel:#01857C;
    --alert:#c93a02;
    --line: rgba(22,27,34,0.12);
    --line-dark: rgba(238,241,242,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  h1,h2,h3,.display{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.08;
    color:var(--ink);
  }
  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber-dim);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    font-weight:600;
  }
  .eyebrow::before{
    content:"";
    width:9px; height:9px; border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 3px rgba(250,72,2,0.25);
    flex:none;
  }
  .led{
    width:7px; height:7px; border-radius:50%;
    background:var(--amber);
    display:inline-block;
    box-shadow:0 0 0 3px rgba(250,72,2,0.18);
    flex:none;
  }

  section{padding:88px 0;}
  @media (max-width:720px){ section{padding:56px 0;} }

  .btn{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 26px;
    border-radius:3px;
    text-decoration:none;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--amber); color:white; }
  .btn-primary:hover{ box-shadow:0 6px 18px rgba(250,72,2,0.30); }
  .btn-ghost{ border-color:var(--line-dark); color:pink; }
  .btn-ghost.on-dark{ border-color:rgba(238,241,242,0.35); color:var(--paper); }
  .btn-ghost.on-light{ border-color:rgba(22,27,34,0.25); color:var(--ink); }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(238,241,242,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
  }
  .logo{
    display:flex; align-items:center;
  }
  .logo img{
    height:58px; width:auto; display:block;
  }
  footer .logo{
    font-family:'Oswald',sans-serif;
    font-size:17px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.03em;
    gap:10px;
  }
  footer .logo .mark{
    width:11px;height:11px;background:var(--amber);
    clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    flex:none;
  }
  .nav-links{ display:none; align-items:center; gap:28px; }
  .nav-links a{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
    font-weight:600; text-decoration:none; color:#454b53;
    transition:color .15s ease;
  }
  .nav-links a:hover{ color:var(--amber-dim); }
  @media (min-width:900px){ .nav-links{ display:flex; } }

  .nav-cta{display:flex; align-items:center; gap:14px;}
  .nav-phone{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600; font-size:13.5px; letter-spacing:0.03em;
    text-decoration:none;
    color:var(--ink);
    display:none;
  }
  .nav-phone:hover{ color:var(--amber-dim); }
  @media (min-width:640px){ .nav-phone{display:inline;} }

  /* ---------- HERO ---------- */
  .hero{
    padding:76px 0 96px;
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

  .hero h1{
    font-size:clamp(34px, 5.4vw, 58px);
    margin-bottom:22px;
  }
  .hero h1 span{ color:var(--amber-dim); }
  .hero p.lead{
    font-size:17.5px;
    max-width:52ch;
    color:#3a4048;
    margin-bottom:30px;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
  .hero-note{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.05em;
    color:#5b6169;
    text-transform:uppercase;
  }

  /* Signature element: generator control panel */
  .panel{
    background:var(--panel);
    border-radius:6px;
    padding:26px 24px 22px;
    box-shadow:0 30px 60px -20px rgba(22,27,34,0.45);
    color:var(--paper);
    position:relative;
  }
  .panel::before{
    content:"";
    position:absolute; inset:8px;
    border:1px solid var(--line-dark);
    border-radius:3px;
    pointer-events:none;
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#8a93a0;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-dark);
  }
  .panel-head b{ color:var(--paper); }
  .panel-rows{ display:flex; flex-direction:column; gap:0; }
  .panel-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 4px;
    border-bottom:1px solid var(--line-dark);
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    letter-spacing:0.04em;
  }
  .panel-row:last-child{ border-bottom:none; }
  .panel-row .label{ display:flex; align-items:center; gap:10px; color:#c7ccd3; }
  .dot{
    width:9px; height:9px; border-radius:50%;
    background:#4c5763;
    flex:none;
    transition:background .3s ease, box-shadow .3s ease;
  }
  .dot.ok{ background:var(--amber); box-shadow:0 0 10px rgba(250,72,2,0.65); animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.55; }
  }
  .panel-status{
    margin-top:18px;
    display:flex; align-items:center; justify-content:space-between;
    background:var(--panel-2);
    border-radius:3px;
    padding:14px 16px;
  }
  .panel-status .txt{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:0.04em;
    color:var(--amber);
  }
  .panel-status .sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:#8a93a0;
  }
  @media (prefers-reduced-motion: reduce){
    .dot.ok{ animation:none; }
  }

  /* ---------- HERO PHOTO ---------- */
  .hero-photo{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(22,27,34,0.45);
    line-height:0;
  }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
  .hero-photo-badge{
    position:absolute; left:16px; bottom:16px;
    background:rgba(22,27,34,0.88);
    backdrop-filter:blur(4px);
    border-radius:4px;
    padding:12px 16px;
    display:flex; flex-direction:column; gap:2px;
  }
  .hero-photo-badge .txt{
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.04em;
    font-size:14px; color:var(--amber);
  }
  .hero-photo-badge .sub{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#c7ccd3;
  }

  /* ---------- BRAND BANNER ---------- */
  .brand-banner{ line-height:0; }
  .brand-banner img{ width:100%; height:auto; display:block; }

  /* ---------- SECTION HEADS ---------- */
  .section-head{ max-width:64ch; margin-bottom:44px; }
  .section-head h2{ font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; }
  .section-head p{ color:#454b53; font-size:16px; }

  .section-alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .section-dark{ background:var(--panel); color:var(--paper); }
  .section-dark .section-head p{ color:#aab0b9; }
  .section-dark h2, .section-dark h3{ color:var(--paper); }

  /* ---------- WHY GRID ---------- */
  .why-layout{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:28px;
    align-items:stretch;
  }
  @media (max-width:860px){ .why-layout{ grid-template-columns:1fr; } }
  .why-photo{
    border-radius:6px; overflow:hidden; line-height:0;
    box-shadow:0 20px 40px -18px rgba(22,27,34,0.35);
  }
  .why-photo img{ width:100%; height:100%; object-fit:cover; }
  .why-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    align-content:start;
  }
  @media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }
  .why-item{
    background:var(--paper);
    padding:26px 22px;
    display:flex; gap:12px; align-items:flex-start;
  }
  .why-item p{ font-size:14.5px; font-weight:600; }

  /* ---------- SERVICES GRID ---------- */
  .svc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }
  .svc-card{
    border:1px solid var(--line);
    background:#fff;
    padding:22px 20px;
    border-radius:4px;
    border-left:3px solid var(--amber);
  }
  .svc-card h3{
    font-size:15.5px; text-transform:none; font-family:'Inter',sans-serif; font-weight:700;
    margin-bottom:6px;
  }
  .svc-card p{ font-size:14px; color:#565c64; }

  /* ---------- PROBLEM TAGS ---------- */
  .tag-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:9px 14px;
    border:1px solid var(--line-dark);
    border-radius:20px;
    color:var(--paper);
    background:rgba(255,255,255,0.03);
  }

  /* ---------- FUEL COMPARISON ---------- */
  .fuel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:760px){ .fuel-grid{grid-template-columns:1fr;} }
  .fuel-card{
    background:#fff; border:1px solid var(--line); border-radius:6px; padding:30px 28px;
  }
  .fuel-card .tagline{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber-dim);
    letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; display:block; font-weight:600;
  }
  .fuel-card h3{ font-size:24px; margin-bottom:14px; }
  .fuel-card ul{ list-style:none; margin-top:16px; }
  .fuel-card li{
    padding:9px 0; border-top:1px solid var(--line);
    font-size:14.5px; display:flex; gap:10px; align-items:flex-start; color:#33383e;
  }
  .fuel-card li:first-child{ border-top:none; }
  .fuel-card li::before{
    content:"—"; color:var(--amber-dim); font-weight:600; flex:none;
  }

  /* ---------- PROCESS ---------- */
  .process{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    counter-reset:step;
    border-top:1px solid var(--line-dark);
  }
  @media (max-width:900px){ .process{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .process{grid-template-columns:1fr;} }
  .step{
    padding:26px 20px 26px 0;
    border-right:1px solid var(--line-dark);
    counter-increment:step;
    position:relative;
  }
  .process .step:last-child{ border-right:none; }
  .step .num{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; color:var(--amber);
    letter-spacing:0.08em;
    margin-bottom:14px; display:block;
  }
  .step .num::before{ content: "STEP " counter(step) " / 05"; }
  .step h3{ font-size:16px; text-transform:none; font-family:'Inter',sans-serif; font-weight:700; color:var(--paper); margin-bottom:8px; }
  .step p{ font-size:13.5px; color:#a7adb5; }

  /* ---------- AREAS ---------- */
  .area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:820px){ .area-grid{grid-template-columns:1fr;} }
  .area-card{
    background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 24px;
  }
  .area-card .eyebrow{ margin-bottom:10px; }
  .area-card h3{ font-size:21px; margin-bottom:12px; }
  .area-card p{ font-size:14px; color:#565c64; }

  /* ---------- WHO WE HELP ---------- */
  .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{
    font-size:13.5px; font-weight:600;
    padding:10px 16px; border-radius:4px;
    background:var(--paper-dim); border:1px solid var(--line);
  }

  /* ---------- EMERGENCY BANNER ---------- */
  .banner{
    background:linear-gradient(90deg, var(--panel), #232c38);
    color:var(--paper);
    border-radius:8px;
    padding:40px;
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
    border-left:4px solid var(--alert);
  }
  .banner h3{ font-size:24px; color:var(--paper); margin-bottom:8px; }
  .banner p{ color:#aab0b9; font-size:14.5px; max-width:48ch; }

  /* ---------- FAQ ---------- */
  .faq{ max-width:820px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:22px 4px;
    display:flex; justify-content:space-between; align-items:center;
    font-weight:700; font-size:15.5px;
    gap:20px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    font-family:'IBM Plex Mono',monospace;
    font-size:20px; color:var(--amber-dim); flex:none;
    transition:transform .2s ease;
  }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item .a{ padding:0 4px 22px; color:#454b53; font-size:14.5px; max-width:65ch; }

  /* ---------- CONTACT CARDS ---------- */
  .contact-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:36px;
  }
  @media (max-width:760px){ .contact-cards{ grid-template-columns:1fr; } }
  .contact-card{
    display:flex; align-items:center; gap:14px;
    background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:18px 20px; text-decoration:none; color:var(--ink);
    transition:border-color .15s ease, transform .15s ease;
  }
  .contact-card:hover{ border-color:var(--amber); transform:translateY(-1px); }
  .contact-icon{
    width:42px; height:42px; border-radius:50%;
    background:var(--panel); color:var(--amber);
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .contact-label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
    text-transform:uppercase; letter-spacing:0.06em; color:#7a808a; margin-bottom:2px;
  }
  .contact-value{ display:block; font-weight:700; font-size:15px; }

  /* ---------- FORM ---------- */
  .quote-wrap{
    background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:36px;
  }
  @media (max-width:760px){ .quote-wrap{ grid-template-columns:1fr; padding:26px; } }
  .quote-form{ display:grid; gap:14px; }
  .quote-form label{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em;
    text-transform:uppercase; color:#5b6169; margin-bottom:6px; display:block;
  }
  .quote-form input, .quote-form select, .quote-form textarea{
    width:100%; padding:12px 13px; border:1px solid var(--line-dark); border-radius:3px;
    background:var(--paper); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
  }
  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
    outline:2px solid var(--amber); outline-offset:1px; background:#fff;
  }
  .quote-side h3{ font-size:22px; margin-bottom:12px; }
  .quote-side p{ font-size:14.5px; color:#454b53; margin-bottom:20px; }
  .quote-side .badges{ display:flex; flex-direction:column; gap:12px; }
  .quote-side .badges div{ display:flex; gap:10px; align-items:center; font-size:13.5px; font-weight:600; }

  /* ---------- FINAL CTA ---------- */
  .final-cta{ text-align:center; }
  .final-cta h2{ font-size:clamp(28px,4.4vw,44px); margin-bottom:16px; }
  .final-cta p{ color:#454b53; max-width:56ch; margin:0 auto 30px; }
  .final-cta .hero-actions{ justify-content:center; }

  footer{
    background:var(--panel); color:#8a93a0; padding:40px 0; font-size:13px;
  }
  .foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
  footer a{ text-decoration:none; }
  footer .logo{ color:var(--paper); }

  /* ---------- STICKY CALL / WHATSAPP BAR ---------- */
  body{ padding-bottom:64px; }
  .sticky-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex;
    box-shadow:0 -8px 24px rgba(22,27,34,0.18);
  }
  .sticky-btn{
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:13px 10px;
    text-decoration:none;
    font-family:'IBM Plex Mono',monospace;
    font-weight:600; font-size:13.5px; letter-spacing:0.03em; text-transform:uppercase;
  }
  .sticky-btn span{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
  .sticky-btn small{
    font-family:'Inter',sans-serif; font-weight:500; text-transform:none;
    letter-spacing:0; font-size:11px; opacity:0.85;
  }
  .sticky-call{ background:var(--panel); color:var(--paper); }
  .sticky-whatsapp{ background:#25D366; color:#0b3d19; }
  @media (min-width:640px){
    body{ padding-bottom:0; }
    .sticky-bar{ display:none; }
  }

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

  /* ---------- BREADCRUMB ---------- */
  .breadcrumb{
    padding:14px 0;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
    color:#6b717a;
    border-bottom:1px solid var(--line);
  }
  .breadcrumb a{ text-decoration:none; color:#6b717a; }
  .breadcrumb a:hover{ color:var(--amber-dim); }
  .breadcrumb .sep{ margin:0 8px; opacity:0.5; }
  .breadcrumb .current{ color:var(--ink); font-weight:600; }

  /* ---------- LOCAL INTRO PROSE ---------- */
  .prose{ max-width:74ch; }
  .prose p{ font-size:15.5px; color:#33383e; margin-bottom:16px; }
  .prose p:last-child{ margin-bottom:0; }

  /* ---------- NEARBY AREAS ---------- */
  .nearby-links{ display:flex; flex-wrap:wrap; gap:10px; }
  .nearby-links a{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.03em;
    text-transform:uppercase; text-decoration:none;
    padding:10px 16px; border:1px solid var(--line); border-radius:20px;
    color:var(--ink); transition:border-color .15s ease, color .15s ease;
  }
  .nearby-links a:hover{ border-color:var(--amber); color:var(--amber-dim); }

  /* ---------- HERO BADGES ---------- */
  .hero-badges{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:26px; }
  .hero-badges span{
    display:flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.03em;
    text-transform:uppercase; color:#454b53; font-weight:600;
  }

  /* ---------- AREA CARD AS LINK ---------- */
  .area-card{
    background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px 24px;
    text-decoration:none; display:block;
    transition:border-color .15s ease, transform .15s ease;
  }
  .area-card:hover{ border-color:var(--amber); transform:translateY(-1px); }
  .area-card .view-link{
    display:inline-block; margin-top:14px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em;
    text-transform:uppercase; color:var(--amber-dim); font-weight:600;
  }
  .area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:980px){ .area-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .area-grid{grid-template-columns:1fr;} }

  /* ---------- HAMBURGER / MOBILE MENU ---------- */
  .hamburger-btn{
    display:none; align-items:center; justify-content:center;
    width:38px; height:38px; border:1.5px solid var(--line-dark);
    border-radius:3px; background:none; cursor:pointer; padding:0; flex:none;
  }
  .hamburger-btn svg{ display:block; }
  .hamburger-btn .icon-close{ display:none; }
  .hamburger-btn.open .icon-open{ display:none; }
  .hamburger-btn.open .icon-close{ display:block; }
  @media (max-width:900px){
    .nav-links{ display:none !important; }
    .hamburger-btn{ display:flex; }
  }
  .mobile-menu{
    display:none;
    flex-direction:column;
    background:#fff;
    border-top:1px solid var(--line);
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{
    padding:15px 24px;
    border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace;
    font-size:13px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
    text-decoration:none; color:var(--ink);
  }
  .mobile-menu a:hover{ color:var(--amber-dim); }
  @media (min-width:900px){ .mobile-menu{ display:none !important; } }

  /* ---------- FOOTER NAV ---------- */
  .foot-nav{
    display:flex; flex-wrap:wrap; gap:18px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  }
  .foot-nav a{ color:#aab0b9; text-decoration:none; }
  .foot-nav a:hover{ color:var(--amber); }

/* ===== POWER MECHANICS SITE-WIDE DROPDOWN NAVIGATION ===== */
.nav-links{align-items:center;}
.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
}
.nav-dropdown > .nav-drop-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  text-decoration:none;
}
.nav-dropdown > .nav-drop-trigger::after{
  content:"▾";
  font-size:11px;
  line-height:1;
  opacity:.75;
}

/* The submenu touches the trigger: no hover dead-zone. */
.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:245px;
  max-width:min(340px, calc(100vw - 24px));
  max-height:calc(100vh - 90px);
  overflow-y:auto;
  padding:10px;
  background:var(--panel);
  border:1px solid var(--line-dark);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  border-radius:0 0 8px 8px;
  display:none;
  z-index:10000;
}

/* Invisible bridge also keeps the menu open during pointer travel. */
.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  display:block;
}

.nav-dropdown-menu a{
  display:block;
  padding:9px 12px;
  border-radius:5px;
  color:var(--paper);
  text-decoration:none;
  font-size:13px;
  line-height:1.3;
  white-space:normal;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus{
  background:var(--panel-2);
  color:#fff;
}
.nav-dropdown-menu .drop-hub{
  font-weight:800;
  color:var(--amber);
  border-bottom:1px solid var(--line-dark);
  margin-bottom:4px;
}

/* Keep the last dropdown inside the viewport on narrower desktop screens. */
.nav-dropdown:last-of-type .nav-dropdown-menu{
  left:auto;
  right:0;
  transform:none;
}

.mobile-menu .mobile-group{
  padding:10px 24px 4px;
  color:var(--amber);
  font:600 12px 'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.mobile-menu .mobile-group-link{padding-left:38px;}

@media (max-width:900px){
  .nav-links{display:none !important;}
  .mobile-menu .mobile-group{display:block;}
  .mobile-menu a.mobile-group-link{display:block;}
}
@media (min-width:901px){
  .mobile-menu{display:none !important;}
}

/* ===== MOBILE MENU — STABLE TOUCH/SCROLL VERSION ===== */
@media (max-width:900px){
  header#top{
    position:sticky;
    top:0;
    z-index:1000;
  }

  header#top > .nav{
    position:relative;
    z-index:1001;
  }

  .mobile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    display:none;
    flex-direction:column;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 16px 30px rgba(22,27,34,.18);
    z-index:1002;
    padding-bottom:12px;
  }

  .mobile-menu.open{
    display:flex;
  }

  .mobile-menu a,
  .mobile-menu .mobile-group{
    flex:none;
  }

  .mobile-menu a{
    min-height:48px;
    box-sizing:border-box;
  }

  .mobile-menu .mobile-group{
    padding-top:12px;
    padding-bottom:7px;
    background:#f5f6f7;
  }

  /* Make the entire link area easy to tap. */
  .mobile-menu a:active{
    background:var(--paper-dim);
  }
}

/* Prevent desktop dropdown rules from affecting touch devices. */
@media (max-width:900px){
  .nav-dropdown-menu{
    display:none !important;
  }
}


/* ============================================================
   POWER MECHANICS — MOBILE NAVIGATION TOUCH FIX
   The mobile dropdown is a fixed-height scroll container.
   Prevent the document behind it from participating in touch
   scrolling while the navigation is open.
   ============================================================ */

@media (max-width: 899px) {

  html, body {
    overflow-x: hidden;
  }

  .site-header,
  header {
    overflow: visible !important;
  }

  /* Keep the mobile navigation above all page content. */
  .mobile-menu,
  .mobile-nav,
  .nav-menu,
  .main-nav,
  .menu-panel {
    touch-action: pan-y;
  }

  /* Common mobile dropdown/list containers. */
  .mobile-menu .dropdown-menu,
  .mobile-menu .submenu,
  .mobile-nav .dropdown-menu,
  .mobile-nav .submenu,
  .nav-menu .dropdown-menu,
  .nav-menu .submenu {
    max-height: 60vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  /* Do not let the page itself capture vertical finger movement
     while the mobile menu/dropdown is being interacted with. */
  .mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  body.mobile-menu-open .mobile-menu,
  body.mobile-menu-open .mobile-nav {
    touch-action: pan-y !important;
  }

  /* If the existing mobile menu uses a generic UL as its scroll
     area, make that UL the actual touch-scrolling surface. */
  .mobile-menu > ul,
  .mobile-nav > ul,
  .mobile-menu ul.mobile-links,
  .mobile-nav ul.mobile-links {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  /* Nested lists should not create a second competing scroll area. */
  .mobile-menu ul ul,
  .mobile-nav ul ul {
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: auto !important;
  }
}


/* Power Mechanics mobile: JS-controlled accordion dropdowns */
@media (max-width: 899px) {
  nav li > ul[hidden],
  nav li > .dropdown-menu[hidden],
  nav li > .submenu[hidden],
  header li > ul[hidden],
  header li > .dropdown-menu[hidden],
  header li > .submenu[hidden] {
    display: none !important;
  }

  nav li.mobile-dropdown-open > ul,
  nav li.mobile-dropdown-open > .dropdown-menu,
  nav li.mobile-dropdown-open > .submenu,
  header li.mobile-dropdown-open > ul,
  header li.mobile-dropdown-open > .dropdown-menu,
  header li.mobile-dropdown-open > .submenu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    margin: 0 !important;
  }

  /* Never use the desktop hover dropdown mechanism on touch screens. */
  nav li:hover > ul,
  nav li:hover > .dropdown-menu,
  nav li:hover > .submenu,
  header li:hover > ul,
  header li:hover > .dropdown-menu,
  header li:hover > .submenu {
    /* JS controls visibility on mobile. */
  }

  nav .dropdown-toggle,
  nav .menu-item-has-children > a,
  nav .has-dropdown > a,
  nav [aria-haspopup="true"],
  header .dropdown-toggle,
  header .menu-item-has-children > a,
  header .has-dropdown > a,
  header [aria-haspopup="true"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}