/* ============================================================
   InterLinc Creative — Landing page styles
   Faithful split of the single-file prototype.
   - Gotham registered with the real font files in Gotham-Font/
   - InterLinc palette + tonal scales preserved
   - Background videos are Vimeo iframes (see script.js)
   ============================================================ */

/* ============================================
   FONT FACE — Gotham (real files, no woff2/woff available)
   Both .otf and .ttf are listed where both exist.
   ============================================ */
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-ThinItalic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-XLight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-XLightItalic.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-Light.otf') format('opentype'),
       url('Gotham-Font/GothamLight.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/GothamLightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/GothamBook.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-BookItalic.otf') format('opentype'),
       url('Gotham-Font/GothamBookItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/GothamMedium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/GothamMediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-Bold.otf') format('opentype'),
       url('Gotham-Font/GothamBold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/GothamBoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  /* Ultra — heaviest italic available */
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-UltraItalic.otf') format('opentype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('Gotham-Font/Gotham-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ============================================
   DESIGN TOKENS — InterLinc brand
   ============================================ */
:root {
  --color-navy: #133042;
  --color-coral: #f15b4f;
  --color-sage: #7e9898;
  --color-light-gray: #d6d6d6;
  --color-charcoal: #3c4044;
  --color-white: #ffffff;

  --primary-50:  #eef2f5;
  --primary-100: #d4dde3;
  --primary-200: #a8bac7;
  --primary-300: #7c97aa;
  --primary-400: #50748e;
  --primary-500: #133042;
  --primary-600: #102a3a;
  --primary-700: #0d2330;
  --primary-800: #091a24;
  --primary-900: #061218;

  --accent-50:  #fef0ee;
  --accent-100: #fcd9d4;
  --accent-200: #f9b3a9;
  --accent-300: #f68d7f;
  --accent-400: #f37467;
  --accent-500: #f15b4f;
  --accent-600: #d94e44;
  --accent-700: #b8413a;
  --accent-800: #97342f;
  --accent-900: #6e2622;

  --secondary-50:  #f1f5f5;
  --secondary-100: #dfe7e7;
  --secondary-200: #bfcfcf;
  --secondary-300: #9fb7b7;
  --secondary-400: #8ea7a7;
  --secondary-500: #7e9898;
  --secondary-600: #6b8282;
  --secondary-700: #586c6c;
  --secondary-800: #455656;
  --secondary-900: #2f3c3c;

  --neutral-50:  #fafafa;
  --neutral-100: #f4f4f4;
  --neutral-200: #ebebeb;
  --neutral-300: #d6d6d6;
  --neutral-400: #b0b0b0;
  --neutral-500: #888888;
  --neutral-600: #5e5e5e;
  --neutral-700: #3c4044;
  --neutral-800: #2a2d30;
  --neutral-900: #18191b;

  --bg-base: var(--color-white);
  --bg-tint: #f7f8f9;
  --bg-dark: var(--color-navy);
  --text-heading: var(--color-navy);
  --text-body: var(--color-charcoal);
  --text-muted: var(--secondary-700);
  --text-inverse: var(--color-white);
  --border-subtle: var(--neutral-200);
  --cta-bg: var(--color-coral);
  --cta-bg-hover: var(--accent-700);
  --accent: var(--color-coral);

  --font-display: 'futura-pt', 'Gotham', 'Helvetica Neue', sans-serif;
  --font-body: 'Gotham', 'futura-pt', 'Helvetica Neue', sans-serif;

  --fs-hero: clamp(3rem, 8vw, 6.5rem);
  --fs-sub:  clamp(1.125rem, 2vw, 1.5rem);
  --fs-h2:   clamp(2rem, 4vw, 3.25rem);
  --fs-h3:   clamp(1.5rem, 2.5vw, 2rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 9rem;

  --max-width: 1280px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-med: 600ms;
  --dur-slow: 1100ms;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Accessible focus ring for keyboard users */
:focus-visible {
  outline: 3px solid var(--accent-300);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   Shared: Vimeo background cover
   The iframe is sized to a 16:9 box scaled by viewport height so it
   covers the container (cropping edges) instead of letterboxing.
   ============================================ */
.video-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* True cover for a 16:9 video at any viewport aspect: the larger of the
     two scales wins, so the video always fills and crops — never letterboxes. */
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  max-width: none;   /* override the global iframe { max-width:100% } */
  border: 0;
}
/* Native <video> backgrounds (hero) — object-fit handles cover natively. */
.video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* In-house video: shift down so less of the top is cropped (still covers) */
.intro .video-bg iframe {
  transform: translate(-50%, -40%);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  isolation: isolate;
}
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    url('https://vumbnail.com/1194785277.jpg') center / cover no-repeat,
    radial-gradient(circle at 30% 30%, var(--primary-400) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, var(--secondary-700) 0%, transparent 50%),
    linear-gradient(135deg, var(--primary-700), var(--primary-900));
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 48, 66, 0.55);
  z-index: -1;
}
.hero__logo {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  height: clamp(36px, 5vw, 56px);
  width: auto;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) 0.2s forwards;
}
.hero__logo-text {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) 0.2s forwards;
}
.hero__content {
  text-align: center;
  padding: 0 var(--gutter);
  max-width: 1100px;
}
.hero__title {
  font-size: var(--fs-hero);
  color: var(--text-inverse);
  font-weight: 700;
  letter-spacing: -0.035em;
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1.1s var(--ease-out) 0.4s forwards;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-300);
}
.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.4;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1.1s var(--ease-out) 0.7s forwards;
}
a.hero__contact {
  margin-top: 2rem;
  padding: 0.85rem 1.6rem;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1.1s var(--ease-out) 0.95s forwards;
}
a.hero__contact:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
  box-shadow: none;
}
/* Top-right "Talk to William" — ghost button to read as nav */
.hero__nav-cta {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) 0.4s forwards;
}
.hero__nav-cta:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}
@media (max-width: 480px) {
  .hero__nav-cta {
    top: 1.25rem;
    right: 1.25rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 1.4s forwards;
}
.hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  margin: 0.75rem auto 0;
  background: rgba(255, 255, 255, 0.5);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ============================================
   LOAN OFFICER — Get to know William
   ============================================ */
.lo {
  background: var(--bg-base);
  padding: 0;
}
.lo__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: end;
}
.lo__copy {
  align-self: center;
  padding-block: var(--space-lg);
}
@media (min-width: 1024px) {
  .lo__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
.lo__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.lo__title {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.lo__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--secondary-600);
}
.lo__body {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.7;
  max-width: 520px;
}
.lo__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 560px;
  margin-inline: auto;
  background: var(--bg-base);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* InterLinc "M" mark, recolored via mask — two layers for depth.
   Sized to fit the frame width so the full mark shows (never clipped),
   anchored near the top so the peaks read above William. */
.lo__photo::before,
.lo__photo::after {
  content: '';
  position: absolute;
  top: 2%;
  left: 50%;
  width: 100%;
  aspect-ratio: 2275 / 1701;
  -webkit-mask: url('InterLinc-Symbol-B.png') center / contain no-repeat;
          mask: url('InterLinc-Symbol-B.png') center / contain no-repeat;
}
.lo__photo::before {
  /* back layer — light coral, small offset for depth */
  transform: translate(-54%, -3%);
  background-color: var(--accent-100);
}
.lo__photo::after {
  /* front layer — coral */
  transform: translate(-50%, 0);
  background-color: var(--accent-500);
}
.lo__photo img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: 98%;
  object-fit: contain;
  object-position: bottom center;
}

/* ============================================
   INTRO — with video background
   ============================================ */
.intro {
  position: relative;
  padding: var(--space-2xl) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--text-inverse);
}
.intro__fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, var(--primary-700) 0%, var(--secondary-800) 100%);
}
.intro__overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 48, 66, 0.78);
  z-index: -1;
}
.intro__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-300);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.intro__text {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.5;
  color: var(--color-white);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.intro__text strong {
  font-weight: 500;
  color: var(--color-white);
}
.intro__divider {
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin: 2.5rem auto 0;
}

/* ============================================
   SHOWCASE
   ============================================ */
.showcase {
  background: var(--bg-base);
  padding: var(--space-2xl) 0;
}
.showcase__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.showcase__row + .showcase__row {
  margin-top: var(--space-2xl);
}
@media (min-width: 1024px) {
  .showcase__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .showcase__row--reverse .showcase__visual { order: 2; }
  .showcase__row--reverse .showcase__copy { order: 1; }
}

.showcase__visual {
  position: relative;
}

/* Video frame (Row 1 — left side) — vertical format */
.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 420px;
  margin-inline: auto;
  background: var(--primary-900);
  overflow: hidden;
}
/* Wide variant — 16:9 (used by the "Our reel" row) */
.video-frame.video-frame--wide {
  aspect-ratio: 16 / 9;
  max-width: 560px;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-900));
  color: var(--color-white);
  transition: opacity var(--dur-med) var(--ease-out);
}
.video-frame.is-playing .video-frame__placeholder {
  opacity: 0;
  pointer-events: none;
}
.play-icon {
  width: 64px;
  height: 64px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.play-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 14px solid var(--color-white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.video-frame:hover .play-icon { transform: scale(1.1); }

/* Design collage (Row 2 — right side) */
.design-collage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  aspect-ratio: 4 / 5;
}
.design-collage__item {
  background: var(--neutral-200);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.design-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
}
.design-collage__item:nth-child(1) {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
}
.design-collage__item:nth-child(2) {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
}
.design-collage__item:nth-child(3) {
  background: linear-gradient(135deg, var(--secondary-500), var(--secondary-700));
}

.showcase__copy {
  padding: 0;
}
.showcase__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.showcase__title {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.showcase__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--secondary-600);
}
.showcase__body {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: 1.7;
  max-width: 520px;
}
.showcase__body + .showcase__body { margin-top: 1rem; }

/* ============================================
   SERVICES — minimalist 5-column grid
   ============================================ */
.services {
  background: var(--bg-tint);
  padding: var(--space-2xl) 0;
}
.services__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
}
.services__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.services__title {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
}
.services__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--secondary-600);
}
.services__sub {
  font-size: var(--fs-sub);
  color: var(--text-body);
  font-weight: 300;
  max-width: 580px;
  margin: 0 auto;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(5, 1fr); }
}

.service {
  background: var(--bg-base);
  padding: 2.5rem 2rem;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
}
.service:hover {
  background: var(--primary-50);
}
.service__number {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: block;
}
.service__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.service__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service__list li {
  font-size: 0.875rem;
  color: var(--text-body);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.4;
}
.service__list li:last-child { border-bottom: none; }

/* ============================================
   CTA
   ============================================ */
.cta {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: var(--space-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, var(--primary-400) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, var(--secondary-700) 0%, transparent 40%);
  opacity: 0.3;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta__logo {
  height: 48px;
  width: auto;
  margin: 0 auto 2rem;
  opacity: 0.95;
}
.cta__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  margin-bottom: 2.5rem;
}
.cta__title {
  font-size: var(--fs-h2);
  color: var(--text-inverse);
  margin-bottom: 1.25rem;
  font-weight: 700;
}
.cta__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-300);
}
.cta__sub {
  font-size: var(--fs-sub);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  max-width: 540px;
  margin: 0 auto 2.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 2.25rem;
  background: var(--cta-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}
.btn::after {
  content: '\2192';
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover {
  background: var(--cta-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(241, 91, 79, 0.5);
}
.btn:hover::after { transform: translateX(4px); }

/* ============================================
   CTA — contact + reviews (inside the navy section)
   ============================================ */
.cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 920px;
  margin: var(--space-xl) auto 0;
  text-align: left;
}
@media (min-width: 800px) {
  .cta__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-xl);
    align-items: start;
  }
}
.cta__contact-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}
.cta__contact-role {
  margin: 0 0 1.25rem;
  color: var(--accent-300);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cta__contact-address {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.75);
}
.cta__contact-detail {
  margin: 0 0 0.4rem;
  color: rgba(255, 255, 255, 0.75);
}
.cta__contact-cta { margin-top: 1.5rem; }
.link {
  color: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--accent-300); border-bottom-color: var(--accent-300); }
/* Reviews slider */
.reviews {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.75rem;
}
.reviews__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.reviews__score {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}
.reviews__starline { color: var(--accent-500); letter-spacing: 0.05em; }
.reviews__count { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-small); }
.reviews__viewport { display: grid; }
.review {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out);
}
.review.is-active { opacity: 1; visibility: visible; }
.review__stars { color: var(--accent-500); letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.review__text {
  margin: 0 0 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-style: italic;
}
.review__by {
  font-style: normal;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
}
.reviews__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.reviews__arrow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.reviews__arrow:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.reviews__dots { display: flex; gap: 0.4rem; flex: 1; }
.reviews__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background var(--dur-fast) var(--ease-out);
}
.reviews__dot.is-active { background: var(--accent-500); }
.reviews__all { display: inline-block; margin-top: 1.25rem; font-size: var(--fs-small); }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--primary-900);
  color: rgba(255, 255, 255, 0.5);
  padding: 1.75rem var(--gutter);
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(1.5); opacity: 1; }
}

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

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