/* =========================================================================
   REISARCHITECT — ANIMATIONS LAYER
   Drop-in upgrade. Loaded AFTER css/style.css so selectors win on cascade.
   ========================================================================= */

:root {
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sharp:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.35s;
  --dur-base:   0.7s;
  --dur-slow:   1.1s;
  --dur-very:   1.8s;

  /* intensity multiplier — Tweaks panel writes to this */
  --motion-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
}

/* Disable the original .js-ready .fade-in rule entirely — we own reveal now */
.js-ready .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }

/* When the new system is active, hide everything that needs to reveal until JS marks it ready */
html.anim-on .reveal,
html.anim-on .reveal-up,
html.anim-on .reveal-fade,
html.anim-on .reveal-scale,
html.anim-on .reveal-words > .word,
html.anim-on .reveal-lines > .line-inner,
html.anim-on .reveal-divider,
html.anim-on .reveal-label,
html.anim-on .reveal-ring,
html.anim-on .reveal-img {
  opacity: 0;
  will-change: opacity, transform;
}

/* ============ REVEAL VARIANTS ============================================ */

html.anim-on .reveal-up {
  transform: translateY(calc(36px * var(--motion-scale)));
  transition:
    opacity calc(var(--dur-base) * (0.6 + var(--motion-scale) * 0.4)) var(--ease-cinematic),
    transform calc(var(--dur-base) * (0.6 + var(--motion-scale) * 0.4)) var(--ease-cinematic);
}
html.anim-on .reveal-up.in {
  opacity: 1;
  transform: none;
}

html.anim-on .reveal-fade {
  transition: opacity calc(var(--dur-slow) * (0.6 + var(--motion-scale) * 0.4)) var(--ease-cinematic);
}
html.anim-on .reveal-fade.in { opacity: 1; }

html.anim-on .reveal-scale {
  transform: translateY(calc(24px * var(--motion-scale))) scale(calc(1 - 0.04 * var(--motion-scale)));
  transition:
    opacity var(--dur-base) var(--ease-cinematic),
    transform var(--dur-base) var(--ease-cinematic);
}
html.anim-on .reveal-scale.in {
  opacity: 1;
  transform: none;
}

/* Label that grows from a tick — for .section-label */
html.anim-on .reveal-label {
  display: inline-block;
  position: relative;
  padding-left: calc(48px * var(--motion-scale));
  transition: opacity var(--dur-base) var(--ease-cinematic), padding-left var(--dur-base) var(--ease-cinematic);
}
html.anim-on .reveal-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--dur-slow) var(--ease-cinematic) 0.1s;
  transform: translateY(-50%);
}
html.anim-on .reveal-label.in { opacity: 1; padding-left: 48px; }
html.anim-on .reveal-label.in::before { width: 36px; }

/* Divider that draws from 0 → its width */
html.anim-on .reveal-divider {
  width: 0 !important;
  transition: opacity var(--dur-fast) linear, width var(--dur-slow) var(--ease-cinematic) 0.15s;
}
html.anim-on .reveal-divider.in {
  opacity: 1;
  width: 50px !important;
}
html.anim-on .text-center .reveal-divider.in { width: 50px !important; }

/* Image / visual block — slight scale + fade for any "card image" */
html.anim-on .reveal-img {
  transform: scale(calc(1 + 0.06 * var(--motion-scale)));
  transition:
    opacity var(--dur-slow) var(--ease-cinematic),
    transform calc(var(--dur-slow) * 1.4) var(--ease-cinematic);
}
html.anim-on .reveal-img.in { opacity: 1; transform: none; }

/* Lines for split headings — each .line is a clip mask, .line-inner shifts up */
.reveal-lines {
  display: block;
}
.reveal-lines .line {
  display: block;
  overflow: hidden;
  /* Wrapper spans must inherit color so existing `h1 span { color: gold }` rules
     don't accidentally re-color the entire heading. Inner accent spans are
     real children inside .line-inner and still match the original selector. */
  color: inherit;
}
.reveal-lines .line-inner {
  color: inherit;
}
html.anim-on .reveal-lines .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform calc(var(--dur-slow) * (0.7 + 0.3 * var(--motion-scale))) var(--ease-cinematic);
}
html.anim-on .reveal-lines.in .line-inner {
  opacity: 1;
  transform: translateY(0);
}
html.anim-on .reveal-lines .line:nth-child(2) .line-inner { transition-delay: 0.12s; }
html.anim-on .reveal-lines .line:nth-child(3) .line-inner { transition-delay: 0.24s; }
html.anim-on .reveal-lines .line:nth-child(4) .line-inner { transition-delay: 0.36s; }

/* Word-by-word reveal — used on shorter accent headings if desired */
.reveal-words .word {
  display: inline-block;
  white-space: pre;
}
html.anim-on .reveal-words .word {
  transform: translateY(0.6em);
  transition:
    opacity var(--dur-base) var(--ease-cinematic),
    transform var(--dur-base) var(--ease-cinematic);
}
html.anim-on .reveal-words.in .word { opacity: 1; transform: none; }

/* Process step number — ring draws + number pops */
html.anim-on .reveal-ring {
  transform: scale(0.7);
  transition:
    opacity var(--dur-base) var(--ease-cinematic),
    transform var(--dur-base) var(--ease-cinematic);
  position: relative;
}
html.anim-on .reveal-ring.in {
  opacity: 1;
  transform: none;
}
html.anim-on .reveal-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 50%);
  transition: clip-path var(--dur-slow) var(--ease-cinematic) 0.2s;
  pointer-events: none;
}
html.anim-on .reveal-ring.in::after {
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0 100%, 0 0, 50% 0%, 50% 50%);
}

/* Process connector — line draws on scroll */
html.anim-on .process-steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-very) var(--ease-cinematic) 0.3s;
}
html.anim-on .process-steps.in::before { transform: scaleX(1); }

/* Stagger: child reveals follow the parent's intersection. JS sets style="--i:n" */
html.anim-on .reveal-up,
html.anim-on .reveal-fade,
html.anim-on .reveal-scale,
html.anim-on .reveal-img {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ============ TEXT LEGIBILITY OVER HERO PHOTOS ========================== */
/* Multi-layer text-shadow: a soft dark halo + a sharper near shadow.
   Applied to all hero text so it stays crisp against ANY background — bright
   sky, dark cabin, gold sunset. Works alongside whatever data-hero treatment
   is active without changing the photo itself. */
html.anim-on .hero h1,
html.anim-on .hero h1 em,
html.anim-on .hero .hero-tagline,
html.anim-on .hero p,
html.anim-on .hero .hero-badge,
html.anim-on .page-hero h1,
html.anim-on .page-hero h1 span,
html.anim-on .page-hero p,
html.anim-on .page-hero .breadcrumb,
html.anim-on .page-hero .breadcrumb a,
html.anim-on .over-hero h1,
html.anim-on .over-hero h1 span,
html.anim-on .over-hero p,
html.anim-on .over-hero .breadcrumb,
html.anim-on .over-hero .breadcrumb a {
  text-shadow:
    0 0 36px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Nav logo gets a shadow too when we're sitting on the photo (nav not yet scrolled) */
html.anim-on .nav:not(.scrolled) .nav-logo,
html.anim-on .nav:not(.scrolled) .nav-links a {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45);
}

.hero {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  isolation: isolate;
}

/* Real photo background replaces the flat blue gradient.
   The actual image URL is set per-page via the --hero-photo CSS custom property
   (declared inline in each page's <head>). Default falls back to an Unsplash photo.
   The hero TREATMENT (overlay strength) is set via data-hero attribute on <html>,
   driven by the Tweaks panel. Default treatment = "bright". */
html.anim-on .hero .hero-bg {
  background-image:
    /* Default = bright */
    linear-gradient(180deg,
      rgba(17, 29, 53, 0.32) 0%,
      rgba(17, 29, 53, 0.16) 35%,
      rgba(17, 29, 53, 0.55) 100%),
    var(--hero-photo, url('/img/hero-home.webp'));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: filter 1.4s var(--ease-cinematic);
  filter: saturate(1.1) contrast(1.05);
}

/* Treatment: BRIGHT — photo dominates */
/* (Text shadow handled by general .hero h1/p rule above for all treatments) */

/* Treatment: MID — strong vignette right behind the copy, rest of photo stays clear */
html.anim-on[data-hero="mid"] .hero .hero-bg {
  background-image:
    radial-gradient(ellipse 65% 75% at 30% 50%,
      rgba(17, 29, 53, 0.78) 0%,
      rgba(17, 29, 53, 0.48) 45%,
      rgba(17, 29, 53, 0) 80%),
    linear-gradient(180deg,
      rgba(17, 29, 53, 0.22) 0%,
      rgba(17, 29, 53, 0.06) 35%,
      rgba(17, 29, 53, 0.50) 100%),
    var(--hero-photo, url('/img/hero-home.webp'));
  background-size: cover, cover, cover;
  background-position: center, center, center;
  filter: saturate(1.1) contrast(1.05);
}

/* Treatment: VIVID — kept darker for guaranteed legibility but with saturation
   and contrast cranked so the photo stays alive */
html.anim-on[data-hero="vivid"] .hero .hero-bg {
  background-image:
    linear-gradient(180deg,
      rgba(17, 29, 53, 0.62) 0%,
      rgba(17, 29, 53, 0.42) 35%,
      rgba(17, 29, 53, 0.78) 100%),
    var(--hero-photo, url('/img/hero-home.webp'));
  background-size: cover, cover;
  background-position: center, center;
  filter: saturate(1.4) contrast(1.18) brightness(1.06);
}
/* Slow Ken-Burns drift on the hero photo */
html.anim-on .hero .hero-bg::before {
  content: '';
  position: absolute;
  inset: -4%;
  background: inherit;
  background-size: cover;
  z-index: -1;
  /* hidden — the underlying .hero-bg already paints; ::before original gold-radial stays */
}
/* Restore the original ::before gold-glow but make it sit ABOVE the photo */
html.anim-on .hero .hero-bg::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 45%, rgba(201,168,76,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(201,168,76,0.08) 0%, transparent 50%);
}

/* Replace pattern fixed look with parallax-able layer */
.hero .hero-pattern {
  transform: translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) * 0.5), 0);
  transition: transform 0.3s linear;
}

/* Hide the diagonal gold-line overlay when we have a real photo behind —
   it reads as fabric/screen-texture stripes over the photo, which is busy. */
html.anim-on .hero .hero-pattern,
html.anim-on .page-hero::before,
html.anim-on .over-hero::before { display: none; }

/* Atmospheric gold blobs that drift slowly within the hero */
html.anim-on .hero::before,
html.anim-on .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  opacity: calc(0.55 * var(--motion-scale));
  mix-blend-mode: screen;
}
html.anim-on .hero::before {
  width: 60vw; height: 60vw;
  top: -10vw; right: -10vw;
  background: radial-gradient(circle, rgba(201,168,76,0.28) 0%, rgba(201,168,76,0) 60%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
html.anim-on .hero::after {
  width: 50vw; height: 50vw;
  bottom: -15vw; left: -10vw;
  background: radial-gradient(circle, rgba(36,54,96,0.6) 0%, rgba(36,54,96,0) 60%);
  animation: drift-b 28s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-8vw, 4vw, 0) scale(1.1); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, -3vw, 0) scale(1.15); }
}

/* Horizon line — thin gold line that draws across after entry */
html.anim-on .hero .hero-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 22%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.55) 20%, rgba(201,168,76,0.55) 80%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  z-index: 1;
  transition: transform 1.6s var(--ease-cinematic) 0.6s;
  pointer-events: none;
}
html.anim-on .hero.entered .hero-horizon { transform: scaleX(1); }

/* Slowly pulsing dot on the horizon */
html.anim-on .hero .hero-horizon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(201,168,76,0.6);
  animation: horizon-pulse 4s var(--ease-cinematic) infinite;
  opacity: 0;
  transition: opacity 0.8s ease 2s;
}
html.anim-on .hero.entered .hero-horizon::after { opacity: 1; }

@keyframes horizon-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.8); opacity: 0.3; }
}

/* HERO content layers — staggered entrance on body load */
html.anim-on .hero .hero-badge,
html.anim-on .hero h1 .line .line-inner,
html.anim-on .hero .hero-tagline,
html.anim-on .hero p:not(.hero-tagline),
html.anim-on .hero .hero-actions > * {
  opacity: 0;
  will-change: opacity, transform;
}

html.anim-on .hero .hero-badge {
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-cinematic), transform 0.9s var(--ease-cinematic);
}
html.anim-on .hero.entered .hero-badge { opacity: 1; transform: none; transition-delay: 0.15s; }

/* h1 gets reveal-lines treatment baked in via JS */
html.anim-on .hero.entered h1 .line .line-inner {
  opacity: 1;
  transform: translateY(0);
}
html.anim-on .hero h1 .line .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-cinematic), opacity 0.4s linear;
}
html.anim-on .hero.entered h1 .line:nth-child(1) .line-inner { transition-delay: 0.35s; }
html.anim-on .hero.entered h1 .line:nth-child(2) .line-inner { transition-delay: 0.55s; }

/* Gold underline draws under <em> after lines finish */
html.anim-on .hero h1 em {
  position: relative;
  display: inline-block;
}
html.anim-on .hero h1 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -0.08em;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease-cinematic);
}
html.anim-on .hero.entered h1 em::after {
  transform: scaleX(1);
  transition-delay: 1.4s;
}

html.anim-on .hero .hero-tagline {
  transform: translateY(10px);
  letter-spacing: 0.06em;
  transition:
    opacity 0.9s var(--ease-cinematic),
    transform 0.9s var(--ease-cinematic),
    letter-spacing 1.2s var(--ease-cinematic);
}
html.anim-on .hero.entered .hero-tagline {
  opacity: 1; transform: none; letter-spacing: 0;
  transition-delay: 0.9s;
}

html.anim-on .hero p:not(.hero-tagline) {
  transform: translateY(10px);
  transition: opacity 0.8s var(--ease-cinematic), transform 0.8s var(--ease-cinematic);
}
html.anim-on .hero.entered p:not(.hero-tagline) {
  opacity: 1; transform: none;
  transition-delay: 1.1s;
}

html.anim-on .hero .hero-actions > * {
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
}
html.anim-on .hero.entered .hero-actions > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 1.3s; }
html.anim-on .hero.entered .hero-actions > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 1.45s; }

/* Replace the dumb bounce with a refined breathing scroll cue */
html.anim-on .hero-scroll {
  animation: none;
  opacity: 0;
  transition: opacity 1.2s ease 1.8s;
}
html.anim-on .hero.entered .hero-scroll { opacity: 1; }
html.anim-on .hero-scroll::after {
  background: linear-gradient(to bottom, rgba(201,168,76,0.7), transparent);
  height: 56px;
  position: relative;
  overflow: hidden;
}
/* draw highlight that slides down the line */
html.anim-on .hero-scroll::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent 0%, var(--gold) 50%, transparent 100%);
  transform: translateX(-50%) translateY(-100%);
  animation: scroll-line 2.6s var(--ease-cinematic) infinite;
}
@keyframes scroll-line {
  0%   { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(100%); opacity: 0; }
}

/* ============ PAGE-HERO (subpages) ====================================== */

html.anim-on .page-hero,
html.anim-on .over-hero {
  isolation: isolate;
  /* Default = bright (overridden per data-hero on <html>) */
  background-image:
    linear-gradient(135deg, rgba(17, 29, 53, 0.42) 0%, rgba(27, 42, 74, 0.22) 60%, rgba(17, 29, 53, 0.55) 100%),
    var(--page-hero-photo, linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  filter: saturate(1.1) contrast(1.05);
}
/* BRIGHT — text-shadow handled by general rules above */
/* MID — vignette behind copy */
html.anim-on[data-hero="mid"] .page-hero,
html.anim-on[data-hero="mid"] .over-hero {
  background-image:
    radial-gradient(ellipse 70% 80% at 30% 50%,
      rgba(17, 29, 53, 0.78) 0%,
      rgba(17, 29, 53, 0.48) 45%,
      rgba(17, 29, 53, 0) 80%),
    linear-gradient(135deg, rgba(17, 29, 53, 0.22) 0%, rgba(17, 29, 53, 0.05) 50%, rgba(17, 29, 53, 0.50) 100%),
    var(--page-hero-photo, linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%));
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
/* VIVID — darker but saturated/contrasty */
html.anim-on[data-hero="vivid"] .page-hero,
html.anim-on[data-hero="vivid"] .over-hero {
  background-image:
    linear-gradient(135deg, rgba(17, 29, 53, 0.72) 0%, rgba(27, 42, 74, 0.52) 50%, rgba(17, 29, 53, 0.85) 100%),
    var(--page-hero-photo, linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%));
  background-size: cover, cover;
  background-position: center, center;
  /* Brightness kept at 1.0 (was 1.06) so bright photos don't overexpose text */
  filter: saturate(1.4) contrast(1.18);
}

/* Paragraph text in any hero gets an extra-wide shadow for legibility — small,
   thin text needs a bigger soft halo to lift off bright backgrounds */
html.anim-on .hero p,
html.anim-on .page-hero p,
html.anim-on .over-hero p {
  text-shadow:
    0 0 48px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.7);
}
html.anim-on .page-hero::after {
  content: '';
  position: absolute;
  width: 70vw; height: 70vw;
  top: -30vw; right: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0) 60%);
  filter: blur(60px);
  opacity: calc(0.7 * var(--motion-scale));
  z-index: 0;
  animation: drift-a 30s ease-in-out infinite alternate;
  pointer-events: none;
}
html.anim-on .page-hero .breadcrumb,
html.anim-on .page-hero h1 .line .line-inner,
html.anim-on .page-hero p {
  opacity: 0;
}
html.anim-on .page-hero .breadcrumb {
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
}
html.anim-on .page-hero.entered .breadcrumb {
  opacity: 1 !important; transform: none !important; transition-delay: 0.1s;
}
html.anim-on .page-hero h1 .line .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-cinematic);
}
html.anim-on .page-hero.entered h1 .line .line-inner {
  opacity: 1 !important; transform: none !important;
}
html.anim-on .page-hero.entered h1 .line:nth-child(1) .line-inner { transition-delay: 0.3s; }
html.anim-on .page-hero.entered h1 .line:nth-child(2) .line-inner { transition-delay: 0.45s; }
html.anim-on .page-hero h1 span {
  position: relative;
}
html.anim-on .page-hero h1 span::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.05em;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-cinematic) 1.2s;
}
html.anim-on .page-hero.entered h1 span::after { transform: scaleX(1); }
html.anim-on .page-hero p {
  transform: translateY(10px);
  transition: opacity 0.8s var(--ease-cinematic), transform 0.8s var(--ease-cinematic);
}
html.anim-on .page-hero.entered p {
  opacity: 1 !important; transform: none !important; transition-delay: 0.8s;
}

/* ============ NAV ======================================================== */

html.anim-on .nav {
  transition:
    background var(--dur-fast) var(--ease-cinematic),
    box-shadow var(--dur-fast) var(--ease-cinematic),
    backdrop-filter var(--dur-fast) var(--ease-cinematic);
}
html.anim-on .nav.scrolled {
  background: rgba(17, 29, 53, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

html.anim-on .nav-logo .logo-name {
  position: relative;
  display: inline-block;
}
html.anim-on .nav-logo .logo-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-cinematic);
}
html.anim-on .nav-logo:hover .logo-name::after { transform: scaleX(1); }

html.anim-on .nav-links a::after {
  height: 1.5px;
  transition: width 0.45s var(--ease-cinematic);
}

/* Gold sheen sweep on the CTA */
html.anim-on .nav-cta {
  position: relative;
  overflow: hidden;
}
/* Sheen removed per request — no ::before / :hover effect on nav-cta */
html.anim-on .nav-cta::before { content: none !important; }
/* (sheen now driven by @keyframes nav-cta-sheen above) */

/* ============ BUTTONS ==================================================== */

html.anim-on .btn {
  position: relative;
  overflow: hidden;
  transition:
    background 0.4s var(--ease-cinematic),
    color 0.4s var(--ease-cinematic),
    border-color 0.4s var(--ease-cinematic),
    transform 0.5s var(--ease-cinematic),
    box-shadow 0.5s var(--ease-cinematic);
}

/* Primary: sheen sweep */
html.anim-on .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-cinematic);
  pointer-events: none;
}
html.anim-on .btn-primary:hover::before { transform: translateX(120%); }
html.anim-on .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(201,168,76,0.35);
}

/* Outline: corner ticks draw on hover */
html.anim-on .btn-outline {
  position: relative;
}
html.anim-on .btn-outline::before,
html.anim-on .btn-outline::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
  opacity: 0;
  transition: opacity 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic);
}
html.anim-on .btn-outline::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
  transform: translate(6px, 6px);
}
html.anim-on .btn-outline::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
  transform: translate(-6px, -6px);
}
html.anim-on .btn-outline:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--gold);
  transform: translateY(-3px);
}
html.anim-on .btn-outline:hover::before,
html.anim-on .btn-outline:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

html.anim-on .btn-navy:hover {
  background: var(--navy-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(27, 42, 74, 0.35);
}

/* WhatsApp button — soft pulse on idle, lift on hover */
html.anim-on .btn-whatsapp {
  position: relative;
}
html.anim-on .btn-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.6s var(--ease-cinematic) infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
html.anim-on .btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

/* Service link arrow — trail + slide */
html.anim-on .service-link {
  position: relative;
  transition: gap 0.4s var(--ease-cinematic), color 0.3s ease;
}
html.anim-on .service-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width 0.45s var(--ease-cinematic);
}
html.anim-on .service-link:hover { gap: 14px; }
html.anim-on .service-link:hover::after { width: 100%; }

/* ============ CARDS (universal hover upgrade) ============================ */

html.anim-on .usp-card,
html.anim-on .service-card,
html.anim-on .cruise-card,
html.anim-on .testimonial-card,
html.anim-on .rederij-card,
html.anim-on .package-card,
html.anim-on .dream-card,
html.anim-on .review-card,
html.anim-on .nieuws-card {
  transition:
    transform 0.55s var(--ease-cinematic),
    box-shadow 0.55s var(--ease-cinematic),
    background 0.55s var(--ease-cinematic),
    border-color 0.55s var(--ease-cinematic);
}

/* Gold accent that grows from center on hover */
html.anim-on .usp-card,
html.anim-on .rederij-card,
html.anim-on .service-card,
html.anim-on .review-card,
html.anim-on .cruise-card,
html.anim-on .nieuws-card,
html.anim-on .package-card {
  position: relative;
}

/* USP and rederij keep their always-on gold top border; don't animate a second
   bar on top of it. Service / cruise / nieuws / review keep the growing accent. */
html.anim-on .service-card::after,
html.anim-on .cruise-card::after,
html.anim-on .nieuws-card::after,
html.anim-on .review-card::after {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s var(--ease-cinematic);
  z-index: 2;
  border-radius: 8px 8px 0 0;
}
html.anim-on .service-card:hover::after,
html.anim-on .cruise-card:hover::after,
html.anim-on .nieuws-card:hover::after,
html.anim-on .review-card:hover::after { transform: scaleX(1); }

/* USP / rederij retain their static gold top border and gain only a glow on hover */
html.anim-on .usp-card,
html.anim-on .rederij-card {
  transition:
    transform 0.55s var(--ease-cinematic),
    box-shadow 0.55s var(--ease-cinematic),
    background 0.55s var(--ease-cinematic),
    border-color 0.55s var(--ease-cinematic);
}
html.anim-on .usp-card:hover,
html.anim-on .rederij-card:hover {
  border-top-color: var(--gold-light);
  box-shadow:
    0 22px 60px rgba(27, 42, 74, 0.22),
    0 -1px 0 var(--gold-light);
}

html.anim-on .usp-card:hover,
html.anim-on .rederij-card:hover,
html.anim-on .service-card:hover,
html.anim-on .cruise-card:hover,
html.anim-on .nieuws-card:hover,
html.anim-on .testimonial-card:hover,
html.anim-on .package-card:hover,
html.anim-on .dream-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(27, 42, 74, 0.22);
}

/* Icon pop on hover */
html.anim-on .usp-icon,
html.anim-on .service-icon,
html.anim-on .rederij-icon,
html.anim-on .contact-item-icon,
html.anim-on .feature-icon {
  transition: transform 0.55s var(--ease-cinematic), color 0.4s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.anim-on .usp-card:hover .usp-icon,
html.anim-on .service-card:hover .service-icon,
html.anim-on .rederij-card:hover .rederij-icon {
  transform: translateY(-4px) scale(1.08);
}

html.anim-on .contact-item:hover .contact-item-icon,
html.anim-on .feature-item:hover .feature-icon {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(201,168,76,0.22);
}

/* Dream card image gradient subtle zoom on hover (existing image bg already animates; reinforce) */
html.anim-on .dream-img { transition: transform 0.8s var(--ease-cinematic); overflow: hidden; }
html.anim-on .dream-card:hover .dream-img { transform: scale(1.03); }

/* Cruise tag hover lift */
html.anim-on .cruise-card:hover .cruise-tag { transform: translateY(-2px); }
html.anim-on .cruise-tag { transition: transform 0.4s var(--ease-cinematic); }

/* ============ FORM ====================================================== */

html.anim-on .form-group {
  position: relative;
}

html.anim-on .form-group input,
html.anim-on .form-group select,
html.anim-on .form-group textarea {
  transition:
    border-color 0.4s var(--ease-cinematic),
    background 0.4s var(--ease-cinematic),
    box-shadow 0.4s var(--ease-cinematic);
}

html.anim-on .form-group input:focus,
html.anim-on .form-group select:focus,
html.anim-on .form-group textarea:focus {
  border-color: var(--gold);
  background: #FFFEFB;
  box-shadow: 0 6px 24px rgba(201,168,76,0.12), 0 0 0 4px rgba(201,168,76,0.08);
}

/* Animated underline that grows from center under each input */
html.anim-on .form-group::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: left 0.5s var(--ease-cinematic), right 0.5s var(--ease-cinematic);
}
html.anim-on .form-group:focus-within::after { left: 0; right: 0; }

html.anim-on .form-group label {
  transition: color 0.3s var(--ease-cinematic), transform 0.3s var(--ease-cinematic);
  transform-origin: left center;
}
html.anim-on .form-group:focus-within label {
  color: var(--gold);
}

/* ============ FOOTER EXTRAS — Trust badges + socials ===================== */

.footer-extras {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 28px 0 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(201,168,76,0.18);
}

.footer-trust {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-trust-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-right: 4px;
}
.trust-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 6px;
  background: rgba(201,168,76,0.05);
  min-width: 86px;
  text-align: center;
  transition: background 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic);
}
.trust-badge:hover {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.6);
  transform: translateY(-1px);
}
.trust-name {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1;
}
.trust-sub {
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  line-height: 1;
}

.footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-socials-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-right: 6px;
}
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.05);
  transition: background 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic), color 0.4s ease;
  text-decoration: none;
}
.social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .footer-extras { flex-direction: column; align-items: stretch; gap: 18px; }
  .footer-trust { justify-content: center; }
  .footer-socials { justify-content: center; }
}

html.anim-on .footer-col ul li a {
  position: relative;
  display: inline-block;
  transition: color 0.35s var(--ease-cinematic), padding-left 0.35s var(--ease-cinematic);
}
html.anim-on .footer-col ul li a::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-6px);
  color: var(--gold);
  transition: opacity 0.35s var(--ease-cinematic), transform 0.35s var(--ease-cinematic);
}
html.anim-on .footer-col ul li a:hover {
  color: var(--gold);
  padding-left: 18px;
}
html.anim-on .footer-col ul li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ============ CTA BANNER ================================================= */

html.anim-on .cta-banner {
  isolation: isolate;
}
html.anim-on .cta-banner::after {
  content: '';
  position: absolute;
  width: 60vw; height: 60vw;
  top: -20vw; right: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 60%);
  filter: blur(60px);
  opacity: calc(0.8 * var(--motion-scale));
  animation: drift-a 24s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ============ COMPASS VARIANT — editorial / less ambient ================= */

html.anim-on[data-variant="compass"] .hero::before,
html.anim-on[data-variant="compass"] .hero::after,
html.anim-on[data-variant="compass"] .page-hero::after,
html.anim-on[data-variant="compass"] .cta-banner::after {
  display: none;
}

/* Editorial grid/crosshair over the hero — uitgezet op verzoek (rasterlijntjes over de foto) */
html.anim-on[data-variant="compass"] .hero .hero-bg::after {
  content: none;
}

/* In compass, line draws under section labels are stronger */
html.anim-on[data-variant="compass"] .reveal-label.in::before { width: 56px; }

/* ============ MOTION SCALE 0 (reduced motion or off) ==================== */

html.anim-on.no-anim *,
html.anim-on.no-anim *::before,
html.anim-on.no-anim *::after {
  transition: none !important;
  animation: none !important;
}
html.anim-on.no-anim .reveal,
html.anim-on.no-anim .reveal-up,
html.anim-on.no-anim .reveal-fade,
html.anim-on.no-anim .reveal-scale,
html.anim-on.no-anim .reveal-divider,
html.anim-on.no-anim .reveal-label,
html.anim-on.no-anim .reveal-ring,
html.anim-on.no-anim .reveal-img,
html.anim-on.no-anim .reveal-lines .line-inner,
html.anim-on.no-anim .reveal-words .word,
html.anim-on.no-anim .hero .hero-badge,
html.anim-on.no-anim .hero h1 .line .line-inner,
html.anim-on.no-anim .hero .hero-tagline,
html.anim-on.no-anim .hero p,
html.anim-on.no-anim .hero .hero-actions > *,
html.anim-on.no-anim .hero-scroll,
html.anim-on.no-anim .page-hero .breadcrumb,
html.anim-on.no-anim .page-hero h1 .line .line-inner,
html.anim-on.no-anim .page-hero p {
  opacity: 1 !important;
  transform: none !important;
}
html.anim-on.no-anim .reveal-divider { width: 50px !important; }

/* ============ ICON SYSTEM =============================================== */

.ra-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.55s var(--ease-cinematic), color 0.4s ease;
}

/* USP icons — bigger, badge-like halo */
.usp-icon.has-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 0;
  margin: 0 auto 22px;
  color: var(--gold);
}
.usp-icon.has-svg .ra-icon {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 1;
}
.usp-icon.has-svg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.06);
  transform: scale(0.82);
  opacity: 0;
  transition: transform 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic), background 0.55s var(--ease-cinematic);
}
html.anim-on .usp-card:hover .usp-icon.has-svg::before {
  transform: scale(1);
  opacity: 1;
  background: rgba(201,168,76,0.1);
}
html.anim-on .usp-card:hover .usp-icon.has-svg .ra-icon {
  transform: scale(1.06);
}

/* USP icons — PHOTO medallion variant (replaces flat SVG with real imagery) */
.usp-icon.has-photo {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 22px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  font-size: 0;
  box-shadow: 0 8px 24px rgba(201,168,76,0.18);
  transition: transform 0.55s var(--ease-cinematic), box-shadow 0.55s var(--ease-cinematic);
}
.usp-icon.has-photo .ra-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--navy);
  background: var(--navy-dark);
  transition: filter 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
  /* Subtle desaturation in idle, full color on hover */
  filter: saturate(0.85) brightness(0.92);
}
.usp-icon.has-photo::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  opacity: 0;
  transition: inset 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic);
  pointer-events: none;
}
.usp-icon.has-photo::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.12);
  opacity: 0;
  transition: inset 0.7s var(--ease-cinematic), opacity 0.7s var(--ease-cinematic);
  pointer-events: none;
}
html.anim-on .usp-card:hover .usp-icon.has-photo { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(201,168,76,0.28); }
html.anim-on .usp-card:hover .usp-icon.has-photo .ra-photo { filter: saturate(1.05) brightness(1); transform: scale(1.04); }
html.anim-on .usp-card:hover .usp-icon.has-photo::before { opacity: 1; inset: -10px; }
html.anim-on .usp-card:hover .usp-icon.has-photo::after  { opacity: 1; inset: -18px; }

/* SERVICE icon — photo medallion variant. Same construction as USP, sized for
   the white service-card. Gold ring → navy gap → photo. */
.service-icon.has-photo {
  position: relative;
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 0 24px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  font-size: 0;
  box-shadow: 0 8px 22px rgba(27, 42, 74, 0.12);
  transition: transform 0.55s var(--ease-cinematic), box-shadow 0.55s var(--ease-cinematic);
}
.service-icon.has-photo .ra-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2.5px solid #fff;
  background: var(--off-white);
  transition: filter 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
  filter: saturate(0.88) brightness(0.95);
}
.service-icon.has-photo::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  opacity: 0;
  transition: inset 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic);
  pointer-events: none;
}
.service-icon.has-photo::after {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.15);
  opacity: 0;
  transition: inset 0.7s var(--ease-cinematic), opacity 0.7s var(--ease-cinematic);
  pointer-events: none;
}
html.anim-on .service-card:hover .service-icon.has-photo { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 42, 74, 0.22); }
html.anim-on .service-card:hover .service-icon.has-photo .ra-photo { filter: saturate(1.05) brightness(1); transform: scale(1.04); }
html.anim-on .service-card:hover .service-icon.has-photo::before { opacity: 1; inset: -9px; }
html.anim-on .service-card:hover .service-icon.has-photo::after  { opacity: 1; inset: -16px; }

/* REDERIJ icon — photo medallion variant, smaller for compact rederij-card */
.rederij-icon.has-photo {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  padding: 2px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  font-size: 0;
  box-shadow: 0 6px 16px rgba(27, 42, 74, 0.10);
  transition: transform 0.55s var(--ease-cinematic), box-shadow 0.55s var(--ease-cinematic);
}
.rederij-icon.has-photo .ra-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
  background: var(--off-white);
  transition: filter 0.7s var(--ease-cinematic), transform 0.7s var(--ease-cinematic);
  filter: saturate(0.88) brightness(0.95);
}
.rederij-icon.has-photo::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.3);
  opacity: 0;
  transition: inset 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic);
  pointer-events: none;
}
html.anim-on .rederij-card:hover .rederij-icon.has-photo { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27, 42, 74, 0.18); }
html.anim-on .rederij-card:hover .rederij-icon.has-photo .ra-photo { filter: saturate(1.05) brightness(1); transform: scale(1.04); }
html.anim-on .rederij-card:hover .rederij-icon.has-photo::before { opacity: 1; inset: -9px; }

/* Service icons — same badge pattern, slightly smaller halo */
.service-icon.has-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 0;
  margin: 0 0 22px;
  color: var(--gold);
}
.service-icon.has-svg .ra-icon {
  width: 28px; height: 28px; z-index: 1; position: relative;
}
.service-icon.has-svg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(201,168,76,0.25);
  background: rgba(201,168,76,0.06);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic);
}
html.anim-on .service-card:hover .service-icon.has-svg::before {
  transform: scale(1);
  opacity: 1;
}
html.anim-on .service-card:hover .service-icon.has-svg .ra-icon {
  transform: scale(1.06) rotate(-2deg);
}

/* Rederij icons */
.rederij-icon.has-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 0;
  margin: 0 auto 14px;
  color: var(--gold);
}
.rederij-icon.has-svg .ra-icon {
  width: 26px; height: 26px;
}
.rederij-icon.has-svg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.25);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.55s var(--ease-cinematic), opacity 0.55s var(--ease-cinematic);
}
html.anim-on .rederij-card:hover .rederij-icon.has-svg::before {
  transform: scale(1);
  opacity: 1;
}

/* Contact item icons — fit inside existing 44x44 box */
.contact-item-icon.has-svg {
  color: var(--gold);
  font-size: 0;
}
.contact-item-icon.has-svg .ra-icon { width: 20px; height: 20px; }

/* Feature icons */
.feature-icon.has-svg {
  color: var(--gold);
  font-size: 0;
}
.feature-icon.has-svg .ra-icon { width: 20px; height: 20px; }

/* Footer contact icons */
.footer-contact p .icon.has-svg {
  color: var(--gold);
  width: 16px;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.footer-contact p .icon.has-svg .ra-icon { width: 16px; height: 16px; }

/* Profile detail icons */
.profile-detail .icon.has-svg {
  color: var(--gold);
  font-size: 0;
}
.profile-detail .icon.has-svg .ra-icon { width: 16px; height: 16px; }

/* Generic placeholder icons */
.nieuws-coming-icon.has-svg,
.ervaring-icon.has-svg {
  color: var(--gold);
  font-size: 0;
  display: inline-block;
}
.nieuws-coming-icon.has-svg .ra-icon,
.ervaring-icon.has-svg .ra-icon { width: 42px; height: 42px; }

/* Generic emoji-only container (e.g. inline-styled testimonial icons) */
.ra-generic-icon {
  color: var(--gold);
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.ra-generic-icon .ra-icon {
  width: var(--ra-size, 2rem);
  height: var(--ra-size, 2rem);
}

/* Hide the tiny converted-emoji icons inside testimonial cards — they read as
   smudges/tears against the dark navy background. */
.testimonial-card .ra-generic-icon { display: none; }

/* Also hide the decorative quote-mark `::before` on .testimonial-card that
   renders as a tiny gold teardrop at the top-left of each card. */
.testimonial-card::before { content: none !important; }

/* HERO BADGE — replace ⚓ emoji with inline svg */
.hero-badge.has-svg::before { display: none !important; }
.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-right: 2px;
}
.hero-badge-icon .ra-icon { width: 14px; height: 14px; }

/* SVG stroke draw — refined animation on entry into view */
html.anim-on .usp-card .ra-icon path,
html.anim-on .usp-card .ra-icon circle,
html.anim-on .usp-card .ra-icon ellipse,
html.anim-on .usp-card .ra-icon rect,
html.anim-on .service-card .ra-icon path,
html.anim-on .service-card .ra-icon circle,
html.anim-on .service-card .ra-icon ellipse,
html.anim-on .service-card .ra-icon rect {
  transition: stroke-dashoffset 1.4s var(--ease-cinematic), opacity 0.4s ease;
}

/* ============ TWEAKS PANEL UI =========================================== */

#tweaks-toggle-anim, #tweaks-panel-anim {
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  z-index: 99999;
}

#tweaks-panel-anim {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  background: rgba(17,29,53,0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 10px;
  padding: 18px 18px 16px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-cinematic), transform 0.3s var(--ease-cinematic);
}
#tweaks-panel-anim.open { opacity: 1; transform: none; pointer-events: auto; }

#tweaks-panel-anim h5 {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #fff;
}
#tweaks-panel-anim .tw-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#tweaks-panel-anim .tw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
}
#tweaks-panel-anim .tw-row:first-of-type { border-top: 0; }
#tweaks-panel-anim .tw-row > label { color: rgba(255,255,255,0.85); }
#tweaks-panel-anim .tw-seg {
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
}
#tweaks-panel-anim .tw-seg button {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 0.74rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.3s var(--ease-cinematic), color 0.3s ease;
  letter-spacing: 0.04em;
}
#tweaks-panel-anim .tw-seg button.active {
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
}
#tweaks-panel-anim input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}
#tweaks-panel-anim .tw-close {
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
#tweaks-panel-anim .tw-close:hover { background: rgba(255,255,255,0.08); color: var(--gold); }

#tweaks-toggle-anim {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(201,168,76,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s var(--ease-cinematic), box-shadow 0.3s var(--ease-cinematic);
}
#tweaks-toggle-anim:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(201,168,76,0.55); }
#tweaks-toggle-anim.hidden { display: none; }
#tweaks-toggle-anim::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
  animation: tw-dot 1.6s var(--ease-cinematic) infinite;
}
@keyframes tw-dot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.5); opacity: 0.5; }
}

/* ---------------------------------------------------------------------
   11-09-2026: hieronder stond een blok HERO FOTO dat door 386 NUL-bytes
   nooit werd ingelezen. Verwijderd. De hero wordt geregeld door
   --hero-photo in de pagina zelf en door .hero .hero-photo-el in
   style.css. Ook de drie terugvalfoto's naar een externe beeldbank zijn
   vervangen door /img/hero-home.webp, zodat er nooit een beeld van
   buiten reisarchitect.nl geladen kan worden.
   Vul dit bestand nooit aan met >> of Add-Content zonder -Encoding utf8.
   --------------------------------------------------------------------- */