@font-face{font-family:Archivo;src:url('../fonts/Archivo-Regular.woff2') format('woff2'),url('../fonts/Archivo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('../fonts/Archivo-SemiBold.woff2') format('woff2'),url('../fonts/Archivo-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url('../fonts/Archivo-Bold.woff2') format('woff2'),url('../fonts/Archivo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Fraunces;src:url('../fonts/Fraunces-Regular.woff2') format('woff2'),url('../fonts/Fraunces-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Fraunces;src:url('../fonts/Fraunces-SemiBold.woff2') format('woff2'),url('../fonts/Fraunces-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--forest:#063b2d;--deep:#032b22;--ink:#15362c;--sand:#d8c19d;--cream:#f4eddf;--cream-2:#ebe1cf;--white:#fffdf8;--gold:#caa572;--line:rgba(6,59,45,.18);--radius:4px;--shadow:0 24px 70px rgba(9,37,29,.15);--shell:min(1240px,calc(100% - 48px));--header:84px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;color:var(--ink);background:var(--cream);font-family:Archivo,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
button,input,textarea,select{font:inherit}
button{color:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:.98}
h1{font-size:clamp(3.2rem,8vw,7.4rem);max-width:930px;margin-bottom:28px}
h2{font-size:clamp(2.65rem,5.4vw,5.3rem);margin-bottom:26px}
h1 em,h2 em{display:block;color:var(--sand);font-style:normal}
.sand h2 em,.cream h2 em{color:#9b6c3c}
.shell{width:var(--shell);margin-inline:auto}
.section{position:relative;padding:clamp(84px,10vw,150px) 0;overflow:hidden}
.cream{background:var(--cream)}
.sand{background:var(--cream-2)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;margin-bottom:20px}
.eyebrow::before{content:'';display:inline-block;width:28px;height:1px;background:currentColor;margin:0 12px 3px 0}
.lede{max-width:630px;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;color:rgba(21,54,44,.78)}
.button{min-height:50px;border:1px solid var(--sand);border-radius:2px;background:var(--sand);color:var(--deep);display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 22px;font-weight:700;font-size:.82rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.button:hover{transform:translateY(-2px);background:#e4cba4;border-color:#e4cba4}
.button:disabled{opacity:.62;cursor:wait;transform:none}
.button-ghost{background:transparent;color:inherit;border-color:currentColor}
.button-ghost:hover{background:rgba(255,255,255,.08);border-color:currentColor}
.button-small{min-height:42px;padding:9px 17px;font-size:.76rem}
:focus-visible{outline:3px solid #e7b86f;outline-offset:4px}
.skip-link{position:fixed;z-index:200;left:12px;top:-80px;background:#fff;color:#000;padding:12px 18px}.skip-link:focus{top:12px}
.site-header{position:absolute;z-index:50;left:0;right:0;top:0;height:var(--header);color:var(--white);border-bottom:1px solid rgba(255,255,255,.16);transition:background .25s ease,box-shadow .25s ease}
.site-header.is-scrolled,.page-contact .site-header,.page-privacy .site-header,.page-terms .site-header,.page-success .site-header,.page-cancelled .site-header{position:fixed;background:rgba(3,43,34,.97);box-shadow:0 8px 32px rgba(0,0,0,.17);backdrop-filter:blur(12px)}
.header-row{height:100%;display:flex;align-items:center;gap:28px}
.site-logo img{width:176px;height:auto}
.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.desktop-nav a{font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap}
.desktop-nav a:hover{text-decoration:underline}
.header-cta{margin-left:4px}
.menu-button,.menu-close{display:none;background:none;border:0;cursor:pointer}
.menu-button{width:42px;height:42px;padding:8px}.menu-button span{display:block;height:1px;background:currentColor;margin:7px 0}
.mobile-menu{position:fixed;z-index:90;inset:0;background:var(--deep);color:var(--cream);padding:92px 32px 36px;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s}
.mobile-menu.is-open{transform:none;visibility:visible}
.mobile-menu nav{display:grid;gap:6px}.mobile-menu nav a{font-family:Fraunces,serif;font-size:clamp(2rem,8vw,3.3rem);text-decoration:none;line-height:1.15;padding:5px 0}.mobile-menu p{position:absolute;bottom:32px;color:rgba(244,237,223,.65);font-size:.82rem}.mobile-menu p span{color:var(--sand)}
.menu-close{display:block;position:absolute;right:23px;top:18px;color:var(--cream);font-size:2.5rem;width:50px;height:50px}
.hero{min-height:100svh;position:relative;color:var(--white);display:grid;align-items:end;overflow:hidden}
.hero-media,.hero-media picture,.hero-media img,.hero-shade{position:absolute;inset:0;width:100%;height:100%}.hero-media img{object-fit:cover;object-position:center 52%}
.hero-shade{background:linear-gradient(90deg,rgba(2,29,22,.9) 0%,rgba(2,29,22,.64) 42%,rgba(2,29,22,.15) 77%),linear-gradient(0deg,rgba(2,29,22,.78) 0%,transparent 45%)}
.topography{position:absolute;inset:0;background:url('../img/bogeys-gfx01-topographic-pattern.svg') center/900px repeat;opacity:.075;pointer-events:none}
.topography-hero{opacity:.14;mix-blend-mode:screen}
.hero-content{position:relative;z-index:2;padding-top:calc(var(--header) + 80px);padding-bottom:clamp(88px,11vh,140px)}
.hero-copy{max-width:970px}.hero-copy .eyebrow{color:var(--sand)}.hero-copy .lede{max-width:680px;color:rgba(255,253,248,.83)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.scroll-cue{position:absolute;z-index:3;right:clamp(24px,5vw,76px);bottom:42px;color:var(--cream);display:grid;gap:8px;text-decoration:none;text-align:center}.scroll-cue span{font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);align-items:center;gap:clamp(48px,9vw,130px)}
.section-copy{max-width:700px}.steps{list-style:none;padding:0;margin:48px 0 0}.steps li{display:grid;grid-template-columns:40px 38px 1fr;gap:17px;align-items:start;padding:19px 0;border-top:1px solid var(--line)}.steps li:last-child{border-bottom:1px solid var(--line)}.steps>li>span{font-size:.68rem;font-weight:700;color:#9b6c3c;padding-top:6px}.steps strong{display:block;font-family:Fraunces,serif;font-size:1.35rem}.steps p{margin:2px 0 0;color:rgba(21,54,44,.65);font-size:.9rem}
.image-frame{position:relative;overflow:hidden;background:var(--deep);box-shadow:var(--shadow)}.image-frame picture,.image-frame img{width:100%;height:100%}.image-frame img{object-fit:cover}.image-frame-portrait{aspect-ratio:4/5}.image-frame figcaption{position:absolute;bottom:0;left:0;right:0;padding:18px 22px;background:linear-gradient(0deg,rgba(3,43,34,.92),transparent);color:var(--cream);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}.image-frame figcaption span{color:var(--sand);margin-right:10px}
.essentials-heading{align-items:end;margin-bottom:62px}.fact-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.fact-grid article{min-height:135px;padding:23px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}.fact-grid strong{font-family:Fraunces,serif;font-size:2.6rem;font-weight:400;line-height:1}.fact-grid span{font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;margin-top:8px}
.visual-grid{display:grid;grid-template-columns:.85fr 1.25fr;gap:22px;align-items:end}.image-frame-tall{aspect-ratio:4/5}.image-frame-wide{aspect-ratio:16/10}.image-frame-wide img{object-position:center 66%}
.layout-card{margin-top:22px;border:1px solid var(--line);background:rgba(255,255,255,.26)}.layout-card summary{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;list-style:none}.layout-card summary::-webkit-details-marker{display:none}.layout-card summary strong,.layout-card summary small{display:block}.layout-card summary small{font-size:.72rem;font-weight:400;margin-top:2px;color:rgba(21,54,44,.62)}.layout-card summary>span:last-child{font-size:1.8rem;transition:transform .2s}.layout-card[open] summary>span:last-child{transform:rotate(45deg)}.layout-card-body{border-top:1px solid var(--line);padding:clamp(16px,4vw,38px)}.layout-card-body img{max-width:900px;margin:auto}.layout-card-body p{text-align:center;font-size:.75rem;color:rgba(21,54,44,.65);margin:15px 0 0}
.pricing-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,9vw,130px);align-items:start}.price-list{border-top:1px solid var(--line)}.price-list article{display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line)}.price-list div strong,.price-list div span{display:block}.price-list div strong{font-family:Fraunces,serif;font-size:1.45rem;font-weight:400}.price-list div span{font-size:.72rem;color:rgba(21,54,44,.58)}.price-list p{font-family:Fraunces,serif;font-size:2.3rem;margin:0}.price-list p small{font-family:Archivo,sans-serif;font-size:.72rem}.price-list .price-featured{background:var(--forest);color:var(--cream);border-color:var(--forest)}.price-list .price-featured div span{color:rgba(244,237,223,.65)}.pricing-notes{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--line);font-size:.78rem;color:rgba(21,54,44,.7)}
.owners-section{position:relative;background:var(--forest);color:var(--cream);overflow:hidden}.owners-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .75fr;min-height:600px;align-items:center;gap:80px}.owners-copy{padding:90px 0}.owners-copy .eyebrow{color:var(--sand)}.owners-copy h2{max-width:700px}.owners-copy p:last-child{font-family:Fraunces,serif;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.4;max-width:720px;color:rgba(244,237,223,.76)}.owners-image{align-self:stretch;margin:0;min-height:600px;position:relative}.owners-bg picture,.owners-bg img{height:100%;width:100%}.owners-bg img{object-fit:cover;filter:saturate(.82);mask-image:linear-gradient(90deg,transparent 0,#000 20%)}
.offer-heading{max-width:810px}.offer-tabs{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--forest);margin:40px 0}.offer-tabs button{border:0;background:transparent;padding:13px 23px;cursor:pointer;font-size:.8rem;font-weight:700}.offer-tabs button.is-active{background:var(--forest);color:var(--cream)}.offer-panel:not(.is-active){display:none}.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.offer-card{padding:clamp(28px,4vw,50px);min-height:560px;display:flex;flex-direction:column;color:var(--cream);position:relative;overflow:hidden}/* The watermark is the brand's script B — the crest mark with its rounded-square
   frame removed (bogeys-gfx04-b-mark-cream.svg, derived from the crest SVG by
   dropping the frame path and tightening the viewBox). Without the frame the
   letterform fills its box, so it needs less size than the crest did. */
.offer-card::after{content:'';position:absolute;right:-54px;bottom:-58px;width:250px;height:250px;background:url('../img/bogeys-gfx04-b-mark-cream.svg') no-repeat center/contain;opacity:.05;pointer-events:none}.offer-green{background:var(--forest)}.offer-deep{background:var(--deep)}.offer-kicker{text-transform:uppercase;letter-spacing:.15em;color:var(--sand);font-size:.72rem;font-weight:700}.offer-card h3,.credit-card h3{font-family:Fraunces,serif;font-size:clamp(3.5rem,6vw,5.7rem);font-weight:400;line-height:1;margin:24px 0 4px}.offer-alt{color:rgba(244,237,223,.72)}.offer-alt span{display:block;color:var(--sand);font-weight:700}.offer-card ul{padding:0;list-style:none;margin:28px 0 35px;position:relative;z-index:1}.offer-card li{padding:10px 0;border-top:1px solid rgba(244,237,223,.16);font-size:.85rem}.offer-card li:last-child{border-bottom:1px solid rgba(244,237,223,.16)}.checkout-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;position:relative;z-index:2}.checkout-actions .button-ghost{color:var(--cream)}.offer-helper{margin:22px 0 0;padding:20px 24px;border:1px solid var(--line);font-size:.88rem}.offer-helper strong{display:block}.credit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.credit-card{background:var(--cream);border:1px solid var(--line);padding:28px 22px;display:flex;flex-direction:column;min-height:390px}.credit-card>span{align-self:flex-start;background:var(--sand);padding:5px 9px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.credit-card>p{margin:28px 0 0;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.credit-card h3{font-size:3.4rem;margin:4px 0 0}.credit-card>strong{color:rgba(21,54,44,.65);font-size:.82rem}.credit-card .button{margin-top:auto}.credit-featured{background:var(--forest);color:var(--cream)}.credit-featured>strong{color:rgba(244,237,223,.65)}.checkout-status{margin-top:16px}
.discovery-section{background:var(--deep);color:var(--cream)}.discovery-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .78fr;gap:clamp(44px,9vw,120px);align-items:center}.discovery-copy .eyebrow{color:var(--sand)}.discovery-copy .lede{color:rgba(244,237,223,.72)}.benefits{list-style:none;padding:0;margin:45px 0 0}.benefits li{display:grid;grid-template-columns:48px 1fr;gap:18px;border-top:1px solid rgba(244,237,223,.17);padding:18px 0}.benefits li:last-child{border-bottom:1px solid rgba(244,237,223,.17)}.benefits>li>span{font-size:.68rem;color:var(--sand)}.benefits strong{font-family:Fraunces,serif;font-size:1.2rem}.benefits p{margin:2px 0 0;font-size:.84rem;color:rgba(244,237,223,.6)}.discovery-image{aspect-ratio:4/3;box-shadow:none}.discovery-image img{object-position:center 40%}.form-card{background:var(--cream);color:var(--ink);padding:clamp(24px,4vw,38px)}
.stacked-form{display:grid;gap:17px}.stacked-form label>span{display:block;font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.stacked-form input:not([type=checkbox]),.stacked-form textarea,.stacked-form select{width:100%;border:1px solid rgba(6,59,45,.25);background:rgba(255,255,255,.56);border-radius:2px;padding:13px 14px;min-height:50px;color:var(--ink)}.stacked-form textarea{min-height:150px;resize:vertical}.stacked-form .checkbox{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}.stacked-form .checkbox input{margin-top:4px}.stacked-form .checkbox span{text-transform:none;letter-spacing:0;font-size:.73rem;font-weight:400;line-height:1.5}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status{display:none;padding:12px 14px;border:1px solid currentColor;font-size:.82rem}.form-status:not(:empty){display:block}.form-status.is-error{color:#9c2e26;background:#fff2ef}.form-status.is-success{color:#155c45;background:#e8f3ed}
.faq-layout{display:grid;grid-template-columns:.65fr 1fr;gap:clamp(50px,9vw,130px)}.faq{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item h3{margin:0}.faq-item button{width:100%;border:0;background:none;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:25px 0;font-family:Fraunces,serif;font-size:clamp(1.15rem,2vw,1.5rem);cursor:pointer}.faq-item button b{font-family:Archivo,sans-serif;font-weight:400;transition:transform .2s}.faq-item.is-open button b{transform:rotate(45deg)}.faq-answer{padding:0 48px 24px 0;color:rgba(21,54,44,.7)}.faq-answer p{margin:0}
.site-footer{position:relative;background:#02271e;color:var(--cream);padding:clamp(72px,9vw,120px) 0 32px;overflow:hidden}.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px}.site-footer .eyebrow{color:var(--sand)}.site-footer h2{font-size:clamp(2.8rem,5vw,5rem)}.footer-note{color:rgba(244,237,223,.6)}.site-footer address{font-style:normal;display:grid;align-content:start}.site-footer address a{padding:15px 0;border-bottom:1px solid rgba(244,237,223,.14);text-decoration:none}.site-footer address a:first-child{border-top:1px solid rgba(244,237,223,.14)}.footer-bottom{position:relative;z-index:1;margin-top:90px;padding-top:28px;border-top:1px solid rgba(244,237,223,.15);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}.footer-bottom img{width:210px}.footer-bottom nav{display:flex;gap:24px}.footer-bottom nav a{font-size:.75rem}.footer-bottom p{grid-column:1/-1;margin:0;color:rgba(244,237,223,.42);font-size:.7rem}
.sticky-cta{display:none}
.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.js .reveal.is-visible{opacity:1;transform:none}
.inner-hero{background:var(--deep);color:var(--cream);padding:calc(var(--header) + 80px) 0 80px;position:relative;overflow:hidden}.inner-hero .shell{position:relative;z-index:1}.inner-hero h1{font-size:clamp(3rem,7vw,6.2rem);margin-bottom:20px}.inner-hero p:last-child{max-width:670px;color:rgba(244,237,223,.72);font-size:1.1rem}.content-section{padding:70px 0 110px}.content-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(50px,9vw,130px)}.contact-details{display:grid;gap:20px;align-content:start}.contact-details a{padding-bottom:18px;border-bottom:1px solid var(--line);text-decoration:none}.contact-details strong,.contact-details span{display:block}.contact-details strong{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#9b6c3c}.legal-copy{max-width:800px}.legal-copy h2{font-family:Fraunces,serif;font-size:2rem;letter-spacing:-.02em;line-height:1.2;margin:45px 0 12px}.legal-copy h2:first-child{margin-top:0}.legal-copy p,.legal-copy li{color:rgba(21,54,44,.78)}.legal-copy .draft-notice{padding:18px 20px;border:1px solid #b8874b;background:#f5e7d0;color:var(--ink)}
.result-card{max-width:760px;margin:auto;background:var(--white);border:1px solid var(--line);padding:clamp(28px,6vw,65px);box-shadow:var(--shadow)}.result-icon{width:56px;height:56px;border-radius:50%;background:var(--forest);color:var(--cream);display:grid;place-items:center;font-size:1.5rem;margin-bottom:26px}.result-card h1{font-size:clamp(2.7rem,6vw,5rem);color:var(--forest)}.result-card .lede{margin-bottom:30px}.order-summary{display:grid;border-top:1px solid var(--line);margin:25px 0}.order-summary div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.84rem}.order-summary dt{font-weight:700}.order-summary dd{text-align:right;margin:0}.loading-pulse{animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.45}}
@media(max-width:1080px){.desktop-nav{display:none}.menu-button{display:block;margin-left:auto}.header-cta{margin-left:0}.credit-grid{grid-template-columns:1fr 1fr}.owners-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:760px){:root{--shell:calc(100% - 34px);--header:72px}html{scroll-padding-top:72px}body{padding-bottom:84px}.site-logo img{width:145px}.header-cta{display:none}.hero{min-height:790px}.hero-media img{object-position:56% center}.hero-shade{background:linear-gradient(0deg,rgba(2,29,22,.92) 0%,rgba(2,29,22,.42) 70%,rgba(2,29,22,.55))}.hero-content{padding-bottom:88px}.hero-copy .lede{font-size:1rem}.scroll-cue{display:none}.button-row{display:grid}.button-row .button{width:100%}.split,.pricing-layout,.owners-grid,.discovery-grid,.faq-layout,.content-grid,.footer-grid{grid-template-columns:1fr}.split{gap:45px}.split-access .image-frame{grid-row:1;margin-top:0}.split-access .section-copy{grid-row:2}.essentials-heading{margin-bottom:40px}.visual-grid{grid-template-columns:1fr;gap:16px}.image-frame-wide{aspect-ratio:4/5}.image-frame-wide img{object-position:center}.fact-grid article{min-height:105px;padding:18px}.fact-grid strong{font-size:2.1rem}.pricing-layout{gap:30px}.pricing-notes{grid-column:auto;display:grid}.price-list article{padding:20px 15px}.price-list p{font-size:1.8rem}.owners-grid{gap:0}.owners-copy{padding:75px 0 36px}.owners-image{min-height:420px;margin-inline:-17px}.owners-bg img{mask-image:linear-gradient(0deg,#000 80%,transparent)}.founder-grid,.credit-grid{grid-template-columns:1fr}.offer-card{min-height:auto}.checkout-actions{display:grid}.checkout-actions .button{width:100%}.credit-card{min-height:320px}.discovery-signup{margin-inline:-17px}.form-card{margin:0 17px}.faq-layout{gap:25px}.footer-bottom{grid-template-columns:1fr;align-items:start}.footer-bottom nav{grid-row:2}.footer-bottom p{grid-column:auto}.sticky-cta{position:fixed;z-index:45;left:0;right:0;bottom:0;min-height:76px;padding:10px 12px;background:rgba(3,43,34,.97);color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -8px 30px rgba(0,0,0,.18);transform:translateY(110%);transition:transform .25s}.sticky-cta.is-visible{transform:none}.sticky-cta strong,.sticky-cta span{display:block}.sticky-cta strong{font-size:.78rem}.sticky-cta span{font-size:.62rem;color:rgba(244,237,223,.65)}.sticky-cta .button{flex:0 0 auto}.content-section{padding:55px 0 80px}.inner-hero{padding-top:calc(var(--header) + 56px)}.order-summary div{display:grid;gap:2px}.order-summary dd{text-align:left}}
@media(max-width:390px){:root{--shell:calc(100% - 28px)}h1{font-size:3rem}.section{padding:75px 0}.button{padding-inline:16px}.offer-tabs{display:grid;width:100%;margin:30px 0}.sticky-cta span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}}
@media(print){.site-header,.mobile-menu,.sticky-cta,.site-footer{display:none!important}.inner-hero{padding:40px 0;background:white;color:black}.content-section{padding:30px 0}}
.offer-card h3 small{font-family:Archivo,sans-serif;font-size:.78rem;letter-spacing:.02em}.credit-grid-five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.credit-grid-five{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.credit-grid-five{grid-template-columns:1fr}}


/* ===== Hero alignment to the approved mobile mockup — 12 Sept 2026 ======
   Six scoped corrections, hero only. Everything else in the supplied
   design system is untouched on purpose: the display face stays Fraunces,
   the hero copy stays, and both CTAs stay. Appended rather than edited in
   place so the original rules remain readable above. */

/* 2 — the rule belongs under the eyebrow, not beside it (hero only; every
       other section keeps the inline rule it was designed with) */
.hero-copy .eyebrow::before{display:none}
.hero-copy .eyebrow::after{content:'';display:block;width:56px;height:1px;
  background:currentColor;margin-top:15px;opacity:.9}

/* 3 — the hero CTAs are pills, sized to their words */
.hero-copy .button{border-radius:999px;text-transform:uppercase;
  letter-spacing:.13em;padding:15px 30px;min-height:56px}

/* 5 — a scroll cue at the foot of the hero. The stylesheet already carried
       a .scroll-cue rule, but no page ever rendered the element. */
.scroll-cue-chevron{position:absolute;z-index:3;left:50%;bottom:24px;
  transform:translateX(-50%);color:var(--cream);opacity:.72;display:none;
  line-height:0;text-decoration:none;padding:10px;
  transition:opacity .2s ease,transform .2s ease}
.scroll-cue-chevron svg{display:block}
@media(hover:hover){.scroll-cue-chevron:hover{opacity:1}}
.scroll-cue-chevron:focus-visible{opacity:1;outline:2px solid var(--sand);
  outline-offset:4px;border-radius:4px}

@media(max-width:760px){
  /* 6 — the hero was 790px tall with the copy pinned to the bottom, which
         left roughly a third of the screen empty under the header. One
         screen, copy near the top. */
  .hero{min-height:100svh;align-items:start}
  .hero-content{padding-top:calc(var(--header) + 26px);
    padding-bottom:clamp(190px,32vh,300px)}

  /* 4 — the photograph was flattened to near-black at the bottom and the
         buttons sat on top of it. Darken where the words are, clear where
         the ball is, and lift the crop so the ball reads. */
  .hero-media img{object-position:58% 66%}
  .hero-shade{background:linear-gradient(180deg,
    rgba(2,29,22,.95) 0%, rgba(2,29,22,.9) 40%,
    rgba(2,29,22,.5) 72%, rgba(2,29,22,.1) 100%)}

  /* 3 (cont.) — the global mobile rule stretches every button to full
         width; in the hero they hug their labels and sit left */
  .hero-copy .button-row{display:flex;flex-direction:column;
    align-items:flex-start;gap:13px}
  .hero-copy .button-row .button{width:auto}

  .scroll-cue-chevron{display:block}
}


/* ================================================================== *
 *  Review pass — 12 September 2026                                    *
 *  One commented block per change, appended rather than edited in     *
 *  place, so the original package rules stay readable above and any   *
 *  single change can be lifted back out.                              *
 * ================================================================== */

/* --- #2  Hero: give the logo room, hold the copy at the top -------- *
 * The mark rendered 99px tall inside a 72px bar and .header-row
 * centres it, so it overflowed above and below. Size the logo to fit
 * with real air, and reclaim the height from the copy block, which had
 * pushed the club and ball down to 11% of the screen on a small phone. */
:root{--header:112px}
.site-logo img{width:140px}
.hero-copy .eyebrow{margin-bottom:14px}
.hero-copy h1{margin-bottom:16px}
.hero-copy .button-row{margin-top:24px}

/* --- #9  Owners: close the dead band above the still life ---------- *
 * Three things stacked: the copy's bottom padding, a mask fading the
 * image's top to nothing, and a centred crop landing on the photo's own
 * dark upper third instead of the subject. */
.owners-bg img{object-position:50% 74%}

/* --- #5  Image frames span the container, one ratio ---------------- *
 * The frames were never narrower than their column; the uneven grid
 * splits (.85fr/1.25fr, 1fr/.82fr) made them look inset. Single column,
 * full shell width, and 4:3 — the widest ratio that still keeps 60% of
 * a 4:5 portrait, which matters for the frames with people in them. */
.image-frame,.image-frame-portrait,.image-frame-tall,.image-frame-wide{aspect-ratio:4/3}
.image-frame-wide img{object-position:center 58%}
.split,.visual-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
.split-access .image-frame,.split-access .section-copy{grid-row:auto}

/* --- #8  Footer: half the height, and an actual ask ---------------- *
 * 822px on a phone for a sign-off, an address and three links. The
 * footer also carries data-sticky-suppress, so the sticky CTA hides
 * there and the last screen of the site asked for nothing at all. */
.site-footer{padding-block:clamp(48px,6vw,80px) 24px}
.site-footer h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.site-footer address a{padding:10px 0;border-bottom:0}
.site-footer address a:first-child{border-top:0}
.site-footer address{gap:0}
.footer-cta{margin-top:16px;justify-self:start;border-radius:999px;
  text-transform:uppercase;letter-spacing:.13em}
.footer-grid{gap:clamp(28px,4vw,56px)}
.footer-bottom{margin-top:32px;padding-top:20px;gap:14px}
.footer-bottom img{width:124px}

@media(max-width:760px){
  :root{--header:96px}
  .site-logo img{width:118px}

  /* #2 — the copy block ends around 55% now, so the photograph keeps
     the bottom 45% the way the approved mockup has it */
  .hero-content{padding-top:calc(var(--header) + 18px);
    padding-bottom:clamp(210px,36vh,320px)}
  .hero-copy h1{font-size:clamp(2.6rem,11vw,3rem);margin-bottom:14px}
  .hero-copy .lede{margin-top:0}

  /* #4 — with the lifestyle photo gone, the negative/positive margin
     pair that let it bleed to the screen edge cancels out to nothing */
  .discovery-signup{margin-inline:0}
  .form-card{margin:0}
  .discovery-grid{gap:28px}

  /* #9 — soften the fade so the glove and club start where the copy ends */
  .owners-image{min-height:340px}
  .owners-bg img{mask-image:linear-gradient(0deg,#000 94%,transparent)}
  .owners-copy{padding:64px 0 20px}

  /* one row for the mark and the links instead of three stacked blocks */
  .footer-bottom{margin-top:26px;grid-template-columns:auto 1fr;align-items:center;gap:10px 16px}
  .footer-bottom nav{grid-row:1;grid-column:2;justify-content:flex-end;gap:14px;flex-wrap:wrap}
  .footer-bottom p{grid-column:1/-1}
  .footer-bottom img{width:112px}
}

@media(min-width:761px){
  /* #4 — the form card is now the whole right column */
  .discovery-grid{gap:clamp(40px,6vw,80px)}
}


/* --- #6  Rate card: two bay columns, public prices ----------------- *
 * Was three flex rows repeating "Public / Fondateur" beside values it
 * sat a full row-width away from, with the member rate set at 11.5px
 * against a 28.8px public price. It is a table, so it is built as one:
 * one header row, right-aligned numeric columns, tabular figures, and
 * a real th/scope relationship for screen readers. Member rates leave
 * the public card entirely — they belong with the offer. */
.rate-card{border-top:1px solid var(--line)}
.rate-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rate-table caption{caption-side:bottom;text-align:left;padding-top:16px;
  font-size:.78rem;color:rgba(21,54,44,.7)}
.rate-table th,.rate-table td{padding:16px 0;border-bottom:1px solid var(--line);
  vertical-align:baseline}
.rate-table thead th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(21,54,44,.58);padding-bottom:10px}
.rate-table th[scope=row]{text-align:left;font-weight:400;padding-right:14px}
.rate-table th[scope=row] b{display:block;font-family:Fraunces,serif;
  font-size:1.28rem;font-weight:400;line-height:1.15}
.rate-table th[scope=row] span{display:block;margin-top:4px;font-size:.72rem;
  line-height:1.45;color:rgba(21,54,44,.58)}
.rate-table thead th:not(:first-child),
.rate-table td{text-align:right;font-family:Fraunces,serif;font-size:1.5rem;
  width:5.2rem;white-space:nowrap}
.rate-table thead th:not(:first-child){font-family:Archivo,sans-serif;font-size:.68rem}
.rate-table tbody tr:last-child th,.rate-table tbody tr:last-child td{border-bottom:0}

@media(max-width:420px){
  .rate-table th[scope=row] b{font-size:1.12rem}
  .rate-table td{font-size:1.24rem;width:4.1rem}
  .rate-table th,.rate-table td{padding:13px 0}
}


/* --- #7  Offers: say the product once, price it twice -------------- *
 * 60 % of each Founder card was word-for-word identical to the other,
 * and a card was 82 % of a phone viewport, so two offers could never be
 * compared. The shared terms are stated once above the cards; the cards
 * carry only what differs. */
.offer-shared-head{margin-top:26px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.offer-shared{list-style:none;margin:12px 0 26px;padding:0;
  display:grid;gap:0;border-top:1px solid rgba(21,54,44,.16)}
.offer-shared li{padding:11px 0;border-bottom:1px solid rgba(21,54,44,.16);
  font-size:.94rem;line-height:1.5}
.offer-card ul{margin-top:14px}

/* one notice and one working action while nothing can be sold */
.offer-soon{margin:22px 0 26px;padding:18px 20px;border:1px solid rgba(21,54,44,.2);
  border-radius:3px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between}
.offer-soon p{margin:0;font-size:.94rem;max-width:34rem}
.offer-soon .button{border-radius:999px;text-transform:uppercase;letter-spacing:.13em;
  flex:0 0 auto}

@media(min-width:761px){
  .founder-grid{grid-template-columns:1fr 1fr;gap:22px}
  .offer-shared{grid-template-columns:1fr 1fr;column-gap:32px}
}

/* card tail: with no buy button rendered, the last rule and the card's
   bottom padding left ~90px of dead green under every offer */
.offer-card ul li:last-child{border-bottom:0;padding-bottom:0}
.offer-card ul{margin-bottom:0}
.offer-alt span{white-space:normal}
.offer-alt{line-height:1.5}
.offer-alt .offer-save{color:rgba(244,237,223,.72);font-weight:500;font-size:.85rem;margin-top:2px}


/* --- #3  Sections 1 and 2 ------------------------------------------ *
 * §1 states what the place is, using the four claims the coming-soon
 * page carried and the MVP never did. §2 merges the old #how and
 * #essentials, which were two sections making one argument. The icon
 * strip reuses icons that shipped in the package unused. */
.claim-strip{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.claim-strip li{background:var(--sand-bg,var(--cream));display:flex;align-items:center;
  gap:14px;padding:18px 20px;font-size:.94rem;line-height:1.35}
.claim-strip img{flex:0 0 auto;width:26px;height:26px;opacity:.9}
.section.sand .claim-strip li{background:#F1EADD}
.steps{margin-top:34px}
#how .image-frame{margin-top:34px}
#how .claim-strip-two{margin-top:22px}
@media(min-width:761px){
  .claim-strip{grid-template-columns:1fr 1fr}
  .claim-strip-two{grid-template-columns:1fr 1fr}
}
@media(min-width:1100px){
  #about .claim-strip{grid-template-columns:repeat(4,1fr)}
}

/* --- #11  Hero CTA: smaller, quieter -------------------------------- *
 * The pill was 56px tall with 30px flanks, .13em tracking and an 18px
 * gap before the arrow — on a phone it read as a banner, not a button.
 * Same shape and same fill, roughly two thirds the visual weight. */
.hero-copy .button{padding:11px 22px;min-height:44px;
  font-size:.74rem;letter-spacing:.09em;gap:10px}
.hero-copy .button span{font-size:.9em;opacity:.85}
@media(max-width:760px){
  .hero-copy .button{padding:10px 20px;min-height:42px;font-size:.72rem}
}

/* --- #12  Offers: credits-first, both offers as swipe sliders ------- *
 * Tabs removed. Credits lead as the primary push; passes follow. Both
 * are horizontal scroll-snap sliders with dots + desktop arrows. */
.offers-divider{margin-top:clamp(58px,9vw,96px);padding-top:clamp(30px,5vw,46px);border-top:1px solid var(--line)}
.slider-wrap{position:relative;margin-top:26px}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;
  scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:center;flex:0 0 84%;width:84%;margin:0}
.slider .offer-card{min-height:auto}
.slider .credit-card{position:relative;min-height:300px}
.slider-dots{display:flex;gap:9px;justify-content:center;margin-top:18px;min-height:10px}
.slider-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;
  background:rgba(21,54,44,.24);cursor:pointer;transition:background .2s ease,transform .2s ease}
.slider-dots button.is-active{background:var(--forest);transform:scale(1.35)}
.slider-arrow{position:absolute;top:44%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:999px;border:1px solid var(--line);
  background:var(--cream);color:var(--forest);font-size:1.7rem;line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.12);transition:transform .15s ease,background .2s ease}
.slider-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.slider-arrow-prev{left:-14px}
.slider-arrow-next{right:-14px}
.credit-ribbon{position:absolute;top:0;right:0;z-index:2;background:var(--sand);
  color:var(--deep);font-size:.6rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;font-style:normal;padding:6px 12px;border-bottom-left-radius:8px}
@media(min-width:761px){
  .slider>*{flex-basis:calc(50% - 8px);width:auto}
  .slider-credits>*{flex-basis:calc(33.333% - 11px)}
  .slider-arrow{display:flex}
  .slider-wrap{padding:0 6px}
}
@media(max-width:760px){
  .slider-credits>*{flex-basis:90%;width:90%}
}
@media(max-width:420px){
  .slider>*{flex-basis:88%}
  .slider-credits>*{flex-basis:90%}
}

/* --- #14  Image frames span the full content width ----------------- *
 * <figure> carries a UA default horizontal margin (~40px each side),
 * insetting every image frame relative to the text and cards in the
 * same shell. Reset it so frames line up edge-to-edge with content. */
.image-frame{margin-left:0;margin-right:0;width:100%}

/* --- #16  Credit cards v4: concept card first, price-first tiers ------ *
 * Information order is the fix: badge → amount loaded (hero) → bonus play
 * time (second hero) → one-line proof equation → full-width "Ajouter".
 * Overrides the legacy .credit-card>span / >p / h3 rules from the first
 * grid layout. Cards share one height inside the slider (align stretch). */
.slider-credits{align-items:stretch;padding:6px 2px 10px}
.slider .credit-card,.credit-card{min-height:0;display:flex;flex-direction:column;
  flex-wrap:nowrap;align-items:stretch;gap:0;background:var(--cream);
  border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,28px) clamp(20px,3vw,26px);
  text-align:left;position:relative;overflow:hidden}
.credit-card>.credit-bonus{align-self:flex-start;display:inline-flex;align-items:center;
  background:var(--sand);color:var(--deep);font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin:0}
.credit-card .credit-paid{margin:18px 0 0;display:block}
.credit-card .credit-paid-num{display:block;font-family:Fraunces,serif;font-weight:400;
  font-size:clamp(3.2rem,4.4vw,4.2rem);line-height:.9;color:var(--forest)}
.credit-card .credit-paid-label{display:block;margin:6px 0 0;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:rgba(21,54,44,.52)}
.credit-card .credit-gift{margin:16px 0 0;display:block}
.credit-card .credit-gift-num{display:block;font-family:Fraunces,serif;font-weight:600;
  font-size:clamp(1.9rem,2.6vw,2.3rem);line-height:1;color:#8a6d3f}
.credit-card .credit-gift-label{display:block;margin:3px 0 0;font-size:.84rem;font-weight:500;color:var(--forest)}
.credit-card>.credit-equation{margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:.84rem;font-weight:500;color:rgba(21,54,44,.6);text-transform:none;letter-spacing:0}
.credit-card>.credit-equation strong{color:var(--forest);font-weight:600}
.credit-card .credit-arrow{margin:0 5px;color:#8a6d3f;font-weight:700}
.credit-card .button{flex:0 0 auto;margin-top:16px;width:100%}
/* concept / intro card — forest green, editorial */
.credit-card.credit-intro{background:var(--forest);border-color:var(--forest);color:var(--cream);justify-content:flex-start}
.credit-intro .credit-intro-eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);font-weight:600;background:none;padding:0}
.credit-card.credit-intro h3{font-family:Fraunces,serif;font-weight:400;font-size:clamp(1.8rem,2.5vw,2.2rem);
  line-height:1.05;margin:12px 0 10px;color:#fff}
.credit-intro .credit-intro-lead{font-family:Fraunces,serif;font-size:1.08rem;line-height:1.25;color:var(--sand);
  margin:0 0 10px;font-weight:500;text-transform:none;letter-spacing:0}
.credit-intro .credit-intro-body{font-size:.86rem;line-height:1.45;color:rgba(244,237,223,.82);margin:0 0 12px;text-transform:none;letter-spacing:0}
.credit-intro .credit-intro-facts{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:6px}
.credit-intro .credit-intro-facts li{font-size:.82rem;color:var(--cream);padding-left:18px;position:relative}
.credit-intro .credit-intro-facts li::before{content:"✓";position:absolute;left:0;color:var(--sand);font-weight:700}
.credit-intro .credit-intro-cta{margin-top:14px;background:transparent;border:1.5px solid rgba(244,237,223,.5);color:var(--cream)}
.credit-intro .credit-intro-cta:hover{background:rgba(244,237,223,.1)}
/* spotlight (500 $) */
.credit-card.credit-featured{background:var(--forest);border-color:var(--forest);color:var(--cream);box-shadow:0 20px 46px rgba(2,29,22,.30)}
.credit-featured .credit-paid-num{color:#fff}
.credit-featured .credit-paid-label{color:rgba(244,237,223,.6)}
.credit-featured .credit-gift-num{color:var(--sand)}
.credit-featured .credit-gift-label{color:var(--cream)}
.credit-featured>.credit-equation{border-top-color:rgba(244,237,223,.2);color:rgba(244,237,223,.72)}
.credit-featured>.credit-equation strong{color:#fff}
.credit-featured .credit-arrow{color:var(--sand)}
.credit-featured .button{background:var(--sand);border-color:var(--sand);color:var(--deep)}
/* premium (maximum bonus, last card) — deeper green, gold frame */
.credit-card.credit-premium{background:var(--deep);border:1.5px solid var(--sand);color:var(--cream);box-shadow:0 20px 46px rgba(2,29,22,.4)}
.credit-premium .credit-paid-num{color:#fff}
.credit-premium .credit-paid-label{color:rgba(244,237,223,.6)}
.credit-premium .credit-gift-num{color:var(--sand)}
.credit-premium .credit-gift-label{color:var(--cream)}
.credit-premium>.credit-equation{border-top-color:rgba(244,237,223,.2);color:rgba(244,237,223,.72)}
.credit-premium>.credit-equation strong{color:#fff}
.credit-premium .credit-arrow{color:var(--sand)}
.credit-premium .button{background:var(--sand);border-color:var(--sand);color:var(--deep)}
.credit-premium .credit-ribbon{background:linear-gradient(90deg,#c9ad74,#e4cf9a);color:var(--deep)}
.credit-ribbon{position:absolute;top:0;right:0;z-index:2;background:var(--sand);color:var(--deep);
  font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-style:normal;
  padding:6px 12px;border-bottom-left-radius:8px;border-top-right-radius:9px}
.offer-helper-credits{text-align:center;border:0;padding:16px 0 0;color:rgba(21,54,44,.7)}
.offer-helper-credits strong{display:inline;color:var(--forest)}
@media(min-width:761px){.slider-credits>*{flex-basis:calc(33.333% - 11px)}}

/* --- #17  Slider stability on touch ---------------------------------- *
 * Cards no longer carry .reveal (their slide-up played as each one was
 * swiped into view, reading as vertical wobble). Lock the scroller to its
 * own axis and stop horizontal overscroll from chaining to the page. */
.slider{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.slider>*{transform:none;opacity:1;transition:none}

/* --- #18  One design language: the credit cards set the tone ---------- *
 * Rounded corners (12 px cards, 10 px strips/notes, 8 px buttons/inputs),
 * generous but consistent padding, sentence-case buttons. Replaces the
 * 2–4 px corners and the uppercase pill buttons that predate the cards. */
:root{--radius:10px}
.button{border-radius:8px;text-transform:none;letter-spacing:.01em;font-size:.92rem;padding:14px 22px;gap:10px}
.button-small{min-height:42px;padding:10px 16px;font-size:.86rem}
.hero-copy .button,.footer-cta,.offer-soon .button{border-radius:8px;text-transform:none;letter-spacing:.01em}
.hero-copy .button{font-size:.92rem;padding:13px 22px;min-height:48px}
.offer-card{border-radius:12px;padding:clamp(24px,3.4vw,36px)}
.offer-card h3{margin-top:18px}
.checkout-actions .button{border-radius:8px}
.claim-strip{border-radius:10px;overflow:hidden}
.rate-card{border:1px solid var(--line);border-radius:12px;padding:clamp(16px,3vw,26px);background:rgba(255,253,248,.45)}
.form-card{border-radius:12px}
.stacked-form input:not([type=checkbox]),.stacked-form textarea,.stacked-form select{border-radius:8px}
.form-status{border-radius:8px}
.offer-helper{border-radius:10px;padding:18px 22px}
.offer-helper-credits{border:0;padding:16px 0 0}
.offer-soon{border-radius:10px}
.image-frame{border-radius:12px}
.result-card{border-radius:12px}
.faq{border:1px solid var(--line);border-radius:12px;padding:2px 22px;background:rgba(255,253,248,.4)}
.faq-item:last-child{border-bottom:0}
.owners-bg img{border-radius:12px}

/* --- #19  Slider edges: a real, even peek + soft fade, no clipped shadow -- *
 * Before: cards at 90 % with a 14 px gap left a 4 px sliver of the neighbour
 * mid-carousel (read as a stray bar) and 22 px at the ends; the featured
 * card's shadow was cut by the scroller. Now: cards at 84 %, 10 px gap,
 * 8 % gutters on both sides (so the first and last cards centre too), an
 * 18 px neighbour peek that fades into the section background, and room
 * below for the shadow. Desktop keeps 3-up / 2-up with no fade. */
.slider{gap:10px;padding:10px 8% 30px}
/* 100 % of the content box = 84 % of the scroller once the 8 % gutters are taken out */
.slider>*,.slider-credits>*{flex:0 0 100%;width:100%}
.slider-dots{margin-top:0}
.slider-wrap{--fade:var(--cream-2)}
.slider-wrap::before,.slider-wrap::after{content:"";position:absolute;top:0;bottom:34px;width:8%;max-width:44px;pointer-events:none;z-index:3}
.slider-wrap::before{left:0;background:linear-gradient(90deg,var(--fade) 20%,rgba(235,225,207,0))}
.slider-wrap::after{right:0;background:linear-gradient(270deg,var(--fade) 20%,rgba(235,225,207,0))}
@media(min-width:761px){
  /* gap ≥ the 23px shadow bleed of the featured/premium cards, so the
     next off-screen card's shadow never shows as a stripe at the edge */
  .slider{padding:10px 2px 30px;gap:28px}
  .slider>*{flex-basis:calc((100% - 28px) / 2);width:auto}
  .slider-credits>*{flex-basis:calc((100% - 56px) / 3);width:auto}
  /* grounded shadow, no side bleed: negative spread keeps it under the card */
  .slider .credit-card.credit-featured{box-shadow:0 22px 34px -16px rgba(2,29,22,.38)}
  .slider .credit-card.credit-premium{box-shadow:0 22px 34px -16px rgba(2,29,22,.48)}
  .slider-wrap::before,.slider-wrap::after{display:none}
}

/* --- #20  Footer CTA padding + a little air above the hero heading -- *
 * `.site-footer address a{padding:10px 0}` (0,1,2) was beating `.button`
 * (0,1,0), so the footer button lost its horizontal padding and the label
 * sat flush on the left edge. The hero kicker also sat 18px under the
 * header on phones — Matthieu asked for a touch more room. */
.site-footer address a.footer-cta{padding:14px 22px;margin-top:22px}
@media(max-width:760px){
  .hero-content{padding-top:calc(var(--header) + 36px)}
}

/* --- #21  Flat sliders + no dead band under the footer --------------- *
 * The edge fades read as grey pillars on iOS and the diffuse shadows of
 * the featured/premium cards bled into the gap, the neighbours and the
 * track below the cards. Everything in the sliders is now flat: solid
 * fills, hairline borders, rounded corners, clean 8% peek, no fade.
 * The 84px body reserve for the sticky CTA showed as an empty cream band
 * under the footer (the footer suppresses the sticky anyway). */
.slider-wrap::before,.slider-wrap::after{display:none}
.credit-card.credit-featured,.credit-card.credit-premium,
.slider .credit-card.credit-featured,.slider .credit-card.credit-premium{box-shadow:none}
.slider{padding-bottom:22px}
.image-frame{box-shadow:0 14px 34px -14px rgba(2,29,22,.35)}
.result-card{box-shadow:none}
html{background:var(--deep)}
@media(max-width:760px){body{padding-bottom:0}}
/* ribbon inset from the rounded corner (it used to sit on top of it and
   its tail peeked as a stray letter from the neighbouring slide) */
.credit-ribbon{top:12px;right:12px;border-radius:6px;padding:5px 10px}

/* --- #22  Mobile slider ends: first card flush left, last flush right *
 * Middle cards stay centred with an even peek on both sides; the first
 * and last snap to the shell edges instead of floating in the middle. */
@media(max-width:760px){
  .slider{padding-left:0;padding-right:0}
  .slider>*,.slider-credits>*{flex:0 0 84%;width:84%}
  .slider>*:first-child{scroll-snap-align:start}
  .slider>*:last-child{scroll-snap-align:end}
}

/* --- #23  Owner revision of 14 September 2026 ------------------------ *
 * New furniture: the overnight rate strip under the table, the two-column
 * Founder terms (what you get / what the rules are), the asterisk note that
 * explains peak-bay access, and the quiet asides under both helper lines. */

/* Overnight band — the cheapest hour, so it gets its own block under the
   table rather than a fourth row that reads like an afterthought. */
.rate-night{margin-top:20px;border:1px solid var(--line);border-radius:12px;
  background:var(--forest);color:var(--cream);padding:18px 22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.rate-night-copy{display:grid;gap:3px;max-width:30rem}
.rate-night-copy strong{font-family:Fraunces,Georgia,serif;font-size:1.32rem;font-weight:400;
  color:var(--sand);letter-spacing:.01em}
.rate-night-copy span{font-size:.88rem;color:rgba(244,237,223,.78);line-height:1.45}
.rate-night-prices{display:flex;gap:26px;margin:0}
.rate-night-prices div{display:grid;gap:2px}
.rate-night-prices dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,237,223,.6)}
.rate-night-prices dd{margin:0;font-family:Fraunces,Georgia,serif;font-size:1.7rem;line-height:1;
  font-variant-numeric:tabular-nums}

/* Founder terms: inclusions and rules side by side, so neither list reads as
   the fine print of the other. */
.offer-terms{display:grid;gap:26px;margin:30px 0 0}
.offer-terms-col .offer-shared-head{margin:0 0 10px}
.offer-terms-col .offer-shared{margin:0;grid-template-columns:1fr;column-gap:0}
.offer-rules li{color:rgba(21,54,44,.72)}
.offer-peak-note{margin:18px 0 0;font-size:.84rem;line-height:1.55;
  color:rgba(21,54,44,.66);max-width:64rem}
.offer-helper-aside{display:inline-block;margin-top:6px;color:rgba(21,54,44,.66)}
.offer-helper-aside a{color:inherit}
@media(min-width:761px){
  .offer-terms{grid-template-columns:1fr 1fr;gap:34px}
  .claim-strip-four{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .rate-night{flex-direction:column;align-items:flex-start}
  .rate-night-prices{gap:22px}
}
/* "/h" on every figure widened the price cells. The table is auto-layout, so a
   `width` is only a hint the label column can steal back — padding is what
   actually guarantees a gap between the Ouverte and Privée columns. */
.rate-table thead th:not(:first-child),.rate-table td{width:6.4rem;padding-left:16px}
@media(max-width:420px){
  .rate-table thead th:not(:first-child){font-size:.62rem;letter-spacing:.08em}
  .rate-table thead th:not(:first-child),.rate-table td{width:4.6rem;padding-left:12px}
  .rate-table td{font-size:1.1rem}
}

/* The buttons use margin-top:auto to sit at the bottom of the card. When the
   content fills the card there is no slack left for that auto margin to give,
   so "Choose monthly" ended up flush against the last list row — worst on
   mobile, where the commitment line wraps to two lines. Padding is not
   negotiable the way an auto margin is, so the gap always holds. The last row
   keeps padding-bottom:0 so a card with no button still has no dead space. */
.offer-card .checkout-actions{padding-top:12px}

/* --- #24  Founder section rebuilt, and the wide-screen typography ---- *
 * 16 September 2026. Two problems, one section.
 *
 * The first was order. The section opened with fifteen conditions in two
 * dense columns and put the two price cards below the fold: the reader met
 * a contract before an offer. Cards first now, four selling points under
 * them, and everything that qualifies or protects behind one disclosure.
 *
 * The second is that the display type outgrew its columns past ~1200px.
 * The pricing heading sat in a 450px column at a 70px font — thirteen
 * characters a line — so "Payez pour la / baie, / pas par / joueur."
 * text-wrap:balance fixes the orphan lines everywhere; the measures below
 * fix the columns that were simply too narrow for the size they carried. */

/* The four points that stay visible. Same component as the claim strips in
   §1 and §2 so it reads as part of the page, just without icons — there is
   no icon in the set for "20% off" and inventing one would look borrowed. */
.offer-terms-block{margin-top:26px}
.offer-peak-line{margin:14px 0 0;font-size:.86rem;line-height:1.5;
  color:rgba(21,54,44,.7)}


/* Ticked benefits inside each offer card, plus the footnote the price's * points
   at. The tick is decorative — the text carries the meaning. */
/* 18 Sep, Éric: "Pour le annual, rajoute une badge qui dit ''Best Value''".
   The same two words also sat in the kicker line; carrying both would say it
   twice on one card, so the kicker drops to "Annual · 12 months" and the badge
   takes the claim. The shape is the credit cards' badge, so the page keeps one
   vocabulary instead of gaining a second kind of label, and it stays quiet on
   purpose — the brand book asks for a single label here, never a starburst. */
.offer-badge{align-self:flex-start;background:var(--sand);color:var(--ink);
  padding:5px 9px;margin-bottom:14px;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:1}
/* 19 Sep: the flexible card carries "Plus flexible" / "More flexible". Outlined
   rather than filled, so the pair still has a leader — two solid sand badges
   read as two equal recommendations, which is the opposite of the point. The
   border sits inside the box so both badges keep the same height. */
.offer-badge-alt{background:transparent;color:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(216,193,157,.55)}
/* 24 Sep — headings on a phone, measured with the real fonts. Every title
   should take exactly as many lines as it has parts: the plain part, then the
   gold part on its own line (h1 em, h2 em are display:block). The earlier 8.2vw
   fix for the membership heading was sized against a fallback serif and still
   stacked three deep once Fraunces loaded.
   The size now follows the text column (viewport minus the 28px of padding),
   with a factor taken from the widest part of each heading in either language:
     section h2 — "Plus de golf pour le même budget." and "5 $ de rabais sur
                  votre" need 0.1075 x the column; 0.104 leaves 3 % of room.
     hero h1    — "Get your clubs ready," needs 0.1096 at 414px; 0.108.
     membership — "Become a Founding Member." needs 0.0803; 0.078.
   min() caps each at the size the shared rule already gives, so nothing grows
   and there is no jump at 520px. */
@media(max-width:520px){
  main h2:not(.legal-copy h2){font-size:min(2.65rem,calc((100vw - 28px) * .104))}
  .hero-copy h1{font-size:min(3rem,calc((100vw - 28px) * .108))}
  /* Final MVP plan (24 Sep). "18 places. Pas une de plus." fits the shared size,
     so the membership heading lost its own rule. Two headings still need one:
     "Entièrement libre-service." needs 0.0885 x 100vw-28 at 430px (0.087), and
     "Les nouvelles de Bogeys," needs 0.0939 (0.092). */
  #about .section-copy h2{font-size:min(2.65rem,calc((100vw - 28px) * .087))}
  .discovery-section .discovery-copy h2{font-size:min(2.65rem,calc((100vw - 28px) * .092))}
}
.offer-perks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.offer-perks li{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;line-height:1.45}
.offer-tick{flex:0 0 auto;font-size:.8rem;line-height:1.6;opacity:.9}
.offer-ref{font-size:.5em;vertical-align:super;margin-left:2px;opacity:.75;font-weight:400}
.offer-note{margin:14px 0 0;font-size:.74rem;line-height:1.45;opacity:.72}
.offer-disclosure-body{padding-bottom:10px}
.offer-disclosure-lead{margin:0;font-size:.9rem;color:rgba(21,54,44,.8)}
.offer-disclosure .offer-terms{margin-top:18px}
.offer-disclosure .offer-peak-note{margin-top:4px}

/* Headings. balance evens out the last line instead of leaving a six-letter
   orphan ("trois." on its own); the measures stop the breaks happening four
   words in. Paragraphs keep their own, narrower measure — a 880px line of
   body copy is a chore to read even when the heading above it needs one. */
h1,h2{text-wrap:balance}
.section-copy{max-width:min(880px,100%)}
.section-copy p{max-width:660px}

@media(min-width:761px){
  /* The rate card does not need two thirds of the row, and the heading beside
     it does. Widening the column and easing the clamp puts "Payez pour la
     baie," back on one line with the gold half under it. */
  .pricing-layout{grid-template-columns:1fr 1.12fr;gap:clamp(36px,6vw,92px)}
  .pricing-layout h2{font-size:clamp(2.4rem,4.4vw,4.4rem)}
  /* Three short sentences were being stretched across the whole 1240px shell,
     leaving two thirds of every row empty. */
  .steps{max-width:820px}
}

/* One behaviour for every strip. They were four-across in §1 and two-by-two
   in §2, which read as two different components doing the same job. */
@media(min-width:1100px){
  .claim-strip,.claim-strip-four{grid-template-columns:repeat(4,1fr)}
  .claim-strip-two{grid-template-columns:1fr 1fr}
  .claim-strip li{font-size:.88rem;padding:17px 18px;gap:12px}
}

/* The four points without icons read as a table row rather than as a claim
   strip. The check is the one the credit card already uses, in the gold that
   holds up on a light ground — the sand is too pale here. */
.offer-peak-line{margin:16px 2px 0}
/* 18 Sep: "make this drop down more obvious by making it a button please."
   It keeps being a <details>/<summary>, which is what gives it keyboard and
   screen-reader behaviour for free, and home.php gives the summary the site's
   own class="button button-ghost" — inventing a third button style is what made
   the first attempt look foreign.
   Two bugs from that attempt, both visible on a phone: an older rule further
   down the file overrode the padding and set :hover to gold, and a tap on
   mobile leaves :hover stuck, so the thing sat there gold-on-green. Hover is
   now gated behind a real pointer. */
.offer-disclosure{margin-top:22px}
.offer-disclosure>summary{list-style:none;justify-content:space-between;text-align:left;
  line-height:1.35;width:100%;max-width:430px}
.offer-disclosure>summary::-webkit-details-marker{display:none}
.offer-disclosure>summary::after{content:'';width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.offer-disclosure[open]>summary{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.offer-disclosure[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
@media(hover:hover){
  .offer-disclosure>summary:hover{background:var(--forest);border-color:var(--forest);color:var(--cream)}
}
.offer-disclosure-lead{margin:2px 0 0}
.offer-disclosure .offer-terms{margin-top:22px}

/* --- #25  Desktop stops being a mobile stack ------------------------ *
 * 16 September 2026. Past ~1100px the page was one column with wider
 * margins: heading, paragraph, list, picture, all full-bleed, left
 * aligned, nothing ever beside anything. Block #5 on 12 September is
 * where it started — it flattened .split and .visual-grid to 1fr at
 * EVERY width and forced every frame to 4:3, to fix frames that looked
 * inset inside uneven columns on a phone. The fix was right, its scope
 * was not, and the markup later stopped using those classes at all.
 *
 * Three moves: the hero copy rides at the top the way it already does on
 * a phone, section headers become title-beside-lede, and §2 gets a real
 * two-column body. Everything is gated above the phone breakpoint, so
 * mobile renders exactly as it did. */

@media(min-width:761px){
  /* The copy was pinned to the bottom of a 100svh hero, which pushed the
     headline into the lower third and buried the club and ball behind it.
     The phone rule at line 120 already does this; desktop just never got it. */
  .hero{align-items:start}
  .hero-content{padding-top:calc(var(--header) + 48px);
    padding-bottom:clamp(120px,16vh,200px)}
}

@media(min-width:1024px){
  /* Section header: the title holds the left column, the intro sits beside it
     on the same baseline. One rule for every full-width section — the two that
     already live inside a column of their own are excluded, or they would be
     split twice. */
  .section-copy{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(40px,6vw,96px);align-items:end;max-width:none}
  .section-copy>.eyebrow{grid-column:1;margin-bottom:14px}
  .section-copy>h2{grid-column:1;margin-bottom:0;max-width:none}
  .section-copy>.lede{grid-column:2;max-width:46ch;margin:0 0 10px}
  .pricing-layout .section-copy,.faq-layout .section-copy{display:block;max-width:min(880px,100%)}
  .pricing-layout .section-copy>h2,.faq-layout .section-copy>h2{margin-bottom:26px}

  /* §2: the copy column carries the header AND the steps, so it stands about
     as tall as the photo beside it. Pairing the photo with the steps alone left
     a 350px hole under three short sentences. The frame drops the blanket 4:3
     and goes back to the portrait it was shot as. */
  .how-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.66fr);
    gap:clamp(36px,5vw,80px);align-items:start}
  .how-copy .section-copy{display:block;max-width:none}
  .how-copy .section-copy>h2{margin-bottom:26px}
  .how-copy .section-copy>.lede{max-width:52ch}
  .how-layout .steps{margin:34px 0 0;max-width:none}
  .how-layout .image-frame{margin:0;aspect-ratio:4/5}
  #how .claim-strip{margin-top:38px}
}

/* balance was splitting "Préparez vos bâtons," as 8 + 11 characters, so the
   headline opened on a single word. The binding constraint was the h1's own
   930px cap, not .hero-copy: a 20-character run needs ~1180px at 118px, or a
   smaller type size. Both, slightly — 1120px of measure and a gentler ceiling
   put the line back together, and the gold half still lands on its own line
   under it. */
@media(min-width:1024px){
  .hero-copy{max-width:min(1120px,100%)}
  .hero-copy h1{font-size:clamp(3.4rem,6.6vw,6.2rem);max-width:min(1120px,100%)}
}

/* --- #26  Consent bar ------------------------------------------------ *
 * Required, not optional: the pixel is gated on consent, so without a way
 * to grant it the measurement layer never fires at all. Hawkesbury sits on
 * the Québec line and a good share of the traffic will be Québec
 * residents, where Law 25 applies — declining has to be as easy as
 * accepting, and the site has to work identically either way.
 *
 * It sits above the sticky CTA on mobile and disappears for good once
 * answered, so it is never the thing a returning visitor sees first. */
.consent-bar{position:fixed;z-index:60;left:0;right:0;bottom:0;
  background:rgba(2,39,30,.97);color:var(--cream);
  padding:16px clamp(17px,4vw,40px);display:flex;align-items:center;
  gap:clamp(14px,3vw,40px);flex-wrap:wrap;
  box-shadow:0 -10px 34px rgba(0,0,0,.24)}
.consent-bar p{margin:0;flex:1 1 320px;font-size:.82rem;line-height:1.5;
  color:rgba(244,237,223,.82)}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
.consent-bar .button-ghost{color:var(--cream);border-color:rgba(244,237,223,.5)}
@media(max-width:760px){
  /* Clear the sticky Discovery bar so the two never overlap. */
  .consent-bar{bottom:0;padding-bottom:14px}
  body:has(.consent-bar) .sticky-cta{bottom:var(--consent-height,132px)}
  .consent-bar p{flex-basis:100%;font-size:.78rem}
  .consent-actions{width:100%}
  .consent-actions .button{flex:1}
}

/* "What happens next" on the confirmation page. Someone who has just committed
   to twelve months should not have to guess what we do now — the card used to
   end on an order summary and two buttons. */
.result-next{margin:26px 0 30px;padding-top:22px;border-top:1px solid var(--line)}
.result-next-head{margin:0 0 12px;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#9b6c3c}
.result-next ol{margin:0;padding-left:1.1rem;display:grid;gap:9px}
.result-next li{color:rgba(21,54,44,.78);font-size:.92rem;line-height:1.5;padding-left:4px}

/* ==== #18  Desktop pass, 18 Sep 2026 ==============================
 * Three things still read as a phone layout stretched wide. None of them
 * touch copy, and none of them touch anything under 1024px.
 */

@media(min-width:1024px){
  /* 1. The two offer carousels stop being carousels.
     Below 1024 they earn their scroll-snap: a card is 84% of the viewport and
     you swipe. From 1024 up, every card already fits on screen at once — the
     credits row is four tiles, the memberships are two — so the arrows and the
     dots were controls for a scroll that had nothing left to scroll. The flex
     track becomes a grid: no overflow, no snap, and the cards inherit equal
     heights from the row instead of each ending wherever its own copy stops. */
  .slider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;scroll-snap-type:none;padding:0;align-items:stretch}
  /* Credits are four tiles. Four across needs about 1200px of window — at
     1024 each one is 223px and the "$200 paid → $220 to play" line starts
     fighting for room — so the row folds to two-by-two until then. */
  .slider-credits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .slider>*{flex:none;width:auto;scroll-snap-align:none}
  .slider-arrow,.slider-dots{display:none}
  .slider-wrap{padding:0}

  /* 2. Prices and FAQ: the left column holds a heading and stops, while the
     column beside it runs on for another 500px. The hole was the whole left
     half of the section. Making the heading sticky turns dead space into
     something that does a job — the section title stays with you while you
     read the rates or open the answers. */
  .pricing-layout .section-copy,.faq-layout .section-copy{position:sticky;
    top:calc(var(--header) + 44px)}
  .faq-layout{align-items:start}
  /* Sections carry overflow:hidden to contain the topographic pattern and the
     B watermark. hidden makes a scroll container, and a scroll container is
     exactly what stops position:sticky from doing anything. clip crops the
     same way without becoming one, so the decoration stays contained and the
     heading can travel. */
  #pricing,#faq{overflow:clip}
}

@media(min-width:1200px){
  .slider-credits{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* #19 Founding Membership, final structure (24 Sep 2026). One button per card,
   the annual price is a single payment, and the line under each button says
   what happens to the card today. */
.offer-price-once small{display:block;margin-top:10px}
.offer-alt .offer-equiv{color:var(--sand);font-weight:700}
.offer-today{position:relative;z-index:1;margin:12px 0 0;font-size:.78rem;line-height:1.45;font-weight:600;color:var(--sand);text-align:center}
/* One button per card now: it spans the card at every width, so the line under
   it stays centred on the button instead of floating beside it. */
.offer-card .checkout-actions{display:grid}
.offer-card .checkout-actions .button{width:100%}
/* 24 Sep — final MVP plan. The product name ("Annuel" / "Mensuel") is the card's
   title now and the value tag above it stays the small chip: tag < name < price.
   The credit card reads paid → extra → bonus % → total, so the % chip moved
   below the two amounts and needs its own space. */
.offer-kicker{font-family:Fraunces,serif;font-size:clamp(1.6rem,2.4vw,2rem);font-weight:500;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--cream)}
.offer-card h3{margin-top:10px}
.credit-card>.credit-bonus{margin:14px 0 16px}
.discovery-copy .discovery-incentive{margin:16px 0 0;font-weight:700;color:var(--sand)}
/* Side by side, the benefit lists of the two founder cards start on the same
   line: the annual card has two lines under its price, the monthly card one. */
@media(min-width:761px){.slider-passes .offer-alt{min-height:2.9em}}
/* Contact page (24 Sep, final MVP plan §15): the form in a card, the direct
   lines beside it on a desktop, under it on a phone. */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,5vw,64px);align-items:start}
.contact-section .form-card{margin:0;background:#fbf8f1;border:1px solid var(--line)}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.contact-aside{display:grid;gap:12px;padding-top:6px}
.contact-aside-head{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--forest);margin:0}
.contact-aside a{color:var(--forest);font-weight:600;overflow-wrap:anywhere}
.contact-aside p{margin:0;color:rgba(21,54,44,.72);line-height:1.5}
@media(max-width:760px){.contact-layout,.contact-row{grid-template-columns:1fr}}
/* Signature step before Stripe (24 Sep). */
.terms-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:0;border-radius:12px;padding:0;background:var(--cream);color:var(--ink);box-shadow:0 30px 80px rgba(2,29,22,.35)}
.terms-dialog::backdrop{background:rgba(2,29,22,.62)}
.terms-form{padding:clamp(22px,4vw,34px)}
.terms-form .eyebrow{margin:0}
.terms-form h3{font-family:Fraunces,serif;font-size:1.6rem;font-weight:500;line-height:1.15;margin:4px 0 0}
.terms-lines{margin:0;padding-left:1.1em;display:grid;gap:7px;font-size:.9rem;line-height:1.45}
.terms-tax{margin:0;font-size:.8rem;color:rgba(21,54,44,.7)}
.terms-tax a{color:var(--forest);font-weight:600}
.terms-actions{display:grid;gap:10px}
.terms-actions .button{width:100%}
.legal-copy ul{padding-left:1.2em;display:grid;gap:8px}
.legal-copy .terms-version{margin-top:40px;font-size:.8rem}
.terms-form [hidden]{display:none!important}

/* 24 Sep: the contact button sits right under the footer question. */
.footer-grid > div .footer-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:14px 22px}
/* 24 Sep: the "Témoins / Cookies" footer entry reopens the consent banner. It
   is a button (it does something, it goes nowhere) dressed as its neighbours. */
.footer-link-button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:.75rem;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.footer-link-button:hover{color:var(--sand)}
.footer-link-button:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.consent-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* --- #27  Desktop polish, 24 Sep (launch day) ------------------------ *
 * Three things a wide screen showed that a phone never will.
 *
 * 1. The owners photo runs the full height of the green band, but it kept the
 *    12px card corners, so its right edge read as a card cut off by the band.
 *    Square corners on a wide screen make it the full-height panel it is.
 *    (Running it to the window edge was tried and dropped: the photo is a 4:5
 *    portrait, and at 1920px the wider panel cropped the ball and the club.)
 * 2. The FAQ title sat alone at the top of a long list, leaving a tall empty
 *    column. It now stays in view while the questions scroll past.
 * 3. The menu was set at 12px, sized for a 1080px laptop; from 1280px up it
 *    grows a step so it reads at arm's length. */
@media(min-width:1081px){
  .owners-bg img{border-radius:0}
}
@media(min-width:1024px){
  .faq-layout>.section-copy{position:sticky;top:calc(var(--header) + 40px);align-self:start}
}
@media(min-width:1280px){
  .desktop-nav a{font-size:.8125rem}
}

/* --- #28  Orphans on wide screens, 24 Sep ----------------------------- *
 * With the real fonts loaded, the credits concept card set its title in
 * three lines on every desktop width ("…de crédits en / plus."), because
 * the four cards share a 1240px row and the title ran at 35px. A step down
 * and balanced lines put it back on two. Card and FAQ titles, and running
 * text, also stop leaving a single word on their last line where the
 * browser supports it (Chrome, Edge, Safari 17.5+, Firefox 121+ for balance;
 * pretty is ignored where unsupported). */
h3{text-wrap:balance}
p,li{text-wrap:pretty}
@media(min-width:1024px){
  .credit-card.credit-intro h3{font-size:1.75rem;text-wrap:balance}
}

/* --- #29  Desktop type scale and stacking, V1.1 (24 Sep) ------------ *
 * Headings were sized for a poster: two stacked lines at ~5vw left the
 * intro floating in a half-empty right column. On desktop the gold half
 * now runs inline (the colour carries the second beat), the scale drops
 * a step, and section padding tightens so each header reads in one glance.
 * Phones keep their own scale (rules above, max-width:760px). */
@media(min-width:1024px){
  .section{padding:clamp(76px,7vw,120px) 0}
  h2{font-size:clamp(2.6rem,3.5vw,3.3rem);line-height:1.03;letter-spacing:-.035em;margin-bottom:22px}
  main h2 em{display:inline}
  .section-copy{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,5vw,80px)}
  .section-copy>h2{max-width:none}
  .section-copy>.lede{font-size:1.125rem;max-width:44ch;margin:0 0 4px}
  .section-copy>.eyebrow{margin-bottom:12px}
  .pricing-layout h2{font-size:clamp(2.4rem,3.2vw,3.3rem)}
  .pricing-layout .section-copy>h2,.faq-layout .section-copy>h2,.how-copy .section-copy>h2{margin-bottom:20px}
  .hero-copy h1{font-size:clamp(3.4rem,5.6vw,5.5rem)}
  .offer-card h3{font-size:clamp(3rem,4vw,4.25rem);margin-top:14px}
  .discovery-copy h2,.owners-copy h2{max-width:16ch}
  .rate-tax{margin:14px 2px 0;font-size:.8rem;color:rgba(21,54,44,.62)}
  .how-layout .image-frame{aspect-ratio:1/1}
}
.rate-tax{margin:12px 2px 0;font-size:.78rem;color:rgba(21,54,44,.62)}

/* --- #30  Scrolled chrome: header, sticky bar, cookie bar, 28 Sep ------ *
 * On a phone inside the Instagram/Facebook browser (where ad traffic
 * lands), header + sticky bar + cookie bar together covered about half
 * the screen. Same look, less height:
 *  - header shrinks once the page scrolls;
 *  - only one bottom bar at a time: the sticky bar waits until the
 *    cookie choice is made (the bar is removed from the page then);
 *  - both bottom bars are tighter on mobile, the sticky bar on one line. */
.site-header,.site-logo img{transition:background .25s ease,box-shadow .25s ease,height .25s ease,width .25s ease}
.site-header.is-scrolled{height:84px}
.site-header.is-scrolled .site-logo img{width:118px}
body:has(.consent-bar) .sticky-cta{transform:translateY(110%)!important;visibility:hidden}
@media(max-width:760px){
  .site-header.is-scrolled{height:64px}
  .site-header.is-scrolled .site-logo img{width:92px}
  body{padding-bottom:64px}
  .sticky-cta{min-height:58px;padding:8px 12px}
  .sticky-cta span{display:none}
  .sticky-cta strong{font-size:.82rem}
  .sticky-cta .button{min-height:40px;padding-block:8px}
  .consent-bar{padding:12px 14px 12px;gap:10px}
  .consent-bar p{font-size:.72rem;line-height:1.42}
  .consent-actions{gap:8px}
  .consent-actions .button{min-height:40px;padding-block:8px}
}

/* --- #31  Hero image: tall on phones, wide on desktop, 1 Oct ----------- *
 * Phones (and portrait tablets) keep the tall driver-and-ball shot,
 * framed low so the ball sits under the copy. Landscape screens get the
 * wide version, where the club and ball sit right of centre; the heading
 * stack is held in the empty green on the left so it never runs over
 * the shaft. */
.hero-media img{object-position:center 82%}
@media(min-width:761px) and (min-aspect-ratio:1/1){
  .hero-media img{object-position:60% 55%}
  .hero-shade{background:linear-gradient(90deg,rgba(2,29,22,.78) 0%,rgba(2,29,22,.45) 38%,rgba(2,29,22,0) 62%),linear-gradient(0deg,rgba(2,29,22,.55) 0%,transparent 40%)}
  /* the copy ends at 47% of the screen whatever the shell offset, and the
     heading scales to that width so "Get your clubs ready," stays on one
     line left of the shaft */
  .hero-copy{--hero-left:max(24px,(100vw - 1240px) / 2);max-width:calc(47vw - var(--hero-left))}
  .hero-copy h1{font-size:clamp(2.4rem,calc((47vw - var(--hero-left)) / 9.2),4.9rem);max-width:none}
  .hero-copy .lede{max-width:34ch}
}

/* --- #32  "How it works" step 1 is tappable, 1 Oct ---------------------- *
 * Clarity: "Choose your bay and tee time online" was the 2nd most-tapped
 * element on the home page while being plain text (booking intent with
 * nowhere to go). The whole row now leads to the offers (home) or the
 * signup form (signup pages); the title carries the link, its ::after
 * stretches over the row. */
.steps li.step-linked{position:relative;transition:background .2s ease}
.step-link{color:inherit;text-decoration:none}
.step-link::after{content:'';position:absolute;inset:0}
.step-link span{display:inline-block;color:#9b6c3c;transition:transform .2s ease}
.step-link:focus-visible{outline:2px solid #9b6c3c;outline-offset:4px}
@media(hover:hover){.steps li.step-linked:hover{background:rgba(155,108,60,.06)}.steps li.step-linked:hover .step-link span{transform:translateX(3px)}}

/* #33 Founding-member welcome title: three lines at most, phone to desktop */
.result-card h1.result-title-long{font-size:clamp(1.6rem,7.4vw,3.2rem);line-height:1.08;text-wrap:balance}
:lang(fr) .result-card h1.result-title-long{font-size:clamp(1.25rem,5.6vw,2.7rem)}

/* --- #28  Owners: full-bleed background + framed photo of the three, 18 Oct --- *
 * The background photo now runs from the column to the window's right edge,
 * and the owners' own photo sits on it as a framed card, overlapping the fade
 * so it bridges the copy and the background. Phone: full-width band under the
 * copy, card centred on it. */
.owners-image{display:block}
.owners-bg{position:absolute;top:0;bottom:0;left:0;right:calc((100vw - min(1240px,100vw - 48px)) / -2)}
.owners-bg img{border-radius:0}
.owners-card{position:absolute;z-index:2;top:50%;left:-56px;width:min(460px,88%);translate:0 -50%;
  padding:8px;background:var(--cream);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.25);rotate:-1.5deg}
.owners-card picture,.owners-card img{display:block;width:100%;height:auto}
.owners-card img{aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;border-radius:8px}
@media(max-width:1080px){.owners-card{left:-24px;width:min(400px,92%)}}
@media(max-width:760px){
  .owners-image{min-height:auto;margin-inline:calc((100% - 100vw) / 2);padding:56px 0 64px}
  .owners-bg{right:0}
  .owners-card{position:relative;top:auto;left:auto;translate:none;width:min(86%,440px);margin-inline:auto;padding:6px;border-radius:12px;rotate:-1deg}
  .owners-copy{padding-bottom:8px}
}
@media(min-width:761px){.owners-bg img{object-position:50% 58%}}
/* #28b — desktop: card moves into the photo, bigger, more air from the copy */
@media(min-width:1081px){.owners-card{left:48px;width:min(600px,calc(100% + (100vw - min(1240px,100vw - 48px)) / 2 - 96px))}}
/* #28c — phone: owners photo first (above the eyebrow), glove band stays at the bottom */
@media(max-width:760px){
  .owners-image{display:contents}
  .owners-card{order:-1;margin-top:56px}
  .owners-copy{padding-top:36px}
  .owners-bg{position:relative;order:1;height:340px;right:auto;margin-inline:calc((100% - 100vw) / 2)}
}
/* #28d — phone: card spans the text column exactly, no tilt, softer shadow */
@media(max-width:760px){
  .owners-card{width:100%;margin-inline:0;rotate:none;box-shadow:0 10px 24px rgba(0,0,0,.22)}
}

/* --- #29  New pages, 18 Oct: contact map, About template, blog ---------- */
.preview-banner{position:sticky;top:var(--header);z-index:30;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:var(--gold);color:var(--deep);font-size:.84rem;font-weight:700;text-align:center}
.preview-banner a{color:var(--deep)}
.todo{background:rgba(202,165,114,.22);outline:1px dashed var(--gold);outline-offset:2px}

/* Contact — find us */
.find-section{background:var(--cream-2);padding:80px 0 100px}
.find-head{max-width:640px;margin-bottom:34px}
.find-head .eyebrow{color:var(--forest)}
.find-head h2{color:var(--forest);font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:14px}
.find-head p:not(.eyebrow){margin:0;font-size:1.05rem}
.find-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.find-photo{margin:0;border-radius:12px;overflow:hidden;min-height:360px;background:var(--forest)}
.find-photo picture,.find-photo img{display:block;width:100%;height:100%;object-fit:cover}
.find-map{position:relative;border-radius:12px;overflow:hidden;min-height:360px;background:#dfe5df;box-shadow:inset 0 0 0 1px var(--line)}
.find-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.find-directions{position:absolute;left:12px;bottom:30px;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.find-directions.button{width:auto}
@media(max-width:760px){
  .find-section{padding:56px 0 70px}
  .find-grid{grid-template-columns:1fr}
  .find-photo{min-height:0;aspect-ratio:3/2}
  .find-map{min-height:320px}
}

/* About */
.about-hero .lede{max-width:640px;font-size:clamp(1.1rem,1.6vw,1.35rem)}
.about-hero-media{margin:0;height:clamp(320px,52vw,640px);overflow:hidden;background:var(--deep)}
.about-hero-media picture,.about-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.about-page .content-section{padding:clamp(64px,8vw,110px) 0}
.about-page h2{color:var(--forest);font-size:clamp(2.3rem,4.6vw,4rem);margin-bottom:18px}
.about-story .eyebrow,.about-team .eyebrow,.about-space .eyebrow{color:var(--forest)}
.about-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:start}
.about-prose p{font-family:Fraunces,Georgia,serif;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;margin:0 0 1em}
.about-prose p:last-child{margin-bottom:0}
.about-values{position:relative;background:var(--forest);color:var(--cream);overflow:hidden}
.about-values .shell{position:relative;z-index:1}
.about-page .about-values h2{color:var(--cream)}
.about-page .about-values .eyebrow{color:var(--sand)}
.about-values-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.about-values-grid li{border-top:1px solid rgba(216,193,157,.4);padding-top:22px}
.about-value-n{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--sand)}
.about-values-grid h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:10px 0 8px;line-height:1.1}
.about-values-grid p{margin:0;color:rgba(244,237,223,.82)}
.about-team-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.about-team-photo{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.about-team-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.about-owners{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.about-owners li{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px}
.about-owners h3{font-size:2rem;margin:0;color:var(--forest);line-height:1.05}
.about-owner-role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:6px 0 12px}
.about-owners p:last-child{margin:0}
.about-space{background:var(--cream-2)}
.about-space-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center}
.about-space-photo{margin:0;border-radius:12px;overflow:hidden}
.about-space-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.about-list li{padding-left:28px;position:relative;font-weight:600}
.about-list li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--gold)}
.about-cta,.post-cta{position:relative;overflow:hidden;background:var(--deep);color:var(--cream);padding:clamp(64px,8vw,110px) 0;text-align:center}
.about-cta .shell,.post-cta .shell{position:relative;z-index:1;display:grid;justify-items:center}
.about-page .about-cta h2,.post-cta h2{color:var(--cream);margin:0 auto 14px;max-width:16ch;font-size:clamp(2.3rem,4.6vw,4rem)}
.about-cta p,.post-cta p{max-width:520px;margin:0 auto;color:rgba(244,237,223,.85)}
.about-cta .button-row{justify-content:center}
.post-cta .button{margin-top:28px;width:auto}
@media(max-width:900px){
  .about-split,.about-team-top,.about-space-grid{grid-template-columns:1fr}
  .about-values-grid,.about-owners{grid-template-columns:1fr}
  .about-space-photo{order:-1}
}

/* Blog listing */
.blog-list{padding-top:44px}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.blog-filters a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--forest);font-weight:600;font-size:.86rem;background:var(--white)}
.blog-filters a[aria-current="page"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.blog-empty{display:grid;justify-items:center;gap:14px;padding:60px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--forest);font-family:Fraunces,Georgia,serif;font-size:1.4rem}
.blog-empty img{opacity:.6}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--forest)}
.post-card-media picture,.post-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-placeholder{display:grid;place-items:center;height:100%}
.post-card-placeholder img{width:80px;height:80px;opacity:.5}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.post-meta{margin:0;font-size:.78rem;color:rgba(21,54,44,.7)}
.post-cat{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-size:.7rem}
.post-card-title{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.55rem;line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--forest)}
.post-card-title a{color:inherit;text-decoration:none}
.post-card-title a:hover{text-decoration:underline;text-underline-offset:3px}
.post-card-excerpt{margin:0;color:rgba(21,54,44,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-foot{margin:auto 0 0;padding-top:6px;display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:rgba(21,54,44,.65)}
.post-card-more{font-weight:700;color:var(--forest);text-decoration:none}
.post-card-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-bottom:28px}
.post-card-feature .post-card-media{aspect-ratio:auto;min-height:340px}
.post-card-feature .post-card-body{padding:clamp(24px,3vw,40px);justify-content:center}
.post-card-feature .post-card-title{font-size:clamp(1.9rem,3vw,2.7rem)}
.blog-pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:40px}
.blog-pager .button{width:auto;color:var(--forest)}
@media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .post-grid,.post-card-feature{grid-template-columns:1fr}
  .post-card-feature .post-card-media{min-height:0;aspect-ratio:3/2}
}

/* Blog article */
.post-hero{position:relative;overflow:hidden;background:var(--deep);color:var(--cream);padding:calc(var(--header) + 60px) 0 70px}
.post-hero-inner{position:relative;z-index:1;max-width:880px}
.post-crumbs{font-size:.8rem;margin-bottom:22px;color:rgba(244,237,223,.7)}
.post-crumbs a{color:var(--sand);text-decoration:none;font-weight:600}
.post-hero h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.02;margin-bottom:18px;color:var(--cream)}
.post-lede{font-family:Fraunces,Georgia,serif;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;color:rgba(244,237,223,.88);margin:0 0 20px}
.post-hero .post-meta{color:rgba(244,237,223,.7)}
.post-hero .post-meta strong{color:var(--cream)}
.post-cover{margin:-40px auto 0;position:relative;z-index:2;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);max-width:1080px}
.post-cover img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}
.post-layout{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;padding:56px 0 80px}
.post-layout.has-toc{grid-template-columns:220px minmax(0,720px);gap:56px}
.post-toc{position:sticky;top:calc(var(--header) + 30px);align-self:start;font-size:.86rem}
.post-toc p{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 10px}
.post-toc ol{margin:0;padding-left:18px;display:grid;gap:8px}
.post-toc a{color:var(--forest);text-decoration:none}
.post-toc a:hover{text-decoration:underline}
.post-body{font-size:1.1rem;line-height:1.75;color:var(--ink)}
.post-body>*:first-child{margin-top:0}
.post-body h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.03em;color:var(--forest);margin:1.8em 0 .6em;scroll-margin-top:calc(var(--header) + 20px)}
.post-body h3{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;color:var(--forest);margin:1.5em 0 .5em;scroll-margin-top:calc(var(--header) + 20px)}
.post-body p{margin:0 0 1.15em}
.post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:1.3em}
.post-body li{margin:.35em 0}
.post-body a{color:var(--forest);font-weight:600;text-underline-offset:3px}
.post-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);font-family:Fraunces,Georgia,serif;font-size:1.3rem;line-height:1.45;color:var(--forest)}
.post-body blockquote p{margin:0}
.post-figure{margin:1.8em 0}
.post-figure img{display:block;width:100%;height:auto;border-radius:10px}
.post-figure figcaption{font-size:.85rem;color:rgba(21,54,44,.7);margin-top:8px}
.post-updated{font-size:.85rem;color:rgba(21,54,44,.65)}
.post-author{display:flex;align-items:center;gap:14px;margin-top:40px;padding:20px;border-radius:12px;background:var(--forest);color:var(--cream)}
.post-author img{flex:0 0 auto}
.post-author p{margin:0;line-height:1.4}
.post-author span{font-size:.85rem;color:rgba(244,237,223,.7)}
.post-related{background:var(--cream-2);padding:70px 0 90px}
.post-related-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.post-related-head h2{margin:0;color:var(--forest);font-size:clamp(2rem,3.4vw,3rem)}
.post-related-head a{color:var(--forest);font-weight:700}
@media(max-width:960px){.post-layout.has-toc{grid-template-columns:minmax(0,720px);gap:0}.post-toc{position:static;margin-bottom:28px;padding:18px;border:1px solid var(--line);border-radius:12px}}
@media(max-width:760px){.post-hero{padding:calc(var(--header) + 36px) 0 60px}.post-cover{margin-top:-28px;width:calc(100% - 34px)}.post-layout{padding:36px 0 56px}.post-body{font-size:1.04rem}}

/* --- #30  Online booking switch, 21 Oct -------------------------------- */
.mobile-menu nav a.mobile-book{display:inline-flex;align-self:flex-start;background:var(--sand);color:var(--deep);padding:10px 20px;border-radius:2px;font-weight:700;margin-bottom:6px}

/* #31 Sticky bar: opening date above the title until opening day (22 Oct) */
.sticky-cta .sticky-date{display:block;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d8c19d;margin-bottom:3px}

/* 24 Oct 2026: no cream strip under the footer on phones. The 64px body padding
   kept room for the sticky bar, but the bar hides over the footer, so the footer
   carries its own bottom space instead. Plus the Simple Créatif credit line. */
@media(max-width:760px){body{padding-bottom:0}.site-footer{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}}
html{background:#02271e}
.footer-bottom .footer-credit{grid-column:1/-1;margin:-10px 0 0;line-height:1.7;color:rgba(244,237,223,.42);font-size:.7rem}
.footer-bottom .footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-bottom .footer-credit a:hover{color:var(--sand)}
.footer-bottom p{line-height:1.7}

/* 24 Oct 2026 — credit picker ("version A", chosen by the owners): one block,
   every pack visible in a 3 x 2 grid, the result beside it. Radio inputs + CSS,
   no JavaScript needed; rules below cover up to 8 packs in catalog order. */
.credit-promo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0}
.credit-promo .offer-badge{margin:0}
.credit-promo-ends{font-size:.88rem;font-weight:600;color:var(--forest)}
.credit-picker{position:relative;margin-top:26px}
.credit-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.credit-picker-card{background:var(--forest);color:var(--cream);border-radius:12px;padding:clamp(22px,3.4vw,36px);position:relative;overflow:hidden}
.credit-picker-card::after{content:'';position:absolute;right:-54px;bottom:-58px;width:250px;height:250px;background:url('../img/bogeys-gfx04-b-mark-cream.svg') no-repeat center/contain;opacity:.05;pointer-events:none}
.credit-picker-grid{display:grid;gap:26px;position:relative;z-index:1}
.credit-picker-title{font-family:Fraunces,serif;font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:500;line-height:1.1;margin:0 0 16px;color:var(--cream)}
.credit-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.credit-chip{display:block;background:rgba(244,237,223,.06);border:1px solid rgba(216,193,157,.45);border-radius:8px;min-height:72px;padding:12px 6px;cursor:pointer;color:var(--cream);text-align:center;transition:background .15s,border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.credit-chip:hover{background:rgba(244,237,223,.12)}
.credit-chip-amt{display:block;font-family:Fraunces,serif;font-size:1.45rem;line-height:1.05}
.credit-chip-bonus{display:block;margin-top:5px;font-size:.82rem;font-weight:600;color:var(--sand)}
.credit-chip-word{white-space:nowrap}
.credit-picker-facts{list-style:none;padding:0;margin:18px 0 0}
.credit-picker-facts li{padding:10px 0;border-top:1px solid rgba(244,237,223,.16);font-size:.9rem;font-weight:600;color:rgba(244,237,223,.9)}
.credit-picker-facts li span{color:var(--sand);font-weight:700;margin-right:10px}
.credit-result{display:flex;flex-direction:column;background:var(--deep);border-radius:10px;padding:24px 22px}
.credit-result-label{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.credit-result-packs>div,.credit-result-ctas>.button{display:none}
.credit-result-packs>div:first-child,.credit-result-ctas>.button:first-child{display:block}
.credit-result-value{font-family:Fraunces,serif;font-size:clamp(3rem,10vw,4.2rem);line-height:1;margin:10px 0 0;color:var(--cream)}
.credit-result-value small{font-family:Archivo,sans-serif;font-size:1rem;font-weight:500;margin-left:6px;color:rgba(244,237,223,.85)}
.credit-result-line{margin:12px 0 0;font-size:1rem;color:rgba(244,237,223,.9)}
.credit-result-line b{color:var(--cream);font-weight:700}
.credit-result-line .credit-result-gift{color:var(--sand)}
.credit-result-ctas{margin-top:auto;padding-top:22px}
.credit-result-ctas>.button{width:100%;text-align:center}
.credit-result-reassure{margin:12px 0 0;text-align:center;font-size:.86rem;font-weight:600;color:var(--sand)}
@media(max-width:480px){.credit-chip-word{display:none}}
@media(min-width:820px){.credit-picker-grid{grid-template-columns:1.15fr 1fr;gap:40px;align-items:stretch}}
.credit-radio:checked~.credit-picker-card .credit-result-packs>div:first-child,.credit-radio:checked~.credit-picker-card .credit-result-ctas>.button:first-child{display:none}
/* selection: radio n shows result n and highlights chip n (no :has() needed) */
.credit-radio:nth-of-type(1):checked~.credit-picker-card .credit-result-packs>div:nth-child(1),.credit-radio:nth-of-type(1):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(1){display:block}
.credit-radio:nth-of-type(1):checked~.credit-picker-card .credit-chip:nth-child(1){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(1):checked~.credit-picker-card .credit-chip:nth-child(1) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(1):focus-visible~.credit-picker-card .credit-chip:nth-child(1){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(2):checked~.credit-picker-card .credit-result-packs>div:nth-child(2),.credit-radio:nth-of-type(2):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(2){display:block}
.credit-radio:nth-of-type(2):checked~.credit-picker-card .credit-chip:nth-child(2){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(2):checked~.credit-picker-card .credit-chip:nth-child(2) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(2):focus-visible~.credit-picker-card .credit-chip:nth-child(2){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(3):checked~.credit-picker-card .credit-result-packs>div:nth-child(3),.credit-radio:nth-of-type(3):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(3){display:block}
.credit-radio:nth-of-type(3):checked~.credit-picker-card .credit-chip:nth-child(3){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(3):checked~.credit-picker-card .credit-chip:nth-child(3) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(3):focus-visible~.credit-picker-card .credit-chip:nth-child(3){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(4):checked~.credit-picker-card .credit-result-packs>div:nth-child(4),.credit-radio:nth-of-type(4):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(4){display:block}
.credit-radio:nth-of-type(4):checked~.credit-picker-card .credit-chip:nth-child(4){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(4):checked~.credit-picker-card .credit-chip:nth-child(4) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(4):focus-visible~.credit-picker-card .credit-chip:nth-child(4){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(5):checked~.credit-picker-card .credit-result-packs>div:nth-child(5),.credit-radio:nth-of-type(5):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(5){display:block}
.credit-radio:nth-of-type(5):checked~.credit-picker-card .credit-chip:nth-child(5){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(5):checked~.credit-picker-card .credit-chip:nth-child(5) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(5):focus-visible~.credit-picker-card .credit-chip:nth-child(5){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(6):checked~.credit-picker-card .credit-result-packs>div:nth-child(6),.credit-radio:nth-of-type(6):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(6){display:block}
.credit-radio:nth-of-type(6):checked~.credit-picker-card .credit-chip:nth-child(6){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(6):checked~.credit-picker-card .credit-chip:nth-child(6) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(6):focus-visible~.credit-picker-card .credit-chip:nth-child(6){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(7):checked~.credit-picker-card .credit-result-packs>div:nth-child(7),.credit-radio:nth-of-type(7):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(7){display:block}
.credit-radio:nth-of-type(7):checked~.credit-picker-card .credit-chip:nth-child(7){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(7):checked~.credit-picker-card .credit-chip:nth-child(7) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(7):focus-visible~.credit-picker-card .credit-chip:nth-child(7){outline:2px solid var(--cream);outline-offset:2px}
.credit-radio:nth-of-type(8):checked~.credit-picker-card .credit-result-packs>div:nth-child(8),.credit-radio:nth-of-type(8):checked~.credit-picker-card .credit-result-ctas>.button:nth-child(8){display:block}
.credit-radio:nth-of-type(8):checked~.credit-picker-card .credit-chip:nth-child(8){background:var(--sand);border-color:var(--sand);color:var(--deep);box-shadow:0 0 0 3px rgba(216,193,157,.3)}
.credit-radio:nth-of-type(8):checked~.credit-picker-card .credit-chip:nth-child(8) .credit-chip-bonus{color:var(--deep)}
.credit-radio:nth-of-type(8):focus-visible~.credit-picker-card .credit-chip:nth-child(8){outline:2px solid var(--cream);outline-offset:2px}