:root{
  /* Retuned against real usage-frequency data pulled from two golf-club sites sharing the same
     specialist agency template (royalcromergolfclub.com / aberdoveygolf.co.uk) -- #17362d and
     #a48344 are their two most-used brand colors by a wide margin. Confirms the original
     direction but pulls the green a touch lighter/truer and the gold down from "polished brass"
     to a duller, more age-appropriate bronze; background shifted from yellow-cream to neutral bone. */
  --pine-900:#122A21;
  --pine-800:#17362D;
  --pine-700:#20493B;
  --pine-600:#2C5C4B;
  --pine-100:#E6EBE7;
  --brass-600:#8C6B29;
  --brass-500:#A48344;
  --brass-100:#EFE6D2;
  --cream:#F5F2EF;
  --paper:#FFFDF9;
  --ink:#20241F;
  --ink-soft:#4E574A;
  --line:#DDD6C6;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;line-height:1.55;}
h1,h2,h3,h4,.display{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.1;margin:0 0 .5em;color:var(--pine-900);}
p{margin:0 0 1em;color:var(--ink-soft);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.eyebrow{font-family:'Jost',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:500;color:var(--brass-600);margin-bottom:.6em;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-weight:600;font-size:.92rem;letter-spacing:.02em;border:1.5px solid transparent;transition:opacity .15s;}
.btn:hover{opacity:.85;}
.btn-brass{background:var(--brass-600);color:var(--paper);}
.btn-outline{border-color:rgba(255,253,248,.55);color:var(--paper);}
.btn-outline-dark{border-color:var(--pine-700);color:var(--pine-800);}
.btn-green{background:var(--pine-800);color:var(--paper);}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:50;background:var(--pine-900);border-bottom:3px solid var(--brass-600);transition:background-color .25s,border-color .25s;}
/* Transparent-over-hero variant -- only the home page's video hero is tall/dark enough to read
   nav text over; header.solid (added by a small scroll listener, see index.html) fades in the
   same background once you scroll past it, same pattern the reference agency template uses. */
header.transparent{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;}
header.transparent.solid{background:var(--pine-900);border-bottom-color:var(--brass-600);}
.nav-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;}
.logo{display:flex;align-items:center;gap:12px;color:var(--paper);}
.logo img{height:46px;width:46px;}
.logo-word{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;letter-spacing:.02em;color:var(--paper);}
.logo-word small{display:block;font-family:'Jost',sans-serif;font-size:.6rem;letter-spacing:.2em;font-weight:500;color:var(--brass-500);margin-top:1px;}
nav.links{display:flex;gap:26px;margin-left:auto;}
nav.links a{font-family:'Jost',sans-serif;color:var(--paper);opacity:.85;font-size:.86rem;font-weight:500;letter-spacing:.04em;padding:6px 0;border-bottom:2px solid transparent;}
nav.links a:hover,nav.links a.active{opacity:1;border-bottom-color:var(--brass-500);}
.nav-toggle{display:none;background:none;border:none;color:var(--paper);font-size:1.4rem;cursor:pointer;}
.nav-cta{margin-left:8px;white-space:nowrap;}

@media(max-width:860px){
  nav.links{position:absolute;top:100%;left:0;right:0;background:var(--pine-900);flex-direction:column;gap:0;padding:8px 24px 18px;display:none;border-bottom:3px solid var(--brass-600);}
  body.nav-open nav.links{display:flex;}
  nav.links a{padding:12px 0;border-bottom:1px solid rgba(255,253,248,.12);}
  .nav-toggle{display:block;margin-left:auto;}
  .nav-cta{display:none;}
}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--pine-900);color:var(--paper);overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 65%;opacity:.5;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,38,27,.55) 0%,rgba(18,38,27,.78) 65%,var(--pine-900) 100%);}
.hero-inner{position:relative;max-width:820px;margin:0 auto;padding:110px 24px 96px;text-align:center;}
.hero-inner .eyebrow{color:var(--brass-500);}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--paper);}
.hero h1 em{font-style:italic;color:var(--brass-500);}
.hero p.lead{color:rgba(255,253,248,.86);font-size:1.08rem;max-width:600px;margin:0 auto 30px;}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* Full-screen video hero (home page only) -- <video> with the existing sunrise photo as `poster`
   so it looks intentional even before Matt drops in real drone footage; swapping in a real
   <source> later is a one-line change, no rebuild needed. Taller and edge-to-edge vs. the static
   .hero above, which inner pages keep using. */
.video-hero{position:relative;height:100vh;min-height:560px;max-height:920px;background:var(--pine-900);color:var(--paper);overflow:hidden;}
.video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.video-hero .hero-scrim{background:linear-gradient(180deg,rgba(18,42,33,.35) 0%,rgba(18,42,33,.55) 55%,rgba(18,42,33,.88) 100%);}
.video-hero-inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;}
.video-hero .eyebrow{color:var(--brass-500);}
.video-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);color:var(--paper);max-width:900px;}
.video-hero h1 em{font-style:italic;color:var(--brass-500);}
.video-hero p.lead{color:rgba(255,253,249,.88);font-size:1.1rem;max-width:600px;margin:0 auto 30px;}
.scroll-cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);color:rgba(255,253,249,.75);font-size:1.6rem;animation:scrollcue 2.2s ease-in-out infinite;}
@keyframes scrollcue{0%,100%{transform:translate(-50%,0);opacity:.6;}50%{transform:translate(-50%,8px);opacity:1;}}

.page-hero{position:relative;background:var(--pine-900);color:var(--paper);}
.page-hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:64px 24px;}
.page-hero .eyebrow{color:var(--brass-500);}
.page-hero h1{color:var(--paper);font-size:clamp(2rem,4vw,2.8rem);}

/* ---------- SECTIONS ---------- */
section{max-width:1180px;margin:0 auto;padding:80px 24px;}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem);max-width:640px;}
.section-lead{max-width:620px;font-size:1.02rem;}
.section-tight{padding-top:0;}
.divider{height:1px;background:var(--line);max-width:1180px;margin:0 auto;}

.band{background:var(--pine-100);}
.band-dark{background:var(--pine-900);color:var(--paper);}
.band-dark p{color:rgba(255,253,248,.82);}
.band-dark h2{color:var(--paper);}

/* Large centered editorial sentence right after a hero -- no card, no border, just confident
   serif type. Every reference site studied opens this way; the previous build had nothing like
   it. */
.opener{max-width:760px;margin:0 auto;padding:88px 24px;text-align:center;}
.opener h2{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:500;line-height:1.35;color:var(--pine-800);}

/* Alternating 50/50 image+copy row -- edge-to-edge image (not inset like .photo-frame) for a
   more editorial, less "boxed-in" feel than .grid-2. .image-right flips the order on desktop. */
.card-horizontal{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;max-width:1180px;margin:0 auto;}
.card-horizontal .ch-media{height:100%;min-height:360px;}
.card-horizontal .ch-media img{width:100%;height:100%;object-fit:cover;}
.card-horizontal .ch-content{padding:56px 64px;}
.card-horizontal.image-right .ch-media{order:2;}
@media(max-width:860px){
  .card-horizontal{grid-template-columns:1fr;}
  .card-horizontal .ch-media{order:0 !important;min-height:260px;}
  .card-horizontal .ch-content{padding:40px 24px;}
}

/* ---------- GRID / CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
@media(max-width:860px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}

.card{background:var(--paper);border:1px solid var(--line);padding:30px 26px;}
.card .num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--brass-500);line-height:1;margin-bottom:10px;}
.card h3{font-size:1.3rem;margin-bottom:.4em;}
.card p{margin-bottom:0;font-size:.95rem;}

.photo-frame{border:1px solid var(--line);padding:10px;background:var(--paper);}
.photo-frame img{width:100%;height:100%;object-fit:cover;}

.stat-row{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;text-align:center;}
.stat-row .num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:var(--brass-500);}
.stat-row .lbl{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,253,248,.7);margin-top:4px;}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--pine-800);color:var(--paper);text-align:center;padding:80px 24px;}
.cta-band h2{color:var(--paper);}
.cta-band p{color:rgba(255,253,248,.82);max-width:520px;margin:0 auto 26px;}

/* ---------- FOOTER ---------- */
footer{background:var(--pine-900);color:rgba(255,253,248,.75);padding:56px 24px 28px;}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{color:rgba(255,253,248,.65);font-size:.88rem;max-width:280px;}
.footer-col h4{color:var(--paper);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-family:'Inter',sans-serif;margin-bottom:14px;}
.footer-col a{display:block;color:rgba(255,253,248,.7);font-size:.9rem;margin-bottom:10px;}
.footer-col a:hover{color:var(--brass-500);}
.fine{margin-top:20px;font-size:.78rem;color:rgba(255,253,248,.45);}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ---------- MISC PAGE ELEMENTS ---------- */
.list-check{list-style:none;padding:0;margin:0;}
.list-check li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.list-check li:last-child{border-bottom:none;}
.list-check li::before{content:"⛳";position:absolute;left:0;top:9px;font-size:.85rem;}

.quote-block{border-left:3px solid var(--brass-500);padding:6px 0 6px 24px;margin:28px 0;}
.quote-block p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--pine-800);margin-bottom:.3em;}
.quote-block .attr{font-size:.85rem;color:var(--ink-soft);font-style:normal;}

.timeline{border-left:2px solid var(--line);margin-left:8px;padding-left:32px;}
.timeline-item{position:relative;padding-bottom:34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:"";position:absolute;left:-38px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--brass-500);border:2px solid var(--paper);}
.timeline-item .yr{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--brass-600);}