/* =============================================================
   fluid.css — sitewide fluid typography & spacing
   Scales the entire site smoothly with viewport width.
   Loaded LAST so it wins the cascade for these properties.
   ============================================================= */

/* ---- Containers ------------------------------------------- */
:root {
  --max: min(92vw, 1600px);
}
.shell {
  margin-left: auto;
  margin-right: auto;
  max-width: min(92vw, 1600px);
  padding-left: 0;
  padding-right: 0;
}
.shell--wide {
  margin-left: auto;
  margin-right: auto;
  max-width: min(92vw, 1600px);
}
.section, .section.alt {
  padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
  padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
}

/* ---- Eyebrows --------------------------------------------- */
.eyebrow {
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: clamp(0.16em, 0.22vw, 0.22em);
}
.hero.hero-interactive .eyebrow {
  font-size: clamp(13px, 1.05vw, 18px);
}

/* ---- Headings --------------------------------------------- */
.section-head h2,
.split-copy h2,
.callout h2,
.timeline-head h2,
.risk-intro h2,
.service-listing-head h2,
.orbit-head h2 {
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.08;
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.04;
}
.section-head h3,
.callout h3 {
  font-size: clamp(18px, 1.6vw, 26px);
}
h4 { font-size: clamp(16px, 1.4vw, 22px); }

/* ---- Body copy -------------------------------------------- */
.section-head p,
.split-copy p,
.callout p,
.timeline-head p,
.risk-intro p,
.orbit-head p {
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.55;
}
.hero p {
  font-size: clamp(15px, 1.2vw, 21px);
}

/* ---- Buttons ---------------------------------------------- */
.button {
  font-size: clamp(13px, 1.05vw, 16px);
  padding: clamp(12px, 1.1vw, 18px) clamp(20px, 2vw, 30px);
}

/* ---- Cards / Service rows -------------------------------- */
.card h3 { font-size: clamp(18px, 1.6vw, 26px); }
.card p { font-size: clamp(14px, 1.1vw, 17px); }

.service-row { padding: clamp(20px, 1.8vw, 30px) clamp(12px, 1.2vw, 20px); }
.service-row h3 { font-size: clamp(18px, 1.6vw, 26px); }
.service-row p  { font-size: clamp(13px, 1.1vw, 17px); }
.service-row-arrow {
  height: clamp(36px, 3vw, 48px);
  width:  clamp(36px, 3vw, 48px);
}

/* ---- Check list ------------------------------------------- */
.check-list li {
  font-size: clamp(14px, 1.1vw, 17px);
  padding: clamp(12px, 1.1vw, 18px) clamp(14px, 1.3vw, 22px);
}

/* ---- Hero metrics ----------------------------------------- */
.metric strong { font-size: clamp(20px, 1.7vw, 30px); }
.metric span   { font-size: clamp(11px, 0.85vw, 14px); }

/* ---- Header ----------------------------------------------- */
.site-header {
  transform: translateY(0);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    backdrop-filter 0.25s ease;
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.nav-shell {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 auto;
  max-width: min(92vw, 1600px);
  padding-left: 0;
  padding-right: 0;
}
.nav-shell > .brand          { justify-self: start; }
.nav-shell > .nav-links      { justify-self: center; }
.nav-shell > .header-cta-stack { justify-self: end; }

/* Submenu: neutral dark/grey palette, semi-transparent */
.submenu {
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.submenu a:hover,
.submenu a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
}
.nav-links a { font-size: clamp(14px, 1vw, 16px); }

/* Brand mark: icon only by default, expands to full wordmark on hover */
.brand {
  display: inline-flex;
  overflow: hidden;
  vertical-align: middle;
  width: clamp(28px, 2.4vw, 38px);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand:hover,
.brand:focus-visible {
  width: clamp(126px, 11vw, 171px);
}
.brand img {
  flex-shrink: 0;
  height: clamp(28px, 2.4vw, 38px);
  max-width: none;
  width: auto;
}

/* ---- Footer ----------------------------------------------- */
.site-footer {
  padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
  padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
}
.footer-top  { padding-bottom: clamp(40px, 4.5vw, 72px); }
.footer-brand p     { font-size: clamp(14px, 1vw, 16px); }
.footer-col h3      { font-size: clamp(11px, 0.85vw, 14px); }
.footer-col a       { font-size: clamp(13px, 1vw, 16px); }
.footer-muted       { font-size: clamp(13px, 1vw, 16px); }
.footer-email       { font-size: clamp(13px, 1vw, 16px); }
.footer-cta         { font-size: clamp(12px, 0.9vw, 14px); }
.footer-bottom-row p,
.footer-bottom-links a { font-size: clamp(12px, 0.9vw, 14px); }

/* ---- Heroes (general edge alignment) ---------------------- */
.hero {
  padding-left: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
  padding-right: max(clamp(32px, 5vw, 88px), calc((100vw - 1600px) / 2));
}
.hero .hero-content {
  margin-left: 0;
  margin-right: auto;
}

/* ---- Cybersecurity hero-clock ----------------------------- */
.hero-clock { padding: clamp(110px, 10vw, 170px) clamp(32px, 5vw, 88px) clamp(72px, 7vw, 110px); }
.hero-clock h1 { font-size: clamp(34px, 5.4vw, 76px); }
.hero-clock-lede { font-size: clamp(15px, 1.2vw, 21px); }
.hero-clock-city-time { font-size: clamp(18px, 1.6vw, 26px); }
.hero-kpi-value { font-size: clamp(20px, 1.7vw, 30px); }
.hero-kpi-label { font-size: clamp(11px, 0.85vw, 14px); }

/* ---- Service detail pages --------------------------------- */
body.service-detail .hero-clock {
  min-height: auto;
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

body.service-detail .hero-spotlight {
  margin-bottom: 30px;
}

body.service-detail #service-overview,
body.service-detail #cyber-services {
  padding-top: clamp(36px, 4vw, 64px);
}

/* ---- Risk snapshot (cybersecurity) ----------------------- */
.risk-question { font-size: clamp(18px, 1.6vw, 26px); }
.risk-opt      { font-size: clamp(14px, 1.1vw, 17px); }

/* ---- Timeline -------------------------------------------- */
.timeline-stat-value  { font-size: clamp(22px, 1.8vw, 32px); }
.timeline-stat-label  { font-size: clamp(11px, 0.85vw, 14px); }
.timeline-axis-week   { font-size: clamp(10px, 0.8vw, 13px); }
.timeline-row-label strong { font-size: clamp(13px, 1vw, 16px); }
.timeline-row-label small  { font-size: clamp(11px, 0.85vw, 14px); }
.timeline-detail-body h4   { font-size: clamp(18px, 1.4vw, 24px); }
.timeline-detail-body p    { font-size: clamp(13px, 1.1vw, 17px); }
.timeline-outcome-num      { font-size: clamp(20px, 1.7vw, 28px); }
.timeline-outcome-text     { font-size: clamp(12px, 0.95vw, 15px); }