/* Brand type, self-hosted (SIL Open Font License, assets/fonts/OFL.txt): Noto Serif for display and
   headings, Noto Sans for text. Every font-family below goes through the --font-* tokens. */
@font-face { font-family: 'Noto Serif'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/notoserif-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/notoserif-italic.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/notoserif-medium.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/notoserif-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/notosans-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/notosans-medium.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/notosans-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/notosans-bold.woff2') format('woff2'); }

:root {
    --purple: #4a2a3d;
    --purple-deep: #301827;
    --pink: #ca90bd;
    --pink-soft: #f6eaf3;
    --gold: #c6a15b;
    --gold-deep: #9b7738;
    --gold-soft: #f3e6c8;
    --green: #729d3e;
    --green-deep: #315a26;
    --cream: #fbf8f1;
    --ink: #28252a;
    --muted: #6e6870;
    --line: #e8e2e6;
    --white: #fff;
    --shadow: 0 22px 65px rgba(48, 24, 39, .14);
    --radius: 18px;
    --container: 1280px;
}

/* =====================================================================
   PURPLE HEART DESIGN SYSTEM  ·  canonical tokens
   The brand palette above is locked. Everything here is built from it,
   plus supporting neutrals and scales. Living reference: /styleguide.php
   ===================================================================== */
:root {
    /* Type families */
    --font-serif: "Noto Serif", Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: "Noto Sans", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
    --font-display: var(--font-serif);  /* swap here to add a signature display face */

    /* Fluid type scale */
    --text-xs: .78rem;                          /* eyebrows, tags */
    --text-sm: .9rem;                           /* captions, meta */
    --text-base: 1rem;                          /* body */
    --text-lg: 1.15rem;                         /* lead paragraphs */
    --text-xl: clamp(1.32rem, 1.1vw, 1.5rem);   /* card titles */
    --text-2xl: clamp(1.52rem, 2vw, 1.95rem);   /* h3 */
    --text-3xl: clamp(1.8rem, 2.8vw, 2.5rem);   /* sub display */
    --text-4xl: clamp(2.15rem, 3.8vw, 3.4rem);  /* h2 */
    --text-5xl: clamp(2.6rem, 4.6vw, 4.5rem);   /* section display */
    --text-6xl: clamp(3.2rem, 6.4vw, 6.5rem);   /* page banner display */

    --leading-tight: 1.14;
    --leading-snug: 1.3;
    --leading-normal: 1.7;
    --tracking-eyebrow: .18em;
    --tracking-tight: -.045em;
    --measure: 62ch;                            /* running text line length */
    --measure-lead: 46ch;

    /* Spacing scale (4 / 8 based) */
    --space-3xs: .25rem;
    --space-2xs: .5rem;
    --space-xs: .75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-section: clamp(5.5rem, 9vw, 8.875rem);

    /* Radii */
    --radius-xs: 2px;                 /* editorial hard corner */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: var(--radius);       /* 18px, single source */
    --radius-pill: 999px;
    --radius-leaf-sm: 2px 70px 2px 2px;    /* signature shaped corner, small */
    --radius-leaf-md: 2px 110px 2px 2px;   /* medium */
    --radius-leaf-lg: 2px 150px 2px 2px;   /* hero imagery */
    --radius-leaf: var(--radius-leaf-md);  /* default */

    /* Elevation */
    --elev-1: 0 12px 35px rgba(48, 24, 39, .08);
    --elev-2: var(--shadow);          /* 0 22px 65px rgba(48,24,39,.14), single source */
    --elev-3: 0 28px 80px rgba(48, 24, 39, .16);
    --elev-brand: 0 14px 30px rgba(74, 42, 61, .27);  /* purple-tinted, for buttons */

    /* Motion */
    --dur-fast: .2s;
    --dur-base: .35s;
    --dur-slow: .6s;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.2, .6, .2, 1);

    /* Semantic colour roles (from the locked palette) */
    --color-bg: #fffdfa;
    --color-bg-sunken: var(--cream);
    --color-surface: var(--white);
    --color-surface-brand: var(--purple);
    --color-heading: var(--purple);
    --color-text: var(--ink);
    --color-text-muted: var(--muted);
    --color-on-brand: var(--white);
    --color-line: var(--line);
    --color-line-strong: rgba(74, 42, 61, .22);
    --color-hairline-gold: rgba(198, 161, 91, .42);
    --color-accent: var(--gold);          /* decorative only, never body text on light */
    --color-accent-ink: #8a6626;          /* text-safe gold on light: >= 4.5:1 (supporting shade) */
    --color-success: #24521f;
    --color-success-bg: #e4f5df;
    --color-error: #752d34;
    --color-error-bg: #f9e1e3;
    --color-warning: #7a5310;         /* amber ink, text-safe on its tint */
    --color-warning-bg: #f7ecd2;
    --color-info: #3a2f57;
    --color-info-bg: #efe9f6;
    --color-neutral: #4a4650;
    --color-neutral-bg: #efecf0;
    --color-on-accent: var(--purple-deep);  /* text on gold: ~6.7:1 */
    --color-on-success: #fff;
    --color-on-error: #fff;
    --color-field-border: #8a8590;           /* input boundary, ~3.4:1 on light card */

    /* green is an icon/graphic fill only (3.18:1 with white). Status TEXT must
       sit on --green-deep or --color-success, never on raw --green. */

    /* Focus and targets */
    --focus: #5a2f49;                 /* light surfaces: ~11:1 on --color-bg */
    --focus-on-dark: var(--gold-soft);
    --focus-ring: 3px;
    --focus-offset: 2px;
    --tap-min: 44px;

    /* Controls and layout */
    --control-h-sm: 38px;
    --control-h-md: 51px;
    --control-h-lg: 58px;
    --size-container: var(--container);
    --rule-gradient: linear-gradient(90deg, var(--gold), var(--pink));
}

/* Branded keyboard focus. Pointer clicks stay clean; keyboard users get a
   visible ring meeting the 3:1 focus-indicator contrast requirement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring) solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-xs);
}

/* Dark surfaces carry the light ring so focus stays visible on them.
   .on-dark is the reusable hook for any new dark panel (commerce, impact). */
.on-dark,
.site-footer,
.journey,
.ready-cta,
.expert-banner,
.contact-details,
.contact-callout,
.intro-service,
.topbar,
.page-banner,
.lightbox,
.mission-card {
    --focus: var(--focus-on-dark);
}

/* Light panels nested in a dark family keep the dark ring. */
.mission-card:nth-child(2) {
    --focus: #5a2f49;
}

@media (min-width: 901px) {
    .submenu { --focus: var(--focus-on-dark); }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    overflow-x: clip;
    color: var(--ink);
    background: #fffdfa;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

body.lightbox-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

h1,
h2,
h3,
h4 {
    color: var(--purple);
    font-family: var(--font-serif);
    line-height: 1.14;
}

h1 {
    font-size: clamp(2.7rem, 6vw, 5.6rem);
}

h2 {
    font-size: clamp(2.1rem, 4vw, 3.55rem);
}

h3 {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

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

.section {
    padding: 105px 0;
}

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

.section-pattern {
    position: relative;
    background: var(--cream) url("../../wp-content/uploads/2022/04/bg-ricing-1.png") center / 760px auto;
}

.section-heading {
    max-width: 740px;
    margin-bottom: 44px;
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading h2,
.section-heading h1 {
    margin-bottom: 18px;
}

.section-heading p:last-child {
    margin-bottom: 0;
}

.eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    color: var(--green-deep);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 34px;
    height: 2px;
    background: var(--gold);
    content: "";
}

.eyebrow.centered {
    justify-content: center;
}

.eyebrow.light {
    color: #f6ddef;
}

.lead {
    color: #4f4b51;
    font-size: 1.12rem;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    transform: translateY(-160%);
    color: var(--white);
    background: var(--purple);
    border-radius: 4px;
}

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

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

.topbar {
    position: relative;
    z-index: 30;
    color: rgba(255, 255, 255, .86);
    background: linear-gradient(90deg, #24121e, var(--purple-deep) 48%, #24121e);
    border-bottom: 1px solid rgba(198, 161, 91, .28);
    font-size: .8rem;
}

.topbar-inner {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
}

.topbar p {
    margin: 0;
}

.topbar-contact {
    display: flex;
    gap: 28px;
}

.topbar-contact a {
    transition: color .2s ease;
}

.topbar-contact a:hover {
    color: var(--pink);
}

.topbar-contact span {
    margin-left: 4px;
    color: rgba(255, 255, 255, .5);
}

.site-header {
    position: relative;
    z-index: 40;
    width: 100%;
    background: rgba(255, 253, 250, .97);
    border-bottom: 1px solid rgba(74, 42, 61, .08);
    transition: box-shadow .25s ease, transform .25s ease;
}

.site-header.is-stuck {
    position: fixed;
    top: 0;
    box-shadow: 0 8px 35px rgba(48, 24, 39, .1);
}

.header-inner {
    display: flex;
    min-height: 88px;
    align-items: center;
    gap: 34px;
}

.brand {
    flex: 0 0 auto;
    width: 194px;
}

.brand img {
    width: 100%;
    max-height: 70px;
    object-fit: contain;
}

.site-navigation {
    margin-left: auto;
}

.site-navigation > ul,
.submenu,
.footer-links {
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-navigation > ul {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-navigation li {
    position: relative;
}

.nav-link {
    display: block;
    padding: 31px 13px;
    color: #343036;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--purple);
}

.nav-link.is-active::after {
    position: absolute;
    right: 14px;
    bottom: 22px;
    left: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--pink));
    content: "";
}

.submenu {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    width: 265px;
    padding: 10px 0;
    visibility: hidden;
    transform: translateY(12px);
    opacity: 0;
    color: var(--white);
    background: var(--purple);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow);
    transition: .22s ease;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.submenu-open .submenu {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

.submenu a {
    display: block;
    padding: 11px 20px;
    font-size: .9rem;
    transition: background .2s ease, padding-left .2s ease;
}

.submenu a:hover,
.submenu a:focus {
    padding-left: 25px;
    background: rgba(202, 144, 189, .24);
}

.submenu-toggle {
    display: none;
}

.header-cta,
.button {
    display: inline-flex;
    min-height: 51px;
    padding: 13px 25px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.header-cta,
.button-primary {
    color: var(--white);
    background: linear-gradient(135deg, #341b2b, var(--purple) 58%, #744c65);
    border: 1px solid rgba(198, 161, 91, .58);
    box-shadow: 0 10px 24px rgba(74, 42, 61, .2);
}

.header-cta:hover,
.button-primary:hover,
.button-light:hover,
.button-outline:hover {
    transform: translateY(-2px);
}

.header-cta:hover,
.button-primary:hover {
    background: linear-gradient(135deg, #684259, var(--pink));
    box-shadow: 0 14px 30px rgba(74, 42, 61, .27);
}

.button-light {
    color: var(--purple);
    background: var(--white);
}

.button-outline {
    color: var(--purple);
    background: transparent;
    border: 2px solid rgba(74, 42, 61, .24);
}

.button-outline:hover {
    color: var(--white);
    background: var(--purple);
    border-color: var(--purple);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 43px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: var(--purple);
}

.menu-toggle > span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--white);
}

.flash {
    position: relative;
    z-index: 20;
    padding: 13px 0;
    color: #24521f;
    background: #e4f5df;
    text-align: center;
}

.flash-error {
    color: #752d34;
    background: #f9e1e3;
}

.journey {
    position: relative;
    height: 100svh;
    min-height: 620px;
    background: #172019;
}

.journey-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    color: var(--white);
    background: #172019;
}

.journey-film,
.journey-frames,
.journey-frame,
.journey-frame img,
.journey-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.journey-film {
    z-index: 2;
    object-fit: cover;
    object-position: 57% center;
    opacity: 0;
    transition: opacity .45s ease;
    will-change: opacity;
}

.journey-frames {
    z-index: 3;
    transition: opacity .45s ease;
}

.journey.is-film-ready .journey-film {
    opacity: 1;
}

.journey.is-film-ready .journey-frames {
    opacity: 0;
}

.journey-frame {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity .8s ease;
    will-change: opacity;
}

.journey-frame:first-child,
.journey-frame.is-active {
    visibility: visible;
    opacity: 1;
}

.journey-frame img {
    object-fit: cover;
    object-position: 57% center;
    transform: scale(1.055);
    will-change: transform;
}

.journey-vignette {
    z-index: 5;
    background: linear-gradient(90deg,
        rgba(24, 13, 21, .97) 0%,
        rgba(24, 13, 21, .94) 22%,
        rgba(24, 13, 21, .78) 36%,
        rgba(24, 13, 21, .48) 49%,
        rgba(24, 13, 21, .16) 60%,
        rgba(24, 13, 21, 0) 68%,
        rgba(24, 13, 21, 0) 100%);
    pointer-events: none;
}

.journey-depth {
    position: absolute;
    z-index: 6;
    top: -8%;
    bottom: -8%;
    width: 18vw;
    opacity: .2;
    filter: blur(16px);
    pointer-events: none;
    will-change: transform;
}

.journey-depth-left {
    left: -7vw;
    background: radial-gradient(ellipse at left center, #0c1d10 0 40%, transparent 72%);
    transform: translate3d(calc(var(--journey-progress, 0) * -4vw), 0, 0);
}

.journey-depth-right {
    right: -8vw;
    background: radial-gradient(ellipse at right center, #132317 0 42%, transparent 72%);
    opacity: 0;
    transform: translate3d(calc(var(--journey-progress, 0) * 5vw), 0, 0);
}

.journey-content {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100%;
    padding-top: clamp(100px, 14vh, 155px);
    padding-bottom: 80px;
    align-items: center;
}

.journey-steps {
    position: relative;
    width: min(710px, 68vw);
    min-height: 430px;
}

.journey-step {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    visibility: hidden;
    transform: translate3d(0, 35px, 0);
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.journey-step.is-active {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.journey-step h1,
.journey-step h2 {
    max-width: 690px;
    margin-bottom: 24px;
    color: var(--white);
    font-size: clamp(3.35rem, 6.25vw, 6.25rem);
    letter-spacing: -.045em;
    text-wrap: balance;
}

.journey-step h2 {
    font-size: clamp(3rem, 5.6vw, 5.55rem);
}

.journey-step h1 em,
.journey-step h2 em {
    color: #f0d7a5;
    font-weight: 400;
}

.journey-step > p:not(.journey-kicker) {
    max-width: 620px;
    margin-bottom: 31px;
    color: rgba(255, 255, 255, .84);
    font-size: clamp(1rem, 1.6vw, 1.19rem);
}

.journey-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .86);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.journey-kicker span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    color: #2c1724;
    background: linear-gradient(145deg, #f3deb4, var(--gold));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 24px rgba(0, 0, 0, .18);
    border-radius: 50%;
    letter-spacing: 0;
}

.journey-rail {
    position: absolute;
    z-index: 12;
    top: 50%;
    right: 0;
    display: flex;
    width: 3px;
    height: min(54vh, 470px);
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .22);
}

.journey-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--journey-progress, 0) * 100%);
    background: linear-gradient(var(--gold-soft), var(--gold));
}

.journey-rail i {
    position: relative;
    left: -42px;
    color: rgba(255, 255, 255, .56);
    font-size: .68rem;
    font-style: normal;
    letter-spacing: .1em;
}

.scroll-cue {
    position: absolute;
    bottom: 31px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, .68);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: opacity .25s ease;
}

.scroll-cue span {
    display: block;
    width: 27px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 20px;
}

.scroll-cue span::before {
    display: block;
    width: 3px;
    height: 8px;
    margin: 9px auto;
    background: var(--pink);
    border-radius: 10px;
    content: "";
    animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(12px); opacity: 1; }
}

.intro-strip {
    position: relative;
    z-index: 6;
    margin-top: -18px;
}

.intro-grid {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1.12fr repeat(3, 1fr);
    background: #fffdfa;
    border: 1px solid rgba(198, 161, 91, .35);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.intro-lead,
.intro-service {
    min-height: 225px;
    padding: 40px;
}

.intro-lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(145deg, #2c1724, var(--purple) 65%, #654258);
}

.intro-lead p {
    margin-bottom: 8px;
    color: #e5c889;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.intro-lead h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.intro-service {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: var(--white);
    background-position: center;
    background-size: cover;
}

.intro-service::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(36, 19, 31, .9), rgba(36, 19, 31, .06));
    content: "";
}

.intro-service > * {
    position: relative;
    z-index: 1;
}

.intro-service h3 {
    margin-bottom: 5px;
    color: var(--white);
}

.intro-service a {
    color: var(--pink);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(50px, 8vw, 100px);
}

.image-stack {
    position: relative;
    min-height: 590px;
}

.image-stack-main {
    width: 82%;
    height: 540px;
    object-fit: cover;
    border-radius: 140px 16px 16px 16px;
    box-shadow: var(--shadow);
}

.image-stack-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    height: 270px;
    object-fit: cover;
    border: 9px solid var(--white);
    border-radius: 12px 12px 90px 12px;
    box-shadow: var(--shadow);
}

.content-copy h2 {
    margin-bottom: 23px;
}

.content-copy p {
    color: var(--muted);
}

.content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.check-list,
.service-list {
    padding: 0;
    margin: 25px 0;
    list-style: none;
}

.check-list li,
.service-list li {
    position: relative;
    padding: 7px 0 7px 30px;
}

.check-list li::before,
.service-list li::before {
    position: absolute;
    top: 8px;
    left: 0;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    color: var(--white);
    background: var(--green);
    border-radius: 50%;
    content: "✓";
    font-size: .7rem;
    font-weight: 900;
}

.gallery-grid {
    display: grid;
    grid-auto-rows: 275px;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    background: var(--purple);
    border-radius: 11px;
    cursor: zoom-in;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease, opacity .35s ease;
}

.gallery-item::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--white);
    background: rgba(74, 42, 61, .62);
    content: "+";
    font-family: var(--font-serif);
    font-size: 3rem;
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-item:hover img {
    transform: scale(1.06);
}

.gallery-item:hover::after {
    opacity: 1;
}

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

.gallery-actions {
    margin-top: 38px;
    text-align: center;
}

.expert-banner {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    color: var(--white);
    background: url("../img/banners/jkia-rows.webp") center / cover fixed;
}

.expert-banner::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(48, 24, 39, .93), rgba(48, 24, 39, .57));
    content: "";
}

.expert-banner-inner {
    position: relative;
    max-width: 820px;
}

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

.expert-banner p {
    color: rgba(255, 255, 255, .83);
}

.quote-section {
    position: relative;
    overflow: hidden;
    background: var(--cream) url("../../wp-content/uploads/2022/04/bg-call-to-action.png") center / cover;
}

.quote-section::after {
    position: absolute;
    right: -60px;
    bottom: -40px;
    width: 270px;
    height: 390px;
    opacity: .45;
    background: url("../../wp-content/uploads/2022/04/tree-right.png") right bottom / contain no-repeat;
    content: "";
    pointer-events: none;
}

.quote-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
}

.enquiry-form {
    padding: 38px;
    background: var(--white);
    border-top: 4px solid var(--pink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

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

.enquiry-form label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--text-sm);
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
    width: 100%;
    padding: 14px 16px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(202, 144, 189, .18);
}

.enquiry-form textarea {
    min-height: 132px;
    resize: vertical;
}

.form-message {
    grid-column: span 2;
}

.enquiry-form .button {
    margin-top: 18px;
}

.form-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .76rem;
}

.form-trap {
    position: absolute;
    left: -9999px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.process-card {
    position: relative;
    padding: 39px 32px 35px;
    background: var(--white);
    border: 1px solid rgba(198, 161, 91, .28);
    border-radius: var(--radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.process-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow);
}

.process-number {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    color: var(--white);
    background: linear-gradient(145deg, var(--purple), #6e4860);
    border: 1px solid rgba(198, 161, 91, .55);
    border-radius: 50% 50% 50% 12px;
    font-family: var(--font-serif);
    font-size: 1.35rem;
}

.process-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.service-orbit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    perspective: 1200px;
}

.orbit-card {
    position: relative;
    min-height: 260px;
    padding: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(198, 161, 91, .28);
    border-radius: var(--radius);
    box-shadow: 0 18px 45px rgba(48, 24, 39, .08);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.orbit-card::after {
    position: absolute;
    right: -30px;
    bottom: -45px;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(202, 144, 189, .25), transparent 68%);
    content: "";
}

.orbit-card:hover {
    transform: translateY(-9px) rotateX(2deg) rotateY(-2deg);
    background: var(--white);
    box-shadow: 0 28px 60px rgba(48, 24, 39, .16);
}

.orbit-card > span {
    display: block;
    margin-bottom: 29px;
    color: var(--color-accent-ink);
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
}

.orbit-card h3 {
    margin-bottom: 12px;
}

.orbit-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .93rem;
}

.parallax-media {
    --parallax-y: 0px;
}

.parallax-media .image-stack-main {
    transform: translate3d(0, var(--parallax-y), 0) scale(1.025);
    will-change: transform;
}

.parallax-media .image-stack-small {
    transform: translate3d(0, calc(var(--parallax-y) * -.45), 0);
    will-change: transform;
}

.parallax-section {
    --parallax-bg-y: 50%;
    background-position: center var(--parallax-bg-y);
}

.scroll-motion {
    --motion-delay: calc(var(--order, 0) * 65ms);
}

@supports (animation-timeline: view()) {
    .scroll-motion {
        animation: section-rise linear both;
        animation-delay: var(--motion-delay);
        animation-timeline: view();
        animation-range: entry 4% cover 32%;
    }

    .orbit-card.scroll-motion:nth-child(3n + 1) {
        animation-name: card-rise-left;
    }

    .orbit-card.scroll-motion:nth-child(3n) {
        animation-name: card-rise-right;
    }
}

@keyframes section-rise {
    from { transform: translate3d(0, 42px, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes card-rise-left {
    from { transform: translate3d(-38px, 45px, -70px) rotateY(4deg); opacity: 0; }
    to { transform: translate3d(0, 0, 0) rotateY(0); opacity: 1; }
}

@keyframes card-rise-right {
    from { transform: translate3d(38px, 45px, -70px) rotateY(-4deg); opacity: 0; }
    to { transform: translate3d(0, 0, 0) rotateY(0); opacity: 1; }
}

.page-banner {
    position: relative;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    align-items: end;
    color: var(--white);
    background: #180d15 var(--page-banner-image) 50% 50% / cover;   /* banners are pre-cropped on their subject */
}
@media (max-width: 680px) {
    .page-banner { background-image: var(--page-banner-image-mobile, var(--page-banner-image)); }
}

.page-banner-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(24, 13, 21, .98) 0%,
        rgba(24, 13, 21, .96) 24%,
        rgba(24, 13, 21, .8) 38%,
        rgba(24, 13, 21, .5) 50%,
        rgba(24, 13, 21, .17) 61%,
        rgba(24, 13, 21, 0) 69%,
        rgba(24, 13, 21, 0) 100%);
    pointer-events: none;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    display: grid;
    padding: 92px 0 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 50px;
}

.page-banner .eyebrow {
    color: #f2dfb4;
}

.page-banner h1 {
    margin-bottom: 19px;
    color: var(--white);
    max-width: 830px;
    font-size: clamp(3.25rem, 7vw, 6.5rem);
    letter-spacing: -.045em;
    text-wrap: balance;
}

.page-banner-signature {
    display: flex;
    margin: 0 0 8px;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.page-banner-signature span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #2c1724;
    background: linear-gradient(145deg, var(--gold-soft), var(--gold));
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    letter-spacing: .04em;
    writing-mode: horizontal-tb;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    color: rgba(255, 255, 255, .78);
    font-size: .88rem;
}

.breadcrumbs a:hover {
    color: var(--pink);
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.mission-card {
    padding: 43px;
    color: var(--white);
    background: linear-gradient(145deg, #2b1623, var(--purple) 58%, #6b475d);
    border: 1px solid rgba(198, 161, 91, .42);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.mission-card:nth-child(2) {
    color: var(--ink);
    background: var(--pink-soft);
}

.mission-card h3 {
    color: inherit;
    font-size: 2rem;
}

.mission-card p {
    margin-bottom: 0;
    color: inherit;
    opacity: .9;
}

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

.value-card {
    display: grid;
    padding: 25px;
    grid-template-columns: 38px 1fr;
    gap: 17px;
    background: var(--white);
    border: 1px solid rgba(198, 161, 91, .25);
    border-radius: 10px;
}

.value-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--white);
    background: var(--green);
    border-radius: 50%;
    font-weight: 900;
}

.value-card h3 {
    margin-bottom: 7px;
    font-size: 1.22rem;
}

.value-card p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}

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

.service-card {
    overflow: hidden;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.service-card-image {
    height: 330px;
    overflow: hidden;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.service-card:hover img {
    transform: scale(1.04);
}

.service-card-content {
    padding: 36px;
}

.service-card-content p {
    color: var(--muted);
}

.service-hero-image {
    width: 100%;
    min-height: 560px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: translate3d(0, var(--parallax-y), 0) scale(1.04);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    padding: 32px;
    background: var(--white);
    border: 1px solid rgba(198, 161, 91, .24);
    border-bottom: 4px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 12px 35px rgba(48, 24, 39, .08);
}

.feature-card h3 {
    margin-bottom: 11px;
}

.feature-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.project-note {
    display: grid;
    padding: 38px;
    margin-top: 45px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
    background: var(--pink-soft);
    border-radius: var(--radius);
}

.project-note h3,
.project-note p {
    margin-bottom: 5px;
}

.portfolio-gallery .gallery-item figcaption {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 16px;
    left: 18px;
    color: var(--white);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.lightbox {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    padding: 30px;
    place-items: center;
    background: rgba(25, 13, 21, .94);
}

.lightbox.is-open {
    display: grid;
}

.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    object-fit: contain;
}

.lightbox button {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 48px;
    height: 48px;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
}

.contact-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-callout {
    display: grid;
    padding: 28px;
    grid-template-columns: 125px 1fr;
    align-items: center;
    gap: 22px;
    color: var(--white);
    background: var(--purple);
    border-radius: var(--radius);
}

.contact-callout img {
    width: 125px;
}

.contact-callout h3 {
    margin-bottom: 5px;
    color: var(--white);
}

.contact-callout p {
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .75);
}

.contact-callout a {
    color: var(--pink);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-panel {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 30px;
}

.contact-details {
    padding: 40px;
    color: var(--white);
    background: var(--purple);
    border-radius: var(--radius);
}

.contact-details h2,
.contact-details h3 {
    color: var(--white);
}

.contact-details a:hover {
    color: var(--pink);
}

.contact-item {
    padding: 19px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.contact-item:last-child {
    border: 0;
}

.contact-item strong {
    display: block;
    margin-bottom: 3px;
    color: var(--pink);
    font-size: .77rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.map-wrap {
    height: 420px;
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.product-card {
    display: flex;
    min-height: 305px;
    padding: 27px;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(198, 161, 91, .3);
    border-radius: 11px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.product-art {
    position: relative;
    display: grid;
    min-height: 145px;
    margin-bottom: 23px;
    place-items: center;
    overflow: hidden;
    color: var(--purple);
    background:
        radial-gradient(circle at 75% 15%, rgba(202, 144, 189, .32), transparent 35%),
        linear-gradient(145deg, #fbf5e8, var(--gold-soft));
    border: 1px solid rgba(198, 161, 91, .32);
    border-radius: 8px;
    font-family: var(--font-serif);
    font-size: 2.5rem;
}

.product-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.product-art::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(38, 19, 31, .72), transparent 68%);
    content: "";
}

.product-art span {
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 13px;
    left: 15px;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.product-card:hover .product-art img {
    transform: scale(1.055);
}

.product-card h2 {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.product-card p {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .87rem;
}

.product-card a {
    margin-top: auto;
    color: var(--purple);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-detail {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.product-detail-art {
    position: relative;
    display: block;
    min-height: 440px;
    overflow: hidden;
    color: var(--purple);
    background: var(--pink-soft);
    border-radius: var(--radius);
    font-family: var(--font-serif);
    font-size: 5rem;
}

.product-detail-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-art figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    padding: 12px 15px;
    color: var(--white);
    background: rgba(40, 20, 33, .78);
    border: 1px solid rgba(198, 161, 91, .45);
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ready-cta {
    position: relative;
    z-index: 3;
    padding: 58px 0;
    color: var(--white);
    background:
        radial-gradient(circle at 78% 50%, rgba(198, 161, 91, .2), transparent 28%),
        linear-gradient(120deg, #25131f, var(--purple) 55%, #6d435d);
    border-top: 1px solid rgba(198, 161, 91, .36);
    border-bottom: 1px solid rgba(198, 161, 91, .25);
}

.ready-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.ready-cta h2 {
    margin: 0;
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3.15rem);
}

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 85px 0 0;
    color: rgba(255, 255, 255, .8);
    background: #193a20 url("../../wp-content/uploads/2022/04/bg-footer-2.jpg") center / cover;
}

.footer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(26, 46, 29, .94), rgba(28, 50, 31, .78));
}

.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    padding-bottom: 65px;
    grid-template-columns: 1.4fr .75fr 1fr 1fr;
    gap: 55px;
}

/* The reversed logo (white and orchid) sits straight on the dark footer; the white box that
   carried the full-colour version is no longer needed. */
.footer-logo {
    width: 220px;
    height: auto;
    margin-bottom: 20px;
}

.footer-heading {
    margin-bottom: 21px;
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 1.28rem;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a,
.site-footer address a {
    transition: color .2s ease, padding-left .2s ease;
}

.footer-links a:hover,
.site-footer address a:hover {
    padding-left: 4px;
    color: var(--pink);
}

.site-footer address {
    font-style: normal;
}

.site-footer strong {
    color: var(--white);
}

.social-links {
    display: flex;
    gap: 9px;
}

.social-links a {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    color: var(--white);
    background: rgba(255, 255, 255, .11);
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 800;
    transition: background .2s ease;
}

.social-links a:hover {
    color: var(--purple-deep);
    background: var(--pink);
}

.profile-download {
    display: inline-block;
    padding-bottom: 2px;
    margin-top: 16px;
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
    font-size: .82rem;
    font-weight: 800;
}

.footer-bottom {
    display: flex;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: .8rem;
}

.footer-bottom p {
    margin: 0;
}

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

.whatsapp {
    position: fixed;
    z-index: 35;
    right: 22px;
    bottom: 24px;
    display: flex;
    padding: 8px 8px 8px 17px;
    align-items: center;
    gap: 10px;
    color: var(--white);
    background: #25d366;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    font-size: .8rem;
    font-weight: 800;
}

.whatsapp b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    font-size: 1.3rem;
}

.back-to-top {
    position: fixed;
    z-index: 34;
    right: 28px;
    bottom: 86px;
    display: grid;
    width: 38px;
    height: 38px;
    visibility: hidden;
    place-items: center;
    transform: translateY(10px);
    opacity: 0;
    color: var(--white);
    background: var(--purple);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease;
}

.back-to-top.is-visible {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .journey {
        height: auto !important;
    }

    .journey-sticky {
        position: relative;
    }

    .journey-frame:not(:first-child),
    .journey-step:not(:first-child),
    .journey-rail {
        display: none;
    }
}

@media (max-width: 1320px) {
    .header-cta {
        display: none;
    }

    .nav-link {
        padding-inline: 11px;
    }
}

@media (max-width: 1080px) {
    .nav-link {
        padding-inline: 10px;
    }

    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-motion {
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .section {
        padding: 78px 0;
    }

    .topbar {
        display: none;
    }

    .header-inner {
        min-height: 76px;
    }

    .brand {
        width: 165px;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .site-navigation {
        position: fixed;
        z-index: 60;
        top: 76px;
        right: 0;
        bottom: 0;
        width: min(88vw, 390px);
        padding: 23px;
        visibility: hidden;
        transform: translateX(102%);
        opacity: 0;
        background: var(--white);
        box-shadow: -15px 30px 40px rgba(31, 16, 25, .2);
        transition: .3s ease;
    }

    .site-navigation.is-open {
        visibility: visible;
        transform: translateX(0);
        opacity: 1;
    }

    .site-navigation > ul {
        display: block;
    }

    .nav-link {
        padding: 15px 8px;
        border-bottom: 1px solid var(--line);
    }

    .nav-link.is-active::after {
        top: 19px;
        right: auto;
        bottom: auto;
        left: -2px;
        width: 3px;
        height: 16px;
    }

    .has-submenu {
        padding-right: 40px;
    }

    .submenu-toggle {
        position: absolute;
        top: 7px;
        right: 0;
        display: block;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 0;
    }

    .submenu-toggle::before {
        content: "+";
        color: var(--purple);
        font-size: 1.25rem;
    }

    .submenu {
        position: static;
        display: none;
        width: calc(100% + 40px);
        padding: 3px 0;
        visibility: visible;
        transform: none;
        opacity: 1;
        background: var(--pink-soft);
        box-shadow: none;
    }

    .has-submenu.submenu-open .submenu {
        display: block;
    }

    .submenu a {
        color: var(--purple);
    }

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

    .page-banner {
        min-height: 460px;
    }

    .page-banner-content {
        padding-bottom: 56px;
    }

    .intro-lead {
        grid-column: 1 / -1;
        min-height: auto;
    }

    .split-grid,
    .quote-grid,
    .contact-intro,
    .contact-panel,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .image-stack {
        width: min(650px, 100%);
        margin-inline: auto;
    }

    .quote-grid {
        gap: 35px;
    }

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

    .feature-card:last-child {
        grid-column: 1 / -1;
    }

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

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

@media (max-width: 680px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .section {
        padding: 65px 0;
    }

    .journey {
        height: 100svh;
    }

    .journey-sticky {
        min-height: 590px;
    }

    .journey-film,
    .journey-frame img {
        object-position: 54% center;
    }

    .journey-vignette {
        background:
            linear-gradient(0deg, rgba(18, 11, 16, .9) 0%, rgba(20, 12, 18, .66) 43%, rgba(20, 12, 18, .25) 70%, rgba(20, 12, 18, 0) 100%),
            linear-gradient(90deg, rgba(20, 12, 18, .22), rgba(20, 12, 18, 0) 58%);
    }

    .journey-content {
        padding-top: 105px;
        padding-bottom: 62px;
        align-items: flex-end;
    }

    .journey-steps {
        width: 100%;
        min-height: 395px;
    }

    .journey-step h1,
    .journey-step h2 {
        font-size: clamp(2.5rem, 12vw, 3.85rem);
    }

    .journey-step > p:not(.journey-kicker) {
        max-width: 92%;
        font-size: .97rem;
    }

    .journey-kicker {
        margin-bottom: 14px;
        font-size: .66rem;
    }

    .journey-rail {
        top: 21%;
        right: 9px;
        height: 210px;
    }

    .journey-rail i {
        display: none;
    }

    .scroll-cue {
        bottom: 19px;
    }

    .page-banner {
        min-height: 420px;
        background-position: 62% center;
    }

    .page-banner-content {
        display: block;
        padding: 72px 0 48px;
    }

    .page-banner h1 {
        font-size: clamp(2.8rem, 14vw, 4.5rem);
    }

    .page-banner-signature {
        display: none;
    }

    .intro-grid,
    .service-grid,
    .mission-grid,
    .value-grid,
    .process-grid,
    .feature-grid,
    .catalog-grid,
    .service-orbit {
        grid-template-columns: 1fr;
    }

    .intro-lead,
    .intro-service {
        min-height: 205px;
        padding: 30px;
    }

    .image-stack {
        min-height: 470px;
    }

    .image-stack-main {
        height: 430px;
    }

    .image-stack-small {
        height: 210px;
    }

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

    .gallery-item.is-wide {
        grid-column: auto;
    }

    .expert-banner {
        background-attachment: scroll;
    }

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

    .form-message {
        grid-column: auto;
    }

    .enquiry-form,
    .mission-card,
    .contact-details {
        padding: 28px 22px;
    }

    .feature-card:last-child {
        grid-column: auto;
    }

    .page-banner {
        min-height: 330px;
    }

    .contact-callout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .contact-callout img {
        margin-inline: auto;
    }

    .project-note,
    .ready-cta-inner {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .ready-cta-inner {
        display: grid;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .whatsapp span {
        display: none;
    }

    .whatsapp {
        padding: 7px;
    }
}

/* Studio dossier layout. All cinematic journey rules above remain unchanged. */

:where(.about-page, .services-page, .service-detail-page, .portfolio-page, .testimonial-page, .shop-page, .product-page, .contact-page) main {
    position: relative;
    isolation: isolate;
}

:where(.about-page, .services-page, .service-detail-page, .portfolio-page, .testimonial-page, .shop-page, .product-page, .contact-page) .section,
.home-page :where(.home-story, .home-services, .home-projects, .home-enquiry, .home-process) {
    padding-block: clamp(88px, 9vw, 142px);
}

.page-banner {
    min-height: clamp(410px, 44vw, 560px);
    background-position: 68% 46%;
}

.page-banner::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: clamp(70px, 10vw, 170px);
    height: clamp(5px, .65vw, 9px);
    background: linear-gradient(90deg, var(--gold), var(--pink));
    content: "";
}

.page-banner-content {
    padding-block: clamp(76px, 8vw, 118px) clamp(56px, 6vw, 78px);
}

.page-banner-copy {
    position: relative;
    width: min(760px, 62vw);
    padding-left: clamp(22px, 3vw, 43px);
}

.page-banner-copy::before {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 1px;
    background: linear-gradient(var(--gold), rgba(198, 161, 91, .05));
    content: "";
}

.page-banner h1 {
    max-width: 930px;
    margin-bottom: 24px;
    font-size: clamp(3.25rem, 6.6vw, 6.8rem);
}

.page-banner-signature {
    padding: 18px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.intro-strip {
    margin-top: 0;
    padding: 42px 0 56px;
    background: #fffdfa;
}

.intro-grid {
    overflow: visible;
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.intro-lead,
.intro-service {
    min-height: 300px;
    border-radius: 2px;
}

.intro-lead {
    padding: clamp(34px, 4vw, 52px);
}

.intro-service {
    padding: 30px;
    border: 1px solid rgba(74, 42, 61, .12);
}

.intro-service:nth-child(3) {
    margin-top: 28px;
    margin-bottom: -28px;
}

.intro-service h3 {
    max-width: 15ch;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.home-story {
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(246, 234, 243, .45), transparent 34%),
        #fffdfa;
}

.home-story .split-grid,
.studio-story .split-grid,
.service-intro .split-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(58px, 8vw, 118px);
}

.home-story .image-stack,
.studio-story .image-stack {
    min-height: 650px;
}

.home-story .image-stack-main,
.studio-story .image-stack-main {
    width: 86%;
    height: 600px;
    border-radius: 2px 150px 2px 2px;
}

.home-story .image-stack-small,
.studio-story .image-stack-small {
    width: 43%;
    height: 285px;
    border-width: 12px;
    border-radius: 2px 2px 90px 2px;
}

.home-story .content-copy,
.studio-story .content-copy,
.service-intro .content-copy,
.product-detail .content-copy {
    position: relative;
    padding: clamp(18px, 3vw, 42px) 0 clamp(18px, 3vw, 42px) clamp(26px, 4vw, 58px);
    border-left: 1px solid rgba(198, 161, 91, .42);
}

.home-story .content-copy::before,
.studio-story .content-copy::before,
.service-intro .content-copy::before,
.product-detail .content-copy::before {
    position: absolute;
    top: 0;
    left: -4px;
    width: 7px;
    height: 76px;
    background: var(--purple);
    content: "";
}

.home-services .container,
.home-process .container,
.studio-values .container,
.services-overview .container,
.services-capabilities .container,
.service-scope .container,
.portfolio-showcase > .container,
.catalog-section > .container {
    display: grid;
    grid-template-columns: minmax(250px, .55fr) minmax(0, 1.45fr);
    align-items: start;
    gap: clamp(50px, 7vw, 105px);
}

.home-services .section-heading,
.home-process .section-heading,
.studio-values .section-heading,
.services-overview > .container > .section-heading,
.services-capabilities .section-heading,
.service-scope .section-heading,
.portfolio-showcase > .container > .section-heading,
.catalog-section > .container > .section-heading {
    position: sticky;
    top: 145px;
    margin: 0;
    text-align: left;
}

.home-services .section-heading .eyebrow,
.home-process .section-heading .eyebrow,
.studio-values .section-heading .eyebrow,
.services-overview .section-heading .eyebrow,
.services-capabilities .section-heading .eyebrow,
.service-scope .section-heading .eyebrow,
.portfolio-showcase .section-heading .eyebrow,
.catalog-section .section-heading .eyebrow {
    justify-content: flex-start;
}

.home-services .section-heading h2,
.home-process .section-heading h2,
.studio-values .section-heading h2,
.services-overview .section-heading h2,
.services-capabilities .section-heading h2,
.service-scope .section-heading h2,
.portfolio-showcase .section-heading h2,
.catalog-section .section-heading h2 {
    font-size: clamp(2.5rem, 4.2vw, 4.65rem);
}

.home-services .service-orbit,
.service-scope .service-orbit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(26px, 4vw, 58px);
    perspective: none;
}

.home-services .orbit-card,
.service-scope .orbit-card {
    min-height: 205px;
    padding: 34px 8px 31px 76px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(74, 42, 61, .22);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.home-services .orbit-card::after,
.service-scope .orbit-card::after {
    display: none;
}

.home-services .orbit-card:hover,
.service-scope .orbit-card:hover {
    transform: none;
    background: transparent;
    border-color: var(--gold);
    box-shadow: none;
}

.home-services .orbit-card > span,
.service-scope .orbit-card > span {
    position: absolute;
    top: 30px;
    left: 8px;
    margin: 0;
    color: var(--color-accent-ink);
    font-size: 1.45rem;
}

.home-services .orbit-card h3,
.service-scope .orbit-card h3 {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.home-projects {
    background: #fffdfa;
}

.home-projects .container {
    display: grid;
    grid-template-columns: minmax(210px, .38fr) minmax(0, 1.62fr);
    align-items: start;
    gap: clamp(42px, 6vw, 85px);
}

.home-projects .section-heading {
    position: sticky;
    top: 145px;
    margin: 0;
}

.home-projects .gallery-grid,
.home-projects .gallery-actions {
    grid-column: 2;
}

.gallery-grid {
    grid-auto-flow: dense;
    grid-auto-rows: clamp(210px, 20vw, 310px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 20px);
}

.gallery-item {
    grid-column: span 4;
    border-radius: 2px;
}

.gallery-item.is-wide {
    grid-column: span 8;
}

.gallery-item:nth-child(3n + 2):not(.is-wide) {
    grid-row: span 2;
}

.home-credibility {
    min-height: 620px;
    padding-block: clamp(120px, 14vw, 200px);
}

.home-credibility::after {
    position: absolute;
    z-index: 1;
    top: 0;
    right: clamp(20px, 8vw, 120px);
    width: 1px;
    height: 100%;
    background: rgba(198, 161, 91, .4);
    content: "";
}

.home-credibility .expert-banner-inner {
    max-width: 760px;
    margin-left: auto;
    padding: clamp(38px, 5vw, 72px);
    background: rgba(37, 19, 31, .76);
    border-left: 4px solid var(--gold);
    backdrop-filter: blur(8px);
}

.home-enquiry .quote-grid,
.studio-enquiry .quote-grid {
    grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
    gap: clamp(55px, 8vw, 120px);
}

.home-enquiry .section-heading,
.studio-enquiry .section-heading {
    position: sticky;
    top: 145px;
    margin: 0;
}

.home-enquiry .enquiry-form,
.studio-enquiry .enquiry-form,
.contact-enquiry .enquiry-form {
    padding: clamp(32px, 5vw, 58px);
    border-top-width: 1px;
    border-radius: 2px;
    box-shadow: 0 28px 80px rgba(48, 24, 39, .12);
}

.home-process .process-grid {
    position: relative;
    display: block;
    padding-left: 65px;
}

.home-process .process-grid::before {
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 28px;
    width: 1px;
    background: linear-gradient(var(--gold), var(--pink));
    content: "";
}

.home-process .process-card {
    display: grid;
    min-height: 175px;
    padding: 30px 0;
    grid-template-columns: 78px minmax(160px, .48fr) 1fr;
    align-items: center;
    gap: 25px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}

.home-process .process-card:last-child {
    border-bottom: 1px solid var(--line);
}

.home-process .process-card:hover {
    transform: none;
    box-shadow: none;
}

.home-process .process-number {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #fffdfa;
}

.home-process .process-card h3,
.home-process .process-card p {
    margin: 0;
}

.studio-principles {
    overflow: hidden;
}

.studio-principles .mission-grid {
    gap: 0;
    align-items: stretch;
}

.studio-principles .mission-card {
    min-height: 350px;
    padding: clamp(45px, 6vw, 82px);
    border-radius: 0;
}

.studio-principles .mission-card:nth-child(2) {
    margin: 48px 0 -48px;
}

.studio-values .value-grid {
    gap: 0 34px;
}

.studio-values .value-card {
    min-height: 142px;
    padding: 28px 0;
    grid-template-columns: 46px 1fr;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(74, 42, 61, .18);
    border-radius: 0;
}

.studio-values .value-icon {
    color: var(--green-deep);
    background: transparent;
    border: 1px solid rgba(49, 90, 38, .38);
}

.services-overview > .container,
.catalog-section > .container {
    grid-template-columns: minmax(270px, .48fr) minmax(0, 1.52fr);
}

.services-overview .service-grid {
    grid-template-columns: 1fr;
    gap: 45px;
}

.services-overview .service-card {
    display: grid;
    min-height: 540px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    border-radius: 2px;
    box-shadow: 0 24px 70px rgba(48, 24, 39, .12);
}

.services-overview .service-card:nth-child(even) .service-card-image {
    order: 2;
}

.services-overview .service-card-image {
    height: 100%;
    min-height: 540px;
}

.services-overview .service-card-content {
    display: flex;
    padding: clamp(38px, 5vw, 68px);
    flex-direction: column;
    justify-content: center;
}

.services-overview .service-card-content h2 {
    font-size: clamp(2.5rem, 4vw, 4.25rem);
}

.services-capabilities .feature-grid {
    counter-reset: capabilities;
    gap: 0;
}

.services-capabilities .feature-card {
    position: relative;
    min-height: 300px;
    padding: 88px 35px 38px;
    background: rgba(255, 255, 255, .74);
    border: 0;
    border-right: 1px solid rgba(74, 42, 61, .14);
    border-radius: 0;
    box-shadow: none;
    counter-increment: capabilities;
}

.services-capabilities .feature-card:last-child {
    border-right: 0;
}

.services-capabilities .feature-card::before {
    position: absolute;
    top: 31px;
    left: 35px;
    color: var(--pink);
    content: "0" counter(capabilities);
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-style: italic;
}

.service-intro .service-hero-image {
    min-height: 660px;
    border-radius: 140px 2px 2px 2px;
    box-shadow: 0 30px 80px rgba(48, 24, 39, .16);
}

.service-scope .container {
    grid-template-columns: minmax(270px, .5fr) minmax(0, 1.5fr);
}

.floral-page .service-scope .feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.floral-page .service-scope .feature-card {
    display: grid;
    min-height: 170px;
    padding: 32px 0;
    grid-template-columns: minmax(210px, .55fr) 1fr;
    align-items: start;
    gap: 35px;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(74, 42, 61, .2);
    border-radius: 0;
    box-shadow: none;
}

.floral-page .service-scope .feature-card:last-child {
    border-bottom: 1px solid rgba(74, 42, 61, .2);
}

.service-detail-page main > .section:last-child .project-note {
    margin-top: 0;
}

.service-gallery {
    background: #fffdfa;
}

.portfolio-showcase > .container {
    grid-template-columns: minmax(230px, .38fr) minmax(0, 1.62fr);
}

.portfolio-showcase .portfolio-gallery,
.portfolio-showcase .project-note {
    grid-column: 2;
}

.portfolio-showcase .gallery-item {
    min-height: 280px;
}

.portfolio-showcase .gallery-item:nth-child(4n + 1) {
    grid-row: span 2;
}

.portfolio-showcase .project-note {
    padding: 38px 0;
    background: transparent;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid rgba(74, 42, 61, .16);
    border-radius: 0;
}

.testimonial-page .commitment-story {
    padding-block: clamp(110px, 12vw, 180px);
    background:
        radial-gradient(circle at 84% 20%, rgba(202, 144, 189, .22), transparent 28%),
        linear-gradient(120deg, #fffdfa 0 58%, var(--cream) 58%);
}

.testimonial-page .split-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
    gap: clamp(70px, 10vw, 145px);
}

.testimonial-page .content-copy {
    padding: 30px 0 30px clamp(25px, 4vw, 58px);
    border-left: 1px solid var(--gold);
}

.testimonial-page .mission-card {
    min-height: 410px;
    padding: clamp(44px, 5vw, 70px);
    border-radius: 2px 110px 2px 2px;
}

.catalog-section .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 46px 24px;
}

.catalog-section .product-card {
    min-height: 455px;
    padding: 0 0 25px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(74, 42, 61, .22);
    border-radius: 0;
}

.catalog-section .product-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

.catalog-section .product-art {
    min-height: 270px;
    margin-bottom: 25px;
    border: 0;
    border-radius: 2px;
}

.catalog-section .product-card h2 {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.catalog-section .product-card a {
    padding-top: 15px;
    border-top: 1px solid rgba(198, 161, 91, .35);
}

.product-section {
    background:
        linear-gradient(90deg, var(--cream) 0 43%, #fffdfa 43%);
}

.product-detail {
    grid-template-columns: minmax(0, 1.02fr) minmax(350px, .98fr);
    gap: clamp(70px, 9vw, 135px);
}

.product-detail-art {
    min-height: 620px;
    border-radius: 2px 120px 2px 2px;
    box-shadow: 0 30px 80px rgba(48, 24, 39, .14);
}

.contact-opening .contact-intro {
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
    align-items: end;
    gap: clamp(60px, 9vw, 130px);
}

.contact-opening .section-heading {
    margin: 0;
}

.contact-opening .contact-callout {
    position: relative;
    min-height: 310px;
    padding: clamp(42px, 6vw, 78px);
    grid-template-columns: 150px 1fr;
    border: 1px solid rgba(198, 161, 91, .45);
    border-radius: 2px 100px 2px 2px;
    box-shadow: 0 28px 70px rgba(48, 24, 39, .15);
}

.contact-opening .contact-callout::after {
    position: absolute;
    right: 38px;
    bottom: 34px;
    width: 80px;
    height: 1px;
    background: var(--gold);
    content: "";
}

.contact-enquiry .contact-panel {
    grid-template-columns: minmax(290px, .62fr) minmax(0, 1.38fr);
    gap: clamp(38px, 6vw, 82px);
}

.contact-enquiry .contact-details {
    position: sticky;
    top: 145px;
    min-height: 650px;
    padding: clamp(42px, 5vw, 62px);
    border: 1px solid rgba(198, 161, 91, .42);
    border-radius: 2px 80px 2px 2px;
    box-shadow: 0 25px 65px rgba(48, 24, 39, .14);
}

.contact-enquiry .section-heading {
    margin-bottom: 32px;
}

.map-wrap {
    position: relative;
    height: clamp(440px, 46vw, 650px);
    border-top: 8px solid var(--purple);
}

.ready-cta {
    padding-block: clamp(60px, 7vw, 92px);
}

.ready-cta-inner {
    position: relative;
    padding-left: clamp(25px, 4vw, 58px);
}

.ready-cta-inner::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--gold);
    content: "";
}

.site-footer {
    padding-top: clamp(75px, 8vw, 115px);
}

.footer-grid {
    padding-bottom: clamp(65px, 7vw, 95px);
    grid-template-columns: 1.35fr .7fr 1fr .85fr;
    gap: clamp(38px, 5vw, 78px);
}

@media (max-width: 1080px) {
    .home-services .container,
    .home-process .container,
    .studio-values .container,
    .services-overview .container,
    .services-capabilities .container,
    .service-scope .container,
    .portfolio-showcase > .container,
    .catalog-section > .container,
    .home-projects .container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .home-services .section-heading,
    .home-process .section-heading,
    .studio-values .section-heading,
    .services-overview > .container > .section-heading,
    .services-capabilities .section-heading,
    .service-scope .section-heading,
    .portfolio-showcase > .container > .section-heading,
    .catalog-section > .container > .section-heading,
    .home-projects .section-heading,
    .home-enquiry .section-heading,
    .studio-enquiry .section-heading {
        position: static;
        max-width: 760px;
    }

    .home-projects .gallery-grid,
    .home-projects .gallery-actions,
    .portfolio-showcase .portfolio-gallery,
    .portfolio-showcase .project-note {
        grid-column: 1;
    }

    .catalog-section .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .intro-grid {
        gap: 12px;
    }

    .intro-service:nth-child(3) {
        margin: 0;
    }

    .home-story .split-grid,
    .studio-story .split-grid,
    .service-intro .split-grid,
    .testimonial-page .split-grid,
    .home-enquiry .quote-grid,
    .studio-enquiry .quote-grid,
    .contact-opening .contact-intro,
    .contact-enquiry .contact-panel,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .home-story .content-copy,
    .studio-story .content-copy,
    .service-intro .content-copy,
    .product-detail .content-copy {
        padding-right: 20px;
    }

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

    .services-overview .service-card:nth-child(even) .service-card-image {
        order: 0;
    }

    .services-overview .service-card-image {
        min-height: 420px;
    }

    .service-intro .service-hero-image {
        min-height: 540px;
    }

    .contact-opening .contact-callout,
    .contact-enquiry .contact-details {
        position: relative;
        top: auto;
        min-height: auto;
    }

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

    .product-section {
        background: linear-gradient(var(--cream) 0 38%, #fffdfa 38%);
    }

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

@media (max-width: 680px) {
    :where(.about-page, .services-page, .service-detail-page, .portfolio-page, .testimonial-page, .shop-page, .product-page, .contact-page) .section,
    .home-page :where(.home-story, .home-services, .home-projects, .home-enquiry, .home-process) {
        padding-block: 76px;
    }

    .page-banner {
        min-height: 360px;
        background-position: 70% center;
    }

    .page-banner-overlay {
        background:
            linear-gradient(90deg,
                rgba(24, 13, 21, .97) 0%,
                rgba(24, 13, 21, .9) 42%,
                rgba(24, 13, 21, .58) 68%,
                rgba(24, 13, 21, .2) 86%,
                rgba(24, 13, 21, 0) 100%),
            linear-gradient(0deg,
                rgba(18, 10, 16, .7) 0%,
                rgba(18, 10, 16, .25) 38%,
                rgba(18, 10, 16, 0) 68%);
    }

    .page-banner-content {
        padding-block: 68px 46px;
    }

    .page-banner-copy {
        width: calc(100% - 22px);
        padding-left: 18px;
    }

    .page-banner h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
    }

    .intro-strip {
        padding-block: 12px 50px;
    }

    .intro-lead,
    .intro-service {
        min-height: 225px;
    }

    .home-story .image-stack,
    .studio-story .image-stack {
        min-height: 500px;
    }

    .home-story .image-stack-main,
    .studio-story .image-stack-main {
        height: 455px;
        border-radius: 2px 90px 2px 2px;
    }

    .home-story .image-stack-small,
    .studio-story .image-stack-small {
        height: 215px;
        border-width: 8px;
    }

    .home-services .service-orbit,
    .service-scope .service-orbit {
        grid-template-columns: 1fr;
    }

    .home-services .orbit-card,
    .service-scope .orbit-card {
        min-height: 175px;
        padding-left: 62px;
    }

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

    .gallery-item,
    .gallery-item.is-wide,
    .gallery-item:nth-child(3n + 2):not(.is-wide),
    .portfolio-showcase .gallery-item:nth-child(4n + 1) {
        grid-column: auto;
        grid-row: auto;
    }

    .home-credibility {
        min-height: 540px;
        padding-block: 90px;
    }

    .home-credibility .expert-banner-inner {
        padding: 34px 26px;
    }

    .home-process .process-grid {
        padding-left: 0;
    }

    .home-process .process-grid::before {
        display: none;
    }

    .home-process .process-card {
        grid-template-columns: 62px 1fr;
        gap: 18px;
    }

    .home-process .process-card p {
        grid-column: 2;
    }

    .home-process .process-number {
        box-shadow: none;
    }

    .studio-principles .mission-grid {
        gap: 14px;
    }

    .studio-principles .mission-card,
    .studio-principles .mission-card:nth-child(2) {
        min-height: auto;
        padding: 38px 28px;
        margin: 0;
    }

    .studio-values .value-grid {
        grid-template-columns: 1fr;
    }

    .services-overview .service-card-image {
        min-height: 300px;
    }

    .services-overview .service-card-content {
        padding: 34px 25px 42px;
    }

    .services-capabilities .feature-grid {
        grid-template-columns: 1fr;
    }

    .services-capabilities .feature-card {
        min-height: 230px;
        border-right: 0;
        border-bottom: 1px solid rgba(74, 42, 61, .14);
    }

    .service-intro .service-hero-image {
        min-height: 440px;
        border-radius: 80px 2px 2px 2px;
    }

    .floral-page .service-scope .feature-card {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .portfolio-showcase .gallery-item {
        min-height: 245px;
    }

    .testimonial-page .commitment-story {
        background: var(--cream);
    }

    .testimonial-page .mission-card {
        min-height: auto;
        border-radius: 2px 70px 2px 2px;
    }

    .catalog-section .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-section .product-card {
        min-height: auto;
    }

    .catalog-section .product-art {
        min-height: 310px;
    }

    .product-detail-art {
        min-height: 460px;
        border-radius: 2px 80px 2px 2px;
    }

    .contact-opening .contact-callout {
        min-height: auto;
        padding: 38px 26px;
        grid-template-columns: 1fr;
        border-radius: 2px 70px 2px 2px;
        text-align: left;
    }

    .contact-opening .contact-callout img {
        margin-inline: 0;
    }

    .contact-enquiry .contact-details {
        padding: 38px 26px;
        border-radius: 2px 70px 2px 2px;
    }

    .ready-cta-inner {
        padding-left: 22px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

/* =====================================================================
   DESIGN SYSTEM COMPONENTS
   Reusable primitives for the shop, checkout, order tracking, services,
   projects, and impact pages. Token-driven, accessible, additive.
   Demonstrated in /styleguide.php. Not yet composed into pages (Phase 3+).
   ===================================================================== */

/* Prose links ------------------------------------------------------- */
.link {
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-color: var(--color-hairline-gold);
    text-underline-offset: .18em;
    transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}
.link:hover { color: var(--pink); text-decoration-color: currentColor; }
.link-muted { color: var(--color-text-muted); }
.link-quiet { text-decoration: none; }
.link-quiet:hover { text-decoration: underline; }

/* Button scale and variants ----------------------------------------- */
.button-sm { min-height: var(--control-h-sm); padding: 9px 18px; font-size: .78rem; }
.button-lg { min-height: var(--control-h-lg); padding: 16px 34px; font-size: .88rem; }
.button-block { display: flex; width: 100%; }
.button-icon { width: var(--tap-min); height: var(--tap-min); min-height: 0; padding: 0; }
.button-ghost {
    min-height: var(--control-h-md);
    padding: 13px 18px;
    color: var(--color-heading);
    background: transparent;
    border: 0;
}
.button-ghost:hover { color: var(--pink); text-decoration: underline; text-underline-offset: .18em; }
.button:disabled,
.button[aria-disabled="true"],
.button.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}
.button.is-loading { position: relative; color: transparent; pointer-events: none; }
.button.is-loading .spinner { position: absolute; inset: 0; margin: auto; }

/* Spinner and skeleton --------------------------------------------- */
.spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--color-line);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.spinner-light { border-color: rgba(255, 255, 255, .35); border-top-color: var(--white); }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
    background: linear-gradient(100deg, var(--cream) 30%, var(--pink-soft) 50%, var(--cream) 70%) var(--cream);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-text { height: .8em; margin: .35em 0; border-radius: var(--radius-pill); }
.skeleton-card { height: 240px; }
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Status pills ------------------------------------------------------ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 4px 13px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: nowrap;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.status-pill.is-success, .status-pill.is-paid, .status-pill.is-delivered, .status-pill.is-instock { color: var(--color-success); background: var(--color-success-bg); }
.status-pill.is-pending, .status-pill.is-processing, .status-pill.is-low { color: var(--color-warning); background: var(--color-warning-bg); }
.status-pill.is-failed, .status-pill.is-cancelled, .status-pill.is-out { color: var(--color-error); background: var(--color-error-bg); }
.status-pill.is-info { color: var(--color-info); background: var(--color-info-bg); }
.status-pill.is-neutral { color: var(--color-neutral); background: var(--color-neutral-bg); }

/* Price ------------------------------------------------------------- */
.price {
    color: var(--color-heading);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.price-lg { font-size: var(--text-2xl); }
.price-currency { margin-right: 4px; color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.price-was { margin-left: 8px; color: var(--color-text-muted); font-size: var(--text-base); text-decoration: line-through; }
.price-from { margin-right: 5px; color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-sm); }
.price-unit { color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-sm); }

/* Quantity stepper -------------------------------------------------- */
.qty { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--color-field-border); border-radius: var(--radius-sm); }
.qty button {
    display: grid;
    width: var(--tap-min);
    height: var(--tap-min);
    place-items: center;
    color: var(--purple);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-standard);
}
.qty button:hover { background: var(--pink-soft); }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.qty input {
    width: 3.5ch;
    height: var(--tap-min);
    padding: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--white);
    border: 0;
    border-inline: 1px solid var(--color-line);
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Chips, tags, filters ---------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--tap-min);
    padding: .45em 1.1em;
    color: var(--color-text);
    background: var(--white);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.chip:hover { border-color: var(--purple); }
.chip[aria-pressed="true"] { color: var(--color-on-brand); background: var(--purple); border-color: var(--purple); }
.chip-remove { margin-left: 2px; padding: 0 2px; color: inherit; background: transparent; border: 0; cursor: pointer; font-size: 1.05em; line-height: 1; }
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    color: var(--color-on-accent);
    background: var(--gold-soft);
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.result-count { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Tables ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
    padding: var(--space-2xs) var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-align: left;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-line-strong);
}
.table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
    .table--stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table--stacked tr { display: block; margin-bottom: var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
    .table--stacked td { display: flex; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--color-line); }
    .table--stacked td::before { content: attr(data-label); color: var(--color-text-muted); font-weight: 700; }
    .table--stacked td:last-child { border-bottom: 0; }
    .table--stacked .num { text-align: right; }
}

/* Form field states ------------------------------------------------- */
.field { display: block; margin-bottom: var(--space-md); }
.field > .field-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: var(--text-sm); }
.field-label .req { color: var(--color-error); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 14px 16px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(202, 144, 189, .18); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(117, 45, 52, .15); }
.field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-color: var(--color-success); }
.field-hint { margin-top: 6px; color: var(--color-text-muted); font-size: var(--text-sm); }
.field-message { margin-top: 6px; font-size: var(--text-sm); font-weight: 700; }
.field.is-error .field-message { color: var(--color-error); }

/* Breadcrumbs on light --------------------------------------------- */
.breadcrumbs--light { color: var(--color-text-muted); }
.breadcrumbs--light a { color: var(--color-heading); }
.breadcrumbs--light a:hover { color: var(--pink); }
.breadcrumbs--light [aria-current="page"] { color: var(--color-text); }
.breadcrumbs--light .sep { color: var(--color-line-strong); }

/* Empty state ------------------------------------------------------- */
.empty-state {
    max-width: 44ch;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}
.empty-state .empty-icon { display: inline-grid; width: 64px; height: 64px; margin-bottom: var(--space-md); place-items: center; color: var(--gold-deep); background: var(--gold-soft); border-radius: 50%; }
.empty-state h3 { margin-bottom: var(--space-2xs); }
.empty-state p { margin-bottom: var(--space-md); color: var(--color-text-muted); }
.empty-state--inline { padding: var(--space-xl) var(--space-lg); }

/* Pagination -------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; justify-content: center; }
.pagination a, .pagination button, .pagination span {
    display: grid;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 12px;
    place-items: center;
    color: var(--color-heading);
    background: var(--white);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pagination [aria-current="page"] { color: var(--color-on-brand); background: var(--purple); border-color: var(--purple); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* Stat tiles -------------------------------------------------------- */
.stat-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-tile { padding: var(--space-lg); }
.stat-value { color: var(--color-heading); font-family: var(--font-serif); font-size: var(--text-5xl); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-label { margin-top: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.stat-note { margin-top: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-sm); }
.stat-tile.on-dark .stat-value { color: var(--white); }
.stat-tile.on-dark .stat-label, .stat-tile.on-dark .stat-note { color: rgba(255, 255, 255, .8); }

/* Alerts and toasts ------------------------------------------------- */
.alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-left: 4px solid var(--color-neutral);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-neutral-bg);
    color: var(--color-text);
}
.alert-title { margin: 0 0 2px; font-weight: 800; }
.alert p { margin: 0; }
.alert-success { border-color: var(--color-success); background: var(--color-success-bg); }
.alert-error { border-color: var(--color-error); background: var(--color-error-bg); }
.alert-warning { border-color: var(--color-warning); background: var(--color-warning-bg); }
.alert-info { border-color: var(--color-info); background: var(--color-info-bg); }
.toast-stack { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: var(--space-2xs); max-width: min(92vw, 360px); }
.toast {
    padding: var(--space-sm) var(--space-md);
    color: var(--white);
    background: var(--purple);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-2);
    animation: toast-in var(--dur-base) var(--ease-out);
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Checkout steps ---------------------------------------------------- */
.steps { display: flex; align-items: flex-start; gap: var(--space-2xs); padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps .step { position: relative; flex: 1; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }
.steps .step::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    width: 36px;
    height: 36px;
    margin: 0 auto var(--space-2xs);
    place-items: center;
    color: var(--color-text-muted);
    background: var(--white);
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    font-family: var(--font-serif);
}
.steps .step::after { content: ""; position: absolute; top: 18px; left: calc(-50% + 18px); width: calc(100% - 36px); height: 1px; background: var(--color-line-strong); }
.steps .step:first-child::after { display: none; }
.steps .step.is-current { color: var(--color-heading); }
.steps .step.is-current::before { color: var(--color-on-brand); background: var(--purple); border-color: var(--purple); }
.steps .step.is-done { color: var(--color-heading); }
.steps .step.is-done::before { content: "\2713"; color: var(--color-on-success); background: var(--green-deep); border-color: var(--green-deep); }
.steps .step.is-done::after { background: var(--green-deep); }
@media (max-width: 680px) {
    .steps { counter-reset: none; }
    .steps .step { display: none; }
    .steps .step.is-current { display: block; flex: 1; }
    .steps .step.is-current::after { display: none; }
}

/* Order timeline ---------------------------------------------------- */
.timeline { padding: 0; margin: 0; list-style: none; }
.timeline-item { position: relative; padding: 0 0 var(--space-lg) var(--space-xl); }
.timeline-item::before { content: ""; position: absolute; top: 3px; left: 5px; width: 12px; height: 12px; border: 2px solid var(--color-line-strong); border-radius: 50%; background: var(--white); }
.timeline-item::after { content: ""; position: absolute; top: 17px; bottom: 0; left: 10px; width: 2px; background: var(--color-line); }
.timeline-item:last-child::after { display: none; }
.timeline-item.is-complete::before { background: var(--green-deep); border-color: var(--green-deep); }
.timeline-item.is-current::before { background: var(--gold); border-color: var(--gold-deep); }
.timeline-time { display: block; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.timeline-label { font-weight: 700; }

/* Meta / definition list ------------------------------------------- */
.meta-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-md); margin: 0; }
.meta-list dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.meta-list dd { margin: 0; color: var(--color-text); }

/* Reduced motion: freeze indicators to a still state. */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
    .skeleton { background: var(--cream); animation: none; }
    .toast { animation: none; }
}

/* =====================================================================
   COMMERCE PAGES  ·  shop, cart, checkout, order tracking
   ===================================================================== */

/* Header cart icon button */
.header-cart {
    position: relative;
    display: inline-grid;
    width: var(--tap-min);
    height: var(--tap-min);
    place-items: center;
    color: var(--color-heading);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.header-cart:hover { color: var(--purple); background: var(--pink-soft); }
.cart-ico { display: block; }
.cart-count {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    place-items: center;
    color: var(--color-on-brand);
    background: var(--purple);
    border: 2px solid var(--color-bg);
    border-radius: var(--radius-pill);
    font-size: .64rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Shop toolbar */
.shop-listing .section-heading { max-width: 760px; margin-bottom: var(--space-lg); }
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-line);
}
.chip-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: rgba(255, 255, 255, .8); }
.shop-sort { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.shop-sort label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.shop-sort select { padding: 10px 14px; background: var(--white); border: 1px solid var(--color-field-border); border-radius: var(--radius-sm); }
.result-count { display: block; margin: var(--space-md) 0 var(--space-lg); }

/* Shop product cards */
.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.shop-grid .product-card { padding: 0; overflow: hidden; }
.product-card-media { display: block; }
.shop-grid .product-art { aspect-ratio: 4 / 5; min-height: 0; margin: 0; border-radius: 0; border: 0; }
.product-card-body { display: flex; flex: 1; flex-direction: column; padding: var(--space-md) var(--space-md) var(--space-lg); }
.product-card-body h3 { margin-bottom: 6px; font-size: var(--text-xl); }
.product-card-body h3 a { color: var(--color-heading); }
.product-card-body h3 a:hover { color: var(--pink); }
.product-card-body > p { margin-bottom: var(--space-md); color: var(--color-text-muted); font-size: var(--text-sm); }
.product-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs); margin-top: auto; }
.price-request { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 700; color: var(--color-text-muted); }
.shop-note { margin-top: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Product detail additions */
.product-detail .price-lg { margin-bottom: var(--space-sm); }
.product-provisional { padding: var(--space-2xs) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.product-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-lg) 0; }
.product-meta { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }

/* Summary card (cart + checkout) */
.summary { padding: clamp(24px, 3vw, 34px); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.summary h2 { margin-bottom: var(--space-sm); font-size: var(--text-2xl); }
.summary-line { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 3px 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) 0; }
.summary-row.total { margin-top: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-line); color: var(--color-heading); font-family: var(--font-serif); font-size: var(--text-xl); }
.summary .button { margin-top: var(--space-md); }
.summary-note { margin: var(--space-sm) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Cart layout */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
.cart-summary { position: sticky; top: 145px; }
.cart-lines-head { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-md); padding-bottom: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.cart-lines-head span:nth-child(2) { grid-column: 2 / 4; text-align: center; }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-line); }
.cart-line-media { display: block; }
.cart-line-media img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-line-info a { font-weight: 700; color: var(--color-heading); }
.cart-line-info a:hover { color: var(--pink); }
.cart-line-info small { display: block; color: var(--color-text-muted); }
.cart-line-info .price { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-line-total { font-family: var(--font-serif); color: var(--color-heading); white-space: nowrap; }
.cart-remove { color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: 1.2rem; }
.cart-remove:hover { color: var(--color-error); border-color: var(--color-error); }
.cart-lines-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-line); }

/* Checkout */
.checkout-steps { max-width: 640px; margin: 0 auto var(--space-2xl); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
.checkout-summary { position: sticky; top: 145px; }
.checkout-main h2 { margin-bottom: var(--space-md); }
.field-optional, .field-hint { color: var(--color-text-muted); font-weight: 400; }
.checkout-pay { max-width: 620px; margin-inline: auto; }
.pay-card { padding: clamp(28px, 4vw, 46px); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-1); text-align: center; }
.pay-amount { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--text-lg); }
.pay-amount .price { font-size: var(--text-2xl); }
.pay-pending { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg); margin-bottom: var(--space-lg); background: var(--color-bg-sunken); border-radius: var(--radius-md); }
.pay-pending .spinner { width: 1.6em; height: 1.6em; }
.pay-pending p { margin: 0; text-align: left; }
.pay-sim-note { margin-bottom: var(--space-md); color: var(--color-text-muted); font-size: var(--text-sm); }
.pay-sim-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.checkout-done { max-width: 720px; margin-inline: auto; }
.done-card { padding: clamp(30px, 5vw, 58px); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-2); text-align: center; }
.done-icon { display: inline-grid; width: 66px; height: 66px; margin-bottom: var(--space-md); place-items: center; color: var(--color-on-success); background: var(--green-deep); border-radius: 50%; font-size: 1.9rem; }
.done-card .order-ref { color: var(--color-heading); }
.done-card .status-pill { margin: 2px; }
.done-items { margin: var(--space-lg) 0; text-align: left; }

/* Order tracking */
.track-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 64px); align-items: start; }
.track-form { margin-top: var(--space-md); }
.track-form .button { margin-top: var(--space-2xs); }
.track-card { padding: clamp(24px, 3vw, 38px); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.track-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.track-timeline { margin-bottom: var(--space-lg); }
.timeline-note { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.track-placeholder { padding: var(--space-2xl) var(--space-lg); color: var(--color-text-muted); text-align: center; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); }

@media (max-width: 900px) {
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cart-layout, .checkout-layout, .track-layout { grid-template-columns: 1fr; }
    .cart-summary, .checkout-summary { position: static; }
    .header-cart { order: 2; margin-left: auto; }
    .menu-toggle { order: 3; margin-left: 14px; }
    .brand { order: 1; }
}

@media (max-width: 680px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-toolbar { flex-direction: column; align-items: stretch; }
    .cart-lines-head { display: none; }
    .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "media info remove" "media qty total"; row-gap: var(--space-2xs); }
    .cart-line-media { grid-area: media; align-self: start; }
    .cart-line-info { grid-area: info; }
    .cart-line-qty { grid-area: qty; }
    .cart-line-total { grid-area: total; align-self: center; text-align: right; }
    .cart-line-remove { grid-area: remove; justify-self: end; }
}

/* =====================================================================
   ADMIN PORTAL PREVIEW
   ===================================================================== */
.admin-highlights { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
.admin-dash { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--elev-2); }
.admin-dash-bar { display: flex; align-items: center; gap: 8px; padding: 12px var(--space-md); background: var(--purple-deep); color: rgba(255, 255, 255, .9); }
.admin-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.admin-dot:nth-child(1) { background: #e07a7a; }
.admin-dot:nth-child(2) { background: #e2c168; }
.admin-dot:nth-child(3) { background: #7bbf7b; }
.admin-dash-title { margin-left: var(--space-2xs); font-size: var(--text-sm); font-weight: 700; }
.admin-preview-badge { margin-left: auto; padding: 3px 10px; background: rgba(255, 255, 255, .14); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.admin-dash-body { padding: clamp(20px, 3vw, 34px); }
.admin-stats { margin-bottom: var(--space-lg); }
.admin-stats .stat-tile { padding: var(--space-md); background: var(--color-bg-sunken); border-radius: var(--radius-md); }
.admin-stats .stat-value { font-size: var(--text-4xl); }
.admin-dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); }
.admin-panel h3 { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.admin-panel .table td, .admin-panel .table th { padding: var(--space-2xs) var(--space-sm); }
.admin-chart { width: 100%; height: auto; }
.admin-note { margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--text-sm); }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.module-card { position: relative; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-line); border-top: 3px solid var(--gold); border-radius: var(--radius-md); box-shadow: var(--elev-1); }
.module-num { display: block; margin-bottom: var(--space-2xs); color: var(--color-accent-ink); font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; }
.module-card h3 { margin-bottom: 4px; font-size: var(--text-xl); }
.module-summary { margin-bottom: var(--space-sm); color: var(--color-text-muted); font-size: var(--text-sm); }
.module-list { padding: 0; margin: 0; list-style: none; }
.module-list li { position: relative; padding: 6px 0 6px 22px; font-size: var(--text-sm); }
.module-list li::before { content: ""; position: absolute; top: 13px; left: 0; width: 10px; height: 2px; background: var(--gold); }

.tracker-flow { margin-bottom: var(--space-2xl); }
.tracker-flow .step { padding: 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.tracker-flow .step strong { display: block; margin-bottom: 4px; color: var(--color-heading); font-size: var(--text-base); }
.tracker-panel { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-lg); align-items: start; margin-bottom: var(--space-lg); }
.tracker-table h3 { margin-bottom: var(--space-sm); }
.tracker-insight { padding: clamp(28px, 4vw, 44px); color: var(--color-on-brand); background: linear-gradient(145deg, var(--purple-deep), var(--purple) 65%, #6b475d); border-radius: var(--radius-lg); box-shadow: var(--elev-2); }
.tracker-insight h3 { color: var(--white); margin-bottom: var(--space-sm); }
.tracker-insight p { color: rgba(255, 255, 255, .85); }
.tracker-insight .check-list li::before { background: var(--gold); }
.tracker-insight .check-list li { color: rgba(255, 255, 255, .9); }
.tracker-honesty { padding: var(--space-md) var(--space-lg); background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: #4a3d18; font-size: var(--text-sm); }
.roadmap-timeline { max-width: 760px; }

@media (max-width: 900px) {
    .admin-dash-grid, .tracker-panel { grid-template-columns: 1fr; }
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .module-grid { grid-template-columns: 1fr; }
    .admin-stats .stat-value { font-size: var(--text-3xl); }
}

/* =====================================================================
   PROJECT JOURNEYS  ·  cinematic self-playing case-study sequences
   ===================================================================== */
.project-journey { position: relative; height: 88svh; min-height: 560px; overflow: hidden; color: var(--white); background: #172019; }
.project-journey + .project-journey { margin-top: 0; }
.pj-frames, .pj-frame, .pj-frame img, .pj-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.pj-frame { opacity: 0; transition: opacity 1s ease; }
.pj-frame.is-active, .pj-frame:first-child { opacity: 1; }
.pj-frame img { object-fit: cover; object-position: center; }
.pj-overlay { z-index: 5; background: linear-gradient(90deg, rgba(16, 12, 15, .9) 0%, rgba(18, 13, 17, .55) 42%, rgba(16, 12, 15, .1) 72%, rgba(14, 11, 14, .4) 100%), linear-gradient(0deg, rgba(12, 10, 12, .72), transparent 46%); pointer-events: none; }
.pj-label { position: absolute; z-index: 12; top: clamp(88px, 13vh, 124px); left: 0; }
.pj-label .container { display: flex; align-items: center; gap: var(--space-2xs); color: var(--gold-soft); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.pj-label .container::before { content: ""; width: 30px; height: 2px; background: var(--gold); }
.pj-content { position: relative; z-index: 10; display: flex; height: 100%; align-items: flex-end; padding-bottom: clamp(48px, 9vh, 96px); }
.pj-steps { position: relative; width: min(640px, 84vw); min-height: 240px; }
.pj-step { position: absolute; inset: auto auto 0 0; width: 100%; opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.pj-step.is-active, .pj-step:first-child { opacity: 1; visibility: visible; transform: none; }
.pj-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: var(--space-sm); color: rgba(255, 255, 255, .86); font-size: .78rem; font-weight: 800; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.pj-kicker span { display: grid; width: 38px; height: 38px; place-items: center; color: #2c1724; background: linear-gradient(145deg, #f3deb4, var(--gold)); border-radius: 50%; letter-spacing: 0; }
.pj-step h3 { margin-bottom: var(--space-sm); color: var(--white); font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.pj-step h3 em { color: #f0d7a5; font-style: normal; font-weight: 400; }
.pj-step p { max-width: 46ch; margin: 0; color: rgba(255, 255, 255, .85); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.pj-rail { position: absolute; z-index: 12; top: 50%; right: clamp(14px, 3vw, 40px); display: flex; width: 3px; height: min(46vh, 340px); flex-direction: column; transform: translateY(-50%); background: rgba(255, 255, 255, .2); }
.pj-rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 20%; background: linear-gradient(var(--gold-soft), var(--gold)); transition: height .7s ease; }

.projects-intro .section-heading { max-width: 760px; }
.projects-outro { background: var(--color-bg-sunken); }

@media (prefers-reduced-motion: reduce) {
    .project-journey { height: auto; min-height: 0; }
    .project-journey .pj-frames { position: relative; height: 56svh; }
    .project-journey .pj-frame:not(:first-child) { display: none; }
    .pj-overlay { position: absolute; }
    .pj-content { position: static; padding: var(--space-xl) 0; background: #172019; }
    .pj-steps { position: static; width: auto; min-height: 0; }
    .pj-step { position: static; opacity: 1; visibility: visible; transform: none; margin-bottom: var(--space-lg); }
    .pj-rail { display: none; }
}

@media (max-width: 680px) {
    .project-journey { height: 84svh; }
    .pj-steps { width: 100%; }
    .pj-rail { display: none; }
}

/* ==========================================================================
   Services page: booking + quotation forms
   ========================================================================== */
.services-forms { background: var(--color-surface-alt, #f6f2f4); }
.services-forms-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: start;
}
.services-form-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e3d9df);
    border-radius: var(--radius-lg, 18px);
    padding: clamp(20px, 3vw, 34px);
    box-shadow: var(--elev-1, 0 10px 30px rgba(74, 42, 61, .06));
}
.services-form-head { margin-bottom: var(--space-md); }
.services-form-head h3 { margin: 4px 0 8px; }
.services-form-head p { color: var(--color-text-muted, #6d5c66); margin: 0; }
.stacked-form .field:last-of-type { margin-bottom: var(--space-md); }
.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm, 14px);
}
.field-row .field { margin-bottom: var(--space-md); }
.services-forms-note {
    text-align: center;
    margin-top: var(--space-lg);
    color: var(--color-text-muted, #6d5c66);
}
.services-forms-note a { font-weight: 700; }

@media (max-width: 860px) {
    .services-forms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Impact page
   ========================================================================== */
.impact-commitments .feature-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.impact-practices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.impact-practice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm, 14px); }
.impact-practice-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-size: var(--text-md, 1rem);
    color: var(--color-text, #34242e);
}
.impact-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold, #c6a15b);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    flex: none;
}
.impact-note-section .alert { max-width: 820px; margin: 0 auto; }
.impact-note-section .alert span[aria-hidden] { font-size: 1.4rem; line-height: 1.2; }

@media (max-width: 820px) {
    .impact-practices-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal pages (privacy, terms, delivery and returns)
   ========================================================================== */
.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text, #34242e);
    font-size: var(--text-md, 1rem);
    line-height: 1.7;
}
.legal-updated {
    font-weight: 700;
    color: var(--color-text-muted, #6d5c66);
    margin-bottom: var(--space-md, 20px);
}
.legal-doc .doc-draft { margin-bottom: var(--space-lg, 32px); }
.legal-doc h2 {
    margin-top: var(--space-lg, 32px);
    margin-bottom: var(--space-xs, 8px);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}
.legal-doc p { margin-bottom: var(--space-sm, 14px); }
.legal-doc ul {
    margin: 0 0 var(--space-md, 20px);
    padding-left: 1.2em;
    display: grid;
    gap: 8px;
}
.legal-doc li { padding-left: 4px; }
.legal-doc a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.legal-doc em { color: var(--color-text-muted, #6d5c66); }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}

/* ========================================================================== 
   Professional service and process showcases
   ========================================================================== */
.service-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.landscape-process .service-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.showcase-card {
    display: flex;
    overflow: hidden;
    min-width: 0;
    margin: 0;
    flex-direction: column;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-line, #e8dfe3);
    border-radius: 3px 3px var(--radius-md, 12px) var(--radius-md, 12px);
    box-shadow: var(--elev-1, 0 10px 30px rgba(74, 42, 61, .08));
}

.showcase-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.showcase-card:hover img {
    transform: scale(1.035);
}

.showcase-card figcaption {
    position: relative;
    display: flex;
    padding: clamp(20px, 2.3vw, 30px);
    flex: 1;
    flex-direction: column;
    border-top: 3px solid var(--gold, #c6a15b);
}

.showcase-card figcaption > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    margin: -39px 0 17px;
    align-items: center;
    justify-content: center;
    color: #2c1724;
    background: linear-gradient(145deg, #f3deb4, var(--gold, #c6a15b));
    border: 4px solid var(--color-surface, #fff);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.showcase-card h3 {
    margin-bottom: 8px;
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
}

.showcase-card p {
    margin: 0;
    color: var(--color-text-muted, #6d5c66);
    font-size: var(--text-sm, .92rem);
    line-height: 1.65;
}

.showcase-note {
    max-width: 820px;
    padding: 14px 18px;
    margin-top: var(--space-lg, 32px);
    color: #4f432c;
    background: var(--gold-soft, #f5ecd9);
    border-left: 3px solid var(--gold, #c6a15b);
    font-size: var(--text-sm, .9rem);
    line-height: 1.65;
}

.centered-note {
    margin-inline: auto;
    text-align: center;
    border-right: 3px solid var(--gold, #c6a15b);
}

.home-projects .showcase-note {
    grid-column: 2;
}

@media (max-width: 1080px) {
    .service-showcase-grid,
    .landscape-process .service-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-projects .showcase-note {
        grid-column: 1;
    }
}

@media (max-width: 620px) {
    .service-showcase-grid,
    .landscape-process .service-showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-card img {
        aspect-ratio: 16 / 10;
    }
}

/* ========================================================================== 
   Services page rebuild · stable full-width practice presentation
   ========================================================================== */
.services-page .services-overview > .container,
.services-page .services-capabilities > .container {
    display: block;
}

.services-page .services-overview > .container > .section-heading,
.services-page .services-capabilities .section-heading {
    position: static;
    max-width: 820px;
    margin: 0 auto clamp(44px, 6vw, 76px);
    text-align: center;
}

.services-page .services-overview .section-heading .eyebrow,
.services-page .services-capabilities .section-heading .eyebrow {
    justify-content: center;
}

.services-page .services-overview .section-heading h2,
.services-page .services-capabilities .section-heading h2 {
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(2.45rem, 4.2vw, 4.4rem);
    line-height: 1.05;
}

.services-page .services-overview .section-heading > p:last-child,
.services-page .services-capabilities .section-heading > p:last-child {
    max-width: 680px;
    margin-inline: auto;
}

.services-page .services-overview .service-grid {
    display: grid;
    max-width: 1240px;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
}

.services-page .services-overview .service-card {
    display: grid;
    overflow: hidden;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: var(--white);
    border: 1px solid rgba(74, 42, 61, .1);
    border-radius: 3px 3px var(--radius-lg, 18px) var(--radius-lg, 18px);
    box-shadow: 0 22px 60px rgba(48, 24, 39, .1);
}

.services-page .services-overview .service-card:nth-child(even) .service-card-image,
.services-page .services-overview .service-card-image {
    order: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
}

.services-page .services-overview .service-card-content {
    display: flex;
    min-width: 0;
    padding: clamp(30px, 3.5vw, 50px);
    flex-direction: column;
    justify-content: flex-start;
}

.services-page .services-overview .service-card-content h2 {
    margin-bottom: var(--space-sm, 14px);
    font-size: clamp(2.15rem, 3.1vw, 3.35rem);
    line-height: 1.08;
    text-wrap: balance;
}

.services-page .services-overview .service-card-content > p:not(.eyebrow) {
    max-width: 52ch;
}

.services-page .services-overview .service-list {
    margin-bottom: var(--space-lg, 32px);
}

.services-page .services-overview .service-card-content .button {
    align-self: flex-start;
    margin-top: auto;
}

.services-page .services-capabilities .feature-grid {
    display: grid;
    max-width: 1120px;
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.services-page .services-capabilities .feature-card {
    min-width: 0;
}

@media (max-width: 980px) {
    .services-page .services-overview .service-grid {
        max-width: 720px;
        grid-template-columns: 1fr;
    }

    .services-page .services-overview .service-card-image {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 760px) {
    .services-page .services-overview > .container > .section-heading,
    .services-page .services-capabilities .section-heading {
        margin-bottom: 38px;
    }

    .services-page .services-overview .section-heading h2,
    .services-page .services-capabilities .section-heading h2 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .services-page .services-overview .service-card-content {
        padding: 30px 24px 36px;
    }

    .services-page .services-capabilities .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   UI polish pass (2026-08-27): corporate refinements found in full-site review
   ========================================================================== */

/* Hero captions: hold contrast through crossfades over bright frames.
   Improvement only; hero structure and behaviour unchanged. */
.journey-step h1,
.journey-step h2 {
    text-shadow: 0 2px 26px rgba(20, 8, 16, .55), 0 1px 4px rgba(20, 8, 16, .45);
}
.journey-step > p:not(.journey-kicker) {
    text-shadow: 0 1px 16px rgba(20, 8, 16, .6), 0 1px 3px rgba(20, 8, 16, .5);
}
.journey-kicker {
    text-shadow: 0 1px 10px rgba(20, 8, 16, .6);
}

/* Intro-strip service cards: deepen the lower scrim so overlay text and the
   gold "view service" links stay readable over bright photography. */
.intro-service::before {
    background: linear-gradient(0deg, rgba(36, 19, 31, .94) 0%, rgba(36, 19, 31, .55) 40%, rgba(36, 19, 31, .05) 100%);
}

/* Product-card category tag: compact chip instead of a stretched bar. */
.product-art span {
    right: auto;
    max-width: calc(100% - 30px);
    padding: 6px 13px;
    background: rgba(38, 19, 31, .68);
    border: 1px solid rgba(198, 161, 91, .55);
    border-radius: 999px;
    backdrop-filter: blur(3px);
    line-height: 1.2;
}

/* Product-detail caption: quiet pill, not a warning bar. */
.product-detail-art figcaption {
    right: auto;
    left: 18px;
    bottom: 16px;
    padding: 7px 14px;
    background: rgba(40, 20, 33, .6);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: .66rem;
    letter-spacing: .1em;
    backdrop-filter: blur(4px);
}

/* Cart: the header row was removed from the markup; keep the first line flush. */
.cart-lines > .cart-line:first-child { border-top: 0; padding-top: 0; }

/* Gallery page: bulletproof column masonry (no tiling holes, natural crops). */
.gallery-block .gallery-grid {
    display: block;
    columns: 3 300px;
    column-gap: 18px;
}
.gallery-block .gallery-item {
    display: block;
    margin: 0 0 18px;
    min-height: 0;
    break-inside: avoid;
}
.gallery-block .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile navigation drawer: scrim, full-bleed panel, contact block. */
.nav-contact { display: none; }

@media (max-width: 900px) {
    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(26, 10, 20, .45);
        backdrop-filter: blur(2px);
    }

    .site-navigation {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-contact {
        display: grid;
        gap: 14px;
        margin-top: auto;
        padding-top: 26px;
        border-top: 1px solid var(--line, #e6dce2);
    }

    .nav-contact-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--purple, #4a2a3d);
        font-weight: 800;
        font-size: .95rem;
        letter-spacing: .02em;
    }
}

/* Keep the header (logo, cart, toggle) above the drawer backdrop. */
@media (max-width: 900px) {
    body.menu-open .site-header { z-index: 70; }
}

/* ---------- Shop media and bunch prices (2026-09-23, from the owner's photos, flyer and shop video) */
.bunches-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.bunch-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-variant-numeric: tabular-nums; }
.bunch-table th, .bunch-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.bunch-table thead th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bunch-table tbody th { font-weight: 600; color: var(--purple); }
.bunch-table .num { text-align: right; white-space: nowrap; }
.bunch-table tbody td.num { font-weight: 700; color: var(--purple); }
.bunch-note { margin-top: 16px; color: var(--muted); }
.real-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; list-style: none; margin: 0; padding: 0; }
.real-strip img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.shop-visit-in { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.shop-visit-film { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 9 / 16; background: var(--purple-deep); }
.shop-visit-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-visit-photo { display: block; width: 100%; max-width: 420px; margin-top: 22px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.film-toggle { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); background: rgba(48, 24, 39, .6); cursor: pointer; }
.film-toggle:hover { background: rgba(48, 24, 39, .85); }
.film-toggle .ft-pause, .film-toggle .ft-play { position: absolute; inset: 0; margin: auto; }
.film-toggle .ft-pause { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.film-toggle .ft-play { display: none; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; transform: translateX(2px); }
.film-toggle[aria-pressed="true"] .ft-pause { display: none; }
.film-toggle[aria-pressed="true"] .ft-play { display: block; }
@media (max-width: 860px) {
    .bunches-in, .shop-visit-in { grid-template-columns: 1fr; }
    .shop-visit-film { max-width: 340px; }
}

/* ---------- Real moments: portrait reels on the Projects page (2026-09-23, consent confirmed by the owner) */
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); align-items: start; }
.reel { margin: 0; }
.reel video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); background: var(--purple-deep); box-shadow: var(--shadow); }
.reel figcaption { margin-top: 10px; font-size: var(--text-sm, .9rem); color: var(--muted); }
@media (max-width: 860px) { .reels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .reels { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

/* =====================================================================
   Home hero (2026-09-23): the company's own photographs and shop footage
   replace the illustrative 10-chapter film. Deep aubergine ground, copy on
   the left, a three-tile mosaic on the right.
   ===================================================================== */
.ph-hero {
    position: relative;
    overflow: hidden;
    color: #fbf3f8;
    background:
        radial-gradient(900px 520px at 88% 12%, rgba(202, 144, 189, .22), transparent 62%),
        radial-gradient(700px 480px at 4% 108%, rgba(198, 161, 91, .14), transparent 60%),
        linear-gradient(160deg, #3b2032 0%, var(--purple-deep) 58%, #1f0f1a 100%);
    padding-block: clamp(48px, 6vw, 88px) clamp(64px, 7vw, 104px);
}
.ph-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.ph-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--gold-soft);
    font: 700 .78rem/1.4 var(--font-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
}
.ph-hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.ph-hero h1 {
    margin: 0 0 20px;
    color: #fff;
    font: 600 clamp(2.3rem, 4.6vw, 4rem)/1.08 var(--font-display);
    letter-spacing: -.01em;
    text-wrap: balance;
}
.ph-hero h1 em { color: var(--pink); font-style: italic; font-weight: 500; }
.ph-hero-lead { max-width: 34em; margin: 0 0 28px; color: rgba(251, 243, 248, .86); font-size: 1.1rem; line-height: 1.7; }
.ph-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-button-ghost { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .6); }
.ph-button-ghost:hover { color: var(--purple); background: #fff; transform: translateY(-2px); }
.ph-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 36px 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid rgba(198, 161, 91, .35);
}
.ph-hero-facts li { display: grid; gap: 4px; }
.ph-hero-facts strong { color: #fff; font: 600 1.12rem/1.2 var(--font-display); }
.ph-hero-facts span { color: rgba(251, 243, 248, .72); font-size: .88rem; line-height: 1.4; }
.ph-hero-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: clamp(460px, 44vw, 600px);
}
.ph-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #2a1422;
    box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .7);
    outline: 1px solid rgba(198, 161, 91, .28);
    outline-offset: -1px;
}
.ph-tile-film { grid-row: span 2; }
.ph-tile img, .ph-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-tile figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 76px);
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(48, 24, 39, .72);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
}
.ph-tile .film-toggle { z-index: 2; }
@media (max-width: 980px) {
    .ph-hero-in { grid-template-columns: 1fr; }
    .ph-hero-media { height: clamp(380px, 80vw, 560px); }
}
@media (max-width: 560px) {
    .ph-hero-facts { grid-template-columns: 1fr; gap: 12px; }
    .ph-hero-facts li { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
    .ph-hero-media { gap: 10px; height: 420px; }
    .ph-tile { border-radius: 14px; }
    .ph-tile figcaption { display: none; }   /* too narrow for a caption; the alt text carries it */
}
@media (prefers-reduced-motion: reduce) {
    .ph-button-ghost:hover { transform: none; }
}

/* Gallery: real photographs at their natural proportions, filtered by collection */
.gallery-intro { padding-bottom: clamp(24px, 4vw, 40px); }
.gallery-intro .section-heading { max-width: 760px; }
.gallery-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.gallery-filter[hidden] { display: none; }
.gallery-filter-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gallery-filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-filter-buttons button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    color: var(--purple);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.gallery-filter-buttons button:hover { border-color: var(--purple); }
.gallery-filter-buttons button[aria-pressed="true"] { color: var(--white); background: var(--purple); border-color: var(--purple); }
.gallery-filter-buttons .count { min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: rgba(74, 42, 61, .08); font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }
.gallery-filter-buttons button[aria-pressed="true"] .count { background: rgba(255, 255, 255, .18); }

.gallery-collection[hidden] { display: none; }
.gallery-collection { scroll-margin-top: 110px; }
.collection-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; margin-bottom: clamp(22px, 3vw, 34px); }
.collection-head h2 { margin: 0; text-wrap: balance; }
.collection-head > p { max-width: 52ch; margin: 0; color: var(--muted); }
.collection-count { display: block; margin-top: 6px; color: var(--purple); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.photo-wall { columns: 3 260px; column-gap: clamp(10px, 1.4vw, 18px); }
.photo-wall .gallery-item {
    display: block;
    min-height: 0;
    height: auto;
    margin: 0 0 clamp(10px, 1.4vw, 18px);
    border-radius: 10px;
    break-inside: avoid;
    grid-column: auto;
    grid-row: auto;
}
.photo-wall .gallery-item img { height: auto; aspect-ratio: auto; }
.photo-wall .gallery-item:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
@media (max-width: 760px) {
    .collection-head { grid-template-columns: 1fr; }
    .photo-wall { columns: 2 150px; }
}

/* Lightbox with a caption and previous / next through the visible set */
.lightbox figure { display: grid; justify-items: center; gap: 12px; margin: 0; }
.lightbox figcaption { max-width: min(760px, 88vw); color: rgba(255, 255, 255, .86); font-size: .92rem; line-height: 1.45; text-align: center; }
.lightbox figcaption .lb-pos { display: block; margin-top: 4px; color: rgba(255, 255, 255, .6); font-size: .78rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.lightbox img { max-height: 78vh; }
.lightbox .lb-nav { top: 50%; right: auto; transform: translateY(-50%); }
.lightbox .lb-prev { left: clamp(8px, 2vw, 24px); }
.lightbox .lb-next { right: clamp(8px, 2vw, 24px); left: auto; }
.lightbox .lb-nav[hidden] { display: none; }
.lightbox button:focus-visible { outline: var(--focus-ring) solid var(--focus-on-dark); outline-offset: var(--focus-offset); }
@media (max-width: 560px) {
    .lightbox { padding: 64px 12px 24px; }
    .lightbox .lb-nav { top: auto; bottom: 18px; transform: none; }
}

/* Landscape films next to the portrait reels */
.films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(28px, 4vw, 44px); }
.films .reel video { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .films { grid-template-columns: 1fr; } }

/* Testimonials published from the CMS */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.testimonial-card { display: grid; gap: 18px; margin: 0; padding: clamp(22px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.testimonial-card blockquote { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.6; color: var(--ink); }
.testimonial-card blockquote p { margin: 0; }
.testimonial-card figcaption { display: grid; gap: 2px; color: var(--muted); font-size: .9rem; }
.testimonial-card figcaption strong { color: var(--purple); font-size: .98rem; }

/* Order placed: how to pay (until online M-Pesa is live) */
.pay-instructions { text-align: left; margin: 22px 0; }
.pay-instructions h3 { margin: 0 0 12px; }
.pay-steps { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 22px; }
.pay-steps .mono, .order-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .03em; }
.pay-note { margin: 0; color: var(--muted); font-size: .92rem; }

/* Accessibility fixes, 24 Sep 2026: a visible focus ring on every form field (the pink border alone
   was under 3:1 on white), and room under the sticky header when a link or error jumps to a field. */
html { scroll-padding-top: 120px; }
.field input:focus, .field select:focus, .field textarea:focus,
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus {
    border-color: var(--purple);
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    box-shadow: none;
}
.form-flash { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; font-weight: 600; }
.form-flash:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-flash-success { color: var(--color-success); background: var(--color-success-bg); border-color: currentColor; }
.form-flash-error { color: var(--color-error); background: var(--color-error-bg); border-color: currentColor; }