html{ scroll-behavior:smooth; }

/* anchor targets won't hide under sticky header */
#core-service, #extended-scope, #how-we-work, #contact{
  scroll-margin-top: 92px;
}

/* ===============================
   APEX main.css — v1 (stable)
   Premium + battle-tested
   =============================== */

:root{
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --faint: rgba(255,255,255,0.52);
  --line: rgba(255,255,255,0.10);

  --headline: rgba(255,255,255,0.96);
  --body: rgba(255,255,255,0.72);
  --section: rgba(210,224,235,0.88);
  --label: rgba(255,255,255,0.55);

  /* GOLD (Chrome-safe): solid for text; use rgba for borders/backgrounds elsewhere */
  --gold: #d7b46a;
  --steel: rgba(122,167,199,0.55);

  --shadow: 0 12px 50px rgba(0,0,0,0.45);
  --shadow2: 0 16px 60px rgba(0,0,0,0.35);
  --radius: 18px;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html, body{ height:auto; }
body{ min-height:100%; overflow-x:hidden; }


body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  line-height:1.45;
  background:
    radial-gradient(1200px 700px at 25% -10%, rgba(215,180,106,0.16), transparent 60%),
    radial-gradient(900px 650px at 95% 15%, rgba(122,167,199,0.12), transparent 55%),
    linear-gradient(180deg, #070a0e 0%, #0b0f14 30%, #070a0e 100%);
}

/* Cinematic pop (restrained) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(1100px 700px at 25% -10%, rgba(215,180,106,0.14), transparent 60%),
    radial-gradient(900px 650px at 95% 10%, rgba(122,167,199,0.11), transparent 55%),
    radial-gradient(700px 500px at 70% 110%, rgba(215,180,106,0.08), transparent 60%),
    linear-gradient(180deg, #05070a 0%, #070a0e 35%, #05070a 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:0.08;
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 58px 58px, 58px 58px;
  mask-image: radial-gradient(circle at 40% 15%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.60) 45%, rgba(0,0,0,0) 80%);
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:0.93; }

.wrap{ max-width:var(--max); margin:0 auto; padding:28px 20px 70px; }

/* =========================
   Mobile header overflow fix (iPhone Safari)
   ========================= */

header .nav {
  min-width: 0; /* critical for iOS flex overflow */
}

header .brand,
header .brand > div {
  min-width: 0; /* allow brand text to shrink */
}

header .brand .t1,
header .brand .t2 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* keep it on one line; ellipsis instead of overflow */
}

/* If your header uses flex (likely), this prevents overflow */
header .nav,
header .cta,
header nav ul {
  flex-wrap: wrap;
}

/* --- Small screens: wrap + stack intelligently --- */
@media (max-width: 520px) {
  header .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  /* Brand stays left, can shrink */
  header .brand {
    flex: 1 1 auto;
  }

  /* CTA block moves to the right on the first row */
  header .cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* if two buttons exist, they can wrap */
    justify-content: flex-end;
  }

  /* Make buttons stop forcing one ultra-wide line */
  header .cta .btn,
  header .cta .btn.primary {
    max-width: 44vw;          /* prevents pushing off-screen */
    white-space: normal;      /* allow line wrap */
    text-align: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Nav list drops to its own row under brand/cta */
  header nav {
    order: 3;
    width: 100%;
  }

  header nav ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

/* ===============================
   Header
   =============================== */

header{
  position:sticky;
  top:0;
  z-index:9999;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,15,20,0.92), rgba(11,15,20,0.62));
  border-bottom:1px solid var(--line);
}

.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}

.brand img{
  width:32px;
  height:32px;
  border-radius:0;
  border:none;
  background: transparent;
  padding:0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

.brand .t1{
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  margin:0;
}

.brand .t2{
  font-size:12px;
  color:var(--muted);
  margin:2px 0 0;
}

nav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  gap:34px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}

nav a{
  padding:10px 8px;
  border-radius:12px;
  border:1px solid transparent;
  letter-spacing:0.04em;
  font-weight:500;
  transition: opacity 160ms ease;
}

nav a:hover{
  opacity:0.82;
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.cta{ display:flex; gap:10px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  backdrop-filter: blur(8px);
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.btn:hover{ background: rgba(255,255,255,0.05); }

.btn.primary{
  padding:12px 22px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(215,180,106,0.20), rgba(215,180,106,0.10));
  border-color: rgba(215,180,106,0.30);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

.btn.primary:hover{
  background: linear-gradient(180deg, rgba(215,180,106,0.24), rgba(215,180,106,0.11));
  border-color: rgba(215,180,106,0.40);
}

/* ===============================
   Hero
   =============================== */

.hero{
  padding:48px 0 22px;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:24px;
  align-items:stretch;
}

.card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:28px;
}

.card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(215,180,106,0.32), rgba(122,167,199,0.18), transparent);
  opacity:0.9;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:14px;
}

.dot{
  width:10px; height:10px; border-radius:99px;
  background: radial-gradient(circle at 30% 30%, rgba(215,180,106,0.95), rgba(122,167,199,0.55));
  box-shadow: 0 0 0 4px rgba(215,180,106,0.09);
}

.headline{
  margin:0 0 10px;
  color: var(--headline);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.hero-impact{
  margin: 14px 0 10px;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(210,224,235,0.86);
  max-width: 68ch;
}

.subhead{
  margin:0 0 18px;
  font-size:16px;
  color: var(--body);
  max-width:64ch;
}

.hero-rule{
  height:1px;
  width:100%;
  margin:18px 0 2px;
  background: linear-gradient(90deg,
    rgba(215,180,106,0.35),
    rgba(255,255,255,0.08),
    rgba(122,167,199,0.22)
  );
  opacity:0.9;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

/* Pills */
.pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.pill{
  font-size:12px;
  color: rgba(255,255,255,0.62);
  padding:9px 12px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background: rgba(255,255,255,0.02);
  white-space:nowrap;
}

/* Side cards */
.side{ display:grid; gap:14px; }
.mini{ padding:18px; }

.mini h3{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.88);
}

.mini p{ margin:0; color: var(--body); font-size:13px; }
.mini .rule{ margin:14px 0; height:1px; background:var(--line); }
.mini ul{ margin:0; padding:0 0 0 18px; color: var(--body); font-size:13px; }
.mini li{ margin:6px 0; }

/* ===============================
   Sections / Panels
   =============================== */

section{ padding: 34px 0; }

.panel{
  position: relative;
  padding:22px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.panel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(215,180,106,0.26), rgba(122,167,199,0.14), transparent);
  opacity:0.9;
}

.panel h2{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--section);
  position: relative;
  padding-top: 12px;
}

.panel h2::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:2px;
  width:72px;
  border-radius:99px;
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,0.12));
  opacity:0.95;
}

.panel h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:1px;
  width:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05), transparent);
  opacity:0.9;
}

.panel p{
  margin:0 0 10px;
  color: var(--body);
}

/* Standard 12-col grid (legacy) */
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }

/* New "feature" grid (used by updated index.html) */
.panel .grid{
  margin-top: 14px;
  grid-template-columns: repeat(12, 1fr);
}

.feature{
  grid-column: span 6;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
}

.feature h3{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}

.feature p{
  margin: 0 0 10px;
  color: var(--body);
  font-size: 14px;
}

.feature p strong{ color: rgba(255,255,255,0.92); font-weight:650; }

/* Lists (legacy sections still use these) */
.section-label{
  margin:0 0 10px;
  color: var(--faint);
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:12px;
}

.list{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.list li{
  padding:12px 12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  color: var(--body);
  font-size:14px;
}

.list strong{ color:rgba(255,255,255,0.92); font-weight:650; }

.note{
  margin-top:12px;
  padding:14px 14px;
  border-radius:14px;
  border:1px dashed rgba(215,180,106,0.28);
  background: rgba(215,180,106,0.06);
  color: var(--body);
  font-size:13px;
}

/* ===============================
   Overview / Jump-to
   =============================== */

.overview{
  margin-top: 16px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}

.overview-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.overview-title{
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size: 11px;
  color: rgba(255,255,255,0.78);
}

.overview-sub{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.overview-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 12px;
}

.jump{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.75);
  text-decoration:none;
  font-size: 12px;
}

.jump:hover{
  border-color: rgba(215,180,106,0.32);
  background: rgba(215,180,106,0.07);
  color: rgba(255,255,255,0.90);
}

.overview-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.ov-card{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
}

.ov-k{
  font-size: 11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(210,224,235,0.85);
  margin-bottom: 8px;
}

.ov-card ul{
  margin:0;
  padding-left: 16px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
}

.ov-card li{ margin: 6px 0; }

/* ===============================
   Contact helpers (for updated index.html)
   =============================== */

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 14px;
}

.fineprint{
  margin-top: 14px;
  color: rgba(255,255,255,0.50);
  font-size: 12px;
}

/* ===============================
   Footer
   =============================== */

.footer{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}

/* ===============================
   Responsive
   =============================== */

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; padding-top:34px; }
  .feature{ grid-column: span 12; }

  /* Header: keep nav visible in half-screen (wrap into 2 rows) */
  header .nav{
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
  }

  header nav{
    width: 100%;
    order: 3;
  }

  header nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    justify-content: center;
  }

  header .cta{
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 860px){
  .overview-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .btn{ width:100%; }
  .cta{ width:100%; }
  .hero-actions{ flex-direction:column; }
}

/* CORE SCOPE GROUP HEADERS */

.scope-group{
  margin-top: 26px;
  margin-bottom: 12px;
  padding-top: 14px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(215,180,106,0.85);

  border-top: 1px solid rgba(255,255,255,0.10);
}

/* tighten spacing on first group */
.scope-group:first-of-type{
  margin-top: 18px;
}

/* =========================================
   STRONG SECTION LABELS (for Core / Extended)
   ========================================= */

.label-strong{
  margin: 26px 0 14px;            /* more air above */
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);

  color: var(--gold);             /* Chrome-safe solid gold */
  font-weight: 800;
  letter-spacing: 0.22em;         /* stronger scan-read */
  text-transform: uppercase;
  font-size: 12px;

  display:flex;
  align-items:center;
  gap:12px;

  position: relative;
}

/* Accent rail */
.label-strong::before{
  content:"";
  width: 64px;                    /* longer = more authority */
  height: 3px;                    /* thicker = structural */
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(215,180,106,0.95),
    rgba(122,167,199,0.28),
    transparent
  );
  opacity: 1;
}

/* Optional: faint sub-divider under label */
.label-strong::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.05),
    transparent
  );
}

#extended-scope .label-strong{
  color: var(--gold); /* match exactly */
}

/* =========================================
   CTA ROW (DETAILS BUTTON) — higher contrast
   Paste at BOTTOM of main.css
   ========================================= */

.details-cta{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.btn.btn-cta{
  width: 100%;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;

  /* stronger contrast + premium accent */
  background: linear-gradient(180deg, rgba(215,180,106,0.26), rgba(215,180,106,0.10));
  border: 1px solid rgba(215,180,106,0.40);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.45),
    0 0 0 1px rgba(215,180,106,0.10) inset;
}

.btn.btn-cta:hover{
  background: linear-gradient(180deg, rgba(215,180,106,0.32), rgba(215,180,106,0.12));
  border-color: rgba(215,180,106,0.55);
  transform: translateY(-1px);
}

.btn.btn-cta span{
  opacity: 0.9;
  font-weight: 800;
}

.details-cta-sub{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  padding-left: 2px;
}

/* Extended-scope CTA: make it unmistakable */
.btn-wide{
  width: 100%;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  margin-top: 10px;
}

.btn-arrow{
  opacity: 0.9;
  font-size: 16px;
}

.micro{
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 13px;
}

.btn-cta{
  width: fit-content;
  min-width: 320px;      /* adjust: 280–360 */
  padding-left: 18px;
  padding-right: 18px;
}

.micro-cta{
  margin-top: 8px;
  max-width: 70ch;       /* keeps it from spanning too wide */
}

.cta-row{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  text-decoration:none;
}

.cta-row-title{
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.cta-row-arrow{
  opacity: 0.85;
}

/* =========================================
   CTA CHIP — PREMIUM INLINE ACTION
   ========================================= */

.cta-inline{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-chip{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 12px 18px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.03em;

  /* Text: warm gold-white, matches headers */
  color: rgba(245,235,200,0.95);

  /* Background: darker glass to lift from panels */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.35)
  );

  /* Gold edge */
  border: 1px solid rgba(215,180,106,0.55);

  /* Depth without glow */
  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cta-chip:hover{
  background: linear-gradient(
    180deg,
    rgba(215,180,106,0.18),
    rgba(0,0,0,0.35)
  );
  border-color: rgba(215,180,106,0.75);
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

.cta-arrow{
  opacity: 0.9;
  transition: transform 160ms ease;
}

.cta-chip:hover .cta-arrow{
  transform: translateX(2px);
}

.cta-sub{
  color: rgba(255,255,255,0.60);
  font-size: 13px;
  line-height: 1.35;
  max-width: 72ch;
}

/* ================================
   APEX Homepage Image Pass (v1.0)
   Safe additive patch for:
   - Hero image hanger
   - Section images (responsive + premium)
   ================================= */

/* HERO: ensure two-column layout remains intentional */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

/* If your existing CSS already sets .hero, this will still work as a refinement.
   Mobile stack */
@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* HERO image hanger panel: match your panel tone but ensure proper spacing */
.hero .panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Homepage images (no inline CSS): prevent tall source files from becoming image walls.
   Use aspect-ratio + viewport caps so behavior matches the "good" Transportation page feel. */
.section-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 28vh;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* Hero image: allow impact, but NEVER dominate the screen */
.hero .panel .section-image {
  max-height: 40vh;
  aspect-ratio: 16 / 9;
}

/* Mobile: keep banners tight */
@media (max-width: 920px) {
  .section-image {
    max-height: 24vh;
  }
  .hero .panel .section-image {
    max-height: 32vh;
  }
}

/* Ensure any note under hero image is spaced and calm */
.hero .panel .note {
  margin-top: 12px;
  opacity: 0.85;
}

/* Optional: if images sit directly inside grid cols, give them breathing room */
.grid .section-image {
  margin-top: 10px;
}

/* --- Image blocks: sizing + positioning --- */
.APEX-media {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.07);
}
.APEX-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HERO: text left, image right; stack on mobile */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: stretch;
}
.hero-media {
  min-height: 420px;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { min-height: 260px; }
}

/* Two-shot (phone + laptop) */
.image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.image-duo .APEX-media { height: 360px; }
@media (max-width: 820px) {
  .image-duo { grid-template-columns: 1fr; }
  .image-duo .APEX-media { height: 260px; }
}

/* Extended scope triptych (single image) */
.extended-hero {
  margin-top: 12px;
}
.extended-hero .APEX-media { height: 340px; }
@media (max-width: 820px) {
  .extended-hero .APEX-media { height: 260px; }
}

/* Closing “How We Work” image size (keep it premium and present) */
.how-we-work-photo {
  margin-top: 14px;
}
.how-we-work-photo .APEX-media { height: 420px; }
@media (max-width: 820px) {
  .how-we-work-photo .APEX-media { height: 280px; }
}

/* CTA row spacing (so buttons read as intentional) */
.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.required {
  color: #c0392b; /* muted red, not aggressive */
}

.form-legend {
  font-size: 0.85em;
  opacity: 0.8;
  margin-bottom: 0.75rem;
}

.field-hint {
  opacity: 0.65;
}

/* ================================
   FORMS — START INTAKE (LOCKED)
   Responsive form control widths
   ================================ */

#start-form input,
#start-form select,
#start-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}

#start-form textarea {
  resize: vertical;
}

/* ================================
   FORMS — MOBILE SPACING FIX (LOCKED)
   Prevent helper text / input overlap
   ================================ */

#start-form .field-hint {
  display: block;
  margin: 6px 0 10px;
  line-height: 1.35;
}

#start-form li strong {
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 480px) {
  #start-form input#phone {
    width: 90%;
  }
}

/* ================================
   HEADER — MOBILE SIZE CONTROL (LOCKED)
   Reduce header height on phone
   ================================ */

@media (max-width: 480px) {
  header .nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  header .brand img {
    width: 48px;
    height: 48px;
  }

  header .brand .t1 {
    font-size: 14px;
    line-height: 1.1;
  }

  header .brand .t2 {
    font-size: 11px;
    line-height: 1.1;
    opacity: 0.85;
  }
}

/* =========================================
   Inline “View details →” (homepage + anywhere)
   Gold + never a pill/button
   ========================================= */

a.details-link{
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;

  display: inline;
  padding: 0;
  margin: 0 0 0 .25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

a.details-link:hover{
  text-decoration: underline;
}

/* ===============================
   How We Work — Module Hierarchy (v1)
   Adds visual separation + elite module anchors
   =============================== */

.module{
  position: relative;
  padding-left: 28px; /* room for left rule */
}

.module:before{
  content:"";
  position:absolute;
  left: 14px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 2px;
  background: rgba(215,180,106,0.55); /* APEX gold, subtle */
}

.module-stamp{
  font-size: 34px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22); /* ghost stamp */
  margin: 2px 0 14px;
}

.module-divider{
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  margin: 14px 0 16px;
  border-radius: 2px;
}

.module-lead{
  margin-top: 0;
}

.section-stamp img{
  vertical-align: middle;
  margin-right: 8px;
}

.pillrow.tight{
  margin-top: 10px;
}

.grid-roomy{
  row-gap: 22px; /* increases vertical breathing room between grid rows */
}

/* Optional: slightly lift panels that use module styling (subtle) */
.panel.module{
  background: rgba(0,0,0,0.18);
}

/* =========================================
   HOW WE WORK — VERTICAL RULE RESTORE
   Safe override (does NOT replace sections)
   ========================================= */

.panel.module{
  position: relative;
  padding-left: 42px; /* increase breathing room */
}

/* Strong visible gold rail */
.panel.module::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 3px;

  background: #d7b46a; /* solid gold */
  opacity: 1;

  z-index: 2; /* ensure it sits above panel bg */
}

/* Ensure panel background does NOT swallow the rule */
.panel.module{
  background: rgba(255,255,255,0.03);
}

/* =========================================
   How We Work page — layout tuning (v1.29)
   Content locked; visual hierarchy only.
   Scope: body.howwework only.
   ========================================= */

body.howwework .hero .card { max-width: 920px; }

body.howwework .panel { overflow: hidden; }

body.howwework .phase-card{
  position: relative;
  padding-left: 34px;
}

body.howwework .phase-card .accent-bar{
  position: absolute;
  left: 16px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: rgba(215,180,106,0.55);
  border-radius: 2px;
}

body.howwework .phase-card .phase-title{
  font-size: clamp(22px, 1.6vw + 10px, 32px);
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  margin: 2px 0 14px;
}

body.howwework .phase-card p{
  margin: 0;
  max-width: 56ch;
}

body.howwework .phase-card p strong{
  font-size: 18px;
  color: rgba(255,255,255,0.92);
}

@media (max-width: 900px){
  body.howwework .phase-card p{ max-width: none; }
}

/* Core / Extended section readability */
body.howwework .section-label{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}

body.howwework .core-block{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

body.howwework .core-block:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Make long panels breathe a bit more on large screens */
@media (min-width: 1100px){
  body.howwework .panel{ padding: 28px 28px; }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
}

nav ul.nav-left {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  margin-left: auto;
}

.cta {
  margin-left: 0;
}
/* ==========================================
   PAGE CAP – Shield Only
   ========================================== */

.page-cap {
  position: relative;
  padding-left: 28px;
  margin-bottom: 20px;
}

.page-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("assets/images/ATS_Shield_Icon_32.png") no-repeat center;
  background-size: contain;
  opacity: 0.95;
}
/* Active Extended Scope link */
.details-link.active-scope {
  color: rgba(255,255,255,0.92);
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}