/* ==========================================================================
   AS E-TECH — layout.css
   Shell, header, mobile navigation, section scaffolding, grids, footer.
   ========================================================================== */

/* ---------- Shell -------------------------------------------------------- */
.shell {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow { max-width:var(--container-narrow); }

/* Page background: two very low-opacity light fields, no visual noise */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 84% -8%, rgba(255,138,24,.07), transparent 60%),
    radial-gradient(50rem 40rem at 6% 92%, rgba(10,95,196,.07), transparent 60%);
}

/* Blueprint hairline grid — the "engineering" texture, used deliberately */
.blueprint { position:relative; isolation:isolate; }
.blueprint::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 30%, #000 20%, transparent 78%);
          mask-image:radial-gradient(70% 60% at 70% 30%, #000 20%, transparent 78%);
}

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(9,12,16,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
          backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background:rgba(8,10,14,.93);
  border-bottom-color:var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.header-inner {
  min-height:var(--header-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s-5);
}

/* Brand: vector mark + live text wordmark (scales, themes, is selectable) */
.brand { display:inline-flex; align-items:center; gap:.7rem; }
.brand-mark {
  width:2.1rem;
  height:2.1rem;
  color:var(--fg);
  flex:none;
  transition:transform var(--dur) var(--ease-out);
}
.brand:hover .brand-mark { transform:rotate(-8deg) scale(1.06); }
.brand-word {
  font-size:1.16rem;
  font-weight:800;
  letter-spacing:-.02em;
  font-style:italic;
  white-space:nowrap;
}
.brand-word i { color:var(--accent); font-style:inherit; }
.brand-word span { font-weight:700; }

/* Desktop navigation */
.nav { display:flex; justify-content:center; align-items:center; gap:.15rem; }
.nav-link {
  position:relative;
  padding:.6rem .85rem;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--fg-muted);
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color:var(--fg); background:rgba(255,255,255,.05); }
.nav-link::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:.28rem;
  width:0;
  height:2px;
  border-radius:var(--r-pill);
  background:var(--accent);
  transform:translateX(-50%);
  transition:width var(--dur) var(--ease-out);
}
.nav-link[aria-current="page"],
.nav-link.is-active { color:var(--fg); }
.nav-link[aria-current="page"]::after,
.nav-link.is-active::after { width:1.1rem; }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:.6rem; }
.header-phone {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--fg);
  transition:color var(--dur-fast) var(--ease-out);
}
.header-phone:hover { color:var(--accent); }
.header-phone svg { width:1rem; height:1rem; color:var(--accent); flex:none; }

/* Mobile menu trigger */
.menu-toggle {
  display:none;
  width:2.75rem;
  height:2.75rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  place-items:center;
}
.menu-toggle-bars { display:block; width:1.1rem; height:.7rem; position:relative; }
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:var(--fg);
  transition:transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.menu-toggle-bars::before { top:0; }
.menu-toggle-bars::after { bottom:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform:translateY(.34rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after  { transform:translateY(-.34rem) rotate(-45deg); }

/* ---------- Mobile navigation panel -------------------------------------- */
.mobile-nav {
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  grid-template-rows:var(--header-h) 1fr;
  background:rgba(7,9,11,.98);
  -webkit-backdrop-filter:blur(24px);
          backdrop-filter:blur(24px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
}
.mobile-nav.is-open { opacity:1; visibility:visible; }
.mobile-nav__body {
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-block:var(--s-5) var(--s-7);
  display:flex;
  flex-direction:column;
  gap:var(--s-6);
}
.mobile-nav__links { display:flex; flex-direction:column; }
.mobile-nav__link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  min-height:4rem;
  padding-block:.5rem;
  border-bottom:1px solid var(--line);
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:-.02em;
  opacity:0;
  transform:translateY(.75rem);
}
.mobile-nav.is-open .mobile-nav__link {
  animation:nav-item-in .42s var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * 55ms + 60ms);
}
.mobile-nav__link .idx {
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--fg-dim);
  font-variant-numeric:tabular-nums;
}
.mobile-nav__link[aria-current="page"] { color:var(--accent); }
.mobile-nav__link[aria-current="page"] .idx { color:var(--accent); }

@keyframes nav-item-in { to { opacity:1; transform:none; } }

.mobile-nav__cta { display:grid; gap:.7rem; margin-top:auto; }
.mobile-nav__meta {
  display:grid;
  gap:.35rem;
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);
  color:var(--fg-muted);
}

body.nav-open { overflow:hidden; }

/* ---------- Sections ----------------------------------------------------- */
.section { padding-block:var(--section-y); position:relative; }
.section--tight { padding-block:var(--section-y-tight); }
.section--flush-top { padding-top:0; }
.section--flush-bottom { padding-bottom:0; }

/* Light surface variant */
.section--paper { background:var(--paper); color:var(--fg-ink); }
.section--paper .t-lead,
.section--paper .t-muted { color:var(--fg-ink-muted); }
.section--paper .t-dim { color:#7b848e; }

/* Slightly raised dark surface */
.section--sunk { background:var(--ink-900); }

/* Section head: eyebrow + title + lead, with optional trailing action */
.section-head {
  display:grid;
  gap:var(--s-4);
  margin-bottom:var(--s-7);
  max-width:var(--container);
}
.section-head__top {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-5);
}
.section-head__title { display:grid; gap:var(--s-4); max-width:38ch; }
.section-head__lead { max-width:52ch; }
.section-head--center {
  justify-items:center;
  text-align:center;
  margin-inline:auto;
}
.section-head--center .section-head__title { justify-items:center; }

/* ---------- Grids -------------------------------------------------------- */
.grid { display:grid; gap:var(--s-4); }
.grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid--gap-lg { gap:var(--s-5); }

.stack { display:grid; gap:var(--s-4); align-content:start; }
.stack--lg { gap:var(--s-5); }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }

/* Split layout: copy beside media */
.split {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.split--copy-first { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  background:var(--ink-950);
  border-top:1px solid var(--line);
  padding-block:var(--s-8) var(--s-5);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr .8fr 1fr 1.15fr;
  gap:var(--s-6) var(--s-5);
}
.footer-brand { display:grid; gap:var(--s-4); align-content:start; }
.footer-title {
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:var(--s-4);
}
.footer-links { display:grid; gap:.6rem; font-size:var(--fs-sm); }
.footer-links a { color:var(--fg-muted); width:fit-content; transition:color var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color:var(--accent); }
.footer-links span { color:var(--fg-muted); }

.footer-contact-link {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.footer-contact-link svg { width:.95rem; height:.95rem; color:var(--accent); flex:none; }

.footer-legal {
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s-4);
  font-size:var(--fs-xs);
  color:var(--fg-dim);
}
.footer-legal a { transition:color var(--dur-fast) var(--ease-out); }
.footer-legal a:hover { color:var(--accent); }
.footer-legal nav { display:flex; gap:var(--s-4); }