/* ==========================================================================
   RARE VIEW CLEANING
   Design system and stylesheet
   Built by Baha Connect. Generated source: edit here, not in dist/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Type families: two families total */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

  --leading-none: 1.05;
  --leading-tight: 1.14;
  --leading-snug: 1.32;
  --leading-normal: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.14em;

  /* Navy */
  --navy-900: hsl(214, 62%, 10%);
  --navy-800: hsl(214, 56%, 14%);
  --navy-700: hsl(213, 51%, 19%);
  --navy-600: hsl(213, 47%, 25%);
  --navy-500: hsl(213, 44%, 33%);
  --navy-400: hsl(212, 38%, 47%);
  --navy-300: hsl(211, 40%, 66%);
  --navy-200: hsl(210, 46%, 85%);
  --navy-100: hsl(208, 56%, 94%);

  /* Gold */
  --gold-800: hsl(34, 74%, 26%);
  --gold-700: hsl(36, 76%, 35%);
  --gold-600: hsl(38, 80%, 44%);
  --gold-500: hsl(41, 88%, 53%);
  --gold-400: hsl(43, 93%, 63%);
  --gold-300: hsl(45, 96%, 76%);
  --gold-100: hsl(45, 90%, 94%);

  /* Cool greys, slightly saturated */
  --gray-50: hsl(214, 32%, 98%);
  --gray-100: hsl(214, 28%, 95%);
  --gray-200: hsl(214, 24%, 90%);
  --gray-300: hsl(214, 19%, 81%);
  --gray-400: hsl(214, 15%, 65%);
  --gray-500: hsl(214, 13%, 49%);
  --gray-600: hsl(214, 16%, 39%);
  --gray-700: hsl(214, 21%, 29%);
  --gray-800: hsl(214, 27%, 19%);
  --gray-900: hsl(214, 33%, 12%);

  /* Roles */
  --bg: hsl(0, 0%, 100%);
  --bg-alt: var(--gray-50);
  --bg-dark: var(--navy-900);
  --surface: hsl(0, 0%, 100%);
  --surface-dark: var(--navy-800);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --text-1: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --text-on-dark-1: hsl(208, 45%, 97%);
  --text-on-dark-2: hsl(211, 32%, 78%);
  --text-on-dark-3: hsl(212, 24%, 64%);

  /* Spacing, 4pt grid */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Radius: small, professional, never mixed */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  /* Shadows, 5 levels, navy tinted */
  --shadow-xs: 0 1px 2px hsl(214 40% 12% / 0.06);
  --shadow-sm: 0 2px 6px hsl(214 40% 12% / 0.07);
  --shadow-md: 0 8px 20px -6px hsl(214 40% 12% / 0.13);
  --shadow-lg: 0 18px 40px -12px hsl(214 40% 12% / 0.20);
  --shadow-xl: 0 32px 70px -20px hsl(214 45% 10% / 0.32);

  --container: 1180px;
  --container-narrow: 780px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-slow: 0.6s;

  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--gold-300); color: var(--navy-900); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  background: var(--navy-900);
  color: var(--text-on-dark-1);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.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;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY ROLES
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-700);
}
.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--gold-500);
  flex: none;
}
.kicker.on-dark { color: var(--gold-400); }

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-2);
  max-width: 62ch;
}

p { max-width: 68ch; }
.prose p + p { margin-top: var(--sp-4); }
.prose p { color: var(--text-2); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); }
.section-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark-1);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-on-dark-1); }
.section-dark p { color: var(--text-on-dark-2); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker::before { display: none; }
.section-head h2 { margin-top: var(--sp-4); }
.section-head p { margin-top: var(--sp-4); color: var(--text-2); }
.section-dark .section-head p { color: var(--text-on-dark-2); }

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

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

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   5. BUTTONS  (4 states each)
   -------------------------------------------------------------------------- */

.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--btn-h);
  /* horizontal padding = 2x button height rule, scaled for sanity */
  padding-inline: var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--gold-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-xs); }
.btn-primary:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-navy {
  background: var(--navy-800);
  color: var(--text-on-dark-1);
  box-shadow: var(--shadow-sm);
}
.btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-navy:active { transform: translateY(1px); box-shadow: var(--shadow-xs); }
.btn-navy:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--navy-700); background: var(--navy-100); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(1px); background: var(--navy-200); }
.btn-outline:disabled { color: var(--gray-400); border-color: var(--border); cursor: not-allowed; }

.btn-ghost-light {
  background: hsl(208 40% 96% / 0.09);
  color: var(--text-on-dark-1);
  border-color: hsl(210 40% 80% / 0.30);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: hsl(208 40% 96% / 0.17); border-color: hsl(210 45% 85% / 0.5); transform: translateY(-2px); }
.btn-ghost-light:active { transform: translateY(1px); }

.btn-sm { --btn-h: 42px; padding-inline: var(--sp-5); font-size: var(--text-xs); }
.btn-lg { --btn-h: 58px; padding-inline: var(--sp-10); font-size: var(--text-base); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row.center { justify-content: center; }

/* Text link with growing underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--navy-700);
  position: relative;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 2px;
  background: var(--gold-500);
  transition: width var(--dur) var(--ease);
}
.link-arrow:hover::after { width: 100%; }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow.on-dark { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: hsl(214 62% 10% / 0.0);
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: hsl(0 0% 100% / 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.page-light .site-header { background: hsl(0 0% 100% / 0.92); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--border); }

.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
}
.brand-sub {
  font-size: 0.6rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-700);
  margin-top: 3px;
}
.site-header:not(.solid) .brand-name { color: var(--text-on-dark-1); }
.site-header:not(.solid) .brand-sub { color: var(--gold-400); }
body.page-light .site-header .brand-name { color: var(--navy-900); }
body.page-light .site-header .brand-sub { color: var(--gold-700); }

.nav-links { display: flex; align-items: center; gap: var(--sp-6); }
.nav-link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--gray-700);
  padding-block: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-500);
  transition: width var(--dur) var(--ease);
}
.nav-link:hover { color: var(--navy-900); }
.nav-link:hover::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--navy-900); font-weight: var(--weight-semibold); }
.nav-link[aria-current="page"]::after { width: 100%; }
.site-header:not(.solid) .nav-link { color: var(--text-on-dark-2); }
.site-header:not(.solid) .nav-link:hover,
.site-header:not(.solid) .nav-link[aria-current="page"] { color: var(--text-on-dark-1); }
body.page-light .site-header .nav-link { color: var(--gray-700); }
body.page-light .site-header .nav-link:hover,
body.page-light .site-header .nav-link[aria-current="page"] { color: var(--navy-900); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-3); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover { background: var(--gray-100); }
.nav-toggle:active { background: var(--gray-200); }
.site-header:not(.solid) .nav-toggle { border-color: hsl(210 40% 80% / 0.35); }
body.page-light .site-header .nav-toggle { border-color: var(--border-strong); }
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  background: var(--navy-900);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  background: inherit;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.site-header:not(.solid) .nav-toggle span { background: var(--text-on-dark-1); }
body.page-light .site-header .nav-toggle span { background: var(--navy-900); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--navy-900); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--navy-900); }

/* Mobile drawer: slides from top, uses visibility rather than off-canvas
   transform, so it can never create horizontal overflow. */
.mobile-nav {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 99;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.mobile-nav.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s;
}
.mobile-nav a.m-link {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--navy-900);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mobile-nav a.m-link:hover { color: var(--gold-700); padding-left: var(--sp-2); }
.mobile-nav a.m-link[aria-current="page"] { color: var(--gold-700); font-weight: var(--weight-semibold); }
.mobile-nav .btn { margin-top: var(--sp-6); }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   7. HERO  (glass facade + gold squeegee sweep: the signature detail)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--navy-900);
  color: var(--text-on-dark-1);
}

/* Layer 1: deep navy atmosphere */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  z-index: -3;
  background:
    radial-gradient(70% 55% at 78% 12%, hsl(213 55% 30% / 0.85), transparent 62%),
    radial-gradient(60% 60% at 8% 92%, hsl(38 70% 40% / 0.22), transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--navy-900) 100%);
}

/* Layer 2: glass pane grid, parallax driven */
.hero-panes {
  position: absolute;
  inset: -14% -8% -8% -8%;
  z-index: -2;
  background-image:
    linear-gradient(to right, hsl(208 45% 92% / 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(208 45% 92% / 0.075) 1px, transparent 1px);
  background-size: 118px 158px;
  transform: skewY(-7deg) translateY(0);
  transform-origin: top left;
  will-change: transform;
  mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 0.9), transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 0.9), transparent 88%);
}

/* Layer 3: the gold squeegee sweep */
.hero-sweep {
  position: absolute;
  top: -40%;
  left: -60%;
  width: 55%;
  height: 190%;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 0%,
    hsl(45 92% 72% / 0.05) 26%,
    hsl(45 96% 78% / 0.22) 47%,
    hsl(45 92% 72% / 0.05) 68%,
    transparent 100%
  );
  transform: rotate(11deg);
  filter: blur(3px);
  pointer-events: none;
  animation: squeegee 9s var(--ease) 1.1s infinite;
}
@keyframes squeegee {
  0%   { left: -60%; opacity: 0; }
  8%   { opacity: 1; }
  46%  { opacity: 1; }
  62%  { left: 125%; opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; max-width: 830px; }
.hero h1 { margin-top: var(--sp-5); }
.hero h1 .line { display: block; }
.hero h1 .line-accent {
  color: var(--gold-400);
  font-style: italic;
}
.hero .lede { color: var(--text-on-dark-2); margin-top: var(--sp-6); max-width: 58ch; }
.hero .btn-row { margin-top: var(--sp-8); }

.hero-quote {
  margin-top: var(--sp-10);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--gold-500);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--gold-300);
  max-width: 40ch;
}

/* Trust badge strip */
.trust-strip {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: var(--sp-8);
  border-top: 1px solid hsl(210 40% 80% / 0.18);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 860px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (max-width: 379px) { .trust-strip { grid-template-columns: minmax(0, 1fr); } }

.trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust-item svg { width: 20px; height: 20px; color: var(--gold-500); flex: none; margin-top: 3px; }
.trust-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-on-dark-1);
}
.trust-item span { display: block; font-size: var(--text-xs); color: var(--text-on-dark-3); margin-top: 2px; line-height: var(--leading-snug); }

/* Compact page hero for interior pages */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--text-on-dark-1);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -10% -5%;
  z-index: -2;
  background:
    radial-gradient(65% 60% at 82% 8%, hsl(213 52% 29% / 0.8), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--navy-900));
}
.page-hero .hero-panes { inset: -20% -8% -10% -8%; }
.page-hero h1 { margin-top: var(--sp-4); max-width: 20ch; }
.page-hero .lede { color: var(--text-on-dark-2); margin-top: var(--sp-5); }
.page-hero-inner { position: relative; z-index: 1; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--text-on-dark-3); margin-bottom: var(--sp-5); }
.crumbs a { display: inline-block; padding-block: 4px; transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-300); }

/* Signature: clean sweep sheen across cards on hover */
.card-sweep::after {
  content: '';
  position: absolute;
  top: -60%; left: -75%;
  width: 45%; height: 220%;
  background: linear-gradient(100deg, transparent, hsl(45 95% 80% / 0.30), transparent);
  transform: rotate(14deg);
  pointer-events: none;
  transition: left 0.75s var(--ease);
}
.card-sweep:hover::after { left: 130%; }

.card-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--navy-100);
  color: var(--navy-700);
  margin-bottom: var(--sp-5);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card-icon svg { width: 26px; height: 26px; }
.card:hover .card-icon { background: var(--gold-500); color: var(--navy-900); }

.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-2); font-size: var(--text-sm); }
.card .link-arrow { margin-top: var(--sp-5); }

/* Dark cards must be lighter than the dark background */
.section-dark .card {
  background: var(--surface-dark);
  border-color: hsl(211 30% 55% / 0.22);
  box-shadow: none;
}
.section-dark .card:hover { border-color: hsl(41 80% 60% / 0.45); box-shadow: var(--shadow-xl); }
.section-dark .card p { color: var(--text-on-dark-2); }
.section-dark .card-icon { background: hsl(213 45% 32% / 0.6); color: var(--gold-400); }
.section-dark .card:hover .card-icon { background: var(--gold-500); color: var(--navy-900); }

/* Numbered step cards */
.steps { counter-reset: step; display: grid; gap: var(--sp-6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--sp-8);
  border-top: 2px solid var(--border);
  transition: border-color var(--dur) var(--ease);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--sp-6));
  left: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--gold-500);
  letter-spacing: var(--tracking-tight);
  background: var(--bg);
  padding-right: var(--sp-3);
}
.step:hover { border-top-color: var(--gold-500); }
.step h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: var(--weight-semibold); margin-bottom: var(--sp-3); }
.step p { font-size: var(--text-sm); color: var(--text-2); }
.section-alt .step::before { background: var(--bg-alt); }
.section-dark .step { border-top-color: hsl(211 30% 55% / 0.25); }
.section-dark .step::before { background: var(--bg-dark); }
.section-dark .step p { color: var(--text-on-dark-2); }

/* Feature list with gold ticks */
.ticks { display: grid; gap: var(--sp-4); }
.ticks li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--text-base); color: var(--text-2); }
.ticks li svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; margin-top: 3px; }
.section-dark .ticks li { color: var(--text-on-dark-2); }
.section-dark .ticks li svg { color: var(--gold-400); }

/* Visual panel used in place of photography */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 380px;
  background:
    radial-gradient(75% 60% at 70% 18%, hsl(213 50% 32% / 0.9), transparent 62%),
    linear-gradient(155deg, var(--navy-800), var(--navy-900));
  border: 1px solid hsl(211 30% 55% / 0.2);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  padding: var(--sp-8);
}
.panel::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(to right, hsl(208 45% 92% / 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(208 45% 92% / 0.09) 1px, transparent 1px);
  background-size: 88px 118px;
  transform: skewY(-7deg);
  mask-image: linear-gradient(to bottom right, hsl(0 0% 0% / 0.95), transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom right, hsl(0 0% 0% / 0.95), transparent 82%);
  pointer-events: none;
}
.panel::after {
  content: '';
  position: absolute;
  top: -50%; left: -70%;
  width: 48%; height: 200%;
  background: linear-gradient(100deg, transparent, hsl(45 95% 78% / 0.16), transparent);
  transform: rotate(13deg);
  animation: squeegee 11s var(--ease) 2s infinite;
  pointer-events: none;
}
.panel-content { position: relative; z-index: 1; text-align: center; color: var(--text-on-dark-1); }
.panel-content svg { width: 56px; height: 56px; color: var(--gold-500); margin: 0 auto var(--sp-5); }
.panel-content strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.panel-content span { display: block; font-size: var(--text-sm); color: var(--text-on-dark-3); margin-top: var(--sp-2); }

/* Stat / counter block */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-num { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--gold-500); line-height: var(--leading-none); }
.stat-label { font-size: var(--text-sm); color: var(--text-on-dark-2); margin-top: var(--sp-2); }

/* Quote / testimonial */
.quote-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold-500); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.quote-card blockquote { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-1); }
.quote-card cite { display: block; margin-top: var(--sp-5); font-style: normal; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-3); }

/* --------------------------------------------------------------------------
   9. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--navy-900);
  transition: color var(--dur-fast) var(--ease);
}
.acc-btn:hover { color: var(--gold-700); }
.acc-icon { flex: none; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; margin-top: 2px; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.acc-icon svg { width: 14px; height: 14px; }
.acc-btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); background: var(--gold-500); color: var(--navy-900); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-panel-inner p { padding-bottom: var(--sp-6); color: var(--text-2); max-width: 74ch; }

/* --------------------------------------------------------------------------
   10. FORMS  (WhatsApp handoff, no backend)
   -------------------------------------------------------------------------- */

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }
.field { display: block; margin-bottom: var(--sp-5); }
.field label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--text-base);
  color: var(--text-1);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 18px; padding-right: var(--sp-10); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-400); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px hsl(213 44% 40% / 0.16); }
.field input:disabled, .field textarea:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field-error { display: none; font-size: var(--text-xs); color: hsl(2, 68%, 46%); margin-top: var(--sp-2); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: hsl(2, 68%, 52%); box-shadow: 0 0 0 3px hsl(2 68% 52% / 0.14); }
.field.invalid .field-error { display: block; }
.form-note { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-4); }
.form-note a { display: inline-block; padding-block: 4px; }

/* --------------------------------------------------------------------------
   11. CONTACT TILES
   -------------------------------------------------------------------------- */

.contact-tiles { display: grid; gap: var(--sp-4); }
.contact-tile {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-tile:hover { border-color: var(--gold-500); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-tile svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; margin-top: 3px; }
.contact-tile .ct-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-3); }
.contact-tile .ct-value { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--navy-900); margin-top: var(--sp-1); word-break: break-word; }
.contact-tile .ct-note { display: block; font-size: var(--text-sm); color: var(--text-2); margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   12. RESOURCES
   -------------------------------------------------------------------------- */

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-8); }
.chip {
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--navy-500); color: var(--navy-800); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--text-on-dark-1); }

.search-wrap { position: relative; flex: 1 1 240px; min-width: 0; }
.search-wrap svg { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.search-wrap input { width: 100%; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-12); border: 1px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--text-sm); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.search-wrap input:hover { border-color: var(--gray-400); }
.search-wrap input:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px hsl(213 44% 40% / 0.16); }

.article { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.article + .article { margin-top: var(--sp-6); }
.article:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.article .tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--sp-3); }
.article h2 { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.article .summary { color: var(--text-2); font-size: var(--text-base); }
.article .body { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.article .body p { color: var(--text-2); font-size: var(--text-base); }
.article .body p + p { margin-top: var(--sp-4); }
.no-results { display: none; padding: var(--sp-10); text-align: center; color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.no-results.show { display: block; }

/* --------------------------------------------------------------------------
   13. CTA BAND
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--text-on-dark-1);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute; inset: -20% -10%; z-index: -2;
  background:
    radial-gradient(60% 70% at 50% 0%, hsl(213 52% 30% / 0.9), transparent 65%),
    radial-gradient(50% 60% at 88% 100%, hsl(38 72% 42% / 0.18), transparent 62%),
    var(--navy-900);
}
.cta-band::after {
  content: '';
  position: absolute; top: -50%; left: -60%;
  width: 42%; height: 200%; z-index: -1;
  background: linear-gradient(100deg, transparent, hsl(45 95% 78% / 0.14), transparent);
  transform: rotate(12deg);
  animation: squeegee 13s var(--ease) 3s infinite;
  pointer-events: none;
}
.cta-band h2 { font-size: var(--text-3xl); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--text-on-dark-2); margin: var(--sp-5) auto 0; max-width: 58ch; }
.cta-band .btn-row { margin-top: var(--sp-8); }
.cta-band .cta-phone { display: block; margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-on-dark-3); }
.cta-band .cta-phone a { display: inline-block; padding-block: 5px; color: var(--gold-400); font-weight: var(--weight-semibold); }
.cta-band .cta-phone a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.site-footer { background: var(--navy-900); color: var(--text-on-dark-2); padding-top: var(--sp-16); border-top: 1px solid hsl(211 30% 55% / 0.15); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-10); }
@media (max-width: 940px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand .brand-name { color: var(--text-on-dark-1); }
.footer-brand .brand-sub { color: var(--gold-400); }
.footer-tag { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--gold-400); margin-top: var(--sp-5); }
.footer-blurb { font-size: var(--text-sm); color: var(--text-on-dark-3); margin-top: var(--sp-4); max-width: 42ch; }

.footer-h { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-on-dark-1); margin-bottom: var(--sp-5); }
.footer-list li + li { margin-top: var(--sp-1); }
.footer-list a, .footer-list span {
  display: inline-block;
  padding-block: 5px;
  font-size: var(--text-sm);
  color: var(--text-on-dark-3);
  transition: color var(--dur-fast) var(--ease);
}
.footer-list a:hover { color: var(--gold-400); }
.footer-list .fl-strong { color: var(--text-on-dark-1); font-weight: var(--weight-medium); }

.footer-bottom {
  margin-top: var(--sp-16);
  padding-block: var(--sp-6);
  border-top: 1px solid hsl(211 30% 55% / 0.15);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-on-dark-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-bottom a { display: inline-block; padding-block: 5px; transition: color var(--dur-fast) var(--ease); }
.footer-bottom a:hover { color: var(--gold-400); }
.footer-credit a { color: var(--text-on-dark-2); font-weight: var(--weight-medium); }
.footer-credit a:hover { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   15. FLOATING ACTIONS
   -------------------------------------------------------------------------- */

.float-stack {
  position: fixed;
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fab {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fab svg { width: 25px; height: 25px; }
.fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-xl); }
.fab:active { transform: translateY(0) scale(0.98); }
.fab-whatsapp { background: hsl(142, 70%, 41%); color: hsl(0, 0%, 100%); }
.fab-whatsapp:hover { background: hsl(142, 70%, 36%); }
.fab-call { background: var(--gold-500); color: var(--navy-900); }
.fab-call:hover { background: var(--gold-400); }
.fab-top { background: var(--navy-800); color: var(--text-on-dark-1); opacity: 0; visibility: hidden; transform: translateY(8px); }
.fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover { background: var(--navy-700); }

/* --------------------------------------------------------------------------
   16. MOTION: scroll reveals
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Below the mobile breakpoint use vertical only, never horizontal transforms,
   so a reveal can never push the page sideways. */
.reveal-left { opacity: 0; transform: translateX(-34px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-right { opacity: 0; transform: translateX(34px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
  .reveal-left.visible, .reveal-right.visible { transform: translateY(0); }
}

.reveal-group > *:nth-child(1) { transition-delay: 0s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.40s; }

/* Every section clips its own horizontal overflow so transforms can never
   create a sideways scrollbar. */
.section, .hero, .page-hero, .cta-band, .site-footer { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
  .hero-sweep, .panel::after, .cta-band::after { display: none; }
}

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.center { text-align: center; }
.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--sp-10); }
.section-dark .divider { background: hsl(211 30% 55% / 0.2); }

.legal h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); font-size: var(--text-xl); }
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--text-2); }
.legal p + p { margin-top: var(--sp-4); }
.legal ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.legal ul li { position: relative; padding-left: var(--sp-6); color: var(--text-2); }
.legal ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--gold-500); }
.legal a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-700); }

.notice { border: 1px solid var(--border); border-left: 3px solid var(--gold-500); background: var(--gold-100); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); }
.notice p { color: var(--gray-700); font-size: var(--text-sm); }
.notice strong { color: var(--navy-900); }