/* ===========================================================================
   Asset Bridge Advisors -- Design System
   Tokens: navy + gold, pulled directly from the company logo (static/images/
   logo-lockup.png). Three layers: primitive -> semantic -> component.
   Type: Playfair Display (display/headings) + Inter (UI/body).
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------
     PRIMITIVE TOKENS -- raw values, never referenced directly in markup
     ------------------------------------------------------------------- */
  --navy-950: #0A1B25;
  --navy-900: #0D2230;
  --navy-800: #102A39;   /* exact background color sampled from the logo */
  --navy-700: #163A4D;
  --navy-600: #1E4D66;
  --navy-500: #2C6482;
  --navy-100: #DCE6EB;
  --navy-50:  #EFF3F5;

  --gold-800: #8C7038;
  --gold-700: #A98A4C;
  --gold-600: #C5A769;   /* exact gold sampled from the logo */
  --gold-500: #D2BC85;
  --gold-300: #E4D6B3;
  --gold-100: #F4EDDE;
  --gold-50:  #FAF6EC;

  --slate-900: #16232B;
  --slate-800: #24333D;
  --slate-700: #3A4A55;
  --slate-600: #55666F;
  --slate-500: #74858C;
  --slate-400: #9AA8AD;
  --slate-300: #C3CDD0;
  --slate-200: #DCE3E5;
  --slate-100: #EEF2F3;
  --slate-50:  #F7F9F9;

  --white: #FFFFFF;

  --success-600: #1F7A4C;
  --success-50:  #E9F6EE;
  --danger-600:  #B3432F;
  --danger-50:   #FBEBE7;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 42, 57, 0.06), 0 1px 1px rgba(16, 42, 57, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(16, 42, 57, 0.16), 0 2px 6px rgba(16, 42, 57, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(16, 42, 57, 0.24), 0 4px 12px rgba(16, 42, 57, 0.08);
  --shadow-gold: 0 8px 20px -6px rgba(197, 167, 105, 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1180px;
  --header-height: 108px; /* tall enough for the 2x-larger logo below, with room to spare */

  /* -------------------------------------------------------------------
     SEMANTIC TOKENS -- purpose-based aliases; components reference these
     ------------------------------------------------------------------- */
  --color-bg: var(--white);
  --color-bg-muted: var(--slate-50);
  --color-bg-inverse: var(--navy-800);
  --color-bg-inverse-deep: var(--navy-900);

  --color-surface: var(--white);
  --color-surface-raised: var(--white);
  --color-surface-inverse: var(--navy-700);

  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-border-inverse: rgba(255, 255, 255, 0.14);

  --color-text: var(--slate-900);
  --color-text-muted: var(--slate-600);
  --color-text-subtle: var(--slate-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.72);

  --color-primary: var(--navy-800);
  --color-primary-strong: var(--navy-900);
  --color-primary-soft: var(--navy-50);

  --color-accent: var(--gold-600);
  --color-accent-strong: var(--gold-700);
  --color-accent-soft: var(--gold-100);
  --color-on-accent: var(--navy-900);

  --color-focus-ring: var(--gold-600);
  --color-success: var(--success-600);
  --color-danger: var(--danger-600);

  /* -------------------------------------------------------------------
     COMPONENT TOKENS
     ------------------------------------------------------------------- */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--gold-700);
  --btn-primary-text: var(--navy-900);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: rgba(255, 255, 255, 0.4);
  --btn-secondary-text: var(--white);

  --btn-outline-border: var(--navy-800);
  --btn-outline-text: var(--navy-800);

  --card-bg: var(--white);
  --card-border: var(--slate-200);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  --header-bg: rgba(16, 42, 57, 0.92);
  --header-border: rgba(255, 255, 255, 0.08);

  --input-bg: var(--white);
  --input-border: var(--slate-300);
  --input-border-focus: var(--navy-700);
  --input-radius: var(--radius-md);
}

/* ===========================================================================
   RESET
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The mobile nav drawer sits off-canvas via `transform: translateX(100%)`
     rather than `display:none`, so it still contributes to scrollable
     width. Clip it so it can't cause horizontal scroll/rubber-banding.
     (`.site-header` is `position: fixed`, not `sticky`, specifically so
     this doesn't break its positioning -- sticky elements lose their
     containing block under an overflow-clipped ancestor.) */
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

::selection { background: rgba(197, 167, 105, 0.28); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keeps anchor-link targets (e.g. /services#domain-names, the #main skip
   link) from landing underneath the fixed header. */
[id] { scroll-margin-top: var(--header-height); }

/* ===========================================================================
   TYPOGRAPHY
   =========================================================================== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

h1, .h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.08; }
h2, .h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.15; }
h3, .h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.3; }
h4, .h4 { font-size: 1.125rem; line-height: 1.4; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--gold-500); }

.lede {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-on-dark { color: var(--color-text-inverse); }
.text-on-dark-muted { color: var(--color-text-inverse-muted); }
.text-accent { color: var(--color-accent-strong); }
.text-center { text-align: center; }

/* ===========================================================================
   LAYOUT
   =========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section-tight { padding-block: var(--space-7); }
.section-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.section-muted { background: var(--color-bg-muted); }

/* The Home page's "Process" band (.section-tight.section-muted together)
   uses the header's translucent navy instead of the usual light-gray
   muted background. `color` cascades to headings/eyebrow/plain text via
   normal inheritance, but a few components set their own color/background
   for the light-section case and need an explicit dark-background variant
   here so they don't disappear (or clash) against navy. */
.section-tight.section-muted {
  background: var(--header-bg);
  color: var(--color-text-inverse);
}
.section-tight.section-muted .eyebrow { color: var(--gold-500); }
.section-tight.section-muted .text-muted { color: var(--color-text-inverse-muted); }
.section-tight.section-muted .card-badge {
  background: rgba(197, 167, 105, 0.16);
  color: var(--gold-500);
}
.section-tight.section-muted .btn-outline {
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.section-tight.section-muted .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section-head.centered { margin-inline: auto; text-align: center; }

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

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Checkmark-bullet list items ("<check> Some benefit text"). Not just
   `.cluster` + a raw text node: a flex container's un-wrapped trailing
   text becomes an anonymous flex item with a max-content hypothetical
   size, so `flex-wrap` moves the *whole* run of text to its own new line
   below the icon the moment it's too long to fit the remainder of the
   icon's line, rather than flowing right after the icon and wrapping
   under itself like a normal paragraph. Fixed by wrapping the text in its
   own <span> (see templates) sized with flex:1 so it can shrink to fit
   next to the icon and wrap internally instead of as one unbreakable
   unit. */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.check-item > .text-accent {
  flex-shrink: 0;
  line-height: 1.6; /* match the text span's line-height so the glyph sits on the first line, not vertically re-centered against the whole wrapped block */
}
.check-item > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); }

.btn-outline {
  background: transparent;
  color: var(--btn-outline-text);
  border-color: var(--btn-outline-border);
}
.btn-outline:hover { background: var(--color-primary); color: var(--white); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ===========================================================================
   HEADER / NAV
   =========================================================================== */
.site-header {
  /* `fixed`, not `sticky`: the off-canvas mobile drawer below is a fixed
     descendant positioned beyond the viewport edge while closed, which
     otherwise enlarges the page's scrollable width. Clipping that via
     `overflow-x: hidden` on <html> (see reset, above) only works cleanly
     if nothing between the header and the viewport relies on `sticky`,
     since sticky's containing-block rules break under an overflow-clipped
     ancestor. `.hero` / `.page-header` add top padding to compensate for
     the header no longer reserving its own space in normal flow. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--header-border);
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 84px; width: auto; } /* was 40px */

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--white); border-color: var(--color-accent); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--white);
  padding: var(--space-2);
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .header-nav {
    position: fixed;
    inset: var(--header-height) 0 0 auto;
    /* A fixed-position flex container with height:auto doesn't reliably
       stretch to fill top/bottom insets in Chromium -- it sizes to
       content instead, leaving the panel a thin strip with the page
       showing through beneath it. Set height explicitly so it always
       covers the full viewport below the header. */
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    width: min(320px, 84vw);
    background: var(--navy-900);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-5);
    transform: translateX(100%);
    transition: transform 220ms var(--ease);
    border-left: 1px solid var(--header-border);
    z-index: 2; /* above .nav-backdrop, which is an unordered sibling */
  }
  .header-nav.is-open { transform: translateX(0); }
  .nav-links { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .nav-cta { width: 100%; }
  .nav-cta .btn { width: 100%; }

  .nav-backdrop {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    /* Same stretch issue as .header-nav above: an empty fixed div with
       height:auto doesn't reliably fill to `bottom: 0` here, so it's
       set explicitly instead of relying on the top+bottom shorthand. */
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background: rgba(10, 27, 37, 0.55);
    z-index: 1; /* below .header-nav, above the page content behind it */
  }
}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero {
  position: relative;
  /* Photo (Brooklyn Bridge at dusk) as the base layer, with the brand's
     navy gradient washed over it as a translucent tint so the image reads
     as "on brand" rather than a random stock photo, and white/gold text
     keeps enough contrast. Swapped for a smaller crop on narrow viewports
     below -- keep the position/size/repeat layer order in sync with that
     rule if you add/reorder layers here. */
  background-image:
    radial-gradient(1100px 480px at 82% -10%, rgba(197, 167, 105, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(10, 27, 37, 0.72) 0%, rgba(16, 42, 57, 0.58) 45%, rgba(22, 58, 77, 0.74) 100%),
    url("../images/hero-bridge.jpg");
  background-position: center, center, 60% 38%;
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: var(--color-text-inverse);
  overflow: hidden;
  /* Top padding absorbs the fixed header's height so this section's own
     dark background extends up behind the translucent header, instead of
     leaving a blank gap now that the header no longer reserves space in
     normal flow (it's `position: fixed`, not `sticky`). */
  padding-top: calc(var(--header-height) + var(--space-9));
  padding-bottom: var(--space-9);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% auto;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(197, 167, 105, 0.14), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}
.hero h1 { color: var(--white); margin-block: var(--space-4); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

.hero-stats {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-7);
}
.hero-stat .stat-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--gold-500);
  display: block;
}
.hero-stat .stat-label {
  font-size: 0.82rem;
  color: var(--color-text-inverse-muted);
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

@media (max-width: 700px) {
  /* Smaller, pre-cropped photo on narrow viewports: same gradient layers
     (position/size/repeat inherited from .hero), just a lighter file. */
  .hero {
    background-image:
      radial-gradient(1100px 480px at 82% -10%, rgba(197, 167, 105, 0.22), transparent 60%),
      linear-gradient(180deg, rgba(10, 27, 37, 0.72) 0%, rgba(16, 42, 57, 0.58) 45%, rgba(22, 58, 77, 0.74) 100%),
      url("../images/hero-bridge-mobile.jpg");
  }
}

/* ===========================================================================
   LOGO STRIP / TRUST BAR
   =========================================================================== */
.trust-bar {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.trust-bar .eyebrow { color: var(--color-text-subtle); }
.trust-bar .eyebrow::before { background: var(--color-border-strong); }
.trust-list {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--slate-500);
}

/* ===========================================================================
   CARDS
   =========================================================================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
  border-color: var(--slate-300);
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-5);
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-muted); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary-strong);
}
.card-link svg { width: 16px; height: 16px; transition: transform 160ms ease; }
.card:hover .card-link svg { transform: translateX(3px); }

.card-flush { padding: 0; overflow: hidden; }
.card-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* ===========================================================================
   PROCESS / TIMELINE
   =========================================================================== */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
}
.timeline-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
}
.timeline-marker {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.timeline-step:not(:last-child) .timeline-marker::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--space-6) + 100%);
  background: var(--color-border-strong);
}
.timeline-body { padding-top: var(--space-2); }
.timeline-body h3 { margin-bottom: var(--space-2); }
.timeline-body p { color: var(--color-text-muted); }

@media (max-width: 640px) {
  .timeline-step { grid-template-columns: 48px 1fr; }
  .timeline-marker { width: 48px; height: 48px; font-size: 1.05rem; }
}

/* ===========================================================================
   STATS / CTA BAND
   =========================================================================== */
.stat-band {
  background: var(--color-bg-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.stat-grid .stat-value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-primary-strong);
  display: block;
}
.stat-grid .stat-label { color: var(--color-text-muted); font-size: 0.92rem; margin-top: var(--space-1); }

.cta-band {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(197, 167, 105, 0.22), transparent 65%);
}
.cta-band h2 { color: var(--white); max-width: 520px; position: relative; }
.cta-band-actions { position: relative; display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ===========================================================================
   TESTIMONIALS
   =========================================================================== */
.testimonial-grid { gap: var(--space-5); }
.testimonial-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.testimonial-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.testimonial-card .card-badge { margin-bottom: var(--space-5); }
.testimonial-text {
  flex: 1; /* pushes .quote-attr to the same bottom edge across a row even when quote length varies */
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}
.quote-attr { display: flex; align-items: center; gap: var(--space-3); }
.quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
}
.quote-name { font-weight: 600; }
.quote-role { color: var(--color-text-subtle); font-size: 0.88rem; }

/* ===========================================================================
   PAGE HEADER (interior pages)
   =========================================================================== */
.page-header {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color: var(--white);
  /* See .hero: absorbs the fixed header's height so this section's own
     background extends up behind it instead of leaving a blank gap. */
  padding-top: calc(var(--header-height) + var(--space-8));
  padding-bottom: var(--space-7);
}
.page-header h1 { color: var(--white); margin-top: var(--space-3); }
.page-header .lede { color: var(--color-text-inverse-muted); max-width: 640px; margin-top: var(--space-4); }
.breadcrumb {
  display: flex;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-inverse-muted);
}
.breadcrumb a:hover { color: var(--white); }

/* ===========================================================================
   FORMS
   =========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.field .hint { font-size: 0.8rem; color: var(--color-text-subtle); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: 0.8rem 1rem;
  font-size: 0.98rem;
  width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(16, 42, 57, 0.12);
}
.field-error {
  font-size: 0.82rem;
  color: var(--color-danger);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-danger);
}

.alert {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 0.94rem;
  margin-bottom: var(--space-6);
  border: 1px solid transparent;
}
.alert-success { background: var(--success-50); color: var(--success-600); border-color: rgba(31, 122, 76, 0.25); }
.alert-error { background: var(--danger-50); color: var(--danger-600); border-color: rgba(179, 67, 47, 0.25); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: start;
}
.contact-info-card {
  background: var(--color-bg-inverse);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
}
.contact-info-card h3 { color: var(--white); }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-inverse);
}
.contact-info-row:first-of-type { border-top: none; }
.contact-info-row .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(197, 167, 105, 0.16);
  color: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-row .icon svg { width: 18px; height: 18px; }
.contact-info-row a:hover { color: var(--gold-500); }

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

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer {
  background: var(--navy-950);
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
}
.footer-brand-logo { height: 72px; margin-bottom: var(--space-4); } /* was 34px */
.footer-desc { max-width: 320px; font-size: 0.92rem; line-height: 1.6; }
.footer-heading {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-size: 0.92rem; transition: color 160ms ease; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.84rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   SCROLL REVEAL
   =========================================================================== */
/* Content is visible by default (no-JS, crawlers, JS errors elsewhere on
   the page all still see everything). The fade-in only engages once the
   tiny inline script in <head> confirms JS is running and stamps `.js`
   on <html> -- see base.html. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   UTILITIES
   =========================================================================== */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   ADMIN -- internal domain-listing management, not part of the public
   marketing site. Deliberately plainer than the rest of the design system:
   this is a tool for one operator, not a page meant to sell anything.
   =========================================================================== */
.admin-header {
  background: var(--navy-800);
  border-bottom: 1px solid var(--header-border);
}
.admin-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}
.admin-header .brand-logo { height: 44px; }
.admin-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
}

.admin-login-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
}
.admin-login-card { width: 100%; max-width: 380px; }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-danger {
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: var(--white); }

.admin-add-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.admin-add-form .field { margin-bottom: 0; flex: 1; min-width: 220px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.94rem;
  white-space: nowrap;
}
.admin-table th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.admin-row-actions form { margin: 0; }