:root {
  --gold: #dcac44;        /* DCAC44 */
  --gold-light: #e7bd60;  /* lighter tint of the brand gold */
  --gold-bright: #f2dca0; /* pale gold highlight */
  --cream: #efe7d6;       /* EFE7D6 */
  --white: #fefbf5;       /* FEFBF5 */
  --ink: #193122;         /* 193122 — deep brand green */
  --ink-2: #14261c;       /* darker green for alternating bands */
  --footer: #0f1c14;      /* deepest green */
  --bronze: #4d3e13;      /* 4D3E13 — deep gold-brown accent */

  /* Both roles point at Libertinus Sans — the site is set in one family. The
     two names are kept so the display/body split stays available: restoring a
     separate face for headings means editing --serif alone. */
  --serif: "Libertinus Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Libertinus Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --nav-h: 150px;   /* menu bar height — stays fixed */
  --logo-h: 150px; /* menu logo size — adjust this freely, independent of the bar */
}

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

/* Text that must reach crawlers and screen readers but not the layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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


/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}

.nav.is-stuck {
  background: rgba(16, 30, 22, .86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(220, 172, 68, .18);
}

.nav__inner {
  max-width: 1500px;
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The logo is taken out of the bar's flow (absolute) and given a reserved,
   square footprint the width of --logo-h. That way --logo-h can grow past the
   bar height without ever stretching the menu — the logo just overflows. */
.brand {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--logo-h);
  text-decoration: none;
}

.brand__logo {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: var(--logo-h);
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
}

.nav__links > a:not(.btn) {
  color: rgba(239, 231, 214, .88);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
  transition: color .25s ease;
}

.nav__links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .3s ease;
}

.nav__links > a:not(.btn):hover { color: var(--gold-light); }
.nav__links > a:not(.btn):hover::after { width: 100%; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--cream);
  margin: 5px 0;
  transition: transform .3s ease, opacity .3s ease;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  padding: 18px 40px;
  border: 1px solid var(--gold);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.btn--sm {
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: .14em;
}

.btn--solid {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #1a1408;
  font-weight: 500;
}

.btn--solid:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-light));
  box-shadow: 0 10px 34px rgba(220, 172, 68, .32);
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(0, 0, 0, .18);
  color: var(--gold-light);
}

.btn--ghost:hover {
  background: rgba(220, 172, 68, .14);
  color: var(--gold-bright);
  transform: translateY(-2px);
}


/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) 20px 130px;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/Hero_Banner.webp") center 40% / cover no-repeat;
  animation: heroZoom 26s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Darkens the sky and the green so the type stays legible over both. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 70%),
    linear-gradient(180deg, rgba(8, 10, 8, .62) 0%, rgba(8, 10, 8, .18) 30%, rgba(6, 12, 8, .5) 78%, rgba(4, 8, 6, .82) 100%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: 1080px;
  text-align: center;
}


/* ---------- Wordmark ---------- */

.wordmark {
  position: relative;
  margin: 0 auto;
  width: min(100%, 1000px);
  aspect-ratio: 1000 / 300;
}

.wordmark__arc,
.wordmark__pin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wordmark__arc {
  z-index: 1;
  fill: none;
}

.wordmark__arc path {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(220, 172, 68, .45));
}

.wordmark__pin { z-index: 3; }

.pin__flag {
  fill: var(--gold-light);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  transform-box: fill-box;
  transform-origin: left center;
}

.pin__pole {
  stroke: var(--gold-light);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.pin__base {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
}


/* ---------- The golf shot ---------- *
 * The trail, the ball and the hole all key off --shot-start so the ball
 * sits on the tip of the trail and the hole reacts the moment it lands.  */

.wordmark {
  /* --shot-start is the moment of impact: the club reaches the ball, the ball
     launches and the trail starts drawing. The swing runs from --swing-start
     for --swing-dur and is keyed so its 50% mark lands on --shot-start. */
  --swing-start: .3s;
  --swing-dur: 1.6s;
  --shot-start: 1.1s;
  --shot-flight: 1.6s;
  /* easing shared by trail + ball, otherwise they drift apart mid-flight */
  --shot-ease: cubic-bezier(.25, .55, .3, 1);
}


/* ---------- The golfer ---------- */

.golfer__shadow {
  fill: rgba(220, 172, 68, .22);
}

/* Filled silhouette — same gold as the P he dissolves into. */
.golfer__figure {
  fill: var(--gold-light);
}

.club__shaft {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
}

.club__head {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 6;
  stroke-linecap: round;
}

/* Once the ball is in the hole he drifts into the P and dissolves, leaving only
   the shot line and the flag. */
.golfer {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
  animation: golferBlend .9s ease-in calc(var(--shot-start) + var(--shot-flight) + .5s) both;
}

@keyframes golferBlend {
  0%   { opacity: 1; transform: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)) blur(0); }
  100% { opacity: 0; transform: translate(26px, -8px) scale(.94); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0)) blur(2.5px); }
}

/* Pivots, in viewBox units: hips, trail hip, shoulder, elbow, hands. Rotations
   compound down the chain (torso > arm > forearm > club), so each joint's angle
   is relative to its parent, not to the page. Every joint returns to 0deg
   (address) at 50% — that is the impact frame the ball launch is timed to. */
.golfer__torso,
.golfer__backleg,
.golfer__arm,
.golfer__forearm,
.golfer__club {
  transform-box: view-box;
}

.golfer__torso {
  transform-origin: 14px 148px;
  animation: swingTorso var(--swing-dur) linear var(--swing-start) both;
}

.golfer__backleg {
  transform-origin: 10px 146px;
  animation: swingBackLeg var(--swing-dur) linear var(--swing-start) both;
}

.golfer__arm {
  transform-origin: 30px 118px;
  animation: swingArm var(--swing-dur) linear var(--swing-start) both;
}

.golfer__forearm {
  transform-origin: 36px 138px;
  animation: swingForearm var(--swing-dur) linear var(--swing-start) both;
}

.golfer__club {
  transform-origin: 41px 158px;
  animation: swingClub var(--swing-dur) linear var(--swing-start) both;
}

/* Upper arm swings from the shoulder; the elbow folds so the hands finish beside
   the head at the top instead of the arm sticking out straight. */
@keyframes swingArm {
  0%   { transform: rotate(0deg);   animation-timing-function: ease-in-out; }
  30%  { transform: rotate(133deg); animation-timing-function: ease-in-out; }
  36%  { transform: rotate(137deg); animation-timing-function: ease-in; }
  44%  { transform: rotate(45deg); }
  50%  { transform: rotate(0deg);   animation-timing-function: ease-out; }
  68%  { transform: rotate(-60deg); animation-timing-function: ease-out; }
  100% { transform: rotate(-78deg); }
}

@keyframes swingForearm {
  0%   { transform: rotate(0deg);   animation-timing-function: ease-in-out; }
  30%  { transform: rotate(118deg); animation-timing-function: ease-in-out; }
  36%  { transform: rotate(122deg); animation-timing-function: ease-in; }
  44%  { transform: rotate(30deg); }
  50%  { transform: rotate(0deg);   animation-timing-function: ease-out; }
  68%  { transform: rotate(-20deg); animation-timing-function: ease-out; }
  100% { transform: rotate(-77deg); }
}

/* The club folds back over the shoulder at the top, then lags behind the hands
   through the downswing before releasing square at impact. */
@keyframes swingClub {
  0%   { transform: rotate(0deg);    animation-timing-function: ease-in-out; }
  30%  { transform: rotate(-122deg); animation-timing-function: ease-in-out; }
  36%  { transform: rotate(-126deg); animation-timing-function: ease-in; }
  44%  { transform: rotate(30deg); }
  50%  { transform: rotate(-4deg);   animation-timing-function: ease-out; }
  68%  { transform: rotate(-10deg);  animation-timing-function: ease-out; }
  100% { transform: rotate(-32deg); }
}

/* Bent over the ball at address, coiled at the top, then unwinding to the tall
   chest-up finish of the reference sequence. */
@keyframes swingTorso {
  0%   { transform: rotate(0deg);   animation-timing-function: ease-in-out; }
  30%  { transform: rotate(-8deg);  animation-timing-function: ease-in; }
  50%  { transform: rotate(-3deg);  animation-timing-function: ease-out; }
  68%  { transform: rotate(-20deg); animation-timing-function: ease-out; }
  100% { transform: rotate(-32deg); }
}

/* Trail knee kicks in and the heel comes up as he turns through. */
@keyframes swingBackLeg {
  0%   { transform: rotate(0deg);  animation-timing-function: ease-in-out; }
  30%  { transform: rotate(-2deg); animation-timing-function: ease-in; }
  50%  { transform: rotate(3deg);  animation-timing-function: ease-out; }
  68%  { transform: rotate(10deg); }
  100% { transform: rotate(14deg); }
}

.shot {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: shotTrail var(--shot-flight) var(--shot-ease) var(--shot-start) both;
}

@keyframes shotTrail {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.ball {
  fill: #fffaf0;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(240, 215, 154, .85));
  /* must stay identical to the .shot path in index.html */
  offset-path: path("M36 197 C 200 30, 700 16, 978 230");
  offset-rotate: 0deg;
  transform-box: fill-box;
  transform-origin: center;
  animation: ballFly var(--shot-flight) var(--shot-ease) var(--shot-start) both;
}

/* The 0% frame is also the ball's resting state: with fill-mode `both` it sits
   on the tee through the delay, waiting for the club. */
@keyframes ballFly {
  0%   { offset-distance: 0%;   opacity: 1; transform: scale(1); }
  3%   { transform: scale(1.25, .8); }
  88%  { offset-distance: 100%; opacity: 1; transform: scale(1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(.3) translateY(6px); }
}

/* Hole flinches as the ball drops in. */
.pin__base {
  animation: holeSink .5s ease-out calc(var(--shot-start) + var(--shot-flight) - .12s) both;
}

@keyframes holeSink {
  0%   { transform: scale(1); stroke: var(--gold); }
  35%  { transform: scale(1.28); stroke: var(--gold-bright); }
  100% { transform: scale(1); stroke: var(--gold); }
}

/* Flag settles, then flutters for good. */
.pin__flag {
  animation:
    flagHit .7s ease-out calc(var(--shot-start) + var(--shot-flight) - .1s) both,
    flagWave 3.4s ease-in-out calc(var(--shot-start) + var(--shot-flight) + .6s) infinite;
}

@keyframes flagHit {
  0%   { transform: none; }
  25%  { transform: rotate(-5deg) scaleX(.92); }
  55%  { transform: rotate(3deg) scaleX(1.03); }
  100% { transform: none; }
}

@keyframes flagWave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50%      { transform: skewY(-2.2deg) scaleX(.96); }
}

.wordmark__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(52px, 12vw, 170px);
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .5);
}

.wordmark__pk {
  color: var(--gold);
  font-weight: 600;
  font-style: italic;
  margin-right: .06em;
}

.wordmark__champs {
  color: var(--white);
  letter-spacing: .08em;
}


/* ---------- Hero logo ---------- */

.hero__logo {
  position: relative;
  margin: 0 auto 18px;
  /* center logo size — adjust the cap freely */
  width: min(88%, 900px);
}

.hero__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .55));
}

/* A soft warm spotlight so the dark-green half of the mark keeps its contrast
   against the darkened hero. */
.hero__logo::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(239, 231, 214, .18), transparent 66%);
  filter: blur(22px);
}


/* ---------- Hero copy ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: -.4em 0 clamp(14px, 1.7vw, 22px);
  color: var(--gold-light);
  font-family: var(--sans);
  font-size: clamp(12px, 1.35vw, 19px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.eyebrow__rule {
  width: clamp(24px, 5vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow__rule:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ---------- Presenting partner ---------- */

.hero__presented {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1vw, 15px);
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.hero__presented-label {
  color: rgba(239, 231, 214, .88);
  font-family: var(--sans);
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 300;
  letter-spacing: .2em;
}

/* The supplied PNG is a square canvas with the wordmark centred inside a wide
   band of transparent padding, so the box is cropped down to the mark itself.
   --ncia-h is the height of the visible NCIA lettering. */
.hero__presented-logo {
  --ncia-h: clamp(14px, 1.5vw, 21px);
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(var(--ncia-h) * 3.42);
  height: var(--ncia-h);
}

.hero__presented-logo img {
  position: absolute;
  top: calc(var(--ncia-h) * -1.233);
  left: calc(var(--ncia-h) * -0.086);
  width: auto;
  height: calc(var(--ncia-h) * 3.584);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

.hero__pillars {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 50px);
  line-height: 1.32;
  letter-spacing: .1em;
  color: var(--white);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .55);
}

.hero__divider {
  display: block;
  width: 120px;
  height: 2px;
  margin: 36px auto 30px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero__lede {
  margin: 0 auto 44px;
  max-width: 720px;
  color: rgba(239, 231, 214, .9);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .02em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}


/* ---------- Scroll cue ---------- */

.scroll {
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: rgba(239, 231, 214, .78);
  animation: floatY 2.6s ease-in-out infinite;
}

.scroll__ring {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(226, 193, 118, .55);
  border-radius: 999px;
}

.scroll__ring svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll__label {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.scroll:hover .scroll__ring {
  border-color: var(--gold);
  background: rgba(220, 172, 68, .12);
}

@keyframes floatY {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}


/* ---------- Entrance animation ---------- */

.hero__logo,
.eyebrow,
.hero__presented,
.hero__pillars,
.hero__divider,
.hero__lede,
.hero__actions {
  animation: riseIn 1.1s cubic-bezier(.2, .7, .25, 1) both;
}

.eyebrow          { animation-delay: .18s; }
.hero__presented  { animation-delay: .24s; }
.hero__pillars    { animation-delay: .3s; }
.hero__divider    { animation-delay: .4s; }
.hero__lede       { animation-delay: .5s; }
.hero__actions    { animation-delay: .62s; }

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


/* ---------- Content bands ---------- */

.band {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
}

.band--alt {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(220, 172, 68, .07), transparent 70%),
    var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(77, 62, 19, .5), inset 0 -1px 0 rgba(77, 62, 19, .5);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}


/* ---------- Section headings ---------- */

.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  color: var(--gold-light);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.kicker--center { justify-content: center; }

.kicker__rule {
  width: clamp(28px, 4vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.kicker--center .kicker__rule:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.18;
  letter-spacing: .02em;
  color: var(--white);
}

.section-sub {
  margin: 20px auto 0;
  max-width: 620px;
  color: rgba(239, 231, 214, .72);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
}

.section-head:not(.section-head--center) .section-sub { margin-left: 0; }


/* ---------- About / Founder ---------- */

.about {
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

.founder {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
  align-items: stretch;
}

/* Left — full-bleed portrait panel with a gold arc on its right edge */
.founder__portrait {
  position: relative;
  min-height: clamp(480px, 46vw, 620px);
}

/* shared D-shape: straight left edge, convex right edge */
.founder__arc,
.founder__frame {
  position: absolute;
  inset: 0;
  border-radius: 0 clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px) 0 / 0 50% 50% 0;
}

/* the gold rim, sitting just behind and shifted right so only the curve shows */
.founder__arc {
  background: linear-gradient(180deg, rgba(220, 172, 68, .35), var(--gold) 34%, var(--gold-light));
  transform: translateX(6px);
  box-shadow: 0 24px 60px rgba(20, 12, 8, .22);
}

.founder__frame {
  overflow: hidden;
  background:
    url("../img/Slide 1/pk.webp") no-repeat 32% bottom / auto 102%,
    url("../img/Slide 1/Background.webp") no-repeat 60% center / cover;
  background-color: #140d08;
}

.founder__quote {
  position: absolute;
  right: clamp(24px, 4vw, 54px);
  bottom: clamp(60px, 12%, 110px);
  z-index: 2;
  max-width: 300px;
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 23px);
  line-height: 1.4;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}

.founder__quote::before {
  content: "\201C";
  display: block;
  margin: 0 0 -.28em -.06em;
  font-size: 2.6em;
  line-height: .3;
  color: var(--gold-light);
}

.founder__quote::after {
  content: "\201D";
  display: inline-block;
  margin-left: .12em;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -.35em;
  color: var(--gold-light);
}

/* Right — copy */
.founder__body {
  position: relative;
  align-self: center;
  justify-self: center;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 60px);
}

/* keep the prose at a comfortable measure; the card row spans full width */
.founder .kicker,
.founder__title,
.founder__copy,
.founder__together,
.founder__sign { max-width: 620px; }

.founder__watermark {
  position: absolute;
  top: 30%;
  right: clamp(-350px, -14vw, -20px);
  transform: translateY(-48%);
  width: clamp(760px, 44%, 400px);
  height: auto;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}

.founder__body > *:not(.founder__watermark) { position: relative; z-index: 1; }

.founder .kicker { color: #b98d2f; }

.founder__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--ink);
}

.founder__copy p {
  margin: 0 0 18px;
  color: rgba(25, 49, 34, .82);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.72;
}

.founder__together {
  margin: 22px 0 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--ink);
}

.founder__sign { margin-bottom: clamp(32px, 4vw, 44px); }

.founder__name {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: .04em;
  color: var(--ink);
}

.founder__role {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #b98d2f;
}

/* Value cards */
.values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(20px, 2vw, 28px) clamp(14px, 1.6vw, 22px);
  background: rgba(220, 172, 68, .16);
  border: 1px solid rgba(220, 172, 68, .26);
  border-radius: 6px;
}

.value__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  object-position: center bottom;
  margin: 0 auto 16px;
}

.value h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.value p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  color: rgba(25, 49, 34, .66);
}


/* ---------- Programs ---------- */

.programs {
  background: var(--cream);
  color: var(--ink);
  padding-bottom: 0;
  overflow: hidden;
}

/* header reads dark on the cream background */
.programs .kicker { color: #b98d2f; }

.programs .section-title {
  color: var(--ink);
  font-weight: 600;
}

.programs .section-sub { color: rgba(25, 49, 34, .72); }

.pcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(52px, 5vw, 78px) 0 clamp(48px, 5vw, 72px);
}

.pcard {
  position: relative;
  margin-top: 30px;
  padding: 12px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, #c8981f 100%);
  border: 1px solid rgba(120, 84, 10, .35);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(120, 84, 10, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}

.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(120, 84, 10, .3);
}

/* photo — rounded via the image itself so the badge can spill out above */
.pcard__media {
  aspect-ratio: 3 / 4;
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.pcard__badge {
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--gold);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

.pcard__badge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.pcard__body {
  padding: 16px 14px 14px;
  text-align: center;
}

.pcard__body h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fffdf7;
  text-shadow: 0 1px 3px rgba(90, 60, 6, .35);
}

.pcard__body p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 253, 247, .92);
  text-shadow: 0 1px 2px rgba(90, 60, 6, .25);
}

/* Foot band — tagline on cream up top, gold line + green at the bottom */
.programs__foot {
  position: relative;
  margin-top: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vw, 52px) 20px clamp(96px, 12vw, 150px);
  background: var(--cream);
}

.programs__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(72px, 9vw, 118px);
}

.programs__wave-fill { fill: var(--ink); }

.programs__wave-line {
  stroke: var(--gold);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.programs__foot-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);
  max-width: 920px;
  margin: 0 auto;
}

.programs__tag {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.32;
  color: var(--ink);
}

.programs__tag span { color: #b98d2f; }

.laurel {
  flex: 0 0 auto;
  width: clamp(46px, 6vw, 74px);
  height: auto;
}

.laurel--flip { transform: scaleX(-1); }


/* ---------- Impact journey ---------- */

.impact {
  position: relative;
  background: var(--ink);
}

.impact__journey {
  padding: clamp(64px, 8vw, 110px) 0 clamp(130px, 17vw, 510px);
}

.impact .section-head { margin-bottom: clamp(44px, 5vw, 70px); }

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1.2vw, 18px);
}

.journey__step {
  position: relative;
  text-align: center;
  padding: 0 clamp(4px, 0.8vw, 12px);
}

/* connector line between pins */
.journey__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(50% + 34px);
  width: calc(100% - 52px);
  height: 2px;
  background: rgba(220, 172, 68, .45);
}

/* arrowhead at the far end of the connector */
.journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(150% - 22px);
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(220, 172, 68, .55);
  border-right: 2px solid rgba(220, 172, 68, .55);
  transform: translateY(-50%) rotate(45deg);
}

.journey__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 30px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(220, 172, 68, .07);
}

.journey__pin::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #17291d;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

.journey__pin img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.journey__step h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.journey__step p {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(239, 231, 214, .6);
}


/* ---------- Inaugural invitational ---------- */

.invite {
  position: relative;
  padding-bottom: clamp(44px, 6vw, 84px);
  background:
    linear-gradient(rgba(238, 231, 216, .5), rgba(238, 231, 216, .66)),
    url("../img/Slide 4/golfcourse.webp") center / cover no-repeat;
}

.invite__card {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: clamp(-190px, -15vw, -100px) auto 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 44px 90px rgba(10, 20, 14, .42);
}

/* Top of the floating cream card */
.invite__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(26px, 3.5vw, 44px) clamp(20px, 4vw, 40px) 0;
  background: var(--cream);
}

.invite__crest-logo {
  flex: 0 0 auto;
  width: clamp(56px, 7vw, 78px);
  height: clamp(56px, 7vw, 78px);
  border-radius: 50%;
  overflow: hidden;
}

.invite__crest-logo img {
  width: 128%;
  height: 128%;
  object-fit: cover;
  object-position: center 22%;
}

.invite__crest-kicker {
  margin: 0;
  color: #b98d2f;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.invite__crest-title {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}

.invite__inner {
  padding: clamp(32px, 4vw, 56px) clamp(22px, 4vw, 60px) clamp(34px, 4vw, 52px);
  background: var(--cream);
  color: var(--ink);
  text-align: center;
}

.invite .kicker { justify-content: center; color: #b98d2f; }

.invite__title {
  margin: 16px 0 20px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: .01em;
}

.invite__title span { display: block; }
.invite__title-green { color: var(--ink); }
.invite__title-gold { color: var(--gold); }

.invite__lede {
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(25, 49, 34, .74);
}

.invite__countdown-label { margin-top: 0; }

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  margin: 18px 0 clamp(30px, 4vw, 44px);
}

.countdown__unit { min-width: clamp(56px, 8vw, 92px); }

.countdown__num {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1;
  color: var(--ink);
}

.countdown__label {
  display: block;
  margin-top: 8px;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b98d2f;
}

.countdown__sep {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1;
  color: rgba(184, 141, 47, .5);
}

.invite__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(30px, 4vw, 46px);
}

.ibtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 128px;
  padding: 16px 20px;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.ibtn img { width: 30px; height: 30px; object-fit: contain; }

.ibtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(120, 84, 10, .2);
}

.ibtn--solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-light);
}

.ibtn--solid:hover { box-shadow: 0 14px 30px rgba(10, 20, 14, .3); }

.invite__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  max-width: 920px;
  margin: clamp(26px, 3.5vw, 44px) auto 0;
  padding: clamp(16px, 2.2vw, 24px) clamp(10px, 1.6vw, 22px);
  border-top: 1.5px solid rgba(184, 141, 47, .75);
  border-bottom: 1.5px solid rgba(184, 141, 47, .75);
}

.fact {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.fact img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }

.fact strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.fact span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(25, 49, 34, .58);
}


/* ---------- Scholar stories ---------- */

.story-band {
  background: var(--cream);
  color: var(--ink);
  padding-bottom: 0;
  overflow: hidden;
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.story__body { position: relative; }

.story-band .kicker { color: #b98d2f; }

.story__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink);
}

.story__lede {
  max-width: 430px;
  margin: 0;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.72;
  color: rgba(25, 49, 34, .78);
}

/* Carousel stage — slides stack and cross-fade */
.story__stage {
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
  min-height: clamp(215px, 25vw, 275px);
}

/* vertical progress bar: the active slide's segment turns dark green */
.story__rule {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 3px;
  height: clamp(85px, 10vw, 122px);
}

.story__rule-seg {
  flex: 1;
  background: var(--gold);
  transition: background .45s ease;
}

.story__rule-seg.is-active { background: var(--ink); }

.story__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
}

.story__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.story__watermark {
  position: absolute;
  top: 0;
  left: clamp(38px, 6vw, 82px);
  width: clamp(120px, 17vw, 190px);
  height: auto;
  opacity: .2;
  pointer-events: none;
  z-index: 0;
}

.story__item-head,
.story__desc { position: relative; z-index: 1; }

.story__item-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 12px;
}

.story__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  color: var(--gold);
}

.story__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}

.story__desc {
  max-width: 340px;
  margin: 0 0 0 clamp(38px, 4vw, 56px);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.65;
  color: rgba(25, 49, 34, .78);
}

.story__media {
  position: relative;
  aspect-ratio: 4 / 3.5;
  max-height: 520px;
}

.story__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(90, 70, 20, .22);
  opacity: 0;
  transition: opacity .7s ease;
}

.story__photo.is-active { opacity: 1; }

/* Gold announcement band */
.story-cta {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

.story-cta__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  padding-top: clamp(20px, 2.6vw, 30px);
  padding-bottom: clamp(20px, 2.6vw, 30px);
}

.story-cta__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

.story-cta__item img {
  width: clamp(32px, 3.6vw, 46px);
  height: clamp(32px, 3.6vw, 46px);
  object-fit: contain;
  flex: 0 0 auto;
}

.story-cta__item p { margin: 0; }

.story-cta__item strong {
  display: block;
  font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 700;
  letter-spacing: .01em;
  color: #23361f;
}

.story-cta__item span {
  display: block;
  margin-top: 3px;
  font-size: clamp(11px, 1.05vw, 13.5px);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .92);
}

.story-cta__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .55);
}

.story-cta__go {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: clamp(38px, 4vw, 48px);
  height: clamp(38px, 4vw, 48px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(90, 70, 20, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* gold chevron (next.png is white, so it would vanish on the white circle) */
.story-cta__go::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 46%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.story-cta__go:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(90, 70, 20, .32);
}


/* ---------- Partners / Impact by the numbers ---------- */

.impact-stats {
  position: relative;
  overflow: hidden;
  background:
    url("../img/Slide 6/backdrop.webp") no-repeat center top / cover,
    var(--cream);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(77, 62, 19, .18), inset 0 -1px 0 rgba(77, 62, 19, .18);
}

.stats__crest {
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin: 0 auto clamp(16px, 2vw, 24px);
}

.impact-stats .kicker { color: #b98d2f; }

.stats__title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.05;
}

.stats__title-green,
.stats__title-gold { display: block; }

.stats__title-green { color: var(--ink); }

.stats__title-gold {
  background: linear-gradient(180deg, var(--gold-light), #bf9532);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.impact-stats .section-sub { color: rgba(25, 49, 34, .68); }

/* the stat panel */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  padding: clamp(28px, 3vw, 44px) clamp(8px, 2vw, 24px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 251, 245, .85), rgba(231, 217, 184, .55));
  border: 1px solid rgba(220, 172, 68, .35);
  box-shadow: 0 26px 60px rgba(77, 62, 19, .12);
}

.stat {
  position: relative;
  padding: 0 clamp(14px, 1.6vw, 26px);
  text-align: center;
}

/* vertical dividers between stats */
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(77, 62, 19, .28), transparent);
}

.stat__icon {
  display: inline-flex;
  margin-bottom: 14px;
}

.stat__icon img {
  width: clamp(38px, 4vw, 52px);
  height: auto;
}

.stat__num {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
}

.stat__label {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a5f1c;
}

.stat__desc {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: rgba(25, 49, 34, .66);
}

.stats__tag {
  margin: clamp(34px, 4vw, 52px) 0 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  color: rgba(25, 49, 34, .8);
}

.stats__tag strong {
  font-weight: 700;
  color: var(--ink);
}


/* ---------- Founding partners wall ---------- */

/* One composite backdrop: cream + crest on top, fairway below. Drawn at full
   width from the top, with --ink (which the artwork's bottom edge matches)
   carrying on underneath if the section runs taller than the image. */
.founders {
  position: relative;
  background:
    url("../img/Slide 7/golfcourse.webp") no-repeat center top / 100% auto,
    var(--ink);
}

/* Cream part of the artwork is its top 44%, so this block is sized to the same
   ratio — that puts the fairway's tree line exactly at the wall's top edge. */
.founders__intro {
  position: relative;
  display: grid;
  align-items: center;
  aspect-ratio: 1440 / 379;
  padding: clamp(30px, 4vw, 56px) 0;
}

.founders__intro-inner {
  display: grid;
  justify-items: end;
  width: 100%; /* .container's auto margins would otherwise shrink-wrap it here */
}

/* Crest is baked into the backdrop on desktop; this copy is for narrow
   screens, where the artwork is split between the two blocks instead. */
.founders__crest {
  display: none;
  width: clamp(180px, 42vw, 260px);
  aspect-ratio: 1 / .74;
  overflow: hidden;
  margin: 0 auto;
  opacity: .32;
  mix-blend-mode: multiply;
  filter: sepia(.95) saturate(1.7) hue-rotate(-8deg) brightness(1.34);
}

.founders__crest img {
  display: block;
  width: 100%;
  height: auto;
}

.founders__copy {
  width: min(100%, 620px);
  text-align: right;
}

.founders__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.founders__lede {
  margin: clamp(16px, 2vw, 26px) 0 0 auto;
  max-width: 520px;
  color: rgba(25, 49, 34, .78);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
}

.founders__thanks {
  margin: clamp(16px, 2vw, 26px) 0 0 auto;
  max-width: 520px;
  color: var(--ink);
  font-size: clamp(12px, 1vw, 14.5px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

/* The plaques hang over the fairway half of the backdrop */
.founders__wall {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px) 0 clamp(38px, 4.6vw, 62px);
}

.founders__wall > .container {
  position: relative;
  z-index: 1;
}

.wall {
  display: grid;
  gap: clamp(9px, 1vw, 14px);
}

.wall__row {
  display: grid;
  grid-template-columns: clamp(120px, 15vw, 190px) minmax(0, 1fr);
  gap: clamp(9px, 1vw, 14px);
  min-height: clamp(58px, 6.4vw, 86px);
}

.wall__slots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(9px, 1vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Gold tier plate with riveted corners */
.tier {
  display: grid;
  place-content: center;
  margin: 0;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--ink);
  font-size: clamp(9.5px, .95vw, 12.5px);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  background-image:
    radial-gradient(circle at 9px 9px, rgba(77, 62, 19, .6) 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(77, 62, 19, .6) 2px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(77, 62, 19, .6) 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(77, 62, 19, .6) 2px, transparent 2.6px),
    linear-gradient(155deg, var(--gold-light), #c69a30);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.plaque {
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .93), rgba(220, 227, 220, .84));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .35s ease, box-shadow .35s ease;
}

.plaque:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.plaque img {
  max-width: 80%;
  max-height: 76%;
  object-fit: contain;
}


/* ---------- A day to play ---------- */

/* The trophy artwork is the section itself: it sits left, the panels ride the
   open fairway on its right. Drawn at full width from the bottom so the trophy
   is never cropped — the artwork's top edge is exactly --ink, so the colour
   underneath carries the sky up behind the headline seamlessly. */
.daytoplay {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 6.5vw, 88px) 0 clamp(38px, 4.6vw, 62px);
  background:
    url("../img/Slide 8/Trophy.webp") no-repeat center bottom / 100% auto,
    var(--ink);
}

/* Darkens the right two-thirds so the panels stay legible over the fairway,
   and the top so the headline reads against the sky. */
.daytoplay__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(15, 28, 20, .1) 0%,
      rgba(15, 28, 20, .28) 30%,
      rgba(15, 28, 20, .62) 56%,
      rgba(15, 28, 20, .72) 100%),
    linear-gradient(180deg, rgba(15, 28, 20, .74), rgba(15, 28, 20, .1) 40%);
}

/* Decorative silhouette tucked into the bottom-right corner */
.daytoplay__golfer {
  position: absolute;
  right: clamp(-30px, -1vw, 0px);
  bottom: 0;
  z-index: -1;
  width: clamp(140px, 17vw, 250px);
  opacity: .13;
  pointer-events: none;
}

.daytoplay__inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 3.4vw, 46px);
}

.daytoplay__head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.daytoplay__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.daytoplay__title span { display: block; }
.daytoplay__title-gold { color: var(--gold); }
.daytoplay__title-white { color: var(--white); }

.daytoplay__lede {
  margin: clamp(14px, 1.8vw, 22px) auto 0;
  max-width: 560px;
  color: rgba(239, 231, 214, .84);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.65;
}

/* Panels sit right of the trophy */
.daytoplay__panels {
  display: grid;
  gap: clamp(30px, 3.4vw, 46px);
  width: min(100%, 64%);
  margin-left: auto;
}

/* Bordered plate with its title on a gold pill straddling the top edge */
.panel {
  position: relative;
  padding: clamp(26px, 2.8vw, 38px) clamp(12px, 1.6vw, 24px) clamp(18px, 2.2vw, 28px);
  border: 1.5px solid rgba(220, 172, 68, .55);
  border-radius: 16px;
  background: rgba(15, 28, 20, .34);
}

.panel__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 8px clamp(18px, 2.4vw, 34px);
  border-radius: 999px;
  color: var(--ink);
  font-size: clamp(10px, .95vw, 12.5px);
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(155deg, var(--gold-light), #c69a30);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.panel__grid {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel__grid--5 { grid-template-columns: repeat(5, 1fr); }
.panel__grid--4 { grid-template-columns: repeat(4, 1fr); }

.panel__grid > li {
  padding: 0 clamp(8px, 1vw, 16px);
  text-align: center;
}

.panel__grid > li + li { border-left: 1px solid rgba(220, 172, 68, .26); }

.expect__icon {
  width: clamp(30px, 3.2vw, 44px);
  height: clamp(30px, 3.2vw, 44px);
  margin-inline: auto;
  object-fit: contain;
}

.expect h3 {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  color: var(--white);
  font-size: clamp(9px, .85vw, 11.5px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Hairline between the label and its description */
.expect p {
  margin: 0;
  padding-top: clamp(8px, 1vw, 12px);
  color: rgba(239, 231, 214, .74);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(11px, 1vw, 13.5px);
  font-weight: 400;
  line-height: 1.45;
}

.expect p::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto clamp(8px, 1vw, 12px);
  background: rgba(220, 172, 68, .45);
}

.edetail {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.edetail__icon {
  width: clamp(32px, 3.6vw, 48px);
  height: clamp(32px, 3.6vw, 48px);
  margin-bottom: clamp(8px, 1.2vw, 14px);
  object-fit: contain;
}

.edetail strong {
  color: var(--gold-light);
  font-size: clamp(9.5px, .9vw, 12px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.edetail span {
  color: rgba(239, 231, 214, .7);
  font-size: clamp(8.5px, .8vw, 10.5px);
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.daytoplay__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(8px, 1.4vw, 20px);
}

.daytoplay__lockup { flex: 0 0 auto; }

.daytoplay__wordmark {
  display: block;
  width: clamp(180px, 24vw, 320px);
  height: auto;
}

/* The wordmark art stops at "PKCHAMPS" — the tagline is set alongside it */
.daytoplay__tagline {
  margin: clamp(4px, .8vw, 10px) 0 0;
  color: var(--gold);
  font-size: clamp(9px, .9vw, 12px);
  font-weight: 400;
  letter-spacing: .3em;
  text-align: center;
  text-transform: uppercase;
}

/* Solid gold banner — the section's closing note */
.drive {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  flex: 0 1 auto;
  padding: clamp(12px, 1.4vw, 18px) clamp(20px, 2.6vw, 38px);
  border-radius: 10px;
  color: var(--ink);
  background: linear-gradient(155deg, var(--gold-light), #c69a30);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.drive img {
  flex: 0 0 auto;
  width: clamp(30px, 3.2vw, 44px);
  height: clamp(30px, 3.2vw, 44px);
  object-fit: contain;
}

.drive__text { margin: 0; }

.drive strong {
  display: block;
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drive span {
  display: block;
  margin-top: 3px;
  color: rgba(25, 49, 34, .82);
  font-size: clamp(9.5px, .95vw, 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ---------- Join us ---------- */

/* Three stacked full-bleed bands — turf, cream, gold — with the founder's
   cut-out standing across all of them on the right. Everything else is held
   left of --joinus-col so it never runs under him. */
.joinus {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--gold);
  --joinus-col: 62%;
  /* Aligns a full-bleed block's content with .container's left text edge */
  --joinus-pad: max(clamp(20px, 4vw, 56px), calc((100% - 1200px) / 2 + clamp(20px, 4vw, 56px)));
}

/* Square artwork with the figure inset ~23%/20% left and right, so a negative
   offset here trims the transparent margin rather than the man. */
.joinus__portrait {
  position: absolute;
  right: clamp(-130px, -7vw, -30px);
  bottom: 0;
  z-index: 1;
  width: auto;
  height: 100%;
  pointer-events: none;
}

/* Dark turf band. The artwork is a wide 1440x128 strip; cover is the only fit
   that avoids either a tiling seam every 128px or vertically smeared blades,
   and the scrim over it both restores the depth lost to the upscale and keeps
   the headline clean. */
.joinus__top {
  position: relative;
  padding: clamp(38px, 5vw, 70px) 0 clamp(34px, 4.4vw, 60px);
  background:
    linear-gradient(105deg, rgba(15, 28, 20, .72), rgba(15, 28, 20, .46) 62%, rgba(15, 28, 20, .6)),
    url("../img/Slide 9/golfgrass.webp") no-repeat center / cover,
    var(--footer);
}

.joinus__title { margin: 0; }

.joinus__title span { display: block; }

.joinus__title-main {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: .98;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.joinus__title-sub {
  margin-top: clamp(2px, .6vw, 8px);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.joinus__lede {
  max-width: min(100%, 560px);
  margin: clamp(16px, 2.2vw, 28px) 0 0;
  color: rgba(239, 231, 214, .9);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.65;
}

/* Cream band — the four ways, with the pull quote out on the right */
.joinus__ways {
  position: relative;
  padding: clamp(28px, 3.4vw, 46px) 0;
  background: var(--cream);
}

.joinus__ways-inner {
  display: grid;
  grid-template-columns: minmax(0, var(--joinus-col)) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
}

.ways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.way { text-align: center; }

.way__badge {
  display: grid;
  place-items: center;
  width: clamp(48px, 5.4vw, 74px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 10px 24px rgba(25, 49, 34, .22);
}

.way__badge img { width: 50%; height: 50%; object-fit: contain; }

.way h3 {
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(6px, .8vw, 10px);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.way p {
  margin: 0;
  color: rgba(77, 62, 19, .82);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.45;
}

/* Rides on the far right of the cream band, where the right-aligned text falls
   entirely over the dark of his jacket — so it is set light rather than given
   a plate to sit on. Below 1080px the layout restacks and it flips to ink. */
.quote {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(100%, 250px);
  margin: 0;
  /* The container stops growing at 1200 but he keeps tracking the viewport, so
     past that width the quote falls off his jacket onto the cream. This gives
     back exactly the half-gutter the cap introduces. */
  margin-right: calc(-1 * max(0px, (100vw - 1240px) / 2));
  padding-top: clamp(30px, 3.2vw, 46px);
}

/* Closing mark, set above the text on the right */
.quote::before {
  content: "\201D";
  position: absolute;
  top: 0;
  right: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
}

.quote blockquote {
  margin: 0;
  padding-left: clamp(52px, 2.6vw, 34px);
  color: var(--white);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 19px);
  line-height: 1.45;
  text-align: left;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.quote__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(6px, .8vw, 12px);
}

.quote__mark {
  flex: 0 0 auto;
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 0;
  transform: translateY(.22em);
}

.quote__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(220, 172, 68, .15));
}

/* Gold bar sits on the cream, bleeding off the left edge only */
.joinus__cta {
  position: relative;
  padding-bottom: clamp(20px, 2.6vw, 34px);
  background: var(--cream);
}

/* Icon and copy ride as one centred lockup — padding stays symmetric so the
   group sits on the bar's true midpoint. */
.joinus__cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  width: min(100%, var(--joinus-col));
  padding: clamp(14px, 1.8vw, 24px) clamp(20px, 3vw, 44px);
  background: linear-gradient(155deg, var(--gold-light), #c69a30);
  box-shadow: 0 16px 38px rgba(77, 62, 19, .26);
  text-align: center;
}

.joinus__cta-bar > img {
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 68px);
  height: clamp(40px, 5vw, 68px);
  object-fit: contain;
}

.joinus__cta-title {
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 27px);
  line-height: 1.22;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.joinus__cta-note {
  margin: clamp(6px, .8vw, 11px) 0 0;
  color: rgba(77, 62, 19, .88);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(11px, 1.05vw, 14.5px);
  line-height: 1.4;
}


/* ---------- Sign-off ---------- */

/* Backdrop is drawn at full width from the top, the same way the founders band
   handles its artwork. The fill underneath is the file's own cream rather than
   --cream — the artwork is a few shades lighter, so the token would leave a
   visible seam where the image ends. */
.signoff {
  padding: clamp(30px, 4vw, 56px) 0 clamp(26px, 3.4vw, 46px);
  border-top: 3px solid var(--gold);
  background:
    url("../img/Footer/backdrop.webp") no-repeat center top / 100% auto,
    #f8efe0;
}

.signoff__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* The logo file sets the wordmark and tagline beneath the emblem; this crops
   to the shield and laurel alone, as .founders__crest does. */
.signoff__crest {
  display: block;
  width: clamp(48px, 5.8vw, 84px);
  aspect-ratio: 1 / .73;
  overflow: hidden;
}

.signoff__crest img { width: 100%; height: auto; }

.signoff__wordmark {
  width: clamp(230px, 37.5vw, 540px);
  height: auto;
  margin-top: clamp(6px, 1vw, 14px);
}

.signoff__tagline {
  margin: clamp(2px, .5vw, 7px) 0 0;
  color: var(--gold);
  font-size: clamp(10px, 1.2vw, 16.5px);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.signoff__drive {
  margin: clamp(22px, 3.2vw, 46px) 0 0;
  color: var(--ink);
  font-size: clamp(16px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.signoff__note {
  margin: clamp(6px, .9vw, 14px) 0 0;
  color: var(--gold);
  font-size: clamp(11px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---------- Footer ---------- */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-top: clamp(40px, 5vw, 64px);
}

/* Crest watermark bled off the left edge, behind the brand column. Clipped to
   the emblem — the logo file carries the wordmark and tagline underneath, and
   at watermark scale those read as a second, ghosted wordmark. */
.footer__crest {
  position: absolute;
  left: clamp(-20px, -7vw, -40px);
  top: 50%;
  width: clamp(240px, 28vw, 380px);
  height: auto;
  transform: translateY(-54%);
  clip-path: inset(0 0 27% 0);
  opacity: .055;
  pointer-events: none;
}

/* Wider than the 1200 elsewhere: the four columns and the button pair need the
   room, and the footer is full-bleed so it is not tied to the body rhythm. */
.footer .container { max-width: 1400px; }

.footer__inner {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.9fr);
  gap: clamp(24px, 2.8vw, 40px);
  padding-bottom: clamp(34px, 4vw, 54px);
}

.footer__wordmark {
  width: clamp(180px, 15vw, 232px);
  height: auto;
}

.footer__tagline {
  margin: clamp(4px, .6vw, 8px) 0 0;
  color: var(--gold);
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.footer__drive {
  margin: clamp(22px, 2.8vw, 38px) 0 0;
  color: rgba(239, 231, 214, .9);
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.85;
  text-transform: uppercase;
}

.footer__col { min-width: 0; }

.footer__head {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  color: var(--gold);
  font-family: var(--sans);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer__links {
  display: grid;
  gap: clamp(9px, 1vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links a {
  color: rgba(239, 231, 214, .84);
  font-size: clamp(12px, 1vw, 14.5px);
  font-weight: 300;
  text-decoration: none;
  transition: color .25s ease;
}

.footer__links a:hover { color: var(--gold-light); }

.footer__blurb {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  max-width: 300px;
  color: rgba(239, 231, 214, .62);
  font-size: clamp(11px, .88vw, 12.5px);
  font-weight: 300;
  line-height: 1.7;
}

.footer__contact-name {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  color: var(--cream);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: .01em;
}

.footer__contact {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  list-style: none;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  padding: 0;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
}

.footer__contact img {
  flex: 0 0 auto;
  width: clamp(18px, 1.6vw, 23px);
  height: clamp(18px, 1.6vw, 23px);
  object-fit: contain;
}

.footer__contact a {
  min-width: 0;
  color: rgba(239, 231, 214, .92);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 300;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color .25s ease;
}

.footer__contact a:hover { color: var(--gold-light); }

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 12px);
}

/* Pill pair: the primary is filled, the secondary outlined */
.fbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: clamp(9px, 1vw, 13px) clamp(12px, 1.35vw, 19px);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: clamp(8px, .7vw, 10px);
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.fbtn:hover { transform: translateY(-2px); }

.fbtn--solid {
  background: linear-gradient(155deg, var(--gold-light), #c69a30);
  color: var(--ink);
}

.fbtn:not(.fbtn--solid):hover {
  background: rgba(220, 172, 68, .12);
  color: var(--gold-bright);
}

/* Bronze strip closing the page */
.footer__bar {
  position: relative;
  background: var(--bronze);
}

.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: clamp(12px, 1.4vw, 17px);
  padding-bottom: clamp(12px, 1.4vw, 17px);
}

.footer__bar p {
  margin: 0;
  color: rgba(239, 231, 214, .82);
  font-size: clamp(10px, .85vw, 12.5px);
  font-weight: 500;
  letter-spacing: .03em;
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}

.footer__legal a {
  color: rgba(239, 231, 214, .82);
  text-decoration: none;
  transition: color .25s ease;
}

.footer__legal a:hover { color: var(--gold-bright); }

.footer__legal span { color: rgba(239, 231, 214, .4); }


/* ---------- Scroll reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .25, 1), transform .8s cubic-bezier(.2, .7, .25, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* ---------- Responsive ---------- */

/* Tablet: collapse 4-up grids to 2-up */
@media (max-width: 1080px) {
  .pcards { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }

  .values { grid-template-columns: repeat(4, 1fr); gap: 12px; }

  .founder { grid-template-columns: 1fr; }

  .founder__portrait { min-height: clamp(360px, 52vw, 480px); }

  .founder__arc,
  .founder__frame {
    border-radius: 0 0 clamp(48px, 9vw, 80px) clamp(48px, 9vw, 80px) / 0 0 40% 40%;
  }

  .founder__arc { transform: translateY(6px); }

  .founder__frame {
    background:
      url("../img/Slide 1/pk.webp") no-repeat 50% bottom / auto 108%,
      url("../img/Slide 1/Background.webp") no-repeat center / cover;
  }

  .founder__body { align-self: auto; max-width: 720px; margin: 0 auto; }

  .founder__watermark { display: none; }

  .founders__copy { width: 54%; }

  .story { grid-template-columns: 1fr; gap: 34px; }
  .story__media { aspect-ratio: 16 / 10; max-height: 400px; }
  .story__watermark { left: auto; right: 4%; }

  /* Stats: 5-up → 3-up, drop the row-crossing dividers */
  .stats { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .stat + .stat::before { display: none; }
  .stat:not(:nth-child(3n + 1))::before {
    display: block;
  }

  /* Impact journey → 3 + 2 wrap */
  .journey { grid-template-columns: repeat(3, 1fr); gap: 30px 16px; }
  .journey__step::before,
  .journey__step::after { display: none; }

  /* No room to keep the trophy clear — panels take the full width and the
     artwork becomes a cropped backdrop rather than a side-by-side partner. */
  .daytoplay__panels { width: 100%; }
  .daytoplay { background-size: cover; background-position: 32% center; }
  .daytoplay__golfer { display: none; }

  /* Panels now cover the whole width, so the scrim has to be even rather than
     leaning right */
  .daytoplay__scrim {
    background: linear-gradient(180deg, rgba(15, 28, 20, .78), rgba(15, 28, 20, .6));
  }

  /* Join us: the section gets relatively taller as it narrows, so a
     height-driven portrait would balloon past a third of the width — cap him
     against the viewport instead. The ways go 2 x 2 in the column he leaves,
     and the quote keeps its own column on the right so it stays over his
     jacket, where the light text has something dark to read against. */
  .joinus { --joinus-col: 52%; }

  .joinus__portrait { height: min(100%, 64vw); }

  .joinus__lede { max-width: min(100%, var(--joinus-col)); }

  /* His jacket's dark panel tracks the viewport here (he is sized off 64vw),
     so the quote is sized and pulled in with vw too — a fixed inset would
     drift onto his shirt at one end of the range and past his shoulder at the
     other. This keeps it centred on the dark at every width in between. */
  .quote {
    width: min(100%, 20vw);
    margin-right: 5vw;
  }

  .ways { grid-template-columns: repeat(2, 1fr); row-gap: clamp(18px, 3vw, 28px); }

  /* Footer: four columns no longer fit — brand takes the first row on its own,
     the three link groups share the second. */
  .footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(30px, 4vw, 44px);
  }

  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .pcards { grid-template-columns: 1fr; }

  /* Panels: 5-up → 2-up, 4-up → 2-up. Dividers follow the new column starts. */
  .panel__grid--5,
  .panel__grid--4 {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(20px, 4vw, 28px);
  }

  .panel__grid > li + li { border-left: none; }
  .panel__grid > li:nth-child(even) { border-left: 1px solid rgba(220, 172, 68, .26); }
  .panel__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .daytoplay__foot { flex-wrap: wrap; justify-content: center; text-align: center; }
  .daytoplay__wordmark { margin: 0 auto; }
  .drive { justify-content: center; text-align: left; }

  /* Join us: no width left to share, so the founder moves up into the turf
     band and everything below him goes full width. Raising the two lower
     bands above him makes the cream edge do the cropping — without it his
     square artwork would end in a hard line partway down the cream. */
  .joinus { --joinus-col: 100%; }

  .joinus__ways,
  .joinus__cta { z-index: 2; }

  .joinus__top { padding-bottom: clamp(150px, 40vw, 260px); }

  .joinus__portrait {
    top: clamp(140px, 32vw, 230px);
    right: clamp(-40px, -6vw, -10px);
    bottom: auto;
    width: min(62%, 300px);
    height: auto;
  }

  .joinus__lede { max-width: min(100%, 58%); }

  .joinus__ways-inner { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }

  /* He sits up in the turf band at this size, so the quote is on bare cream
     here and has to flip to ink. */
  .quote { justify-self: stretch; width: 100%; }
  .quote blockquote { color: var(--ink); text-shadow: none; }

  .joinus__cta-bar { width: 100%; }

  /* Footer stacks; the watermark would sit under the copy at this width */
  .footer__inner { grid-template-columns: 1fr; }
  .footer__crest { display: none; }
  .footer__bar-inner { justify-content: flex-start; }

  /* Founding partners: a portrait section is too tall for one full-width
     backdrop, so the artwork is split — flat cream + the crest on top, the
     fairway half cropped in behind the wall. Copy centres, crest goes above. */
  .founders { background-image: none; background-color: var(--ink); }

  .founders__intro {
    aspect-ratio: auto;
    background: var(--cream);
    padding: clamp(34px, 7vw, 56px) 0 clamp(22px, 4vw, 38px);
  }

  .founders__intro-inner { justify-items: stretch; gap: 8px; }
  .founders__crest { display: block; order: -1; }
  .founders__copy { width: 100%; text-align: center; }
  .founders__lede,
  .founders__thanks { margin-inline: auto; }

  .founders__wall {
    background: url("../img/Slide 7/golfcourse.webp") no-repeat center bottom / auto 200%;
  }

  .wall__row { grid-template-columns: 1fr; min-height: 0; }
  .tier { padding: 12px; }
  .wall__slots {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wall__slots > .plaque:only-child { grid-column: 1 / -1; }
  .plaque { min-height: 72px; }

  /* Stats: 3-up → 2-up */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat::before,
  .stat:not(:nth-child(3n + 1))::before { display: none !important; }
  .stat:nth-child(even)::before { display: block !important; }

  .story-cta__inner { flex-wrap: wrap; gap: 18px; }
  .story-cta__divider { display: none; }

  .pcards { max-width: 360px; margin-left: auto; margin-right: auto; }

  .values { grid-template-columns: 1fr 1fr; gap: 12px; }

  .programs__foot-inner { gap: 14px; }

  .journey { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }

  .countdown { gap: 6px; }
  .countdown__unit { min-width: 0; }
  .countdown__sep { display: none; }

  .invite__facts { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }

  .section-head--center .section-sub,
  .section-sub { margin-left: auto; margin-right: auto; }
}

@media (max-width: 980px) {
  :root { --nav-h: 72px; --logo-h: 80px; }

  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 30px;
    background: rgba(16, 30, 22, .97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(220, 172, 68, .2);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }

  .nav__links.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__links > a:not(.btn) {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .nav__cta {
    margin-top: 20px;
    justify-content: center;
  }

  .hero__lede br { display: none; }

  .hero__actions .btn {
    width: 100%;
    max-width: 340px;
  }

  .scroll { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}