/* ============================================================
   SS SecurSys — Premium Security Systems Website
   Design system, components & responsive layout
   ============================================================ */

/* ---------- Self-hosted fonts ----------
   Was two render-blocking requests to fonts.googleapis.com (156-178ms, plus
   DNS + TLS to two extra origins on a real connection). Both families ship as
   variable fonts, so the whole set is two files served from our own origin.
   latin subset only, which is exactly what Google served before — the rupee
   sign, arrow and star already fall back to a system font either way. */
/* Headings are Poppins per the redesign brief (SemiBold/Bold). Poppins has no
   variable release, so it ships as three static latin cuts — still under 24KB
   total, and the 700 face claims 700-800 so the old weight-800 rules land on a
   real Bold instead of a synthesised one. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design Tokens — SS SecurSys logo theme ----------
   Sampled from assets/img/SS securSys Logo.png:
     navy  #01194a   amber #e79402   on white
   Light theme: white surfaces, navy structure, amber accents.
   ------------------------------------------------------------ */
:root {
  /* Brand — straight off the logo */
  --brand-navy: #01194a;
  --brand-amber: #e79402;

  /* Accent ramp (navy; all AA as text on white) */
  --accent-deep: #010f2e;
  --accent: #01194a;
  --accent-soft: #14357c;
  --amber: #e79402;        /* fills, borders, large marks */
  --amber-lite: #f5b335;   /* decorative only */
  --amber-ink: #8a5c00;    /* amber dark enough for body text */

  /* Surfaces */
  --bg: #ffffff;
  --bg-2: #f6f9fd;
  --bg-3: #f1f5fc;
  --surface-2: #edf2fb;
  --surface-3: #e4ecf8;
  --surface-4: #d8e3f4;

  /* Text */
  --text-strong: #010f2e;
  --text: #2d3b56;
  --text-muted: #55637f;
  --text-faint: #69748f;

  /* Hairlines & tints — navy at low alpha so they read on white */
  --line: rgba(1, 25, 74, 0.13);
  --line-strong: rgba(1, 25, 74, 0.22);
  --glass: rgba(1, 25, 74, 0.035);
  --glass-2: rgba(1, 25, 74, 0.065);

  --grad-accent: linear-gradient(120deg, #01194a, #14357c 45%, #e79402);
  --grad-navy: linear-gradient(120deg, #0b2e6f, #01194a);
  --grad-amber: linear-gradient(120deg, #f5b335, #e79402);

  --shadow-sm: 0 2px 12px rgba(1, 25, 74, 0.07);
  --shadow-md: 0 16px 44px rgba(1, 25, 74, 0.11);
  --shadow-glow: 0 0 34px rgba(231, 148, 2, 0.25);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --font-head: "Poppins", "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 140px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient background glow layers */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(1, 25, 74, 0.045), transparent 60%),
    radial-gradient(50% 45% at 88% 15%, rgba(30, 74, 156, 0.04), transparent 62%),
    radial-gradient(55% 55% at 78% 92%, rgba(231, 148, 2, 0.05), transparent 60%);
  z-index: -2;
  pointer-events: none;
}
/* Must-fix §1: the repeating square/grid overlay that used to sit here has been
   removed. Sections now separate themselves with a clean tint + hairline
   (.section-tint below) instead of a page-wide pattern. */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-strong); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { color: var(--text); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }

/* Must-fix §1: very subtle section separation, replacing the old grid overlay.
   A near-white tint plus hairline rules is enough to break the page into bands
   without adding pattern noise. */
.section-tint {
  background: linear-gradient(180deg, #fbfcfe, #f6f9fd);
  border-block: 1px solid rgba(1, 25, 74, 0.07);
}
.section-tint + .section-tint { border-top: 0; }
/* Cards need to lift off the tint, so they go plain white inside a band. */
.section-tint .card,
.section-tint .ind-grid > a { background: #fff; }

/* Must-fix §3–§5: the two near-the-top trust carousels. Compact by design — a
   single small label per strip instead of an eyebrow + h2 + paragraph — so the
   visitor reaches the solutions grid inside the first couple of screens. */
.trust-band { padding-block: clamp(26px, 3.4vw, 40px); }
.tc-label {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.74rem, 1.1vw, .82rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft); text-align: center;
  margin-bottom: 16px;
}
.trust-band .marquee { background: #fff; }
.trust-band .sector-note { margin-top: 14px; text-align: center; }

/* ---------- Utility ---------- */
.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--glass);
  backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 16px; font-size: 1.08rem; color: var(--text-muted); }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  --pad: 15px 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad);
  border-radius: 100px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
  will-change: transform;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn-primary {
  background: var(--grad-navy);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(1, 25, 74, 0.35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(1, 25, 74, 0.5); }
.btn-ghost {
  background: var(--glass-2);
  color: var(--text-strong);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.btn-gold { background: var(--grad-amber); color: #241a02; box-shadow: 0 10px 30px rgba(231, 148, 2, 0.3); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(231, 148, 2, 0.45); }
.btn-lg { --pad: 18px 34px; font-size: 1.05rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1320px; margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  transition: padding 0.4s var(--ease);
}
.nav.scrolled .nav-inner { padding-block: 9px; }

/* Nav entrance */
.nav { transform: translateY(-100%); opacity: 0; animation: navDrop .9s var(--ease) .1s forwards; }
@keyframes navDrop { to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nav { transform: none; opacity: 1; animation: none; }
}

.logo {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; font-family: var(--font-head);
  transition: transform .35s var(--ease);
}
.logo:hover { transform: translateY(-1px); }
/* Client update: the navbar and footer now carry the supplied logo artwork
   itself rather than the shield plus a hand-set wordmark. The horizontal
   lockup goes in the navbar (a square one would render the wordmark ~6px tall
   at this height); the stacked lockup goes in the footer, which has the room. */
.logo-lockup {
  height: 68px; width: auto; display: block;
  transition: transform .35s var(--ease);
}
.logo:hover .logo-lockup { transform: translateY(-1px) scale(1.02); }
.nav.scrolled .logo-lockup { height: 58px; }
/* Footer plate holds the stacked lockup. */
.logo-full { height: 148px; width: auto; display: block; }
.logo-plate {
  display: inline-grid; place-items: center;
  padding: 14px 20px; border-radius: var(--radius);
  background: linear-gradient(150deg, #ffffff, #eaf0fc);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
@keyframes sheen { 0%,60%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

.nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; justify-content: center; }
/* Compact labels in the bar, full labels in the mobile drawer */
.nav-label-full { display: none; }
.nav-links a {
  font-family: var(--font-head);
  font-size: clamp(0.78rem, 0.92vw, 0.9rem); font-weight: 500;
  color: var(--text); white-space: nowrap;
  padding: 10px clamp(8px, 1.1vw, 15px); border-radius: 100px;
  position: relative; transition: color 0.25s, background 0.25s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; width: calc(100% - 22px);
  bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad-navy);
  transform: scaleX(0); transition: transform 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-strong); }
.nav-links a:hover { background: var(--glass); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* `.nav-links a` is (0,1,1) and out-specifies `.btn-primary` (0,1,0), so the
   in-drawer CTA was picking up the drawer's link colour instead of its own.
   That was survivable when the link token was light on the old dark theme; on
   the light theme it rendered dark navy text on a navy button. Restore each
   button's own colour explicitly. */
.nav-links a.btn-primary { color: #ffffff; }
.nav-links a.btn-ghost { color: var(--text-strong); }

/* Desktop: the in-drawer CTA belongs to the mobile menu only */
.nav-links > .btn { display: none; }

/* ---------- Solutions dropdown ---------- */
.nav-drop { position: relative; }
.nav-drop-top { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(180deg); }
/* Mobile-only accordion trigger */
.nav-drop-toggle { display: none; }

.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  z-index: 5; width: 288px; padding: 10px;
  display: grid; gap: 1px;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: none;
}
/* Bridges the gap between the trigger and the panel so the pointer can travel
   down without the menu closing under it. */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }

.nav-links .nav-drop-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: .82rem; font-weight: 500; white-space: normal; line-height: 1.3;
}
.nav-links .nav-drop-menu a::after { display: none; }
.nav-links .nav-drop-menu a i {
  font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--amber); flex: 0 0 auto;
}
.nav-links .nav-drop-menu a:hover { background: var(--glass-2); color: var(--text-strong); }
.nav-links .nav-drop-menu a.active { background: var(--glass-2); color: var(--text-strong); font-weight: 600; }

@media (max-width: 1080px) {
  /* In the drawer the panel becomes an inline accordion opened by the caret,
     leaving the parent label itself free to link through to the hub page. */
  .nav-drop-top { justify-content: space-between; }
  .nav-caret { display: none; }
  /* 52px square tap target, vertically centred on the parent row */
  .nav-drop-toggle {
    display: block; position: absolute; top: 0; right: 0;
    width: 56px; height: 54px; border: 0; background: transparent; cursor: pointer;
  }
  .nav-drop-toggle::before, .nav-drop-toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px;
    border-radius: 2px; background: var(--text); translate: -50% -50%;
    transition: transform .3s var(--ease);
  }
  .nav-drop-toggle::after { transform: rotate(90deg); }
  .nav-drop.open .nav-drop-toggle::after { transform: rotate(0deg); }

  .nav-drop-menu {
    position: static; translate: none; width: auto; padding: 0;
    background: var(--bg-2); backdrop-filter: none; border: 0; box-shadow: none;
    border-radius: 0; opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden; transition: max-height .45s var(--ease);
  }
  .nav-drop.open .nav-drop-menu { max-height: 760px; }
  .nav-drop::after { display: none; }
  .nav-links .nav-drop-menu a {
    padding: 13px max(24px, env(safe-area-inset-right, 0px)) 13px max(30px, env(safe-area-inset-left, 0px));
    border-radius: 0; font-size: .9rem;
    border-bottom: 1px solid rgba(1, 25, 74, .07);
  }
  .nav-links .nav-drop-menu a:last-child { border-bottom: 0; }
  .nav-links .nav-drop-menu a i { min-width: 22px; font-size: .72rem; }
  .nav-links .nav-drop-menu a.active { background: var(--surface-3); }
}

.nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-actions .btn { white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--line-strong);
  place-items: center; position: relative;
}
/* Each bar is pinned to the button's own centre — relying on the static
   position of ::before/::after put them at the span's box origin, which read
   as three bars of different offsets instead of a stacked hamburger. */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 2px; margin: 0; border-radius: 2px;
  background: var(--text-strong);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), background 0.2s, opacity 0.2s;
}
.nav-toggle span::before { transform: translate(-50%, -50%) translateY(-6px); }
.nav-toggle span::after  { transform: translate(-50%, -50%) translateY(6px); }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .nav-toggle span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(1, 16, 47, 0.45); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
body.menu-open .nav-backdrop { opacity: 1; visibility: visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: 146px; padding-bottom: clamp(48px, 6vw, 84px); overflow: hidden; }
.hero-mesh {
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(1, 25, 74, .28), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(30, 74, 156, .28), transparent 60%),
    radial-gradient(40% 50% at 60% 80%, rgba(231, 148, 2, .14), transparent 60%);
  filter: blur(30px); z-index: -1;
  animation: floatMesh 16s ease-in-out infinite alternate;
}
@keyframes floatMesh { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-3%,2%,0) scale(1.08)} }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
/* Must-fix §2: the headline, lead, service list and CTAs all have to land in
   the first screen, so the home hero runs a slightly tighter type scale and
   spacing than the inner page heroes. */
.hero h1 { margin: 18px 0 16px; font-size: clamp(2.1rem, 4.1vw, 3.4rem); }
.hero .lead { max-width: 560px; }
.hero .btn-group { margin-top: 26px; }
.hero-micro { margin-top: 18px; font-size: 0.9rem; color: var(--text-faint); display: flex; gap: 18px; flex-wrap: wrap; }
.hero-micro span { display: inline-flex; align-items: center; gap: 7px; }
.hero-micro span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-proof {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.hero-proof .pill {
  padding: 12px 18px; border-radius: 14px; background: var(--glass);
  border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.hero-proof .pill b { display: block; font-family: var(--font-head); color: var(--text-strong); font-size: 1.28rem; }
.hero-proof .pill span { font-size: 0.8rem; color: var(--text-muted); }

.hero-brands { margin-top: 30px; font-size: 0.82rem; color: var(--text-faint); letter-spacing: 0.03em; }
.hero-brands b { color: var(--accent-soft); font-weight: 600; }

/* Hero visual */
.hero-visual { position: relative; }
.hero-media {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,16,47,0) 40%, rgba(1,16,47,.6));
}
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px var(--accent);
  animation: scan 4.5s ease-in-out infinite;
}
@keyframes scan { 0%,100%{top:2%} 50%{top:98%} }

.hero-card {
  position: absolute; backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 12px;
}
.hero-card .dot { width: 10px; height: 10px; border-radius: 50%; background: #34e07f; box-shadow: 0 0 12px #34e07f; }
.hero-card b { font-family: var(--font-head); color: var(--text-strong); font-size: 0.92rem; display: block; }
.hero-card span { font-size: 0.76rem; color: var(--text); }
.hero-card.c1 { top: 22px; left: -22px; animation: floaty 5s ease-in-out infinite; }
.hero-card.c2 { bottom: 26px; right: -18px; animation: floaty 6s ease-in-out infinite 0.6s; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* The old .marquee block lived here. It was left over from an earlier design
   and no page used it any more, while its `gap` and `::after` diamond leaked
   into the real marquee further down this file. See "Marquee (brands, client
   logos)" for the live component. */

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: clamp(18px, 2vw, 26px); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-lg); background: var(--glass);
  border: 1px solid var(--line); backdrop-filter: blur(10px);
  transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%), rgba(1, 25, 74, .12), transparent 70%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.card:hover { transform: translateY(-8px); border-color: var(--line-strong); background: var(--glass-2); }
.card:hover::before { opacity: 1; }

.card-icon {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12));
  border: 1px solid var(--line-strong); margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; color: var(--accent-soft); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-muted); font-size: 0.98rem; }
.card .card-list { margin-top: 14px; display: grid; gap: 9px; }
.card .card-list li { font-size: 0.92rem; color: var(--text); padding-left: 24px; position: relative; }
.card .card-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.card-link {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--accent-soft);
  transition: gap 0.3s;
}
.card-link:hover { gap: 14px; }
.card-tag { position:absolute; top: 20px; right: 20px; font-size:0.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--amber-ink); font-family: var(--font-head); }

/* Stat cards */
.stat { text-align: center; padding: clamp(22px, 3vw, 34px); }
.stat .stat-icon { margin-inline: auto; }
.stat .num { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--text-strong); font-weight: 800; line-height: 1; }
.stat .num .grad-text { font-weight: 800; }
.stat .lbl { margin-top: 8px; font-size: 0.9rem; color: var(--text-muted); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst { display: flex; flex-direction: column; gap: 18px; }
.tst .stars { display: flex; gap: 3px; color: #c98200; }
.tst .stars svg { width: 18px; height: 18px; }
.tst blockquote { font-size: 1.02rem; color: var(--text-strong); line-height: 1.6; font-style: italic; }
.tst .who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.tst .avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; color: #ffffff; background: var(--grad-navy);
}
.tst .who b { color: var(--text-strong); font-family: var(--font-head); display: block; font-size: 0.96rem; }
.tst .who span { font-size: 0.82rem; color: var(--text-muted); }

/* ============================================================
   STEPS / TIMELINE
   ============================================================ */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(5, 1fr); counter-reset: step; }
.step { position: relative; padding: 28px 22px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); }
.step .step-no {
  counter-increment: step;
  font-family: var(--font-head); font-weight: 800; font-size: 2.2rem;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.9;
}
.step .step-no::before { content: "0" counter(step); }
.step h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.step p { font-size: 0.9rem; color: var(--text-muted); }
.step .step-icon { position: absolute; top: 24px; right: 22px; color: var(--accent-soft); opacity: 0.7; }
.step .step-icon svg { width: 22px; height: 22px; }

/* ============================================================
   FEATURE / SPLIT SECTIONS
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split.reverse .split-media { order: -1; }
.split-media {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong);
  aspect-ratio: 5/4; box-shadow: var(--shadow-md); position: relative;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
}
.split-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.split-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(1,16,47,.55)); }

.check-list { display: grid; gap: 14px; margin-top: 22px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-list .ci {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(1, 25, 74, .22), rgba(30, 74, 156, .14)); border: 1px solid var(--line-strong);
}
.check-list .ci svg { width: 15px; height: 15px; color: var(--accent-soft); }
.check-list b { color: var(--text-strong); font-family: var(--font-head); font-weight: 600; }
.check-list span { color: var(--text-muted); font-size: 0.94rem; }

/* ============================================================
   SERVICE BLOCKS
   ============================================================ */
.svc { position: relative; overflow: hidden; }
.svc-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.svc-num {
  flex: none; font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent-soft); background: linear-gradient(150deg, rgba(1, 25, 74, .16), rgba(30, 74, 156, .08));
  border: 1px solid var(--line-strong);
}
.svc-head .svc-title { flex: 1; }
.svc-head h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 8px; }
.svc-head .svc-icon { flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12)); border: 1px solid var(--line-strong); }
.svc-head .svc-icon svg { width: 26px; height: 26px; color: var(--accent-soft); }
.svc-one { color: var(--text); font-size: 1.02rem; }

/* Service image sits beside its bullet list rather than above it — eight
   full-width 16:9 banners would make this page enormous. */
.svc-body {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px, 3vw, 34px); align-items: center; margin: 22px 0;
}
@media (max-width: 760px) { .svc-body { grid-template-columns: 1fr; } }

/* Fixed 16:9 so all eight line up regardless of the source image, with a
   branded gradient underneath so a slow or missing file shows a navy panel
   rather than an empty box. */
.svc-media {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
}
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 24px 0; }
.svc-sub h4 { font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.svc-sub .card-list li { font-size: 0.92rem; }

.svc-adv {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(1, 25, 74, .09), rgba(30, 74, 156, .05));
  border: 1px solid rgba(1, 25, 74, .28); margin-bottom: 22px;
}
.svc-adv .adv-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-navy); color: #ffffff; }
.svc-adv .adv-mark svg { width: 19px; height: 19px; }
.svc-adv p { font-size: 0.95rem; color: var(--text); }
.svc-adv b { color: var(--accent-soft); font-family: var(--font-head); }

.svc-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.svc-toc a {
  font-family: var(--font-head); font-size: 0.86rem; font-weight: 500; color: var(--text);
  padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line); background: var(--glass);
  transition: color .25s, border-color .25s, background .25s;
}
.svc-toc a:hover { color: var(--text-strong); border-color: var(--accent); background: var(--glass-2); }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; max-width: 940px; margin-inline: auto; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--accent-deep) 8%, rgba(30, 74, 156, .5) 60%, transparent);
}
.tl-item { position: relative; width: 50%; padding: 0 44px 44px; }
.tl-item:nth-of-type(odd) { left: 0; text-align: right; }
.tl-item:nth-of-type(even) { left: 50%; }
.tl-dot {
  position: absolute; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 16px var(--accent); z-index: 2;
}
.tl-item:nth-of-type(odd) .tl-dot { right: -9px; }
.tl-item:nth-of-type(even) .tl-dot { left: -9px; }
.tl-year { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.tl-card { padding: 20px 24px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); transition: border-color .4s, transform .4s var(--ease); }
.tl-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.tl-card p { font-size: 0.94rem; color: var(--text-muted); }

/* ============================================================
   BADGES / ACCREDITATION
   ============================================================ */
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.accred { display: flex; gap: 18px; align-items: flex-start; }
.accred .seal {
  flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(231, 148, 2, .22), rgba(245, 179, 53, .08)); border: 1px solid rgba(231, 148, 2, .35);
}
.accred .seal svg { width: 28px; height: 28px; color: #c98200; }
.accred h3 { font-size: 1.08rem; margin-bottom: 6px; }
.accred p { font-size: 0.92rem; color: var(--text-muted); }

.award { text-align: center; padding: 30px 24px; }
.award .trophy { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-amber); }
.award .trophy svg { width: 28px; height: 28px; color: #241a02; }
.award .yr { font-family: var(--font-head); color: var(--amber-ink); font-weight: 700; font-size: .9rem; letter-spacing: .1em; }
.award h3 { font-size: 1.1rem; margin: 8px 0 6px; }
.award p { font-size: .88rem; color: var(--text-muted); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--glass); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
thead th { font-family: var(--font-head); color: var(--text-strong); font-size: 0.9rem; background: rgba(1, 25, 74, .03); position: sticky; top: 0; }
thead th:first-child { color: var(--accent-soft); }
tbody th { color: var(--text-strong); font-weight: 600; }
td { color: var(--text); }
tbody tr:hover { background: rgba(1, 25, 74, .025); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
.price-cell { color: var(--amber-ink); font-family: var(--font-head); font-weight: 600; white-space: nowrap; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--radius-lg);
  background: var(--glass); border: 1px solid var(--line); position: relative; transition: transform .5s var(--ease), border-color .4s;
}
.plan:hover { transform: translateY(-8px); border-color: var(--line-strong); }
.plan.featured { border-color: rgba(1, 25, 74, .5); background: linear-gradient(180deg, rgba(1, 25, 74, .08), var(--glass)); box-shadow: var(--shadow-glow); }
.plan .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-navy); color: #ffffff; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; }
.plan h3 { font-size: 1.3rem; }
.plan .plan-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 6px; }
.plan .price { font-family: var(--font-head); margin: 22px 0 4px; }
.plan .price b { font-size: 2.6rem; color: var(--text-strong); font-weight: 800; }
.plan .price small { color: var(--text-muted); font-size: 0.9rem; }
.plan .plan-list { display: grid; gap: 12px; margin: 22px 0 28px; }
.plan .plan-list li { font-size: 0.93rem; padding-left: 26px; position: relative; color: var(--text); }
.plan .plan-list li::before { content:""; position:absolute; left:0; top:7px; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; justify-content: center; }

/* ============================================================
   ACCORDION / FAQ
   ============================================================ */
.accordion { display: grid; gap: 14px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); overflow: hidden; transition: border-color .3s; }
.acc-item.open { border-color: var(--line-strong); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; text-align: left; }
.acc-head h3 { font-size: 1.05rem; color: var(--text-strong); }
.acc-head .ico { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; position: relative; transition: background .3s; }
.acc-head .ico::before, .acc-head .ico::after { content:""; position:absolute; background: var(--accent-soft); border-radius: 2px; transition: transform .3s; }
.acc-head .ico::before { width: 12px; height: 2px; }
.acc-head .ico::after { width: 2px; height: 12px; }
.acc-item.open .ico { background: rgba(1, 25, 74, .15); }
.acc-item.open .ico::after { transform: scaleY(0); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.acc-body-inner { padding: 0 24px 24px; color: var(--text-muted); font-size: 0.96rem; }

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(40px, 6vw, 80px); text-align: center; border: 1px solid var(--line-strong); background: linear-gradient(150deg, rgba(1, 25, 74, .1), rgba(30, 74, 156, .06)); }
.cta-block::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 80% at 50% 0%, rgba(1, 25, 74, .25), transparent 70%); }
.cta-block > * { position: relative; }
.cta-block h2 { margin-bottom: 16px; }
.cta-block p { max-width: 620px; margin: 0 auto 32px; font-size: 1.08rem; color: var(--text); }
.cta-block .btn-group { justify-content: center; }

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-hero { padding-top: 160px; padding-bottom: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.page-hero .hero-mesh { height: 100%; }
.breadcrumb { display: flex; gap: 8px; font-size: 0.85rem; color: var(--text-faint); margin-bottom: 20px; align-items: center; }
.breadcrumb a:hover { color: var(--accent-soft); }
.breadcrumb span { color: var(--text-faint); }
.page-hero h1 { max-width: 900px; }
.page-hero p { max-width: 640px; margin-top: 20px; font-size: 1.1rem; }

/* prose */
.prose h2 { margin: 8px 0 18px; }
.prose h3 { margin: 30px 0 12px; }
.prose p { margin-bottom: 16px; }
.prose ul { display: grid; gap: 10px; margin: 6px 0 20px; }
.prose ul li { padding-left: 26px; position: relative; color: var(--text); }
.prose ul li::before { content:""; position:absolute; left:0; top:9px; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform: rotate(-45deg); }
.prose strong { color: var(--text-strong); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-size: 0.85rem; color: var(--text); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 12px; background: #ffffff;
  border: 1px solid var(--line-strong); color: var(--text-strong); font-family: var(--font-body); font-size: 0.98rem;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1, 25, 74, .15); }
.field textarea { resize: vertical; min-height: 120px; }

.contact-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: none; }
.contact-item .ci { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12)); border: 1px solid var(--line-strong); }
.contact-item .ci svg { width: 22px; height: 22px; color: var(--accent-soft); }
.contact-item b { color: var(--text-strong); font-family: var(--font-head); display: block; margin-bottom: 3px; }
.contact-item span, .contact-item a { color: var(--text-muted); font-size: 0.95rem; }
.contact-item a:hover { color: var(--accent-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding-top: clamp(50px, 7vw, 90px); margin-top: 40px; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer .logo { margin-bottom: 18px; }
.footer-about p { color: var(--text-muted); font-size: 0.94rem; max-width: 320px; }
.footer-col h4 { font-size: 0.95rem; color: var(--text-strong); margin-bottom: 16px; font-family: var(--font-head); }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--text-muted); font-size: 0.92rem; transition: color .25s; }
.footer-col a:hover { color: var(--accent-soft); }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line-strong); transition: transform .3s, border-color .3s; }
.social a:hover { transform: translateY(-3px); border-color: var(--accent); }
.social svg { width: 18px; height: 18px; color: var(--text); }
/* The live open/closed badge replaces its own text at runtime, so the actual
   hours are stated separately here and in the bottom bar. */
.footer-hours-set { margin-top: 6px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.fb-hours { color: var(--text-muted); }
.footer-bottom { padding-block: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-faint); }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
/* ============================================================
   STICKY CONTACT RAIL
   Pinned to the right edge on desktop, a bottom action bar on phones.
   ============================================================ */
.contact-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 95; display: grid; gap: 6px;
}
.contact-rail .cr-item {
  display: grid; justify-items: center; gap: 4px;
  width: 74px; padding: 11px 6px 10px;
  border-radius: 12px 0 0 12px;
  color: #fff; font-family: var(--font-head); font-size: .625rem;
  font-weight: 600; line-height: 1.15; text-align: center; letter-spacing: .01em;
  box-shadow: -4px 6px 22px rgba(1, 25, 74, .22);
  transition: transform .28s var(--ease), filter .28s;
}
.contact-rail .cr-item svg { width: 21px; height: 21px; }
.contact-rail .cr-item:hover { transform: translateX(-5px); filter: brightness(1.07); }
.contact-rail .cr-wa { background: #25d366; }
.contact-rail .cr-tel { background: var(--accent); }
.contact-rail .cr-visit { background: var(--amber); }

@media (max-width: 860px) {
  /* Bottom bar: three equal targets, always within thumb reach. */
  .contact-rail {
    right: 0; left: 0; top: auto; bottom: 0; transform: none;
    grid-template-columns: repeat(3, 1fr); gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; box-shadow: 0 -6px 24px rgba(1, 25, 74, .16);
  }
  .contact-rail .cr-item {
    width: auto; border-radius: 0; padding: 9px 4px;
    flex-direction: row; box-shadow: none; font-size: .66rem;
  }
  .contact-rail .cr-item:hover { transform: none; }

  /* Must-fix §8: the bar is fixed, so it must never sit over content. Reserving
     its height on <body> keeps every page — footer, forms, buttons, the last
     line of any section — scrollable clear of it. --rail-h covers the bar plus
     the iOS home-indicator inset. */
  body.has-contact-rail { --rail-h: calc(62px + env(safe-area-inset-bottom)); }
  /* The reserve lives on the footer rather than on <body> so the footer's navy
     runs behind the bar — a white body gutter would show through on overscroll.
     scroll-margin then keeps the bar off anything the browser jumps to. */
  body.has-contact-rail .footer { padding-bottom: calc(var(--rail-h) + 26px); }
  body.has-contact-rail [id] { scroll-margin-bottom: var(--rail-h); }
}

/* ---------- WhatsApp greeting ---------- */
.wa-greet {
  position: fixed; z-index: 96;
  right: 92px; bottom: 26px; width: min(320px, calc(100vw - 40px));
  padding: 16px 18px 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 22px 60px rgba(1, 25, 74, .22);
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wa-greet.show { opacity: 1; transform: none; pointer-events: auto; }
.wa-greet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wa-greet-head svg { width: 22px; height: 22px; color: #25d366; }
.wa-greet-head b { font-family: var(--font-head); font-size: .92rem; color: var(--text-strong); }
.wa-greet p { font-size: .84rem; line-height: 1.55; color: var(--text); margin-bottom: 14px; }
.wa-greet .btn { width: 100%; justify-content: center; }
.wa-greet-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--glass); color: var(--text-muted); border: 0; cursor: pointer;
}
.wa-greet-x:hover { background: var(--glass-2); color: var(--text-strong); }
.wa-greet-x svg { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .wa-greet {
    right: 14px; left: 14px; width: auto;
    bottom: calc(62px + env(safe-area-inset-bottom) + 14px);
  }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .4s; }

/* Driven by transform (compositor-only) rather than width, so scrolling
   never triggers layout. */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; z-index: 101; background: var(--grad-navy); box-shadow: 0 0 12px var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .nav-inner { gap: 14px; }

  .nav-links { gap: 0; }
}
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
/* Nav switches to the drawer earlier than the content grids */
@media (max-width: 1080px) {
  .nav-label-full { display: inline; }
  .nav-label-short { display: none; }

  .logo-lockup, .nav.scrolled .logo-lockup { height: 60px; }
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  /* Mobile drawer: a solid panel that scrolls independently. It has to hold
     8 top-level items plus a 9-item submenu, which is taller than a phone
     viewport — hence overflow-y rather than a centred stack that clips. */
  .nav-links {
    position: fixed; top: 0; right: 0; z-index: 99;
    height: 100dvh; width: min(390px, 90vw);
    flex-direction: column; align-items: stretch; gap: 0;
    /* Must reset the desktop bar's `justify-content: center`. Centred content
       in a scrollable column overflows *upward* past the scroll origin, so the
       first items become unreachable — they can't be scrolled back into view. */
    justify-content: flex-start;
    padding: 0;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -22px 0 64px rgba(1, 25, 74, .20);
    transform: translateX(105%); transition: transform .45s var(--ease); display: flex;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  body.menu-open .nav-links { transform: translateX(0); }
  .nav-links > * { opacity: 0; transform: translateX(18px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  body.menu-open .nav-links > * { opacity: 1; transform: none; }
  .nav-links > *:nth-child(1) { transition-delay: .10s; }
  .nav-links > *:nth-child(2) { transition-delay: .15s; }
  .nav-links > *:nth-child(3) { transition-delay: .20s; }
  .nav-links > *:nth-child(4) { transition-delay: .25s; }
  .nav-links > *:nth-child(5) { transition-delay: .30s; }
  .nav-links > *:nth-child(6) { transition-delay: .35s; }
  .nav-links > *:nth-child(7) { transition-delay: .40s; }
  .nav-links > *:nth-child(8) { transition-delay: .45s; }
  .nav-links > *:nth-child(9) { transition-delay: .50s; }
  /* Left-aligned rows with hairline dividers — scannable at a glance and
     honest about being a list, rather than a floating centred stack. */
  .nav-links > a,
  .nav-links > .nav-drop > .nav-drop-top {
    display: flex; align-items: center;
    padding: 15px max(24px, env(safe-area-inset-right, 0px)) 15px max(24px, env(safe-area-inset-left, 0px));
    border-radius: 0; text-align: left;
    min-height: 54px;
    font-size: 0.98rem; font-weight: 500; letter-spacing: -0.005em;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    white-space: normal;
  }
  .nav-links > a:hover,
  .nav-links > .nav-drop > .nav-drop-top:hover { background: var(--glass); }
  /* Current page gets an amber marker instead of the desktop underline */
  .nav-links > a.active,
  .nav-links > .nav-drop > .nav-drop-top.active {
    border-left-color: var(--amber); background: var(--glass);
    color: var(--text-strong); font-weight: 600;
  }
  .nav-links a::after { display: none; }
  .nav-links .nav-drop { border-bottom: 1px solid var(--line); }
  .nav-links .nav-drop > .nav-drop-top { border-bottom: 0; padding-right: 62px; }

  /* Drawer CTA sits at the end of the list, full width */
  .nav-links > .btn {
    display: inline-flex; justify-content: center;
    margin: 22px max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
    padding-block: 15px; flex: 0 0 auto;
    /* Stretch would otherwise size from the content box and ignore the margins,
       pushing the button past the panel's right edge. */
    width: auto; align-self: stretch;
  }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Headline, trust bar and CTAs lead on phones — the brief's "understand what
     we do and how to contact us within 15 seconds". The image follows. */
  .hero-visual { max-width: 460px; margin-inline: auto; }
  .hero-media { aspect-ratio: 16/11; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .svc-cols { grid-template-columns: 1fr; gap: 18px; }
  .svc-head { flex-wrap: wrap; }
  .timeline::before { left: 18px; }
  .tl-item { width: 100%; left: 0 !important; padding: 0 0 34px 50px; text-align: left !important; }
  .tl-item .tl-dot { left: 10px !important; right: auto !important; }
  .badge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 520px) {
  body { font-size: 15.5px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-group { width: 100%; }
  .hero-proof .pill { flex: 1 1 40%; }
  /* The contact rail is a bottom bar here, so lift the back-to-top above it. */
  .to-top { bottom: 88px; }

  /* Must-fix §5: keep the phone hero tight so the solutions grid is reached in
     about two screens. The quote CTA keeps full width; Call and WhatsApp share
     the row beneath it rather than stacking into three tall blocks. */
  .hero .btn-group { display: grid; gap: 12px; margin-top: 22px; }
  .hero { padding-top: 118px; padding-bottom: 30px; }
  /* Shorten the supporting image by widening its ratio. Capping its height
     instead would fight the 16/11 aspect-ratio set above and collapse its
     width, since the ratio then resolves width from the capped height. */
  .hero-media { aspect-ratio: 16 / 9; }
  .hero-services { margin-top: 14px; font-size: .88rem; line-height: 1.6; }
  .hero-micro { margin-top: 14px; gap: 8px 16px; font-size: .84rem; }
  .hero .lead { font-size: 1rem; }
}

/* ============================================================
   PREMIUM LAYER — depth, motion & fluid responsiveness
   Applies site-wide (loaded by every page)
   ============================================================ */

/* ---------- Ambient depth ---------- */
/* Slow-drifting aurora so the background never feels static */
body::before { animation: auroraDrift 26s ease-in-out infinite alternate; }
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.09); }
}

/* Soft light seam between stacked sections */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(760px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1, 25, 74, 0.14), transparent);
}

/* ---------- Typography rhythm ---------- */
h1 { font-size: clamp(2.15rem, 1.2rem + 3.6vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.3vw, 3.05rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.18rem, 1rem + 0.7vw, 1.62rem); }
.section-head p, .lead { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Animated gradient on highlighted words */
.grad-text {
  background-size: 220% 100%;
  animation: gradShift 9s ease-in-out infinite alternate;
}
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- Buttons: shine sweep + real focus rings ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn-ghost::after { background: linear-gradient(115deg, transparent 35%, rgba(20, 53, 124, 0.22) 50%, transparent 65%); }
.btn:active { transform: translateY(-1px) scale(0.985); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Cards: gradient edge, lift, reactive icon ---------- */
.card {
  transition: transform 0.55s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.5s var(--ease);
  transform-style: preserve-3d;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(20, 53, 124, 0.55), rgba(30, 74, 156, 0.25) 45%, rgba(231, 148, 2, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s; pointer-events: none;
}
.card:hover { box-shadow: 0 26px 60px rgba(1, 25, 74, 0.12); }
.card:hover::after { opacity: 1; }
.card-icon { transition: transform 0.5s var(--ease), box-shadow 0.5s, background 0.5s; }
.card:hover .card-icon {
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
  box-shadow: 0 0 26px rgba(1, 25, 74, 0.35);
}
.card-icon svg { transition: color 0.4s; }
.card:hover .card-icon svg { color: var(--accent); }

/* Steps get the same lift so numbered flows feel alive */
.step { transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.5s; }
.step:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong); background: var(--glass-2);
  box-shadow: 0 20px 44px rgba(1, 25, 74, 0.10);
}

/* Media panels breathe on hover */
.split-media img, .hero-media img { transition: transform 1.1s var(--ease), opacity 0.6s; }
.split-media:hover img, .hero-media:hover img { transform: scale(1.05); opacity: 1; }

/* ---------- Scroll reveal: directions + auto stagger ---------- */
[data-reveal] { transition-duration: 0.85s; }
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="left"].in, [data-reveal="right"].in, [data-reveal="zoom"].in { transform: none; }
/* Index-driven stagger set by JS for any grid child */
[style*="--i"][data-reveal] { transition-delay: calc(var(--i) * 80ms); }

/* Section headings sweep their underline in */
.section-head.center h2 { position: relative; }

/* ---------- Scroll-driven flourishes (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy, .hero-visual {
      animation: heroFloatOut linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 90%;
    }
    @keyframes heroFloatOut { to { opacity: 0.25; transform: translateY(-40px) scale(0.98); } }
  }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 96px; z-index: 90;
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line-strong); backdrop-filter: blur(12px);
  color: var(--text-strong);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0.35s, border-color 0.3s, box-shadow 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Responsiveness: fluid grids everywhere ---------- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hero-card.c1 { left: 10px; }
  .hero-card.c2 { right: 10px; }
}
@media (max-width: 720px) {
  :root { --section-y: clamp(52px, 11vw, 96px); }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 30px; }
  .to-top { bottom: 88px; right: 18px; width: 42px; height: 42px; }
}
@media (max-width: 520px) {
  .marquee-track span { font-size: 1.1rem; gap: 34px; }
  .marquee-track { gap: 34px; }
  .hero-proof { gap: 10px; margin-top: 30px; padding-top: 22px; }
  .hero-proof .pill { flex: 1 1 100%; }
  .eyebrow { font-size: 0.7rem; padding: 7px 13px; letter-spacing: 0.16em; }
  .tst blockquote { font-size: 0.97rem; }
}
@media (max-width: 380px) {

  .logo-lockup, .nav.scrolled .logo-lockup { height: 52px; }
}

/* Touch devices: drop hover-only motion and heavy blur for smooth scrolling */
@media (hover: none) {
  .card:hover, .step:hover { transform: none; }
  .split-media:hover img, .hero-media:hover img { transform: none; }
}

/* Honour reduced motion for everything added above */
@media (prefers-reduced-motion: reduce) {
  body::before, .grad-text { animation: none !important; }
  .to-top { transition: opacity .2s; }
}

/* ---------- Vertical rhythm: tighter, more deliberate ---------- */
:root { --section-y: clamp(58px, 7vw, 112px); }

/* ---------- Hero polish ---------- */
.hero-proof .pill {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(1, 25, 74, .07), rgba(1, 25, 74, .02));
  border-color: var(--line-strong);
  transition: transform .45s var(--ease), border-color .35s, box-shadow .45s;
}
.hero-proof .pill:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 53, 124, .45);
  box-shadow: 0 14px 34px rgba(1, 25, 74, 0.11), 0 0 26px rgba(1, 25, 74, .18);
}
.hero-proof .pill b {
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-size: 1.45rem;
}

/* Glow ring + corner ticks around the hero image */
.hero-media {
  box-shadow: var(--shadow-md), 0 0 70px rgba(1, 25, 74, 0.12);
}
.hero-visual::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(1, 25, 74, 0.18), transparent 70%);
  filter: blur(26px);
  animation: auroraDrift 14s ease-in-out infinite alternate;
}
.hero-media::before {
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  border-radius: 22px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 22px no-repeat;
  opacity: .55;
}

/* Live status cards read as instrument readouts */
.hero-card { box-shadow: var(--shadow-sm), 0 0 30px rgba(1, 25, 74, 0.11); }
.hero-card .dot { animation: pulse 1.8s infinite; }

/* ---------- CTA block ---------- */
.cta-block { position: relative; overflow: hidden; }
.cta-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(1, 25, 74, 0.16), transparent 70%);
}

/* ---------- Marquee refinement ---------- */
.marquee-track span { transition: color .4s; }
.marquee-track span:hover { color: var(--text); }

/* Keep the hero headline from swallowing the fold on large screens */
.hero h1 { font-size: clamp(2.05rem, 1.1rem + 3.1vw, 3.75rem); }

/* The closed mobile drawer sits off-canvas — clip it at the root so it can
   never create a horizontal scrollbar on any page. */
html { overflow-x: clip; }
@media (max-width: 1080px) {
  .nav-links:not(.is-open) { visibility: hidden; }
  body.menu-open .nav-links { visibility: visible; }
  /* Stop the page scrolling underneath the open drawer */
  body.menu-open { overflow: hidden; }
  .nav-drop { position: relative; }
}

/* ============================================================
   ABOUT PAGE — editorial layout & credential design
   ============================================================ */

/* ---------- Hero: copy + glass credential panel ---------- */
.about-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 4.5vw, 64px); align-items: start;
}
.about-hero h1 { margin: 20px 0 18px; font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }
.about-hero .lead { max-width: 560px; }

/* Credential chips */
.cred-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cred-chips li {
  font-family: var(--font-head); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--glass);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .3s, border-color .3s, transform .35s var(--ease);
}
.cred-chips li::before {
  content: ""; width: 12px; height: 7px; flex: none;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-2px);
}
.cred-chips li:hover { color: var(--text-strong); border-color: rgba(20, 53, 124, .45); transform: translateY(-2px); }

/* At-a-glance panel */
.about-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.about-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.about-panel > * { position: relative; }
.panel-head {
  display: flex; align-items: center; gap: 10px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.panel-head b { color: var(--text-strong); font-weight: 600; }
.panel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34e07f;
  box-shadow: 0 0 12px #34e07f; animation: pulse 2s infinite;
}
.panel-rows { display: grid; gap: 2px; margin-top: 6px; }
.panel-rows > div {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.panel-rows dt {
  font-size: 0.82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.panel-rows dd {
  font-family: var(--font-head); font-size: 0.94rem; color: var(--text-strong);
  text-align: right; font-weight: 500;
}
.panel-foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.panel-ring {
  flex: none; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .96)) padding-box,
    var(--grad-accent) border-box;
  box-shadow: 0 0 34px rgba(1, 25, 74, .22);
  animation: ringGlow 4.5s ease-in-out infinite;
}
@keyframes ringGlow {
  0%, 100% { box-shadow: 0 0 26px rgba(1, 25, 74, .16); }
  50%      { box-shadow: 0 0 48px rgba(1, 25, 74, .38); }
}
.panel-ring b {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel-ring span { font-size: 0.7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.panel-foot p { font-size: 0.88rem; color: var(--text-muted); }

/* ---------- Origin story: badge + pull quote ---------- */
.story-media { display: grid; gap: 22px; }
.story-media .split-media { position: relative; aspect-ratio: 5/4; }
.media-badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
}
.media-badge b {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  background: var(--grad-amber); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.media-badge span { font-size: 0.74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.pull-quote {
  position: relative; padding: 26px 28px 26px 62px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(1, 25, 74, .08), rgba(1, 25, 74, .02));
  font-family: var(--font-head); font-size: 1.06rem; line-height: 1.5; color: var(--text-strong);
}
.pull-quote::before {
  content: "\201C"; position: absolute; left: 20px; top: 6px;
  font-family: var(--font-head); font-size: 3.6rem; line-height: 1;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pull-quote cite {
  display: block; margin-top: 12px; font-style: normal;
  font-size: 0.8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft);
}

/* ---------- Timeline: glowing rail that fills as you scroll ---------- */
.timeline { padding-block: 6px; }
.tl-rail {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -50% 0;
  background: var(--grad-navy); transform-origin: top;
  box-shadow: 0 0 16px rgba(1, 25, 74, .7);
  scale: 1 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tl-rail {
      animation: railFill linear both;
      animation-timeline: view();
      animation-range: entry 30% exit 40%;
    }
    @keyframes railFill { to { scale: 1 1; } }
  }
}
@supports not (animation-timeline: view()) { .tl-rail { scale: 1 1; opacity: .55; } }
/* Single-column timeline: the fill rail must follow .timeline::before to the
   left edge — left at 50% it drew a stray line straight through the cards. */
@media (max-width: 860px) {
  .tl-rail { left: 18px; }
}

.tl-dot { transition: transform .4s var(--ease), box-shadow .4s; }
.tl-item:hover .tl-dot { transform: scale(1.45); box-shadow: 0 0 22px var(--accent); }
.tl-year { font-size: 1.85rem; letter-spacing: -0.02em; }
.tl-card {
  background: linear-gradient(150deg, rgba(1, 25, 74, .06), rgba(1, 25, 74, .015));
  box-shadow: var(--shadow-sm);
}
.tl-card:hover { box-shadow: 0 18px 40px rgba(1, 25, 74, 0.11); border-color: rgba(20, 53, 124, .4); }

/* ---------- Credentials: gold seals & awards ---------- */
.accred .seal { transition: transform .5s var(--ease), box-shadow .5s; }
.accred:hover .seal { transform: rotate(-6deg) scale(1.07); box-shadow: 0 0 28px rgba(231, 148, 2, .35); }
.award .trophy { transition: transform .5s var(--ease), box-shadow .5s; }
.award:hover .trophy { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 34px rgba(231, 148, 2, .4); }
.award .yr {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  border: 1px solid rgba(231, 148, 2, .35); background: rgba(231, 148, 2, .08);
}

/* ---------- Values: oversized ghost numerals ---------- */
.values-grid .card { padding-top: clamp(28px, 3.4vw, 40px); }
.values-grid .card-tag {
  top: 6px; right: 18px;
  font-family: var(--font-head); font-weight: 800; font-size: 4.6rem;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(1, 25, 74, .12);
  transition: -webkit-text-stroke-color .5s, transform .6s var(--ease);
  pointer-events: none;
}
.values-grid .card:hover .card-tag {
  -webkit-text-stroke-color: rgba(20, 53, 124, .4);
  transform: translateY(-4px);
}

/* ---------- About responsive ---------- */
@media (max-width: 1080px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-panel { max-width: 620px; }
}
@media (max-width: 720px) {
  .panel-rows > div { flex-direction: column; gap: 4px; }
  .panel-rows dd { text-align: left; }
  .panel-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .values-grid .card-tag { font-size: 3.4rem; }
  .pull-quote { padding: 22px 20px 22px 52px; font-size: 1rem; }
}

/* Keep value headings clear of the ghost numeral */
.values-grid .card h3 { padding-right: 90px; }
.values-grid .card-tag { z-index: 0; }
.values-grid .card > *:not(.card-tag) { position: relative; z-index: 1; }
@media (max-width: 720px) { .values-grid .card h3 { padding-right: 64px; } }

/* About stat cards get a gradient cap so the row reads as instrumentation */
.page-about .stat::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 56%; height: 2px; border-radius: 2px;
  background: var(--grad-accent); opacity: .55;
  transition: width .5s var(--ease), opacity .4s;
}
.page-about .stat:hover::before { width: 78%; opacity: 1; }

/* Long CTA labels must be allowed to wrap on narrow screens, otherwise their
   min-content width forces the whole grid wider than the viewport. */
.about-hero-grid > * { min-width: 0; }
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { --pad: 16px 24px; font-size: 1rem; }
}

/* ============================================================
   SECURITY SOLUTIONS — service rail, panel design & speed work
   ============================================================ */

/* ---------- Sticky service rail with scroll-spy ---------- */
.svc-rail {
  position: sticky; top: 0; z-index: 80;
  padding: 10px 0;
  border-block: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s, padding .35s var(--ease);
}
.svc-rail.stuck {
  top: 74px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px) saturate(150%);
  border-block-color: var(--line);
  box-shadow: 0 12px 30px rgba(1, 25, 74, 0.10);
}
.svc-rail-track {
  display: flex; gap: 8px;
  max-width: var(--wrap); margin-inline: auto;
  padding: 4px var(--gutter);
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  overscroll-behavior-x: contain;
}
.svc-rail-track::-webkit-scrollbar { display: none; }
.svc-rail-track a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 0.83rem; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid transparent;
  transition: color .25s, background .25s, border-color .25s, transform .3s var(--ease);
}
.svc-rail-track a i {
  font-style: normal; font-size: 0.7rem; letter-spacing: .06em;
  color: var(--text-faint); transition: color .25s;
}
.svc-rail-track a:hover { color: var(--text-strong); background: var(--glass); transform: translateY(-1px); }
.svc-rail-track a.active {
  color: #ffffff; background: var(--grad-navy);
  border-color: transparent; box-shadow: 0 6px 20px rgba(1, 25, 74, .35);
}
.svc-rail-track a.active i { color: rgba(255, 255, 255, .75); }

/* Hero index chips mirror the active state */
.svc-toc a.active { color: var(--text-strong); border-color: var(--accent); background: var(--glass-2); }

/* Anchored services must clear the pinned nav + rail */
.svc[id] { scroll-margin-top: 150px; }

/* ---------- Service panels ---------- */
.svc {
  /* NOTE: `content-visibility: auto` was tried here and rejected — Chromium
     ghosted CTAs from skipped panels over the navbar and the intrinsic-size
     guess made anchor jumps unstable. Paint cost is handled below instead. */
  contain: paint style;
  /* Large translucent panels are cheaper without a live blur. */
  backdrop-filter: none;
  background: linear-gradient(158deg, rgba(1, 25, 74, .055), rgba(1, 25, 74, .012));
}
/* Ghost numeral watermark */
.svc::after { z-index: 0; }
.svc > * { position: relative; z-index: 1; }
.svc .svc-num {
  position: relative;
  overflow: hidden;
}
.svc .svc-num::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(1, 25, 74, .35) 50%, transparent 60%);
  transform: translateX(-140%);
  transition: transform .8s var(--ease);
}
.svc:hover .svc-num::after { transform: translateX(140%); }

/* Head gets a hairline rule so each panel reads as a spec sheet */
.svc-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.svc-head .svc-icon { transition: transform .5s var(--ease), box-shadow .5s, border-color .4s; }
.svc:hover .svc-head .svc-icon {
  transform: rotate(-6deg) scale(1.08);
  border-color: rgba(20, 53, 124, .5);
  box-shadow: 0 0 26px rgba(1, 25, 74, .3);
}

/* Two spec columns split by a vertical hairline */
.svc-cols { position: relative; gap: clamp(24px, 3vw, 44px); }
.svc-cols::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
.svc-sub h4 { display: flex; align-items: center; gap: 10px; }
.svc-sub h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Rows light up individually on hover */
.svc-sub .card-list li { transition: color .25s, transform .3s var(--ease); }
.svc-sub .card-list li:hover { color: var(--text-strong); transform: translateX(3px); }

/* Advantage strip: animated accent edge */
.svc-adv { position: relative; overflow: hidden; }
.svc-adv::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-navy); transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.svc:hover .svc-adv::before { transform: scaleY(1); }
.svc-adv .adv-mark { box-shadow: 0 0 20px rgba(1, 25, 74, .35); }

/* ---------- FAQ accordion polish ---------- */
.acc-item { transition: border-color .35s, background .35s; }
.acc-item.open { border-color: rgba(20, 53, 124, .4); background: var(--glass-2); }
.acc-head .ico { transition: transform .4s var(--ease), color .3s; }
.acc-item.open .acc-head .ico { color: var(--accent-soft); }
.acc-head:hover h3 { color: var(--accent-soft); }
.acc-head h3 { transition: color .3s; }

/* ---------- Speed: hint the compositor only where it pays ---------- */
.svc, .card { will-change: auto; }
.hero-mesh, .marquee-track { will-change: transform; }

/* ---------- Solutions responsive ---------- */
@media (max-width: 1080px) {
  .svc-rail.stuck { top: 66px; }
}
@media (max-width: 860px) {
  .svc-cols::before { display: none; }
  .svc[id] { scroll-margin-top: 130px; }
}
@media (max-width: 520px) {
  .svc-rail-track a { font-size: 0.78rem; padding: 8px 13px; }
  .svc-toc a { font-size: 0.8rem; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-adv::before { transform: scaleY(1); }
}

/* `overflow-x: hidden` on the body turns it into a scroll container, which
   silently disables `position: sticky` for its descendants. `clip` gives the
   same protection against sideways scroll while keeping sticky working. */
body { overflow-x: clip; }
.svc-rail-sentinel { height: 0; }

/* Buttons were permanently promoted to their own compositor layer via
   will-change. Inside a `content-visibility: auto` subtree that produced stale
   layers painting at the wrong offset (a CTA ghosting over the navbar), so
   promote only while the pointer is actually on the button. */
.btn { will-change: auto; }
.btn:hover, .btn:focus-visible { will-change: transform; }

/* ---------- Solutions hero: copy + inclusions panel ---------- */
.svc-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.svc-hero-grid > * { min-width: 0; }
.page-hero h1 { margin: 20px 0 18px; }
.svc-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.svc-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.svc-panel > * { position: relative; }
.svc-panel-list { display: grid; gap: 2px; margin-top: 6px; }
.svc-panel-list li {
  padding: 13px 0 13px 26px; position: relative;
  border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.svc-panel-list li::before {
  content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.svc-panel-list b {
  display: block; font-family: var(--font-head); font-size: 1rem; color: var(--text-strong);
}
.svc-panel-list span { font-size: 0.86rem; color: var(--text-muted); }
.panel-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--accent-soft);
  transition: gap .3s var(--ease), color .3s;
}
.panel-link svg { width: 17px; height: 17px; }
.panel-link:hover { gap: 14px; color: var(--text-strong); }

@media (max-width: 1080px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-panel { max-width: 620px; }
}

/* ============================================================
   SPEED PASS — cheaper compositing while scrolling
   ============================================================ */

/* Fixed gradient layers move on the compositor only. */
body::before { will-change: transform; }

/* Two stacked live blurs (navbar + service rail) is the heaviest paint during
   scroll — keep the effect, halve the radius and drop the saturation pass. */
.nav.scrolled { backdrop-filter: blur(12px); }
.svc-rail.stuck { backdrop-filter: blur(10px); }

/* Snappier reveals: the page should feel quick, not leisurely. */
[data-reveal] { transition-duration: 0.55s; }
[style*="--i"][data-reveal] { transition-delay: calc(var(--i) * 55ms); }

/* Pricing kept three columns down to 720px, which overflowed tablets. */
@media (max-width: 1000px) and (min-width: 721px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Headlines scrolling under the bar were showing through at 82% — the bar has
   to stay readable over bright hero type. */
.nav.scrolled { background: rgba(255, 255, 255, 0.93); }
.svc-rail.stuck { background: rgba(255, 255, 255, 0.93); }

/* ---------- Service rail: pinned under the navbar at all times ---------- */
.svc-rail {
  position: fixed; top: var(--nav-h, 92px); left: 0; right: 0; z-index: 79;
  padding: 8px 0;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(1, 25, 74, 0.10);
  transition: top .4s var(--ease), padding .35s var(--ease), background .35s;
}
.svc-rail.condensed { padding: 5px 0; }
/* Content clears the navbar + rail; the in-hero chip row is now redundant. */
body.has-svc-rail .page-hero { padding-top: calc(var(--nav-h, 92px) + var(--rail-h, 60px) + 34px); }
body.has-svc-rail .svc-toc { display: none; }
body.has-svc-rail .svc[id] { scroll-margin-top: calc(var(--nav-h, 92px) + var(--rail-h, 60px) + 18px); }

/* With the rail permanently pinned, the navbar above it can never be
   transparent — content would bleed through the seam between the two bars. */
body.has-svc-rail .nav {
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
body.has-svc-rail .svc-rail { top: calc(var(--nav-h, 92px) - 1px); }

/* 94% still let bright headings ghost through at ~6%. Bars that sit over
   scrolling content are now effectively solid. */
.nav.scrolled, body.has-svc-rail .nav { background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); }
.svc-rail { background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); }

/* ---------- Rail arrows: make the sideways scroll discoverable ---------- */
.svc-rail-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-strong);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(1, 25, 74, 0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s, transform .3s var(--ease), border-color .3s, box-shadow .3s;
  z-index: 2;
}
.svc-rail-arrow.show { opacity: 1; visibility: visible; pointer-events: auto; }
.svc-rail-arrow:hover {
  border-color: var(--accent); color: var(--accent-soft);
  box-shadow: 0 0 20px rgba(1, 25, 74, .35);
}
.svc-rail-arrow svg { width: 17px; height: 17px; }
.svc-rail-arrow.prev { left: max(10px, calc(var(--gutter) - 30px)); }
.svc-rail-arrow.prev svg { transform: rotate(180deg); }
.svc-rail-arrow.next { right: max(10px, calc(var(--gutter) - 30px)); }
/* Gentle nudge so the arrow reads as "there's more this way" */
.svc-rail-arrow.next.show { animation: railNudge 2.6s ease-in-out infinite; }
@keyframes railNudge {
  0%, 70%, 100% { transform: translateX(0); }
  80%           { transform: translateX(4px); }
  90%           { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .svc-rail-arrow.next.show { animation: none; } }
/* Keep chips clear of the arrows */
.svc-rail-track { padding-inline: max(52px, var(--gutter)); }

/* ============================================================
   INSTALLATIONS & PROJECTS — portfolio design
   ============================================================ */

/* ---------- Hero: copy + handover ledger ---------- */
.proj-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.proj-hero-grid > * { min-width: 0; }
.proj-hero h1 { margin: 20px 0 18px; }
.proj-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.proj-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.proj-panel > * { position: relative; }
.proj-ledger { counter-reset: pl; margin-top: 6px; }
.proj-ledger li {
  counter-increment: pl;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 14px; padding: 13px 0 13px 30px; position: relative;
  border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.proj-ledger li::before {
  content: counter(pl, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: .06em;
  color: var(--text-faint);
}
.pl-loc { font-family: var(--font-head); font-weight: 600; color: var(--text-strong); font-size: 0.98rem; }
.pl-meta { grid-column: 1; font-size: 0.82rem; color: var(--text-muted); }
.pl-time {
  grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-head); font-size: 0.76rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-soft); padding: 5px 12px; border-radius: 100px;
  border: 1px solid rgba(20, 53, 124, .28); background: rgba(1, 25, 74, .08);
  white-space: nowrap;
}
.proj-panel-foot { margin-top: 18px; font-size: 0.86rem; color: var(--text-muted); }

/* Sector experience: client names sit in .cred-chips inside a card, so the
   list needs less top gap than it has on the About hero. */
.card .cred-chips { margin-top: 20px; }
/* Banking holds far more names than corporate — give it the wider column and
   let the cards size to their content instead of stretching to a void.
   Declared here (not inline) so the 520px single-column collapse still wins. */
.grid.sector-grid { grid-template-columns: 1.55fr 1fr; align-items: start; }
@media (max-width: 520px) { .grid.sector-grid { grid-template-columns: 1fr; } }
.sector-note {
  margin-top: 26px; text-align: center; font-size: 0.84rem;
  color: var(--text-faint); max-width: 70ch; margin-inline: auto;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 0.86rem; font-weight: 500;
  color: var(--text);
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--glass);
  transition: color .25s, background .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.filter-chip i {
  font-style: normal; font-size: 0.72rem; padding: 2px 7px; border-radius: 100px;
  background: rgba(1, 25, 74, .08); color: var(--text-muted);
}
.filter-chip:hover { color: var(--text-strong); border-color: rgba(20, 53, 124, .4); transform: translateY(-2px); }
.filter-chip.active {
  color: #ffffff; background: var(--grad-navy); border-color: transparent;
  box-shadow: 0 8px 24px rgba(1, 25, 74, .35);
}
.filter-chip.active i { background: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
/* ---------- Filter bar: horizontal-scroll affordance ----------
   The wrapper (added by main.js) carries the edge fades and the chevron, so
   they stay put while the bar itself scrolls underneath. */
.filter-scroll { position: relative; }
.filter-scroll::before, .filter-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 54px;
  pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 2;
}
.filter-scroll::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.filter-scroll::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.filter-scroll.can-scroll:not(.at-start)::before { opacity: 1; }
.filter-scroll.can-scroll:not(.at-end)::after { opacity: 1; }
.filter-cue {
  position: absolute; right: 2px; top: 50%; translate: 0 -50%; z-index: 3;
  display: none; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #ffffff; background: rgba(1, 25, 74, .95);
  border: 1px solid var(--line-strong); box-shadow: 0 4px 14px rgba(1, 25, 74, 0.10);
  animation: cueNudge 1.8s var(--ease) infinite;
}
.filter-cue svg { width: 17px; height: 17px; }
.filter-scroll.can-scroll:not(.at-end) .filter-cue { display: grid; }
/* Keep the last chip reachable instead of sitting under the chevron */
.filter-scroll.can-scroll .filter-bar { padding-right: 42px; }
@keyframes cueNudge { 0%, 70%, 100% { translate: 0 -50%; } 85% { translate: 4px -50%; } }
@media (prefers-reduced-motion: reduce) { .filter-cue { animation: none; } }

.filter-empty { text-align: center; color: var(--text-muted); margin-bottom: 24px; }
.filter-empty a { color: var(--accent-soft); }

/* Filtered items collapse out of the grid without a layout jump */
.filtered-out {
  display: none !important;
}

/* ---------- Case-study cards ---------- */
.proj-grid { align-items: stretch; }
.proj-card {
  display: flex; flex-direction: column;
  padding-top: clamp(22px, 2.6vw, 30px);
  animation: projIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes projIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .proj-card { animation: none; } }

/* Soft pointer-tracked glow behind each case study. Must-fix §1: the blueprint
   square-grid tile that used to sit under this glow has been removed — it was
   the same repeating pattern the client flagged as busy and template-like. */
.proj-card::before {
  background:
    radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(1, 25, 74, .13), transparent 70%);
  opacity: .55;
}
.proj-card:hover::before { opacity: 1; }

.proj-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.proj-icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12));
  border: 1px solid var(--line-strong);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.proj-icon svg { width: 26px; height: 26px; color: var(--accent-soft); }
.proj-card:hover .proj-icon {
  transform: rotate(-6deg) scale(1.07);
  border-color: rgba(20, 53, 124, .5);
  box-shadow: 0 0 26px rgba(1, 25, 74, .3);
}
.proj-no {
  font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(1, 25, 74, .14);
  transition: -webkit-text-stroke-color .5s;
}
.proj-card:hover .proj-no { -webkit-text-stroke-color: rgba(20, 53, 124, .45); }

.proj-sector {
  display: inline-block; margin: 18px 0 10px;
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber-ink);
}
.proj-card h3 { font-size: 1.22rem; margin-bottom: 14px; }
.proj-meta {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.proj-meta li {
  font-size: 0.76rem; font-family: var(--font-head); color: var(--text);
  padding: 5px 11px; border-radius: 8px;
  background: rgba(1, 25, 74, .05); border: 1px solid var(--line);
}
.proj-card p { flex: 1; }
.proj-card .card-link { margin-top: 18px; }
.proj-card .card-link svg { width: 16px; height: 16px; }

/* ---------- Process steps: connected rail ---------- */
.page-projects .steps { position: relative; }
.page-projects .steps::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 52px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(1, 25, 74, .5), rgba(30, 74, 156, .5), transparent);
}
.page-projects .step { background: linear-gradient(160deg, rgba(1, 25, 74, .06), rgba(1, 25, 74, .015)); }
.page-projects .step .step-no { position: relative; z-index: 1; }

/* ---------- Projects responsive ---------- */
@media (max-width: 1080px) {
  .proj-hero-grid { grid-template-columns: 1fr; }
  .proj-panel { max-width: 620px; }
}
@media (max-width: 1180px) {
  .page-projects .steps::before { display: none; }
}
@media (max-width: 720px) {
  .proj-ledger li { grid-template-columns: 1fr; }
  .pl-time { grid-row: auto; justify-self: start; margin-top: 6px; }
  .filter-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }
}

/* Ledger rows: pin each part to its cell — spanning `grid-row` without an
   explicit column let auto-placement drop the badge into column 1. */
.pl-loc { grid-column: 1; grid-row: 1; }
.pl-meta { grid-column: 1; grid-row: 2; }
.pl-time { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
@media (max-width: 720px) {
  .pl-time { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Anchored sections must clear the fixed navbar */
:target, [id]:is(section, article) { scroll-margin-top: 110px; }

/* ============================================================
   PRICING & PACKAGES — quote-sheet design
   ============================================================ */

/* ---------- Hero: copy + inclusions panel ---------- */
.price-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.price-hero-grid > * { min-width: 0; }
.price-hero h1 { margin: 20px 0 18px; }
.price-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.price-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.price-panel > * { position: relative; }
.price-includes { display: grid; gap: 2px; margin-top: 6px; }
.price-includes li {
  position: relative; padding: 12px 0 12px 28px;
  font-size: 0.94rem; color: var(--text);
  border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.price-includes li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-from {
  margin-top: 20px; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid rgba(20, 53, 124, .28);
  background: linear-gradient(140deg, rgba(1, 25, 74, .12), rgba(30, 74, 156, .05));
}
.pf-label {
  display: block; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.pf-value {
  display: block; margin: 4px 0 2px;
  font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; line-height: 1;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pf-note { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Plan cards ---------- */
.plan {
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .5s var(--ease);
}
.plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(20, 53, 124, .5), rgba(30, 74, 156, .2) 50%, rgba(231, 148, 2, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s; pointer-events: none;
}
.plan:hover::after { opacity: 1; }
.plan:hover { box-shadow: 0 26px 60px rgba(1, 25, 74, 0.12); }
.plan > * { position: relative; z-index: 1; }

.plan-icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12));
  border: 1px solid var(--line-strong);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.plan-icon svg { width: 24px; height: 24px; color: var(--accent-soft); }
.plan:hover .plan-icon {
  transform: rotate(-6deg) scale(1.07);
  border-color: rgba(20, 53, 124, .5);
  box-shadow: 0 0 24px rgba(1, 25, 74, .3);
}

/* Price block reads as a quote line */
.plan .price {
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.plan .price b {
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
}
.plan .plan-list li { transition: color .25s, transform .3s var(--ease); }
.plan .plan-list li:hover { color: var(--text-strong); transform: translateX(3px); }
.plan-foot {
  font-size: 0.78rem; color: var(--text-faint); margin-bottom: 16px;
  padding-top: 4px; border-top: 1px dashed rgba(1, 25, 74, .07);
  padding-block-start: 14px;
}

/* Featured plan lifts out of the row */
.plan.featured {
  background: linear-gradient(180deg, rgba(1, 25, 74, .1), rgba(1, 25, 74, .04));
  box-shadow: var(--shadow-glow), 0 22px 60px rgba(1, 25, 74, 0.11);
}
@media (min-width: 1001px) {
  .plan.featured { transform: translateY(-14px) scale(1.02); z-index: 2; }
  .plan.featured:hover { transform: translateY(-20px) scale(1.02); }
}
.plan.featured .badge { box-shadow: 0 8px 22px rgba(1, 25, 74, .45); animation: badgePulse 3.4s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(1, 25, 74, .3); }
  50%      { box-shadow: 0 8px 30px rgba(1, 25, 74, .6); }
}
@media (prefers-reduced-motion: reduce) { .plan.featured .badge { animation: none; } }

/* ---------- Component table ---------- */
.page-pricing .table-wrap {
  background: linear-gradient(160deg, rgba(1, 25, 74, .05), rgba(1, 25, 74, .012));
  box-shadow: var(--shadow-md);
}
.page-pricing thead th { background: rgba(246, 249, 253, .96); backdrop-filter: blur(8px); }
.tier {
  display: inline-block; padding: 5px 12px; border-radius: 100px;
  font-size: 0.74rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--text);
}
.tier-best {
  color: var(--amber-lite); border-color: rgba(231, 148, 2, .38);
  background: rgba(231, 148, 2, .1);
}
.page-pricing tbody tr { transition: background .25s; }
.page-pricing tbody tr:hover { background: rgba(1, 25, 74, .05); }
.page-pricing tbody tr:hover th { color: var(--accent-soft); }
.page-pricing td:last-child .price-cell, .page-pricing tbody td:last-child { color: var(--amber-ink); }

/* ---------- AMC tiers ---------- */
.amc { display: flex; flex-direction: column; }
.amc-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 14px 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
}
.amc-price b {
  font-size: 2.05rem; font-weight: 800; letter-spacing: -0.03em;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.amc-price small { color: var(--text-muted); font-size: 0.9rem; }
.amc-best { border-color: rgba(20, 53, 124, .38); }
.amc-flag {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(20, 53, 124, .3); background: rgba(1, 25, 74, .1);
}

/* ---------- Guarantee strip ---------- */
.guarantee { text-align: center; padding: clamp(22px, 2.6vw, 30px); }
.guarantee .card-icon { margin-inline: auto; width: 48px; height: 48px; border-radius: 13px; }
.guarantee .card-icon svg { width: 22px; height: 22px; }
.guarantee h3 { font-size: 1.02rem; margin-bottom: 6px; }
.guarantee p { font-size: 0.88rem; }

/* ---------- Pricing responsive ---------- */
@media (max-width: 1080px) {
  .price-hero-grid { grid-template-columns: 1fr; }
  .price-panel { max-width: 620px; }
}
@media (max-width: 720px) {
  .plan .price b { font-size: 2.1rem; }
  .amc-flag { position: static; display: inline-block; margin-bottom: 12px; }
}

/* The "Most Popular" badge sits above the card edge, so the plan can't clip
   its children (the gradient border is masked, it doesn't need overflow). */
.plan { overflow: visible; }

/* Keep the AMC flag clear of the card title */
.amc-best h3 { padding-right: 128px; }
@media (max-width: 720px) { .amc-best h3 { padding-right: 0; } }

/* ============================================================
   WHY CHOOSE US — proof scorecard & side-by-side comparison
   ============================================================ */

/* ---------- Hero: copy + track-record scorecard ---------- */
.why-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.why-hero-grid > * { min-width: 0; }
.why-hero h1 { margin: 20px 0 18px; }
.why-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.why-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.why-panel > * { position: relative; }
.score-rows { display: grid; gap: 2px; margin-top: 6px; }
.score-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.score-rows dt { font-size: 0.9rem; color: var(--text-muted); }
.score-rows dd {
  font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.why-panel-foot { margin-top: 18px; font-size: 0.86rem; color: var(--text-muted); }

/* ---------- Numbered reason cards ---------- */
.why-card { position: relative; }
.why-no {
  position: absolute; top: 14px; right: 20px;
  font-family: var(--font-head); font-weight: 800; font-size: 2.5rem; line-height: 1;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1.4px rgba(1, 25, 74, .13);
  transition: -webkit-text-stroke-color .5s, transform .6s var(--ease);
  pointer-events: none;
}
.why-card:hover .why-no { -webkit-text-stroke-color: rgba(20, 53, 124, .45); transform: translateY(-3px); }
.why-card h3 { padding-right: 66px; }

/* ---------- Comparison table ---------- */
.compare-wrap {
  background: linear-gradient(160deg, rgba(1, 25, 74, .05), rgba(1, 25, 74, .012));
  box-shadow: var(--shadow-md);
}
.compare { min-width: 720px; }
.compare thead th { background: rgba(246, 249, 253, .96); backdrop-filter: blur(8px); padding-block: 20px; }
.cmp-label {
  font-size: 0.74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.cmp-us, .cmp-them {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 0.95rem; padding: 7px 15px; border-radius: 100px;
}
.cmp-us {
  color: #ffffff; background: var(--grad-navy);
  box-shadow: 0 6px 20px rgba(1, 25, 74, .35);
}
.cmp-them { color: var(--text-muted); border: 1px solid var(--line-strong); background: rgba(1, 25, 74, .04); }

/* Our column is visually the winning lane */
.compare .col-us {
  background: linear-gradient(180deg, rgba(1, 25, 74, .1), rgba(1, 25, 74, .05));
  border-inline: 1px solid rgba(20, 53, 124, .22);
  color: var(--text-strong);
}
.compare tbody .col-us, .compare tbody .col-them { position: relative; padding-left: 46px; }
.compare tbody .col-us::before,
.compare tbody .col-them::before {
  content: ""; position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
/* Tick */
.compare tbody .col-us::before {
  background-color: rgba(1, 25, 74, .18);
  box-shadow: inset 0 0 0 1px rgba(20, 53, 124, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237defff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 9 18l-5-5'/%3E%3C/svg%3E");
}
/* Cross */
.compare tbody .col-them::before {
  background-color: rgba(1, 25, 74, .05);
  box-shadow: inset 0 0 0 1px rgba(1, 25, 74, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4c2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.compare tbody .col-them { color: var(--text-faint); }
.compare tbody tr { transition: background .25s; }
.compare tbody tr:hover th { color: var(--accent-soft); }
.compare tbody tr:hover .col-us { background: linear-gradient(180deg, rgba(1, 25, 74, .18), rgba(1, 25, 74, .08)); }

/* ---------- Why responsive ---------- */
@media (max-width: 1080px) {
  .why-hero-grid { grid-template-columns: 1fr; }
  .why-panel { max-width: 620px; }
}
@media (max-width: 720px) {
  .score-rows > div { flex-direction: column; gap: 4px; }
  .why-no { font-size: 2rem; }
  .why-card h3 { padding-right: 52px; }
}

/* Comparison table on narrow screens: keep the row labels pinned while the
   columns scroll, and say so. */
.table-hint {
  display: none; margin-top: 14px; text-align: center;
  font-family: var(--font-head); font-size: 0.8rem; letter-spacing: .06em; color: var(--text-faint);
}
@media (max-width: 860px) {
  .table-hint { display: block; }
  .compare tbody th, .compare thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: linear-gradient(90deg, #ffffff 88%, rgba(255, 255, 255, .82));
  }
  .compare thead th:first-child { z-index: 2; }
}

/* ============================================================
   SECURITY INSIGHTS — editorial knowledge hub
   ============================================================ */

/* ---------- Hero: copy + topics panel ---------- */
.insight-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.insight-hero-grid > * { min-width: 0; }
.insight-hero h1 { margin: 20px 0 18px; }
.insight-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.insight-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.insight-panel > * { position: relative; }
.insight-topics { display: grid; gap: 2px; margin-top: 6px; }
.insight-topics li {
  position: relative; padding: 13px 0 13px 28px;
  border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.insight-topics li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.insight-topics b { display: block; font-family: var(--font-head); font-size: 0.98rem; color: var(--text-strong); }
.insight-topics span { font-size: 0.85rem; color: var(--text-muted); }
.insight-panel-foot { margin-top: 18px; font-size: 0.86rem; color: var(--text-muted); }

/* ---------- Shared post meta ---------- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.post-meta li {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.post-meta li + li::before { content: "·"; margin-right: 8px; color: var(--text-faint); }
.post-meta .pm-cat {
  color: var(--amber-ink); padding: 5px 12px; border-radius: 100px;
  border: 1px solid rgba(231, 148, 2, .3); background: rgba(231, 148, 2, .08);
  letter-spacing: .12em;
}
.post-meta .pm-cat + li::before { content: none; }

/* ---------- Featured post ---------- */
.feature-post {
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(150deg, rgba(1, 25, 74, .06), rgba(1, 25, 74, .015));
  box-shadow: var(--shadow-md);
  transition: border-color .4s, box-shadow .5s var(--ease);
}
.feature-post:hover { border-color: rgba(20, 53, 124, .4); box-shadow: 0 26px 60px rgba(1, 25, 74, 0.12); }
.feature-media { position: relative; min-height: 340px; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1.1s var(--ease), opacity .5s; }
.feature-post:hover .feature-media img { transform: scale(1.05); opacity: 1; }
.feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(1, 16, 47, .05), rgba(1, 16, 47, .72));
}
.feature-flag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #ffffff;
  padding: 7px 14px; border-radius: 100px; background: var(--grad-amber);
  box-shadow: 0 8px 22px rgba(231, 148, 2, .35);
}
.feature-body {
  padding: clamp(26px, 3.6vw, 46px);
  display: flex; flex-direction: column; justify-content: center;
}
.feature-body h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.feature-body p { margin: 14px 0 22px; color: var(--text); }
.feature-body .card-link { align-self: flex-start; }
.feature-body .card-link svg { width: 17px; height: 17px; }

/* ---------- Post cards ---------- */
.post-card {
  display: flex; flex-direction: column;
  animation: projIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) { .post-card { animation: none; } }
.post-icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(1, 25, 74, .2), rgba(30, 74, 156, .12));
  border: 1px solid var(--line-strong);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.post-icon svg { width: 24px; height: 24px; color: var(--accent-soft); }
.post-card:hover .post-icon {
  transform: rotate(-6deg) scale(1.07);
  border-color: rgba(20, 53, 124, .5);
  box-shadow: 0 0 26px rgba(1, 25, 74, .3);
}
.post-card h3 { font-size: 1.14rem; line-height: 1.28; margin-bottom: 12px; transition: color .3s; }
.post-card:hover h3 { color: var(--accent-soft); }
.post-card p { flex: 1; font-size: 0.95rem; }
.post-card .card-link { margin-top: 18px; }
.post-card .card-link svg { width: 16px; height: 16px; }

/* ---------- Insights responsive ---------- */
@media (max-width: 1080px) {
  .insight-hero-grid { grid-template-columns: 1fr; }
  .insight-panel { max-width: 620px; }
}
@media (max-width: 900px) {
  .feature-post { grid-template-columns: 1fr; }
  .feature-media { min-height: 240px; }
}

/* ============================================================
   GET IN TOUCH — availability, form & map
   ============================================================ */

/* ---------- Hero: copy + live availability panel ---------- */
.contact-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.contact-hero-grid > * { min-width: 0; }
.contact-hero h1 { margin: 20px 0 18px; }
.contact-panel {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .1);
}
.contact-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(1, 25, 74, .16), transparent 70%);
}
.contact-panel > * { position: relative; }
/* Closed state turns the live dot amber */
.panel-dot.is-closed { background: var(--amber-lite); box-shadow: 0 0 12px var(--amber-lite); }
.office-note { margin: 14px 0 4px; font-size: 0.85rem; color: var(--text-muted); }
.contact-rows { display: grid; gap: 2px; margin-top: 10px; }
.contact-rows > div {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px dashed rgba(1, 25, 74, .07);
}
.contact-rows dt {
  font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.contact-rows dd {
  font-family: var(--font-head); font-size: 0.92rem; color: var(--text-strong);
  text-align: right; line-height: 1.45;
}
.contact-rows dd a { transition: color .25s; }
.contact-rows dd a:hover { color: var(--accent-soft); }
.contact-panel-foot { margin-top: 18px; font-size: 0.86rem; color: var(--text-muted); }

/* ---------- Channel cards ---------- */
.channel { display: flex; flex-direction: column; }
.channel p { flex: 1; }
.channel-chip {
  display: inline-block; align-self: flex-start; margin: -4px 0 12px;
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(20, 53, 124, .28); background: rgba(1, 25, 74, .08);
}
.channel-btn { margin-top: 18px; align-self: flex-start; }

/* ---------- Lead form ---------- */
.lead-card { position: relative; }
.lead-title { font-size: clamp(1.35rem, 2vw, 1.65rem); margin: 16px 0 6px; }
.lead-sub { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label i { font-style: normal; color: var(--accent-soft); }
.field label .opt { font-style: normal; color: var(--text-faint); }
.field input, .field textarea, .field select { transition: border-color .3s, box-shadow .3s, background .3s; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(20, 53, 124, .35); }
.field input:user-invalid, .field textarea:user-invalid {
  border-color: rgba(255, 138, 138, .6);
  box-shadow: 0 0 0 3px rgba(255, 138, 138, .12);
}
.form-submit { width: 100%; justify-content: center; margin-top: 6px; }
.form-status {
  margin-top: 14px; font-size: 0.88rem; min-height: 1.2em;
  font-family: var(--font-head);
}
.form-status.is-ok { color: var(--accent-soft); }
.form-status.is-err { color: #ff9d9d; }
.form-note { margin-top: 10px; font-size: 0.82rem; color: var(--text-faint); }
.form-note a { color: var(--accent-soft); }

/* ---------- Details column ---------- */
.contact-details h2 { margin: 18px 0 8px; }
.ci-note { display: block; color: var(--text-faint) !important; font-size: 0.86rem; }
.contact-item { transition: border-color .3s; }
.contact-item .ci { transition: transform .45s var(--ease), box-shadow .45s, border-color .35s; }
.contact-item:hover .ci {
  transform: rotate(-6deg) scale(1.06);
  border-color: rgba(20, 53, 124, .45);
  box-shadow: 0 0 22px rgba(1, 25, 74, .28);
}
.directions-btn { margin-top: 20px; }

/* ---------- Map ---------- */
.map-frame {
  position: relative; height: clamp(320px, 46vw, 460px);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md), 0 0 60px rgba(1, 25, 74, .08);
}
.map-frame iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(.35) contrast(1.05) brightness(.92);
  transition: filter .6s;
}
.map-frame:hover iframe { filter: grayscale(0) contrast(1.05) brightness(1); }
.map-card {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  max-width: min(360px, calc(100% - 40px));
  padding: 20px 22px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
}
/* Click-to-load map. The Google Maps embed was a 596ms third-party frame that
   pushed page load from ~250ms to ~800ms, for something most visitors never
   interact with. The address and a direct Google Maps link are already in the
   card on top, so the embed is now opt-in. */
.map-load {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; cursor: pointer; border: none;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(1, 25, 74, .06), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
  color: var(--accent); font-family: var(--font-head); font-weight: 600;
  transition: background .3s;
}
.map-load:hover { background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); }
/* Once JS takes over the loading, the placeholder is a skeleton rather than a
   button — so it should not invite a click or react to hover. */
.map-load.is-auto { cursor: default; }
.map-load.is-auto:hover { background:
    radial-gradient(60% 60% at 50% 40%, rgba(1, 25, 74, .06), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg)); }
.map-load.is-auto .map-load-pin { animation: map-pulse 1.6s var(--ease) infinite; }
@keyframes map-pulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: .55; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .map-load.is-auto .map-load-pin { animation: none; } }
.map-load-pin {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line-strong);
}
.map-load-pin svg { width: 26px; height: 26px; }
.map-load-txt { font-size: .95rem; letter-spacing: .02em; }
.map-card b { display: block; font-family: var(--font-head); color: var(--text-strong); margin-bottom: 6px; }
.map-card span { display: block; font-size: 0.86rem; color: var(--text-muted); }
.map-card .card-link { margin-top: 14px; }
.map-card .card-link svg { width: 16px; height: 16px; }

/* ---------- Contact responsive ---------- */
@media (max-width: 1080px) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-panel { max-width: 620px; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-rows > div { flex-direction: column; gap: 4px; }
  .contact-rows dd { text-align: left; }
  .map-card { padding: 18px 20px; }
}

/* The Google embed ships a light map. Mute it so it sits in the dark page,
   and restore full colour on hover for orientation.
   (A full `invert(.9) hue-rotate(180deg)` renders a true dark map — swap it in
   here if you prefer that look; I couldn't verify it in headless capture.) */
.map-frame iframe {
  filter: grayscale(.5) brightness(.82) contrast(1.05);
}
.map-frame:hover iframe { filter: grayscale(0) brightness(1) contrast(1.02); }

/* ============================================================
   FOOTER — closing statement
   ============================================================ */
.footer {
  position: relative; overflow: hidden;
  margin-top: clamp(50px, 7vw, 90px);
  padding-top: 0;
  border-top: none;
  --text-strong: #ffffff;
  --text: #d7dfef;
  --text-muted: #a9b7d1;
  --text-faint: #93a1bd;
  --accent-soft: #ffc45c;
  --grad-accent: linear-gradient(120deg, #ffffff, #ffc45c 85%);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.24);
  --glass: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #01194a 0%, #010f2e 100%);
  color: var(--text);
}
/* Animated gradient hairline along the top edge */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1, 25, 74, .7), rgba(231, 148, 2, .5), transparent);
  background-size: 220% 100%;
  animation: footerLine 9s ease-in-out infinite alternate;
}
@keyframes footerLine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* Slow aurora bloom behind the whole footer */
.footer-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 150%;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 10%, rgba(1, 25, 74, .16), transparent 62%),
    radial-gradient(45% 55% at 82% 8%, rgba(30, 74, 156, .14), transparent 62%),
    radial-gradient(40% 50% at 55% 95%, rgba(231, 148, 2, .08), transparent 60%);
  filter: blur(34px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
.footer > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .footer::before, .footer-glow { animation: none; }
}

/* ---------- Closing CTA band ---------- */
.footer-cta {
  display: grid; grid-template-columns: 1.4fr auto;
  align-items: center; gap: clamp(24px, 3vw, 48px);
  margin: clamp(44px, 6vw, 76px) 0 clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: linear-gradient(140deg, rgba(1, 25, 74, .12), rgba(30, 74, 156, .06) 60%, rgba(231, 148, 2, .06));
  box-shadow: var(--shadow-md), 0 0 70px rgba(1, 25, 74, .1);
  position: relative; overflow: hidden;
}
.footer-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 15% 0%, rgba(1, 25, 74, .18), transparent 65%);
}
.footer-cta > * { position: relative; }
.footer-cta h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 16px 0 10px; }
.footer-cta p { color: var(--text); max-width: 48ch; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Grid & brand block ---------- */
.footer-grid { padding-bottom: clamp(34px, 4vw, 54px); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-badges li {
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(1, 25, 74, .04);
  transition: color .3s, border-color .3s, transform .3s var(--ease);
}
.footer-badges li:hover { color: var(--accent-soft); border-color: rgba(20, 53, 124, .4); transform: translateY(-2px); }

.footer .logo-plate { transition: transform .5s var(--ease), box-shadow .5s; }
.footer .logo:hover .logo-plate { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(1, 25, 74, 0.11), 0 0 34px rgba(1, 25, 74, .2); }

/* Social buttons take their channel colour on hover */
.social a { position: relative; overflow: hidden; }
.social a::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
}
.social a:hover::before { opacity: 1; }
.social .s-wa:hover::before { background: #25d366; }
.social .s-tel:hover::before { background: var(--grad-navy); }
.social .s-mail:hover::before { background: var(--grad-amber); }
.social a svg { position: relative; z-index: 1; transition: color .3s; }
.social .s-wa:hover svg, .social .s-tel:hover svg { color: #ffffff; }
.social .s-mail:hover svg { color: #241a02; }

/* ---------- Column headings with an accent rule ---------- */
.footer-col h4 { position: relative; padding-bottom: 12px; }
.footer-col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  border-radius: 2px; background: var(--grad-navy);
  transition: width .4s var(--ease);
}
.footer-col:hover h4::after { width: 46px; }

/* Links slide and grow an arrow */
.footer-col ul a {
  position: relative; display: inline-block; padding-left: 0;
  transition: color .25s, padding-left .3s var(--ease);
}
.footer-col ul a::before {
  content: "›"; position: absolute; left: 0; opacity: 0;
  color: var(--accent); transition: opacity .25s, transform .3s var(--ease);
  transform: translateX(-4px);
}
.footer-col ul a:hover { padding-left: 14px; }
.footer-col ul a:hover::before { opacity: 1; transform: translateX(0); }

/* Reach column: icon chips instead of emoji */
.footer-reach ul a { display: inline-flex; align-items: center; gap: 10px; }
.footer-reach ul a::before { content: none; }
.footer-reach ul a:hover { padding-left: 0; }
.fr-ic {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(1, 25, 74, .05); border: 1px solid var(--line);
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.fr-ic svg { width: 14px; height: 14px; color: var(--accent-soft); }
.footer-reach ul a:hover .fr-ic {
  border-color: rgba(20, 53, 124, .45);
  background: rgba(1, 25, 74, .12);
  transform: translateY(-2px);
}
/* The registered address. An <address> element rather than a <p>, and a link
   to Google Maps so a phone user gets directions in one tap. Icon and hover
   behaviour match the Reach Us links directly above it. */
.footer-addr { margin-top: 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-faint); font-style: normal; }
.footer-addr a { display: inline-flex; align-items: flex-start; gap: 10px; color: inherit; }
.footer-addr a:hover { color: var(--accent-soft); }
.footer-addr a:hover .fr-ic { border-color: rgba(20, 53, 124, .45); background: rgba(1, 25, 74, .12); }
.footer-addr .fr-ic { margin-top: 1px; }
.footer-hours {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  font-family: var(--font-head); font-size: 0.82rem; color: var(--text);
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(1, 25, 74, .04);
}

/* ---------- Service areas strip ---------- */
.footer-areas {
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line);
}
.footer-areas h4 {
  font-size: 0.74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
/* Single coverage statement, replacing the old locality chip list */
.footer-coverage {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 4px 14px; row-gap: 2px;
}
.footer-coverage .fc-ic {
  grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(1, 25, 74, .04); color: var(--amber);
}
.footer-coverage .fc-ic svg { width: 21px; height: 21px; }
.footer-coverage b {
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
  color: var(--text-strong); letter-spacing: -0.01em; align-self: end;
}
.footer-coverage > span:not(.fc-ic) { font-size: 0.85rem; color: var(--text-muted); align-self: start; }
@media (max-width: 520px) {
  .footer-coverage b { font-size: 0.95rem; }
  .footer-coverage > span:not(.fc-ic) { font-size: 0.8rem; }
}

/* ---------- Bottom bar ---------- */
.footer-bottom { align-items: center; }
.fb-partners b { color: var(--text); font-weight: 600; transition: color .3s; }
.fb-partners b:hover { color: var(--accent-soft); }

/* ---------- Footer responsive ---------- */
@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; }
  .footer-cta-actions { width: 100%; }
}
@media (max-width: 560px) {
  .footer-cta { padding: 24px 20px; border-radius: var(--radius-lg); }
  .footer-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FOOTER — premium pass 2: proof strip, spotlight, wordmark
   ============================================================ */

/* Inner top highlight so the footer reads as a lit glass slab */
.footer::after {
  content: ""; position: absolute; top: 1px; left: 0; right: 0; height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 25, 74, .05), transparent);
}

/* ---------- Proof strip ---------- */
.footer-proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(40px, 5vw, 66px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-block: 1px solid var(--line);
}
.footer-proof > div {
  position: relative; padding-left: 22px;
  transition: transform .4s var(--ease);
}
.footer-proof > div::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px; background: var(--grad-navy);
  opacity: .5; transition: opacity .35s, transform .45s var(--ease);
  transform: scaleY(.6); transform-origin: center;
}
.footer-proof > div:hover { transform: translateY(-3px); }
.footer-proof > div:hover::before { opacity: 1; transform: scaleY(1); }
.footer-proof b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1; letter-spacing: -0.03em;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-proof span {
  display: block; margin-top: 7px;
  font-size: 0.82rem; letter-spacing: .04em; color: var(--text-muted);
}

/* ---------- CTA band: pointer spotlight + sheen ---------- */
.footer-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(460px 260px at var(--mx, 30%) var(--my, 0%), rgba(20, 53, 124, .16), transparent 70%);
  opacity: 0; transition: opacity .45s;
}
.footer-cta:hover::after { opacity: 1; }
.footer-cta { transition: border-color .4s, box-shadow .5s var(--ease), transform .5s var(--ease); }
.footer-cta:hover {
  border-color: rgba(20, 53, 124, .45);
  box-shadow: var(--shadow-md), 0 0 90px rgba(1, 25, 74, .2);
}

/* ---------- Column links: staggered entrance ---------- */
.footer-col ul li {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.footer.in-view .footer-col ul li { opacity: 1; transform: none; }
.footer-col ul li:nth-child(1) { transition-delay: .04s; }
.footer-col ul li:nth-child(2) { transition-delay: .09s; }
.footer-col ul li:nth-child(3) { transition-delay: .14s; }
.footer-col ul li:nth-child(4) { transition-delay: .19s; }
.footer-col ul li:nth-child(5) { transition-delay: .24s; }
.footer-col ul li:nth-child(6) { transition-delay: .29s; }
@media (prefers-reduced-motion: reduce) {
  .footer-col ul li { opacity: 1; transform: none; }
}

/* ---------- Closing signet ---------- */
.footer-signet {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  /* Bottom margin inherited from the retired .footer-signoff line, so the
     signet never reads as half-hidden behind the floating buttons. */
  margin: clamp(30px, 4vw, 48px) 0 clamp(30px, 4vw, 46px);
}
.sig-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(1, 25, 74, .16), transparent);
}
.sig-mark {
  /* Widened to hold the horizontal lockup rather than the bare shield. */
  flex: none; width: 236px; height: 82px; border-radius: 18px;
  display: grid; place-items: center;
  border: 1.5px solid transparent;
  background:
    linear-gradient(155deg, #ffffff, #eaf0fc) padding-box,
    linear-gradient(140deg, var(--amber-lite), var(--accent) 55%, #1e4a9c) border-box;
  box-shadow: 0 10px 26px rgba(1, 25, 74, 0.11), 0 0 26px rgba(1, 25, 74, .18);
  animation: signetGlow 5s ease-in-out infinite;
  transition: transform .5s var(--ease);
}
.sig-mark img { width: auto; height: 60px; object-fit: contain; }
.footer-signet:hover .sig-mark { transform: translateY(-3px); }
@keyframes signetGlow {
  0%, 100% { box-shadow: 0 10px 26px rgba(1, 25, 74, 0.11), 0 0 20px rgba(1, 25, 74, .14); }
  50%      { box-shadow: 0 10px 26px rgba(1, 25, 74, 0.11), 0 0 40px rgba(1, 25, 74, .36); }
}
@media (prefers-reduced-motion: reduce) { .sig-mark { animation: none; } }
@media (max-width: 720px) { .footer-signet { margin-bottom: 96px; } }

/* ---------- Bottom bar: back-to-top ---------- */
.footer-bottom { gap: 16px 24px; }
.fb-top {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-family: var(--font-head); font-size: 0.84rem; color: var(--text);
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(1, 25, 74, .04);
  transition: color .3s, border-color .3s, background .3s, transform .35s var(--ease);
}
.fb-top svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.fb-top:hover {
  color: var(--text-strong); border-color: rgba(20, 53, 124, .45);
  background: rgba(1, 25, 74, .1); transform: translateY(-2px);
}
.fb-top:hover svg { transform: translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-proof { gap: 16px; }
  .footer-proof > div { padding-left: 16px; }
  .fb-top { margin-left: 0; }
}

/* ============================================================
   RESPONSIVE HARDENING — phones → ultrawide
   ============================================================ */

/* ---------- Mobile drawer: never compress, always reachable ----------
   The drawer is a flex column, so when its content was taller than the screen
   the items shrank instead of scrolling (the WhatsApp CTA collapsed to 28px)
   and anything past the fold was unreachable in landscape. */
@media (max-width: 1080px) {
  .nav-links {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: calc(var(--nav-h, 88px) + 14px) calc(28px + env(safe-area-inset-bottom, 0px));
    padding-inline: 0;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* Items keep their intrinsic height rather than being squeezed */
  .nav-links > * { flex: 0 0 auto; }
  .nav-links .btn { min-height: 48px; }
}
/* Phones: the drawer takes the whole screen. The partial-width panel left a
   sliver of blurred page down the left edge that read as a rendering glitch
   rather than a deliberate peek. The logo and toggle out-stack it (z-index
   100 below), so the close button stays reachable over the full-bleed panel. */
@media (max-width: 720px) {
  .nav-links {
    width: 100%;
    border-left: none;
    /* Fully opaque: the drawer scrolls over the page, and any translucency
       lets hero text ghost through behind the menu rows. */
    background: #fff;
    padding-inline: 0;
  }
}
/* Short viewports (landscape phones, small laptops): tighten the drawer */
@media (max-width: 1080px) and (max-height: 560px) {
  .nav-links a { padding-block: 10px; font-size: 0.98rem; }
  .nav-links { padding-block: calc(var(--nav-h, 78px) + 8px) 20px; gap: 2px; }
  .nav-links .btn { margin-top: 10px; }
}

/* ---------- Tap targets ---------- */
.svc-rail-arrow { width: 38px; height: 38px; }
.filter-chip, .svc-toc a { min-height: 38px; }
.social a, .fr-ic { min-height: 38px; }
.fr-ic { min-width: 28px; }

/* ---------- Contact channels: 4-up needs real room ---------- */
/* `.grid.cols-4` is a 2-class selector, so the override has to match it. */
@media (max-width: 1000px) {
  .grid.channel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .grid.channel-grid { grid-template-columns: 1fr; }
  .channel-btn { width: 100%; justify-content: center; }
}

/* ---------- iOS safe areas (notch / home indicator) ---------- */
@supports (padding: env(safe-area-inset-left)) {
  .nav-inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .to-top { bottom: max(96px, calc(88px + env(safe-area-inset-bottom))); right: max(18px, env(safe-area-inset-right)); }
}

/* ---------- Short viewports: don't let the hero be mostly padding ---------- */
@media (max-height: 620px) and (min-width: 700px) {
  .hero { padding-top: 118px; }
  .page-hero { padding-top: 116px; }
  body.has-svc-rail .page-hero { padding-top: calc(var(--nav-h, 84px) + var(--rail-h, 58px) + 18px); }
}
@media (max-height: 480px) {
  .hero { padding-top: 100px; padding-bottom: 40px; }
  .page-hero { padding-top: 98px; padding-bottom: 34px; }
  .hero h1, .page-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
}

/* ---------- Very small phones (320px) ---------- */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }

  .logo-lockup, .nav.scrolled .logo-lockup { height: 46px; }
  .btn-lg { --pad: 15px 20px; font-size: 0.96rem; }
  .eyebrow { font-size: 0.66rem; letter-spacing: .12em; }
  .card, .plan { padding: 20px 18px; }
  .footer-proof { grid-template-columns: 1fr; }
  /* Must-fix §2: on a 320x568 screen the headline alone ran four lines and
     pushed the quote CTA off the first screen. Tighten the hero type and
     padding here so the primary action stays visible without scrolling. */
  .hero { padding-top: 98px; }
  .hero h1 { font-size: 1.72rem; margin: 14px 0 12px; }
  .hero .lead { font-size: .94rem; line-height: 1.55; }
  .hero-services { font-size: .8rem; }
  /* At 320px the service list runs four lines, which alone pushed the CTA off
     screen. Promote the buttons above it here — the list still reads directly
     underneath, so nothing is lost, and the action stays on the first screen. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .btn-group { order: 1; margin-top: 18px; }
  .hero-copy .hero-services { order: 2; margin-top: 16px; }
  .hero-copy .hero-micro { order: 3; }
}

/* ---------- Large desktops & ultrawide ---------- */
@media (min-width: 1800px) {
  :root { --wrap: 1440px; }
  .nav-inner { max-width: 1560px; }
  .svc-rail-track { max-width: 1440px; }
}
@media (min-width: 2200px) {
  :root { --wrap: 1560px; --section-y: clamp(70px, 6vw, 130px); }
  .nav-inner { max-width: 1700px; }
  .svc-rail-track { max-width: 1560px; }
}

/* ---------- Drawer must never bury the close button ----------
   .nav-links lives inside the <header>, so its z-index stacks against its own
   siblings — it was painting over the logo and the toggle that closes it. */
/* The drawer is a *sibling* of the logo and the toggle inside .nav-inner, so
   those two need to out-stack it directly. */
.nav-inner { position: relative; }
.logo, .nav-actions { position: relative; z-index: 100; }
@media (max-width: 1080px) {
  .nav-links { z-index: 99; }
  /* The progress bar outranks the drawer (z-index 101); a part-scrolled page
     drew a navy stripe across the top of the open menu. */
  body.menu-open .scroll-progress { opacity: 0; }
  /* Solid header while the drawer is open, so its independently-scrolling
     rows can never show through behind the logo and close button. */
  body.menu-open .nav,
  body.menu-open .nav.scrolled {
    background: #fff;
    backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  /* The bar spans the drawer's full width on phones */
  body.menu-open .nav-inner { background: #fff; }
}

/* ---------- Card tags must not collide with headings ----------
   The tag is absolutely positioned top-right; long titles ran straight under
   it. Reserve room on wide screens, put it in flow on narrow ones. */
.card-tag { max-width: 46%; text-align: right; line-height: 1.2; }
.card:has(> .card-tag) h3 { padding-right: 104px; }
.values-grid .card:has(> .card-tag) h3 { padding-right: 90px; }
@media (max-width: 760px) {
  .card > .card-tag {
    position: static; display: inline-block;
    margin-bottom: 12px; max-width: 100%; text-align: left;
  }
  .card:has(> .card-tag) h3 { padding-right: 0; }
  /* the values page uses the tag as a ghost numeral — keep that one floating */
  .values-grid .card > .card-tag { position: absolute; margin-bottom: 0; }
  .values-grid .card:has(> .card-tag) h3 { padding-right: 64px; }
}
/* Fallback for browsers without :has() — reserve room unconditionally */
@supports not selector(:has(*)) {
  @media (min-width: 761px) { .card h3 { padding-right: 104px; } }
}

/* ============================================================
   RESPONSIVE GRID LADDER
   One coherent set of collapse points for every .grid, declared
   last so it supersedes the earlier per-section rules.

   The bug this fixes: .grid.cols-2 only collapsed at 520px, so
   two-column sections stayed side-by-side across the entire
   tablet range and rendered badly cramped. .grid.cols-3 held
   three columns down to 720px with the same result.

   width        cols-2   cols-3   cols-4
   >1080          2        3        4
   901–1080       2        3        2
   861–900        2        2        2
   601–860        1        2        2
   421–600        1        1        2
   <=420          1        1        1
   ============================================================ */
@media (max-width: 1080px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .grid.cols-2, .grid.sector-grid { grid-template-columns: 1fr; }
  /* service image + bullet list: side-by-side gets tight before this */
  .svc-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid.cols-3 { grid-template-columns: 1fr; }
  /* these four cards each carry a button — two-up squeezes them */
  .grid.cols-4.channel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .grid.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   PERFORMANCE
   ============================================================ */

/* Decorative blur is the most expensive thing on the page: every element with
   backdrop-filter gets its own compositing layer and is re-blurred on scroll,
   and .card alone means dozens per page. On this light theme the surfaces sit
   at 0.94-0.96 opacity over a near-flat background, so the blur is visually
   almost undetectable while still costing full price.

   Blur is kept ONLY where something genuinely overlays moving content: the
   navbar, the mobile drawer, the sticky service rail, sticky table headers and
   the back-to-top button. */
.eyebrow, .btn-ghost, .hero-proof .pill, .hero-card, .card, .svc,
.about-panel, .svc-panel, .proj-panel, .price-panel, .why-panel,
.insight-panel, .contact-panel, .media-badge, .map-card {
  backdrop-filter: none;
}

/* The ambient gradient drifts on an infinite 26s loop with will-change, which
   keeps the compositor awake for the life of the page. Desktop can afford it;
   phones pay for it in battery and scroll smoothness for an effect that is
   barely perceptible at 4-5% alpha. */
@media (max-width: 900px) {
  body::before { animation: none; will-change: auto; }
}

/* Images the browser cannot know the size of until layout: give the decorative
   ones an explicit containment hint so late-loading photos never reflow text. */
.svc-media img, .split-media img, .feature-media img { contain: paint; }

/* ============================================================
   HOMEPAGE BLOCKS — trust bar, stats, industries, process, brands
   Added for the brochure-aligned homepage restructure.
   ============================================================ */

/* ---------- Hero trust bar ----------
   Four commitments sitting directly under the headline, the way the brochure
   cover carries them. Scrolls sideways on phones rather than wrapping to a
   four-row stack that pushes the CTAs off screen. */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; margin: 26px 0 28px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass); overflow: hidden;
}
.trust-bar div {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; font-family: var(--font-head);
  font-size: .78rem; font-weight: 500; line-height: 1.3; color: var(--text-strong);
}
.trust-bar svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--amber); }
@media (max-width: 700px) {
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .trust-bar div { font-size: .72rem; padding: 10px 12px; }
}

/* ---------- Stats strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat-strip > div {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 26px 18px; background: #fff; text-align: left;
}
.stat-strip .st-ic {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 13px; background: var(--glass-2); color: var(--accent);
}
.stat-strip .st-ic svg { width: 24px; height: 24px; }
.stat-strip b {
  display: block; font-family: var(--font-head); font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700; line-height: 1; color: var(--text-strong);
}
.stat-strip span {
  display: block; margin-top: 5px; font-size: .7rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 860px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div { padding: 20px 14px; gap: 11px; }
  .stat-strip .st-ic { width: 38px; height: 38px; border-radius: 11px; }
  .stat-strip .st-ic svg { width: 20px; height: 20px; }
}

/* ---------- Industries we serve ---------- */
.ind-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.ind-grid a {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 22px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-head); font-size: .82rem; font-weight: 500;
  line-height: 1.3; color: var(--text-strong);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.ind-grid a:hover {
  transform: translateY(-5px); border-color: var(--amber); box-shadow: var(--shadow-md);
}
.ind-grid svg { width: 32px; height: 32px; color: var(--accent-soft); }
.ind-grid a:hover svg { color: var(--amber); }
@media (max-width: 1080px) { .ind-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .ind-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .ind-grid a { padding: 16px 8px; font-size: .74rem; } .ind-grid svg { width: 26px; height: 26px; } }
@media (max-width: 420px)  { .ind-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Numbered process list (vertical, for the 3-up row) ---------- */
.proc-list { display: grid; gap: 0; }
.proc-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0; border-bottom: 1px solid var(--line); list-style: none;
}
.proc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.proc-list i {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-style: normal; font-family: var(--font-head); font-size: .72rem; font-weight: 700;
}
.proc-list b { font-family: var(--font-head); font-size: .9rem; font-weight: 600; color: var(--text-strong); display: block; }
.proc-list p { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }

/* ---------- Showcase slider ----------
   A scroll-snap rail, not a transform carousel: swipe, trackpad and keyboard
   all come free from the browser, and it still works if JS never runs.
   initSlider() adds .is-live, the arrows and the dots on top of that. */
.slider { position: relative; }
.slider-track {
  display: flex; gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Snap, but no scroll-behavior:smooth — that would fight the per-pixel
     scrollLeft writes during a mouse drag. Smoothness is passed per call
     from scrollTo() instead. */
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-lg);
  /* Hide the native bar — the dots are the position indicator. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-2); box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  transition: transform .35s ease, box-shadow .35s ease;
}
.slider-slide img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
  .slider-slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow); }
}
/* Dragging must not fire the slide's own link on mouse-up. */
.slider.is-dragging .slider-slide { pointer-events: none; }

/* ---------- Services slideshow (client change 3) ----------
   The AI service visuals already carry the service name as artwork, but that
   is pixels, not text — the caption below repeats it as a real, linkable
   string so the nine solutions stay crawlable and screen-reader friendly. */
.svc-slider .slider-slide { position: relative; }
.svc-slider .slide-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px, 2.2vw, 24px);
  background: #fff; border-top: 1px solid var(--line);
}
.svc-slider .slide-cap b {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text-strong);
}
.svc-slider .slide-cap i {
  font-style: normal; font-family: var(--font-head); font-weight: 600;
  font-size: .84rem; letter-spacing: .04em; color: var(--amber-ink);
}
.svc-slider .slider-slide:hover .slide-cap i { text-decoration: underline; }
/* The arrows sit over the artwork, not over the caption strip. */
.svc-slider .slider-arrow { top: calc(50% - 30px); }
@media (max-width: 560px) {
  .svc-slider .slide-cap { padding: 12px 14px; }
  .svc-slider .slide-cap b { font-size: .96rem; }
  .svc-slider .slide-cap i { font-size: .78rem; }
}

/* ---------- Hero slideshow ----------
   A card rail at the top of the hero — image first, copy underneath —
   auto-advancing every 3s (data-autoplay). It runs the full content width and,
   where the viewport has room, a little past the wrap's gutters, so there is no
   dead space either side of the artwork. */
.hero-slider {
  width: auto;
  margin: 0 auto clamp(26px, 3.4vw, 42px);
}
@media (min-width: 1240px) {
  .hero-slider { margin-inline: clamp(-56px, -3.6vw, 0px); }
}
.hero-slider .slider-track { min-width: 0; }
.hero-slider .slider-slide {
  border-color: var(--line-strong);
  display: flex; flex-direction: column;
}
/* The slides are designed banners — the service name, feature icons and bottom
   strip are all part of the artwork — so they are never cropped: each card
   shows the whole image at its own 3:2. */
.hero-slider .slider-slide img { width: 100%; height: auto; }
.hero-slider .slide-cap { min-height: 64px; }
.hero-slider .slide-cap b { font-size: clamp(.98rem, 1.3vw, 1.16rem); }
.hero-slider .slider-arrow { width: 40px; height: 40px; }
.hero-slider .slider-arrow svg { width: 19px; height: 19px; }
.hero-slider .slider-arrow.prev { left: 12px; }
.hero-slider .slider-arrow.next { right: 12px; }
.hero-slider .slider-dots { margin-top: 16px; }

/* The hero copy is now the only grid child and sits under the card, sharing the
   same full content width so both line up on one left edge. */
.hero:has(.hero-slider) .hero-grid { grid-template-columns: 1fr; }
.hero:has(.hero-slider) .hero-copy { max-width: none; }
.hero:has(.hero-slider) .hero-copy .lead { max-width: none; }

/* Centred chip row (home solutions link list). */
.chip-grid.center-chips { justify-content: center; }

/* ---------- Vision & Mission (client change 4) ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.vm-card p { font-size: 1.02rem; }
@media (max-width: 800px) { .vm-grid { grid-template-columns: 1fr; } }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .93);
  color: var(--accent); box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  transition: background .25s, color .25s, opacity .25s, visibility .25s;
}
.slider-arrow svg { width: 22px; height: 22px; }
.slider-arrow.prev { left: 12px; }
.slider-arrow.next { right: 12px; transform: translateY(-50%) rotate(180deg); }
.slider-arrow:hover { background: var(--brand-amber); color: #fff; border-color: transparent; }
@media (max-width: 640px) {
  .slider-arrow { width: 38px; height: 38px; }
  .slider-arrow.prev { left: 6px; }
  .slider-arrow.next { right: 6px; }
}

.slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.slider-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--surface-4);
  transition: background .3s, width .3s;
}
.slider-dots button.active { width: 26px; border-radius: 5px; background: var(--brand-amber); }

/* ---------- Marquee (brands, client logos) ----------
   The track holds two identical groups — the second is cloned by
   initMarquee() — and slides exactly one group's width before resetting, so
   the loop has no visible seam. --mq-dur is set per element from data-speed. */
.marquee {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  overflow: hidden; padding: 6px 0;
  /* Fade the strip into the card edges so items don't pop in and out. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee.is-live .marquee-track { animation: marquee-scroll var(--mq-dur, 34s) linear infinite; }
.marquee.is-live[data-reverse] .marquee-track { animation-direction: reverse; }
.marquee.is-live:hover .marquee-track,
.marquee.is-live:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee-group span {
  display: grid; place-items: center;
  padding: 16px clamp(22px, 3.4vw, 44px); white-space: nowrap;
  font-family: var(--font-head); font-size: clamp(.82rem, 1.4vw, 1rem); font-weight: 700;
  letter-spacing: .02em; color: var(--accent-soft);
  border-right: 1px solid var(--line);
  transition: color .3s;
}
.marquee-group span:hover { color: var(--amber-ink); }
/* Logo + name cells. Greyscale at rest so ten different brand palettes read
   as one strip; full colour on hover. */
.marquee-logos .marquee-group span {
  flex-direction: column; gap: 10px;
  padding: 16px clamp(20px, 3vw, 40px);
  color: var(--accent-soft);
}
.marquee-logos { --logo-h: clamp(30px, 3.6vw, 40px); }
.marquee-logos .brand-mark {
  display: grid; place-items: center;
  height: var(--logo-h); font-style: normal;
}
/* Raster logos are capped, not sized: max-* means a low-resolution source
   renders at its natural size instead of being upscaled into a blurry mess.
   The cap is the token, not 100% — a percentage max-height against this grid
   track does not resolve, and tall logos escape the box into the label. */
.marquee-logos .brand-mark img {
  display: block; width: auto; height: auto;
  max-width: clamp(104px, 12vw, 150px); max-height: var(--logo-h);
  object-fit: contain;
  /* Client change 5: the brands show in their own colours. They used to be
     greyscaled to unify the strip; the client asked for full colour instead. */
  opacity: 1;
  transition: transform .35s;
}
/* Vectors scale losslessly, so they take the height outright. This also
   rescues an SVG that carries only a viewBox and no width/height, which
   collapses to 0x0 under `height: auto`. */
.marquee-logos .brand-mark img[src$=".svg"] { height: var(--logo-h); }
/* Reversed (white) logos, for brands that publish no dark variant. The chip
   gives them the background they were drawn for, leaving the mark itself
   untouched. */
.marquee-logos .brand-mark.on-dark {
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--brand-navy);
  height: calc(var(--logo-h) + 12px);
}
.marquee-logos .brand-mark.on-dark img { opacity: 1; }
.marquee-logos .marquee-group span:hover .brand-mark.on-dark img { opacity: 1; }
/* Brands whose logo we don't hold fall back to initials, styled as a mark so
   the row keeps its rhythm — never a fabricated version of the real logo. */
.marquee-logos .brand-mark.is-text {
  min-width: 46px; padding: 0 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  letter-spacing: .04em; color: var(--accent-soft); opacity: .8;
  transition: background .35s, color .35s, opacity .35s;
}
.marquee-logos .marquee-group span b {
  font-family: var(--font-head); font-size: clamp(.72rem, 1.1vw, .82rem); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.marquee-logos .marquee-group span:hover .brand-mark img { transform: scale(1.06); }
.marquee-logos .marquee-group span:hover .brand-mark.is-text {
  background: var(--glass-2); color: var(--amber-ink); opacity: 1;
}
/* No animation without JS, and none for readers who ask for stillness — the
   strip stays a plain, swipeable row instead. */
.marquee:not(.is-live) { overflow-x: auto; scrollbar-width: none; }
.marquee:not(.is-live)::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee.is-live .marquee-track { animation: none; }
  .marquee.is-live { overflow-x: auto; }
}

/* ---------- Three-up feature row (Why / About / Process) ---------- */
.trio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1080px) { .trio { grid-template-columns: 1fr; } }

/* Navy-filled variant of .card, for the "Why choose us" column */
.card.card-navy { background: var(--grad-navy); border-color: transparent; color: #fff; }
.card.card-navy h3, .card.card-navy b { color: #fff; }
.card.card-navy p, .card.card-navy .card-list li { color: rgba(255, 255, 255, .84); }
/* The tick is drawn from two borders, so `color` alone leaves it navy-on-navy. */
.card.card-navy .card-list li::before { border-left-color: var(--amber-lite); border-bottom-color: var(--amber-lite); }
.card.card-navy .card-tag { color: var(--amber-lite); }

/* ============================================================
   SOLUTION DETAIL PAGES
   ============================================================ */

/* Brand banner at the top of each solution page. 3:2 to match the artwork,
   and unclipped (object-fit: contain) because the artwork carries text that
   must not be cropped. */
.sol-banner {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  background: var(--accent-deep);
}
.sol-banner img { width: 100%; height: auto; display: block; }

.sol-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .sol-hero-grid { grid-template-columns: 1fr; } }

/* "Ideal for every place" chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-grid li {
  list-style: none; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-head); font-size: .84rem; font-weight: 500; color: var(--text-strong);
  transition: border-color .3s, transform .3s var(--ease);
}
.chip-grid li:hover { border-color: var(--amber); transform: translateY(-2px); }

/* Prev / next service pager */
.sol-pager {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.sol-pager a {
  display: grid; gap: 3px; max-width: 46%;
  font-family: var(--font-head); font-size: .92rem; font-weight: 600; color: var(--text-strong);
}
.sol-pager a span { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.sol-pager a:hover { color: var(--accent-soft); }
.sol-pager .pg-next { text-align: right; margin-left: auto; }
@media (max-width: 620px) { .sol-pager a { max-width: 100%; } .sol-pager .pg-next { text-align: left; margin-left: 0; } }
/* Chips that link (used on the About page's solution list) */
.chip-grid li a { color: inherit; display: block; }

/* The tick styling for .card-list was scoped to `.card .card-list`, so the same
   list rendered plain when used directly in a section (solution pages use it
   outside a card). Promote the base styling to the class itself; the .card
   rules above still win where they apply. */
.card-list { display: grid; gap: 9px; }
.card-list li { list-style: none; font-size: 0.95rem; color: var(--text); padding-left: 24px; position: relative; }
.card-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Two columns for the long feature lists on solution pages */
.card-list.cols-2 { grid-template-columns: 1fr 1fr; gap: 9px 26px; }
@media (max-width: 620px) { .card-list.cols-2 { grid-template-columns: 1fr; } }

/* ============================================================
   REDESIGN BRIEF — HOMEPAGE SECTION COMPONENTS
   Section numbers below refer to the developer brief
   (assets/SS_SecurSys_Website_Redesign_Developer_Brief.pdf).
   ============================================================ */

/* ---------- 5.3 Trust strip ----------
   Five qualitative promises. Replaces the old counter strip: the brief
   forbids '0 Years Experience' / '0 Systems Installed' style numbers. */
.trust-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(1, 25, 74, .05), rgba(30, 74, 156, .03));
}
.trust-strip > div {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--text-strong); line-height: 1.3;
}
.trust-strip > div + div { border-left: 1px solid var(--line); padding-left: clamp(10px, 1.4vw, 18px); }
.trust-strip svg { flex: none; width: 22px; height: 22px; color: var(--accent-soft); }
@media (max-width: 1000px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-strip > div + div { border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .trust-strip { grid-template-columns: 1fr; gap: 11px; font-size: .93rem; }
  .trust-strip svg { width: 19px; height: 19px; }
}

/* ---------- 5.6 CCTV feature ----------
   The one solution the brief asks to give extra prominence, so it gets a
   full-width panel rather than a card in the nine-up grid. */
.cctv-feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xl);
  background: linear-gradient(150deg, rgba(1, 25, 74, .07), rgba(231, 148, 2, .05));
}
.cctv-feature h2 { margin: 14px 0 6px; }
.cctv-feature .cctv-sub {
  font-family: var(--font-head); font-weight: 600; letter-spacing: .04em;
  color: var(--amber-ink); margin-bottom: 16px;
}
.cctv-feature .cctv-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.cctv-feature .cctv-media img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .cctv-feature { grid-template-columns: 1fr; } }

/* Journey chain — Site Survey → Camera Planning → … → Support */
.journey { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; list-style: none; }
.journey li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  color: var(--text-strong); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 7px 14px;
}
.journey li::after { content: "→"; color: var(--amber-ink); margin-left: 2px; }
.journey li:last-child::after { content: none; }

/* ---------- 5.7 Solutions by requirement ---------- */
.req-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.req-card {
  display: grid; gap: 10px; padding: 22px 20px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.req-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.req-card .rq-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line); }
.req-card .rq-ic svg { width: 21px; height: 21px; color: var(--accent-soft); }
.req-card h3 { font-size: 1.02rem; }
.req-card ul { display: grid; gap: 5px; list-style: none; }
.req-card ul li { font-size: .88rem; color: var(--text-muted); padding-left: 15px; position: relative; }
.req-card ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
@media (max-width: 1000px) { .req-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .req-grid { grid-template-columns: 1fr; } }

/* ---------- 5.9 Process — seven numbered steps ---------- */
.proc-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; counter-reset: step; }
.proc-7 > li {
  list-style: none; display: grid; gap: 8px; padding: 20px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(170deg, rgba(1, 25, 74, .045), transparent);
}
.proc-7 > li i {
  font-style: normal; font-family: var(--font-head); font-weight: 800;
  font-size: 1.5rem; line-height: 1;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proc-7 > li b { font-family: var(--font-head); font-size: .93rem; color: var(--text-strong); }
.proc-7 > li p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 1100px) { .proc-7 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .proc-7 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 5.12 Installation quality ---------- */
.install-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.install-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); background: #fff; }
.install-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.install-grid figcaption { padding: 12px 14px; font-size: .84rem; color: var(--text-muted); font-family: var(--font-head); }
@media (max-width: 900px) { .install-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .install-grid { grid-template-columns: 1fr; } }

/* ---------- 5.16 Homepage lead form ---------- */
.lead-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.lead-panel { padding: clamp(24px, 3vw, 40px); }
.lead-assure { display: grid; gap: 14px; margin-top: 24px; list-style: none; }
.lead-assure li { display: flex; gap: 12px; font-size: .95rem; color: var(--text); }
.lead-assure svg { flex: none; width: 20px; height: 20px; color: var(--accent-soft); margin-top: 2px; }
.form-status { margin-top: 14px; font-size: .93rem; min-height: 1.2em; }
.form-status.is-ok { color: var(--accent-soft); }
.form-status.is-err { color: #b3261e; }
.form-note { margin-top: 12px; font-size: .82rem; color: var(--text-faint); }
@media (max-width: 900px) { .lead-split { grid-template-columns: 1fr; } }

/* Anchor targets must clear the fixed navbar when jumped to from the CTAs. */
#quote, #solutions, #industries, #projects, #amc { scroll-margin-top: calc(var(--nav-h, 76px) + 18px); }

/* 5.2 Hero service line — the six headline categories, under the lead. */
.hero-services {
  margin-top: 18px; font-family: var(--font-head); font-weight: 600;
  font-size: .95rem; color: var(--accent-soft); line-height: 1.7;
}
/* Required/optional markers on field labels */
.field label i { font-style: normal; color: var(--amber-ink); }
.field label i.opt { color: var(--text-faint); font-weight: 400; font-size: .8rem; }

/* ---------- Map: stacked layout below desktop ----------
   The overlaid address card is elegant on a wide frame, but on phones and
   tablets it sat over the middle of the map — exactly where the pin is — so
   the map became decoration. Below 820px the two are stacked instead: a full
   width map on top, the address panel beneath, both inside one rounded frame.
   Also covers the pre-load placeholder, which is absolutely positioned. */
@media (max-width: 820px) {
  .map-frame { height: auto; display: flex; flex-direction: column; }
  .map-frame iframe,
  .map-frame .map-load {
    position: relative; inset: auto; width: 100%; flex: none;
    height: clamp(260px, 42vw, 340px);
  }
  .map-card {
    position: static; inset: auto; max-width: none;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: #fff; backdrop-filter: none; box-shadow: none;
  }
}

/* ============================================================
   FOOTER CREDIT — Usher Media
   Sits below the closing signet: the "Designed & Managed by" lead-in
   flanked by hairline rules, with the brand lockup beneath. Uses the
   footer's own scoped tokens (--line-strong, --text-faint,
   --grad-accent) so it inherits the navy/amber treatment rather than
   introducing new colours.
   ============================================================ */
.footer-credit {
  display: flex; flex-direction: column; align-items: center;
  gap: 13px;
  margin-bottom: clamp(26px, 4vw, 40px);
  text-align: center;
}

/* Hairlines flanking the lead-in, each ending on a small amber lozenge. */
.footer-credit-orn {
  display: block; position: relative;
  width: clamp(40px, 5vw, 62px); height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(245, 179, 53, 0.55));
}
.footer-credit-orn:last-child { transform: scaleX(-1); }
.footer-credit-orn::after {
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  transform: rotate(45deg);
  background: var(--amber-lite);
  box-shadow: 0 0 8px rgba(245, 179, 53, 0.55);
}

.footer-credit-label {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  font-family: var(--font-head);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1;
  white-space: nowrap;
}

.footer-credit-amp {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 1.24rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--amber-lite);
  vertical-align: -0.12em; margin: 0 0.08em;
  text-shadow: 0 0 12px rgba(245, 179, 53, 0.4);
}

.footer-credit-link {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 11px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .35s, border-color .35s, background .35s, box-shadow .35s;
}
.footer-credit-link::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 196, 92, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left .75s;
}
.footer-credit-link:hover::after,
.footer-credit-link:focus-visible::after { left: 130%; }
.footer-credit-link:hover,
.footer-credit-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 179, 53, 0.6);
  background: var(--glass-2);
  box-shadow: 0 10px 26px rgba(1, 15, 46, 0.5);
}

.footer-credit-logo {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; background: #000; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: border-color .35s, box-shadow .35s;
}
.footer-credit-link:hover .footer-credit-logo,
.footer-credit-link:focus-visible .footer-credit-logo {
  border-color: rgba(245, 179, 53, 0.7);
  box-shadow: 0 0 14px rgba(245, 179, 53, 0.4);
}

.footer-credit-name {
  font-family: var(--font-head);
  font-size: 1.12rem; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit-link,
  .footer-credit-link::after,
  .footer-credit-logo { transition: none; }
}

@media (max-width: 640px) {
  .footer-credit { gap: 11px; }
  .footer-credit-label { gap: 11px; font-size: 0.64rem; letter-spacing: 0.18em; text-indent: 0.18em; }
  .footer-credit-orn { width: 30px; }
  .footer-credit-amp { font-size: 1.06rem; }
  .footer-credit-link { padding: 7px 17px 7px 7px; gap: 9px; }
  .footer-credit-logo { width: 28px; height: 28px; }
  .footer-credit-name { font-size: 0.98rem; }
}

@media (max-width: 420px) {
  .footer-credit-label { gap: 9px; }
  .footer-credit-orn { width: 22px; }
}

/* ---------- Reviews (client change: "reviews have to be updated") ----------
   Cards carry a rating, the review body, and an attributed name. Only genuine,
   permission-given reviews go in here — see the comment in index.html. */
.reviews-grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.review-card { display: flex; flex-direction: column; gap: 14px; }
.review-stars {
  display: inline-flex; gap: 3px; color: #f5a623; line-height: 1;
}
.review-stars svg { width: 17px; height: 17px; }
.review-card blockquote {
  margin: 0; font-size: 1.005rem; line-height: 1.68; color: var(--text);
}
.review-card blockquote::before { content: "\201C"; }
.review-card blockquote::after  { content: "\201D"; }
.review-who {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding-top: 4px;
}
.review-who .review-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem;
  line-height: 1; opacity: 1;
  color: #fff; background: linear-gradient(135deg, #01194a, #2f4d99);
}
.review-who > div b { display: block; font-size: 0.95rem; color: var(--text-strong); }
.review-who > div span { display: block; font-size: 0.83rem; opacity: 0.72; }
.reviews-cta { margin-top: clamp(26px, 3vw, 38px); text-align: center; }