/* ==========================================================================
   Wayne Whitehair, Specialist Decorator — shared component styles
   Pairs with 04-branding/tokens.css (the design system / single source of truth).
   Static-design stage: these component classes map 1:1 to the theme's
   template-parts / ACF blocks later.
   ========================================================================== */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700; font-display: swap;
}
@font-face {
    font-family: "Mulish";
    src: url("../fonts/Mulish-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 900; font-display: swap;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: var(--leading-body); font-size: var(--text-base); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-text-heading); font-weight: 600; line-height: var(--leading-tight); text-wrap: balance; }
p { text-wrap: pretty; }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: var(--text-base); padding: 0.8rem 1.6rem; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all 200ms ease; min-height: 48px; }
.btn-primary { background: var(--navy-700); color: var(--white); }
.btn-primary:hover { background: var(--navy-800); }
.btn-light { background: var(--paper); color: var(--navy-700); }
.btn-light:hover { background: var(--white); }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline.on-dark { color: var(--paper); }
.btn-outline.on-light { color: var(--navy-700); }
.btn-outline:hover { background: rgba(255,255,255,0.08); }

/* Header */
header.site { position: sticky; top: 0; z-index: 50; background: rgba(246,244,239,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 0.6rem var(--gutter); }
.brand { display: flex; align-items: center; }
.brand img { height: 32px; width: auto; position: relative; top: 4px; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { font-size: 0.95rem; font-weight: 600; color: var(--navy-800); }
.nav-links a:hover { color: var(--navy-500); }
.nav-cta { display: flex; align-items: center; gap: 0.9rem; }
.nav-phone { font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

/* Hero (homepage full-bleed) */
.hero { position: relative; min-height: clamp(520px, 80vh, 760px); display: flex; align-items: center; color: var(--paper); }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,34,44,0.88) 0%, rgba(24,34,44,0.68) 38%, rgba(24,34,44,0.38) 68%, rgba(24,34,44,0.18) 100%); }
.hero .container { position: relative; width: 100%; padding-block: var(--space-2xl); }
.hero .eyebrow { color: var(--stone-300); }
.hero h1 { color: var(--paper); font-size: clamp(2.4rem, 3.6vw, 3.3rem); max-width: 26ch; margin: 1rem 0; font-weight: 600; }
.hero p { font-size: var(--text-lg); max-width: 56ch; color: rgba(246,244,239,0.92); }
.hero .btns { display: flex; gap: 1rem; margin-top: var(--space-lg); flex-wrap: wrap; }
.hero.hero-service { min-height: clamp(440px, 62vh, 600px); }   /* shorter than the homepage hero */
.hero.hero-service h1 { font-size: var(--text-5xl); max-width: 20ch; }

/* Trust stripe */
.trust { background: var(--navy-900); color: var(--paper); }
.trust .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem; padding-block: 0.9rem; font-size: 0.9rem; }
.trust span { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.02em; }
.trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stone-400); }

/* Sections */
.section { padding-block: var(--space-2xl); }
.section.alt { background: var(--color-bg-alt); }
.section-head { max-width: 60ch; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-4xl); margin: 0.5rem 0; }
.section-head p { font-size: var(--text-lg); color: var(--color-text-muted); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

/* Services */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.service { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.service.feature { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; display: grid; }
.service .media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.service.feature .media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.service .media img { width: 100%; height: 100%; object-fit: cover; }
.service .body { padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.6rem; }
.service .icon { width: 46px; height: 46px; color: var(--navy-700); margin-bottom: 0.3rem; }
.service .icon svg { width: 100%; height: 100%; }
.service h3 { font-size: var(--text-2xl); }
.service p { color: var(--color-text); font-size: 0.98rem; }
.service .more { margin-top: auto; font-weight: 700; color: var(--navy-700); letter-spacing: 0.02em; }
.service .more:hover { color: var(--navy-500); }
.tag { align-self: flex-start; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--navy-700); background: var(--navy-50); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); text-align: center; }
.stat { padding: var(--space-lg); }
.stat .num { font-family: var(--font-display); font-size: var(--text-5xl); color: var(--navy-700); line-height: 1; }
.stat .label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--navy-900); margin: 0.5rem 0 0.3rem; }
.stat .desc { font-size: 0.95rem; color: var(--color-text-muted); }

/* Before/after */
.ba { position: relative; max-width: 860px; margin: 0 auto; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ba .before-wrap, .ba .handle, .ba .grip, .ba .lbl { pointer-events: none; }
.ba .before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba .before-wrap img { width: auto; height: 100%; max-width: none; }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--paper); transform: translateX(-1px); }
.ba .grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--paper); color: var(--navy-700); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.ba .grip svg { width: 22px; height: 22px; }
.ba .lbl { position: absolute; bottom: 12px; padding: 0.2rem 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; background: rgba(24,34,44,0.7); color: var(--paper); border-radius: var(--radius-sm); }
.ba .lbl.b { left: 12px; } .ba .lbl.a { right: 12px; }
.ba-cap { text-align: center; color: var(--color-text-muted); margin-top: var(--space-md); font-size: 0.95rem; }
.ba-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); }
.ba-tab { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--navy-700); background: transparent; border: 1px solid var(--stone-300); border-radius: var(--radius-pill); padding: 0.6rem 1.2rem; min-height: 44px; cursor: pointer; transition: all 200ms ease; }
.ba-tab:hover { background: var(--navy-50); }
.ba-tab.is-active { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.review { position: relative; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: 0.8rem; }
.review .stars { display: inline-flex; gap: 3px; color: var(--navy-700); }
.review .stars svg { width: 18px; height: 18px; fill: currentColor; }
.review p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.45; color: var(--navy-900); }
.review .who { margin-top: auto; padding-top: 0.4rem; font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); }

/* Intro — meet Wayne (asymmetric) */
.intro-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: var(--space-xl); align-items: center; }
.intro-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 80% 25%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.intro-body h2 { font-size: var(--text-4xl); margin-bottom: var(--space-md); max-width: 20ch; }
.intro-body p { font-size: var(--text-lg); color: var(--color-text); max-width: 56ch; margin-bottom: var(--space-md); }
.intro-body .btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-lg); }

/* Skip link */
.skip-link { position: absolute; left: 0.5rem; top: 0.5rem; transform: translateY(-160%); background: var(--navy-700); color: var(--white); padding: 0.6rem 1rem; border-radius: var(--radius-md); z-index: 100; transition: transform 150ms ease; }
.skip-link:focus { transform: translateY(0); }

/* CTA band */
.cta { background: var(--navy-700); color: var(--paper); text-align: center; }
.cta .container { padding-block: var(--space-2xl); }
.cta h2 { color: var(--paper); font-size: var(--text-4xl); max-width: 20ch; margin: 0.5rem auto 0.8rem; }
.cta p { color: rgba(246,244,239,0.85); max-width: 50ch; margin: 0 auto var(--space-lg); }
.cta .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Footer */
footer.site { background: var(--navy-900); color: rgba(246,244,239,0.8); padding-block: var(--space-2xl) var(--space-lg); }
.foot-inner { padding-inline: var(--gutter); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.5fr 1.2fr; gap: var(--space-xl); }
footer.site img.logo { height: 40px; width: auto; margin-bottom: var(--space-md); }
.foot-brand { width: fit-content; max-width: 24rem; text-align: center; } /* cap at the logo width so the blurb never runs wider than the logo */
.foot-brand .foot-blurb { font-size: 0.92rem; max-width: 100%; text-align: center; }
.areas-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1.5rem; list-style: none; }
footer.site h3 { color: var(--paper); font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--space-sm); }
footer.site ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; }
footer.site a:hover { color: var(--paper); }
.foot-bottom { border-top: 1px solid rgba(246,244,239,0.15); margin-top: var(--space-xl); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: rgba(246,244,239,0.6); }
footer.site ul.areas-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1.5rem; }

/* Visible focus rings (WCAG 2.2 AA) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm);
}
.ba:focus-within { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }

/* Keyboard control for the before/after slider (drag stays for pointer) */
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; z-index: 3; }

/* Mobile call button + drawer-only items (hidden on desktop) */
.nav-call { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-md); color: var(--navy-800); }
.in-drawer { display: none; }
.nav-links .btn-primary { color: var(--white); } /* beat `.nav-links a` so the drawer CTA isn't navy-on-navy */
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(24,34,44,0.45); z-index: 40; }

/* Header collapses to the burger menu at 1100px and below */
@media (max-width: 1100px) {
    .nav-links, .nav-phone { display: none; }
    .nav-toggle { display: block; }
    .nav-call { display: inline-flex; }
    .nav-cta .nav-quote { display: none; }
    .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--paper); padding: var(--space-md) var(--gutter); border-bottom: 1px solid var(--color-border); gap: 1rem; box-shadow: var(--shadow-lg); z-index: 50; animation: navDrop var(--dur-base) var(--ease-out-quint) both; }
    .nav-links.open a:not(.btn) { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .nav-links.open .in-drawer { text-align: center; }
    .nav-links.open .nav-drawer-cta { display: inline-flex; align-self: center; } /* show the Get-a-quote button in the drawer */
    .nav-scrim.open { display: block; animation: navScrim var(--dur-base) ease both; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes navScrim { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
    .hero h1 { font-size: var(--text-5xl); }
    .services, .service.feature { grid-template-columns: 1fr; }
    .stats, .reviews { grid-template-columns: 1fr; }
    .intro-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .intro-media img { aspect-ratio: 4/3; }
    .foot-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .foot-areas-col { grid-column: auto; }
    /* Centre the whole footer on mobile */
    footer.site { text-align: center; }
    .foot-brand { width: auto; max-width: none; margin-inline: auto; }
    footer.site .foot-brand img.logo { display: block; margin-inline: auto; }
    footer.site ul { align-items: center; }
    footer.site ul.areas-cols { justify-items: center; max-width: 320px; margin-inline: auto; }
    .foot-bottom { justify-content: center; text-align: center; }
}

/* Trust strip: stack into one balanced centred column on phones */
@media (max-width: 600px) {
    .trust .container { flex-direction: column; align-items: center; gap: 0.55rem; }
}

/* ---- Motion: hover micro-interactions (subtle, ease-out) ---- */
.service { transition: transform var(--dur-base) var(--ease-out-quint), box-shadow 340ms var(--ease-out-quint), border-color var(--dur-base) ease; }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--stone-300); }
.service .more { transition: color var(--dur-fast) ease, transform var(--dur-base) var(--ease-out-quint); }
.service:hover .more { color: var(--navy-500); }
.btn-primary:hover, .btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.99); }
.review { transition: transform var(--dur-base) var(--ease-out-quint), box-shadow 340ms var(--ease-out-quint); }
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ba .grip { transition: transform var(--dur-base) var(--ease-out-quint); }
.ba:hover .grip, .ba:focus-within .grip { transform: translate(-50%,-50%) scale(1.08); }
.ba-tab { transition: background var(--dur-base) var(--ease-out-quint), color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out-quint); }
.ba-tab:active { transform: scale(0.98); }

/* ---- Motion: entrance choreography + scroll reveals ---- */
@media (prefers-reduced-motion: no-preference) {
    .hero { overflow: hidden; }
    .hero img.bg { animation: heroZoom 1400ms var(--ease-out-quint) both; }
    @keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
    .hero .eyebrow, .hero h1, .hero p, .hero .btns { animation: rise 700ms var(--ease-out-quint) both; }
    .hero .eyebrow { animation-delay: 120ms; }
    .hero h1 { animation-delay: 220ms; }
    .hero p { animation-delay: 360ms; }
    .hero .btns { animation-delay: 480ms; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* Scroll reveals — hidden state applies only with JS present AND motion allowed */
    html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out-quint), transform var(--dur-slow) var(--ease-out-quint); }
    html.js [data-reveal].in { opacity: 1; transform: none; }
    html.js .services [data-reveal]:nth-child(2) { transition-delay: 90ms; }
    html.js .services [data-reveal]:nth-child(3) { transition-delay: 160ms; }
    html.js .reviews [data-reveal]:nth-child(2) { transition-delay: 90ms; }
    html.js .reviews [data-reveal]:nth-child(3) { transition-delay: 160ms; }
    html.js .intro-body[data-reveal] { transition-delay: 120ms; }
}

/* Honour reduced-motion (WCAG 2.2 / brief §13) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Service / inner-page components — used by the kitchen-spray flagship and
   reused across the other service + area pages. Map 1:1 to ACF blocks later.
   ========================================================================== */

/* Breadcrumb */
.crumbs { font-size: var(--text-sm); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.crumbs li + li::before { content: "/"; opacity: 0.5; }
.crumbs [aria-current] { font-weight: 700; }

/* Split (text + media) — fills full-width sections while keeping the text measure tight */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split-body .section-head { margin-bottom: var(--space-md); }

/* Trio of equal cards */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

/* Icon helper (Lucide, inlined; inherits colour via currentColor) */
.ico { display: inline-flex; width: 2rem; height: 2rem; color: var(--navy-700); }
.ico svg { width: 100%; height: 100%; }
.panel .ico { margin-bottom: 0.7rem; }

/* Prose / rich text */
.prose { max-width: 68ch; }
.prose.center { margin-inline: auto; }
.prose p { margin-bottom: 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--color-text-heading); font-weight: 700; }
.prose ul { list-style: none; display: grid; gap: 0.8rem; margin: 1em 0; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-400); }

/* Two-up panels (on-site / off-site) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--white); }
.panel h3 { font-size: var(--text-2xl); margin: 0.6rem 0 0.5rem; }
.panel p { color: var(--color-text); }

/* Process steps — circular numbered badges, two columns */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; }
.step .n { width: 2.6rem; height: 2.6rem; flex: none; }
.step .n svg { width: 100%; height: 100%; display: block; }
.step .n circle { fill: var(--navy-700); }
.step .n text { fill: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 22px; font-variant-numeric: lining-nums; text-anchor: middle; dominant-baseline: central; }
.step h3 { font-size: var(--text-lg); margin-bottom: 0.25rem; }
.step p { color: var(--color-text); font-size: 0.97rem; }
.timeline-note { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

/* Finish cards */
.finishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.finish { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.finish .media { aspect-ratio: 4/3; overflow: hidden; }
.finish .media img { width: 100%; height: 100%; object-fit: cover; }
.finish .body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.finish h3 { font-size: var(--text-xl); margin-bottom: 0.3rem; }
.finish p { color: var(--color-text); font-size: 0.95rem; }

/* Pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.tiers.tiers-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
.tier { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--white); display: flex; flex-direction: column; gap: 0.4rem; }
.tier .size { font-weight: 700; color: var(--color-text-muted); font-size: 0.9rem; }
.tier .price { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--navy-700); line-height: 1; }
.tier .price small { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: 400; }
.tier .desc { color: var(--color-text); font-size: 0.95rem; margin-top: 0.3rem; }
.price-notes { margin-top: var(--space-lg); max-width: 72ch; }
.price-notes h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.price-notes ul { list-style: none; display: grid; gap: 0.5rem; }
.price-notes li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; color: var(--color-text); }
.price-notes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-400); margin-top: 0.55em; }

/* FAQ accordion (native <details>) */
.faq { max-width: 78ch; margin-inline: auto; display: grid; gap: 0.5rem; }
.qa { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--white); }
.qa summary { list-style: none; cursor: pointer; padding: var(--space-md) var(--space-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-weight: 700; font-size: var(--text-lg); color: var(--color-text-heading); min-height: 44px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 11px; height: 11px; border-right: 2px solid var(--navy-500); border-bottom: 2px solid var(--navy-500); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out-quint), border-color var(--dur-fast) ease; flex: none; }
.qa[open] summary::after { transform: rotate(225deg); }
.qa { transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
.qa summary { transition: color var(--dur-fast) ease; }
.qa:hover { border-color: var(--stone-300); box-shadow: var(--shadow-sm); }
.qa summary:hover { color: var(--navy-500); }
.qa summary:hover::after { border-color: var(--navy-700); }
.qa summary:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.qa .a { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-text); max-width: 70ch; }
.qa .a p { margin-bottom: 0.6em; }
.qa .a p:last-child { margin-bottom: 0; }

/* Quote form */
.form-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); max-width: 760px; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.9rem; }
.field .req { color: var(--error); }
.field input, .field select, .field textarea { font: inherit; font-size: var(--text-base); color: var(--color-text); width: 100%; max-width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--stone-300); border-radius: var(--radius-md); background: var(--white); min-height: 48px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-400); outline: none; box-shadow: 0 0 0 3px rgba(60,81,99,0.15); }
.field .hint { font-size: 0.8rem; color: var(--color-text-muted); }

/* Gravity Forms — restyled to match the bespoke form-card */
.gform_wrapper.gravity-theme { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); max-width: 760px; margin-inline: auto; }
.gform_wrapper.gravity-theme .gform_fields { gap: var(--space-md); grid-row-gap: var(--space-md); grid-column-gap: var(--space-md); }
.gform_wrapper.gravity-theme .gfield_label { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--color-text-heading); margin-bottom: 0.35rem; }
.gform_wrapper.gravity-theme .gfield_required { color: var(--error); }
.gform_wrapper.gravity-theme input:not([type=submit]):not([type=button]):not([type=file]),
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme select { font: inherit; font-size: var(--text-base); color: var(--color-text); width: 100%; max-width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--stone-300); border-radius: var(--radius-md); background: var(--white); min-height: 48px; box-shadow: none; }
.gform_wrapper.gravity-theme textarea { min-height: 120px; }
.gform_wrapper.gravity-theme input:focus, .gform_wrapper.gravity-theme textarea:focus, .gform_wrapper.gravity-theme select:focus { border-color: var(--navy-400); outline: none; box-shadow: 0 0 0 3px rgba(60,81,99,0.15); }
.gform_wrapper.gravity-theme .ginput_container_fileupload { border: 0; background: none; padding: 0; } /* avoid the double box: only the drop area is styled */
.gform_wrapper.gravity-theme .gform_drop_area { border: 1px dashed var(--stone-300); border-radius: var(--radius-md); background: var(--paper); color: var(--color-text-muted); cursor: pointer; padding: var(--space-lg); transition: border-color var(--dur-base) ease, background var(--dur-base) ease; }
.gform_wrapper.gravity-theme .gform_drop_area:hover { border-color: var(--navy-400); background: var(--bone-100); }
.gform_wrapper.gravity-theme .gform_drop_area .gform_button_select_files, .gform_wrapper.gravity-theme .gform_drop_area button, .gform_wrapper.gravity-theme .gform_drop_area .button { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--navy-700); border: 1px solid var(--navy-700); border-radius: var(--radius-md); padding: 0.5rem 1.1rem; min-height: 40px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.gform_wrapper.gravity-theme .gform_drop_area .gform_button_select_files:hover, .gform_wrapper.gravity-theme .gform_drop_area button:hover, .gform_wrapper.gravity-theme .gform_drop_area .button:hover { background: var(--navy-700); color: var(--white); }
.gform_wrapper.gravity-theme .gfield_description, .gform_wrapper.gravity-theme .gform_fileupload_rules { font-size: 0.8rem; color: var(--color-text-muted); }
.gform_wrapper.gravity-theme .gform_footer { margin-top: var(--space-md); padding: 0; }
.gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_footer input[type=submit] { display: inline-flex; align-items: center; justify-content: center; background: var(--navy-700); color: var(--white); border: 1px solid transparent; border-radius: var(--radius-md); padding: 0.8rem 1.6rem; min-height: 48px; font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: background 200ms ease; width: auto; }
.gform_wrapper.gravity-theme .gform_footer button:hover, .gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover { background: var(--navy-800); }
.gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gravity-theme .validation_message { font-size: 0.85rem; color: var(--error); background: none; border: 0; padding: 0.3rem 0 0; }
.gform_confirmation_message { max-width: 760px; margin-inline: auto; }

/* Finished-work grid */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); }

/* Single pull-quote */
.pull { max-width: 62ch; margin-inline: auto; text-align: center; }
.pull .stars { display: inline-flex; gap: 4px; color: var(--navy-700); margin-bottom: var(--space-md); }
.pull .stars svg { width: 20px; height: 20px; fill: currentColor; }
.pull blockquote { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.32; color: var(--navy-900); }
.pull cite { display: block; margin-top: var(--space-md); font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 0.9rem; color: var(--color-text-muted); }

/* Inner-page responsive */
@media (max-width: 860px) {
    .duo, .finishes, .tiers, .form-grid, .split, .trio, .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Gallery, area links, contact map — used by gallery / area / contact pages
   ========================================================================== */

/* Filterable gallery grid */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.gallery-item { display: flex; flex-direction: column; gap: 0.5rem; }
.gallery-item[hidden] { display: none; }
.gallery-item .img-wrap { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.gallery-item .cat { position: absolute; top: 10px; left: 10px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--paper); background: rgba(24,34,44,0.78); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }
.gallery-item figcaption { font-size: 0.88rem; color: var(--color-text-muted); }

/* Area links list */
.area-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.area-links li { flex: 0 1 180px; }
.area-links a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; white-space: nowrap; gap: 0.55rem; height: 100%; min-height: 116px; padding: var(--space-lg) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); font-weight: 600; color: var(--navy-700); transition: background 340ms ease, color 340ms ease, border-color 340ms ease, transform var(--dur-base) var(--ease-out-quint), box-shadow 340ms var(--ease-out-quint); }
.area-links a::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.area-links a:hover { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Contact map placeholder (becomes an embedded map in the theme) */
.map-embed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; aspect-ratio: 4/3; background: var(--navy-900); color: var(--paper); border-radius: var(--radius-lg); }
.map-embed svg { width: 2.4rem; height: 2.4rem; color: var(--stone-300); }
.map-embed .place { font-family: var(--font-display); font-size: var(--text-2xl); }
.map-embed .note { font-size: 0.85rem; color: var(--stone-300); }

/* ==========================================================================
   Simple title / legal / utility pages
   ========================================================================== */
.page-title { padding-block: var(--space-2xl) var(--space-lg); }
.page-title h1 { font-size: var(--text-5xl); }
.page-title .updated { margin-top: 0.5rem; color: var(--color-text-muted); font-size: 0.9rem; }
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--text-2xl); margin: var(--space-lg) 0 var(--space-sm); }
.legal p, .legal li { color: var(--color-text); margin-bottom: 0.8em; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.note { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--paper); color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }

/* Centred utility pages (404 / thank-you) */
.utility { min-height: 58vh; display: flex; align-items: center; text-align: center; }
.utility .container { max-width: 58ch; }
.utility .eyebrow { display: block; margin-bottom: var(--space-sm); }
.utility h1 { font-size: var(--text-5xl); margin-bottom: var(--space-md); }
.utility p { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-lg); }
.utility .links { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.utility .err-code { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 17vw, 10.5rem); line-height: 0.85; letter-spacing: 0.03em; color: var(--stone-300); margin-bottom: var(--space-sm); }
.utility .links + p { margin-top: var(--space-lg); margin-bottom: 0; font-size: var(--text-base); color: var(--color-text-muted); }


/* ==========================================================================
   Tweaks: clickable cards, services-hub rows, lightbox
   ========================================================================== */
/* Whole-card link (stretched ::after over the positioned card) */
.service { position: relative; }
.service .more::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Services hub — alternating image/text rows (distinct from the home card grid) */
.svc-list { display: grid; gap: var(--space-lg); }
.svc-row { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); transition: transform var(--dur-base) var(--ease-out-quint), box-shadow 340ms var(--ease-out-quint), border-color var(--dur-base) ease; }
.svc-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--stone-300); }
.svc-row .media { overflow: hidden; }
.svc-row .media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.svc-row .body { padding: var(--space-xl); display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.svc-row .body h2 { font-size: var(--text-3xl); }
.svc-row .body p { color: var(--color-text); }
.svc-row .go { margin-top: 0.4rem; font-weight: 700; color: var(--navy-700); letter-spacing: 0.02em; }
.svc-row .go::after { content: ""; position: absolute; inset: 0; }
.svc-row:nth-child(even) .media { order: 2; }
@media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } .svc-row:nth-child(even) .media { order: 0; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(15,24,32,0.93); padding: var(--gutter); }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; gap: 0.7rem; }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox figcaption { color: var(--paper); text-align: center; font-size: 0.95rem; }
.lightbox .lb-btn { position: absolute; background: rgba(246,244,239,0.12); color: var(--paper); border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-base) ease; }
.lightbox .lb-btn:hover { background: rgba(246,244,239,0.26); }
.lightbox .lb-btn svg { width: 24px; height: 24px; }
.lb-close { top: var(--gutter); right: var(--gutter); }
.lb-prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--gutter); top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   Refinements: arrow movement on clickable boxes, gallery image hover
   ========================================================================== */
.arr { display: inline-block; transition: transform var(--dur-base) var(--ease-out-quint); }
.service:hover .more .arr, .svc-row:hover .go .arr { transform: translateX(5px); }

.gallery-item .img-wrap { transition: box-shadow var(--dur-base) ease; }
.gallery-item .img-wrap img { transition: transform var(--dur-slow) var(--ease-out-quint); }
.gallery-item .img-wrap:hover { box-shadow: var(--shadow-md); }
.gallery-item .img-wrap:hover img, .gallery-item .img-wrap:focus-visible img { transform: scale(1.05); }
.gallery-item .img-wrap:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }

/* ==========================================================================
   Interactive panels: bottom-aligned CTA, whole-box link + hover
   (only panels that contain a .more link; informational panels stay static)
   ========================================================================== */
.panel { transition: transform var(--dur-base) var(--ease-out-quint), box-shadow 340ms var(--ease-out-quint), border-color var(--dur-base) ease; }
.panel:has(.more) { position: relative; display: flex; flex-direction: column; }
.panel:has(.more) > p:last-child { margin-top: auto; }      /* grow: push the CTA to the bottom */
.panel:has(.more) > p:not(:last-child) { margin-bottom: 1rem; }  /* breathing room under the paragraph, above the CTA link */
.panel:has(.more) .more::after { content: ""; position: absolute; inset: 0; }  /* whole box clickable */
.panel:has(.more):hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--stone-300); }
.panel:has(.more):hover .more { color: var(--navy-500); }