:root {
    /* Yorkie Wraps: the old yorkiewrap.co colours, which the client chose on 5 November 2026: jade green
       surfaces, white and black, cream for light sections. The two greens are sampled from the old site
       (#3e7463 for its headings and footer bar; its lighter #458c76 fails AA for small text on cream, so
       it is kept to the footer tile).
       --brand is the surface colour (headlines on cream, primary buttons, bands), --brand-deep its darker step,
       --gold the accent that was gold in the earlier schemes (awning stripes, underlines, focus rings),
       --gold-light the pale step for small accents on the brand colour. */
    --brand: #3e7463;
    --brand-deep: #2c5547;
    --gold: #3e7463;
    --gold-light: #eef7f2;
    --brand-rgb: 62, 116, 99;
    --brand-deep-rgb: 44, 85, 71;
    --seal-tile: url("/assets/images/seal-tile.png");
    /* Three places where the gold accent sat on the brand colour, and a green accent would vanish:
       the gold button, the wordmark on the scrolled header, and the second stripe of the awning. */
    --accent-button: #ffffff;
    --accent-button-ink: #3e7463;
    --accent-button-hover: #eef7f2;
    --mark-on-dark: #ffffff;
    --awning-alt: #ffffff;
    --black: #000000;
    --ink: #000000;
    --ink-soft: #505050;
    --white: #ffffff;
    --paper: #ffffff;
    /* No cream since 5 November 2026 (KJ: "white and grey from the logo, keep the black"): --cream keeps
       its name but is the light grey surface, --cream-deep its line colour, --ink-soft the seal's line-art grey. */
    --cream: #eeeeee;
    --cream-deep: #d0d0d0;
    --line: rgba(0, 0, 0, 0.18);
    /* The footer is black like the old site's, with its lighter green (#458c76, 5.3:1 on black) for links. */
    --footer-bg: #000000;
    --footer-ink: #ffffff;
    --footer-soft: rgba(255, 255, 255, 0.74);
    --footer-line: rgba(255, 255, 255, 0.16);
    --footer-accent: #458c76;
    --footer-tile-opacity: 0.04;
    /* The header and every hero are black too (KJ, 5 November 2026), like the old site's top. */
    --header-bg: #000000;
    --header-scrolled-bg: rgba(0, 0, 0, 0.94);
    --header-ink: #ffffff;
    --header-sub: rgba(255, 255, 255, 0.72);
    --header-mark: #ffffff;
    --hero-bg: #000000;
    --hero-ink: #ffffff;
    --hero-heading: #ffffff;
    --hero-eyebrow: #458c76;
    --hero-soft: rgba(255, 255, 255, 0.82);
    --hero-ghost: #ffffff;
    --hero-ghost-border: rgba(255, 255, 255, 0.7);
    --shell: 1240px;
    /* Type: Arvo stands in for the Rockwell-style slab wordmark on the trailer and logo ring;
       Rubik carries everything else (chosen 19 October 2026 to sit apart from the Roast Wrap site) */
    --display: "Arvo", "Rockwell", "Roboto Slab", serif;
    --serif: "Arvo", "Rockwell", "Roboto Slab", serif;
    --label: "Rubik", "Segoe UI", Arial, sans-serif;
    --sans: "Rubik", "Segoe UI", Arial, sans-serif;
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}

/* The two earlier schemes, kept behind the gear in the footer so the three can be compared: green and
   gold as the brief asked (19 October 2026) and maroon and gold from the seal Alban sent (2 November 2026).
   Remembered in localStorage, applied before first paint by the inline script in the head. Only the tokens
   change; every rule below reads them. */
:root[data-palette="green"] {
    --brand: #1d4a38;
    --brand-deep: #12302a;
    --gold: #c9a24a;
    --gold-light: #e6cf8a;
    --brand-rgb: 29, 74, 56;
    --brand-deep-rgb: 18, 48, 42;
    --seal-tile: url("/assets/images/seal-tile.png");
    --accent-button: var(--gold);
    --accent-button-ink: var(--brand-deep);
    --accent-button-hover: var(--gold-light);
    --mark-on-dark: var(--gold);
    --awning-alt: var(--gold);
    --ink-soft: #4a4443;
    --cream: #f3ecdc;
    --cream-deep: #d9ccab;
    --footer-bg: var(--cream);
    --footer-ink: var(--ink);
    --footer-soft: var(--ink-soft);
    --footer-line: rgba(var(--brand-rgb), 0.18);
    --footer-accent: var(--brand);
    --footer-tile-opacity: 0.07;
    --header-bg: var(--cream);
    --header-scrolled-bg: rgba(var(--brand-deep-rgb), 0.97);
    --header-ink: var(--ink);
    --header-sub: var(--ink-soft);
    --header-mark: var(--brand);
    --hero-bg: var(--cream);
    --hero-ink: var(--ink);
    --hero-heading: var(--brand);
    --hero-eyebrow: var(--brand);
    --hero-soft: var(--ink-soft);
    --hero-ghost: var(--brand);
    --hero-ghost-border: var(--brand);
}

:root[data-palette="maroon"] {
    --brand: #5d2730;
    --brand-deep: #3b161d;
    --gold: #b89b5f;
    --gold-light: #e6d4a3;
    --brand-rgb: 93, 39, 48;
    --brand-deep-rgb: 59, 22, 29;
    --seal-tile: url("/assets/images/seal-tile-maroon.png");
    --accent-button: var(--gold);
    --accent-button-ink: var(--brand-deep);
    --accent-button-hover: var(--gold-light);
    --mark-on-dark: var(--gold);
    --awning-alt: var(--gold);
    --ink-soft: #4a4443;
    --cream: #f3ecdc;
    --cream-deep: #d9ccab;
    --footer-bg: var(--cream);
    --footer-ink: var(--ink);
    --footer-soft: var(--ink-soft);
    --footer-line: rgba(var(--brand-rgb), 0.18);
    --footer-accent: var(--brand);
    --footer-tile-opacity: 0.07;
    --header-bg: var(--cream);
    --header-scrolled-bg: rgba(var(--brand-deep-rgb), 0.97);
    --header-ink: var(--ink);
    --header-sub: var(--ink-soft);
    --header-mark: var(--brand);
    --hero-bg: var(--cream);
    --hero-ink: var(--ink);
    --hero-heading: var(--brand);
    --hero-eyebrow: var(--brand);
    --hero-soft: var(--ink-soft);
    --hero-ghost: var(--brand);
    --hero-ghost-border: var(--brand);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

h1,
h2,
h3,
p,
figure,
blockquote {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.08;
    text-transform: none;
}

h1 {
    font-size: clamp(2.6rem, 4.8vw, 4.3rem);
    line-height: 1.04;
}

h2 {
    margin-bottom: 22px;
    font-size: clamp(2.6rem, 4.8vw, 4.3rem);
    line-height: 1.04;
    text-wrap: balance;
}

h3 {
    margin-bottom: 10px;
    font-family: var(--sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

::selection {
    color: var(--white);
    background: var(--brand);
}

.shell {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
}

.section {
    padding-block: clamp(72px, 8.5vw, 124px);
}

.section--green {
    color: var(--white);
    background: var(--brand);
}

.section--cream {
    background: var(--cream);
}

.section--ink {
    color: var(--white);
    background: var(--black);
}

/* Header */
.site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    color: var(--header-ink);
    background: var(--header-bg);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled,
.nav-open .site-header {
    color: var(--white);
    background: var(--header-scrolled-bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.site-header__inner {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: space-between;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
}

.nav-toggle {
    position: relative;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 10px 0;
    color: currentColor;
    background: transparent;
    cursor: pointer;
}

.nav-toggle__icon {
    display: grid;
    width: 28px;
    gap: 7px;
}

.nav-toggle__icon span {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform 180ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* Hero */

/* Ticker */

/* Shared section headings */
.section-heading h2 {
    max-width: 850px;
}

.section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: clamp(40px, 8vw, 120px);
    align-items: end;
    margin-bottom: clamp(40px, 5.5vw, 72px);
}

.section-heading--split h2 {
    margin-bottom: 0;
}

/* Intro */
.intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(44px, 6vw, 96px);
    align-items: start;
}

.intro__copy {
    padding-top: 10px;
}

/* Food cards */

/* Catering */

/* Story */

/* Numbers */

/* Gallery */

/* Dietary + seasonal */

.error-page {
    display: grid;
    min-height: 78vh;
    align-items: center;
    padding-top: 190px;
    color: var(--hero-ink);
    background: var(--hero-bg);
}

.error-page__inner {
    text-align: center;
}

.error-page h1 {
    margin-bottom: 28px;
    color: var(--hero-heading);
    font-size: clamp(3rem, 8vw, 6.5rem);
}

/* Christmas */

/* Footer */

/* Motion */
.has-js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.has-js .reveal--delay {
    transition-delay: 100ms;
}

.has-js .reveal--delay-2 {
    transition-delay: 180ms;
}

.has-js .reveal--delay-3 {
    transition-delay: 260ms;
}

.has-js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1040px) {
    .site-nav {
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .shell {
        width: min(calc(100% - 36px), var(--shell));
    }

    .site-header__inner {
        min-height: 88px;
    }

    

    .nav-toggle {
        display: flex;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        visibility: hidden;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 17px;
        padding: 116px max(28px, 8vw) 42px;
        background: var(--brand-deep);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-16px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .site-nav::after {
        position: absolute;
        right: -160px;
        bottom: -180px;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        content: "";
    }

    .nav-open .site-nav {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    

    

    

    

    

    

    

    

    

    

    

    .intro__grid,
.section-heading--split {
        grid-template-columns: 1fr;
    }

    .intro__copy {
        padding-top: 0;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 17px;
    }

    .shell {
        width: min(calc(100% - 28px), var(--shell));
    }

    .section {
        padding-block: 82px;
    }

    h1 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    h2 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    

    

    

    

    

    

    

    

    

    

    

    .section-heading--split {
        gap: 26px;
        margin-bottom: 45px;
    }
}

/* Service pages */

.service-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Who we are */

@media (max-width: 860px) {
    

    .service-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
*::before,
*::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .has-js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Header CTA keeps its red on the scrolled black header; white text stays legible on both */

/* Brand lockup: the round seal from Instagram beside the wordmark */

/* Heroes: a photo with a green tint, or the plain green gradient when there is none */

/* Cards */
.service-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Client grid */
.clients {
    padding-block: clamp(70px, 9vw, 120px);
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--line);
    list-style: none;
}

/* How booking works */
.steps__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.steps__list li {
    border-right: 1px solid var(--line);
    padding: 34px clamp(18px, 2.4vw, 36px) 10px 0;
}

.steps__list li + li {
    padding-left: clamp(18px, 2.4vw, 36px);
}

.steps__list li:last-child {
    border-right: 0;
}

.steps__list h3 {
    font-size: 1.2rem;
}

.steps__list p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* Enquiry form */
.enquiry__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 7vw, 110px);
    align-items: start;
}

.enquiry__intro {
    max-width: 460px;
    color: rgba(255, 255, 255, 0.88);
}

.enquiry-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
}

.field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.field--wide {
    grid-column: 1 / -1;
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(0, 0, 0, 0.32);
    border-radius: 0;
    padding: 12px 14px;
    color: var(--ink);
    background: var(--white);
    font-family: var(--sans);
    font-size: 1.05rem;
}

.field textarea {
    resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.field [aria-invalid="true"] {
    border-color: #b3261e;
}

.field__error {
    margin: 0;
    color: #b3261e;
    font-size: 0.88rem;
}

.field__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.field__check input {
    width: 18px;
    height: 18px;
    flex: none;
    margin: 4px 0 0;
    accent-color: var(--brand);
}

.field--checks {
    gap: 10px;
}

.field--checks legend {
    margin-bottom: 8px;
    padding: 0;
}

.enquiry-form__more {
    margin-top: 26px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.enquiry-form__more[open] summary {
    margin-bottom: 22px;
}

.enquiry-form__consent {
    margin-top: 28px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
}

.enquiry-form__privacy {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.enquiry-form__privacy a {
    color: var(--brand);
}

.form-notice {
    margin-bottom: 24px;
    border-left: 4px solid var(--brand);
    padding: 22px 24px;
    background: var(--cream);
}

.form-notice--success {
    margin-bottom: 0;
}

.form-notice--error {
    border-color: #b3261e;
}

.form-notice p {
    margin: 0;
}

.form-notice ul {
    margin: 10px 0 0 18px;
    padding: 0;
}

.form-notice a {
    color: var(--brand);
}

/* Menus: dietary band */
.dietary__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(50px, 9vw, 140px);
    align-items: start;
}

.dietary h2 {
    margin-bottom: 0;
}

/* Booking band on cream (contact page) */

/* FAQ */
.faq__inner {
    max-width: 880px;
}

.faq__item {
    border-top: 1px solid rgba(0, 0, 0, 0.22);
}

.faq__item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.faq__item summary {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 24px 0;
    font-family: var(--sans);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::after {
    margin-left: auto;
    color: var(--brand);
    font-family: var(--serif);
    font-size: 1.4rem;
    content: "+";
}

.faq__item[open] summary::after {
    content: "\2013";
}

.faq__item p {
    max-width: 720px;
    margin: 0 0 28px;
    color: var(--ink-soft);
}

/* Legal pages */
.prose__inner {
    max-width: 760px;
}

.prose h2 {
    margin: 44px 0 14px;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.prose h2:first-of-type {
    margin-top: 0;
}

.prose p {
    color: var(--ink-soft);
}

.prose a {
    color: var(--brand);
}

/* Gallery + lightbox */
.gallery-grid {
    display: grid;
    grid-auto-rows: 270px;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.gallery-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 0;
    padding: 0;
    background: var(--brand-deep);
    cursor: zoom-in;
}

.gallery-card::after {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: var(--white);
    background: rgba(var(--brand-deep-rgb), 0.55);
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.gallery-card:hover::after,
.gallery-card:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 220ms ease, transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.gallery-card:hover img,
.gallery-card:focus-visible img {
    opacity: 0.88;
    transform: scale(1.04);
}

.gallery-card--tall {
    grid-row: span 2;
}

.gallery-card--wide {
    grid-column: span 2;
}

.lightbox {
    width: min(92vw, 1120px);
    max-width: none;
    max-height: 92vh;
    border: 0;
    padding: 18px;
    color: var(--white);
    background: var(--brand-deep);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.48);
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
}

.lightbox img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
}

.lightbox p {
    margin: 14px 46px 0 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

.lightbox__close {
    position: absolute;
    z-index: 1;
    top: 23px;
    right: 23px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: var(--white);
    background: rgba(0, 0, 0, 0.5);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

/* Feature: photo beside copy on the green band */
.feature__grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(60px, 9vw, 130px);
    align-items: center;
}

.feature__image {
    margin: 0;
}

.feature__image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: var(--shadow);
}

@media (max-width: 1040px) {
    .client-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .enquiry__grid,
.dietary__grid,
.feature__grid {
        grid-template-columns: 1fr;
    }

    .service-card-grid--three {
        grid-template-columns: 1fr;
    }

    .steps__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps__list li:nth-child(2) {
        border-right: 0;
    }

    .steps__list li:nth-child(3) {
        padding-left: 0;
    }

    .steps__list li:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .gallery-grid {
        grid-auto-rows: 250px;
        grid-template-columns: 1fr 1fr;
    }

    .feature__image img {
        aspect-ratio: 16 / 12;
    }
}

@media (max-width: 600px) {
    

    

    .client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    

    .steps__list {
        grid-template-columns: 1fr;
    }

    .steps__list li,
.steps__list li + li {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-left: 0;
    }

    .steps__list li:last-child {
        border-bottom: 0;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    

    .gallery-grid {
        grid-auto-rows: 330px;
        grid-template-columns: 1fr;
    }

    .gallery-card--tall,
.gallery-card--wide {
        grid-row: auto;
        grid-column: auto;
    }

    .faq__item summary {
        gap: 14px;
        font-size: 1.2rem;
    }
}


/* ------------------------------------------------------------------
   Yorkie Wraps design system, 19 October 2026.
   Cream pages, a green slab headline, a striped awning over the photo.
   Rubik for everything that is not a headline. Pill buttons. No caps labels.
   ------------------------------------------------------------------ */

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    color: var(--white);
    background: var(--brand);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.lead {
    font-size: clamp(1.12rem, 1.4vw, 1.3rem);
    line-height: 1.5;
}

.eyebrow {
    margin-bottom: 14px;
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
}

.eyebrow--light,
.eyebrow--gold {
    color: var(--gold-light);
}

/* Buttons and links */
.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
}

.button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.button--small {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 0.9rem;
}

.button--green {
    color: var(--white);
    background: var(--brand);
}

.button--green:hover,
.button--green:focus-visible {
    background: var(--brand-deep);
}

.button--gold {
    color: var(--accent-button-ink);
    background: var(--accent-button);
}

.button--gold:hover,
.button--gold:focus-visible {
    background: var(--accent-button-hover);
}

.button--paper {
    color: var(--brand);
    background: var(--white);
}

.button--paper:hover,
.button--paper:focus-visible {
    background: var(--cream);
}

.button--ghost {
    color: var(--brand);
    border-color: var(--brand);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    color: var(--white);
    background: var(--brand);
}

.section--green .button--ghost,
.booking-band .button--ghost {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.7);
}

.section--green .button--ghost:hover,
.booking-band .button--ghost:hover {
    color: var(--brand);
    background: var(--white);
}

.button--outline {
    color: var(--ink);
    border-color: var(--ink);
}

.button--outline:hover,
.button--outline:focus-visible {
    color: var(--white);
    background: var(--ink);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.button-row--center {
    justify-content: center;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.text-link:hover,
.text-link:focus-visible {
    color: var(--brand-deep);
    text-decoration-color: var(--brand-deep);
}

/* Header */
.site-header::after {
    display: none;
}

.brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.brand__logo {
    width: 56px;
    height: auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand__mark {
    color: var(--header-mark);
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 220ms ease;
}

.brand__sub {
    margin-top: 5px;
    color: var(--header-sub);
    font-size: 0.78rem;
    transition: color 220ms ease;
}

.site-header.is-scrolled .brand__mark,
.nav-open .site-header .brand__mark {
    color: var(--mark-on-dark);
}

.site-header.is-scrolled .brand__sub,
.nav-open .site-header .brand__sub {
    color: rgba(255, 255, 255, 0.72);
}

.site-nav > a:not(.button) {
    position: relative;
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
}

.site-nav > a:not(.button)::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 2px;
    background: var(--gold);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.site-nav > a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-toggle__label {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Hero: cream page, green headline, photo under a striped awning */
.hero {
    position: relative;
    color: var(--hero-ink);
    background: var(--hero-bg);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    padding-top: 150px;
    padding-bottom: clamp(56px, 7vw, 104px);
}

.hero:not(.hero--photo) .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 160px;
}

.hero__content {
    max-width: 640px;
}

.hero h1 {
    margin-bottom: 22px;
    color: var(--hero-heading);
    text-wrap: balance;
}

.hero__lede {
    max-width: 560px;
    margin-bottom: 0;
    color: var(--hero-soft);
    font-size: clamp(1.1rem, 1.35vw, 1.28rem);
    line-height: 1.55;
}

.hero__contact {
    margin: 24px 0 0;
    font-weight: 500;
}

.hero__contact a {
    color: var(--hero-ink);
    text-decoration-color: var(--hero-eyebrow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

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

/* The home hero (and its chip row) is white under the default scheme, so the page runs black banner, white
   hero, black roast boxes, white intro (KJ, 5 November 2026). The older schemes keep their cream. */
:root:not([data-palette]) .hero--home,
:root:not([data-palette]) .hero--home + .occasion-strip {
    --hero-bg: var(--paper);
    --hero-ink: var(--ink);
    --hero-heading: var(--ink);
    --hero-eyebrow: var(--brand);
    --hero-soft: var(--ink-soft);
    --hero-ghost: var(--brand);
    --hero-ghost-border: var(--brand);
}

.hero .button--ghost,
.hero .button--outline,
.error-page .button--ghost,
.error-page .button--outline {
    color: var(--hero-ghost);
    border-color: var(--hero-ghost-border);
}

.hero .button--ghost:hover,
.hero .button--ghost:focus-visible,
.hero .button--outline:hover,
.hero .button--outline:focus-visible,
.error-page .button--ghost:hover,
.error-page .button--ghost:focus-visible,
.error-page .button--outline:hover,
.error-page .button--outline:focus-visible {
    color: var(--hero-bg);
    background: var(--hero-ghost);
}

.hero__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 28px;
    background: var(--brand-deep);
}

.hero--service .hero__image {
    aspect-ratio: 5 / 4;
}

.hero--short .hero__image {
    aspect-ratio: 3 / 2;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

.hero__image::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 24px;
    background: repeating-linear-gradient(90deg, var(--brand) 0 28px, var(--awning-alt) 28px 56px);
    content: "";
}

.hero__image::after {
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 0;
    left: 0;
    height: 14px;
    background:
        radial-gradient(circle at 14px 0, var(--brand) 13px, transparent 14px) 0 0 / 56px 14px repeat-x,
        radial-gradient(circle at 14px 0, var(--awning-alt) 13px, transparent 14px) 28px 0 / 56px 14px repeat-x;
    content: "";
}

.hero--short .hero__inner {
    padding-top: 140px;
    padding-bottom: clamp(48px, 5vw, 72px);
}

/* Occasion chips under a hero */
/* The chip row is the tail of the hero: same background, no top padding, so it reads as one band. */
.occasion-strip {
    background: var(--hero-bg);
}

.occasion-strip__track {
    display: flex;
    width: min(calc(100% - 48px), var(--shell));
    flex-wrap: wrap;
    gap: 10px;
    margin-inline: auto;
    padding: 0 0 clamp(44px, 5vw, 64px);
}

.occasion-strip span {
    border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--hero-eyebrow);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Section headings */
.section-heading--split > p {
    max-width: 420px;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: 1.02rem;
}

.section-heading--center {
    max-width: 980px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

.section-heading--center h2 {
    margin-inline: auto;
}

/* Cards: photo with an arched top, copy below, nothing boxed in */
.service-card {
    --card-pad: 0;
    display: flex;
    min-height: 0;
    flex-direction: column;
    border: 0;
    padding: 0;
    background: transparent;
}

.service-card figure {
    margin: 0 0 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 180px 180px 18px 18px;
    background: var(--brand-deep);
}

.service-card-grid:not(.service-card-grid--three) .service-card figure {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
}

.service-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

.service-card h3 {
    margin-bottom: 8px;
    color: var(--ink);
}

.service-card > p {
    max-width: 560px;
    margin-bottom: 0;
    color: var(--ink-soft);
}

.service-card__note {
    margin-top: 12px;
}

.service-card__note a {
    color: var(--brand);
    font-weight: 500;
}

.service-card--link {
    border-radius: 18px;
    padding: clamp(24px, 3vw, 36px);
    background: var(--cream);
}

.service-card__kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 500;
}

.service-card--link .text-link {
    margin-top: auto;
    padding-top: 24px;
}

.service-related__inner {
    display: grid;
    grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.service-related__inner .eyebrow {
    margin: 12px 0 0;
}

.service-related__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.service-related__links a {
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    padding: 18px 22px;
    color: var(--brand);
    background: var(--white);
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.service-related__links a:hover,
.service-related__links a:focus-visible {
    color: var(--white);
    background: var(--brand);
}

.service-related__links span {
    font-family: var(--sans);
    font-size: 1rem;
}

/* Steps, FAQ, client grid, legal */
.steps__list span {
    display: block;
    margin-bottom: 18px;
    color: var(--brand);
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
}

.faq__number {
    display: none;
}

.client-grid li {
    display: grid;
    min-height: 96px;
    place-items: center;
    padding: 18px 14px;
    color: var(--ink-soft);
    background: var(--paper);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}

.hero h1 em {
    color: inherit;
    font-style: normal;
}

.prose__meta {
    margin-bottom: 32px;
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 500;
}

/* Enquiry panel */
.enquiry .section-heading h2 {
    margin-bottom: 16px;
}

.enquiry__alt {
    font-weight: 500;
}

.enquiry__alt a {
    color: var(--gold-light);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.enquiry__panel {
    border-radius: 20px;
    padding: clamp(26px, 4vw, 44px);
    color: var(--ink);
    background: var(--paper);
}

.field > label,
.field legend {
    font-size: 0.9rem;
    font-weight: 600;
}

.field > label span {
    color: var(--ink-soft);
    font-weight: 400;
}

.field input:not([type="checkbox"]),
.field select,
.field textarea {
    border-radius: 10px;
    font-size: 1rem;
}

.enquiry-form__more summary {
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.enquiry-form__more summary span {
    color: var(--ink-soft);
    font-weight: 400;
}

.form-notice {
    border-radius: 12px;
}

.form-notice h3 {
    font-size: 1.2rem;
}

/* Booking band: centred, one message, one button */
.booking-band {
    padding-block: clamp(64px, 8vw, 110px);
    color: var(--white);
    background: var(--brand);
}

.booking-band__inner {
    display: grid;
    max-width: 760px;
    justify-items: center;
    gap: 26px;
    text-align: center;
}

.booking-band h2 {
    margin-bottom: 0;
    color: var(--white);
}

.booking-band .eyebrow {
    margin-bottom: 10px;
    color: var(--gold-light);
}

.booking-band__copy {
    max-width: 560px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.9);
}

.booking-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.booking-band--cream {
    color: var(--ink);
    background: var(--paper);
}

.booking-band--cream h2,
.booking-band--cream .eyebrow {
    color: var(--brand);
}

.booking-band--cream .booking-band__copy {
    color: var(--ink-soft);
}

/* Footer: wrap paper with the seal printed faintly across it */
.site-footer {
    position: relative;
    border-top: 1px solid var(--footer-line);
    padding-top: clamp(56px, 7vw, 96px);
    color: var(--footer-ink);
    background: var(--footer-bg);
    isolation: isolate;
}

.site-footer::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--seal-tile) 0 0 / 160px 160px repeat;
    content: "";
    opacity: var(--footer-tile-opacity);
    pointer-events: none;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr;
    gap: clamp(36px, 6vw, 96px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--footer-accent);
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.footer-brand img {
    width: 56px;
    height: auto;
}

.site-footer__brand p {
    max-width: 420px;
    margin-bottom: 22px;
    color: var(--footer-soft);
}

.site-footer h2 {
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
}

.site-footer__pages ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__pages a {
    color: var(--footer-ink);
    font-weight: 500;
    text-decoration: none;
}

.site-footer__pages a:hover,
.site-footer__pages a:focus-visible {
    color: var(--footer-accent);
    text-decoration: underline;
    text-decoration-color: var(--footer-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.footer-contact {
    display: inline-block;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--footer-accent);
    color: var(--footer-accent);
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-contact:hover,
.footer-contact:focus-visible {
    border-color: var(--footer-ink);
}

.site-footer__contact p {
    margin-bottom: 16px;
    color: var(--footer-soft);
    font-size: 0.95rem;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links a {
    display: inline-block;
    border: 1.5px solid var(--footer-accent);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--footer-accent);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.social-links a:hover,
.social-links a:focus-visible {
    color: var(--white);
    border-color: var(--footer-accent);
    background: var(--footer-accent);
}

.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    border-top: 1px solid var(--footer-line);
    padding-block: 22px 30px;
}

.site-footer__base p {
    margin: 0;
    color: var(--footer-soft);
    font-size: 0.88rem;
}

.site-footer__base a {
    margin-left: 18px;
    color: var(--footer-soft);
}

.site-footer__base a:first-child {
    margin-left: 0;
}

.error-page {
    background: var(--hero-bg);
}

.error-page h1 {
    color: var(--hero-heading);
}

.error-page p:not(.eyebrow) {
    font-family: var(--sans);
    font-size: 1.15rem;
}

@media (max-width: 1040px) {
    .hero__inner {
        gap: 40px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .site-nav > a:not(.button) {
        font-family: var(--display);
        font-size: clamp(1.7rem, 6.5vw, 2.6rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }

    .hero__inner,
    .hero--photo .hero__inner {
        grid-template-columns: 1fr;
        padding-top: 124px;
    }

    .hero__image,
    .hero--service .hero__image,
    .hero--short .hero__image {
        aspect-ratio: 4 / 3;
    }

    .service-related__inner,
    .service-related__links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero__inner,
    .hero--photo .hero__inner,
    .hero:not(.hero--photo) .hero__inner {
        padding-top: 112px;
        padding-bottom: 40px;
    }

    .hero__image::before {
        height: 18px;
        background: repeating-linear-gradient(90deg, var(--brand) 0 22px, var(--awning-alt) 22px 44px);
    }

    .hero__image::after {
        top: 18px;
        height: 11px;
        background:
            radial-gradient(circle at 11px 0, var(--brand) 10px, transparent 11px) 0 0 / 44px 11px repeat-x,
            radial-gradient(circle at 11px 0, var(--awning-alt) 10px, transparent 11px) 22px 0 / 44px 11px repeat-x;
    }

    .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .button-row .button {
        width: 100%;
    }

    .occasion-strip__track {
        width: min(calc(100% - 28px), var(--shell));
    }

    .service-card figure {
        border-radius: 140px 140px 16px 16px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .site-footer__base {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .brand {
        gap: 9px;
    }

    .brand__logo {
        width: 44px;
    }

    .brand__mark {
        font-size: 1.2rem;
    }

    .brand__sub {
        font-size: 0.7rem;
    }
}

/* Client logos: uniform height, greyscale so fourteen brand palettes sit quietly together */
.client-grid li {
    min-height: 110px;
    padding: 22px 20px;
}

.client-grid img {
    width: auto;
    max-width: 140px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.78;
    transition: filter 160ms ease, opacity 160ms ease;
}

.client-grid li:hover img {
    filter: none;
    opacity: 1;
}

@media (max-width: 600px) {
    .client-grid li {
        min-height: 90px;
        padding: 16px 14px;
    }

    .client-grid img {
        max-width: 110px;
        height: 38px;
    }
}

/* Home intro: photo beside the copy */
.intro--photo .intro__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 6vw, 96px);
    align-items: center;
}

.intro__figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 24px;
    background: var(--brand-deep);
}

.intro__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.intro--photo .intro__copy {
    padding-top: 0;
}

.intro--photo h2 {
    margin-bottom: 18px;
}

.intro--photo .lead {
    margin-bottom: 18px;
}

.intro--photo p:not(.lead, .eyebrow) {
    color: var(--ink-soft);
}

@media (max-width: 860px) {
    .intro--photo .intro__grid {
        grid-template-columns: 1fr;
    }

    .intro__figure {
        max-width: 520px;
        aspect-ratio: 4 / 3;
    }
}

/* Showcase row on the home page: the roast boxes studio shot KJ supplied on 5 November 2026, run full
   width on black, its own background, so the row reads like the banner. (The market wrap from the same
   batch is the hero photo above it.) */
.showcase--boxes {
    padding-top: clamp(72px, 8.5vw, 124px);
    color: var(--white);
    background: var(--black);
}

.showcase__heading {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.showcase__heading h2 {
    color: var(--white);
}

.showcase__heading p:not(.eyebrow) {
    max-width: 560px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.82);
}

.showcase__banner {
    display: block;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: clamp(28px, 3.5vw, 48px) auto 0;
}

/* Phones: every row heading is centred (KJ, 5 November 2026). Heroes keep their left alignment. */
@media (max-width: 700px) {
    .section-heading,
    .section-heading--split > div,
    .section-heading--split > p,
    .intro__copy > .eyebrow,
    .intro__copy > h2,
    .enquiry__intro,
    .enquiry__alt,
    .service-related__inner .eyebrow {
        text-align: center;
    }

    .section-heading h2,
    .section-heading--split > p,
    .enquiry__intro {
        max-width: none;
        margin-inline: auto;
    }
}

/* Colour-scheme switch: a small gear at the foot of the page, deliberately quiet. Harmless if found.
   The Instagram seal (white disc, black and red line art) serves the default and green schemes; the
   maroon seal only its own. */
.brand__logo--maroon,
.footer-brand__logo--maroon {
    display: none;
}

:root[data-palette="maroon"] .brand__logo--green,
:root[data-palette="maroon"] .footer-brand__logo--green {
    display: none;
}

:root[data-palette="maroon"] .brand__logo--maroon,
:root[data-palette="maroon"] .footer-brand__logo--maroon {
    display: block;
}

.palette-toggle {
    display: none;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: var(--footer-soft);
    background: transparent;
    opacity: 0.28;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity 180ms ease, transform 300ms ease;
}

.has-js .palette-toggle {
    display: inline-grid;
    place-items: center;
}

.palette-toggle svg {
    width: 14px;
    height: 14px;
}

.palette-toggle:hover,
.palette-toggle:focus-visible {
    opacity: 0.8;
    transform: rotate(60deg);
    outline: none;
}

.palette-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--gold);
}

/* Home banner (2 November 2026): the client's studio shot (text-free version from KJ), the wraps on black
   with their reflection, and the slogan set large in cream over the black top of the photo. Above the cream hero.
   On wide screens the headline is laid over the picture; on phones it sits above and the picture is pulled up
   under it (the top of the photo is plain black, so the overlap is invisible). */
.hero-banner {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: var(--black);
}

.hero-banner__inner {
    position: absolute;
    z-index: 1;
    top: clamp(184px, 17vw, 268px);
    right: 0;
    left: 0;
    text-align: center;
}

.hero-banner h1 {
    max-width: 22ch;
    margin: 0 auto;
    color: var(--white);
    font-size: clamp(2.8rem, 6.9vw, 6.6rem);
    line-height: 1.04;
    text-wrap: balance;
}

.hero-banner__image {
    display: block;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .hero-banner__inner {
        position: relative;
        top: auto;
        padding-top: 172px;
        text-align: left;
    }

    .hero-banner h1 {
        max-width: none;
        margin: 0;
        font-size: clamp(3.2rem, 13.5vw, 4.6rem);
        line-height: 1.02;
        text-wrap: pretty;
    }

    .hero-banner__image {
        position: relative;
        z-index: 0;
        margin-top: -20vw;
    }
}

.hero-banner + .hero .hero__inner {
    padding-top: clamp(56px, 7vw, 104px);
}

.hero .hero__title {
    font-size: clamp(2.6rem, 4.8vw, 4.3rem);
    line-height: 1.04;
    margin-bottom: 22px;
    color: var(--hero-heading);
    text-wrap: balance;
}


/* Phones: the hero and the home banner headline are centred too (KJ, 5 November 2026: "all headings,
   including the main hero one"). Kept at the end of the file so it wins over the banner's own phone rules. */
@media (max-width: 700px) {
    .hero__content,
    .hero-banner__inner {
        text-align: center;
    }

    .hero__lede,
    .hero-banner h1 {
        margin-inline: auto;
    }

    .hero .button-row,
    .occasion-strip__track {
        justify-content: center;
    }
}