/* ==========================================================================
   Tankersley Park Golf Club — bespoke styles

   All non-template styling lives here and is documented inline. Loaded after
   the Brave template stylesheets so these rules take precedence.

   Design intent: a restrained, editorial luxury feel. Three principles run
   through the whole file —

     1. Space does the work. Sections are mostly empty; the vertical rhythm
        is deliberately far larger than the template's defaults.
     2. One accent, used sparingly. Gold appears as hairlines, small caps and
        single words — never as large filled blocks.
     3. Motion is slow and eased. Nothing bounces, nothing snaps.

   Contents
     1.  Design tokens
     2.  Base & typography
     3.  Reveal-on-scroll and other motion primitives
     4.  Buttons & links
     5.  Header / branding
     6.  Hero
     7.  Stats band
     8.  Captain's welcome
     9.  Full-bleed statement band
     10. Upcoming events
     11. Club news
     12. Gallery
     13. Membership call to action
     14. Footer
     15. Fixed furniture (progress bar, booking button, go-to-top)
     16. Interior pages (page head, icon cards, price cards, steps)
     17. Visitors page (booking form, green fees, course hours)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {

    /* Palette. Deep navy, near-neutral papers, a single gold accent.
       The navy is a *surface* colour — the footer, overlays, button fills.
       Type never takes it; text uses the neutral pair below. */
    --gc-ink:        #0a1520;
    --gc-blue:       #16304f;
    /* Neutral near-black. Used only as the ground beneath photography, where a
       navy cast would tint the image; kept out of the type and the chrome. */
    --gc-shade:      #15171a;
    --gc-blue-mid:   #2b4665;
    --gc-gold:       #bf9330;
    --gc-gold-light: #d8a63b;

    /* Papers. Neutral rather than beige — the warmth now comes from the gold
       accent and the photography alone. */
    --gc-cream:      #f7f7f7;
    --gc-ivory:      #fdfdfc;

    /* Type colours. Neutral, not tinted: a near-black for headings and dark
       UI labels, a mid grey for running text. Both clear 4.5:1 on the papers. */
    --gc-heading:    #181a1c;
    --gc-body:       #5f6165;

    /* Hairlines. Every divider on the site is 1px and low contrast. */
    --gc-hair:       rgba(22, 48, 79, 0.13);
    --gc-hair-light: rgba(255, 255, 255, 0.15);

    /* Vertical rhythm. These are the numbers that make the page feel
       expensive — roughly double the template's section padding. */
    --gc-section:    clamp(5.5rem, 11vw, 11.5rem);
    --gc-section-sm: clamp(4rem, 7vw, 7rem);

    /* Type. Jost for everything that is not display: a geometric sans in the
       Futura lineage, which suits the club's between-the-wars vintage.
       Playfair Display is the display face for headings and figures. */
    --gc-sans:       "Jost", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --gc-display:    "Playfair Display", Georgia, serif;

    /* Motion. A long, decelerating ease used for every transition. */
    --gc-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}


/* --------------------------------------------------------------------------
   2. Base & typography
   -------------------------------------------------------------------------- */

/* Body copy sits at a light weight with an airy line height — the single
   biggest contributor to the "editorial" feel after whitespace itself. */
body {
    font-family: var(--gc-sans);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--gc-body);
    -webkit-font-smoothing: antialiased;
    /* The Ken Burns scale on full-bleed media rounds out to a sub-pixel
       overhang, which is enough to give the document a 1px horizontal
       scroll. Clipped here rather than chased around each section. */
    overflow-x: hidden;
}

/* Template components set their own family, so they are pulled back in line
   here rather than left on a fallback sans */
.btn, input, button, select, textarea, .navik-menu {
    font-family: var(--gc-sans);
}

/* Serif display face for every heading, at regular rather than heavy weight.
   Large Playfair set at 400 reads as couture; set at 800 it reads as a
   template. Slight negative tracking keeps big sizes from looking loose. */
h1, h2, h3, h4, h5, h6,
.golf-display, .golf-h2, .golf-h3, .golf-h4,
.display-1, .display-2, .display-3, .display-4,
.display-ultra-1, .display-ultra-2, .display-ultra-3, .display-ultra-4 {
    font-family: var(--gc-display);
    font-weight: 400;
    color: var(--gc-heading);
    letter-spacing: -0.015em;
}

/* Fluid display scale. Each step interpolates with the viewport so the
   proportions hold from phone to ultrawide without breakpoint jumps. */
.golf-display {
    font-size: clamp(2.75rem, 7vw, 5.75rem);
    line-height: 1.1;
}

.golf-h2 {
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.12;
}

.golf-h3 {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    line-height: 1.2;
}

.golf-h4 {
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    line-height: 1.3;
}

/* Standfirst paragraph — one step up from body copy, still light. */
.golf-lead {
    font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
    line-height: 1.8;
    font-weight: 400;
}

/* Small caps eyebrow label. Wide tracking is what sells it; the sans face is
   forced because the site-wide heading rule would otherwise set these in
   the display face when they are marked up as headings. */
.golf-overline {
    font-family: var(--gc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    line-height: 1.6;
    text-transform: uppercase;
}

/* Hairline rule beneath an eyebrow. 1px and 48px wide — a whisper, not the
   3px bar a template would use. */
.golf-rule {
    width: 48px;
    height: 1px;
    background-color: var(--gc-gold);
}

.golf-rule-center {
    margin-left: auto;
    margin-right: auto;
}

/* Section padding utilities built on the rhythm tokens */
.golf-section {
    padding-top: var(--gc-section);
    padding-bottom: var(--gc-section);
}

.golf-section-sm {
    padding-top: var(--gc-section-sm);
    padding-bottom: var(--gc-section-sm);
}

/* Surfaces */
.golf-cream { background-color: var(--gc-cream); }
.golf-ivory { background-color: var(--gc-ivory); }
.golf-ink   { background-color: var(--gc-ink); }
.golf-paper { background-color: #ffffff; }

/* Colour helpers. The light gold is for dark grounds, where the base gold
   drops below a 4.5:1 contrast ratio. */
.golf-gold       { color: var(--gc-gold); }
.golf-gold-light { color: var(--gc-gold-light); }
.golf-serif      { font-family: var(--gc-display); }

/* A single hairline used as a section divider */
.golf-hairline {
    height: 1px;
    background-color: var(--gc-hair);
}

/* Constrained measure. Long lines are the enemy of expensive-looking text;
   nothing on the site runs wider than roughly 62 characters. */
.golf-measure {
    max-width: 34em;
}

.golf-measure-center {
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------------------------------------------------------
   3. Reveal-on-scroll and other motion primitives
   -------------------------------------------------------------------------- */

/* Elements marked [data-reveal] start slightly low and transparent, then
   settle when an IntersectionObserver adds .is-revealed. The stagger comes
   from an inline --gc-delay set per element in the markup. */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--gc-ease), transform 1.1s var(--gc-ease);
    transition-delay: var(--gc-delay, 0s);
}

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

/* Variant that only fades, for large images where movement would be heavy */
[data-reveal="fade"] {
    transform: none;
}

/* Trigger-only variant: no movement of its own, used where the descendants
   animate themselves off the .is-revealed this earns */
[data-reveal="trigger"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Slow, continuous zoom on full-bleed photography. The movement is barely
   perceptible per second, which is the point — it keeps a static hero alive
   without ever calling attention to itself. */
.golf-kenburns {
    animation: golfKenBurns 24s var(--gc-ease) infinite alternate;
}

@keyframes golfKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Respect a user's reduced-motion preference: reveal everything immediately
   and stop the ambient zoom. */
@media (prefers-reduced-motion: reduce) {

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .golf-kenburns {
        animation: none;
    }

}


/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

/* Bespoke button base. Deliberately square, widely tracked and small-capped
   — the template's rounded pill buttons read as SaaS, not as a country club.
   Defined from scratch rather than by overriding .btn so the template's blue
   never has to be fought. */
.golf-btn {
    display: inline-block;
    font-family: var(--gc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    padding: 1.375rem 2.5rem;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.45s var(--gc-ease),
                border-color 0.45s var(--gc-ease),
                color 0.45s var(--gc-ease);
}

/* Adjacent actions are spaced here rather than with a Bootstrap margin
   utility, so the stacked mobile case below can override it (.ml-2 and
   friends carry !important and cannot be beaten by a media query). */
.golf-btn + .golf-btn {
    margin-left: 0.5rem;
}

@media (max-width: 767px) {

    /* Two actions never share a line on a phone — they stack full width */
    .golf-btn-pair .golf-btn {
        display: block;
        width: 100%;
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
    }

    .golf-btn-pair .golf-btn + .golf-btn {
        margin-top: 0.75rem;
    }

}

/* Solid gold — the primary action */
.golf-btn-gold {
    color: var(--gc-heading);
    background-color: var(--gc-gold-light);
    border-color: var(--gc-gold-light);
}

.golf-btn-gold:hover,
.golf-btn-gold:focus {
    color: var(--gc-heading);
    background-color: #e8bc5c;
    border-color: #e8bc5c;
}

/* Outlined for use on photography */
.golf-btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.golf-btn-ghost:hover,
.golf-btn-ghost:focus {
    color: var(--gc-heading);
    background-color: #ffffff;
    border-color: #ffffff;
}

/* Outlined for use on paper */
.golf-btn-outline {
    color: var(--gc-heading);
    border-color: var(--gc-hair);
}

/* Fills with the brand navy on hover — a surface, so the navy belongs here
   even though the label above it does not take it */
.golf-btn-outline:hover,
.golf-btn-outline:focus {
    color: #ffffff;
    background-color: var(--gc-blue);
    border-color: var(--gc-blue);
}

/* Text link with a gold hairline that sweeps out from the left on hover.
   Used for "View full calendar", "Register", "Our Story" and similar. */
.golf-link {
    position: relative;
    display: inline-block;
    font-family: var(--gc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gc-heading);
    padding-bottom: 0.5rem;
    white-space: nowrap;
}

.golf-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gc-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--gc-ease);
}

.golf-link:hover,
.golf-link:focus {
    color: var(--gc-gold);
}

.golf-link:hover::after,
.golf-link:focus::after {
    transform: scaleX(1);
}

/* Light variant for use on dark grounds */
.golf-link-light {
    color: #ffffff;
}

.golf-link-light:hover,
.golf-link-light:focus {
    color: var(--gc-gold-light);
}


/* --------------------------------------------------------------------------
   5. Header / branding
   -------------------------------------------------------------------------- */

/* Taller header so the enlarged crest sits fully inside the bar */
.navik-header .navik-header-container {
    height: 130px;
}

.navik-header .golf-logo {
    padding: 12px 40px;
}

/* The crest asset is portrait (560x771), so it must be sized on one axis
   only or its aspect ratio distorts. Height is fixed and width/max-width are
   reset; the !important flags override the template's own
   ".navik-header .logo img { width: 146px }" and ".img-fluid" rules. */
.navik-header .golf-logo img {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: 100px !important;
}

/* The sticky header swaps in the landscape logo-dark.png, which needs a
   smaller height to suit the condensed bar. */
.navik-header.sticky .golf-logo img {
    height: 46px !important;
}

/* Menu links: small caps with wide tracking, matching the buttons.
   position:relative is set explicitly so the hover hairline below anchors to
   the link rather than to whichever ancestor happens to be positioned. */
.navik-menu > ul > li > a {
    position: relative;
    font-family: var(--gc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Gold hairline that sweeps in under the active/hovered menu item */
.navik-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 38%;
    width: 22px;
    height: 1px;
    margin-left: -11px;
    background-color: var(--gc-gold);
    transform: scaleX(0);
    transition: transform 0.5s var(--gc-ease);
}

.navik-menu > ul > li > a:hover::after {
    transform: scaleX(1);
}

/* The dropdown's top rule and the preloader's ring both ship in the
   template's bright blue, which is nobody's colour here. Both take the club
   gold instead. The selectors repeat the template's own so these win on
   order alone, with no !important. */
.navik-menu.submenu-top-border li > ul {
    border-top-color: var(--gc-gold);
}

.preloader-border {
    box-shadow: inset 0 0 0 2px rgba(191, 147, 48, 0.14);
}

.preloader-line {
    box-shadow: inset 0 0 0 2px var(--gc-gold);
}

/* The header carries no booking button — booking lives in the hero and in
   the fixed button at the bottom of the screen, which leaves the bar as just
   crest and navigation. */
@media (min-width: 1280px) {

    /* Match the link height to the taller header so labels sit centred in
       line with the crest */
    .navik-menu > ul > li > a {
        height: 130px;
        line-height: 130px;
    }

    /* The template flushes the final item hard against the container edge
       (padding: 0 0 0 20px), which left "Contact" squashed into the corner.
       Restored to the same symmetric padding every other item carries —
       symmetric matters because the hover hairline centres on the link box,
       so a one-sided pad would set the gold rule off-centre under the word. */
    .navik-menu > ul > li:last-child > a {
        padding: 0 20px;
    }

    /* The rest of the breathing room goes on the list rather than the last
       link, for the same reason: it moves the whole bar in without making any
       single link's box asymmetric. Roughly matches the 40px the crest is
       inset on the left, so the bar sits evenly between the two edges. */
    .navik-menu > ul {
        padding-right: 1.25rem;
    }

}

/* Mobile / tablet header, below the 1280px breakpoint where navik swaps in
   its own mobile logo */
@media (max-width: 1279px) {

    /* The open mobile menu is a child of this container, so the fixed height
       set for the desktop bar left the list overflowing it — and since the
       white ground is drawn by the header's own box, the menu ended up
       sitting transparently over the page beneath.

       height: auto is what does the work: it releases the 130px set above,
       which a min-height alone cannot override. The minimum then holds the
       closed bar at 80px, and the bar grows to cover the list when it opens. */
    .navik-header .navik-header-container {
        height: auto;
        min-height: 80px;
    }

    /* The logo is a plain block at the top of the container, so with the bar
       held open to 80px the leftover 14px all collected below the crest and
       it sat high against a centred burger. Giving the logo box the full
       closed-bar height and centring the crest inside it fixes the alignment
       without making the container a flex parent — the mobile menu is a later
       sibling in normal flow and has to keep its own full-width row.

       The 20px right padding matches the burger's own inset, so the two ends
       of the bar are inset by the same amount. */
    .navik-header .golf-logo {
        display: flex;
        align-items: center;
        height: 80px;
        padding: 0 20px;
        text-align: left;
    }

    .navik-header .golf-logo img {
        height: 46px !important;
    }

    /* Centred against the 80px bar (32 + half of the 17px burger ≈ 40), and
       pulled in to sit level with the crest's 20px inset. Left as a static
       top value rather than a 50%/translateY pair because the open state
       animates the burger with its own transform. */
    .navik-header .burger-menu {
        top: 32px;
        right: 20px;
    }

}


/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.golf-hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
}

/* Below 1280px the header is in flow, 80px tall, so a 100vh hero would run
   80px past the fold and park the card under the floating booking button.
   Declared after the base rule above: it has the same specificity and must
   come later to win. The matching content padding sits after .golf-hero-content
   below, for the same reason. */
@media (max-width: 1279px) {

    .golf-hero {
        height: calc(100vh - 80px);
        min-height: 560px;
    }

}

/* Wrapper exists purely to give the Ken Burns transform its own element, so
   the zoom cannot fight the video's object-fit cropping */
.golf-hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Both copies are stacked; only the one carrying .is-active is visible, and
   the swap between them is what produces the dissolve. The duration must stay
   in step with the FADE constant in the crossfade script.
   Linear easing on purpose: a cross-dissolve with an eased curve dips in
   luminance through the middle of the blend. */
.golf-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s linear;
}

.golf-hero-video.is-active {
    opacity: 1;
}

/* Dark band fading down from the top edge, so the white crest and menu stay
   legible against the sky. Only the top of the film is touched; the rest
   runs unshaded. Sits above the film and below the content and scroll cue. */
.golf-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(8, 14, 24, 0.62) 0%,
        rgba(8, 14, 24, 0.34) 45%,
        rgba(8, 14, 24, 0) 100%
    );
}

/* Still photographs in place of the film: stacked the same way, with a
   longer dissolve than the film's because there is no movement in the frame
   to carry the eye across the change. Linear for the same reason as above. */
.golf-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s linear;
}

.golf-hero-slide.is-active {
    opacity: 1;
}

/* Content layer. Hidden initially and revealed by JS once the intro footage
   has played through, so the film gets a moment on its own first. */
/* Copy is pinned to the bottom-left on a card. The scroll cue stays centred,
   so on anything wider than a phone the two never meet. */
.golf-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    padding-top: clamp(1.5rem, 5vh, 5rem);
    padding-bottom: clamp(2rem, 7vh, 4.5rem);
    text-align: left;
}

/* Below 1280px the floating Book Tee Time button sits in the card's corner
   unless the content keeps clear of it. Same cascade note as .golf-hero. */
@media (max-width: 1279px) {

    .golf-hero-content {
        padding-bottom: 6.75rem;
    }

}

/* The card: ivory with a little transparency and a blur behind it, so the
   film shows faintly through. The headline is a step smaller than the old
   full-width setting so it fits a column. */
.golf-hero-card {
    max-width: 27rem;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 2rem);
    background-color: rgba(253, 253, 252, 0.84);
    box-shadow: 0 24px 60px rgba(8, 14, 24, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.golf-hero-card .golf-display {
    font-size: clamp(2.125rem, 3.4vw, 3rem);
    line-height: 1.08;
}

/* The container is a flex item here; stretching it keeps the card from being
   sized to its content on narrow screens. */
.golf-hero-content > .container {
    align-self: stretch;
    width: 100%;
}

/* Vertical rhythm inside the card scales with viewport height, so the whole
   card still fits above the fold on a short phone screen. */
.golf-hero-card .golf-hero-eyebrow { margin-bottom: clamp(0.5rem, 1.2vh, 0.875rem); }
.golf-hero-card .golf-hero-sub     { margin-top: clamp(0.5rem, 1.2vh, 0.875rem); }
.golf-hero-card .golf-rule         { margin: clamp(0.875rem, 2vh, 1.25rem) 0; }
.golf-hero-card .golf-hero-lead    { font-size: 1rem; line-height: 1.65; }
.golf-hero-card .golf-btn-pair     { margin-top: clamp(1rem, 2.2vh, 1.5rem); }

/* The buttons keep to one row inside the narrower card: a tighter horizontal
   pad, and a flex row with a gap rather than the pair's default inline spacing. */
@media (min-width: 768px) {

    .golf-hero-card .golf-btn-pair {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .golf-hero-card .golf-btn {
        flex: 1 1 0;
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        white-space: nowrap;
        letter-spacing: 0.18em;
    }

}

/* Each word of the headline is wrapped in a span pair by JS and rises
   through its own overflow-hidden mask, one after another. */
.golf-hero-title {
    color: var(--gc-heading);
    margin: 0;
}

/* The mask has to reach below the baseline or descenders are clipped — the
   y in "Tankersley" was losing its tail. Padding grows the mask; the equal
   negative margin keeps the line box, and so the layout, unchanged. */
.golf-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}

.golf-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1.25s var(--gc-ease);
    transition-delay: var(--gc-delay, 0s);
}

.golf-hero-content.is-revealed .golf-word > span {
    transform: none;
}

/* Everything other than the headline fades up on a shared delay ramp */
.golf-hero-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--gc-ease), transform 1.2s var(--gc-ease);
    transition-delay: var(--gc-delay, 0s);
}

.golf-hero-content.is-revealed .golf-hero-fade {
    opacity: 1;
    transform: none;
}

.golf-hero-eyebrow {
    color: var(--gc-gold);
}

/* "Golf Club" strapline sat under the wordmark, in the wide-tracked sans */
.golf-hero-sub {
    color: var(--gc-body);
    letter-spacing: 0.42em;
}

.golf-hero-lead {
    color: var(--gc-body);
}

/* Scroll cue: a hairline that travels down its own track, with the label
   set vertically beside it. Sits above the hero's bottom gradient. */
.golf-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 4;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.golf-scroll-cue:hover,
.golf-scroll-cue:focus {
    color: #ffffff;
}

.golf-scroll-cue-label {
    margin-bottom: 1rem;
}

.golf-scroll-cue-track {
    position: relative;
    width: 1px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.golf-scroll-cue-track::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--gc-gold-light);
    animation: golfScrollCue 2.4s var(--gc-ease) infinite;
}

@keyframes golfScrollCue {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {

    .golf-scroll-cue-track::after {
        animation: none;
    }

}

@media (max-width: 1279px) {

    /* The cue is a desktop affordance. Below 1280px the card reaches past the
       centre line and the cue would draw across it. */
    .golf-scroll-cue {
        display: none;
    }

}

@media (max-width: 767px) {

    .golf-hero-card {
        width: 100%;
        max-width: 100%;
        padding: 1.25rem 1.25rem 1.375rem;
    }

    .golf-hero-card .golf-display {
        font-size: clamp(1.875rem, 8vw, 2.375rem);
    }

    .golf-hero-card .golf-hero-lead {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .golf-hero-card .golf-rule {
        margin: 0.75rem 0;
    }

    /* The pair's phone rule centres each button at 20rem with its label set
       left, which jars inside a left-aligned card. Here they run the full
       width of the card with centred labels and a tighter stack. */
    .golf-hero-card .golf-btn-pair {
        margin-top: 1rem;
    }

    .golf-hero-card .golf-btn-pair .golf-btn {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-top: 1.125rem;
        padding-bottom: 1.125rem;
        text-align: center;
    }

    .golf-hero-card .golf-btn-pair .golf-btn + .golf-btn {
        margin-top: 0.5rem;
    }

    /* On a phone there is no card at all: the film runs clear and the club name
       sits in white over the sky at the top, inside the header gradient. The
       fixed Book Tee Time button already covers booking, so the eyebrow, rule,
       lead and both buttons are hidden. */
    .golf-hero-content {
        justify-content: flex-start;
        align-items: center;
        padding-top: 2.5rem;
        text-align: center;
    }

    .golf-hero-card {
        padding: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .golf-hero-card .golf-hero-eyebrow,
    .golf-hero-card .golf-rule,
    .golf-hero-card .golf-hero-lead,
    .golf-hero-card .golf-btn-pair {
        display: none;
    }

    .golf-hero-card .golf-hero-title {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(8, 14, 24, 0.5), 0 2px 18px rgba(8, 14, 24, 0.35);
    }

    .golf-hero-card .golf-hero-sub {
        color: rgba(255, 255, 255, 0.88);
        text-shadow: 0 1px 2px rgba(8, 14, 24, 0.5);
    }

}


/* --------------------------------------------------------------------------
   7. Stats band
   -------------------------------------------------------------------------- */

/* Three figures separated by full-height hairlines. Numerals are set large
   and light in the serif face; labels are tiny and widely tracked. The
   contrast between the two is the whole effect. */
.golf-stat {
    text-align: center;
    padding: 0 1rem;
}

.golf-stat-figure {
    font-family: var(--gc-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.5vw, 4.75rem);
    line-height: 1;
    color: var(--gc-heading);
    margin-bottom: 1.25rem;
}

/* Gold suffix (the "+" on member count) kept smaller and raised */
.golf-stat-figure sup {
    font-size: 0.4em;
    top: -0.9em;
    margin-left: 0.1em;
    color: var(--gc-gold);
}

.golf-stat-label {
    color: var(--gc-body);
}

/* Hairline dividers between columns on desktop, stacked spacing below it */
@media (min-width: 768px) {

    .golf-stat-divide + .golf-stat-divide {
        border-left: 1px solid var(--gc-hair);
    }

}

@media (max-width: 767px) {

    .golf-stat-divide + .golf-stat-divide {
        margin-top: 3.5rem;
    }

}


/* --------------------------------------------------------------------------
   8. Captain's welcome
   -------------------------------------------------------------------------- */

/* A single undecorated plate — no frame, no mount, no overlap — that drifts
   as the section passes through the viewport.

   The frame clips; the image inside it is deliberately taller than the frame,
   and that surplus height is the entire travel budget. Keeping the movement
   inside the frame is what stops an edge ever showing. */
.golf-parallax {
    position: relative;
    overflow: hidden;
    height: clamp(24rem, 42vw, 34rem);
}

/* Fills the frame exactly by default, so with no JS (or with reduced motion
   honoured) it is simply a static, correctly cropped plate. */
.golf-parallax img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The script adds .is-parallax once it is actually driving the image. Only
   then does the surplus height appear — 122% leaves 22% to travel through.
   Transform rather than background-attachment: fixed, which iOS ignores
   outright and which jitters against the compositor elsewhere. */
.golf-parallax.is-parallax img {
    height: 122%;
    will-change: transform;
}

/* Portrait. For a cut-out — the Captain — where the fixed-height cover crop
   of .golf-parallax would take the top of the head off. The image keeps its
   own proportions and is set in a pale panel rather than left loose on the
   page.

   There is no padding at the foot, so his waist meets the panel's bottom
   edge and the crop reads as the panel's doing rather than the
   photograph's. */
.golf-portrait {
    max-width: 20rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
    background: linear-gradient(180deg, var(--gc-cream) 0%, #ecece9 100%);
}

/* Read more: a long passage folded down to its opening paragraphs. The
   classes are added by the script, so with JS off none of this applies and
   the passage is simply all there.

   The fold height is set inline by the script, measured from the markup,
   so the fade always falls on the same paragraph whatever the line breaks.
   The fade's height here must stay in step with FADE_EMS there. It runs to
   solid white, so this belongs on a white section. */
.golf-readmore {
    position: relative;
}

.golf-readmore.is-foldable {
    overflow: hidden;
    transition: max-height 0.9s var(--gc-ease);
}

.golf-readmore.is-foldable::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 88%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--gc-ease);
}

.golf-readmore.is-folded::after {
    opacity: 1;
}

/* Focus lands here when the button that opened it disappears; it is a
   place to carry on reading from, not a control, so it takes no ring. */
.golf-readmore:focus {
    outline: none;
}

/* The button and the link that follows it. A flex gap rather than a margin
   on either, so the link sits flush left once the button has gone. */
.golf-readmore-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.25rem;
}

@media (prefers-reduced-motion: reduce) {

    .golf-readmore.is-foldable,
    .golf-readmore.is-foldable::after {
        transition: none;
    }

}

/* The Captain's letter. A step under body size and set a little tighter:
   it runs to seven paragraphs, and at full size it reads as a notice pinned
   to the page rather than a note from someone. */
.golf-letter {
    font-size: 1rem;
    line-height: 1.75;
}

/* The Captain's column: photograph, then his signed-off line immediately
   beneath it, at every width. The pair travels together rather than the quote
   being pushed to the foot of the column, where a gap between them would
   read as two unrelated blocks. */
.golf-captain-aside {
    display: flex;
    flex-direction: column;
}

/* Beside the letter, the panel starts level with the heading rather than
   with the eyebrow above it: the drop is the eyebrow, its rule and their
   two margins. Only where the columns sit side by side — stacked, the
   column's own top margin does the spacing. */
@media (min-width: 992px) {

    .golf-captain-aside {
        margin-top: 4.25rem;
    }

}

.golf-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

/* Pull-quote. Large, light, italic serif with an oversized gold quote mark
   set in the margin above it. */
/* Sits in its own centred row beneath the two columns, opened by a hairline
   that spans 60% of the row. The rule is a pseudo-element rather than a real
   border-top, because a border cannot be narrower than the box it belongs to
   and still stay centred. */
/* Full row width so the hairline measures 60% of the row; the text below is
   what carries the reading measure. */
.golf-quote {
    position: relative;
    margin: clamp(4rem, 7vw, 6.5rem) 0 0;
    padding-top: clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}

.golf-quote::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 1px;
    margin-left: -30%;
    background-color: var(--gc-hair);
}

/* Oversized quote mark, set in the flow so it centres with everything else
   rather than hanging in the margin as it did in the narrow column */
.golf-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--gc-display);
    font-size: 5rem;
    line-height: 0.8;
    color: var(--gc-gold);
    opacity: 0.32;
    margin-bottom: 1.5rem;
}

/* A step larger than in the column — it now carries a full row on its own.
   Capped and centred so the line length stays readable even though the block
   around it spans the whole row. */
.golf-quote p {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    font-family: var(--gc-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.375rem, 2.4vw, 2rem);
    line-height: 1.5;
    color: var(--gc-heading);
}

/* In the Captain's column rather than a row of its own: the type steps
   down to suit a half-width measure and the top margin goes altogether, so
   the quote sits directly under the photograph. The quote's own hairline is
   dropped here — the photograph sits in a panel, and a rule just under
   the panel would only read as a second, broken edge. */
.golf-quote-aside {
    margin-top: 0;
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.golf-quote-aside::after {
    content: none;
}

.golf-quote-aside p {
    max-width: 30rem;
    margin-bottom: 1.5rem;
    font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
}

.golf-quote-aside::before {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* Signature block: name in small caps, role beneath in lighter body text */
.golf-signature-name {
    font-family: var(--gc-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gc-heading);
}

.golf-signature-role {
    font-size: 0.875rem;
    color: var(--gc-body);
}


/* --------------------------------------------------------------------------
   9. Full-bleed statement band
   -------------------------------------------------------------------------- */

/* A deliberate pause in the page: one line of large serif over a slowly
   zooming photograph, with far more empty space than content. */
.golf-statement {
    position: relative;
    overflow: hidden;
    padding-top: clamp(7rem, 15vw, 14rem);
    padding-bottom: clamp(7rem, 15vw, 14rem);
}

.golf-statement-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

.golf-statement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(8, 14, 24, 0.58),
        rgba(8, 14, 24, 0.72)
    );
}

.golf-statement-content {
    position: relative;
    z-index: 3;
}

.golf-statement-text {
    font-family: var(--gc-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.625rem, 3.6vw, 3rem);
    line-height: 1.35;
    color: #ffffff;
    letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   10. Upcoming events
   -------------------------------------------------------------------------- */

/* Section header: eyebrow, hairline and title on the left with a link
   aligned to the title's baseline on the right */
.golf-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Card. Flat paper, a single hairline border, and a gold hairline that draws
   itself around the whole edge on hover. No drop shadow at rest —
   shadows read as cheap; the lift is carried by transform alone. */
.golf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(2rem, 3vw, 3rem);
    background-color: #ffffff;
    border: 1px solid var(--gc-hair);
    transition: transform 0.6s var(--gc-ease), box-shadow 0.6s var(--gc-ease);
}

/* Hover: a gold hairline draws itself once around the card, as a single
   continuous stroke — top left-to-right, down the right, back along the
   bottom, up the left to where it started.

   Two pseudo-elements cover two sides each. ::before is pinned to the
   top-left and grows right then down; ::after is pinned to the bottom-right
   and grows left then up. Sequencing comes from transition-delay, so the four
   segments run one after another rather than together.

   Each box starts at zero on both axes, which is what keeps the second of its
   two borders hidden until its turn: a border on a box with no height has no
   length to draw. Both are inset by -1px so the gold lands exactly on the
   card's own resting hairline rather than beside it.

   Easing is linear on purpose — an eased curve would make the stroke visibly
   hesitate at every corner. */
.golf-card::before,
.golf-card::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 0;
    height: 0;
    pointer-events: none;
    /* A zero-sized box still paints its borders as a 1px dot in its corner,
       which would leave a gold speck on every card at rest. Hidden until
       hover, and held visible until the rewind has finished (see the delay
       on the visibility transition below). */
    visibility: hidden;
}

.golf-card:hover::before,
.golf-card:hover::after {
    visibility: visible;
}

/* Top edge, then the right edge. The delays here are the retract order —
   the draw order lives on :hover below. */
.golf-card::before {
    top: -1px;
    left: -1px;
    border-top: 1px solid var(--gc-gold);
    border-right: 1px solid var(--gc-gold);
    transition: height 0.26s linear 0.52s,
                width 0.26s linear 0.78s,
                visibility 0s linear 1.04s;
}

/* Bottom edge, then the left edge */
.golf-card::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1px solid var(--gc-gold);
    border-left: 1px solid var(--gc-gold);
    transition: height 0.26s linear 0s,
                width 0.26s linear 0.26s,
                visibility 0s linear 1.04s;
}

/* Drawing in: the four segments in clockwise order, each waiting for the one
   before it to finish */
.golf-card:hover::before {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transition: width 0.26s linear 0s,
                height 0.26s linear 0.26s,
                visibility 0s linear 0s;
}

.golf-card:hover::after {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    transition: width 0.26s linear 0.52s,
                height 0.26s linear 0.78s,
                visibility 0s linear 0s;
}

.golf-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -25px rgba(10, 20, 34, 0.22);
}

/* Big day numeral with the month beneath, sat to the left of the title.
   Borrowed from an invitation card rather than a web calendar. */
.golf-event-date {
    text-align: center;
    flex: 0 0 auto;
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    border-right: 1px solid var(--gc-hair);
}

.golf-event-day {
    font-family: var(--gc-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--gc-heading);
}

.golf-event-month {
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gc-gold);
    margin-top: 0.375rem;
}

/* The year sits beneath the month in the same small caps, but muted: the
   day and month carry the glance, the year is there for the record */
.golf-event-year {
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #6f7175;
    margin-top: 0.25rem;
}

/* Category label. A hairline-underlined word rather than a filled pill —
   pills are a product-UI pattern and cheapen the card. */
.golf-tag {
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gc-gold);
}

/* Places-remaining counter, set quietly — but still above the 4.5:1 contrast
   floor against the card's white ground */
.golf-meta {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6f7175;
}

/* Pushes a card's action to its bottom edge, so a row of cards with differing
   content lengths still aligns its buttons and links */
.golf-card-foot {
    margin-top: auto;
    padding-top: clamp(1.75rem, 2.5vw, 2.5rem);
}


/* --------------------------------------------------------------------------
   11. Club news
   -------------------------------------------------------------------------- */

/* Article entries are separated by hairlines rather than boxed, which reads
   as a printed journal. On desktop the rule is vertical between columns. */
.golf-news-item {
    position: relative;
    padding-top: 2.5rem;
    border-top: 1px solid var(--gc-hair);
}

.golf-news-item .golf-h4 a {
    color: var(--gc-heading);
    transition: color 0.4s var(--gc-ease);
}

.golf-news-item .golf-h4 a:hover,
.golf-news-item .golf-h4 a:focus {
    color: var(--gc-gold);
}

.golf-news-cat {
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gc-gold);
}

.golf-news-date {
    font-size: 0.75rem;
    color: #74767a;
}


/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */

/* Staggered strip: alternate tiles are pushed down so the row reads as a
   composed spread rather than a grid. Each tile opens in the lightbox that
   the template already loads (Fancybox). */
.golf-gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
}

.golf-gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--gc-ease);
}

.golf-gallery-tile:hover img {
    transform: scale(1.07);
}

/* Navy wash that lifts on hover, with a hairline-framed magnifier cue */
.golf-gallery-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 20, 34, 0.32);
    opacity: 0;
    transition: opacity 0.6s var(--gc-ease);
}

.golf-gallery-film .golf-gallery-veil {
    opacity: 1;
    background-color: rgba(10, 20, 34, 0.18);
}

.golf-gallery-tile:hover .golf-gallery-veil {
    opacity: 1;
}

.golf-gallery-veil span {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-size: 0.875rem;
}

/* Tile heights vary by position to build the stagger */
.golf-gallery-tile-tall  { height: clamp(18rem, 30vw, 26rem); }
.golf-gallery-tile-short { height: clamp(14rem, 22vw, 19rem); }

@media (min-width: 768px) {

    /* Vertical offset on alternate columns */
    .golf-gallery-offset {
        margin-top: clamp(2rem, 5vw, 5rem);
    }

}


/* --------------------------------------------------------------------------
   13. Membership call to action
   -------------------------------------------------------------------------- */

.golf-cta {
    position: relative;
    overflow: hidden;
    padding-top: clamp(6rem, 12vw, 11rem);
    padding-bottom: clamp(6rem, 12vw, 11rem);
}

.golf-cta-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

.golf-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(10, 20, 34, 0.72),
        rgba(10, 20, 34, 0.84)
    );
}

.golf-cta-content {
    position: relative;
    z-index: 3;
}

/* Gold hairline frame inset from the section edges, enclosing the content.
   Hidden on small screens, where it would crowd the text. */
.golf-cta-frame {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 2;
    border: 1px solid rgba(216, 166, 59, 0.4);
    pointer-events: none;
}

@media (max-width: 767px) {

    .golf-cta-frame {
        display: none;
    }

}


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.golf-footer {
    background-color: var(--gc-ink);
    color: rgba(255, 255, 255, 0.62);
}

/* Gold-outlined square holding the flag mark, paired with the wordmark */
.golf-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--gc-gold);
    color: var(--gc-gold);
}

.golf-mark-name {
    font-family: var(--gc-display);
    font-size: 1.125rem;
    color: #ffffff;
    line-height: 1.2;
}

.golf-mark-sub {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    color: var(--gc-gold);
}

.golf-footer-heading {
    font-family: var(--gc-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Navigation links slide a little to the right on hover, revealing a gold
   hairline in the space they leave */
.golf-footer-link {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.45s var(--gc-ease), transform 0.45s var(--gc-ease);
}

.golf-footer-link::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: 0.875rem;
    height: 1px;
    background-color: var(--gc-gold);
    opacity: 0;
    transition: opacity 0.45s var(--gc-ease);
}

.golf-footer-link:hover,
.golf-footer-link:focus {
    color: #ffffff;
    transform: translateX(1.5rem);
}

.golf-footer-link:hover::before,
.golf-footer-link:focus::before {
    opacity: 1;
}

/* Contact rows: gold icon in a fixed gutter so text aligns even when it
   wraps to a second line */
.golf-footer-contact .golf-i {
    flex: 0 0 20px;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--gc-gold);
}

.golf-footer-contact a {
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.4s var(--gc-ease);
}

.golf-footer-contact a:hover,
.golf-footer-contact a:focus {
    color: #ffffff;
}

/* Social marks: hairline squares carrying the network initials */
.golf-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0.5rem 0.5rem 0;
    font-family: var(--gc-sans);
    /* Sized for a glyph rather than the two-letter abbreviations these used to
       carry. Kept modest: at full size the four marks would be the brightest
       thing in the footer, above the club's own wordmark. */
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--gc-hair-light);
    transition: color 0.45s var(--gc-ease),
                border-color 0.45s var(--gc-ease),
                background-color 0.45s var(--gc-ease);
}

/* The inline X mark. Sized in em so it tracks the font-size above alongside
   the icon-font glyphs, and filled with currentColor so it inherits both the
   resting colour and the hover swap without restating either. */
.golf-social svg {
    width: 0.875em;
    height: 0.875em;
    fill: currentColor;
}

.golf-social:hover,
.golf-social:focus {
    color: var(--gc-heading);
    background-color: var(--gc-gold-light);
    border-color: var(--gc-gold-light);
}

.golf-footer-divider {
    height: 1px;
    background-color: var(--gc-hair-light);
}

.golf-footer-legal a {
    font-family: var(--gc-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin-left: 2rem;
    transition: color 0.4s var(--gc-ease);
}

.golf-footer-legal a:first-child {
    margin-left: 0;
}

.golf-footer-legal a:hover,
.golf-footer-legal a:focus {
    color: var(--gc-gold-light);
}

.golf-copyright {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.42);
}

/* Agency credit, on its own line under the copyright */
.golf-credit {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 0.125rem;
}

.golf-credit a {
    color: inherit;
    transition: color 0.4s var(--gc-ease);
}

.golf-credit a:hover,
.golf-credit a:focus {
    color: var(--gc-gold-light);
}

@media (max-width: 991px) {

    .golf-footer-legal a {
        display: inline-block;
        margin: 0 0.75rem 0.5rem;
    }

    .golf-footer-legal a:first-child {
        margin-left: 0.75rem;
    }

}


/* --------------------------------------------------------------------------
   15. Fixed furniture
   -------------------------------------------------------------------------- */

/* Gold hairline across the top of the viewport tracking read progress. Its
   width is set from JS; the transform origin keeps it growing rightward. */
.golf-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100%;
    height: 2px;
    background-color: var(--gc-gold-light);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Always-available booking action, pinned bottom-right */
.golf-book-float {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    box-shadow: 0 18px 40px -12px rgba(10, 20, 34, 0.45);
    transition: opacity 0.5s var(--gc-ease),
                transform 0.5s var(--gc-ease),
                background-color 0.45s var(--gc-ease),
                border-color 0.45s var(--gc-ease);
}

/* Retracts once the footer is on screen: the footer carries its own booking
   link, and leaving it pinned would park it on top of the legal links. */
.golf-book-float.is-stowed {
    opacity: 0;
    transform: translateY(1.5rem);
    pointer-events: none;
}

.golf-book-float .golf-i {
    margin-right: 0.625rem;
    font-size: 0.75rem;
}

/* Go-to-top. The template ships this as a blue circle on a blue glow, which
   fights the palette, so it is restyled to sit quietly beneath the gold
   booking button: square, near-black navy, gold hairline and mark. */
.go-to-top {
    /* Lifted clear of the booking button, which holds the default slot */
    bottom: 104px !important;
    right: 30px !important;
    transition: bottom 0.5s var(--gc-ease),
                opacity 0.5s var(--gc-ease),
                transform 0.5s var(--gc-ease);
}

/* The high-specificity selector and !important flags override the template's
   own .go-to-top a rules, which set the blue background, the border radius
   and a three-layer blue shadow. */
.go-to-top a.rounded-circle {
    width: 46px;
    height: 46px;
    line-height: 44px;
    font-size: 0.75rem;
    color: var(--gc-gold-light);
    background-color: rgba(10, 20, 34, 0.92) !important;
    border: 1px solid rgba(216, 166, 59, 0.45);
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color 0.45s var(--gc-ease),
                background-color 0.45s var(--gc-ease),
                border-color 0.45s var(--gc-ease);
}

.go-to-top a.rounded-circle:hover,
.go-to-top a.rounded-circle:focus {
    color: var(--gc-heading);
    background-color: var(--gc-gold-light) !important;
    border-color: var(--gc-gold-light);
}

/* Once the booking button stows itself over the footer, this drops into the
   space it leaves rather than floating with a gap beneath it. */
.golf-book-float.is-stowed ~ .go-to-top {
    bottom: 30px !important;
}

@media (max-width: 767px) {

    .golf-book-float {
        right: 16px;
        bottom: 16px;
        padding: 1.125rem 1.75rem;
    }

    /* Match the button's tighter mobile inset */
    .go-to-top {
        right: 16px !important;
        bottom: 84px !important;
    }

    .golf-book-float.is-stowed ~ .go-to-top {
        bottom: 16px !important;
    }

}


/* --------------------------------------------------------------------------
   16. Interior pages
   -------------------------------------------------------------------------- */

/* Page head: the short banner that stands in for the home page's full-screen
   hero on interior pages. Same tint and same Ken Burns treatment, at a third
   of the height, with top padding clearing the overlapping fixed header. */
.golf-pagehead {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 38vw, 30rem);
    padding-top: 130px;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.golf-pagehead-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

/* Weighted to the bottom-left, where the title sits, and darkest at the very
   top so the transparent header stays legible */
.golf-pagehead-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(8, 14, 24, 0.7) 0%,
        rgba(8, 14, 24, 0.5) 45%,
        rgba(8, 14, 24, 0.74) 100%
    );
}

.golf-pagehead-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.golf-pagehead-title {
    color: #ffffff;
    margin: 0;
}

@media (max-width: 1279px) {

    /* The header condenses to 80px below this breakpoint */
    .golf-pagehead {
        padding-top: 80px;
    }

}

/* Gold icon leading a card. Kept as a bare glyph rather than sat in a filled
   circle — a coloured disc would be the largest block of gold on the page and
   would pull rank over the type. */
.golf-icon {
    flex: 0 0 auto;
    margin-right: 1.125rem;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--gc-gold);
}

/* Tick list of included benefits. The marker is a pseudo-element rather than
   an icon font so the text indents and wraps against a hanging tick. */
.golf-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.golf-features li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.golf-features li:last-child {
    margin-bottom: 0;
}

.golf-features li::before {
    content: "";
    position: absolute;
    left: 0.125rem;
    top: 0.5em;
    width: 0.3125rem;
    height: 0.5625rem;
    border-right: 1px solid var(--gc-gold);
    border-bottom: 1px solid var(--gc-gold);
    transform: rotate(45deg);
}

/* Subscription figure. The serif at this size is what makes a price read as a
   considered annual subscription rather than a checkout total. */
.golf-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 2rem;
}

.golf-price-figure {
    font-family: var(--gc-display);
    font-size: clamp(2.25rem, 3.2vw, 2.875rem);
    line-height: 1;
    color: var(--gc-heading);
}

.golf-price-term {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gc-body);
}

/* "from" ahead of a starting price, in the same voice as the /year after it */
.golf-price-from {
    margin-right: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gc-body);
}

/* A category priced on enquiry: the figure's face at a size the sentence
   can carry, sitting at the same height so the cards keep their rhythm */
.golf-price-text {
    font-family: var(--gc-display);
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--gc-heading);
}

/* The recommended tier, carried on the brand navy. Everything inside has to
   be re-stated for a dark ground; the gold edge is permanent, so the card
   also opts out of the hover border draw it would otherwise inherit. */
.golf-card-featured {
    background-color: var(--gc-blue);
    border-color: var(--gc-gold);
}

.golf-card-featured::before,
.golf-card-featured::after {
    display: none;
}

.golf-card-featured .golf-h4,
.golf-card-featured .golf-price-figure {
    color: #ffffff;
}

.golf-card-featured .golf-price-figure {
    color: var(--gc-gold-light);
}

.golf-card-featured .golf-price-term,
.golf-card-featured .golf-price-from,
.golf-card-featured .golf-features li {
    color: rgba(255, 255, 255, 0.72);
}

.golf-card-featured .golf-features li::before {
    border-color: var(--gc-gold-light);
}

/* "Most popular" tab, sat on the card's top edge */
.golf-card-flag {
    position: absolute;
    top: 0;
    left: clamp(2rem, 3vw, 3rem);
    transform: translateY(-50%);
    padding: 0.4375rem 0.875rem;
    font-family: var(--gc-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gc-heading);
    background-color: var(--gc-gold-light);
}

/* Process: a gold hairline drawn across the four steps with a node marking
   each one, so the section reads as a process advancing rather than as four
   unrelated columns.

   The whole sequence runs off the single .is-revealed the observer adds to the
   wrapper: the rail draws itself left to right, then each node and its text
   arrive in turn, keyed off a --gc-step index set per column in the markup.
   One class, four staggered children, no extra JS. */
.golf-steps {
    position: relative;
}

/* The rail. Only drawn where the four steps actually sit side by side — once
   they stack, a horizontal line between them would be meaningless. */
@media (min-width: 992px) {

    .golf-steps::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 15px;
        /* Stops on the last node rather than running to the container edge, so
           the process reads as having an end. Each of the three columns is a
           third wide, and the node sits at its content edge, one gutter in. */
        right: calc(33.333% - 15px);
        height: 1px;
        background-color: var(--gc-hair);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 2s var(--gc-ease);
    }

    .golf-steps.is-revealed::before {
        transform: scaleX(1);
    }

}

/* Node sat on the rail: a golf ball, kept in the accent gold so the marker
   still reads as part of the same hairline-and-gold system.

   Drawn as inline SVG rather than taken from the icon font. Font Awesome's
   golf-ball glyph includes a tee, which at this size reads as a balloon, and it
   sits the ball high in a 416x512 em box so the rail met it below its middle.
   A plain dimpled circle in a square viewBox centres exactly on the rail.

   The dimples are translucent black rather than the section's own colour, so
   they darken whatever gold is beneath them and the ball survives being placed
   on any surface. */
.golf-step-node {
    display: block;
    width: 16px;
    height: 16px;
    margin-bottom: 2.5rem;
    color: var(--gc-gold);
    transform: scale(0);
    transition: transform 0.7s var(--gc-ease), color 0.4s var(--gc-ease);
    /* Waits for the rail to have reached this far along before appearing */
    transition-delay: calc(0.45s + var(--gc-step, 0) * 0.2s);
}

.golf-ball-body {
    fill: currentColor;
}

.golf-ball-dimple {
    fill: rgba(0, 0, 0, 0.24);
}

.golf-steps.is-revealed .golf-step-node {
    transform: scale(1);
}

/* Content rises just behind its own node */
.golf-step-body {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s var(--gc-ease), transform 0.9s var(--gc-ease);
    transition-delay: calc(0.6s + var(--gc-step, 0) * 0.2s);
}

.golf-steps.is-revealed .golf-step-body {
    opacity: 1;
    transform: none;
}

/* Step number, solid and small — the rail and node carry the rhythm now, so
   the figure does not need to be the largest thing in the column */
.golf-step-index {
    color: var(--gc-gold);
    margin-bottom: 0.875rem;
}

/* Hovering a step grows its node onto the rail */
.golf-step:hover .golf-step-node {
    transform: scale(1.35);
}

/* Once the steps stack they need their own spacing. An adjacent-sibling rule
   would break the 2-up tablet case by dropping the second column below the
   first, so every step carries a bottom margin instead and the row absorbs the
   trailing one. */
@media (max-width: 991px) {

    .golf-steps .row {
        margin-bottom: -3rem;
    }

    .golf-step {
        margin-bottom: 3rem;
    }

}

/* Current page in the navigation, marked in gold */
.navik-menu > ul > li.active > a {
    color: var(--gc-gold-light);
}


/* Tighter, equal gutters. Bootstrap's row/col pair gives 30px horizontally and
   nothing vertically — the vertical gap normally comes from per-column margin
   utilities, which is exactly why the two axes never match. Both are driven
   from one value here instead.

   The negative bottom margin on the row cancels the last row's gap, so the
   grid adds no space beneath itself and the section padding stays in charge of
   the rhythm. */
.golf-grid {
    --gc-gutter: 1rem;
    margin-left: calc(var(--gc-gutter) / -2);
    margin-right: calc(var(--gc-gutter) / -2);
    margin-bottom: calc(var(--gc-gutter) * -1);
}

.golf-grid > [class*="col-"] {
    padding-left: calc(var(--gc-gutter) / 2);
    padding-right: calc(var(--gc-gutter) / 2);
    margin-bottom: var(--gc-gutter);
}

/* Photo card: light type over a darkened photograph. The scrim is neutral
   black rather than the brand navy — over a photograph a coloured scrim casts
   the whole image, and these read better left as tone. The card's background
   colour is set as well as the image so that a photograph failing to load
   leaves a dark card with its light type still legible.

   Scrim alpha is dictated by contrast, and in this direction the risk is
   inverted: bright pixels are the danger, not dark ones. Several of these
   photographs have blown-out skies, so the floor is set assuming the worst
   case of a pure white pixel underneath.

   Black darkens far more efficiently than navy did, so matching the previous
   perceived weight takes roughly 0.20 less alpha — which buys the photographs
   about 30% exposure rather than the 10-22% the navy scrim allowed, at the
   same apparent darkness.

   Clipping is confined to the media wrapper so the card's own hover border and
   the "most popular" flag, which both sit outside the card's edge, are not cut. */
.golf-card-photo {
    background-color: var(--gc-shade);
    border-color: var(--gc-hair-light);
}

.golf-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.golf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--gc-ease);
}

.golf-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.69) 45%,
        rgba(0, 0, 0, 0.66) 100%
    );
}

/* Only the scale moves on hover. Thinning the scrim as well would brighten
   the ground under the type and cost the contrast the floor above buys. */
.golf-card:hover .golf-card-media img {
    transform: scale(1.07);
}

/* Lifts the content clear of the photograph behind it */
.golf-card-body {
    position: relative;
    z-index: 2;
}

/* Type restated for the dark ground */
.golf-card-photo .golf-h4 {
    color: #ffffff;
}

.golf-card-photo p {
    color: rgba(255, 255, 255, 0.85);
}

.golf-card-photo .golf-icon {
    color: var(--gc-gold-light);
}


/* --------------------------------------------------------------------------
   17. Wallpaper
   -------------------------------------------------------------------------- */

/* Damask tile behind a whole band. The SVG carries its own ground in the same
   grey as --gc-cream, so it replaces the section's surface rather than sitting
   over it; the matching colour is set underneath so the band still reads
   correctly before the tile has loaded, and so it degrades to a plain grey
   section if it never does.

   background-size is stated explicitly because the file has a viewBox but no
   width or height, giving it no intrinsic size — left alone it would stretch to
   the element instead of repeating. Set to a third of the source's 896.61 x
   597.74, snapped to 300 x 200: whole pixels avoid hairline seams at the
   repeat, and 3:2 is the source ratio exactly, so the motif is not distorted.

   Nothing sits on the cards themselves — they carry their own opaque surfaces,
   so the pattern stops at their edges. */
.golf-wallpaper {
    background-color: var(--gc-cream);
    background-image: url("../svg/tiles.svg");
    background-repeat: repeat;
    background-size: 300px 200px;
}


/* --------------------------------------------------------------------------
   17. Visitors page (booking form, green fees, course hours)
   -------------------------------------------------------------------------- */

/* The form is the first place on the site a visitor is asked to do work
   rather than read, so it is deliberately quiet: no filled input grounds, no
   rounded corners, no coloured focus glows. The only colour it ever takes is
   the gold hairline a field draws on focus.

   The panel that holds it. One opaque white surface lifted off the patterned
   ground — the tile stops at its edge, which is what the wallpaper was built
   to do. Note this is the opposite move to the fields inside it: a single
   container reads as a form to fill in, where a box around each field read as
   an admin panel. */
.golf-form-panel {
    padding: clamp(1.75rem, 4vw, 3.5rem);
    background-color: #ffffff;
    border: 1px solid var(--gc-hair);
}

/* Generous, and deliberately more than a form needs to function. With the
   boxes gone the gaps are what separate one field from the next, so they
   carry the rhythm the borders used to. */
.golf-field {
    margin-bottom: 2.5rem;
}

/* Labels borrow the overline treatment used elsewhere for section eyebrows,
   at a slightly larger size — small caps are what tie the form to the rest of
   the page. The heading colour rather than body grey: a label is UI, and the
   grey used for running text reads as disabled on a form. */
.golf-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gc-heading);
}

.golf-label-note {
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--gc-body);
}

/* One rule covers text inputs, selects and the textarea so they cannot drift
   apart.

   Ruled, not boxed. A column of outlined white rectangles is the single thing
   that makes a form read as an admin panel, and stacked nine deep it was the
   heaviest element on the page. Each field is now just its own baseline —
   the same 1px hairline the section dividers and rate list use — with the
   page's ground showing through. The type does the work; the line only says
   where to write. */
.golf-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0;
    font-family: var(--gc-sans);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gc-heading);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--gc-hair);
    border-radius: 0;
    /* iOS rounds and insets inputs by default, which breaks the flat rule */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.4s var(--gc-ease), box-shadow 0.4s var(--gc-ease);
}

.golf-input::placeholder {
    color: #a9acb0;
    opacity: 1;               /* Firefox dims placeholders further without this */
}

/* Focus is the one moment the accent appears in the form. The rule turns gold
   and doubles in weight — the box-shadow draws the second pixel underneath
   the border rather than growing it, so nothing shifts. A 1px colour change
   alone is too quiet to navigate a long form by keyboard. */
.golf-input:focus {
    outline: none;
    border-bottom-color: var(--gc-gold);
    box-shadow: 0 1px 0 0 var(--gc-gold);
}

textarea.golf-input {
    min-height: 6.5rem;
    resize: vertical;         /* horizontal drag would break the grid */
}

/* Selects lose their native arrow along with the rest of their chrome, so one
   is drawn back as a chevron. Inlined as a data URI rather than an icon font
   glyph so it cannot flash unstyled while Font Awesome loads. */
select.golf-input {
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181a1c' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 11px 7px;
}

/* Safari and Chrome render date inputs with their own internal padding and a
   calendar picker that sits tight to the edge; this keeps it inside the box. */
input[type="date"].golf-input::-webkit-calendar-picker-indicator {
    margin-right: 0;
    opacity: 0.55;
    cursor: pointer;
}

/* Honeypot. Bots fill every field they find; people never see this one, so
   anything in it marks the submission as automated. Positioned off-canvas
   rather than display:none — some bots skip hidden fields, and screen readers
   are handled by aria-hidden and tabindex in the markup instead. */
.golf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Solid navy — the confirming action on a form, where gold would compete with
   the page's own accents for a button that is pressed once. */
.golf-btn-navy {
    color: #ffffff;
    background-color: var(--gc-blue);
    border-color: var(--gc-blue);
}

.golf-btn-navy:hover,
.golf-btn-navy:focus {
    color: #ffffff;
    background-color: var(--gc-blue-mid);
    border-color: var(--gc-blue-mid);
}

/* Kept off the full width of the column deliberately. A solid bar spanning
   the form is a checkout button; a considered action sits at its own size and
   lets the whitespace beside it carry the weight. */
.golf-btn-submit {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}

@media (max-width: 575px) {

    /* Except on a phone, where a thumb target should span the column */
    .golf-btn-submit {
        display: block;
        width: 100%;
    }

}

.golf-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Submission feedback, revealed in place of a redirect so the visitor is
   never thrown out of the page's design onto a third party's thank-you
   screen. Hidden until JS has something to say. */
.golf-form-status {
    display: none;
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    border-left: 2px solid var(--gc-gold);
    background-color: rgba(191, 147, 48, 0.06);
}

.golf-form-status.is-shown {
    display: block;
}

.golf-form-status.is-error {
    border-left-color: #a4342a;
    background-color: rgba(164, 52, 42, 0.06);
    color: #8d2c23;
}

/* The sidebar column. Sticks alongside the form on desktop only — below that
   it is simply the next thing down the page, and pinning it would fight the
   scroll on a phone. */
@media (min-width: 992px) {

    .golf-aside {
        position: sticky;
        top: 120px;
    }

}

.golf-aside-heading {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gc-heading);
}

/* A green fee: name and qualifier on the left, figure on the right. The
   figure takes the display face for the same reason the subscription prices do:
   a lighter display numeral reads as a rate card, body text as a checkout.

   Ruled rather than boxed, for the same reason the fields are. Five outlined
   cards stacked in a narrow column read as five separate offers competing;
   one list divided by hairlines reads as a single tariff, which is what a
   club posts in its entrance hall. */
/* Centred, not baseline-aligned: the figure is nearly twice the height of the
   name beside it, so sharing a baseline with the first line left it riding
   high above a two-line label. */
.golf-fee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--gc-hair);
}

.golf-fee:first-child {
    padding-top: 0;
}

.golf-fee:last-child {
    border-bottom: 0;
}

.golf-fee-name {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gc-heading);
}

.golf-fee-note {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gc-body);
}

.golf-fee-figure {
    flex: 0 0 auto;
    margin-left: 1.25rem;
    font-family: var(--gc-display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gc-heading);
}

/* Societies note. Deliberately not a panel: a tinted box behind an accent
   edge is the house style of every framework alert component, and it would
   also be the third bordered box in a column that already has five. It earns
   its separation the way the rest of the site does — a gold rule, then air.
   The rate card above stays boxed, which is what makes this read as a note
   alongside it rather than another rate. */
.golf-note p {
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* Opening hours. A definition list rather than a table: it is pairs of
   label and value, and it needs to stack cleanly on a narrow column. */
.golf-hours {
    margin: 0;
}

.golf-hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--gc-hair);
    font-size: 0.9375rem;
}

.golf-hours-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.golf-hours-day {
    color: var(--gc-heading);
}

.golf-hours-time {
    color: var(--gc-body);
}


/* --------------------------------------------------------------------------
   18. Gallery page
   -------------------------------------------------------------------------- */

/* The home page shows a strip of four tiles cropped to matching heights,
   which suits a teaser. A gallery proper should not crop: these ten frames
   run from a 3:2 landscape to a 2:3 portrait, and forcing them to a common
   height would cut the sky off the vistas and behead the figures.

   CSS columns rather than a grid or a JS masonry library. Each frame keeps
   its own proportion, the columns balance themselves, and there is no layout
   script to run — so nothing reflows after the images load. */
.golf-masonry {
    column-count: 3;
    column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

/* Two columns, for a group of four: in three they fall 2-1-1 and leave a
   hole. Declared ahead of the breakpoints so the phone rule still wins. */
.golf-masonry-pair {
    column-count: 2;
}

@media (max-width: 991px) {
    .golf-masonry { column-count: 2; }
}

@media (max-width: 575px) {
    .golf-masonry { column-count: 1; }
}

/* break-inside is what stops a frame being split across two columns. The
   bottom margin matches the column gap so the rhythm is even both ways. */
.golf-masonry-item {
    break-inside: avoid;
    page-break-inside: avoid;       /* older Firefox */
    margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem);
}

/* The shared tile sets a fixed height and object-fit: cover for the home
   page strip. Here the frame takes whatever height the photograph asks for,
   which is the whole point of the column layout. */
.golf-masonry .golf-gallery-tile img {
    height: auto;
}


/* Heading and lead set side by side. Aligned on their first baselines rather
   than their box tops: the heading is roughly three times the size of the
   lead, so matching the tops leaves the lead's opening line floating well
   above the heading it belongs to. Matching baselines puts the two first
   lines on the same rule, which is what the eye expects.

   This only works because the overline and its rule sit above the row rather
   than inside the left column — a flex item takes its baseline from its own
   first line, so with the eyebrow inside, the lead would align to that
   instead of to the heading. */
.golf-split {
    align-items: baseline;
}


/* Contact details list. The gold glyph leads each entry the way it does on a
   card, with the label above the value so a long email address wraps under
   its own heading rather than beside it. */
.golf-contact-list li {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--gc-hair);
}

.golf-contact-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.golf-contact-label {
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gc-heading);
}

/* address is italic by default in every browser; the club's own address is
   not an aside and should read as plainly as the rest of the column. */
.golf-contact-list address {
    font-style: normal;
    line-height: 1.7;
}

/* Inline links inside body copy — a phone number in a panel, the secretary's
   address under a form. The framework's own anchor colour is a bright blue
   that belongs to no part of this palette, so these take the body colour and
   go gold on hover, exactly as the contact column's links do. */
.golf-inline-link {
    color: var(--gc-body);
    text-decoration: underline;
    overflow-wrap: anywhere;
    transition: color 0.4s var(--gc-ease);
}

.golf-inline-link:hover,
.golf-inline-link:focus {
    color: var(--gc-gold);
}

.golf-contact-list a {
    color: var(--gc-body);
    /* Long addresses must not push the column wider than its grid cell */
    overflow-wrap: anywhere;
    transition: color 0.4s var(--gc-ease);
}

.golf-contact-list a:hover,
.golf-contact-list a:focus {
    color: var(--gc-gold);
}

.golf-contact-list .golf-link {
    color: var(--gc-heading);
}


/* Events held back behind the "show more" button. display: none rather than
   visibility or opacity so the cards take no space and cannot be tabbed into
   while hidden. */
.golf-event-held {
    display: none;
}

/* Revealed cards fade up rather than appearing outright — without it three
   more cards materialise instantly and the section looks like it glitched.
   Matches the timing of the scroll reveal used everywhere else. */
@keyframes golfEventIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.golf-event-shown {
    animation: golfEventIn 0.8s var(--gc-ease) both;
}

@media (prefers-reduced-motion: reduce) {

    .golf-event-shown {
        animation: none;
    }

}


/* --------------------------------------------------------------------------
   19. Legal pages
   -------------------------------------------------------------------------- */

/* Long-form prose. Narrower than the grid column it sits in — legal text is
   read line by line, and the 75-character measure that makes it readable is
   well short of a 8-column span at desktop widths. */
.golf-prose {
    max-width: 44rem;
}

.golf-prose h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--gc-display);
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--gc-heading);
}

.golf-prose h2:first-child {
    margin-top: 0;
}

.golf-prose h3 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-family: var(--gc-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gc-heading);
}

.golf-prose p,
.golf-prose li {
    margin-bottom: 1.25rem;
}

.golf-prose ul {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}

.golf-prose li {
    margin-bottom: 0.625rem;
}

.golf-prose a {
    color: var(--gc-heading);
    border-bottom: 1px solid var(--gc-gold);
    transition: color 0.4s var(--gc-ease);
}

.golf-prose a:hover,
.golf-prose a:focus {
    color: var(--gc-gold);
}

/* Date line under the page title */
.golf-prose-meta {
    padding-bottom: 2.5rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--gc-hair);
    font-size: 0.8125rem;
}

/* Unmissable marker on text the club still has to supply or have checked.
   Loud on purpose: these pages must not go live with drafting notes left in,
   and a subtle marker is one that ships. */
.golf-todo {
    padding: 0.125rem 0.5rem;
    font-family: var(--gc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #7a2018;
    background-color: #ffe8a3;
    box-shadow: 0 0 0 1px #d8a63b;
}

.golf-notice {
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #7a2018;
    background-color: #fff6e0;
    box-shadow: inset 0 0 0 1px #d8a63b;
}

.golf-notice p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */

/* Inline SVG icons, replacing the icon font the site used to load. Sized in
   em so each one takes the type size of whatever it sits in, and filled with
   currentColor so it inherits colour and hover states without restating them
   — the two properties that made an icon font convenient in the first place. */
.golf-i {
    display: inline-block;
    height: 1em;
    /* auto, not 1em. These replaced font glyphs, whose advance width varies
       per icon — a map pin is narrower than a square. Forcing every icon into
       a 1em box padded the narrow ones and shifted the text beside them.
       With the height fixed, the viewBox gives each its own width. */
    width: auto;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* Stagger delays for [data-reveal], named in hundredths of a second so the
   class says what it does: .golf-d-15 is a 0.15s delay. These replace inline
   style="--gc-delay: …" attributes; the animation itself reads the custom
   property, so only the value moves. */
.golf-d-0   { --gc-delay: 0s; }
.golf-d-05  { --gc-delay: 0.05s; }
.golf-d-10  { --gc-delay: 0.10s; }
.golf-d-12  { --gc-delay: 0.12s; }
.golf-d-15  { --gc-delay: 0.15s; }
.golf-d-20  { --gc-delay: 0.20s; }
.golf-d-24  { --gc-delay: 0.24s; }
.golf-d-25  { --gc-delay: 0.25s; }
.golf-d-30  { --gc-delay: 0.30s; }
.golf-d-35  { --gc-delay: 0.35s; }
.golf-d-45  { --gc-delay: 0.45s; }
.golf-d-55  { --gc-delay: 0.55s; }
.golf-d-70  { --gc-delay: 0.70s; }
.golf-d-75  { --gc-delay: 0.75s; }
.golf-d-90  { --gc-delay: 0.90s; }
.golf-d-100 { --gc-delay: 1s; }
.golf-d-115 { --gc-delay: 1.15s; }

/* Position index for the three-step process on the membership page. The steps
   animation keys its own timing off this. */
.golf-step-0 { --gc-step: 0; }
.golf-step-1 { --gc-step: 1; }
.golf-step-2 { --gc-step: 2; }
.golf-step-3 { --gc-step: 3; }

/* The three small type sizes used below body copy — footer columns, fine
   print under a form, and the note in a sidebar. */
.golf-fs-sm  { font-size: 0.9375rem; }
.golf-fs-xs  { font-size: 0.875rem; }
.golf-fs-xxs { font-size: 0.8125rem; }

/* Lead paragraph set on a dark photographic ground, where the body grey has
   no contrast and pure white is too stark against the display face above it. */
.golf-lead-invert {
    color: rgba(255, 255, 255, 0.8);
}

/* The external-link mark trailing a button label. Deliberately small: it is a
   footnote to the label, not a second icon competing with it.

   Its own class rather than `.golf-btn .golf-i`, which also caught the
   floating booking button's flag — same specificity, later in the file, so it
   silently won and shrank an icon it was never meant to touch. */
.golf-i-trailing {
    height: 0.625em;
    width: auto;
    vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   21. About pages
   -------------------------------------------------------------------------- */

/* Facilities: a white card split between a photograph and its text, set on
   the pattern. The photo fills its half edge to edge, so on desktop it
   stretches to however tall the text runs rather than fixing a ratio of its
   own; below lg, where the halves stack, it takes a 4:3 frame on top. */
.golf-feature {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--gc-hair);
    box-shadow: 0 2rem 4rem -2.5rem rgba(0, 0, 0, 0.3);
}

.golf-feature + .golf-feature {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.golf-feature-media {
    position: relative;
    min-height: 22rem;
}

.golf-feature-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* On desktop the photo's half is taller than it is wide, so a landscape
   frame loses its sides. This keeps a subject that sits left of centre
   (the simulator's screen) inside what is left. */
.golf-feature-media-left img {
    object-position: 30% 50%;
}

.golf-feature-body {
    padding: clamp(2rem, 5vw, 4.5rem);
}

/* Closing call to action, set off from the copy by a hairline */
.golf-feature-foot {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gc-hair);
}

/* The tuition and fitting cards that follow the split cards */
.golf-feature-services {
    margin-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 991.98px) {

    .golf-feature-media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

}

/* In-page jump links under a page introduction */
.golf-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}

/* The club crest beside its description. Drawn on its own navy shield, so it
   needs no frame; capped so it does not outweigh the text at desktop widths. */
.golf-crest {
    max-width: 20rem;
    margin: 0 auto;
}

.golf-crest img {
    display: block;
    width: 100%;
    height: auto;
}

/* A document offered for download (the scorecard): its file-type symbol,
   what it is, and the button that opens it, in a hairline panel narrow
   enough to read as one object rather than a band across the page. */
.golf-download {
    max-width: 34rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) 2rem;
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--gc-hair);
}

.golf-download-icon {
    display: block;
    height: 3rem;
    margin: 0 auto 1.75rem;
    color: var(--gc-gold);
}

/* The format, set after the button's label as a quiet tag so nobody is
   surprised by a file opening where they expected a page. */
.golf-download-type {
    margin-left: 0.625rem;
    padding-left: 0.75rem;
    border-left: 1px solid currentColor;
    opacity: 0.7;
}

/* Prose set inside a white panel (the history page): the panel's padding
   already closes the card, so the last paragraph's margin would only add a
   lopsided gap at the foot. */
.golf-form-panel .golf-prose > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   -------------------------------------------------------------------------- */

/* Pinned to the foot of the viewport on the brand navy, above the booking
   button and go-to-top (999), which it covers until the visitor answers. */
.golf-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background-color: var(--gc-blue);
    border-top: 1px solid rgba(216, 166, 59, 0.45);
    box-shadow: 0 -18px 40px -12px rgba(10, 20, 34, 0.45);
}

.golf-cookie[hidden] {
    display: none;
}

.golf-cookie-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.5rem 30px;
}

.golf-cookie-text {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--gc-sans);
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.golf-cookie-text a {
    color: var(--gc-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.golf-cookie-text a:hover,
.golf-cookie-text a:focus {
    color: #ffffff;
}

.golf-cookie-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

/* The pair sits side by side here, so the global adjacent-button margin
   would double the gap */
.golf-cookie-actions .golf-btn + .golf-btn {
    margin-left: 0;
}

.golf-cookie-actions .golf-btn {
    padding: 1.125rem 2rem;
}

@media (max-width: 767px) {

    .golf-cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem 16px;
    }

    /* Equal halves, so neither answer looks like the default */
    .golf-cookie-actions .golf-btn {
        flex: 1 1 0;
        padding: 1rem 1rem;
    }

}