/* ============================================================
   PADEL LOGAN — shared furniture for the content pages
   (court hire, contact, corporate). Loads after site.css.
   ============================================================ */

/* ── PAGE HERO ── */
.p-hero {
    position: relative; background: var(--mgc-ink);
    background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-terms.jpg');
    background-size: cover; background-position: center;
    padding: 10rem 2.5rem 4.5rem; color: var(--cream);
}
.p-hero-inner { max-width: 1140px; margin: 0 auto; }
.p-eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); margin-bottom: 1.2rem;
}
.p-eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--white); opacity: 0.55; }
.p-title {
    font-family: 'Montserrat', sans-serif; font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; color: var(--white); margin-bottom: 1.2rem;
}
.p-title em { font-style: normal; }
.p-sub { font-size: 0.95rem; line-height: 1.8; max-width: 60ch; color: var(--cream-dim); }
.p-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ── RATE CARDS ── */
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; }
.rate-card {
    border: 1px solid rgba(234,241,246,0.16); border-radius: 3px;
    background: linear-gradient(160deg, rgba(46,147,190,0.14), rgba(15,59,89,0.1));
    padding: 2.4rem 2rem;
}
.rate-band {
    font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--white);
}
.rate-name {
    font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); margin: 0 0 0.2rem;
}
.rate-time { font-size: 0.82rem; letter-spacing: 0.1em; color: var(--cream-dim); margin-bottom: 1.8rem; }
.rate-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.95rem 0; border-top: 1px solid rgba(234,241,246,0.12);
}
.rate-line-label { font-size: 0.82rem; color: var(--cream-dim); }
.rate-line-sub { display: block; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(234,241,246,0.78); margin-top: 0.15rem; }
.rate-line-val {
    font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800;
    color: var(--white); line-height: 1; white-space: nowrap;
}
.rate-line-val sup { font-size: 0.45em; vertical-align: super; }
.rate-line.is-member { border-top-color: rgba(190,232,255,0.4); }
.rate-line.is-member .rate-line-val { color: #BEE8FF; }
.rate-line.is-member .rate-line-label { color: #BEE8FF; }

/* ── FEATURE GRID ── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.8rem; }
.feat {
    border: 1px solid var(--border-dark); border-radius: 3px; padding: 2rem 1.7rem;
    background: #ffffff;
}
.sec-navy .feat { border-color: rgba(234,241,246,0.16); background: rgba(255,255,255,0.03); }
.feat-num {
    font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.24em; color: var(--green-court);
}
.sec-navy .feat-num { color: #BEE8FF; }
.feat-title {
    font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; margin: 0.5rem 0 0.7rem; color: var(--green-deep);
}
.sec-navy .feat-title { color: var(--white); }
.feat-body { font-size: 0.86rem; line-height: 1.75; color: var(--body-grey); }
.sec-navy .feat-body { color: var(--cream-dim); }

/* ── STEPS ── */
.steps { list-style: none; counter-reset: s; margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.steps li {
    counter-increment: s; position: relative; padding-left: 3.4rem;
    font-size: 0.9rem; line-height: 1.75; color: var(--cream-dim);
}
.steps li::before {
    content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -0.15rem;
    font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700;
    letter-spacing: 0.1em; color: #BEE8FF;
}
.steps strong { color: var(--white); font-weight: 500; }

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.c-detail-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.2rem; }
.c-detail { display: flex; gap: 1rem; align-items: flex-start; }
.c-detail svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; fill: var(--green-court); }
.c-detail-label {
    display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--body-grey); margin-bottom: 0.3rem;
}
.c-detail a, .c-detail span.c-val { font-size: 0.95rem; color: var(--green-deep); text-decoration: none; line-height: 1.6; }
.c-detail a:hover { border-bottom: 1px solid var(--green-court); }

.c-map { margin-top: 3rem; border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; }
.c-map-frame { position: relative; aspect-ratio: 16 / 7; background: var(--green-deep); }
.c-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.c-form { display: flex; flex-direction: column; gap: 1.3rem; }
.c-success {
    display: none; padding: 1.4rem 1.5rem; border-left: 3px solid var(--green-court);
    background: rgba(30,111,148,0.07); font-size: 0.9rem; line-height: 1.7; color: var(--green-deep);
}
.c-success.show { display: block; }
.c-error {
    display: none; padding: 1rem 1.2rem; border-left: 3px solid var(--error);
    background: rgba(192,57,43,0.07); color: var(--error); font-size: 0.85rem; line-height: 1.6;
}
.c-error.show { display: block; }

/* ── CTA BAND ── */
.cta-band { padding: 5.5rem 2.5rem; text-align: center; }
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.cta-fine { margin-top: 1.8rem; font-size: 0.78rem; color: var(--body-grey); }
.sec-navy .cta-fine { color: rgba(234,241,246,0.75); }
.cta-fine a { color: inherit; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .rate-grid, .contact-grid { grid-template-columns: 1fr; }
    .contact-grid { gap: 3rem; }
    .feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .p-hero { padding: 8rem 1.5rem 3.2rem; }
    .cta-band { padding: 4rem 1.5rem; }
    .rate-card { padding: 1.9rem 1.4rem; }
    .p-hero-actions .btn-primary, .p-hero-actions .btn-ghost,
    .cta-actions .btn-primary, .cta-actions .btn-ghost { width: 100%; text-align: center; }
}

/* ── LEGAL / POLICY PAGES ── */
.legal { max-width: 76ch; }
.legal-updated {
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--green-court); margin-bottom: 2.4rem;
}
.legal-intro { font-size: 0.95rem; line-height: 1.85; color: var(--body-grey); }
.legal-intro p + p { margin-top: 1rem; }
.legal h2 {
    font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep);
    margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--border-dark);
}
.legal h2 .legal-num { color: var(--green-court); margin-right: 0.6rem; }
.legal p { font-size: 0.9rem; line-height: 1.85; color: var(--body-grey); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { list-style: none; margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.legal ul li {
    position: relative; padding-left: 1.4rem;
    font-size: 0.88rem; line-height: 1.7; color: var(--body-grey);
}
.legal ul li::before {
    content: ''; position: absolute; left: 0; top: 0.62rem;
    width: 5px; height: 5px; border-radius: 50%; background: var(--green-court);
}
.legal a { color: var(--green-court); }
.legal-contact {
    margin-top: 1.2rem; padding: 1.5rem 1.6rem;
    border-left: 3px solid var(--green-court); background: rgba(30,111,148,0.06);
    font-size: 0.9rem; line-height: 1.9; color: var(--green-deep);
}
.legal-contact strong { font-weight: 500; }

/* ── CORPORATE ENQUIRY FORM ── */
.corp-form { max-width: 760px; margin-top: 2.6rem; }
.corp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.corp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
/* the form sits on navy, so labels and helper text invert */
.sec-navy .field-label { color: var(--cream); }
.sec-navy .field-label .req { color: #BEE8FF; }
.sec-navy .field-hint { color: rgba(234,241,246,0.75); }
.sec-navy .choice { border-color: rgba(234,241,246,0.78); color: var(--cream); }
.sec-navy .choice:hover { border-color: #BEE8FF; background: rgba(255,255,255,0.05); }
.sec-navy .choice-box { border-color: rgba(234,241,246,0.78); background: transparent; }
.sec-navy .choice input:checked + .choice-box { background: #BEE8FF; border-color: #BEE8FF; }
.sec-navy .choice input:checked + .choice-box::after { background: var(--green-deep); }
.sec-navy .choice:has(input:checked) { border-color: #BEE8FF; background: rgba(190,232,255,0.10); }
.sec-navy .c-success { background: rgba(190,232,255,0.12); border-left-color: #BEE8FF; color: var(--cream); }
.sec-navy .c-success strong { color: var(--white); }
.sec-navy .c-success a { color: #BEE8FF; }
@media (max-width: 700px) {
    .corp-grid, .corp-grid-3 { grid-template-columns: 1fr; }
}

/* ── PLAYER LEVELS ── */
.lvl-table { margin-top: 2.6rem; border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; }
.lvl-head, .lvl-row { display: grid; grid-template-columns: 1.1fr 0.8fr 1.6fr; gap: 0; }
.lvl-head > span {
    background: var(--green-deep); color: #fff; padding: 0.85rem 1.1rem;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.lvl-row > * { padding: 1.1rem 1.1rem; border-top: 1px solid var(--border-dark); font-size: 0.88rem; line-height: 1.5; }
.lvl-row .lvl-name {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase;
    /* column, so the rating sits UNDER the name rather than beside it as a
       flex sibling, while the swatch still fills the row height */
    display: flex; flex-direction: column; justify-content: center;
}
.lvl-row .lvl-rate { font-variant-numeric: tabular-nums; color: var(--body-grey); align-self: center; }
.lvl-row .lvl-std { color: var(--body-grey); }

/* level detail cards */
.lvl-cards { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.6rem; }
.lvl-card { border: 1px solid var(--border-dark); border-radius: 3px; overflow: hidden; background: #fff; }
.lvl-card-top {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem;
    padding: 0.95rem 1.4rem;
}
.lvl-card-name {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 1.25rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.lvl-card-rate { font-size: 0.82rem; letter-spacing: 0.08em; opacity: 0.92; }
.lvl-card-body { padding: 1.2rem 1.4rem 1.4rem; }
.lvl-card-body p { font-size: 0.9rem; line-height: 1.75; color: var(--body-grey); margin-bottom: 0.8rem; }
.lvl-card-body p:last-child { margin-bottom: 0; }
.lvl-fit { font-size: 0.9rem; line-height: 1.7; color: var(--green-deep); }
.lvl-fit b { font-weight: 600; }

/* Level swatches, matching the printed sheets. Green to red, so the colour
   itself reads as increasing standard; light and dark alternate through the
   first four so the set separates on lightness as well as hue. */
.lc1 { background: #A9CE7C; color: #0F3B59; }   /* Beginner        light green  */
.lc2 { background: #2B8743; color: #fff; }      /* Beginner +      dark green   */
.lc3 { background: #F2A94E; color: #0F3B59; }   /* Beginner ++     light orange */
.lc4 { background: #B36117; color: #fff; }      /* Intermediate    burnt orange */
.lc5 { background: #96150C; color: #fff; }      /* Int. Advanced   red          */
.lc6 { background: #A8D6EC; color: #0F3B59; }   /* All Levels      light blue   */
.lc7 { background: #E993BC; color: #0F3B59; }   /* Ladies Social   pink         */
.lc8 { background: #252422; color: #fff; }      /* Community       charcoal     */

/* timetable: day columns, the same shape as the printed sheet */
.tt-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem;
    margin-top: 2.6rem; align-items: start;
}
.tt-day {
    background: rgba(255,255,255,0.05); border-radius: 4px;
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
}
.tt-day-name {
    background: rgba(255,255,255,0.12); padding: 0.75rem 0.5rem; text-align: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}
.tt-slots { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; flex: 1; }
.tt-slot {
    border-radius: 3px; padding: 0.85rem 0.6rem; text-align: center;
    display: flex; flex-direction: column; justify-content: center; min-height: 6.4rem;
}
.tt-slot-name {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.86rem; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
}
.tt-slot-rate { font-size: 0.7rem; margin-top: 0.25rem; opacity: 0.92; }
.tt-slot-time {
    font-size: 0.74rem; margin-top: 0.4rem; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/* sessions open to everyone are outlined, so a filled colour only ever means
   a specific level */
.tt-slot.tt-open { background: transparent; border: 1.5px dashed rgba(234,241,246,0.45); color: var(--cream); }

/* downloads */
.dl-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.dl {
    display: inline-flex; align-items: center; gap: 0.6rem;
    border: 1.5px solid rgba(15,59,89,0.35); border-radius: 3px;
    padding: 0.85rem 1.2rem; text-decoration: none; color: var(--green-deep);
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dl:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.dl svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.sec-navy .dl { border-color: rgba(234,241,246,0.78); color: var(--cream); }
.sec-navy .dl:hover { background: #fff; color: var(--green-deep); border-color: #fff; }

@media (max-width: 1000px) { .tt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
    .lvl-head, .lvl-row { grid-template-columns: 1fr; }
    .lvl-head { display: none; }
    .lvl-row > * { border-top: none; }
    .lvl-row { border-top: 1px solid var(--border-dark); }
    .tt-grid { grid-template-columns: 1fr 1fr; }
    .dl { width: 100%; }
}


/* ── LINKS IN PROSE ───────────────────────────────────────────
   Without this, links inside .sec-lead / .p-sub fall back to the
   browser default blue, which is invisible on the navy sections.
   Every context gets an explicit colour and an underline. */
.sec-lead a, .p-sub a, .lvl-card-body a, .cta-fine a, .field-hint a, .legal a {
    color: var(--green-court); text-decoration: none;
    border-bottom: 1px solid currentColor; transition: color 0.18s, border-color 0.18s;
}
.sec-lead a:hover, .p-sub a:hover, .lvl-card-body a:hover, .cta-fine a:hover, .field-hint a:hover {
    color: var(--green-deep);
}
/* on navy the accent has to lift off the ground, not sink into it */
.sec-navy .sec-lead a, .p-hero .p-sub a, .sec-navy .cta-fine a {
    color: #A8D6EC; border-bottom-color: rgba(168,214,236,0.55);
}
.sec-navy .sec-lead a:hover, .p-hero .p-sub a:hover, .sec-navy .cta-fine a:hover {
    color: #ffffff; border-bottom-color: #ffffff;
}

/* ── BOOKING PAGES ── */
.book-embed {
    margin-top: 2.6rem; border: 1px solid var(--border-dark); border-radius: 4px;
    background: #F4F7F9; padding: 3.2rem 2rem; text-align: center;
}
.sec-navy .book-embed { border-color: rgba(234,241,246,0.2); background: rgba(255,255,255,0.04); }
.book-embed-icon {
    width: 3rem; height: 3rem; margin: 0 auto 1.2rem; border-radius: 50%;
    border: 1.5px solid var(--green-court); display: flex; align-items: center; justify-content: center;
}
.book-embed-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--green-court); stroke-width: 2; }
.book-embed-t {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 0.7rem;
}
.sec-navy .book-embed-t { color: #fff; }
.book-embed p { font-size: 0.9rem; line-height: 1.7; color: var(--body-grey); max-width: 46ch; margin: 0 auto; }
.sec-navy .book-embed p { color: var(--cream-dim); }
.book-embed .btn-primary { margin-top: 1.6rem; }

/* ── MATCHi widget ─────────────────────────────────────────────────
   The widget draws into a shadow root, so none of this reaches inside
   it. All we own is the frame around it: a white card that matches the
   widget's own surface, and a reserved height so the page does not
   jump when the grid finally arrives. Its own time row scrolls
   sideways, so the wrapper must not add a second scroller. */
.book-widget {
    margin-top: 2.6rem; min-height: 420px;
    border: 1px solid var(--border-dark); border-radius: 4px; background: #fff;
    overflow: hidden;
}
.book-widget matchi-widget { display: block; }
/* Loading state: a quiet placeholder, replaced the moment the grid draws. */
.book-widget:not(.is-ready)::before {
    content: 'Loading live availability'; display: block; padding: 3.4rem 2rem; text-align: center;
    font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--body-grey);
}
.book-widget.is-ready { min-height: 0; }

.book-note {
    margin-top: 1.6rem; font-size: 0.9rem; line-height: 1.7; color: var(--body-grey); max-width: 62ch;
}
.book-note a { color: var(--green-deep); font-weight: 600; }

@media (max-width: 720px) {
    .book-widget { min-height: 360px; }
}

/* ratings key beneath the timetable, matching the sheet */
.tt-key { margin-top: 2.4rem; border: 1px solid rgba(234,241,246,0.2); border-radius: 4px; padding: 1.6rem 1.8rem; }
.tt-key-t {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: #A8D6EC; margin-bottom: 0.4rem;
}
.tt-key-sub { font-size: 0.88rem; line-height: 1.6; color: var(--cream-dim); margin-bottom: 1.2rem; max-width: 62ch; }
.tt-key-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.tt-key-row { display: grid; grid-template-columns: 13rem 1fr; gap: 1.1rem; align-items: center; }
.tt-key-chip {
    border-radius: 3px; padding: 0.6rem 0.7rem; text-align: center; line-height: 1.2;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.tt-key-chip small {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: 500;
    font-size: 0.66rem; letter-spacing: 0.03em; text-transform: none; margin-top: 0.15rem; opacity: 0.9;
}
.tt-key-desc { font-size: 0.86rem; line-height: 1.5; color: var(--cream); }
@media (max-width: 700px) { .tt-key-row { grid-template-columns: 1fr; gap: 0.4rem; } }


/* ── COMBINED SESSION (two levels in one slot) ──────────────
   Two colour bands rather than one split background: a single
   50/50 fill cannot clear contrast for both halves, because one
   wants white text and the other navy. */
.tt-slot.tt-combo { padding: 0; overflow: hidden; }
.tt-combo-half {
    padding: 0.5rem 0.4rem;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase;
}
.tt-combo-foot { padding: 0.5rem 0.4rem 0.6rem; background: rgba(255,255,255,0.1); }
.tt-combo-foot .tt-slot-rate,
.tt-combo-foot .tt-slot-time { display: block; margin-top: 0; }
.tt-combo-foot .tt-slot-time { margin-top: 0.25rem; }

/* Responsive hero art. The photo sits under an 80-93%% navy overlay, so it
   compresses hard with no visible change (max channel difference 11/255).
   Phones get the 800px WebP at 72KB in place of a 257KB 1280px JPEG.
   The plain url() line stays first as the fallback for anything without
   image-set(); browsers that understand it take the second declaration. */
@media (max-width: 800px) {
    .p-hero {
        background-image: linear-gradient(to bottom, rgba(15,59,89,0.40) 0%, rgba(15,59,89,0.56) 45%, rgba(15,59,89,0.76) 100%),
        url('/assets/img/heroes/hero-terms-800.jpg');
    }
}

/* ── OPENING NOTICE ──
   Sits between the hero and the booking section on the three booking pages
   while bookings are not yet open. Amber rather than the brand blue so it
   reads as information, not as another call to action. */
.open-notice { background: #FFF7E8; border-bottom: 1px solid rgba(138,90,18,0.18); }
.open-notice-inner {
    max-width: 1180px; margin: 0 auto; padding: 1.15rem 2.5rem;
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.open-notice-tag {
    flex: 0 0 auto;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: #8A5A12;
    background: rgba(138,90,18,0.12); padding: 0.28rem 0.6rem; border-radius: 2px;
}
.open-notice p {
    margin: 0; flex: 1 1 20rem; min-width: 0;
    font-family: 'Montserrat', sans-serif; font-size: 0.9rem; line-height: 1.6; color: #6B5220;
}
.open-notice a { color: #6B5220; text-decoration: underline; }
.open-notice a:hover { color: #3F3010; }
@media (max-width: 900px) {
    .open-notice-inner { padding: 1rem 1.5rem; gap: 0.6rem; }
}

/* Each page gets its own frame from the September shoot. The shared rule
   above still supplies the gradient, position and padding; these only
   swap the photograph. */
.p-hero--contact   { background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-contact.jpg'); }
.p-hero--welcome   { background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-welcome.jpg'); }
.p-hero--terms     { background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-terms.jpg'); }
.p-hero--courthire { background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-courthire.jpg'); }
.p-hero--privacy   { background-image: linear-gradient(to right, rgba(15,59,89,0.58) 0%, rgba(15,59,89,0.26) 58%, rgba(15,59,89,0.10) 100%),
        linear-gradient(to bottom, rgba(15,59,89,0.34) 0%, rgba(15,59,89,0.48) 45%, rgba(15,59,89,0.72) 100%),
        url('/assets/img/heroes/hero-privacy.jpg'); }

/* The hero wash is much lighter than it was, so the type carries its own
   contrast rather than leaning on the overlay alone. */
.p-hero .p-eyebrow, .p-hero .p-title, .p-hero .p-sub {
    text-shadow: 0 0.06em 0.5em rgba(10,43,66,0.55);
}