/* ==========================================================================
   Golf Club Argentino — 2026
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset and base
   02  Typography helpers
   03  Buttons and links
   04  Share widget
   05  Header, nav, mobile menu
   06  Hero
   07  Stats band
   08  Section furniture
   09  Timeline and pull-quote
   10  Split, cards, prose
   11  Holes and scorecard
   12  Gallery
   13  Contact form
   14  Footer
   15  Modals
   16  Reveal and motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   00  Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Drawn from the club crest: navy field, silver band, red stripe. */
  --navy:        #16255C;
  --navy-deep:   #0C1436;
  --navy-soft:   #26386F;
  --red:         #C8102E;
  --red-dark:    #A50D26;

  --paper:       #F5F3EE;
  --paper-2:     #EBE7DE;
  --paper-3:     #DED9CD;
  --ink:         #131A31;
  --muted:       #5D6479;
  --muted-light: rgba(245, 243, 238, .72);
  --brass:       #B08D4E;

  --line:        rgba(19, 26, 49, .14);
  --line-light:  rgba(245, 243, 238, .22);

  --shell:       1200px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .45s;

  --radius:    3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(12, 20, 54, .06), 0 4px 14px rgba(12, 20, 54, .06);
  --shadow-md: 0 2px 6px rgba(12, 20, 54, .08), 0 18px 44px rgba(12, 20, 54, .12);
  --shadow-lg: 0 10px 30px rgba(12, 20, 54, .18), 0 40px 90px rgba(12, 20, 54, .22);
}

/* --------------------------------------------------------------------------
   01  Reset and base
   -------------------------------------------------------------------------- */

/* LOAD-BEARING. .mobile-nav and .modal set an author `display`, which beats
   the browser's own [hidden] rule — without this they stay in layout as
   invisible full-screen layers and swallow every click on the page. */
[hidden] { display: none !important; }

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

html {
  scroll-behavior: smooth;
  /* Sticky header height, so an anchor never lands under it. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

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

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

button { font: inherit; color: inherit; }

::selection { background: var(--navy); color: var(--paper); }

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

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 300;
  background: var(--navy);
  color: var(--paper);
  padding: .7rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Scroll progress bar, pinned above the header. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 210;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--red), var(--brass));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   02  Typography helpers
   -------------------------------------------------------------------------- */
.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.sec-head__eyebrow {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.sec-head__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  max-width: 8rem;
}

.sec-head__title { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem); }

.sec-head__lead {
  margin-top: 1.4rem;
  font-size: 1.075em;
  color: var(--muted);
  max-width: 40rem;
}

.prose { max-width: 38rem; }
.prose--wide { max-width: 56rem; column-gap: 3rem; }
@media (min-width: 900px) {
  .prose--wide { columns: 2; }
  .prose--wide p { break-inside: avoid; }
}

.note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .94em;
  max-width: 54rem;
}

/* --------------------------------------------------------------------------
   03  Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  color: var(--btn-fg);
  background: var(--btn-bg);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              color .3s var(--ease),
              border-color .3s var(--ease);
}

/* The hover fill grows from the bottom rather than simply swapping colour. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .48s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: rgba(245, 243, 238, .5);
  backdrop-filter: blur(3px);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: transparent; }

.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--navy);
}

.btn--wide { min-width: 13rem; }

.btn__spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin .7s linear infinite;
}
.btn.is-busy { pointer-events: none; opacity: .8; }
.btn.is-busy .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Text links get an underline that draws in from the left. */
.prose a, .card__text a, .note a, .form__legal a, .site-footer a:not(.share__btn) {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out), color .25s var(--ease);
}
.prose a:hover, .card__text a:hover, .note a:hover,
.form__legal a:hover, .site-footer a:not(.share__btn):hover {
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   04  Share widget
   -------------------------------------------------------------------------- */
.share { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.share--stack { flex-direction: column; align-items: flex-start; gap: .75rem; }

.share__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .65;
}

.share__list { display: flex; gap: .5rem; flex-wrap: wrap; }

.share__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .62;
  cursor: pointer;
  transition: opacity .3s var(--ease),
              transform .4s var(--ease-out),
              background-color .3s var(--ease),
              color .3s var(--ease),
              border-color .3s var(--ease);
}
.share__btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

.share__btn:hover, .share__btn:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  border-color: transparent;
  color: #fff;
}
.share__btn--whatsapp:hover, .share__btn--whatsapp:focus-visible { background: #25D366; }
.share__btn--facebook:hover, .share__btn--facebook:focus-visible { background: #1877F2; }
.share__btn--x:hover,        .share__btn--x:focus-visible        { background: #000; }
.share__btn--linkedin:hover, .share__btn--linkedin:focus-visible { background: #0A66C2; }
.share__btn--email:hover,    .share__btn--email:focus-visible    { background: var(--navy); }
.share__btn--copy:hover,     .share__btn--copy:focus-visible     { background: var(--brass); }
.share__btn--native:hover,   .share__btn--native:focus-visible   { background: var(--red); }

.share__toast {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--ink);
  color: var(--paper);
  font-size: .7rem;
  letter-spacing: .06em;
  padding: .25rem .55rem;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .25s var(--ease), transform .25s var(--ease-out);
}
.share__btn.is-copied .share__toast { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   05  Header, nav, mobile menu
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 54, .55), rgba(12, 20, 54, 0));
  opacity: 1;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck {
  background: rgba(245, 243, 238, .92);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}
.site-header.is-stuck::after { opacity: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 88px;
  position: relative;
  z-index: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--paper);
  transition: color .5s var(--ease);
}
.site-header.is-stuck .brand { color: var(--ink); }

.brand__crest {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 46px;
  transition: transform .5s var(--ease-out), height .5s var(--ease), width .5s var(--ease);
}
.brand__crest img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .5s var(--ease);
}
.brand__crest-dark { opacity: 0; }
.site-header.is-stuck .brand__crest-light { opacity: 0; }
.site-header.is-stuck .brand__crest-dark  { opacity: 1; }

.brand:hover .brand__crest { transform: rotate(-4deg) scale(1.06); }
.site-header.is-stuck .brand__crest { width: 29px; height: 40px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.brand__sub {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .68;
  margin-top: .2rem;
}

.nav__list { display: flex; gap: clamp(.5rem, 1.6vw, 1.6rem); }

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .25rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  opacity: .82;
  transition: opacity .3s var(--ease), color .5s var(--ease);
}
.site-header.is-stuck .nav__link { color: var(--ink); opacity: .7; }

.nav__link::after {
  content: "";
  position: absolute;
  left: .25rem; right: .25rem; bottom: .28rem;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .42s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { opacity: 1; }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { opacity: 1; }

.burger {
  display: none;
  padding: .6rem;
  margin-right: -.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
  transition: color .5s var(--ease);
}
.site-header.is-stuck .burger { color: var(--ink); }

.burger__box { display: block; width: 26px; }
.burger__box i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), width .4s var(--ease-out);
}
.burger__box i + i { margin-top: 6px; }
.burger__box i:nth-child(2) { width: 70%; margin-left: auto; }
.burger:hover .burger__box i:nth-child(2) { width: 100%; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: block; }
  .brand__sub { display: none; }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(12, 20, 54, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.scrim.is-open { opacity: 1; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 250;
  width: min(88vw, 24rem);
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--paper);
  padding: 1.6rem var(--gutter) 2rem;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-light);
}
.mobile-nav__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.mobile-nav__close {
  background: none;
  border: 0;
  padding: .5rem;
  margin-right: -.5rem;
  cursor: pointer;
  color: inherit;
  transition: transform .4s var(--ease-out);
}
.mobile-nav__close:hover { transform: rotate(90deg); }
.mobile-nav__close svg { width: 22px; height: 22px; }

.mobile-nav__list { flex: 1 1 auto; padding: 1.6rem 0; }
.mobile-nav__list li {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms);
}
.mobile-nav.is-open .mobile-nav__list li { opacity: 1; transform: none; }

.mobile-nav__list a {
  display: block;
  padding: .6rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: color .3s var(--ease);
}
.mobile-nav__list a span {
  display: inline-block;
  transition: transform .45s var(--ease-out);
}
.mobile-nav__list a:hover span,
.mobile-nav__list a:focus-visible span { transform: translateX(10px); }
.mobile-nav__list a:hover { color: #fff; }

.mobile-nav__foot { padding-top: 1.4rem; border-top: 1px solid var(--line-light); }

/* --------------------------------------------------------------------------
   06  Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 8rem 0 5.5rem;
  overflow: hidden;
  color: var(--paper);
  background: var(--navy-deep);
}

.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
/* Slow drift on the visible slide only, so the still frames don't accumulate. */
.hero__slide.is-active img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 20, 54, .5) 0%, rgba(12, 20, 54, .1) 34%, rgba(12, 20, 54, .82) 100%),
    radial-gradient(120% 80% at 20% 100%, rgba(12, 20, 54, .55), transparent 60%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 62rem; }

.hero__crest {
  height: clamp(76px, 10vw, 116px);
  width: auto;
  margin-bottom: 1.6rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4));
}

.hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, .8);
  margin-bottom: 1rem;
}

.hero__title {
  font-size: clamp(2.6rem, 1.2rem + 6.2vw, 6rem);
  font-weight: 300;
  letter-spacing: -.03em;
  margin-bottom: 1.4rem;
}

.hero__lead {
  max-width: 40rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: rgba(245, 243, 238, .86);
  margin-bottom: 2.2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.4rem;
}

.hero .share { color: var(--paper); }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 54px;
  overflow: hidden;
}
.hero__cue-line {
  display: block;
  width: 1px; height: 100%;
  background: rgba(245, 243, 238, .35);
  position: relative;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--paper);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

@media (max-width: 640px) {
  .hero { padding-bottom: 4.5rem; }
  .hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   07  Stats band
   -------------------------------------------------------------------------- */
.stats {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}

/* Dividers are borders on the cells, not a background behind a 1px gap —
   .stats__grid is also the .shell, so a background would show in its
   horizontal padding as two stray bars at the edges of the band. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 1rem clamp(.75rem, 2vw, 1.75rem);
  text-align: center;
  border-left: 1px solid var(--line-light);
}
.stat:first-child { border-left: 0; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: .7rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
}
.stat__note {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--muted-light);
}

@media (max-width: 720px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .stat:nth-child(odd) { border-left: 0; }
}

/* --------------------------------------------------------------------------
   08  Section furniture
   -------------------------------------------------------------------------- */
.sec {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
  overflow: hidden;
}
.sec--paper { background: var(--paper); }
.sec--tint  { background: var(--paper-2); }

.sec--navy {
  background: var(--navy-deep);
  color: var(--paper);
}
.sec--navy .sec-head__eyebrow { color: var(--brass); }
.sec--navy .sec-head__eyebrow::after { background: var(--line-light); }
.sec--navy .sec-head__lead,
.sec--navy .prose { color: rgba(245, 243, 238, .84); }
.sec--navy .note { border-top-color: var(--line-light); color: var(--muted-light); }

/* A photograph behind a navy section, dimmed almost to texture. */
.sec__backdrop {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  opacity: .2;
}
.sec__backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35);
}
.sec--navy > .shell { position: relative; z-index: 1; }
.sec--navy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--navy-deep) 0%, rgba(12, 20, 54, .55) 45%, var(--navy-deep) 100%);
  z-index: 0;
  pointer-events: none;
}

.sec__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   09  Timeline and pull-quote
   -------------------------------------------------------------------------- */
.banner {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.banner__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-sm);
}
.banner__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.banner:hover .banner__frame img { transform: scale(1.03); }
.banner figcaption {
  margin-top: .8rem;
  font-size: .82rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .banner__frame { aspect-ratio: 3 / 2; }
}

.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--line);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
}
/* The marker sits on the rule, not beside it. */
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.5rem, 4vw, 3rem) * -1 - 4px);
  top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--red);
  transition: background-color .4s var(--ease), transform .4s var(--ease-out);
}
.sec--tint .timeline__item::before { background: var(--paper-2); }
.timeline__item:hover::before { background: var(--red); transform: scale(1.4); }

.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem);
  color: var(--red);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.timeline__title { font-size: 1.2rem; margin-bottom: .5rem; }
.timeline__body p { color: var(--muted); }

@media (max-width: 640px) {
  .timeline__item { grid-template-columns: 1fr; gap: .35rem; }
}

.pullquote {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--line);
  max-width: 46rem;
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.pullquote blockquote::before { content: "\201C"; color: var(--red); }
.pullquote blockquote::after  { content: "\201D"; color: var(--red); }
.pullquote figcaption {
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10  Split, cards
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 5fr 6fr; }
}

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.split__media:hover img { transform: scale(1.04); }

.split__copy p { color: var(--muted); }
.split__copy p:first-child {
  font-size: 1.1em;
  color: var(--ink);
}

.cards {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-out),
              box-shadow .5s var(--ease-out),
              border-color .4s var(--ease);
}
.sec--tint .card { background: var(--paper); }
.card::before {
  content: "";
  position: absolute;
  left: 0; top: clamp(1.4rem, 2.5vw, 1.9rem);
  width: 2px; height: 0;
  background: var(--red);
  transition: height .5s var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card:hover::before { height: 2rem; }

.card__title { font-size: 1.12rem; margin-bottom: .55rem; }
.card__text { font-size: .94rem; color: var(--muted); margin: 0; }

.card__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--red);
  line-height: 1;
  margin-bottom: .8rem;
  letter-spacing: -.02em;
}

/* The pairs in $TRADITION_EVENTS are ordered long-with-long and
   short-with-short, so stretching to a common height per row squares the
   grid up rather than leaving one card hollow. Reordering that array
   without keeping the lengths paired brings the hollow card back. */
.cards--big .card { padding: clamp(1.8rem, 3vw, 2.5rem); }

.cards--onNavy .card {
  background: rgba(245, 243, 238, .04);
  border-color: var(--line-light);
  backdrop-filter: blur(2px);
}
.cards--onNavy .card__text { color: var(--muted-light); }
.cards--onNavy .card:hover {
  background: rgba(245, 243, 238, .08);
  border-color: var(--line-light);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   11  Holes and scorecard
   -------------------------------------------------------------------------- */
.holes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: clamp(.9rem, 2vw, 1.5rem);
}
/* auto-fill drops to a single column below ~640px, which makes eighteen
   diagrams an extremely long scroll. Two are still big enough to read. */
@media (max-width: 640px) {
  .holes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hole__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.hole__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #E9EAE0;   /* the paper tone of the scanned yardage book */
  aspect-ratio: 1 / 1.32;
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.hole__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform 1s var(--ease-out);
}
.hole__btn:hover .hole__thumb,
.hole__btn:focus-visible .hole__thumb {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.hole__btn:hover .hole__thumb img { transform: scale(1.05); }

/* Lives inside the thumb so it never rides over the meta line below. */
.hole__more {
  position: absolute;
  inset: auto 0 0 0;
  padding: .55rem;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(12, 20, 54, .88));
  transform: translateY(100%);
  transition: transform .45s var(--ease-out);
}
.hole__btn:hover .hole__more,
.hole__btn:focus-visible .hole__more { transform: translateY(0); }

.hole__meta {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-top: .7rem;
}
.hole__n {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.hole__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* Scorecard */
.card-table {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.card-table__title {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}
/* Wide content scrolls inside its own box — the page body never does. */
.card-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.card-table__note {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--muted);
}

.scorecard {
  border-collapse: collapse;
  width: 100%;
  min-width: 54rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.scorecard th, .scorecard td {
  padding: .6rem .45rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.scorecard thead th {
  background: var(--navy);
  color: var(--paper);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .06em;
  border-bottom: 0;
}
.scorecard tbody th {
  text-align: left;
  padding-left: .9rem;
  font-weight: 500;
  background: var(--paper-2);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 5.5rem;
}
.scorecard tbody tr:last-child th,
.scorecard tbody tr:last-child td { border-bottom: 0; }
.scorecard .is-total {
  background: rgba(19, 26, 49, .05);
  font-weight: 600;
}
.scorecard thead .is-total { background: var(--navy-soft); }
.scorecard__par td { font-weight: 600; }
.scorecard__si { color: var(--muted); }

.tee {
  display: inline-block;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  margin-right: .45rem;
  vertical-align: baseline;
  border: 1px solid rgba(19, 26, 49, .3);
}
.tee--blue  { background: #1D4ED8; }
.tee--white { background: #fff; }
.tee--red   { background: var(--red); }

/* --------------------------------------------------------------------------
   12  Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  grid-auto-rows: 13rem;
  /* Without `dense`, every 2x2 tile leaves a hole in the row it starts on. */
  grid-auto-flow: dense;
  gap: .5rem;
  padding-inline: clamp(.5rem, 2vw, 1rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gallery__item--wide { grid-column: span 2; grid-row: span 2; }

/* Below ~560px auto-fill resolves to a single column, and `span 2` then
   invents a second, auto-sized one — which is what made the tiles ragged.
   Pin two equal columns instead so the wide tile spans a real pair. */
@media (max-width: 560px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 8rem;
  }
  .gallery__item--wide { grid-column: span 2; grid-row: span 1; }
}

.gallery__btn {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-3);
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter .5s var(--ease);
}
.gallery__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 54, .3);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.gallery__btn:hover img,
.gallery__btn:focus-visible img { transform: scale(1.06); }
.gallery__btn:hover::after,
.gallery__btn:focus-visible::after { opacity: 1; }

.gallery__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  color: var(--paper);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
}
.gallery__zoom svg { width: 2rem; height: 2rem; }
.gallery__btn:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13  Contact form
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .contact { grid-template-columns: 5fr 7fr; }
}

.contact__lead {
  margin-top: 1.4rem;
  margin-bottom: 2rem;
  color: rgba(245, 243, 238, .84);
  max-width: 32rem;
}
.contact .share { color: var(--paper); }

.contact__form-wrap {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}

.form__row {
  display: grid;
  gap: 0 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field { margin: 0 0 1.15rem; }
.field label {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: .45rem;
}
.field label span[aria-hidden] { color: var(--red); }
.field__opt {
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 400;
  opacity: .7;
  font-size: .78rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-bottom-color: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: .8rem .9rem;
  transition: border-color .3s var(--ease),
              background-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.field input:hover, .field textarea:hover { background: var(--paper-3); }
.field input:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-bottom-color: var(--red);
  box-shadow: 0 1px 0 var(--red);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(93, 100, 121, .65); }

.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: var(--red);
  background: rgba(200, 16, 46, .06);
}
.field__error {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--red-dark);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.field--hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.6rem;
}
.form__status { margin: 0; font-size: .88rem; }
.form__status.is-ok  { color: #17683B; }
.form__status.is-bad { color: var(--red-dark); }

.form__flash {
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: .92rem;
}
.form__flash--ok  { background: rgba(23, 104, 59, .1);  color: #17683B; }
.form__flash--bad { background: rgba(200, 16, 46, .09); color: var(--red-dark); }

.form__legal {
  margin-top: 1.4rem;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The badge is hidden; .form__legal is what makes that permissible. */
.grecaptcha-badge { visibility: hidden; }

/* --------------------------------------------------------------------------
   14  Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) 0 1.75rem;
}

.site-footer__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-light);
}
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
}

.site-footer__brand img { height: 74px; width: auto; margin-bottom: 1.2rem; }
.site-footer__tag {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 300;
  max-width: 24rem;
  margin-bottom: 1.5rem;
  color: rgba(245, 243, 238, .88);
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, auto));
  gap: .4rem 2.5rem;
}
.site-footer__nav a {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, .72);
}
.site-footer__nav a:hover { color: var(--paper); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-top: 1.5rem;
  font-size: .78rem;
  color: rgba(245, 243, 238, .55);
}
.site-footer__base p { margin: 0; }

.to-top {
  position: relative;
  padding-right: 1.2rem;
}
.to-top::after {
  content: "\2191";
  position: absolute;
  right: 0;
  transition: transform .4s var(--ease-out);
}
.to-top:hover::after { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   15  Modals
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 35, .8);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 68rem);
  max-height: calc(100dvh - clamp(1.5rem, 6vw, 5rem));
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
  overflow: hidden;
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }

/* Must stay absolute. .modal__panel animates a transform, and a transformed
   ancestor becomes the containing block for position:fixed children — a fixed
   button would track the panel and then jump when the transform resolves. */
.modal__close {
  position: absolute;
  top: .6rem; right: .6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 243, 238, .9);
  color: var(--ink);
  cursor: pointer;
  transition: transform .4s var(--ease-out), background-color .3s var(--ease);
}
.modal__close:hover { transform: rotate(90deg); background: var(--red); color: #fff; }
.modal__close svg { width: 20px; height: 20px; }

/* Siblings of the panel, so they sit against the viewport rather than
   riding the panel's open transform. */
.modal__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 243, 238, .88);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 4px 18px rgba(8, 13, 35, .45);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              transform .35s var(--ease-out), opacity .4s var(--ease);
}
.modal.is-open .modal__nav { opacity: 1; }
.modal__nav--prev { left: clamp(.4rem, 2vw, 1.6rem); }
.modal__nav--next { right: clamp(.4rem, 2vw, 1.6rem); }
.modal__nav:hover { background: var(--navy); color: var(--paper); }
.modal__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.modal__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.modal__nav svg { width: 20px; height: 20px; }

.modal__body {
  display: grid;
  grid-template-columns: 1fr;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 860px) {
  .modal__body { grid-template-columns: 5fr 6fr; overflow: hidden; }
  .modal__text { overflow-y: auto; }
}

.modal__figure {
  margin: 0;
  background: #E9EAE0;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal__figure img {
  max-height: min(72dvh, 46rem);
  width: auto;
  object-fit: contain;
}

.modal__text { padding: clamp(1.5rem, 3vw, 2.5rem); }
.modal__eyebrow {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .6rem;
}
.modal__title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 300;
  margin-bottom: 1.2rem;
}

/* A grid rather than a wrapping flex row: when five figures wrap to two
   lines, a `li + li` border puts a rule to the left of the first item on
   the second line. Grid gaps over a tinted background divide both ways. */
.modal__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  margin-bottom: 1.6rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.modal__stats li {
  background: var(--paper);
  padding: .8rem .5rem;
}
.modal__stats li:first-child { padding-left: 0; }
@media (max-width: 620px) {
  .modal__stats { grid-template-columns: repeat(3, 1fr); }
  .modal__stats li:first-child { padding-left: .5rem; }
}
.modal__stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.modal__stats span {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .25rem;
}

.modal__desc p { color: var(--muted); font-size: .95rem; }
.modal__share { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* Photo lightbox */
.modal--photo .modal__panel {
  width: auto;
  max-width: min(100%, 78rem);
  background: transparent;
  box-shadow: none;
  /* The close button sits outside the image; clipping would eat it. */
  overflow: visible;
}
.photo { margin: 0; }
.photo img {
  max-height: calc(100dvh - clamp(4rem, 12vw, 9rem));
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.photo figcaption {
  margin-top: .9rem;
  text-align: center;
  color: rgba(245, 243, 238, .8);
  font-size: .85rem;
}
.modal--photo .modal__close { top: -1rem; right: -1rem; }
@media (max-width: 600px) {
  .modal--photo .modal__close { top: .4rem; right: .4rem; }
}

/* --------------------------------------------------------------------------
   16  Reveal and motion
   -------------------------------------------------------------------------- */
/* Scoped to .js, which head.php sets inline. With scripting off the rule
   never applies and every section simply renders visible — the one failure
   mode a reveal animation must never have. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__slide.is-active img { animation: none; transform: scale(1.06); }
}