/* ============================================================
   Voltafy Solutions — shared stylesheet
   Used by: index.html, about.html, contact.html, careers.html
   ============================================================ */

:root{
  --ink:#0F1115;
  --ink-2:#161A22;
  --ink-3:#1D222C;
  --paper:#EDEFF2;
  --muted:#9AA1B2;
  /* Accents come from the logo's gradient. Cyan leads, magenta is the secondary
     highlight, and the violet is the gradient's own midpoint — used wherever a
     third tone is needed so it still reads as part of the same sweep.
     --accent-ink is the dark text colour that sits on top of accent fills. */
  --accent:#21D4FD;
  --accent-bright:#6FE4FF;
  --accent-2:#FF1FC8;
  --accent-3:#9079E2;
  --accent-ink:#04202B;
  --brand-gradient:linear-gradient(90deg, #21D4FD, #FF1FC8);
  --line: rgba(237,239,242,0.09);
  --radius: 14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:12.5px;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition: padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
/* The scrolled bar's blur lives on a pseudo-element: backdrop-filter on <header>
   itself would make it the containing block for the fixed mobile drawer inside
   it, clipping the open menu to the header bar. */
header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(15,17,21,0.88);
  backdrop-filter: blur(10px);
  opacity:0; transition:opacity .3s ease;
}
header.scrolled{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
header.scrolled::before{ opacity:1; }
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:0 32px;
}
.logo{ display:inline-flex; align-items:center; gap:9px; }
/* The artwork carries its own gradient, so it is sized rather than coloured.
   Width/height attributes on the <img> supply the ratio, keeping the header from
   reflowing while the SVG loads. The header pairs the emblem with live text; the
   footer uses the full lockup, which already contains its own wordmark. */
.logo-mark{ height:36px; width:auto; display:block; flex-shrink:0; }
.footer-brand .logo-mark{ height:112px; }
/* The wordmark picks up the emblem's cyan-to-magenta sweep by clipping a
   gradient to the glyphs. The nested span inherits the transparent fill, so one
   gradient runs continuously across both words. */
.logo-text{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:22px; letter-spacing:-0.01em;
  background:var(--brand-gradient);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.logo-sub{ font-weight:500; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .logo-text{ color:#21D4FD; -webkit-text-fill-color:currentColor; }
}
.nav-links{ display:flex; gap:38px; align-items:center; }
.nav-links a{
  font-size:14.5px; color:var(--muted); font-weight:500;
  transition:color .2s ease; position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:999px;
  font-size:14px; font-weight:600; font-family:'IBM Plex Sans',sans-serif;
  border:1px solid transparent; cursor:pointer; transition: all .22s ease;
  white-space:nowrap;
}
/* background-origin must be border-box here. .btn carries a 1px transparent
   border, and a gradient is sized against the padding box by default while being
   painted across the border box — so the ramp ends one pixel early on each side
   and the border ring gets the clamped end colours, leaving a hard cyan sliver on
   the left and magenta on the right. */
.btn-primary{ background:var(--brand-gradient); background-origin:border-box; color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--accent); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:110; }
.menu-toggle span{ width:22px; height:2px; background:var(--paper); }

@media(max-width:860px){
  /* A fixed width beats the old 30% inset: on a narrow phone that percentage
     left too little room for the longer service names, which then overflowed
     because dropdown links are nowrap. min() keeps it inside small viewports. */
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(330px, 86vw); background:var(--ink-2);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding:84px 32px 40px; gap:26px; transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--line);
    overscroll-behavior:contain;
  }
  /* Auto margins centre the links when they fit and top-align them when they
     don't, so the first item stays reachable when the drawer has to scroll. */
  .nav-links > :first-child{ margin-top:auto; }
  .nav-links > :last-child{ margin-bottom:auto; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:20px; color:var(--paper); }
  /* Logo and toggle stay above the open drawer — z-index needs a position to
     apply, without it the drawer paints over the button that closes it. */
  nav .logo{ position:relative; z-index:130; }
  nav .logo-mark{ height:31px; }
  .menu-toggle{ display:flex; position:relative; z-index:130; }
  .menu-toggle span{ transition:transform .3s ease, opacity .2s ease; }
  .nav-links.open ~ div .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-links.open ~ div .menu-toggle span:nth-child(2){ opacity:0; }
  .nav-links.open ~ div .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  nav .btn-primary{ display:none; }
  /* re-expose the quote CTA inside the open mobile drawer */
  .nav-links #mobileCta{
    display:inline-flex !important; width:100%; justify-content:center;
    margin-top:6px; font-size:15px; color:var(--accent-ink);
  }
}

/* ---------- Services dropdown ---------- */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-toggle{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-toggle .caret{ transition:transform .25s ease; margin-top:1px; }
.nav-item:hover > .nav-toggle{ color:var(--paper); }
.nav-item:hover .caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:100%; left:0; margin-top:14px;
  min-width:214px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding:8px; display:flex; flex-direction:column; gap:2px; z-index:120;
  box-shadow:0 20px 44px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-item:hover .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.dropdown a{
  font-size:14px; color:var(--muted); font-weight:500;
  padding:9px 14px; border-radius:8px; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.dropdown a:hover{ background:var(--ink-3); color:var(--paper); }

@media(max-width:860px){
  .nav-links{ overflow-y:auto; }
  .nav-item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav-toggle .caret{ display:none; }
  .dropdown{
    position:static; margin-top:14px; margin-left:4px; min-width:0;
    padding:0; gap:12px; background:transparent; border:none; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  .dropdown::before{ display:none; }
  /* The desktop dropdown is nowrap so items sit on one line in the popover; in
     the drawer they need to wrap or long names push past the panel edge. */
  .dropdown a{ font-size:16px; padding:0; white-space:normal; }
  .dropdown a:hover{ background:transparent; }
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--accent-bright); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--accent-bright); }

/* ---------- Page title banner (about / contact / careers) ---------- */
.title-banner{ padding:170px 0 60px; text-align:center; position:relative; overflow:hidden; }
.title-banner::before{
  content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(33,212,253,0.14), transparent 70%); pointer-events:none;
}
.title-banner h1{ font-size:clamp(34px,5vw,50px); }
.breadcrumb{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:16px; color:var(--muted); font-size:14px; }
.breadcrumb a:hover{ color:var(--accent-bright); }
.breadcrumb .sep{ color:var(--accent-bright); }
.breadcrumb .current{ color:var(--accent-bright); }

/* ============================================================
   Home (index.html)
   ============================================================ */
/* Hero */
.hero{ padding:168px 0 90px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-200px; right:-220px;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(33,212,253,0.16), transparent 70%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.hero h1{ font-size:clamp(38px, 5vw, 60px); max-width:640px; }
.hero h1 em{ font-style:normal; color:var(--accent-bright); }
.hero p.lead{ margin-top:22px; max-width:480px; color:var(--muted); font-size:17px; }
.hero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
/* align-self overrides the row's centring so the art sits near the top of the
   hero rather than floating against the middle of the text column. */
.circuit-art{
  position:relative; aspect-ratio:1/1; max-width:540px;
  justify-self:end; align-self:start; margin-top:-24px;
}
.stats-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:560px; margin-top:64px; gap:10px;
  border-top:1px solid var(--line); padding-top:30px;
}
.stat-num{ font-family:'Space Grotesk'; font-size:32px; font-weight:700; color:var(--paper); }
.stat-num span{ color:var(--accent-2); }
.stat-label{ color:var(--muted); font-size:13px; margin-top:4px; }
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .circuit-art{ justify-self:center; margin-top:20px; opacity:0.7; max-width:320px; }
}
/* Section headers */
.section-head{ max-width:620px; margin-bottom:56px; }
.section-head .eyebrow{ color:var(--accent-bright); }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-top:14px; }
.section-head p{ color:var(--muted); margin-top:16px; font-size:16px; }
/* About band (home) */
.about{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
.about-panel{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px; position:relative; overflow:hidden;
}
.trace-deco{ position:absolute; inset:0; opacity:0.5; }
.about-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px; }
.metric-num{ font-family:'Space Grotesk'; font-size:38px; font-weight:700; color:var(--accent-bright); }
.metric-label{ color:var(--muted); font-size:13.5px; margin-top:6px; }
.about-copy p{ color:var(--muted); font-size:16px; margin-bottom:18px; max-width:520px; }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
/* Why cards (home) */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition: border-color .25s ease, transform .25s ease;
}
.why-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.why-icon{
  width:42px; height:42px; border-radius:10px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(33,212,253,0.14); color:var(--accent-bright);
}
.why-card h3{ font-size:18px; margin-bottom:10px; }
.why-card p{ color:var(--muted); font-size:14.5px; }
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr; } }
/* Services (home) */
.services{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.service-card{
  background:var(--ink-2); padding:34px 30px; transition:background .25s ease;
  display:flex; flex-direction:column; gap:14px; min-height:190px;
}
.service-card:hover{ background:var(--ink-3); }
.service-num{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--accent-bright); }
.service-card h3{ font-size:19px; }
.service-card p{ color:var(--muted); font-size:14.5px; }
.service-card a.more{ margin-top:auto; font-size:13.5px; color:var(--accent-2); font-weight:500; }
@media(max-width:900px){ .services-grid{ grid-template-columns:1fr; } }
/* Two-column list for sets that read better enumerated than carded — a card grid
   leaves a dead cell whenever the count isn't a multiple of three. Grid rows
   stretch to equal height, so the rules stay aligned across both columns. */
.system-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:6px; }
.system-list li{ padding:20px 2px; border-bottom:1px solid var(--line); }
.system-list li:first-child, .system-list li:nth-child(2){ border-top:1px solid var(--line); }
.system-list h3{ font-size:16.5px; margin-bottom:7px; }
.system-list p{ color:var(--muted); font-size:14.5px; }
@media(max-width:760px){
  .system-list{ grid-template-columns:1fr; }
  .system-list li:nth-child(2){ border-top:none; }
}
/* Feature list (home) */
.feature-list{ display:flex; flex-direction:column; gap:0; margin-top:10px; }
.feature-row{
  display:grid; grid-template-columns:52px 1fr; gap:22px;
  padding:26px 0; border-top:1px solid var(--line);
}
.feature-list .feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:6px;
  box-shadow:0 0 0 4px rgba(33,212,253,0.16);
}
.feature-row h3{ font-size:19px; margin-bottom:8px; }
.feature-row p{ color:var(--muted); font-size:15px; max-width:560px; }

/* ============================================================
   About (about.html)
   ============================================================ */
.who{ padding:90px 0; }
.who-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.who-copy h2{ font-size:clamp(28px,3.4vw,38px); margin-bottom:20px; }
.who-copy p{ color:var(--muted); font-size:16px; margin-bottom:16px; max-width:520px; }
.who-art{ position:relative; aspect-ratio:1/1; max-width:420px; justify-self:end; }
@media(max-width:900px){ .who-grid{ grid-template-columns:1fr; } .who-art{ justify-self:center; opacity:0.7; max-width:300px; } }
.mv{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:90px 0; }
.mv-head{ max-width:680px; margin:0 auto 50px; text-align:center; }
.mv-head h2{ font-size:clamp(28px,3.4vw,38px); margin-top:14px; }
.mv-head p{ color:var(--muted); margin-top:16px; font-size:16px; }
.mv-cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:40px; }
.mv-card{ background:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:36px; position:relative; }
.mv-card .quote-mark{ font-family:'Space Grotesk'; font-size:48px; color:var(--accent); line-height:1; margin-bottom:10px; opacity:0.6; }
.mv-card h3{ font-size:20px; margin-bottom:14px; }
.mv-card p{ color:var(--muted); font-size:15.5px; font-style:italic; }
.mv-cta{ text-align:center; }
@media(max-width:800px){ .mv-cards{ grid-template-columns:1fr; } }

/* ============================================================
   Contact (contact.html)
   ============================================================ */
/* Matches .who on the about page, so the gap under the title banner is the
   same on every inner page. */
.info-cards{ padding:90px 0; }
.info-cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.info-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; text-align:center; transition: border-color .25s ease, transform .25s ease;
}
.info-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.info-card .info-icon{
  width:48px; height:48px; border-radius:12px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(33,212,253,0.14); color:var(--accent-bright);
}
.info-card h3{ font-size:15px; margin-bottom:8px; }
.info-card p, .info-card a{ color:var(--muted); font-size:15px; }
.info-card a:hover{ color:var(--accent-bright); }
@media(max-width:800px){ .info-cards-grid{ grid-template-columns:1fr; } }
.work{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:90px 0; }
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.work-head .eyebrow{ margin-bottom:14px; }
.work-head h2{ font-size:clamp(28px,3.4vw,38px); margin-bottom:18px; }
.work-head p{ color:var(--muted); font-size:16px; max-width:460px; margin-bottom:30px; }
.work-art{ max-width:340px; opacity:0.85; }
.form-card{ background:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:34px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .form-row{ grid-template-columns:1fr; } }
@media(max-width:900px){ .work-grid{ grid-template-columns:1fr; } .work-art{ display:none; } }
.map-section{ padding:90px 0; }
.map-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  filter: grayscale(1) invert(0.92) contrast(0.9);
  height:380px;
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ============================================================
   Careers (careers.html)
   ============================================================ */
.jobs-section{ padding:90px 0; }
.job-list{ display:flex; flex-direction:column; gap:18px; }
.job-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 32px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  transition:border-color .25s ease, transform .25s ease;
}
.job-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.job-title{ font-size:20px; margin-bottom:10px; }
.job-tags{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.job-tag{
  font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--accent-bright);
}
.job-desc{ color:var(--muted); font-size:15px; max-width:560px; }
@media(max-width:700px){ .job-card{ grid-template-columns:1fr; } .job-card .btn{ width:100%; justify-content:center; } }
.no-fit{
  margin-top:36px; background:var(--ink-2); border:1px dashed var(--line); border-radius:var(--radius);
  padding:34px; text-align:center;
}
.no-fit h4{ font-size:18px; margin-bottom:10px; }
.no-fit p{ color:var(--muted); font-size:15px; max-width:480px; margin:0 auto 20px; }
/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,7,9,0.75); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px; max-width:440px; width:100%; position:relative;
}
.modal-close{
  position:absolute; top:18px; right:18px; background:none; border:none; color:var(--muted);
  font-size:22px; cursor:pointer; line-height:1;
}
.modal-close:hover{ color:var(--paper); }
.modal h3{ font-size:21px; margin-bottom:6px; }
.modal .modal-role{ color:var(--accent-bright); font-size:13.5px; margin-bottom:24px; }
.file-field{
  border:1px dashed var(--line); border-radius:10px; padding:20px; text-align:center;
  color:var(--muted); font-size:13.5px; cursor:pointer; transition:border-color .2s ease;
}
.file-field:hover{ border-color:var(--accent); }
.file-field input[type="file"]{ display:none; }

/* ---------- Form fields (shared spacing; inputs scoped for correct contrast) ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:8px; }
/* Contact form sits on a dark form-card (--ink) → fields use --ink-2 to stand out */
.form-card .field input, .form-card .field select, .form-card .field textarea{
  width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; color:var(--paper); font-family:'IBM Plex Sans'; font-size:14.5px;
  transition:border-color .2s ease; outline:none;
}
.form-card .field input:focus, .form-card .field select:focus, .form-card .field textarea:focus{ border-color:var(--accent); }
.form-card .field textarea{ resize:vertical; min-height:110px; }
.form-card .field select{ appearance:none; cursor:pointer; }
/* Careers modal sits on --ink-2 → fields use --ink to stand out */
.modal .field input, .modal .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--paper); font-family:'IBM Plex Sans'; font-size:14.5px; outline:none;
  transition:border-color .2s ease;
}
.modal .field input:focus, .modal .field textarea:focus{ border-color:var(--accent); }

/* ============================================================
   Get a quote (quote.html)
   ============================================================ */
.quote-intro{ text-align:center; max-width:560px; margin:0 auto 40px; }
.quote-intro p{ color:var(--muted); font-size:16px; }
.quote-form-wrap{ max-width:660px; margin:0 auto; }

/* ============================================================
   Shared CTA / Footer / reveal
   ============================================================ */
/* No side margin of its own — the CTA now sits inside .wrap like every other
   section, so its edges line up with the content above it at every width. */
.cta{
  background: linear-gradient(135deg, var(--ink-3), var(--ink));
  border:1px solid var(--line); border-radius:20px;
  padding:64px 56px; text-align:center; position:relative; overflow:hidden;
}
.cta h2{ font-size:clamp(26px,3.6vw,38px); max-width:640px; margin:0 auto 18px; }
.cta p{ color:var(--muted); max-width:560px; margin:0 auto 32px; }
.cta::after{
  content:''; position:absolute; bottom:-120px; left:50%; transform:translateX(-50%);
  width:500px; height:240px; background:radial-gradient(ellipse, rgba(255,31,200,0.12), transparent 70%);
}
/* Vertical longhands, never the padding shorthand. This class is used as
   `class="wrap section-pad"` on 11 elements, and a shorthand here would reset
   .wrap's horizontal gutter to 0 — that class is declared earlier, so the
   shorthand wins and the section ends up flush against the viewport edge. */
.section-pad{ padding-top:100px; padding-bottom:100px; }

footer{ padding:64px 0 24px; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid var(--line);
  /* Columns size to their own content instead of stretching to the tallest one,
     so the link lists do not carry dead space under them. */
  align-items:start;
}
/* The brand stack runs ~90px taller than the link lists, which left a block of
   dead space beside it. Lifting it into the footer's top padding shortens the
   row by the same amount instead of padding the bottom out to match. */
.footer-brand{ margin-top:-40px; }
/* display:block kills the inline baseline gap an inline-flex anchor leaves under
   the logo, which the 1.6 line-height inherited from body makes visible. */
.footer-brand .logo{ display:block; line-height:0; }
.footer-brand p{ color:var(--muted); font-size:14.5px; margin-top:14px; max-width:280px; }
footer h4{ font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
footer ul a{ color:var(--paper); font-size:14.5px; opacity:0.85; }
footer ul a:hover{ color:var(--accent-bright); opacity:1; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:20px;
  color:var(--muted); font-size:13px; flex-wrap:wrap; gap:14px;
}
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{
  width:38px; height:38px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--ink-2); color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-row a:hover{
  color:var(--accent-bright); border-color:rgba(33,212,253,0.45);
  background:var(--ink-3); transform:translateY(-2px);
}
.social-row svg{ width:17px; height:17px; display:block; }
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a{ color:var(--muted); font-size:13px; }
.footer-legal a:hover{ color:var(--accent-bright); }
/* Once the grid reflows, the brand stack is no longer the tall column in a row
   of short ones, so the lift has nothing to correct and would just crowd the top. */
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ margin-top:0; } }

/* ---------- Legal / policy pages ---------- */
.legal-section{ padding:10px 0 100px; }
.legal-wrap{ max-width:820px; }
.legal-updated{
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent-bright); margin-bottom:34px;
}
.legal-body .legal-intro{ color:var(--muted); font-size:16.5px; margin-bottom:8px; }
.legal-body h2{ font-size:22px; margin:42px 0 14px; }
.legal-body h3{ font-size:16.5px; color:var(--paper); margin:24px 0 10px; }
.legal-body p{ color:var(--muted); font-size:16px; margin-bottom:16px; }
.legal-body ul{ list-style:disc; margin:0 0 18px; padding-left:22px; color:var(--muted); font-size:16px; display:flex; flex-direction:column; gap:9px; }
.legal-body a{ color:var(--accent-bright); }
.legal-body a:hover{ text-decoration:underline; }
.legal-body strong{ color:var(--paper); font-weight:600; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   Small-screen refinements (phones)
   ============================================================ */
@media(max-width:600px){
  .wrap, nav{ padding:0 20px; }
  .section-pad{ padding-top:64px; padding-bottom:64px; }
  .cta{ padding:44px 24px; border-radius:16px; }
  .hero{ padding:130px 0 64px; }
  .title-banner{ padding:140px 0 46px; }
  .who, .mv, .work, .map-section, .info-cards, .jobs-section{ padding:64px 0; }
  .about-panel, .form-card, .mv-card{ padding:26px 22px; }
  .stats-row{ margin-top:44px; padding-top:24px; }
  .section-head{ margin-bottom:40px; }
  footer{ padding:60px 0 26px; }
  /* One column on phones so the whole footer reads as a single run rather than
     two cramped halves. */
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .map-frame{ height:280px; }
  /* Long service names would otherwise force the crumb trail past the gutter. */
  .breadcrumb{ flex-wrap:wrap; }
  /* The 52px dot gutter plus a 22px gap costs a quarter of a phone's width;
     shrinking both gives the copy room without moving the dot off its line. */
  .feature-row{ grid-template-columns:28px 1fr; gap:14px; padding:22px 0; }
}
@media(max-width:400px){
  .wrap, nav{ padding:0 16px; }
  .cta{ padding:38px 20px; }
  .stats-row{ grid-template-columns:1fr 1fr; gap:20px 10px; }
  .hero h1{ font-size:33px; }
  .title-banner h1{ font-size:30px; }
  .about-metrics{ gap:20px 18px; }
}