/* ==========================================================================
   Two Rivers Cattery — Main Stylesheet

   Brand palette: navy (#07123f) and slate (#434e70) as the two main
   colours, off-black and off-white/very light grey as accents. Display
   type is Fairplay Display (a licensed Adobe Fonts face — see the <link>
   note in includes/header.php); body type is Lato. The layout concept is
   unchanged from the original design pass — a well-kept cattery logbook
   and licence paperwork — just re-skinned to the new palette: the fee
   tiers still read as cloakroom-ticket stubs, and the AB39 licence stamp
   is still the one recurring signature mark.

   The only colour outside the brand's four is a single muted red
   (--color-error), used exclusively for form validation and closure
   error states — a UX convention, not a brand colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
    --color-ink: #1a1a1a;
    --color-ink-soft: #52565f;
    --color-paper: #f7f7f5;
    --color-paper-dim: #ececec;
    --color-navy: #07123f;
    --color-navy-dark: #121820;
    --color-navy-tint: #e8eaf0;
    --color-slate: #434e70;
    --color-slate-dark: #333c58;
    --color-accent: #62a87c;
    --color-accent-dark: #508a66;
    --color-line: #dcdce0;
    --color-line-on-navy: rgba(247, 247, 245, 0.16);
    --color-error: #a13d3d;

    --font-display: 'playfair-display', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    --container-width: 1180px;
    --topbar-height: 50px;
    --header-height: 170px;
    --header-height-compact: 92px;
    --logo-height-compact: 48px;
    --radius: 4px;

    --transition: 0.25s ease;
    --transition-slow: 0.5s ease;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-ink);
    background: var(--color-paper);
    /* The topbar and header are both fixed/out of flow — reserve their
       combined height so content doesn't start underneath them. The
       homepage overrides this to 0: its hero is full-bleed behind both
       (the topbar is semi-transparent over it, by design). */
    padding-top: calc(var(--topbar-height) + var(--header-height));
}

body.has-hero-header {
    padding-top: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    /* The Typekit kit for this client currently licenses Playfair Display
       at weight 400 only — no bold face. Requesting 600/700 here would
       fall back to the browser's synthetic bold, which looks muddy on a
       high-contrast serif. If a bold weight is added to the kit later,
       this can go back to 600/700 for a more typical display treatment. */
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-ink);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-navy);
    color: var(--color-paper);
    padding: 0.75em 1.25em;
    z-index: 200;
}

.skip-link:focus {
    left: 1em;
    top: 1em;
}

:focus-visible {
    outline: 3px solid var(--color-slate);
    outline-offset: 3px;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-slate);
    margin-bottom: 0.9rem;
}

.eyebrow--on-navy {
    color: var(--color-paper);
    opacity: 0.75;
}

.section {
    padding: 88px 0;
}

.section--tight {
    padding: 56px 0;
}

.section-head {
    max-width: 640px;
    margin-bottom: 2.75rem;
}

.section-head h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.section-head p {
    margin-top: 0.9rem;
    color: var(--color-ink-soft);
    font-size: 1.05rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.9em 1.6em;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-paper);
}

.btn--primary:hover {
    background: var(--color-accent-dark);
}

.btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var(--color-navy);
}

.btn--outline:hover {
    background: var(--color-navy);
    color: var(--color-paper);
}

.btn--on-navy.btn--outline {
    color: var(--color-paper);
}

.btn--on-navy.btn--outline:hover {
    background: var(--color-paper);
    color: var(--color-navy-dark);
}

.btn--scrim {
    background: rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Scroll reveal (shared behaviour with the & Tonic house pattern)
   -------------------------------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   Topbar — persistent info strip above the header on every page: licence,
   address, phone, and the enquiry CTA. Always fixed at the very top; the
   header (logo + nav) locks in directly beneath it once it can no longer
   sit at the bottom of the hero.
   -------------------------------------------------------------------------- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: rgba(18, 24, 32, 0.88);
    color: var(--color-paper);
    z-index: 110;
    font-size: 0.85rem;
}

.topbar-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.topbar-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: rgba(247, 247, 245, 0.85);
    white-space: nowrap;
}

.topbar-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.topbar-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: var(--color-accent);
    color: var(--color-paper);
    font-weight: 700;
    padding: 0 1.4rem;
    height: 100%;
    white-space: nowrap;
    transition: background var(--transition);
}

.topbar-cta:hover {
    background: var(--color-accent-dark);
}

.topbar-cta svg {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   Header — the logo + nav bar. Default look (used on every non-hero page,
   always) is a solid, light bar with the dark logo, sitting fixed directly
   under the topbar. On the homepage this default is overridden: it starts
   transparent with the light logo at the bottom of the hero, then switches
   BACK to this default look once "locked" — see the .hero-scoped rules
   further down.
   -------------------------------------------------------------------------- */
.header {
    background: var(--color-paper);
    color: var(--color-navy);
    height: var(--header-height);
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--color-line);
    transition: background var(--transition), box-shadow var(--transition), color var(--transition), height var(--transition-slow);
}

/* Compact state — once the header is "stuck" (locked on the homepage, or
   simply scrolled on every other page, where it's stuck from the start),
   it shrinks down from its full resting size. See the scroll logic in
   main.js for how .header--locked gets toggled on non-hero pages too. */
.header.header--locked {
    height: var(--header-height-compact);
}

.header.header--locked .logo img {
    height: var(--logo-height-compact);
}

.header-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo img {
    height: 80px;
    width: auto;
    transition: height var(--transition-slow);
}

.logo .logo-img--light {
    display: none;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.nav-list a {
    display: inline-block;
    color: inherit;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4em 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.nav-list a:hover,
.nav-list a.active {
    border-bottom-color: currentColor;
}

.nav-list .nav-cta {
    background: var(--color-navy);
    color: var(--color-paper);
    padding: 0.8em 1.4em;
    border-radius: var(--radius);
    border-bottom: none;
}

.nav-list .nav-cta:hover {
    background: var(--color-navy-dark);
}

.nav-social {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-social a {
    display: flex;
    color: inherit;
    opacity: 0.85;
}

.nav-social a:hover {
    opacity: 1;
}

.nav-social svg {
    width: 14px;
    height: 14px;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    padding: 6px 0;
}

.mobile-menu-toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    position: fixed;
    inset: calc(var(--topbar-height) + var(--header-height)) 0 0 0;
    background: var(--color-navy-dark);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 90;
    padding: 2rem 24px;
}

.mobile-nav.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav a {
    color: var(--color-paper);
    font-family: var(--font-display);
    font-size: 1.6rem;
}

.mobile-nav-phone {
    margin-top: 2.5rem;
}

.mobile-nav-phone a {
    color: var(--color-paper);
    font-weight: 700;
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   Closure notice (inline, Fees/Contact pages)
   -------------------------------------------------------------------------- */
.closure-notice {
    background: var(--color-navy-tint);
    border-left: 4px solid var(--color-slate);
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.closure-notice p + p {
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-navy-dark);
    color: var(--color-paper);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Homepage hero header — starts transparent (light logo, light nav text)
   at the bottom of the hero, in flow, so it scrolls away with the page —
   then "locks" to the site's normal solid/light header, fixed directly
   under the topbar, once its scroll position would reach that point. The
   threshold in main.js is chosen so the two positions coincide pixel for
   pixel — only the background/logo fade, never a jump. Every other page
   just gets the normal header look permanently, from includes/header.php.
   -------------------------------------------------------------------------- */
.hero .header {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    background: transparent;
    color: var(--color-paper);
    box-shadow: none;
}

.hero .header:not(.header--locked) .logo-img--dark {
    display: none;
}

.hero .header:not(.header--locked) .logo-img--light {
    display: block;
}

.hero .header:not(.header--locked) .nav-list .nav-cta {
    background: var(--color-paper);
    color: var(--color-navy);
}

/* A translucent scrim behind the bar itself — not the whole hero — so the
   logo and nav stay readable over any part of the rotating photos even
   though the hero image itself is shown at full, untinted brightness. */
.hero .header:not(.header--locked)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 32, 0.35);
    z-index: -1;
}

.hero .header.header--locked {
    position: fixed;
    top: var(--topbar-height);
    bottom: auto;
    background: var(--color-paper);
    color: var(--color-navy);
    box-shadow: 0 1px 0 var(--color-line);
}

.hero-media {
    position: absolute;
    inset: 0;
}

/* Rotating background — four photos cut straight into one another with a
   true crossfade: each image's fade-out window exactly overlaps the next
   image's fade-in window, so there's never a moment where both are faded
   out at once (which would otherwise flash the plain background colour
   through). Each image gets its OWN keyframes (rather than one shared
   keyframe plus animation-delay) so the very first cycle after page load
   is already correct — nothing to "warm up" into on a second loop. No
   overlay of any kind — the photos show at full, true brightness. */
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.hero-media img:nth-of-type(1) { animation-name: heroSlide0; }
.hero-media img:nth-of-type(2) { animation-name: heroSlide1; }
.hero-media img:nth-of-type(3) { animation-name: heroSlide2; }
.hero-media img:nth-of-type(4) { animation-name: heroSlide3; }

@keyframes heroSlide0 {
    0%, 20% { opacity: 1; }
    25%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes heroSlide1 {
    0%, 20% { opacity: 0; }
    25%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes heroSlide2 {
    0%, 45% { opacity: 0; }
    50%, 70% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

@keyframes heroSlide3 {
    0%, 70% { opacity: 0; }
    75%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

.hero-inner {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--topbar-height) + 48px) 24px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.75rem;
}

.hero-divider {
    width: 1px;
    height: 44px;
    background: rgba(247, 247, 245, 0.55);
    transform: scaleY(0);
    transform-origin: center;
    animation: heroDividerGrow 0.9s ease-out 0.3s both;
}

.hero-divider--bottom {
    animation-delay: 0.6s;
}

@keyframes heroDividerGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.hero-inner .eyebrow {
    color: var(--color-paper);
    opacity: 0.85;
    margin: 0;
    text-shadow: 0 2px 14px rgba(18, 24, 32, 0.55);
}

.hero-inner h1 {
    color: var(--color-paper);
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.2;
    text-shadow: 0 2px 20px rgba(18, 24, 32, 0.55);
}

.hero-inner .hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .hero-media img {
        animation: none;
        opacity: 0;
    }

    .hero-media img:first-of-type {
        opacity: 1;
    }

    .hero-divider {
        animation: none;
        transform: scaleY(1);
    }
}

/* --------------------------------------------------------------------------
   About / promise
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Why choose us — three short reasons, deliberately not numbered: "Offer",
   "Quality" and "Perfect" aren't a sequence, so a 01/02/03 marker would
   claim an order that isn't really there.
   -------------------------------------------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.why-card {
    padding: 1.8rem 0 0;
    border-top: 2px solid var(--color-navy);
}

.why-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

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

.promise {
    background: var(--color-paper);
}

/* Alternate section background — a light grey step down from the base
   paper colour, used to separate consecutive plain sections that would
   otherwise blend into one continuous block. */
.section--alt {
    background: var(--color-paper-dim);
}

.promise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.promise-quote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-style: italic;
    color: var(--color-navy);
    line-height: 1.4;
    border-left: 3px solid var(--color-slate);
    padding-left: 1.5rem;
}

.promise-body p + p {
    margin-top: 1rem;
}

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

/* --------------------------------------------------------------------------
   Feature rows (accommodation / location / as-standard)
   -------------------------------------------------------------------------- */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-row + .feature-row {
    margin-top: 88px;
}

.feature-row--reverse .feature-media {
    order: 2;
}

.feature-media img,
.feature-media .location-diagram {
    border-radius: var(--radius);
}

.feature-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.feature-text h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    margin-bottom: 1rem;
}

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

.feature-text p + p {
    margin-top: 1rem;
}

.feature-text .btn {
    margin-top: 1.5rem;
}

/* Local map diagram (replaces the old embedded Google Static Map, which
   had a live API key exposed in the page source). */
.location-diagram {
    background: var(--color-navy-tint);
    border: 1px solid var(--color-line);
    aspect-ratio: 4 / 3;
    width: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   As standard (policy notes)
   -------------------------------------------------------------------------- */
.as-standard {
    background: var(--color-navy-dark);
    color: var(--color-paper);
}

.as-standard h2 {
    color: var(--color-paper);
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.policy-card {
    background: rgba(247, 247, 245, 0.06);
    border: 1px solid var(--color-line-on-navy);
    border-radius: var(--radius);
    padding: 1.8rem;
}

.policy-card h3 {
    color: var(--color-paper);
    font-size: 1.15rem;
    margin-bottom: 0.7rem;
}

.policy-card p {
    color: rgba(247, 247, 245, 0.78);
    font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   Page title band — the big two-line Playfair heading used at the top of
   Our Fees and Get in Touch, with a thin rule under the closing word.
   -------------------------------------------------------------------------- */
.page-title {
    padding: 72px 0 24px;
}

/* The shared .section-head class carries a large bottom margin sized for
   eyebrow+heading blocks that sit above a grid further down the page —
   here it's a single lead-in sentence directly followed by content, so
   that spacing isn't wanted. */
.page-title .section-head {
    margin-bottom: 0;
}

.page-title h1 {
    font-size: clamp(3rem, 8.5vw, 6rem);
    line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Pricing cards (Our Fees page) — two per row. The card itself stays
   compact (photo, title, price, CTA) with the price as the dominant
   element; the fuller description sits as plain page text underneath,
   not boxed inside the card.
   -------------------------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.75rem;
}

.pricing-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(7, 18, 63, 0.1);
}

.pricing-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pricing-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding: 1.5rem;
}

.pricing-card-body h2 {
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.pricing-card-price .amount {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--color-navy);
}

.pricing-card-price .period {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.pricing-card .btn {
    margin-top: auto;
}

.pricing-item-description {
    color: var(--color-ink-soft);
    font-size: 0.95rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
}

.fees-pricing-section {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   "More than four cats" — a dedicated section rather than a trailing
   sentence tucked inside the last pricing card.
   -------------------------------------------------------------------------- */
.more-than-four {
    text-align: center;
}

.more-than-four h2 {
    margin-bottom: 0.75rem;
}

.more-than-four p {
    color: var(--color-ink-soft);
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.fees-notes {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line);
    display: grid;
    gap: 0.6rem;
    text-align: center;
}

.fees-notes p {
    color: var(--color-ink-soft);
    font-size: 0.95rem;
}

.intro-offer-banner {
    background: var(--color-slate);
    color: var(--color-paper);
    border-radius: var(--radius);
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.intro-offer-banner .eyebrow {
    color: var(--color-paper);
    opacity: 0.85;
}

.intro-offer-banner h3 {
    color: var(--color-paper);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* --------------------------------------------------------------------------
   Gallery — photo-corner treatment
   -------------------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem 1.5rem;
}

.gallery-item {
    background: var(--color-paper);
    padding: 12px 12px 34px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transform: rotate(var(--tilt, 0deg));
    transition: transform var(--transition);
}

.gallery-item:hover {
    transform: rotate(0deg) translateY(-4px);
}

.gallery-item:nth-child(4n+1) { --tilt: -2deg; }
.gallery-item:nth-child(4n+2) { --tilt: 1.5deg; }
.gallery-item:nth-child(4n+3) { --tilt: -1deg; }
.gallery-item:nth-child(4n+4) { --tilt: 2deg; }

.gallery-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.gallery-trigger:focus-visible {
    outline: 3px solid var(--color-slate);
    outline-offset: 2px;
}

.gallery-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform var(--transition);
}

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

.gallery-item figcaption {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.7rem;
    text-align: center;
    margin-top: 10px;
    color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Gallery lightbox
   -------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 63, 0.92);
}

.lightbox-content {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox-caption {
    margin-top: 1rem;
    color: var(--color-paper);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 2;
    background: rgba(247, 247, 245, 0.1);
    border: 1px solid rgba(247, 247, 245, 0.35);
    color: var(--color-paper);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(247, 247, 245, 0.22);
}

.lightbox-close {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 2rem;
}

.lightbox-nav--prev { left: 24px; }
.lightbox-nav--next { right: 24px; }

@media (max-width: 768px) {
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox-nav--prev { left: 10px; }
    .lightbox-nav--next { right: 10px; }

    .lightbox-close {
        top: 12px;
        right: 12px;
    }
}

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.news-list {
    display: grid;
    gap: 1.75rem;
}

.news-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.75rem;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.news-date {
    font-family: var(--font-body);
    text-align: center;
    border-right: 1px dashed var(--color-line);
    padding-right: 1.5rem;
}

.news-date .day {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-navy);
    line-height: 1;
}

.news-date .month {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-soft);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.news-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.news-card h3 a:hover {
    color: var(--color-slate);
}

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

.news-card .btn {
    margin-top: 1rem;
}

.news-card--offer {
    border-color: var(--color-accent);
    border-width: 2px;
}

.news-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-slate);
    background: var(--color-navy-tint);
    border-radius: 999px;
    padding: 0.25em 0.75em;
    margin-bottom: 0.6rem;
}

.news-badge--offer {
    color: #fff;
    background: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   Single news/offer post
   -------------------------------------------------------------------------- */
.news-back-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-slate);
    margin-bottom: 1.25rem;
}

.news-back-link:hover {
    color: var(--color-navy);
}

.news-post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--color-ink-soft);
    font-size: 0.9rem;
}

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

.news-post p + p {
    margin-top: 1.1rem;
}

.news-post-cta {
    margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-page {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
}

.contact-page .feature-media {
    position: sticky;
    top: calc(var(--header-height-compact) + 2rem);
}

.map-embed {
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-page-cta {
    margin-top: 2.5rem;
}

.contact-detail-list {
    display: grid;
    gap: 1.4rem;
    margin-top: 1.5rem;
}

.contact-detail-list dt {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-slate);
}

.contact-detail-list dd {
    font-size: 1.15rem;
    margin-top: 0.2rem;
}

.hours-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3.5rem;
}

.hours-card {
    background: var(--color-navy-tint);
    border-radius: var(--radius);
    padding: 2rem;
}

.hours-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

.hours-rows {
    display: flex;
    flex-direction: column;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-line);
}

.hours-row:last-child {
    border-bottom: none;
}

.hours-row dt {
    font-weight: 700;
}

.hours-row dd {
    color: var(--color-ink-soft);
    text-align: right;
}

.hours-card-note {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.92rem;
    color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */
/* The enquiry form now lives alone on its own page, so it's centred at a
   comfortable reading width rather than stretching the full container. */
.enquiry-page {
    max-width: 640px;
    margin: 0 auto;
}

.enquiry-form {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 2.25rem;
}

#contact-form {
    scroll-margin-top: calc(var(--topbar-height) + var(--header-height-compact) + 24px);
}

.contact-form-wrap {
    text-align: center;
}

.contact-form-wrap .section-head {
    margin-left: auto;
    margin-right: auto;
}

.contact-form-wrap .form-status {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.contact-form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 2.25rem;
}

.enquiry-step[hidden] {
    display: none;
}

.form-row {
    display: grid;
    gap: 1.4rem;
}

.form-row--split {
    grid-template-columns: 1fr 1fr;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--color-ink);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font: inherit;
    padding: 0.75em 0.9em;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-ink);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-navy);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    margin-top: 0.35rem;
}

.form-hint--error {
    color: var(--color-error);
    font-weight: 600;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.75rem;
    gap: 1rem;
}

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

.form-status {
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.75rem;
    font-weight: 500;
}

.form-status--success {
    background: var(--color-navy-tint);
    color: var(--color-navy);
    border: 1px solid var(--color-slate);
}

.form-status--error {
    background: #f3e4e4;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* --------------------------------------------------------------------------
   Announcement popup
   -------------------------------------------------------------------------- */
.announcement-popup {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.announcement-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 32, 0.65);
}

.announcement-popup-card {
    position: relative;
    background: var(--color-paper);
    border-radius: var(--radius);
    padding: 2.5rem;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    border-top: 4px solid var(--color-navy);
}

.announcement-popup-card h2 {
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
    padding-right: 1.5rem;
}

.announcement-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-ink-soft);
}

.announcement-popup-close:hover {
    color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    background: var(--color-navy-dark);
    color: var(--color-paper);
}

.footer-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 64px 24px 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
}

.footer-logo {
    height: 58px;
    margin-bottom: 0.75rem;
    filter: brightness(0) invert(1);
}

.footer-owners {
    color: rgba(247, 247, 245, 0.65);
    font-size: 0.92rem;
}

.footer-address p {
    color: rgba(247, 247, 245, 0.85);
}

.footer-address a {
    color: var(--color-paper);
    font-weight: 600;
}

.footer-note {
    color: rgba(247, 247, 245, 0.6) !important;
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-nav a {
    color: rgba(247, 247, 245, 0.85);
}

.footer-nav a:hover {
    color: var(--color-paper);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid var(--color-line-on-navy);
    padding: 1.25rem 24px;
    display: flex;
    justify-content: space-between;
    max-width: var(--container-width);
    margin: 0 auto;
    font-size: 0.85rem;
    color: rgba(247, 247, 245, 0.6);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-bottom a {
    text-decoration: underline;
    text-decoration-color: rgba(247, 247, 245, 0.35);
    text-underline-offset: 0.2em;
    transition: color var(--transition);
}

.footer-bottom a:hover {
    color: var(--color-paper);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .promise-grid,
    .feature-row {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .feature-row--reverse .feature-media {
        order: 0;
    }

    .contact-page .feature-media {
        position: static;
    }

    .feature-row + .feature-row {
        margin-top: 56px;
    }

    .policy-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* The header's own breakpoint — separate from the general 768px content
   breakpoint below, because with the larger logo/header and the added
   social icons, the nav needs more room than that before it gets cramped
   (nav-list a is nowrap, so a too-narrow header would otherwise overflow
   rather than wrap — this switches to the hamburger menu before that
   point is reached). */
@media (max-width: 960px) {
    .nav,
    .mobile-menu-toggle-spacer {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Topbar collapses to just the enquiry CTA at the same point the main
       nav switches to the hamburger — the licence/address/phone details
       are already in the footer and the mobile nav. */
    .topbar-item {
        display: none;
    }

    .topbar-cta {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .section {
        padding: 64px 0;
    }

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

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

    .pricing-card-media {
        aspect-ratio: 4 / 3;
    }

    .hero-inner {
        padding: 56px 20px 80px;
    }

    .policy-grid,
    .why-grid,
    .news-card,
    .hours-cards {
        grid-template-columns: 1fr;
    }

    .news-date {
        border-right: none;
        border-bottom: 1px dashed var(--color-line);
        padding-right: 0;
        padding-bottom: 1rem;
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        justify-content: flex-start;
    }

    .news-date .day { font-size: 1.4rem; }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .form-row--split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
    }

    .intro-offer-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}