/* ==========================================================================
   Seven Star Communications Ltd
   Design system — editorial B2B in black, gold and warm paper.
   Black chrome and gradient headers, hairline rules on paper, gold as the
   single accent. No glassmorphism, no gradient soup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink scale */
  --ink: #101214;
  --ink-2: #3d444b;
  --ink-3: #6a7178;
  --ink-4: #9aa0a6;

  /* Ground */
  --paper: #f4f2ed;
  --paper-2: #eceae4;
  --surface: #ffffff;
  --line: #e2dfd8;
  --line-strong: #cfcbc2;

  /* Black chrome */
  --black: #0a0b0c;
  --black-2: #16171a;

  /* Gold — the single accent, in three weights for three jobs */
  --gold: #d4a52c;        /* graphic accent: fills, bars, borders */
  --gold-bright: #ecc45f; /* gold on black — headings, active links */
  --gold-deep: #8a6712;   /* gold as text on paper (passes contrast) */
  --gold-soft: #f7f0dc;   /* pale wash */

  /* Semantics */
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --ok: #157a5b;
  --ok-soft: #e8f4ef;
  --warn: #b06a10;
  --warn-soft: #fbf1e2;
  --danger: #b4342a;

  /* Type */
  --font-display: "Inter Tight", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Geometry */
  --wrap: 1240px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  --shadow-1: 0 1px 2px rgba(16, 18, 20, .04);
  --shadow-2: 0 1px 2px rgba(16, 18, 20, .04), 0 12px 28px -16px rgba(16, 18, 20, .22);
  --shadow-3: 0 2px 4px rgba(16, 18, 20, .04), 0 28px 60px -28px rgba(16, 18, 20, .32);

  --t: .22s cubic-bezier(.4, 0, .2, 1);
  --header-h: 76px;

  /* Legacy aliases — keep older markup rendering on the new system */
  --navy-900: var(--ink);
  --navy-800: var(--ink);
  --navy-700: var(--ink-2);
  --navy-600: var(--ink-2);
  --navy-050: var(--paper-2);
  --gold-500: var(--accent);
  --gold-400: var(--accent);
  --gold-300: var(--accent);
  --gold-050: var(--accent-soft);
  --ink-900: var(--ink);
  --ink-700: var(--ink-2);
  --ink-500: var(--ink-3);
  --ink-300: var(--ink-4);
  --surface-alt: var(--paper);
  --success: var(--ok);
  --font-head: var(--font-display);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --t-fast: var(--t);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.006em;
  color: var(--ink-2);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--gold-deep); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Gold focus ring wherever the ground is black */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible,
.section--navy :focus-visible,
.cta-band :focus-visible { outline-color: var(--gold-bright); }

/* Link hover on dark grounds (buttons keep their own hover colours) */
.site-header a:not(.btn):hover,
.site-footer a:not(.btn):hover,
.hero a:not(.btn):hover,
.page-banner a:not(.btn):hover,
.section--navy a:not(.btn):hover,
.cta-band a:not(.btn):hover { color: var(--gold-bright); }

::selection { background: var(--gold); color: var(--black); }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 620;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.032em;
}
h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.28;
  letter-spacing: -.02em;
}
h4 { font-size: 1.02rem; letter-spacing: -.015em; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-3);
  letter-spacing: -.012em;
}

/* Micro label — mono, uppercase, tracked */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.15rem;
}
.eyebrow--center { display: block; text-align: center; }

.section-head { max-width: 720px; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 28px;
}
.wrap--narrow { max-width: 880px; }

.section { padding: clamp(72px, 9vw, 132px) 0; }
.section--tight { padding: clamp(52px, 6vw, 84px) 0; }
.section--alt { background: var(--surface); }
.section--navy {
  background:
    radial-gradient(900px 500px at 88% -25%, rgba(212, 165, 44, .13), transparent 62%),
    linear-gradient(168deg, var(--black-2) 0%, var(--black) 70%);
  color: #a8afb6;
}
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #fff; }
.section--navy .lead { color: #8b939b; }
.section--navy .eyebrow { color: var(--gold-bright); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Buttons & atoms
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: .925rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.btn svg { width: 16px; height: 16px; }

/* Primary — gold on black type. The one loud element on the page. */
.btn--ink,
.btn--primary,
.btn--navy {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 500;
}
.btn--ink:hover,
.btn--primary:hover,
.btn--navy:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--black);
}

/* Secondary on paper — ink hairline that fills on hover */
.btn--line,
.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--line:hover,
.btn--outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* Secondary on black */
.hero .btn--line,
.page-banner .btn--line {
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}
.hero .btn--line:hover,
.page-banner .btn--line:hover {
  border-color: var(--gold);
  background: rgba(212, 165, 44, .1);
  color: var(--gold-bright);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
}
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn--light:hover { background: var(--paper); border-color: var(--paper); }

.btn--sm { padding: 10px 16px; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--t), color var(--t);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t); }
.link-arrow:hover { border-color: var(--gold); color: var(--gold-deep); }
.link-arrow:hover svg { transform: translateX(3px); }

.badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Header — floating island nav
      At the top of the page the bar is invisible chrome over the dark hero.
      Once scrolled it condenses into a bordered, blurred island so it reads
      as a distinct layer above both dark and light sections.
   -------------------------------------------------------------------------- */
:root { --header-h: 84px; }

/* Fixed, not sticky: the bar is transparent at rest, so the dark hero has to
   run underneath it rather than start below it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 12px 0;
}
.site-header .wrap { position: relative; }

.nav-shell { position: relative; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.is-stuck .nav {
  background: rgba(12, 13, 15, .74);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(212, 165, 44, .2);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .95);
  padding: 0 8px 0 14px;
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--gold);
  display: grid;
  place-items: center;
  transition: transform var(--t), box-shadow var(--t);
}
.brand:hover .brand__mark {
  transform: rotate(-8deg);
  box-shadow: 0 0 0 4px rgba(212, 165, 44, .16);
}
.brand__mark svg { width: 17px; height: 17px; fill: var(--black); }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6f777e;
}

/* Primary links + sliding indicator */
.nav__primary { position: relative; margin-inline: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  position: relative;
  z-index: 1;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: inherit;
  font-size: .89rem;
  font-weight: 450;
  letter-spacing: -.008em;
  color: #a8afb6;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { color: #fff; }
.nav__link.is-active { color: var(--gold-bright); }
.nav__chev {
  width: 12px;
  height: 12px;
  opacity: .55;
  transition: transform var(--t);
}
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); opacity: 1; }

/* The pill that slides between items */
.nav__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .075);
  transform: translate(0, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              width .35s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}
.nav__indicator.is-on { opacity: 1; }

/* Right-hand cluster */
.nav__end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #8b939b;
  transition: color var(--t), background var(--t);
}
.nav__phone svg { width: 13px; height: 13px; stroke: var(--gold); }
.nav__phone:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.nav__toggle span + span { margin-top: 4.5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Reading progress — only meaningful once the island is pinned */
.nav-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  opacity: 0;
  transition: opacity var(--t);
  overflow: hidden;
}
.site-header.is-stuck .nav-progress { opacity: 1; }
.nav-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* --------------------------------------------------------------------------
   5b. Services mega menu
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 24px;
  border: 1px solid rgba(212, 165, 44, .2);
  border-radius: 16px;
  background: rgba(12, 13, 15, .96);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .96);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, .2, 1), visibility .22s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }

.mega__inner { display: grid; grid-template-columns: repeat(3, 1fr) .95fr; gap: 20px; }
.mega__col { display: grid; align-content: start; gap: 1px; }
.mega__head {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6f777e;
  padding: 0 12px 10px;
}
.mega__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background var(--t);
}
.mega__item:hover { background: rgba(255, 255, 255, .055); }
.mega__num {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--gold);
  padding-top: 3px;
}
.mega__title {
  display: block;
  font-size: .885rem;
  font-weight: 500;
  letter-spacing: -.014em;
  color: #fff;
}
.mega__desc {
  display: block;
  margin-top: 1px;
  font-size: .765rem;
  line-height: 1.4;
  color: #8b939b;
}
.mega__item:hover .mega__title { color: var(--gold-bright); }

.mega__feature {
  border: 1px solid rgba(212, 165, 44, .26);
  border-radius: 12px;
  padding: 20px;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(212, 165, 44, .14), transparent 70%),
    rgba(255, 255, 255, .02);
}
.mega__feature h3 { font-size: 1rem; color: #fff; margin-bottom: .45rem; }
.mega__feature p { font-size: .8rem; line-height: 1.5; color: #8b939b; margin-bottom: 1.1rem; }
.mega__feature .btn { width: 100%; }

/* --------------------------------------------------------------------------
   5c. Mobile sheet
   -------------------------------------------------------------------------- */
.nav-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  padding: calc(var(--header-h) + 12px) 0 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(760px 520px at 84% -6%, rgba(212, 165, 44, .18), transparent 60%),
    linear-gradient(170deg, #17181c 0%, var(--black) 68%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.nav-sheet.is-open { opacity: 1; visibility: visible; }

.sheet__nav { list-style: none; border-top: 1px solid rgba(255, 255, 255, .09); }
.sheet__row { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.sheet__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 17px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.035em;
  color: #fff;
  cursor: pointer;
  transition: color var(--t);
}
.sheet__link:hover,
.sheet__link.is-active { color: var(--gold-bright); }
.sheet__num {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--gold);
  flex: 0 0 auto;
}
.sheet__link .nav__chev { margin-left: auto; width: 16px; height: 16px; align-self: center; }
.sheet__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.sheet__sub { overflow: hidden; max-height: 0; transition: max-height .32s cubic-bezier(.4, 0, .2, 1); }
.sheet__sub ul { list-style: none; padding: 2px 0 18px 34px; display: grid; gap: 2px; }
.sheet__sub a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 9px 10px 9px 0;
  font-size: .93rem;
  color: #a8afb6;
  border-radius: 8px;
}
.sheet__sub a:hover { color: #fff; }
.sheet__sub em {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-style: normal;
  color: var(--gold);
  padding-top: 4px;
}

.sheet__foot {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  display: grid;
  gap: 18px;
}
.sheet__meta { display: grid; gap: 10px; }
.sheet__meta a,
.sheet__meta span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: #8b939b;
}
.sheet__meta svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: var(--gold); }
.sheet__foot .btn { width: 100%; }

/* Staggered entrance for the sheet rows */
.nav-sheet .sheet__row,
.nav-sheet .sheet__foot { opacity: 0; transform: translateY(12px); }
.nav-sheet.is-open .sheet__row,
.nav-sheet.is-open .sheet__foot {
  animation: sheetIn .5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
@keyframes sheetIn {
  to { opacity: 1; transform: none; }
}

/* While the sheet is open the bar drops its island chrome, so the brand and
   the close button read as part of the menu rather than a pill floating on it. */
body.is-locked { overflow: hidden; }
body.is-locked .nav {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body.is-locked .nav-progress { opacity: 0; }

/* --------------------------------------------------------------------------
   5d. Header responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
  .nav__link { padding: 9px 11px; font-size: .86rem; }
}

@media (max-width: 980px) {
  :root { --header-h: 76px; }

  .site-header { padding: 10px 0; }
  .nav { height: 56px; gap: 12px; }
  .nav__primary { display: none; }
  .nav__end .btn { display: none; }
  .nav__end { margin-left: auto; }
  .nav__toggle { display: block; }
  .nav-sheet { display: block; }
  .mega { display: none; }
  .site-header.is-stuck .nav { padding: 0 6px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__indicator { transition: opacity .01ms; }
  .nav-sheet .sheet__row,
  .nav-sheet .sheet__foot { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(34px, 4.5vw, 62px)) 0 0;
  color: #a8afb6;
  background:
    /* warm gold bloom behind the board */
    radial-gradient(1100px 640px at 82% -6%, rgba(212, 165, 44, .22), transparent 60%),
    /* low gold wash on the opposite corner */
    radial-gradient(720px 460px at 2% 104%, rgba(212, 165, 44, .09), transparent 62%),
    /* charcoal to black body */
    linear-gradient(168deg, #1b1c20 0%, #101114 46%, var(--black) 100%);
}
/* Hairline of gold where the hero meets the page */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 44, .55), transparent);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(48px, 6vw, 84px);
}

/* Availability line */
.tagline {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.6rem;
  padding: 6px 14px 6px 11px;
  border: 1px solid rgba(212, 165, 44, .32);
  border-radius: 100px;
  background: rgba(212, 165, 44, .08);
  font-family: var(--font-mono);
  font-size: .715rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.tagline .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 44, .2);
}

.hero h1 { margin-bottom: 1.5rem; color: #fff; }
.hero h1 .mark {
  position: relative;
  white-space: nowrap;
}
.hero h1 .mark { color: var(--gold-bright); }
.hero h1 .mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .04em;
  height: .07em;
  background: var(--gold);
  border-radius: 2px;
  opacity: .55;
}

.hero__sub {
  max-width: 50ch;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #9aa1a8;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Inline facts */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(2.4rem, 4vw, 3.4rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px;
}
.hero__facts > div { padding-right: 34px; margin-right: 34px; border-right: 1px solid rgba(255, 255, 255, .12); }
.hero__facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__facts dt {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--gold-bright);
  line-height: 1;
}
.hero__facts dd {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: #8b939b;
  letter-spacing: -.005em;
}

/* ---- Live operations board ---- */
.hero__visual { position: relative; }

.board {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  box-shadow: 0 48px 96px -44px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 165, 44, .12);
  overflow: hidden;
}
.board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf8;
}
.board__live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.board__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 122, 91, .35); }
  50% { box-shadow: 0 0 0 5px rgba(21, 122, 91, 0); }
}
.board__clock {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.board__rows { list-style: none; }
.board__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.board__row:hover { background: #fbfaf8; }
.board__code {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.board__route {
  font-size: .85rem;
  color: var(--ink-3);
  letter-spacing: -.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board__right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.board__eta {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--t);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 9px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t), color var(--t), opacity var(--t);
}
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--info { background: var(--gold-soft); color: var(--gold-deep); }

.board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: #fbfaf8;
  font-size: .8rem;
  color: var(--ink-3);
}
.board__foot strong {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink);
  font-weight: 500;
}

/* Floating stat card */
.board-note {
  position: absolute;
  left: -26px;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 19px;
  background: var(--gold);
  color: var(--black);
  border-radius: var(--r);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .8);
}
.board-note__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--black);
}
.board-note__label {
  font-size: .78rem;
  line-height: 1.3;
  color: rgba(10, 11, 12, .72);
  max-width: 15ch;
}

/* Trust strip */
.hero__trust {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__trust > span {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6f777e;
}
.hero__trust ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  list-style: none;
}
.hero__trust li {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #8b939b;
  transition: color var(--t);
}
.hero__trust li:hover { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   7. Page banner
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  padding: calc(var(--header-h) + clamp(36px, 4.5vw, 64px)) 0 clamp(44px, 5vw, 68px);
  color: #a8afb6;
  background:
    radial-gradient(880px 460px at 84% -30%, rgba(212, 165, 44, .2), transparent 60%),
    linear-gradient(168deg, #1b1c20 0%, #101114 50%, var(--black) 100%);
}
.page-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 44, .5), transparent);
}
.page-banner h1 { max-width: 18ch; margin-bottom: 1rem; color: #fff; }
.page-banner p { max-width: 62ch; color: #9aa1a8; font-size: 1.06rem; margin-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  color: #6f777e;
}
.crumbs a { color: #9aa1a8; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: #4a4f55; }

/* --------------------------------------------------------------------------
   8. Components
   -------------------------------------------------------------------------- */

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat { padding: 34px 28px 34px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.stat__num .accent { color: var(--gold-deep); }
.stat__label {
  margin-top: .7rem;
  font-size: .85rem;
  color: var(--ink-3);
  letter-spacing: -.005em;
}
.section--navy .stats { border-color: rgba(255, 255, 255, .14); }
.section--navy .stat { border-right-color: rgba(255, 255, 255, .14); }
.section--navy .stat__num { color: #fff; }
.section--navy .stat__label { color: #8b939b; }

/* Cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 28px;
  height: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .93rem; color: var(--ink-3); margin-bottom: 0; line-height: 1.55; }
.card .link-arrow { margin-top: 1.15rem; }

.card__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: 1.2rem;
}
.card__icon svg { width: 19px; height: 19px; stroke: var(--ink); transition: stroke var(--t); }
.card:hover .card__icon { background: var(--gold-soft); border-color: rgba(212, 165, 44, .35); }
.card:hover .card__icon svg { stroke: var(--gold-deep); }

.card__num {
  position: absolute;
  top: 30px;
  right: 28px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   8b. Service index — hairline directory on the left, one black detail
   panel on the right. Nine services stay visible at a glance while only
   one carries the weight. Below 1080px the rail drops away and each panel
   becomes its own card, so nothing is hidden behind an interaction that
   touch users can't discover.
   -------------------------------------------------------------------------- */
.svc-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(30px, 4vw, 52px);
}
.svc-head h2 { margin-bottom: 0; }
.svc-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: .35rem;
}
.svc-head .lead { margin-bottom: 0; }

/* Items stretch rather than sit at the top: the panel matches the rail's
   height, which keeps the two columns reading as one block. */
.svc-index {
  display: grid;
  grid-template-columns: minmax(290px, .8fr) 1.2fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
}

/* --- Rail ---------------------------------------------------------------- */
.svc-rail__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .5rem;
  padding: 0 16px .8rem 18px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
}
.svc-rail__title span { color: var(--gold-deep); }

.svc-rail__list { position: relative; }

.svc-rail__group {
  margin: 1.5rem 0 .3rem;
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.svc-rail__group:first-child { margin-top: .6rem; }

.svc-tab {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 12px 16px 12px 18px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.svc-tab__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-4);
  transition: color var(--t);
}
.svc-tab__chev {
  width: 16px;
  height: 16px;
  stroke: var(--gold-deep);
  fill: none;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--t), transform var(--t);
}
.svc-tab:hover { color: var(--ink); background: rgba(16, 18, 20, .035); }
.svc-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.svc-tab[aria-selected="true"] .svc-tab__num { color: var(--gold-deep); }
.svc-tab[aria-selected="true"] .svc-tab__chev { opacity: 1; transform: none; }

/* The gold bar that slides between rows — positioned by initServiceIndex() */
.svc-rail__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--gold);
  pointer-events: none;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), height .34s cubic-bezier(.22, 1, .36, 1);
}

/* --- Detail panel -------------------------------------------------------- */
.svc-panels { display: grid; }

.svc-panel {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(760px 420px at 92% -22%, rgba(212, 165, 44, .16), transparent 62%),
    linear-gradient(168deg, var(--black-2) 0%, var(--black) 72%);
  color: #a8afb6;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .32s;
}
.svc-panel.is-active { opacity: 1; visibility: visible; transform: none; }

/* Gold hairline closing the bottom edge, as on the hero and page banners */
.svc-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 44, .55), transparent);
}

.svc-panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 1.5rem;
}
.svc-panel__icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(212, 165, 44, .1);
  border: 1px solid rgba(212, 165, 44, .28);
  flex: none;
}
.svc-panel__icon svg { width: 26px; height: 26px; stroke: var(--gold-bright); }
.svc-panel__num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .07);
}
.svc-panel__group {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.svc-panel h3 {
  color: #fff;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  letter-spacing: -.028em;
  margin-bottom: .55rem;
}
.svc-panel p { color: #8b939b; max-width: 58ch; margin-bottom: 0; }

.svc-panel__points {
  list-style: none;
  margin: 1.5rem 0 1.6rem;
  display: grid;
  gap: .68rem;
}
.svc-panel__points li {
  position: relative;
  padding-left: 26px;
  font-size: .93rem;
  line-height: 1.5;
  color: #c3c9cf;
}
.svc-panel__points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .3em;
  width: 6px;
  height: 11px;
  border: solid var(--gold);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

/* margin-top:auto pins the rule and CTA to the bottom edge of the panel,
   whatever the length of the copy above it */
.svc-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.svc-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1 1 260px;
}
.svc-panel .tag {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
  color: #8b939b;
}

/* Panel contents settle in one after another as the panel takes over */
@keyframes svc-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.svc-panel.is-active > * { animation: svc-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.svc-panel.is-active > *:nth-child(1) { animation-delay: .03s; }
.svc-panel.is-active > *:nth-child(2) { animation-delay: .07s; }
.svc-panel.is-active > *:nth-child(3) { animation-delay: .11s; }
.svc-panel.is-active > *:nth-child(4) { animation-delay: .15s; }
.svc-panel.is-active > *:nth-child(5) { animation-delay: .19s; }
.svc-panel.is-active > *:nth-child(6) { animation-delay: .23s; }

/* --- Below the rail breakpoint: nine cards, no interaction required ------ */
@media (max-width: 1080px) {
  .svc-head { grid-template-columns: 1fr; align-items: start; }
  .svc-head__aside { padding-bottom: 0; }

  .svc-index { grid-template-columns: 1fr; }
  .svc-rail { display: none; }

  .svc-panels {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
  }
  .svc-panel {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 26px 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
  }
  .svc-panel::after { display: none; }
  .svc-panel.is-active > * { animation: none; }

  .svc-panel__top { margin-bottom: 1.1rem; align-items: center; }
  .svc-panel__icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: var(--paper);
    border-color: var(--line);
  }
  .svc-panel__icon svg { width: 21px; height: 21px; stroke: var(--ink); }
  .svc-panel__num {
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--gold-deep);
  }
  .svc-panel__group { color: var(--gold-deep); font-size: .64rem; }
  .svc-panel h3 { color: var(--ink); font-size: 1.18rem; }
  .svc-panel p { color: var(--ink-3); font-size: .93rem; margin-bottom: 1.3rem; }

  /* The full breakdown lives on the services page — keep the cards scannable */
  .svc-panel__points,
  .svc-panel__tags { display: none; }

  /* margin-top:auto still applies, so the CTAs line up across a row of cards */
  .svc-panel__foot {
    padding-top: 1.2rem;
    border-top-color: var(--line);
  }

  /* Nine filled gold buttons would shout over each other. On the card
     layout the CTA steps back down to a hairline text link — the same
     treatment .link-arrow gets everywhere else on paper. */
  .svc-panel__foot .btn {
    padding: 0 0 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    color: var(--ink);
    font-size: .9rem;
    transition: border-color var(--t), color var(--t);
  }
  .svc-panel__foot .btn svg { width: 15px; height: 15px; transition: transform var(--t); }
  .svc-panel__foot .btn:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }
  .svc-panel__foot .btn:hover svg { transform: translateX(3px); }
}

@media (max-width: 620px) {
  .svc-panels { grid-template-columns: 1fr; }
  .svc-panel__foot .btn { width: auto; }
}

/* Service rows */
.service-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.service-row:last-child { border-bottom: 0; }
.service-row__badge {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold-deep);
  padding-top: .35rem;
}
.service-row h3 { margin-bottom: .6rem; font-size: 1.4rem; }
.service-row p { max-width: 68ch; color: var(--ink-2); }
.service-row__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.2rem; }
.tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .78rem;
  color: var(--ink-3);
}

/* Jump nav */
.jump { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0; }
.jump a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  font-size: .84rem;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t);
}
.jump a:hover { border-color: var(--ink); color: var(--ink); }

/* Checklist */
.checklist { list-style: none; display: grid; gap: 13px; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.checklist svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; stroke: var(--gold-deep); }
.section--navy .checklist li { color: #b9bfc5; }
.section--navy .checklist svg { stroke: var(--gold); }
.checklist--cross svg { stroke: var(--ink-4); }
.checklist--cross li { color: var(--ink-3); }

/* Compare */
.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.compare__col {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 28px;
  background: var(--surface);
  height: 100%;
}
.compare__col--win { border-color: var(--gold); box-shadow: var(--shadow-2); }
.compare__col h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.3rem; }

/* Feature */
.feature { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; }
.feature__icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
}
.feature__icon svg { width: 19px; height: 19px; stroke: var(--ink); }
.feature h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.feature p { font-size: .93rem; color: var(--ink-3); margin-bottom: 0; line-height: 1.55; }
.section--navy .feature__icon { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.section--navy .feature__icon svg { stroke: var(--gold); }
.section--navy .feature p { color: #8b939b; }

/* Panel */
.panel {
  background:
    radial-gradient(600px 340px at 92% -30%, rgba(212, 165, 44, .16), transparent 60%),
    linear-gradient(150deg, var(--black-2), var(--black));
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 38px);
  color: #b9bfc5;
}
.panel h3 { color: #fff; }
.panel > p { color: #8b939b; font-size: .93rem; }
.panel__rows { list-style: none; margin-top: 1.4rem; }
.panel__rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .9rem;
}
.panel__rows li:last-child { border-bottom: 0; }
.panel__rows strong { color: #fff; font-weight: 500; }
.panel__rows .pill {
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold-deep);
  margin-bottom: .8rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { font-size: .9rem; color: var(--ink-3); margin-bottom: 0; line-height: 1.55; }
.section--navy .step { border-top-color: rgba(255, 255, 255, .16); }
.section--navy .step::before { color: var(--gold); }
.section--navy .step p { color: #8b939b; }

/* Clients */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.client {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-right: 24px;
}
.client:last-child { border-right: 0; }
.client__star { display: none; }
.client__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--ink);
}
.client__type {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Audience */
.audience { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.audience li {
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.audience svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--ink-4); }

/* Airports */
.airports { display: flex; flex-wrap: wrap; gap: 8px; }
.airport {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .87rem;
  color: #b9bfc5;
}
.airport b { font-family: var(--font-mono); font-size: .76rem; color: var(--gold-bright); font-weight: 500; }

/* Quote */
.quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -.028em;
  color: var(--ink);
  padding-left: 24px;
  border-left: 3px solid var(--gold);
}

/* CTA band */
.cta-band {
  background:
    radial-gradient(700px 400px at 88% -40%, rgba(212, 165, 44, .22), transparent 60%),
    linear-gradient(150deg, var(--black-2), var(--black));
  border: 1px solid rgba(212, 165, 44, .18);
  color: #b9bfc5;
  border-radius: var(--r-lg);
  padding: clamp(38px, 5vw, 68px);
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 32px;
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { color: #8b939b; margin-bottom: 0; }
.cta-band .btn-row { justify-content: flex-end; }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--ink);
  transition: color var(--t);
}
.acc__btn:hover { color: var(--gold-deep); }
.acc__icon { position: relative; flex: 0 0 20px; width: 20px; height: 20px; }
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-3);
  transition: transform var(--t);
}
.acc__icon::before { top: 9.5px; left: 2px; width: 16px; height: 1.5px; }
.acc__icon::after { left: 9.5px; top: 2px; width: 1.5px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(90deg); }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--t); }
.acc__panel > div { padding: 0 60px 26px 0; color: var(--ink-3); font-size: .96rem; line-height: 1.6; }

/* Info cards */
.info-card {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  height: 100%;
}
.info-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.info-card__icon svg { width: 17px; height: 17px; stroke: var(--ink); }
.info-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.info-card p { font-size: .92rem; color: var(--ink-3); margin-bottom: .2rem; }
.info-card a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.info-card a:hover { color: var(--gold-deep); border-color: var(--gold); }

/* Coverage */
.coverage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.coverage__item {
  padding: 30px 28px 30px 0;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.coverage__item:last-child { border-right: 0; }
.coverage__item h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.coverage__item p { font-size: .9rem; color: #8b939b; margin-bottom: 0; line-height: 1.55; }
.coverage__flag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: #6f777e;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   8b. Photography
       Every photo is framed, ratio-locked (so nothing shifts while it loads)
       and washed with a faint gold-to-black gradient, which keeps mixed stock
       sources reading as one set against the black-and-gold palette.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  margin: 0;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(152deg, rgba(212, 165, 44, .14) 0%, transparent 44%, rgba(10, 11, 12, .34) 100%);
}

.media--16x10 { aspect-ratio: 16 / 10; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--5x4 { aspect-ratio: 5 / 4; }

.media__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(10, 11, 12, .92), rgba(10, 11, 12, .45) 55%, transparent);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #eceff2;
}
.media__cap::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

.section--navy .media { border-color: rgba(255, 255, 255, .12); }

/* Photo stacked above a supporting panel in the same column */
.media-stack { display: grid; gap: 18px; }

/* --------------------------------------------------------------------------
   8c. Full-bleed image band
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 440px at 84% 4%, rgba(212, 165, 44, .24), transparent 62%),
    linear-gradient(180deg, rgba(10, 11, 12, .62) 0%, rgba(10, 11, 12, .9) 100%);
}
.band__inner { padding: clamp(60px, 8vw, 116px) 0; }
.band__quote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.1vw, 2.45rem);
  line-height: 1.16;
  letter-spacing: -.036em;
  color: #fff;
}
.band__meta {
  margin: 1.3rem 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

@media (max-width: 620px) {
  .media__cap { padding: 28px 14px 12px; font-size: .62rem; }
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-2);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -.005em;
}
.field label .req { color: var(--ink-4); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: .94rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { resize: vertical; min-height: 126px; line-height: 1.55; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 18, 20, .07);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-4); }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }
.field .error { font-size: .78rem; color: var(--danger); min-height: .9rem; }

.check-line { display: flex; gap: .65rem; align-items: flex-start; font-size: .87rem; color: var(--ink-3); }
.check-line input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; accent-color: var(--ink); }

.form-note { font-size: .82rem; color: var(--ink-4); }
.form-note a { color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }

.form-alert {
  display: none;
  align-items: flex-start;
  gap: .65rem;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}
.form-alert.is-visible { display: flex; }
.form-alert svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.form-alert--ok { background: var(--ok-soft); color: var(--ok); }
.form-alert--err { background: #fbecea; color: var(--danger); }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  border-top: 1px solid rgba(212, 165, 44, .22);
  color: #8b939b;
  padding: clamp(56px, 6vw, 84px) 0 0;
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer h4 {
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.site-footer .brand { margin-bottom: 1.1rem; }
.site-footer .brand__mark { background: var(--gold); }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__tag { color: #6f777e; }
.footer__list { list-style: none; display: grid; gap: 10px; }
.footer__list a { color: #8b939b; }
.footer__list a:hover { color: #fff; }
.footer__contact { list-style: none; display: grid; gap: 13px; }
.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; stroke: var(--gold); }
.footer__contact a { color: #8b939b; }
.footer__contact a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: #6f777e;
}
.footer__bottom ul { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom a { color: #6f777e; }
.footer__bottom a:hover { color: #fff; }

/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-2);
  transition: opacity var(--t), visibility var(--t), background var(--t), color var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.to-top svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   11. Utilities, motion, responsive
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 1.3rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 200;
  padding: 11px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .88rem;
  transition: top var(--t);
}
.skip-link:focus { top: 0; color: #fff; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; }
  .board-note { left: auto; right: -10px; bottom: -22px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .coverage { grid-template-columns: 1fr; }
  .coverage__item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); padding-right: 0; }
  .coverage__item:last-child { border-bottom: 0; }
  .nav__phone { display: none; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 26px 20px 26px 0; }
  .stat:nth-child(2) { border-right: 0; }
  .compare { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .acc__panel > div { padding-right: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .hero__facts > div { padding-right: 20px; margin-right: 20px; }
  .hero__facts dt { font-size: 1.3rem; }
  .board-note { position: static; margin-top: 16px; }
  .steps { grid-template-columns: 1fr; }
  .clients { grid-template-columns: 1fr; }
  .client { border-right: 0; padding-right: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 1fr; gap: 12px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .nav__toggle, .skip-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .section { padding: 12pt 0; }
  .reveal { opacity: 1; transform: none; }
}