/* Oak Golf Club — deck pages 1–4, 6 and 7 as a homepage.
   Colour, type and scrim values come from the Custom 5A design system
   (06 Brand & Design System/tokens.css, Assets/oak-custom-5a.*) and were checked
   against the layer data in OGC CD First new.psd, OGC Concept.psd, OGC What it is.psd,
   OGC Short Game Green.psd, OGC Benefit Comparison.psd and
   OGC Membership Options2.psd.
   Where the deck differs from the system, the deck wins (noted inline). */


:root{
  /* Custom 5A tokens (tokens.css v2.0) */
  --oak-ground:#F2EEE5;   /* PSD: wordmark overlay, labels, O mark = 242,238,229 */
  --oak-dark:#443B2E;     /* PSD: band + logo tile Rectangle 1 = 68,59,46 */
  --oak-gold:#B08D57;     /* PSD: band type + logo tile wordmark = 176,141,87 */
  --oak-gold-text:#C6A871;
  --oak-accent:#46725D;
  --oak-muted:#726B61;
  --oak-serif:'EBGaramond','EB Garamond',Georgia,serif;
  --oak-sans:'Inter','Instrument Sans',-apple-system,Helvetica,sans-serif;
  --oak-saturate:.72;     /* system: desaturate a photo before the scrim */
  --oak-motion-standard:360ms;
  --oak-motion-slow:900ms;
  --oak-space-16:16px;--oak-space-24:24px;--oak-space-32:32px;--oak-space-48:48px;

  /* Deck-measured values */
  --hero-scrim:rgba(68,59,46,.70);     /* ink at 70% — fitted to deck p1 (system hero scrim is a .82/.60/.88 gradient) */
  --tile-wash:rgba(105,99,92,.56);     /* deck p2 tiles: warm grey wash at the system's 56% "flat" opacity */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 1su = 1% of a 16:9 stage that fits the viewport (deck p1 = 2880x1620) */
  --su:min(1vw,1.77778svh);
  --band-h:max(40px,calc(var(--su)*3.24));   /* 95/1650 of the artboard height */
  --band-gap:calc(var(--su)*1.26);           /* 37/1650 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--oak-dark);color:var(--oak-ground);font-family:var(--oak-sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--oak-ground);color:var(--oak-dark);padding:8px 14px;font-size:13px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:1px solid var(--oak-gold);outline-offset:3px}

/* ───────────── Band / nav (deck p1 Group 2) ───────────── */
.band{position:fixed;inset:var(--band-gap) 0 auto 0;z-index:50;transition:transform var(--oak-motion-slow) var(--ease),top var(--oak-motion-standard) var(--ease)}
.band.is-scrolled{top:0}
.band.is-hidden{transform:translateY(calc(-100% - 2px))}
.band__inner{height:var(--band-h);background:var(--oak-dark);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:0 clamp(16px,2.8vw,40px)}   /* equal side tracks keep the centre O mark on the viewport centre */
.band__side{display:flex;align-items:center;gap:clamp(20px,2.2vw,34px);min-width:0}
.band__side--right{justify-content:flex-end}
.band__brand{display:flex;align-items:center;justify-self:center;flex:none;opacity:.92;transition:opacity var(--oak-motion-standard)}
.band__brand:hover{opacity:1}
/* Nav brand: the cream O mark (Kevin, Oct 5), 28px tall on desktop/tablet; phone keeps its smaller size */
.band__mono{display:block;height:28px;width:auto}
.band__links{display:flex;align-items:center;gap:clamp(20px,2.2vw,34px)}
.band__links a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(242,238,229,.72);transition:color var(--oak-motion-standard);white-space:nowrap;padding:6px 0}
.band__links a:hover{color:var(--oak-ground)}
.band__links a.band__cta{color:var(--oak-ground);border:1px solid rgba(176,141,87,.7);padding:7px 14px 7px calc(14px + .2em);transition:border-color var(--oak-motion-standard),background-color var(--oak-motion-standard)}
.band__links a.band__cta:hover{border-color:var(--oak-gold);background:rgba(176,141,87,.12)}
.band__menu{display:none;align-items:center;gap:10px;background:none;border:0;color:rgba(242,238,229,.8);font:inherit;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.band__menu-icon{display:grid;gap:5px;width:20px}
.band__menu-icon i{display:block;height:1px;background:currentColor;transition:transform var(--oak-motion-standard) var(--ease)}
.band__menu[aria-expanded="true"] .band__menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}
.band__menu[aria-expanded="true"] .band__menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}
.drawer{background:rgba(68,59,46,.97);display:flex;flex-direction:column;align-items:center;gap:22px;padding:34px 24px 40px;border-top:1px solid rgba(242,238,229,.12)}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--oak-serif);font-weight:500;font-size:26px;text-decoration:none;color:var(--oak-ground)}
.drawer a.drawer__cta{margin-top:8px;font-family:var(--oak-sans);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(176,141,87,.7);padding:12px 20px 12px calc(20px + .2em)}

/* ───────────── Hero (deck p1) ───────────── */
.hero{position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden;background:#2b251d}
.hero__media,.hero__media img{position:absolute;inset:0;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 50%;filter:saturate(var(--oak-saturate));transform-origin:46% 55%;animation:kenburns 48s var(--ease) infinite alternate}
.hero__scrim{position:absolute;inset:0;background:var(--hero-scrim)}
/* Wordmark: Shape 2 at x 1005–1545, y 726–924 of the 2550x1650 artboard = 21.18% wide, 12% tall,
   centred, shown stretched to 16:9 exactly as the deck does (aspect 3.137). */
.hero{--mark-w:calc(var(--su)*15.885)} /* 75% of deck size, Kevin Oct 5 */
.hero__mark{position:absolute;left:50%;top:50%;width:var(--mark-w);transform:translate(-50%,-50%);animation:markIn 2.6s var(--ease) .35s both}
.hero__mark img{width:100%;height:auto;aspect-ratio:3.137}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
/* Tagline under the wordmark: Inter 14px caps, tracking .2em, cream at 85%; fades in just after the mark */
.hero__tag{position:absolute;left:50%;top:calc(50% + var(--mark-w)/6.274 + clamp(22px,2.2vw,34px));width:min(100% - 48px,980px);transform:translateX(-50%);margin:0;padding-left:.2em;font-family:var(--oak-sans);font-weight:400;font-size:14px;line-height:1.7;letter-spacing:.2em;text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--oak-gold);animation:tagIn 2.6s var(--ease) .6s both}
@keyframes tagIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes markIn{from{opacity:0;transform:translate(-50%,calc(-50% + 6px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* ───────────── The Club grid (deck p2) ───────────── */
.club{background:var(--oak-dark)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:100vh;height:100svh;min-height:calc(100vw*.5625*.8)}
.tile{position:relative;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.tile picture,.tile picture img{position:absolute;inset:0;width:100%;height:100%}
.tile picture img{object-fit:cover;filter:saturate(var(--oak-saturate)) brightness(var(--g,1));transition:filter 1.1s var(--ease),transform 2.4s var(--ease)}
.tile picture::after{content:"";position:absolute;inset:0;background:var(--tile-wash)}
.tile::after{content:"";position:absolute;inset:clamp(10px,1.1vw,18px);border:1px solid var(--oak-gold);opacity:0;transform:scale(1.012);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);pointer-events:none;z-index:2}
/* Hover only where a real pointer can hover, so taps on phones never leave a stuck state */
@media (hover:hover){
  .tile:not(.tile--logo):hover picture img{filter:saturate(var(--oak-saturate)) brightness(calc(var(--g,1)*1.16));transform:scale(1.015)}
  .tile:not(.tile--logo):hover::after{opacity:.85;transform:scale(1)}
}
.tile__label{position:relative;z-index:1;color:var(--oak-ground);text-align:center;line-height:1;transform:translate(calc(var(--dx,0)*1vw),calc(var(--dy,0)*1vw))}
/* Serif labels — EB Garamond Medium 79.2px on a 2880 canvas, tracking 0 */
.tile--serif .tile__label{font-family:var(--oak-serif);font-weight:500;font-size:2.75vw;letter-spacing:0;font-variant-numeric:lining-nums}
/* Caps labels — Inter Regular 41.7px, tracking 250 */
.tile--caps .tile__label{font-family:var(--oak-sans);font-weight:400;font-size:1.448vw;letter-spacing:.25em;text-transform:uppercase;margin-right:-.25em}
.tile__label--asis{text-transform:none!important}
/* Centre tile — Rectangle 1 #443B2E, wordmark Shape 2 at x 284–672 / y 202–345 of the 960x540 cell */
.tile--logo{background:var(--oak-dark)}
.tile__logo{position:absolute;left:29.58%;top:50.65%;width:40.42%;height:auto;transform:translateY(-50%)}
/* Bottom-centre tile — O mark Shape 3 at x 380–573 / y 215–326 of the cell */
.tile__mono{position:absolute;left:49.64%;top:50.09%;width:20.1%;height:auto;transform:translate(-50%,-50%);z-index:1}

/* ───────────── OAK GOLF CLUB (deck p3 · OGC What it is.psd, 2880x1620) ─────────────
   Desktop: a 16:9 stage (1su = 1% of its width) laid out from the PSD layer bounds.
   Background: 'bay' smart object (bay.png) with an ink gradient overlay (95% → 80% at 42% from the
   right → 95%), then Hue/Saturation −28 over both, done here as saturate(.72) on the group. */
.about{position:relative;height:100vh;height:100svh;min-height:calc(var(--su)*56.25);overflow:hidden;display:grid;place-items:center;background:var(--oak-dark);isolation:isolate}
.about__bg{position:absolute;inset:0;z-index:-1;filter:saturate(var(--oak-saturate));overflow:hidden}
.about__bg picture,.about__bg img{position:absolute;left:-.76%;top:-1.3%;width:101.29%;height:101.3%}
.about__bg img{object-fit:cover;object-position:50% 100%}
.about__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(68,59,46,.949) 0%,rgba(68,59,46,.80) 42%,77.4%,rgba(68,59,46,.949) 100%)}
.about__stage{position:relative;width:calc(var(--su)*100);height:calc(var(--su)*56.25)}
/* Rectangle 1: y 34–130, full bleed, #443B2E. 'OAK GOLF CLUB': Inter Regular 29.17px, tracking 200, #B08D57, centred */
.about__band{position:absolute;left:50%;top:calc(var(--su)*1.1806);width:100vw;height:calc(var(--su)*3.3333);transform:translateX(-50%);background:var(--oak-dark);display:grid;place-items:center}
.about__title{font-family:var(--oak-sans);font-weight:400;font-size:calc(var(--su)*1.0128);letter-spacing:.2em;margin-right:-.2em;line-height:1;color:var(--oak-gold);white-space:nowrap;transform:translateY(calc(var(--su)*.07))}  /* +2px at 2880: baseline 92.67 as in the PSD */
/* 8000_3d_Cropped@2x: x 1239.05–2782.75, y 410.09–1136.11 (transparent PNG, floats over the photo) */
.about__plan{position:absolute;left:43.0226%;top:25.3141%;width:53.601%}
.about__plan img{width:100%;height:auto}
/* Paragraph text box at x 113.17, y 428.06, 1045.73 wide. 33.33px, tracking 25, auto leading (1.2).
   Paragraphs 1–3: Inter Regular #F2EEE5. Paragraphs 4–5: Instrument Sans Regular #FFFFFF (as set in the PSD). */
.about__copy{position:absolute;left:3.9296%;/* box top 428.06 less Photoshop's first-line offset, fitted to the deck */top:calc(26.4232% - var(--su)*.347);width:36.31%;font-family:var(--oak-sans);font-size:calc(var(--su)*1.1574);line-height:1.2;letter-spacing:.025em;color:var(--oak-ground)}
.about__p{text-wrap:pretty}   /* avoids one- or two-word last lines after the copy edits */
.about__p+.about__p{margin-top:1.2em}
.about__p--alt{font-family:'Instrument Sans',var(--oak-sans);color:#fff}
.about__p--members{max-width:88%}   /* rag 434/453/235px at 1440 instead of a 4-word last line */
/* Shape 1 (O mark): x 89–241, y 1457–1546; gold fill under a 71% #F2EEE5 colour overlay = #DFD2BC */
.about__mono{position:absolute;left:3.0903%;top:89.938%;width:5.2778%;height:auto}

@media (max-width:1024px){
  .about{height:auto;min-height:0;display:block}
  .about__bg img{object-position:50% 50%}
  .about__stage{position:static;width:auto;height:auto;display:flex;flex-direction:column;padding:0 0 clamp(32px,6vw,56px)}
  .about__band{position:relative;left:auto;top:auto;width:auto;height:44px;margin-top:10px;transform:none}
  .about__title{font-size:max(9.5px,calc(var(--su)*1.0128))}
  .about__plan{position:static;width:min(100% - 24px,760px);margin:clamp(28px,6vw,56px) auto clamp(20px,4vw,40px)}
  .about__copy{position:static;width:auto;max-width:36em;margin:0 auto;padding:0 clamp(24px,6vw,48px);font-size:17px;line-height:1.5;letter-spacing:.01em}
  .about__p+.about__p{margin-top:1em}
  .about__p--members{max-width:none}
  .about__mono{position:static;width:64px;margin:clamp(32px,6vw,48px) 0 0 calc(max(0px,(100% - 612px)/2) + clamp(24px,6vw,48px))}  /* lines up with the copy column (36em at 17px) */
}
@media (max-width:700px){
  .about__band{height:44px}
  .about__title{font-size:9.5px;letter-spacing:.18em;margin-right:-.18em}
  .about__plan{width:calc(100% - 16px)}
  .about__copy{font-size:16px;line-height:1.5;padding:0 24px}
  .about__mono{width:56px;margin-left:calc(max(0px,(100% - 576px)/2) + 24px)}
}

/* ───────────── SHORT GAME GREEN (deck p4 · OGC Short Game Green.psd, 2880x1620) ─────────────
   Photo: 'oak-green-brick-vibe-v3' smart object (embedded JPG, 1280x720) placed at x −69.97…3269.00,
   y −162.83…1715.34, with the same ink gradient overlay as p3 (95% → 80% at 42% from the right → 95%).
   No Hue/Saturation layer on this page. Band reuses the p3 band (Rectangle 1 + Inter 29.17px / 200). */
.sgg{position:relative;height:100vh;height:100svh;min-height:calc(var(--su)*56.25);overflow:hidden;display:grid;place-items:center;background:var(--oak-dark);isolation:isolate}
.sgg__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sgg__layer{position:absolute;left:-2.4294%;top:-10.0514%;width:115.937%;height:115.936%}
.sgg__layer picture,.sgg__layer img{position:absolute;inset:0;width:100%;height:100%}
.sgg__layer img{object-fit:cover}
.sgg__layer::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(68,59,46,.949) 0%,rgba(68,59,46,.80) 42%,77.4%,rgba(68,59,46,.949) 100%)}
.sgg__stage{position:relative;width:calc(var(--su)*100);height:calc(var(--su)*56.25)}
/* Text box x 481.54, y 257.47, 1916.57 wide, centred. Inter Regular 37.5px, tracking 100, auto leading, #FFFFFF */
.sgg__text{position:absolute;left:16.72%;top:calc(15.893% - var(--su)*.278);  /* box top less Photoshop's first-line offset, fitted to the deck */width:66.548%;font-family:var(--oak-sans);font-weight:400;font-size:calc(var(--su)*1.30208);line-height:1.2;letter-spacing:.1em;color:#fff;text-align:center}
.sgg__line{display:block}   /* the PSD's paragraph break before the closing line */
.sgg__nw{white-space:nowrap}   /* keeps the 1–4 range on one line */
/* Shape 1 (O mark): x 110–262, y 1457–1546; same gold + 71% cream overlay as p3 */
.sgg__mono{position:absolute;left:3.8194%;top:89.938%;width:5.2778%;height:auto}

@media (max-width:1024px){
  .sgg{height:auto;min-height:min(100svh,760px);display:block}
  .sgg__layer{inset:0;left:0;top:0;width:100%;height:100%}
  .sgg__layer img{object-position:58% 62%}   /* keeps the flags on the green in frame */
  .sgg__stage{position:relative;width:auto;height:auto;min-height:inherit;display:flex;flex-direction:column;padding:0 0 clamp(32px,6vw,56px)}
  .sgg__text{position:static;width:auto;max-width:40em;margin:clamp(32px,7vw,64px) auto 0;padding:0 clamp(24px,6vw,48px);font-size:15px;line-height:1.6;letter-spacing:.1em}
  .sgg__line{text-wrap:balance}
  .sgg__mono{position:static;width:64px;margin:auto 0 0 clamp(24px,6vw,48px)}
}
@media (max-width:700px){
  .sgg__text{font-size:13px;line-height:1.7;letter-spacing:.09em;padding:0 22px}
  .sgg__mono{width:56px;margin-left:24px}
}

/* ───────────── Deck pages 6–7: shared section scaffold ─────────────
   Same convention as p3/p4: a 16:9 stage (1su = 1% of its width) laid out from the PSD layer bounds,
   photo smart object placed at its PSD transform, with the shared ink gradient overlay on the layer
   (95% → 80% at 42% from the right → 95%, angle 180, aligned to the layer). */
.mem{position:relative;height:100vh;height:100svh;min-height:calc(var(--su)*56.25);overflow:hidden;display:grid;place-items:center;background:var(--oak-dark);isolation:isolate}
.mem__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mem__layer{position:absolute}
.mem__layer picture,.mem__layer img{position:absolute;inset:0;width:100%;height:100%}
.mem__layer img{object-fit:cover}
.mem__layer::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(68,59,46,.949) 0%,rgba(68,59,46,.80) 42%,77.4%,rgba(68,59,46,.949) 100%)}
.mkt__stage,.mem__stage{position:relative;width:calc(var(--su)*100);height:calc(var(--su)*56.25)}
/* Shape 1 O mark, gold + 71% cream overlay (#DFD2BC): p7 at x 110 (as p4) */
.mem__mono{position:absolute;left:3.8194%;top:89.938%;width:5.2778%;height:auto}

/* ───────────── MARKET COMPARISON (deck p6 · OGC Benefit Comparison.psd) ─────────────
   Colour Fill #F2EEE5; six chart groups rebuilt as inline SVG in PSD units (viewBox per chart).
   Titles EB Garamond Medium 39.6px (50 × .792), axis labels Inter Regular 25.1px (208.33 × .1205),
   tracking 250, #443B2E. 'Graph' axes: 2px stroke #55637A. Dots ~21.5px. O mark = Shape 3 in gold. */
.mkt{position:relative;height:100vh;height:100svh;min-height:calc(var(--su)*56.25);overflow:hidden;display:grid;place-items:center;background:var(--oak-ground);isolation:isolate}
.mkt__defs{position:absolute;width:0;height:0;overflow:hidden}
.mkt__chart{position:absolute;left:calc(var(--x)*100%/2880);top:calc(var(--y)*100%/1620);width:17.0139%}   /* 490 of 2880 */
.mkt__svg{display:block;width:100%;height:auto;overflow:visible}
.mkt__t{font-family:var(--oak-serif);font-weight:500;font-size:39.6px;fill:var(--oak-dark);text-anchor:middle}
.mkt__l{font-family:var(--oak-sans);font-weight:400;font-size:25.11px;letter-spacing:.25em;fill:var(--oak-dark);text-anchor:middle}
.mkt__ax{fill:none;stroke:#55637A;stroke-width:2}
.mkt__d--pub{fill:#726B61}.mkt__d--ent{fill:#55637A}.mkt__d--oth{fill:#AC9C87}.mkt__d--pvt{fill:#46725D}
/* Legend: Rectangle 1 y 1453–1550 full bleed; Inter 29.17px, tracking 200, centred on x 1447.42 */
.mkt__legend{position:absolute;left:50%;top:89.6914%;width:100vw;height:5.9877%;transform:translateX(-50%);background:var(--oak-dark);display:block;text-align:center;padding:calc(var(--su)*1.247) 0 0 calc(var(--su)*.5153);white-space:pre;font-size:calc(var(--su)*1.0128);letter-spacing:.2em;line-height:1}   /* first baseline 1512 (PSD 1511.67) */
.mkt__legend>*{display:inline}
.mkt__legend .mkt__key:last-child{margin-right:-.2em}
.mkt__key--pub{color:#726B61}.mkt__key--ent{color:#55637A}.mkt__key--oth{color:#AC9C87}.mkt__key--pvt{color:#46725D}

/* ───────────── MEMBERSHIPS (deck p7) ─────────────
   Layout and copy from the deck page (no PSD carries the left copy; OGC Membership Options2.psd, the newest,
   swaps it for a founding-price ladder, which is all pricing). Photo: 'entry' smart object
   (entry.png, 1280x720) at x −1626…5743, y −1263…2882, as placed in Options2. */
.mem__layer{left:-56.4583%;top:-77.963%;width:255.868%;height:255.864%}
/* Left copy (deck, measured): Inter 38px, auto leading, slight tracking, white, x 110, first baseline 539 */
.mem__copy{position:absolute;left:3.8194%;top:31.197%;width:39.76%;font-family:var(--oak-sans);font-size:calc(var(--su)*1.31944);line-height:1.19;letter-spacing:.018em;color:#fff}
.mem__copy p+p{margin-top:1.16em}
/* Cards: an HTML design shown at 1.944 px per design px in the deck. 1cpx = one design px.
   x 1490–2771 (659.5cpx), tops 223 / 543 / 863 / 1183, tier cards 296px tall, includes card 318px. */
.mem__cards{--cpx:calc(var(--su)*.0675);position:absolute;left:51.7361%;top:13.7654%;width:calc(var(--cpx)*659.5);color:var(--oak-dark)}
.mem__tiers{display:grid;gap:calc(var(--cpx)*12.35)}
.tier{position:relative;height:calc(var(--cpx)*152.26);background:#fff;border:calc(var(--cpx)*1) solid #E1DFDD;border-radius:calc(var(--cpx)*13.4)}
.tier--annual{background:#F7F9F8;border-color:#C2D0C9;color:var(--oak-accent)}
/* No prices on the site (Kevin's standing decision): the tier name takes the price's place and size
   (EB Garamond 500, 48cpx, as the $ figures were); the term keeps the deck's 13cpx muted line. */
.tier__main{position:absolute;left:calc(var(--cpx)*22);top:calc(var(--cpx)*42);right:calc(var(--cpx)*300);display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--cpx)*12)}
.tier__name{font-family:var(--oak-serif);font-weight:500;font-size:calc(var(--cpx)*48);line-height:1;letter-spacing:-.005em}
.tier__pill{font-family:var(--oak-sans);font-weight:600;font-size:calc(var(--cpx)*10);line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--oak-accent);border:calc(var(--cpx)*1) solid #C2D0C9;border-radius:999px;padding:calc(var(--cpx)*4.3) calc(var(--cpx)*6.2) calc(var(--cpx)*4.3) calc(var(--cpx)*7.6);white-space:nowrap}
.tier__term{flex-basis:100%;margin-top:calc(var(--cpx)*9.4);font-family:var(--oak-sans);font-size:calc(var(--cpx)*13);line-height:1;color:var(--oak-muted)}
/* Facts: dividers at x 368.8 / 502.8cpx, 74cpx tall from 37.6cpx; labels Inter SemiBold 11cpx #55637A */
.tier__facts{position:absolute;left:calc(var(--cpx)*367.8);top:calc(var(--cpx)*36.55);right:0;display:flex;margin:0}
.tier__fact{height:calc(var(--cpx)*74.07);border-left:calc(var(--cpx)*1) solid #E1DFDD;padding-left:calc(var(--cpx)*20)}
.tier__fact:first-child{width:calc(var(--cpx)*134)}
.tier__fact dt{margin-top:calc(var(--cpx)*-.4);font-family:var(--oak-sans);font-weight:600;font-size:calc(var(--cpx)*11);line-height:calc(var(--cpx)*14.4);letter-spacing:.15em;text-transform:uppercase;color:#55637A;max-width:calc(var(--cpx)*90)}
.tier__fact dd{margin:0}
.tier__val{display:block;margin-top:calc(var(--cpx)*9.7);font-family:var(--oak-serif);font-weight:500;font-size:calc(var(--cpx)*24);line-height:1;color:var(--oak-dark)}
.tier--annual .tier__val{color:var(--oak-accent)}
.tier__sub{display:block;margin-top:calc(var(--cpx)*.72);font-family:var(--oak-sans);font-size:calc(var(--cpx)*13);line-height:1;color:var(--oak-muted)}
/* All memberships include: heading Inter SemiBold 11cpx #46725D with a hairline rule; items Inter Medium 14cpx */
.incl{position:relative;margin-top:calc(var(--cpx)*12.35);height:calc(var(--cpx)*163.6);background:#fff;border:calc(var(--cpx)*1) solid #E1DFDD;border-radius:calc(var(--cpx)*13.4);padding:calc(var(--cpx)*22.4) calc(var(--cpx)*23.7) 0 calc(var(--cpx)*25)}
.incl__title{display:flex;margin-left:calc(var(--cpx)*-2);align-items:center;gap:calc(var(--cpx)*18);font-family:var(--oak-sans);font-weight:600;font-size:calc(var(--cpx)*11);line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--oak-accent);white-space:nowrap}
.incl__title::after{content:"";flex:1;height:calc(var(--cpx)*1);background:#E1DFDD}
.incl__list{display:grid;grid-template-columns:calc(var(--cpx)*318.9) 1fr;margin-top:calc(var(--cpx)*8.3)}
.incl__list li{display:flex;align-items:center;gap:calc(var(--cpx)*12.86);font-family:var(--oak-sans);font-weight:500;font-size:calc(var(--cpx)*13.5);line-height:calc(var(--cpx)*35);color:var(--oak-dark)}
.incl__icon{flex:none;width:calc(var(--cpx)*17);height:calc(var(--cpx)*17);fill:none;stroke:var(--oak-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ───────────── Pages 6–7: tablet & phone ───────────── */
@media (max-width:1024px){
  .mem,.mkt{height:auto;min-height:0;display:block;place-items:normal}   /* Chrome applies justify-items to block layout; keep stages full width */
  .mkt__stage,.mem__stage{position:static;width:auto;height:auto;display:flex;flex-direction:column;padding:0 0 clamp(32px,6vw,56px)}
  .mem__layer{inset:0;left:0;top:0;width:100%;height:100%}
  .mem__layer img{object-position:30% 62%}
  .mem__mono{position:static;width:64px;margin:clamp(32px,6vw,48px) 0 0 clamp(24px,6vw,48px)}

  /* p6 */
  .mkt__charts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,40px) clamp(14px,3vw,28px);width:min(100% - 40px,900px);margin:clamp(32px,6vw,56px) auto 0}
  .mkt__chart{position:static;width:auto}
  .mkt__legend{position:static;transform:none;width:auto;height:auto;margin-top:clamp(36px,6vw,56px);padding:18px 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;white-space:normal;font-size:10px;letter-spacing:.18em}
  .mkt__legend>*{display:block}
  .mkt__key::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.75em;border-radius:50%;background:currentColor;vertical-align:-.04em}   /* swatch so the dim deck colours read at small sizes */
  .mkt__legend .mkt__key:last-child{margin-right:0}

  /* p7: cards at their natural design size (1cpx = 1px) */
  .mem__copy{position:static;width:auto;max-width:36em;margin:clamp(32px,6vw,56px) auto 0;padding:0 clamp(24px,6vw,48px);font-size:17px;line-height:1.5;letter-spacing:.005em}
  .mem__copy p+p{margin-top:1em}
  .mem__br{display:none}
  .mem__cards{--cpx:1px;position:static;width:min(100% - 32px,660px);margin:clamp(28px,5vw,48px) auto 0}
}
@media (max-width:700px){
  .mem__mono{width:56px;margin-left:24px}
  .mkt__charts{grid-template-columns:1fr 1fr;width:calc(100% - 36px);gap:26px 14px}
  .mkt__t{font-size:46px}
  .mkt__l{font-size:29px;letter-spacing:.14em}
  .mkt__legend{display:grid;grid-template-columns:auto auto;justify-content:center;gap:10px 22px;font-size:9.5px;letter-spacing:.16em;padding:18px 16px}

  .mem__copy{font-size:16px;padding:0 24px}
  .mem__cards{width:calc(100% - 32px)}
  .tier,.incl{height:auto;border-radius:14px}
  .tier{padding:20px 20px 18px}
  .tier__main{position:static;column-gap:10px}
  .tier__name{font-size:40px}
  .tier__term{margin-top:8px}
  .tier__facts{position:static;margin-top:16px;padding-top:14px;border-top:1px solid #E1DFDD}
  .tier__fact{height:auto;flex:1;width:auto;padding-left:16px}
  .tier__fact:first-child{width:auto;border-left:0;padding-left:0}
  .incl{padding:20px 20px 12px}
  .incl__list{grid-template-columns:1fr;margin-top:8px}
  .incl__list li{line-height:40px}
}

/* ───────────── Footer (addition) ───────────── */
.foot{background:var(--oak-dark);border-top:1px solid rgba(242,238,229,.08);padding:28px 24px 34px;text-align:center}
.foot p{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,238,229,.55);line-height:2}
@media (max-width:700px){.foot p span{display:block}.foot p .dot-last{display:none}}

/* ───────────── Responsive ───────────── */
@media (max-width:1100px){
  .band__links{display:none}
  .band__menu{display:inline-flex}
}
@media (max-width:1024px){
  .tile__label{transform:none}
  .hero{--mark-w:max(calc(var(--su)*15.885),min(31.5vw,255px))}
  .hero__media img{object-position:38% 50%}
  .grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;height:auto;min-height:0}
  .tile{aspect-ratio:16/9}
  .tile--logo{grid-column:1/-1;grid-row:1;aspect-ratio:32/9}
  .tile--logo .tile__logo{left:50%;width:20.21%;transform:translate(-50%,-50%)}
  .tile--serif .tile__label{font-size:4.1vw}
  .tile--caps .tile__label{font-size:2.15vw}
  .tile__mono{width:20.1%}
}
@media (max-width:700px){
  :root{--band-h:44px;--band-gap:10px}
  .band__mono{height:calc(var(--band-h)*.42)}
  .band__menu-label{display:none}
  .hero__media img{object-position:38% 50%}
  .hero{--mark-w:min(48vw,255px)}
  .hero__tag{width:calc(100% - 40px)}
  .tile::after{inset:8px}
}

/* ───────────── Phone: The Club as an editorial 2-column grid ─────────────
   Logo tile full width on top, then pairs of 4:5 tiles laid out in a serif/caps checkerboard.
   The wide floor plan (Performance Focused) breaks the rhythm full width in the middle, and the
   O-mark lounge tile closes the section full width, mirroring the logo tile. 9 tiles, no orphans.
   Colours, overlays, fonts and label styles are the same as desktop; only size and crop change. */
@media (max-width:700px){
  .grid{grid-template-columns:1fr 1fr}
  .tile{aspect-ratio:4/5}
  .tile--logo{order:0;grid-column:1/-1;aspect-ratio:2/1}
  .tile--trackman{order:1}
  .tile--members{order:2}
  .tile--access{order:3}
  .tile--kitchen{order:4}
  .tile--performance{order:5;grid-column:1/-1;aspect-ratio:16/9}
  .tile--short{order:6}
  .tile--puttview{order:7}
  .tile--lounge{order:8;grid-column:1/-1;aspect-ratio:2/1}
  /* Crops: keep the subject of each photo inside the narrower 4:5 frame */
  .tile--trackman picture img{object-position:50% 50%}     /* simulator screen + hitting mat */
  .tile--members picture img{object-position:80% 50%}      /* chesterfield sofas and coffee table */
  .tile--access picture img{object-position:30% 50%}       /* hand with phone at the door reader */
  .tile--kitchen picture img{object-position:88% 50%}      /* drinks fridges under the counter */
  .tile--short picture img{object-position:50% 50%}        /* the green and its flags */
  .tile--puttview picture img{object-position:48% 50%}     /* golfer, aim line and contours */
  .tile--lounge picture img{object-position:50% 72%}       /* armchairs and the putting green */
  /* Logo tile at 2:1: wordmark keeps its deck height relative to the tile (26.5%) */
  .tile--logo .tile__logo{left:50%;width:38%;transform:translate(-50%,-50%)}
  .tile--lounge .tile__mono{width:18%}
  /* Labels: same serif/caps pairing and the deck's ~1.9:1 size ratio, sized to sit on one line */
  .tile__label{white-space:nowrap}
  .tile--serif .tile__label{font-size:5.9vw}
  .tile--caps .tile__label{font-size:3.05vw;letter-spacing:.2em;margin-right:-.2em}
  .tile--performance .tile__label{font-size:4.2vw;letter-spacing:.25em;margin-right:-.25em}
}

@media (min-width:1101px) and (max-width:1240px){
  .band__links a{font-size:10px;letter-spacing:.16em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__media img,.hero__mark,.hero__tag{animation:none}
  .band,.tile picture img,.tile::after{transition:none}
  .tile:not(.tile--logo):hover picture img{transform:none}
}