/* CSS changed? Bump ?v=N on the matching <link> in index.html — these files are cached independently of the HTML. */

/* ============================================================
   layout.css — page chrome: nav, mobile menu, footer, contact form
   Loaded by: every page
   Depends on: base.css
   ============================================================ */

/* ---------- NAV ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  min-width:320px;
  /* --page-x mirrors the page's horizontal scroll so this fixed layer pans with the
     content below the 320px min-width, without needing its own scrollbar */
  translate:var(--page-x, 0px) 0;
  padding:0 28px;
  transition:background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:
    radial-gradient(ellipse 900px 300px at 85% 0%, rgba(var(--accent-red-rgb), 0.18), transparent 70%),
    radial-gradient(ellipse 800px 300px at 10% 100%, rgba(60,80,180,0.14), transparent 70%),
    rgba(8,12,24,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1240px;margin:0 auto;
  padding:24px 0;
  transition:padding .4s var(--ease-out);
}
#nav.scrolled .nav-inner{padding:14px 0;}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-0.01em;display:flex;align-items:center;flex-shrink:0;}
.logo img{height:24px;width:auto;display:block;}
.logo span{color:var(--red);}
.nav-links{display:flex;gap:clamp(22px,2.6vw,36px);align-items:center;margin-left:auto;margin-right:clamp(44px,4vw,64px);}
.nav-links a{font-size:0.92rem;color:var(--steel);transition:color .2s;}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  border:1px solid rgba(255,255,255,0.28);
  padding:9px 20px;border-radius:var(--radius-pill);
  font-size:0.85rem;
  white-space:nowrap;
  transition:background .3s ease, border-color .3s ease;
}
.nav-cta:hover{background:rgba(var(--accent-red-rgb), 0.12);border-color:var(--logo-red);}
.hamburger{display:none;}
@media (max-width:800px){
  .nav-links{display:none;}
  #nav{padding:0 24px;}
  .nav-inner{padding:20px 0;}
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    width:44px;height:44px;padding:0;border:none;background:none;cursor:pointer;
    order:2;margin-left:16px;position:relative;z-index:210;
  }
  .hamburger span{
    display:block;width:20px;height:1.5px;background:var(--white);
    transition:transform .3s var(--ease-out), opacity .2s ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg);}
  .hamburger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg);}
  .nav-cta{order:1;margin-left:auto;}
  .mobile-menu{
    position:fixed;inset:0;
    min-width:320px;
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;
    /* pan on `translate` so it tracks scrolling instantly; the open/close slide stays
       on `transform`, which is the only one of the two that is transitioned */
    translate:var(--page-x, 0px) 0;
    transform:translateY(-8px);
    background:rgba(8,12,24,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
    z-index:150;
    overflow-y:auto;
  }
  .mobile-menu.open{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear 0s;
  }
  /* the menu carries its own logo, sitting exactly where the header logo was */
  .mobile-menu-top{
    width:100%;max-width:1240px;margin:0 auto;
    padding:20px 24px;
    display:flex;align-items:center;
    transition:padding .4s var(--ease-out);
  }
  /* the header centres its logo against the 44px hamburger; mirror that height here */
  .mobile-menu-top .logo{min-height:44px;}
  #nav.scrolled ~ .mobile-menu .mobile-menu-top{padding-top:14px;padding-bottom:14px;}
  .mobile-menu-inner{display:flex;flex-direction:column;padding:24px 28px 0;}
  .mobile-menu-inner a{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 0;
    font-family:var(--font-display);font-size:1.4rem;font-weight:500;letter-spacing:-0.01em;
    color:var(--white);
    border-bottom:1px solid var(--line);
  }
  .mobile-menu-inner a::after{
    content:'\203A';color:var(--steel);font-size:1.3rem;line-height:1;
    opacity:0;transition:opacity .2s ease;
  }
  .mobile-menu-inner a:hover::after,
  .mobile-menu-inner a:focus-visible::after{opacity:1;}
  .mobile-menu-inner a:last-child{border-bottom:none;}
  /* auto top margin pins the call button to the bottom of the menu */
  .mobile-menu-cta{
    margin:auto 28px 40px;
    display:flex;align-items:center;justify-content:center;
    padding:16px 24px;border-radius:var(--radius-pill);
    background:var(--red);color:var(--white);
    font-family:var(--font-display);font-weight:600;font-size:0.95rem;
    transition:background .3s ease;
  }
  .mobile-menu-cta:hover{background:var(--logo-red);}
  /* while the menu is open the header itself is hidden; only the hamburger (now an X) remains */
  html.menu-open #nav{
    background:none;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  html.menu-open #nav .logo,
  html.menu-open #nav .nav-cta{opacity:0;visibility:hidden;}
}
@media (min-width:801px){.mobile-menu{display:none;}}
/* lock the page vertically while the menu is open, but keep horizontal panning
   available so the menu stays reachable below the 320px min-width */
html.menu-open{overflow-y:hidden;overflow-x:auto;}

@media (max-width:400px){
  #nav{padding:0 16px;}
  .logo img{height:20px;}
  .nav-cta{padding:8px 14px;font-size:0.78rem;}
  .hamburger{margin-left:10px;flex-shrink:0;}
  .mobile-menu-top{padding-left:16px;padding-right:16px;}
}
@media (max-width:340px){
  #nav{padding:0 12px;}
  .logo img{height:18px;}
  .nav-cta{padding:7px 11px;font-size:0.72rem;}
  .hamburger{margin-left:8px;}
  .mobile-menu-top{padding-left:12px;padding-right:12px;}
}

/* ---------- SITE FOOTER: contact list + build-request form ---------- */

.site-footer{
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 82% 8%, rgba(var(--accent-red-rgb), 0.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at 5% 95%, rgba(60,80,180,0.12), transparent 60%),
    var(--ink);
  padding:76px 0 0;
}
.site-footer h2{font-size:clamp(2.4rem,5.8vw,4.8rem);font-weight:700;letter-spacing:-0.035em;max-width:16ch;margin-bottom:0;}

/* ---------- site footer: contact list + build-request form ---------- */
.close-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start;
  padding:52px 0 39px;border-bottom:1px solid var(--line);
}
@media (max-width:900px){.close-grid{grid-template-columns:1fr;gap:48px;}}
@media (max-width:700px){
  .site-footer{padding-top:50px;}
  .site-footer h2{margin-bottom:0;}
  .close-grid{padding:36px 0 36px;gap:24px;}
  .footer-bottom{padding:18px 0;}
}

.footer-blurb{color:var(--steel);font-size:0.95rem;line-height:1.65;max-width:36ch;margin-bottom:32px;}
.footer-info-list{border-top:1px solid var(--line);margin-bottom:32px;}
.footer-info-block{padding:20px 0;border-bottom:1px solid var(--line);}
.footer-info-label{
  display:block;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--steel);margin-bottom:8px;
}
.footer-info-value{color:#ffffff;font-size:0.98rem;text-decoration:none;display:block;line-height:1.7;}
.footer-info-value + .footer-info-value{margin-top:8px;}
a.footer-info-value:hover{color:var(--logo-red);}

.build-form-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px;background:rgba(255,255,255,0.02);
}
@media (max-width:600px){.build-form-card{padding:26px;}}
.build-form-card .form-row{display:flex;gap:16px;margin-bottom:18px;}
.build-form-card .form-row .field{flex:1;min-width:0;}
.build-form-card .field{margin-bottom:18px;}
.build-form-card button[type="submit"]{margin-top:10px;}
.build-form-card label{display:block;font-size:0.85rem;font-weight:600;color:#dfe2ee;margin-bottom:8px;}
.build-form-card input, .build-form-card select, .build-form-card textarea{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:0.9rem;
  color:#ffffff;
  transition:border-color .2s ease,background .2s ease;
  appearance:none;-webkit-appearance:none;
}
.build-form-card select{cursor:pointer;}
.build-form-card select option{color:#0d1530;}
.build-form-card input::placeholder, .build-form-card textarea::placeholder{color:#6b7086;}
.build-form-card input:focus, .build-form-card select:focus, .build-form-card textarea:focus{
  outline:none;border-color:var(--logo-red);background:rgba(255,255,255,0.08);
}
.build-form-card textarea{resize:vertical;min-height:90px;font-family:inherit;}
@media (max-width:600px){.build-form-card .form-row{flex-direction:column;gap:0;}}
.field-website{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-status{margin-top:16px;font-size:0.9rem;line-height:1.5;text-align:center;font-weight:600;}
.form-status:empty{margin-top:0;}
.form-status.error{color:var(--logo-red);}
.form-status.success{color:var(--green);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:18px 0;font-size:0.85rem;color:var(--steel);
}
.footer-bottom-links span{margin:0 10px;color:var(--line-dark);}
.footer-bottom-links a{color:var(--steel);text-decoration:none;transition:color .2s ease;}
.footer-bottom-links a:hover{color:#ffffff;}