/* ==========================================================================
   Vigilia — Managed IT & Cyber Security for Schools
   Global stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
/* Palette in OKLCH. Every neutral carries a little of the gold hue (~78) so the
   greys read warm against the brass, never clinical. */
:root {
  --ink:        oklch(19% 0.008 78);   /* deep warm charcoal — dark grounds     */
  --ink-2:      oklch(23% 0.009 78);   /* raised panels on dark                 */
  --ink-3:      oklch(28% 0.010 78);
  --paper:      oklch(98.2% 0.005 84); /* main reading surface, faintly warm    */
  --paper-2:    oklch(95.6% 0.009 84); /* alternating band                      */
  --card:       oklch(99.4% 0.003 84); /* raised surface on light               */

  --gold:       oklch(80% 0.108 78);   /* the brass in the mark                 */
  --gold-lt:    oklch(88% 0.075 84);
  --gold-dk:    oklch(52% 0.108 66);   /* AA on every light ground (5.0:1 min)  */

  --text:       oklch(24% 0.010 78);
  --text-soft:  oklch(45% 0.012 78);

  /* Type that sits on an ink ground: hero, dark bands, header, footer */
  --ink-fg:     oklch(98% 0.005 84);
  --on-dark:    oklch(94% 0.008 84);
  --on-dark-soft: oklch(74% 0.012 84);

  --line:       oklch(19% 0.008 78 / 0.11);
  --line-dark:  oklch(88% 0.075 84 / 0.17);

  --photo-veil: 0.36;  /* hero photo opacity */
  color-scheme: light;

  /* One family, committed. Archivo is a grotesque drawn for signage and civic
     print: sturdy, plainspoken, slightly institutional. The voice comes from
     weight and scale contrast, not from a second typeface. */
  --font-head: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 16px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px oklch(19% 0.008 78 / 0.05), 0 3px 12px oklch(19% 0.008 78 / 0.05);
  --shadow-md: 0 12px 34px oklch(19% 0.008 78 / 0.09);
  --shadow-lg: 0 28px 64px oklch(19% 0.008 78 / 0.14);

  /* ease-out-expo: fast commit, long settle */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 78px;
}

/* --------------------------------------------------------------------------
   1b. Night mode
   Set by the toggle in the header, or by the OS on a first visit.
   Only surfaces and type invert. The brass is the constant.
   Ink bands go DARKER than the page ground so the section rhythm survives.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --ink:        oklch(12% 0.008 78);
  --ink-2:      oklch(16% 0.009 78);
  --ink-3:      oklch(21% 0.010 78);
  --paper:      oklch(17.5% 0.008 78);
  --paper-2:    oklch(21% 0.009 78);
  --card:       oklch(23% 0.009 78);

  /* On a dark ground the brass no longer needs darkening for contrast */
  --gold-dk:    oklch(80% 0.108 78);

  --text:       oklch(93% 0.008 84);
  --text-soft:  oklch(72% 0.012 84);

  --line:       oklch(90% 0.02 84 / 0.13);
  --line-dark:  oklch(88% 0.075 84 / 0.15);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3), 0 3px 12px oklch(0% 0 0 / 0.25);
  --shadow-md: 0 12px 34px oklch(0% 0 0 / 0.42);
  --shadow-lg: 0 28px 64px oklch(0% 0 0 / 0.55);

  --photo-veil: 0.24;
  color-scheme: dark;
}

/* Freeze transitions for a moment while the theme flips, so nothing is caught
   interpolating between two palettes. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after { transition: none !important; }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scale steps sit ~1.3x apart, and display weight jumps to 700 while body
   holds at 400. Contrast comes from that gap. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 7vw, 5.6rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.038em;
}
h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
}
h3 {
  font-size: clamp(1.18rem, 1.9vw, 1.4rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.016em;
}
h4 { font-weight: 600; letter-spacing: -0.01em; }

/* Light type on dark grounds reads lighter; give it more air. */
.section--dark p, .hero-lede, .panel--dark p { line-height: 1.78; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

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

ul { margin: 0; padding: 0; list-style: none; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--gold);
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section--tight { padding: clamp(3rem, 6vw, 4.75rem) 0; }

.section--dark {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ink-fg); }
.section--dark .lede, .section--dark p { color: var(--on-dark-soft); }

.section--muted { background: var(--paper-2); }

/* At night the page ground is already dark, so ink bands need a hairline to
   keep the section rhythm readable. */
:root[data-theme="dark"] .section--dark { border-block: 1px solid var(--line); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 1.05rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--gold); }
.section-head--center .eyebrow::before { display: none; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-soft);
  line-height: 1.75;
  max-width: 62ch;
}
.section-head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: 0.955rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(224, 178, 94, 0.32);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(-1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--ink-fg);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--ink-fg);
  border-color: rgba(255,255,255,0.28);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--gold);
  color: var(--gold-lt);
  box-shadow: none;
}

.btn--sm { padding: 0.72rem 1.3rem; font-size: 0.885rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--gold-dk);
}
.arrow-link svg { transition: transform 0.3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(27, 27, 30, 0);
  transition: background-color 0.45s var(--ease), height 0.45s var(--ease),
              box-shadow 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line-dark);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.site-header.is-stuck {
  height: 66px;
  background: rgba(24, 24, 27, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.site-header.is-stuck::after { opacity: 1; }

.nav {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.brand img {
  width: 42px;
  height: 42px;
  transition: transform 0.5s var(--ease);
}
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-fg);
}
.brand-sub {
  font-size: 0.605rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-links a {
  position: relative;
  padding: 0.55rem 0.85rem;
  font-size: 0.935rem;
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  border-radius: 8px;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--ink-fg); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--gold-lt); }

.nav-cta { margin-left: 0.6rem; }

/* --------------------------------------------------------------------------
   5b. Day / night switch
   The header is an ink ground in both modes, so this control is styled dark
   throughout. Whichever mode is live gets the brass.
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  padding: 0.3rem 0.15rem;
  color: var(--on-dark-soft);
  flex: none;
}
.theme-toggle svg {
  flex: none;
  opacity: 0.45;
  transition: color 0.4s var(--ease), transform 0.55s var(--ease), opacity 0.4s var(--ease);
}
.theme-toggle .icon-sun { color: var(--gold); opacity: 1; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { color: currentColor; opacity: 0.4; transform: rotate(-45deg) scale(0.9); }
:root[data-theme="dark"] .theme-toggle .icon-moon { color: var(--gold); opacity: 1; transform: rotate(-14deg); }

.theme-toggle:hover svg { opacity: 0.85; }
.theme-toggle:hover .icon-sun { transform: rotate(40deg); }
:root[data-theme="dark"] .theme-toggle:hover .icon-moon { transform: rotate(-24deg) scale(1.08); }

/* The switch itself. The checkbox stays in the DOM for keyboard and AT. */
.theme-toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 100px;
  background: oklch(88% 0.075 84 / 0.16);
  border: 1px solid var(--line-dark);
  cursor: pointer;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.theme-toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.35);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}
.theme-toggle input:checked { background: oklch(80% 0.108 78 / 0.28); }
.theme-toggle input:checked::after { transform: translateX(20px); }
.theme-toggle input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The header mark acknowledges the switch with a quick roll */
.brand img { transform-origin: 50% 55%; }
.brand img.is-flipping { animation: brandRoll 0.85s var(--ease); }
@keyframes brandRoll {
  0%   { transform: rotate(0) scale(1); }
  45%  { transform: rotate(200deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (max-width: 980px) {
  /* In the open mobile menu it becomes a row of its own */
  .theme-toggle {
    order: 10;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 1.15rem 0.25rem 0.25rem;
  }
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: rgba(22, 22, 25, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line-dark);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.5s var(--ease), opacity 0.35s var(--ease);
  }
  .nav-links.is-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 1rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-links a::after { display: none; }
  .nav-cta { margin: 1.4rem 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero--page { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--photo-veil);
  filter: grayscale(0.12) contrast(1.02) brightness(1.12);
  transform: scale(1.04);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 282deg puts the heavy end on the right, under the copy. The mid stop sits
     at 58% so the whole text column stays above 4.5:1 even over the brightest
     part of the photograph; the light end is behind the mark, where there is
     no text to protect. */
  background: linear-gradient(282deg,
    oklch(19% 0.008 78 / 0.94) 4%,
    oklch(19% 0.008 78 / 0.88) 58%,
    oklch(19% 0.008 78 / 0.30) 100%);
}
@media (max-width: 700px) {
  .hero-photo::after { background: linear-gradient(180deg, rgba(27,27,30,0.86), rgba(27,27,30,0.94)); }
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(240, 212, 155, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 212, 155, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 30%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 5%, transparent 72%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.36;
  animation: drift 22s var(--ease) infinite alternate;
}
.orb--1 { width: 460px; height: 460px; top: -140px; right: -80px;
  background: radial-gradient(circle, #E3B462, transparent 68%); }
.orb--2 { width: 380px; height: 380px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, #B8862B, transparent 68%);
  animation-delay: -8s; animation-duration: 27s; }
.orb--3 { width: 300px; height: 300px; top: 42%; left: 46%;
  background: radial-gradient(circle, #F0D49B, transparent 70%);
  opacity: 0.16; animation-delay: -14s; animation-duration: 31s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(46px, -38px, 0) scale(1.14); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Mark leads, copy follows. Also what puts the mark first when the grid
   collapses to one column on small screens. */
.hero-visual { order: -1; }

/* On a wide display the 1200px container leaves both gutters empty and the
   hero reads as a small island. Let this one section run wider and scale the
   mark with it. --wrap is read by .wrap, so overriding it here is enough. */
@media (min-width: 1400px) {
  .hero { --wrap: 1520px; }
  .hero .mark-stage { width: min(100%, 440px); }
}
@media (min-width: 1750px) {
  .hero { --wrap: 1660px; }
  .hero .mark-stage { width: min(100%, 500px); }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero-visual { max-width: 300px; margin-inline: auto; }
}
/* On a phone the mark must not push the headline below the fold. */
@media (max-width: 620px) {
  .hero { padding-top: calc(var(--nav-h) + 1.75rem); }
  .hero-visual { max-width: 168px; }
  .hero-ring, .hero-ring--2 { display: none; }
}

.hero h1 { color: var(--ink-fg); margin-bottom: 0.42em; }

/* Letter reveal: each character sits in its own clipping box and drops into
   it. Split is done in main.js, and only when motion is welcome, so without
   JS or under reduced motion the headline is simply there. */
/* One unbreakable box per word: letters are inline-block, so a line could
   otherwise break inside a word. */
.wd { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.ltr-i {
  display: inline-block;
  transform: translateY(-110%);
  animation: letterDrop 0.72s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes letterDrop {
  from { transform: translateY(-110%); }
  to   { transform: translateY(0); }
}
/* Safety net set by main.js: the headline is never left clipped out of view.
   The animation has to be cancelled as well, because a running animation
   outranks a plain declaration in the cascade. */
.hero h1.is-revealed .ltr-i { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ltr-i { transform: none; animation: none; }
}
.hero h1 .accent { color: var(--gold); }
.hero-lede {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  color: var(--on-dark-soft);
  max-width: 54ch;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.05rem 0.5rem 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  background: rgba(240, 212, 155, 0.06);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--gold-lt);
  margin-bottom: 1.8rem;
}
.hero-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70%  { box-shadow: 0 0 0 11px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

/* The mark is a little character: arms out, head on top. Its parts move at
   different speeds so it reads as alive rather than as a spinning logo. */
.mark-stage {
  position: relative;
  width: min(100%, 380px);
  transform-style: preserve-3d;
  /* --px / --py are set from the pointer in main.js, range roughly -1 to 1 */
  transform:
    rotateY(calc(var(--px, 0) * 9deg))
    rotateX(calc(var(--py, 0) * -7deg))
    translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px), 0);
  transition: transform 0.9s var(--ease);
  cursor: pointer;
}
.mark-stage::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(80% 0.108 78 / 0.4), transparent 66%);
  filter: blur(38px);
  animation: markGlow 6.5s ease-in-out infinite;
  pointer-events: none;
}

.mark {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: markFloat 7s ease-in-out infinite;
}

/* Entrance: the V draws itself, then the head drops in and settles. */
.mark-arms {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: markDraw 1.5s var(--ease) 0.25s forwards;
}
.mark-body {
  transform-origin: 512px 800px;
  animation: markRise 1s var(--ease) 0.1s both;
}
.mark-head {
  transform-origin: 512px 278px;
  animation:
    markDrop 0.85s cubic-bezier(0.34, 1.3, 0.5, 1) 0.95s both,
    headBob 4.4s ease-in-out 1.9s infinite;
}

@keyframes markFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(-1.2deg); }
}
@keyframes markGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.09); }
}
@keyframes markDraw { to { stroke-dashoffset: 0; } }
@keyframes markRise {
  from { opacity: 0; transform: scaleY(0.55) translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes markDrop {
  from { opacity: 0; transform: translateY(-90px) scale(0.5); }
  to   { opacity: 1; transform: none; }
}
/* Out of phase with the float, so the head lags the body a little */
@keyframes headBob {
  0%, 100% { transform: translateY(0) scale(1); }
  45%      { transform: translateY(-13px) scale(1.05); }
}

/* Hover: the character gives a small hop and throws its arms wider */
.mark-stage:hover .mark-head { animation-play-state: paused; }
.mark-stage:hover .mark { animation: markHop 0.75s var(--ease); }
@keyframes markHop {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-26px) scale(1.04); }
  55%  { transform: translateY(4px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}

/* Day / night switch: the mark tumbles once, its arms redraw, and the glow
   flares. Class is added by main.js and removed when the animation ends. */
.mark-stage.is-flipping .mark { animation: markTumble 1.1s var(--ease); }
.mark-stage.is-flipping .mark-arms { animation: markDraw 1s var(--ease) 0.15s backwards; }
.mark-stage.is-flipping .mark-head { animation: markSpin 1.1s var(--ease); }
.mark-stage.is-flipping::before { animation: markFlare 1.1s var(--ease); }

@keyframes markTumble {
  0%   { transform: rotateY(0) translateY(0) scale(1); }
  35%  { transform: rotateY(180deg) translateY(-22px) scale(1.06); }
  100% { transform: rotateY(360deg) translateY(0) scale(1); }
}
@keyframes markSpin {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-30px) scale(0.7); }
  60%  { transform: translateY(-6px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes markFlare {
  0%   { opacity: 0.55; transform: scale(1); }
  35%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.55; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-arms { stroke-dashoffset: 0; }
  .mark-stage { transform: none; }
}
.hero-ring {
  position: absolute;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  inset: 2%;
  animation: spin 34s linear infinite;
}
.hero-ring::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px 2px rgba(227, 180, 98, 0.8);
}
.hero-ring--2 { inset: -10%; animation-duration: 48s; animation-direction: reverse; opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Proof row: three promises under the buttons. Words, not a metric template. */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.75rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line-dark);
}

.proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.72rem;
  padding-right: clamp(0.9rem, 1.8vw, 1.5rem);
  animation: proofIn 0.7s var(--ease) both;
}
.proof + .proof {
  padding-left: clamp(0.85rem, 1.6vw, 1.4rem);
  border-left: 1px solid var(--line-dark);
}
.proof:nth-child(1) { animation-delay: 0.45s; }
.proof:nth-child(2) { animation-delay: 0.56s; }
.proof:nth-child(3) { animation-delay: 0.67s; }

@keyframes proofIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.proof-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: oklch(80% 0.108 78 / 0.12);
  border: 1px solid var(--line-dark);
  color: var(--gold);
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.proof:hover .proof-icon {
  transform: translateY(-3px);
  background: oklch(80% 0.108 78 / 0.2);
}

.proof-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--on-dark-soft);
}
/* Set as a label, so caps with tracking. The qualifier under it stays sentence
   case: all-caps body copy is hard to read at this size. */
.proof-text strong {
  font-family: var(--font-head);
  font-size: 0.815rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  white-space: nowrap;
  color: var(--on-dark);
}

@media (max-width: 700px) {
  .hero-proof { grid-template-columns: 1fr; gap: 1.15rem; }
  .proof { flex-direction: row; align-items: center; padding-right: 0; }
  .proof + .proof { padding-left: 0; border-left: 0; }
}

/* Page hero (interior pages) */
.page-hero-inner { max-width: 780px; }
.crumbs {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--on-dark-soft);
  margin-bottom: 1.35rem;
}
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: 0.45; }

/* --------------------------------------------------------------------------
   7. Marquee / trust strip
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--ink-2);
  border-block: 1px solid var(--line-dark);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }

.marquee-track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--on-dark-soft);
  white-space: nowrap;
}
.marquee-item svg { color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   7b. Photography
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(27,27,30,0) 42%, rgba(18,18,20,0.82) 100%),
    linear-gradient(150deg, rgba(227,180,98,0.16), rgba(27,27,30,0.1) 55%);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.shot:hover img { transform: scale(1.055); }
.shot:hover::after { opacity: 0.82; }

.shot--wide   { aspect-ratio: 16 / 10; }
.shot--tall   { aspect-ratio: 3 / 4; }
.shot--square { aspect-ratio: 1; }
.shot--banner { aspect-ratio: 21 / 9; }

.shot-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.15rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-fg);
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.shot-cap::before {
  content: "";
  flex: none;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}
.shot:hover .shot-cap::before { width: 30px; }

.shot-tag {
  position: absolute;
  top: 0.95rem; left: 0.95rem;
  z-index: 2;
  padding: 0.34rem 0.8rem;
  border-radius: 100px;
  background: rgba(18, 18, 20, 0.66);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-lt);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Offset gold outline behind a photo */
.shot-frame { position: relative; }
.shot-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(227, 180, 98, 0.45);
  border-radius: var(--radius);
}
.shot-frame .shot { position: relative; }
@media (max-width: 700px) { .shot-frame::before { display: none; } }

/* --------------------------------------------------------------------------
   7d. Service showcase
   The register advances itself: one service at a time, each with its own
   photograph. Hovering, focusing or pressing pause stops it.
   -------------------------------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.showcase-stage {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--nav-h) + 1.75rem);
}

.showcase-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.85s var(--ease), transform 1.4s var(--ease);
}
.showcase-slide.is-active { opacity: 1; transform: none; }
.showcase-slide img { width: 100%; height: 100%; object-fit: cover; }
.showcase-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(19% 0.008 78 / 0.34) 0%, transparent 34%),
    linear-gradient(160deg, oklch(80% 0.108 78 / 0.12), oklch(19% 0.008 78 / 0.18) 60%);
}

.showcase-tag {
  position: absolute;
  top: 0.95rem;
  left: 0.95rem;
  z-index: 2;
  padding: 0.34rem 0.8rem;
  border-radius: 100px;
  background: oklch(18% 0.008 78 / 0.66);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-lt);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.showcase-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.showcase-tab {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 0 0.9rem;
  padding: 1.05rem 0.2rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.55s var(--ease);
}
.showcase-tab:hover { padding-left: 0.55rem; }

.showcase-num {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  opacity: 0.45;
  padding-top: 0.28rem;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.showcase-tab.is-active .showcase-num,
.showcase-tab:hover .showcase-num { color: var(--gold-dk); opacity: 1; }

.showcase-text { min-width: 0; }
.showcase-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.3;
  transition: color 0.4s var(--ease);
}
.showcase-tab.is-active .showcase-text strong { color: var(--gold-dk); }

/* Only the live entry carries its description */
.showcase-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease), opacity 0.4s var(--ease);
}
.showcase-tab.is-active .showcase-desc { grid-template-rows: 1fr; opacity: 1; }
.showcase-desc > span {
  overflow: hidden;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.showcase-tab.is-active .showcase-desc > span { padding-top: 0.4rem; }
.showcase-desc a {
  color: var(--gold-dk);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid oklch(52% 0.108 66 / 0.35);
}
.showcase-desc a:hover { border-bottom-color: currentColor; }

/* Timing bar: its animation ending is what advances the showcase */
.showcase-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
/* The fill itself is driven from main.js via the Web Animations API, so the
   countdown and the rotation are the same object and pause together. */

.showcase-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.15rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: none;
  color: var(--text-soft);
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.showcase-toggle:hover { color: var(--gold-dk); border-color: var(--gold); }
.showcase-toggle .i-play { display: none; }
.showcase.is-paused .showcase-toggle .i-play { display: block; }
.showcase.is-paused .showcase-toggle .i-pause { display: none; }

@media (max-width: 880px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase-stage { position: relative; top: auto; aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-tab.is-active .showcase-bar { transform: scaleX(1); }
  .showcase-slide { transition: none; }
}

/* --------------------------------------------------------------------------
   7e. Stacking cards
   The onboarding steps deal themselves like a deck: each card pins, the next
   slides over it and pins slightly lower, so the edges of the ones beneath
   stay visible. Pure sticky, no scroll listener.
   -------------------------------------------------------------------------- */
.stack {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Runway so the last card holds its pinned beat before the deck releases.
   This has to be a block INSIDE the flow, not padding on .stack: a sticky
   element is contained by its parent's CONTENT box, and padding sits outside
   that, so padding here adds height to the section and changes nothing. */
.stack::after {
  content: "";
  display: block;
  height: clamp(8rem, 34vh, 20rem);
}

.stack-card {
  position: sticky;
  /* Each card parks 18px lower than the one before, leaving a visible edge */
  top: calc(var(--nav-h) + 1.5rem + (var(--i) * 18px));
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  min-height: clamp(230px, 34vh, 300px);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
/* Later cards sit visually above, and cast onto the ones they cover */
.stack-card:nth-child(2) { box-shadow: 0 -2px 0 var(--line), var(--shadow-md); }
.stack-card:nth-child(3) { box-shadow: 0 -2px 0 var(--line), var(--shadow-lg); }
.stack-card:nth-child(4) { box-shadow: 0 -2px 0 var(--line), var(--shadow-lg); }

.stack-index {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.2rem;
  border-top: 3px solid var(--gold);
}
.stack-num {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold-dk);
  font-variant-numeric: tabular-nums;
}
.stack-of {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.stack-body h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin-bottom: 0.5rem;
}
.stack-body p { color: var(--text-soft); max-width: 54ch; }
.stack-note {
  margin-top: 0.9rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-dk);
}

/* Where the browser can drive animation from scroll position, let a covered
   card settle back a little. Purely additive: without it the stack still works. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stack-card {
      animation: stackSettle linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 90%;
    }
    @keyframes stackSettle {
      to { transform: scale(0.94); opacity: 0.72; }
    }
  }
}

/* On a phone a column of pinned full-height cards is punishing: plain list. */
@media (max-width: 760px) {
  /* No pinning, so the runway would just be dead space */
  .stack::after { display: none; }
  .stack-card {
    position: static;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1rem;
    animation: none;
  }
  .stack-index { flex-direction: row; align-items: baseline; gap: 0.75rem; }
  .stack-num { font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
   7f. Service rows (services.html)
   Ten equal sections, image and copy alternating sides. Each photograph
   uncovers itself as it enters, and the checklist lands line by line.
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.svc--flip .svc-shot { order: 2; }

.svc-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
  /* Uncover from the side the row sits on */
  transition: clip-path 1.05s var(--ease), box-shadow 0.6s var(--ease);
}
.js .svc-shot { clip-path: inset(0 0 0 12%); }
.js .svc--flip .svc-shot { clip-path: inset(0 12% 0 0); }
.svc-shot.is-in { clip-path: inset(0 0 0 0); }

.svc-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.js .svc-shot img { transform: scale(1.12); }
.svc-shot.is-in img { transform: scale(1); }
.svc-shot:hover img { transform: scale(1.05); }
.svc-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(19% 0.008 78 / 0.3) 0%, transparent 38%);
  pointer-events: none;
}

.svc-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.36rem 0.85rem;
  border-radius: 100px;
  background: oklch(18% 0.008 78 / 0.68);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-lt);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.svc-num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.svc-num span {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--gold-dk);
  font-variant-numeric: tabular-nums;
}
.svc-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.svc-body h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-bottom: 0.45em; }
.svc-body .lede { font-size: clamp(1rem, 1.4vw, 1.1rem); }

/* Checklist lands a line at a time once the row is in view */
.svc-checks { margin-top: 1.6rem; }
.js .svc-checks li {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + 180ms);
}
.svc-body.is-in .svc-checks li { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .svc-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc--flip .svc-shot { order: 0; }
  .svc-shot { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-shot, .svc-shot img { clip-path: none; transform: none; transition: none; }
  .svc-checks li { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.05rem);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold), var(--gold-dk));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: rgba(227, 180, 98, 0.5);
}
.card:hover::before { transform: scaleX(1); }

.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-soft); font-size: 0.975rem; }

.card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(227,180,98,0.18), rgba(227,180,98,0.05));
  border: 1px solid rgba(227, 180, 98, 0.32);
  color: var(--gold-dk);
  margin-bottom: 1.25rem;
  transition: transform 0.45s var(--ease);
}
.card:hover .card-icon { transform: translateY(-3px) rotate(-5deg); }

.card-list {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 0.55rem;
}
.card-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.915rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.card--dark {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: var(--on-dark);
}
.card--dark h3 { color: var(--ink-fg); }
.card--dark p, .card--dark .card-list li { color: var(--on-dark-soft); }
.card--dark .card-list { border-top-color: rgba(255,255,255,0.1); }
.card--dark .card-icon { color: var(--gold); }
.card--dark:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.4); }

/* Numbered step cards */
.step { position: relative; padding-top: 2.6rem; }
.step-num {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-head);
  font-size: 3.1rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(227, 180, 98, 0.3);
  letter-spacing: -0.04em;
  transition: color 0.4s var(--ease);
}
.card:hover .step-num { color: var(--gold); }

/* Feature row (icon + text) */
.feature {
  display: flex;
  gap: 1.05rem;
  align-items: flex-start;
}
.feature-icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(227, 180, 98, 0.14);
  border: 1px solid rgba(227, 180, 98, 0.3);
  color: var(--gold-dk);
}
.section--dark .feature-icon { color: var(--gold); }
.feature h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.feature p { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stat {
  text-align: center;
  padding: 1.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.025);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}
.stat:hover { transform: translateY(-6px); background: rgba(227, 180, 98, 0.07); }
.stat .num {
  font-family: var(--font-head);
  font-size: clamp(2.3rem, 4.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}
.stat .lbl {
  margin-top: 0.7rem;
  font-size: 0.855rem;
  letter-spacing: 0.05em;
  color: var(--on-dark-soft);
}

/* --------------------------------------------------------------------------
   10. Split panels
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.panel--dark {
  background: linear-gradient(155deg, var(--ink-2), var(--ink));
  border-color: var(--line-dark);
  color: var(--on-dark);
}
.panel--dark h3 { color: var(--ink-fg); }
.panel--dark p { color: var(--on-dark-soft); }

.checks { display: grid; gap: 0.9rem; }
.checks li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.98rem;
  line-height: 1.6;
}
.checks svg { flex: none; color: var(--gold-dk); margin-top: 5px; }
.section--dark .checks svg, .panel--dark .checks svg { color: var(--gold); }

/* --------------------------------------------------------------------------
   11. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 0.85rem; max-width: 880px; margin-inline: auto; }

.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.acc-item.is-open { border-color: rgba(227, 180, 98, 0.6); box-shadow: var(--shadow-sm); }

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.acc-btn .icon {
  margin-left: auto;
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold-dk);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.4s var(--ease), background-color 0.35s var(--ease);
}
.acc-item.is-open .acc-btn .icon {
  transform: rotate(135deg);
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p {
  padding: 0 1.4rem 1.35rem;
  color: var(--text-soft);
  font-size: 0.985rem;
}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(140deg, var(--ink-2), var(--ink) 60%);
  color: var(--on-dark);
  border-radius: clamp(20px, 3vw, 30px);
  padding: clamp(2.5rem, 6vw, 4.25rem);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--line-dark);
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  top: -55%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(227,180,98,0.3), transparent 66%);
  filter: blur(46px);
  pointer-events: none;
}
.cta-band h2 { color: var(--ink-fg); position: relative; }
.cta-band .lede { margin-inline: auto; position: relative; color: var(--on-dark-soft); }
.cta-band .btn-row { justify-content: center; position: relative; }

/* Split variant: a portrait photo alongside the pitch instead of centred type */
.cta-band--split {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  text-align: left;
  padding: clamp(1.6rem, 3vw, 2.25rem);
}
.cta-band--split .lede { margin-inline: 0; }
.cta-band--split .btn-row { justify-content: flex-start; }

.cta-shot {
  position: relative;
  margin: 0;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-dark);
}
.cta-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.cta-band--split:hover .cta-shot img { transform: scale(1.04); }
.cta-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, oklch(80% 0.108 78 / 0.14), oklch(19% 0.008 78 / 0.35) 60%);
  pointer-events: none;
}

.cta-copy { position: relative; }
.cta-aside {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gold);
}

@media (max-width: 780px) {
  .cta-band--split { grid-template-columns: 1fr; text-align: center; }
  .cta-band--split .lede { margin-inline: auto; }
  .cta-band--split .btn-row { justify-content: center; }
  .cta-shot { aspect-ratio: 16 / 11; max-height: 300px; }
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-item {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.section--dark .contact-item { border-bottom-color: rgba(255,255,255,0.09); }
.contact-item:last-child { border-bottom: 0; }
.contact-item .label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dk);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.section--dark .contact-item .label { color: var(--gold); }
.contact-item .value {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 500;
  word-break: break-word;
}
.contact-item a.value:hover { color: var(--gold-dk); }
.section--dark .contact-item a.value:hover { color: var(--gold); }

.form { display: grid; gap: 1.05rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--text);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 138px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(227, 180, 98, 0.18);
}
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold-dk); flex: none; }

.form-note { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.25rem; }

.form-status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: 11px;
  background: oklch(80% 0.108 78 / 0.14);
  border: 1px solid oklch(80% 0.108 78 / 0.4);
  font-size: 0.93rem;
  line-height: 1.6;
}
.form-status a { color: var(--gold-dk); font-weight: 600; text-decoration: underline; }
.form-status--ok {
  background: oklch(72% 0.15 150 / 0.12);
  border-color: oklch(72% 0.15 150 / 0.45);
}
.form-status--error {
  background: oklch(62% 0.18 25 / 0.12);
  border-color: oklch(62% 0.18 25 / 0.5);
}
.form-status:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.form-status.is-visible { display: block; animation: fadeUp 0.5s var(--ease) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: oklch(15% 0.007 78);
  color: var(--on-dark-soft);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: 0.945rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h3 {
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.05rem;
}
.footer-links { display: grid; gap: 0.6rem; }
.footer-links a { transition: color 0.25s var(--ease), transform 0.25s var(--ease); display: inline-block; }
.footer-links a:hover { color: var(--gold-lt); transform: translateX(4px); }

.footer-brand .brand { margin-bottom: 1.15rem; }
.footer-line {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-dark-soft);
  margin: 0;
}

.footer-bottom {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  font-size: 0.855rem;
}

/* --------------------------------------------------------------------------
   14b. Chat assistant
   -------------------------------------------------------------------------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 120; }

.chat-launcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 56px;
  padding: 0 1.25rem 0 1rem;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(140deg, var(--gold-lt), var(--gold) 55%, #C99A3E);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(227, 180, 98, 0.4);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.chat-launcher:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(227, 180, 98, 0.5); }

.chat-launcher-icon { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.chat-launcher-icon svg {
  position: absolute;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.chat-launcher-icon .i-close { transform: rotate(-90deg) scale(0.5); opacity: 0; }
.chat.is-open .i-chat  { transform: rotate(90deg) scale(0.5); opacity: 0; }
.chat.is-open .i-close { transform: none; opacity: 1; }

/* Collapse to a circle once the panel is open — the label is redundant there */
.chat.is-open .chat-launcher-label { display: none; }
.chat.is-open .chat-launcher { width: 56px; padding: 0; justify-content: center; }

.chat-nudge {
  position: absolute;
  top: 6px; right: 10px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #E5484D;
  border: 2px solid var(--ink-fg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.chat-nudge.is-on { opacity: 1; transform: none; animation: pulse 2.4s infinite; }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(384px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18, 18, 22, 0.32);
  transform-origin: bottom right;
  transform: translateY(14px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s var(--ease), opacity 0.32s var(--ease);
}
.chat.is-open .chat-panel { transform: none; opacity: 1; pointer-events: auto; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  flex: none;
}
.chat-avatar {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(227, 180, 98, 0.12);
  border: 1px solid rgba(227, 180, 98, 0.3);
}
.chat-avatar img { width: 26px; height: 26px; }
.chat-id { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.chat-id strong {
  font-family: var(--font-head);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink-fg);
}
.chat-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--on-dark-soft);
}
.chat-status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulse 2.6s infinite;
}
.chat-close {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: var(--on-dark-soft);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chat-close:hover { background: rgba(255,255,255,0.09); color: var(--ink-fg); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem 1rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scrollbar-width: thin;
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(27,27,30,0.16); border-radius: 8px; }

.chat-msg { display: flex; animation: bubbleIn 0.4s var(--ease) both; }
.chat-msg--bot  { justify-content: flex-start; }
.chat-msg--user { justify-content: flex-end; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.chat-bubble {
  max-width: 85%;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  font-size: 0.925rem;
  line-height: 1.6;
}
.chat-msg--bot .chat-bubble {
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--text);
}
.chat-msg--user .chat-bubble {
  background: var(--ink);
  color: var(--on-dark);
  border-bottom-right-radius: 5px;
}
.chat-bubble a { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg--user .chat-bubble a { color: var(--gold-lt); }
.chat-bubble strong { font-weight: 700; }

.chat-typing .chat-bubble { display: flex; gap: 5px; padding: 0.95rem; }
.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-dk);
  opacity: 0.45;
  animation: dot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.chat-chips {
  flex: none;
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
}
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chip {
  flex: none;
  padding: 0.42rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(227, 180, 98, 0.5);
  background: rgba(227, 180, 98, 0.1);
  color: var(--gold-dk);
  font-family: var(--font-head);
  font-size: 0.79rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chat-chip:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

.chat-form {
  flex: none;
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.5rem;
}
.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.chat-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(227, 180, 98, 0.18);
}
.chat-form button {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.chat-form button:hover { transform: scale(1.07); background: var(--gold-lt); }

.chat-foot {
  flex: none;
  margin: 0;
  padding: 0 1.1rem 0.85rem;
  font-size: 0.72rem;
  color: var(--text-soft);
  text-align: center;
}
.chat-foot a { color: var(--gold-dk); font-weight: 600; }

@media (max-width: 520px) {
  .chat { right: 14px; bottom: 14px; }
  .chat-launcher-label { display: none; }
  .chat-launcher { padding: 0; width: 56px; justify-content: center; }
  .chat-panel { width: calc(100vw - 28px); height: min(72vh, 520px); }
}

/* Floating WhatsApp — sits directly above the chat launcher */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--ink-fg);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wa-float:hover { transform: scale(1.09) translateY(-3px); box-shadow: 0 18px 36px rgba(37, 211, 102, 0.45); }
@media (max-width: 520px) { .wa-float { right: 14px; bottom: 82px; } }

/* --------------------------------------------------------------------------
   15. Scroll reveal + progress
   -------------------------------------------------------------------------- */
/* Scoped to .js, set by the inline head script. Without scripting these
   elements must stay visible: hiding them unconditionally would blank the
   site if main.js ever failed to load. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold), var(--gold-dk));
  z-index: 200;
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}