:root {
    /* Yorkie Wraps: maroon surfaces, muted gold accents, cream for light sections, black ink.
       Maroon and gold from the seal Alban sent (2 November 2026, preferred over the brief's green).
       --brand is the surface colour (headlines on cream, primary buttons, bands), --brand-deep its darker step. */
    --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");
    --black: #000000;
    --ink: #000000;
    --ink-soft: #4a4443;
    --white: #ffffff;
    --paper: #ffffff;
    --cream: #f3ecdc;
    --cream-deep: #d9ccab;
    --line: rgba(0, 0, 0, 0.18);
    --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 earlier scheme, green and gold as the brief asked (19 October 2026), kept behind the gear in the
   footer so the two can be compared. 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");
}

*,
*::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: 20px;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
}

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(--ink);
    background: var(--cream);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled,
.nav-open .site-header {
    color: var(--white);
    background: rgba(var(--brand-deep-rgb), 0.97);
    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, 0.9fr) minmax(320px, 1.1fr);
    gap: clamp(44px, 7vw, 110px);
    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;
    background: var(--cream);
}

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

.error-page h1 {
    margin-bottom: 28px;
    color: var(--brand);
    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(1.7rem, 8vw, 2.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.78);
}

.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(--brand-deep);
    background: var(--gold);
}

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

.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(--brand);
    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(--ink-soft);
    font-size: 0.78rem;
    transition: color 220ms ease;
}

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

.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(--ink);
    background: var(--cream);
}

.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(--brand);
    text-wrap: balance;
}

.hero__lede {
    max-width: 560px;
    margin-bottom: 0;
    color: var(--ink-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(--brand);
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

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

.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(--gold) 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(--gold) 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 */
.occasion-strip {
    background: var(--cream);
}

.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 rgba(var(--brand-rgb), 0.35);
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--brand);
    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: 760px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

/* 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;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
}

.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);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
}

.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.82);
}

.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 rgba(var(--brand-rgb), 0.18);
    padding-top: clamp(56px, 7vw, 96px);
    color: var(--ink);
    background: var(--cream);
    isolation: isolate;
}

.site-footer::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--seal-tile) 0 0 / 160px 160px repeat;
    content: "";
    opacity: 0.07;
    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(--brand);
    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(--ink-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(--ink);
    font-weight: 500;
    text-decoration: none;
}

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

.footer-contact {
    display: inline-block;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--gold);
    color: var(--brand);
    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(--brand);
}

.site-footer__contact p {
    margin-bottom: 16px;
    color: var(--ink-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 rgba(var(--brand-rgb), 0.35);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--brand);
    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(--brand);
    background: var(--brand);
}

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

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

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

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

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

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

.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(--gold) 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(--gold) 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: 4 / 5;
    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;
    }
}

/* Colour-scheme switch: a small gear at the foot of the page, deliberately quiet. Harmless if found. */
.brand__logo--green,
.footer-brand__logo--green {
    display: none;
}

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

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

.palette-toggle {
    display: none;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: var(--ink-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(--cream);
    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(--cream);
    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(--brand);
    text-wrap: balance;
}