/* ==========================================================================
   Me Lawrence Al Kabain, avocat
   Warm-modern design system. Light theme only, system fonts, zero external
   requests (no CDN, no webfonts) — keeps the site fast and avoids shipping
   visitor data to third parties, which matters under Law 25.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Warm neutrals — tuned to the cream in the logo lockup */
  --bg:          #FBF7F1;
  --surface:     #F4EEE4;
  --surface-2:   #EBE3D6;
  --line:        #E3DACB;
  --line-strong: #CFC3AF;

  /* Ink */
  --ink:         #1B1E26;
  --ink-soft:    #4C5262;
  --ink-mute:    #6F7484;

  /* Brand — sampled from the logo animation */
  --accent:       #13203A;  /* navy   — primary buttons, links, headings */
  --accent-dark:  #0B1425;
  --accent-tint:  #E9ECF2;
  --gold:         #C49A3F;  /* gold   — rules, icon chips, decorative accents */
  --gold-deep:    #A67F2E;
  --gold-text:    #8A6A21;  /* darkened for small text — 4.9:1 on cream */
  --gold-tint:    #F6EEDD;
  --clay:         #A9663F;

  --white: #FFFFFF;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --radius:    10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(34,31,28,.05), 0 2px 8px rgba(34,31,28,.04);
  --shadow-md: 0 2px 6px rgba(34,31,28,.06), 0 12px 32px rgba(34,31,28,.07);

  --wrap: 1140px;
  --measure: 68ch;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.075rem; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

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

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.wrap--narrow { max-width: 780px; }

section { padding-block: var(--s-8); }
@media (min-width: 768px) { section { padding-block: var(--s-9); } }

.section--surface { background: var(--surface); }
.section--tint    { background: var(--accent-tint); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--white);
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,250,247,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 74px;
}

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.brand:hover { color: inherit; }
.brand__name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__role {
  font-size: .66rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-size: .935rem; color: var(--ink-soft); text-decoration: none;
  padding-block: var(--s-2); border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.lang-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: .32rem .7rem;
}
.lang-toggle:hover { color: var(--accent); border-color: var(--accent); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .45rem .6rem; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 20px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; order: 3; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--s-5) var(--s-6);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav__actions { margin-top: var(--s-4); flex-wrap: wrap; }
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .96rem; font-weight: 500; line-height: 1;
  padding: .85rem 1.5rem; border-radius: 100px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-dark); color: var(--white); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--light { background: var(--white); color: var(--accent); }
.btn--light:hover { background: var(--surface); color: var(--accent-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  padding-block: var(--s-8) var(--s-8);
  background:
    radial-gradient(120% 100% at 88% 0%, var(--accent-tint) 0%, rgba(231,239,237,0) 58%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .hero { padding-block: var(--s-9) var(--s-9); } }

.hero__eyebrow {
  display: inline-block; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: .38rem .85rem; margin-bottom: var(--s-5);
}
.hero__title { max-width: 17ch; }
.hero__lead {
  font-size: clamp(1.075rem, 1.9vw, 1.25rem);
  color: var(--ink-soft); max-width: 56ch; margin-top: var(--s-5);
}

.hero__points {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
}
.hero__points li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: var(--ink-soft);
}
.hero__points svg { flex: none; color: var(--accent); }

/* ---------------------------------------------------------- page header -- */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-7);
}
@media (min-width: 768px) { .page-head { padding-block: var(--s-8); } }
.page-head__kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: var(--s-3);
}
.page-head__lead { font-size: 1.125rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------------------------------------------------------- breadcrumbs -- */
.crumbs { font-size: .85rem; color: var(--ink-mute); margin-bottom: var(--s-4); }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { margin-inline: .4rem; }

/* ---------------------------------------------------------------- intro -- */
.section-intro { max-width: 62ch; margin-bottom: var(--s-7); }
.section-intro .kicker {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: var(--s-3);
}
.section-intro p { color: var(--ink-soft); }

/* ---------------------------------------------------------------- cards -- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--link { text-decoration: none; color: inherit; }
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  color: inherit;
}
.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid rgba(196,154,63,.28);
  display: grid; place-items: center; margin-bottom: var(--s-4);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-soft); font-size: .97rem; margin-bottom: var(--s-4); }
.card__more {
  margin-top: auto; font-size: .9rem; font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: .35rem;
}
.card--link:hover .card__more { gap: .6rem; }
.card__more svg { transition: transform .2s ease; }

/* ---------------------------------------------------------------- steps -- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-5); }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 3.5rem;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.35rem; height: 2.35rem; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-family: var(--serif); font-size: 1.05rem;
  display: grid; place-items: center;
}
.steps h3 { margin-bottom: var(--s-2); font-size: 1.1rem; }
.steps p { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------- checks -- */
.checklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist li {
  position: relative; padding-left: 1.85rem; color: var(--ink-soft); font-size: .98rem;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); opacity: .85;
}
.checklist--tight li { font-size: .94rem; }

.crosslist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.crosslist li {
  position: relative; padding-left: 1.85rem; color: var(--ink-soft); font-size: .96rem;
}
.crosslist li::before {
  content: "\00d7"; position: absolute; left: .25rem; top: -.05em;
  color: var(--clay); font-size: 1.15rem; line-height: 1.55;
}

/* --------------------------------------------------------------- split --- */
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--portrait { grid-template-columns: minmax(0, 380px) 1fr; }
}

.portrait {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }

.portrait-caption {
  margin-top: var(--s-4); font-size: .85rem; color: var(--ink-mute);
  text-align: center;
}

/* -------------------------------------------------------------- callout -- */
.callout {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: var(--s-5) var(--s-6);
  margin-block: var(--s-6);
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }

.callout--warn { border-left-color: var(--clay); background: #FDF8F4; }

/* ------------------------------------------------------------- contacts -- */
.contact-grid { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }

.contact-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.contact-methods li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.contact-methods__icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--gold-tint); color: var(--gold-deep);
  border: 1px solid rgba(196,154,63,.28);
  display: grid; place-items: center;
}
.contact-methods dt, .contact-methods .label {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .25rem;
}
.contact-methods .value { font-size: 1.05rem; font-weight: 500; color: var(--ink); text-decoration: none; }
a.value:hover { color: var(--accent); }
.contact-methods .note { font-size: .87rem; color: var(--ink-mute); margin: .2rem 0 0; }

/* ----------------------------------------------------------------- form -- */
.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-6); }
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-size: .89rem; font-weight: 500; margin-bottom: var(--s-2); color: var(--ink); }
.field .req { color: var(--clay); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .7rem .85rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field .hint { font-size: .84rem; color: var(--ink-mute); margin: var(--s-2) 0 0; }

.consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: .3rem; flex: none; accent-color: var(--accent); }
.consent label { font-size: .9rem; color: var(--ink-soft); font-weight: 400; line-height: 1.5; }

.form-note { font-size: .84rem; color: var(--ink-mute); margin-top: var(--s-4); }

/* ----------------------------------------------------------------- prose -- */
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-6); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.prose dl { max-width: var(--measure); }
.prose dt { font-weight: 600; color: var(--ink); margin-top: var(--s-4); }
.prose dd { margin: var(--s-1) 0 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ CTA -- */
.cta-band {
  background: var(--accent); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6);
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.86); margin-inline: auto; max-width: 54ch; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--light { background: var(--gold); color: var(--accent-dark); }
.cta-band .btn--light:hover { background: #D4AC55; color: var(--accent-dark); }
.cta-band .btn--ghost { border-color: rgba(255,255,255,.45); color: var(--white); }
.cta-band .btn--ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.1); }
.cta-band__fine { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: var(--s-5); }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.72);
  padding-block: var(--s-8) var(--s-6); margin-top: var(--s-8);
  font-size: .93rem;
}
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }

.site-footer h3 {
  color: var(--white); font-family: var(--sans); font-size: .76rem;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: var(--s-4);
  font-weight: 600;
}
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer p { max-width: 40ch; margin-bottom: var(--s-3); }

.footer-brand__name { font-family: var(--serif); font-size: 1.15rem; color: var(--white); margin-bottom: var(--s-2); }
.footer-meta {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.55);
}
.footer-meta p { margin: 0; max-width: none; }
.footer-disclaimer {
  font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.55;
  max-width: 78ch; margin-top: var(--s-4);
}

/* ---------------------------------------------------- cinematic hero ----- */
/* One screen tall. 100svh (not vh) so mobile browser chrome can't cause
   overflow. The hero slides up under the sticky header, which is transparent
   until you scroll past it. */
.hero-video {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -74px;          /* pull up under the sticky header */

  /* The logo fills 60% of the video frame's height, so object-fit:cover makes it
     far too large to share the hero with bottom-anchored text — and cropping the
     sides on phones would slice the wordmark. Instead the media sits in its own
     box and the hero paints a radial gradient tuned to the video's sampled edge
     colours, so the backdrop continues past the video's rectangle. */
  background: radial-gradient(118% 96% at 50% 30%,
    #D5D0C9 0%, #C8C4BC 38%, #B1AEA6 74%, #9D9A92 100%);
}

.hero-video__media,
.hero-video__still {
  position: absolute;
  top: 2%;
  left: 0; right: 0;
  margin-inline: auto;          /* centre the box */
  /* Size from the media's own ratio, bounded on BOTH axes. Setting an explicit
     height alongside max-width over-constrains the box, and object-fit:cover then
     crops the wordmark off on narrow screens. Letting width and height stay auto
     keeps the box exactly the picture's shape, which is also what makes the mask
     below line up with the real edges. */
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 52%;
  object-fit: contain;
  z-index: 0;
  /* Two linear masks intersected: each axis fades only in the outer band, which
     is empty backdrop. The logo spans 22–78% horizontally and 18–78% vertically,
     so the feather never touches it. A radial mask cannot do this — the logo is
     too wide to leave room for the falloff. */
  -webkit-mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 86%, rgba(0,0,0,0) 100%);
          mask-composite: intersect;
}

/* Give the <video> an explicit ratio so it reserves the right box before its
   metadata loads. Phones load the portrait encode (see the <source media>
   attribute), so the ratio has to switch with it. The still is a 16:9 frame and
   uses its own intrinsic ratio. */
.hero-video__media { aspect-ratio: 16 / 9; }

@media (max-aspect-ratio: 1 / 1) {
  .hero-video__media { aspect-ratio: 2 / 3; max-height: 46%; }
}

.hero-video__still-wrap { display: none; }

/* Soft fade into the page background so the hero dissolves into the site */
.hero-video__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251,247,241,0) 0%,
    rgba(251,247,241,.42) 26%,
    rgba(251,247,241,.80) 52%,
    rgba(251,247,241,.96) 76%,
    var(--bg) 100%
  );
}

.hero-video__content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--s-7);
}
.hero-video__title {
  /* Wider measure + slightly smaller type keeps this to two lines, which is what
     leaves clear air between the logo above and the buttons below. */
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  max-width: 27ch;
  margin-bottom: var(--s-3);
  color: var(--accent);
}
.hero-video__lead {
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 0;
}
.hero-video .btn-row { margin-top: var(--s-5); }

.hero-video__rule {
  width: 54px; height: 2px; background: var(--gold);
  margin-bottom: var(--s-5); border-radius: 2px;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  gap: .35rem;
  color: var(--ink-mute);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: var(--s-2);
  text-decoration: none;
}
.scroll-cue:hover { color: var(--accent); }
.scroll-cue svg { animation: cue-bounce 2s ease-in-out infinite; }

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* Header sits transparent over the hero, then solidifies once scrolled past.
   Solid is the DEFAULT — transparency is opt-in via the `js` class set
   synchronously in <head>. Without JS the header stays solid and readable
   rather than floating invisibly over the page content. */
.js .site-header[data-hero-header]:not(.is-solid) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Reduced motion: no video at all, static branded still instead (brief §15) */
@media (prefers-reduced-motion: reduce) {
  .hero-video__media { display: none; }
  .hero-video__still-wrap { display: contents; }
  .scroll-cue svg { animation: none; }
}

/* --------------------------------------------------------------- utils --- */
.u-center { text-align: center; }
.u-center p { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); }