/* ==========================================================================
   EVA — Red Light Therapy | Global Stylesheet
   Author : IT Geeks
   File   : style.css  (all pages — home + inner pages)
   Note   : Desktop / base styles only. Breakpoints live in responsive.css
   ========================================================================== */

/* ==========================================================================
   01. ROOT VARIABLES
   ========================================================================== */
:root {

    /* ---------- Brand Colours ---------- */
    --color-ink: #17120F;
    --color-ink-soft: #3A322C;
    --color-body: #6B615A;
    --color-muted: #9A8F86;
    --color-line: #E7DDD2;
    --color-line-soft: #F1EAE2;
    --color-white: #FFFFFF;
    --color-pearl: #FDFBF8;
    --color-porcelain: #F7F1EA;
    --color-champagne: #E8D9C5;
    --color-champagne-soft: #F4EADB;
    --color-rose-gold: #3A2029;
    --color-rose-gold-deep: #96545E;
    --color-rose-gold-soft: #F0DDDF;
    --color-platinum: #CFCCC7;
    --color-success: #6F8A6A;

    /* ---------- Purevea Palette (pastel wash tones) ---------- */
    --color-blush-tint: #FFECF1;
    --color-blush: #FFD1D7;
    --color-butter: #FBFECB;
    --color-butter-deep: #F9F3BB;
    --color-card-lilac: #E9DEF8;
    --color-card-sky: #DBEAFB;
    --color-card-butter: #FAF0B4;
    --color-card-pink: #FBDAE5;
    --color-cream: #FDFAE8;

    /* ---------- Surface / Text Roles ---------- */
    --color-bg: var(--color-pearl);
    --color-bg-alt: var(--color-blush-tint);
    --color-plum: #3A2029;
    --color-black: #000000;
    --color-bg-dark: var(--color-plum);
    --color-heading: var(--color-ink);
    --color-text: var(--color-body);
    --color-text-invert: #EFE7DE;
    --color-border: var(--color-line);

    /* ---------- Gradients ---------- */
    --gradient-champagne: linear-gradient(307deg, #FFECF1 35%, #FFD1D7 76%);
    --gradient-butter: linear-gradient(141deg, #FBFECB 2.25%, #FFD1D7 85.49%);
    --gradient-pearl: linear-gradient(180deg, #FFECF1 0%, #FDFBF9 100%);
    --gradient-fade-pink: linear-gradient(180deg, #FDFBF9 0%, #FFF2F5 45%, #FFE6EC 100%);
    --gradient-from-lilac: linear-gradient(180deg, #F1EAFB 0%, #F9F6FD 45%, #FDFBF9 100%);
    /* runs a section from the pink its neighbour ends on down to the lilac the
       next one starts on */
    --gradient-pink-to-lilac: linear-gradient(180deg, #FFE6EC 0%, #FDF1F6 38%, #F7F0FA 72%, #F1EAFB 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(255, 209, 215, 0.55) 0%, rgba(255, 236, 241, 0.30) 45%, rgba(255, 236, 241, 0) 70%);
    --gradient-line: linear-gradient(90deg, rgba(58, 32, 41, 0) 0%, #3A2029 50%, rgba(58, 32, 41, 0) 100%);

    /* ---------- Shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(23, 18, 15, 0.04);
    --shadow-sm: 0 4px 16px rgba(23, 18, 15, 0.05);
    --shadow-md: 0 12px 32px rgba(23, 18, 15, 0.07);
    --shadow-lg: 0 24px 64px rgba(23, 18, 15, 0.10);
    --shadow-xl: 0 40px 96px rgba(23, 18, 15, 0.14);
    --shadow-glow: 0 24px 64px rgba(58, 32, 41, 0.22);

    /* ---------- Typography : Families ---------- */
    --font-heading: "Gloock", "Cormorant Garamond", "Times New Roman", serif;
    --font-display: "Cormorant Garamond", "Times New Roman", serif;
    --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --font-icon: "Phosphor";

    /* ---------- Typography : Heading Scale (declared once, never repeated) --- */
    --font-h1: 104px;
    --font-h2: 50px;
    --font-h3: 38px;
    --font-h4: 28px;
    --font-h5: 22px;
    --font-h6: 18px;

    /* ---------- Typography : Body Scale 10px → 20px ---------- */
    --font-10: 10px;
    --font-11: 11px;
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-17: 17px;
    --font-18: 18px;
    --font-19: 19px;
    --font-20: 20px;

    /* ---------- Typography : Display Numerals (non-heading figures) ---------- */
    --font-display-xl: 56px;
    --font-display-lg: 40px;
    --font-display-md: 30px;
    --font-display-sm: 24px;

    /* ---------- Icon Sizes ---------- */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 40px;

    /* ---------- Typography : Weights ---------- */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---------- Typography : Line Heights ---------- */
    --lh-tight: 1.06;
    --lh-snug: 1.22;
    --lh-base: 1.5;
    --lh-relaxed: 1.75;
    --lh-loose: 2;

    /* ---------- Typography : Letter Spacing ---------- */
    --ls-tighter: -1.6px;
    --ls-tight: -0.6px;
    --ls-none: 0px;
    --ls-wide: 0.6px;
    --ls-wider: 1.6px;
    --ls-widest: 3.2px;

    /* ---------- Typography : Text Transform ---------- */
    --tt-uppercase: uppercase;
    --tt-lowercase: lowercase;
    --tt-capitalize: capitalize;
    --tt-none: none;

    /* ---------- Border Radius ---------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 34px;
    --radius-2xl: 48px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ---------- Border Width ---------- */
    --border-thin: 1px;
    --border-base: 2px;
    --border-thick: 4px;

    /* ---------- Spacing Scale ---------- */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;
    --space-160: 160px;

    /* ---------- Layout ---------- */
    --container-width: 1280px;
    --container-narrow: 860px;
    --container-wide: 1520px;
    --gutter-width: 24px;
    --section-padding-y: 80px;
    --section-padding-y-sm: 56px;
    --header-height: 128px;
    --announcement-height: 40px;
    --grid-gap: 32px;
    --grid-gap-sm: 20px;

    /* ---------- Motion ---------- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-reveal: 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------- Z-Index ---------- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-overlay: 400;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* the smooth-scroll module drives scrollTo() per frame; leaving this on
       `smooth` would animate every one of those calls and lag badly.
       Anchor jumps pass behavior:"smooth" explicitly instead. */
    scroll-behavior: auto;
    /* `clip` contains the off-canvas drawer without making html a scroll
       container — `hidden` computes overflow-y to auto and breaks sticky */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: var(--font-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-none);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
    overflow: hidden;
}

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

/* long unbroken strings — an email address, a URL — must wrap rather than
   push a narrow column wider than the screen */
body {
    overflow-wrap: break-word;
    /* the announcement is fixed, so the page starts below it */
    padding-top: var(--announcement-height);
}

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

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
}

:focus-visible {
    outline: var(--border-base) solid var(--color-rose-gold);
    outline-offset: var(--space-4);
}

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

/* ==========================================================================
   03. TYPOGRAPHY  (heading sizes declared once — never repeated elsewhere)
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-none);
    color: var(--color-heading);
    text-transform: var(--tt-none);
}

h1 {
    font-size: var(--font-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h2 {
    font-size: var(--font-h2);
    line-height: var(--lh-tight);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

h5 {
    font-size: var(--font-h5);
}

h6 {
    font-size: var(--font-h6);
}

p {
    font-size: var(--font-16);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

strong,
b {
    font-weight: var(--fw-semibold);
    color: var(--color-ink-soft);
}

em {
    font-style: italic;
}

/* ---------- Text Utilities ---------- */
.text-serif {
    font-family: var(--font-display);
}

.text-italic {
    font-style: italic;
}

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

.text-accent {
    color: var(--color-rose-gold);
}

/* matched to the hero's own paragraph, so every section reads at one size */
.text-lead {
    font-size: var(--font-16);
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-regular);
    color: var(--color-ink-soft);
}

.text-body-sm {
    font-size: var(--font-14);
    line-height: var(--lh-base);
}

.text-caption {
    font-size: var(--font-12);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-wide);
    color: var(--color-muted);
}

.text-micro {
    font-size: var(--font-10);
    line-height: var(--lh-base);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-muted);
}

/* ---------- Invert (dark surfaces) — declared last so it wins ---------- */
.text-invert {
    color: var(--color-text-invert);
}

.text-invert h1,
.text-invert h2,
.text-invert h3,
.text-invert h4,
.text-invert h5,
.text-invert h6 {
    color: var(--color-white);
}

.text-invert p,
.text-invert .text-lead,
.text-invert .text-body-sm,
.is-dark p,
.is-dark .text-lead,
.is-dark .text-body-sm {
    color: var(--color-text-invert);
}

.text-invert .text-caption,
.text-invert .text-micro,
.is-dark .text-caption,
.is-dark .text-micro {
    color: rgba(239, 231, 222, 0.6);
}

.is-dark strong,
.text-invert strong {
    color: var(--color-white);
}

/* ---------- Eyebrow / Section Label ---------- */
.eyebrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
    font-size: var(--font-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-widest);
    text-transform: var(--tt-uppercase);
    color: var(--color-rose-gold);
}

.eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: var(--border-thin);
    background-color: var(--color-rose-gold);
}

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

.eyebrow.is-centered::after {
    content: "";
    display: block;
    width: 28px;
    height: var(--border-thin);
    background-color: var(--color-rose-gold);
}

.eyebrow.is-invert {
    color: var(--color-champagne);
}

.eyebrow.is-invert::before,
.eyebrow.is-invert::after {
    background-color: var(--color-champagne);
}

/* ==========================================================================
   04. LAYOUT — SECTION / CONTAINER / ROW  (no margin anywhere — flex + gap)
   ========================================================================== */
.section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding: var(--section-padding-y) var(--gutter-width);
    position: relative;
}

.section.is-compact {
    padding: var(--section-padding-y-sm) var(--gutter-width);
}

.section.is-flush-top {
    padding-top: 0;
}

.section.is-flush-bottom {
    padding-bottom: 0;
}

.section.is-tight-bottom {
    padding-bottom: var(--section-padding-y-sm);
}

.section.is-tight-top {
    padding-top: var(--space-56);
}

.section.is-alt {
    background-color: var(--color-bg-alt);
}

.section.is-dark {
    background-color: var(--color-bg-dark);
}

/* black rather than plum, so the diode panel has something to burn against */
.section.is-dark.is-black {
    background-color: var(--color-black);
}


.section.is-butter {
    background-image: var(--gradient-butter);
}

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

.section.is-fade-pink {
    background-image: var(--gradient-fade-pink);
}

.section.is-pink-to-lilac {
    background-image: var(--gradient-pink-to-lilac);
}

/* fades a section's top edge out of lilac and back to the page's own light */
.section.is-from-lilac {
    background-image: var(--gradient-from-lilac);
}

.section.is-wash {
    background-image: linear-gradient(160deg, #FFF7F9 0%, #FFECF1 46%, #FDF7F0 100%);
}

.section.is-butter-deep {
    background-color: var(--color-butter-deep);
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-width);
    gap: var(--space-56);
    position: relative;
    z-index: var(--z-base);
}

.container.is-narrow {
    max-width: var(--container-narrow);
}

.container.is-wide {
    max-width: var(--container-wide);
}

.row {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap);
}

.row.is-column {
    flex-direction: column;
}

.row.is-wrap {
    flex-wrap: wrap;
}

.row.is-center {
    align-items: center;
}

.row.is-between {
    justify-content: space-between;
}

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

.row.is-stretch {
    align-items: stretch;
}

.col {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    flex: 1 1 0;
    min-width: 0;
}

.col.is-tight {
    gap: var(--space-16);
}

.col.is-loose {
    gap: var(--space-32);
}

/* ---------- Section Head ---------- */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    max-width: 720px;
}

.section-head.is-centered {
    align-items: center;
    text-align: center;
    align-self: center;
    /* without this the block shrink-wraps to its widest child — on narrow
       screens a button inside it was squeezing the heading into a column */
    width: 100%;
}

.section-head.is-wide {
    max-width: 880px;
}

.section-head-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-48);
    width: 100%;
}

/* ---------- Decorative Divider ---------- */
.divider {
    display: block;
    width: 100%;
    height: var(--border-thin);
    background-image: var(--gradient-line);
    opacity: 0.5;
}

.divider-dot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    width: 100%;
}

.divider-dot::before,
.divider-dot::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    height: var(--border-thin);
    background-color: var(--color-line);
}

.divider-dot i {
    font-size: var(--font-14);
    color: var(--color-rose-gold);
}

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    padding: var(--space-16) var(--space-32);
    font-size: var(--font-13);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid transparent;
    transition: all var(--transition-base);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn i {
    font-size: var(--font-16);
    transition: transform var(--transition-base);
}

.btn:hover i {
    transform: translateX(4px);
}

.btn-primary {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-rose-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-rose {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.btn-rose:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
}

.btn-outline:hover {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-line);
    padding: var(--space-12) var(--space-24);
}

.btn-ghost:hover {
    border-color: var(--color-rose-gold);
    color: var(--color-rose-gold);
}

.btn-invert {
    background-color: var(--color-white);
    color: var(--color-ink);
}

.btn-invert:hover {
    background-color: var(--color-champagne);
    transform: translateY(-2px);
}

.btn-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) 0;
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-ink);
    border-bottom: var(--border-thin) solid var(--color-line);
    transition: all var(--transition-base);
    align-self: flex-start;
}

.btn-link:hover {
    color: var(--color-rose-gold);
    border-bottom-color: var(--color-rose-gold);
    gap: var(--space-12);
}

.btn-icon {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    border: var(--border-thin) solid var(--color-line);
    color: var(--color-ink);
    font-size: var(--font-18);
    transition: all var(--transition-base);
    flex: 0 0 auto;
}

.btn-icon:hover {
    background-color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-white);
}

.btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-block {
    width: 100%;
}

.btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

/* ==========================================================================
   06. PILLS / BADGES / CHIPS
   ========================================================================== */
.pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-ink-soft);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.pill i {
    font-size: var(--font-14);
    color: var(--color-rose-gold);
}

.pill.is-rose {
    background-color: var(--color-rose-gold-soft);
    border-color: transparent;
    color: var(--color-rose-gold-deep);
}

.pill.is-invert {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text-invert);
}

.pill.is-invert i {
    color: var(--color-champagne);
}

/* ---------- Star Rating ---------- */
.rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
}

.rating-stars {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    color: var(--color-rose-gold);
    font-size: var(--font-14);
}

.rating-label {
    font-size: var(--font-12);
    letter-spacing: var(--ls-wide);
    color: var(--color-muted);
}

/* ==========================================================================
   07. ANNOUNCEMENT BAR
   ========================================================================== */
/* pinned, so the offer stays on screen instead of scrolling away with the
   page — the header pins directly beneath it */
.announcement {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) + 10);
    height: var(--announcement-height);
    padding: 0 var(--gutter-width);
    background-color: var(--color-bg-dark);
    overflow: hidden;
}

.announcement-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-40);
}

.announcement-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-14);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-none);
    text-transform: var(--tt-none);
    /* champagne at 12px on plum was too faint to read on a phone */
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--transition-slow);
    position: absolute;
}

.announcement-item.is-active {
    opacity: 1;
    position: relative;
}

.announcement-item i {
    font-size: var(--font-14);
}

/* ==========================================================================
   08. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: var(--header-height);
    padding: 0 var(--gutter-width);
    background-color: transparent;
    border-bottom: var(--border-thin) solid transparent;
    /* sits over the hero rather than taking space in the flow */
    position: absolute;
    top: var(--announcement-height);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    transition: all var(--transition-base);
}

/* Once the page scrolls the header leaves the hero and pins to the top of the
   viewport. It was only shrinking its height before — still absolutely
   positioned, so it scrolled away and took the menu button with it. */
.site-header.is-stuck {
    height: 76px;
    position: fixed;
    /* clears the pinned announcement above it */
    top: var(--announcement-height);
    background-color: rgba(253, 251, 248, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(23, 18, 15, 0.07);
    box-shadow: 0 10px 30px rgba(23, 18, 15, 0.05);
}

/* the mark comes down with the bar so it still fits */
.site-header.is-stuck .brand-logo {
    height: 56px;
}

.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-40);
    width: 100%;
    max-width: var(--container-wide);
}

.brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    flex: 0 0 auto;
}

.brand-logo {
    /* sized by height so it fits the header bar whatever the artwork's
       proportions are — the mark is near-square, not the wide wordmark the
       old width-based rule assumed. The artwork is 93% transparent with fine
       strokes, so it needs real size to read at all. */
    height: 104px;
    width: auto;
    transition: opacity var(--transition-base);
}

.brand:hover .brand-logo {
    opacity: 0.72;
}

.main-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
}

.nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: var(--font-14);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-none);
    text-transform: var(--tt-none);
    color: var(--color-ink-soft);
    position: relative;
}

.nav-link::after {
    content: "";
    display: block;
    width: 0;
    height: var(--border-thin);
    background-color: var(--color-rose-gold);
    transition: width var(--transition-base);
}

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

.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    flex: 0 0 auto;
}

.header-cart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    color: var(--color-ink);
    font-size: var(--font-20);
    position: relative;
    transition: all var(--transition-base);
}

.header-cart:hover {
    background-color: var(--color-porcelain);
}

.header-cart-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: var(--font-10);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    /* the same plum the CTAs carry */
    background-color: var(--color-bg-dark);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 4px;
    right: 2px;
}

/* Drawn in CSS rather than set as an icon-font glyph: the icon font comes
   from a CDN, and when it fails to arrive this button was left as an empty
   circle with no way to tell it opens the menu. */
.nav-toggle {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-ink);
    background-color: transparent;
    border-radius: var(--radius-circle);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.18);
    cursor: pointer;
    transition: all var(--transition-base);
}

.nav-toggle:hover {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-white);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    border-radius: var(--radius-pill);
    transition: transform var(--transition-base);
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -6px;
}

.nav-toggle-bars::after {
    top: 6px;
}

.nav-toggle i {
    transition: transform var(--transition-base);
}

/* ---------- Mobile Drawer ---------- */
.nav-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    width: 100%;
    max-width: 380px;
    height: 100vh;
    padding: var(--space-32) var(--space-32) var(--space-48);
    background-color: var(--color-pearl);
    border-left: var(--border-thin) solid var(--color-line);
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-drawer);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-slow), visibility var(--transition-slow);
    overflow-y: auto;
}

.nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.nav-drawer-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding-bottom: var(--space-24);
    border-bottom: var(--border-thin) solid var(--color-line);
}

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
}

.nav-drawer-links a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-16) 0;
    font-family: var(--font-display);
    font-size: var(--font-20);
    color: var(--color-ink);
    border-bottom: var(--border-thin) solid var(--color-line-soft);
}

.nav-drawer-links a i {
    font-size: var(--font-16);
    color: var(--color-muted);
    transition: transform var(--transition-base);
}

.nav-drawer-links a:hover {
    color: var(--color-rose-gold);
}

.nav-drawer-links a:hover i {
    transform: translateX(4px);
    color: var(--color-rose-gold);
}

.nav-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.overlay {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 18, 15, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    left: 0;
    /* under the drawer, not over it — at --z-overlay this dark, blurred sheet
       was covering the drawer it was meant to sit behind */
    z-index: calc(var(--z-drawer) - 1);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   09. HERO — split headline around a centred cut-out
   ========================================================================== */
.hero {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    min-height: 720px;
    /* clears the absolutely-positioned header — tied to its height so the two
       cannot drift apart when the header changes */
    padding: calc(var(--header-height) + var(--space-32)) var(--gutter-width) var(--space-40);
    /* ends on the page's own background rather than white, so the hero and
       the section below it meet without a seam */
    background-image: linear-gradient(180deg, #FBDDE7 0%, #FDEAF0 26%, #FEF4F7 58%, #FDF8F5 84%, var(--color-bg) 100%);
    position: relative;
    overflow: hidden;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-24);
    width: 100%;
    max-width: var(--container-wide);
    position: relative;
    z-index: var(--z-raised);
}

/* ---------- Split display headline ---------- */
.hero-display {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-32);
    width: 100%;
    /* headline runs 20% smaller than the base h1 scale at every breakpoint */
    font-size: calc(var(--font-h1) * 0.8);
    text-transform: var(--tt-none);
    line-height: 0.92;
    letter-spacing: var(--ls-tight);
    color: var(--color-ink);
    position: relative;
    z-index: var(--z-raised);
    pointer-events: none;
}

.hero-line {
    display: block;
    max-width: 31%;
}

.hero-line.is-left {
    padding-top: var(--space-24);
}

/* sits under the first line of the headline, in the space the split display
   leaves empty on the left */
.hero-line-mask {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 130px;
    margin-top: var(--space-20);
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(23, 18, 15, 0.16));
}

.hero-line.is-right {
    padding-top: var(--space-96);
    text-align: right;
}

/* ---------- Centre cut-out ---------- */
.hero-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* contains the glow's blend so it multiplies with the frames, not the
       pink gradient behind them */
    isolation: isolate;
    width: 34%;
    max-width: 470px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: var(--z-base);
    pointer-events: none;
    /* dissolve the cut-out into the gradient instead of ending on a hard edge */
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.12) 86%, rgba(0, 0, 0, 0) 96%);
    mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.12) 86%, rgba(0, 0, 0, 0) 96%);
}

.hero-frames {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1800 / 2400;
}

.hero-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity var(--transition-base);
}

.hero-poster.is-hidden {
    opacity: 0;
}

/* Multiply drains the green and blue out of whatever is under it, so the
   white light on the face turns red while the frames themselves stay
   untouched. Two ellipses: the brow/eye band and the cheeks below it. */
.hero-glow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(ellipse 42% 26% at 50% 41%,
            rgba(255, 186, 189, 0.85) 0%,
            rgba(255, 214, 216, 0.6) 52%,
            rgba(255, 255, 255, 0) 100%),
        radial-gradient(ellipse 38% 22% at 48% 66%,
            rgba(255, 196, 199, 0.7) 0%,
            rgba(255, 222, 224, 0.5) 52%,
            rgba(255, 255, 255, 0) 100%);
}

/* ---------- Foot row ---------- */
.hero-foot {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-40);
    width: 100%;
    position: relative;
    z-index: var(--z-sticky);
}

.hero-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    max-width: 380px;
}

.hero-intro p {
    font-size: var(--font-16);
    line-height: var(--lh-relaxed);
    color: var(--color-ink-soft);
}

/* pill label with a circular arrow badge, as in the reference */
.hero-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
}

.hero-cta-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--space-16) var(--space-28);
    font-size: var(--font-13);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.55);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.12);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-base);
}

.hero-cta:hover .hero-cta-label {
    color: var(--color-white);
    background-color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
}

/* ---------- Glass stat cards ---------- */
.hero-stats {
    display: flex;
    flex-direction: row;
    gap: var(--space-16);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 240px;
    padding: var(--space-20);
    /* white-on-pink read as no edge at all — a soft ink line defines the card */
    border: var(--border-thin) solid rgba(23, 18, 15, 0.14);
    border-radius: var(--radius-lg);
}

/* the same pastels the benefit cards cycle through */
.hero-stat:nth-child(1) {
    background-color: var(--color-card-butter);
}

.hero-stat:nth-child(2) {
    background-color: var(--color-card-sky);
}

.hero-stat p {
    font-size: var(--font-13);
    line-height: var(--lh-base);
    /* the same ink as the hero's own paragraph beside it */
    color: var(--color-ink-soft);
}

.hero-stat-avatars {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hero-stat-avatars img {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-circle);
    border: var(--border-base) solid var(--color-white);
    object-fit: cover;
}

.hero-stat-avatars img:not(:first-child) {
    transform: translateX(-10px);
}

.hero-stat-avatars img:nth-child(3) {
    transform: translateX(-20px);
}

.hero-stat-more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: var(--font-11);
    font-weight: var(--fw-medium);
    color: var(--color-white);
    background-color: var(--color-ink);
    border-radius: var(--radius-circle);
    transform: translateX(-30px);
}

.hero-stat-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
}

/* a reviewer's face beside the rating, sized to match the avatar row in the
   card next to it */
.hero-stat-face {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: var(--border-base) solid var(--color-white);
    border-radius: var(--radius-circle);
    flex: 0 0 auto;
    overflow: hidden;
}

.hero-stat-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-stat-value {
    /* the heading face, as the product price uses — the light serif read as
       a different voice from everything else on the page */
    font-family: var(--font-heading);
    font-size: var(--font-display-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}

.hero-stat .rating-stars {
    color: var(--color-rose-gold);
    font-size: var(--font-12);
}

/* .hero-anim animates transform; the figure needs its own centring offset,
   so restate it here in case the class is ever applied to it */
.hero-figure.hero-anim {
    animation: heroFigureRise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroFigureRise {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ---------- Entrance ---------- */
.hero-anim {
    animation: heroRise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-anim.is-step-1 { animation-delay: 0.12s; }
.hero-anim.is-step-2 { animation-delay: 0.24s; }
.hero-anim.is-step-3 { animation-delay: 0.36s; }

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   11. BRAND STORY — THE MEANING OF EVA
   ========================================================================== */
.story-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-80);
    width: 100%;
}

.story-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    flex: 1 1 46%;
    position: relative;
}

.story-visual-main {
    display: flex;
    flex-direction: column;
}

.story-visual-main img {
    /* portrait artwork: sized by height so the column stays in proportion
       with the copy beside it rather than running 200px taller */
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: contain;
    align-self: center;
    /* drop-shadow follows the cut-out silhouette, not a box */
    filter: drop-shadow(0 28px 48px rgba(23, 18, 15, 0.16));
}

.story-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-28);
    flex: 1 1 54%;
}

.story-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.story-lines p {
    /* set in the body sans rather than the display serif — the serif was
       competing with the heading directly above these two lines */
    font-family: var(--font-body);
    font-size: var(--font-16);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-ink-soft);
}

/* the one emphasised word keeps the serif, so it still lifts off the line */
.story-lines em {
    font-family: var(--font-display);
    /* the one emphasised word still lifts, just proportionally to the smaller
       line it now sits on */
    font-size: var(--font-20);
    font-style: italic;
    color: var(--color-rose-gold-deep);
}

/* ==========================================================================
   11B. WAVE STATEMENT — type riding a ribbon
   ========================================================================== */
/* full-bleed out of the section's gutters */
.wave-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* it is a flex item of .section — without this it shrinks to the container */
    flex: 0 0 auto;
    width: 100vw;
    max-width: 100vw;
    /* full-bleed measured from the parent's own box — the old left:50% trick
       drifted off-centre whenever the parent's padding was asymmetric */
    margin-inline: calc(50% - 50vw);
    position: relative;
    overflow: hidden;
}

/* meet + auto height keeps the ribbon and the type in exact proportion at
   every width — slicing would crop the crests off on wide screens */
.wave-text-svg {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    /* below this the whole band would shrink into a thin strip, so it keeps
       its size and the section crops it instead */
    min-width: 900px;
    height: auto;
}

.wave-text-ribbon {
    fill: none;
    stroke: var(--color-bg-dark);
    stroke-width: 116;
    stroke-linecap: butt;
}

.wave-text-line {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-tight);
    fill: var(--color-white);
}

/* ==========================================================================
   12. PILLAR / BENEFIT CARDS
   ========================================================================== */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-40);
    padding: var(--space-32) var(--space-28);
    flex: 1 1 300px;
    min-height: 360px;
    background-color: var(--color-card-sky);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base);
    position: relative;
}

/* pastels cycle, and each card sits at its own slight angle */
.card:nth-child(4n + 1) {
    background-color: var(--color-card-lilac);
    transform: rotate(-2deg);
}

.card:nth-child(4n + 2) {
    background-color: var(--color-card-sky);
    transform: rotate(1.5deg);
}

.card:nth-child(4n + 3) {
    background-color: var(--color-card-butter);
    transform: rotate(-2.5deg);
}

.card:nth-child(4n + 4) {
    background-color: var(--color-card-pink);
    transform: rotate(2deg);
}

.card:hover {
    transform: rotate(0deg) translateY(-6px);
}

.card-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--icon-2xl);
    color: var(--color-ink);
    flex: 0 0 auto;
}

.card-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* the same ink as the section intros — these were the page's default body
   grey, a shade lighter than every lead paragraph around them */
.card-text p {
    color: var(--color-ink-soft);
}

.card-index {
    font-family: var(--font-display);
    font-size: var(--font-display-sm);
    font-weight: var(--fw-light);
    color: var(--color-champagne);
    letter-spacing: var(--ls-none);
}

.card.is-quiet {
    background-color: transparent;
    border-color: var(--color-line);
}

.card.is-invert {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.card.is-invert p {
    color: rgba(239, 231, 222, 0.72);
}

.card.is-invert .card-icon {
    background-color: rgba(232, 217, 197, 0.12);
    color: var(--color-champagne);
}

/* ==========================================================================
   13. FEATURE SPLIT — EXACT FIT / PRODUCT
   ========================================================================== */
.split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-80);
    width: 100%;
}

.split-visual {
    display: flex;
    flex-direction: column;
    flex: 1 1 48%;
    /* pins while the copy column scrolls past; clears the sticky header */
    position: sticky;
    top: 108px;
    align-self: flex-start;
}

.split-visual img {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.split-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* the copy is shorter than the portrait beside it, so it centres against
       it rather than hanging off the top */
    justify-content: center;
    align-self: stretch;
    gap: var(--space-28);
    flex: 1 1 52%;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    width: 100%;
}

.feature-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
    padding-bottom: var(--space-20);
    border-bottom: var(--border-thin) solid var(--color-line-soft);
}

.feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.feature-item-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: var(--font-20);
    color: var(--color-rose-gold);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-circle);
    flex: 0 0 auto;
    transition: all var(--transition-base);
}

.feature-item:hover .feature-item-icon {
    background-color: var(--color-bg-dark);
    border-color: transparent;
    color: var(--color-white);
}

.feature-item-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ==========================================================================
   14. TECHNOLOGY / WAVELENGTHS
   ========================================================================== */
/* ---------- Wave shelves: the page's own colour cutting into the black ----------
   One SVG wave, tiled horizontally. The fill is the page background, so the
   shape reads as the neighbouring section spilling over this one's edge. */
.shelf__wave {
    display: block;
    width: 100%;
    height: 56px;
    position: absolute;
    left: 0;
    /* above the diode panel, below the content */
    z-index: 1;
    pointer-events: none;
    /* Painted as a solid fill cut by a mask, not as a drawn image. An image's
       top row antialiases against the section behind it, which is what left a
       hairline at the seam; a solid fill has no edge there at all. */
    background-color: var(--color-bg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-size: 1440px 56px;
    mask-size: 1440px 56px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,0 H1440 V26 q-90,24 -180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,0 H1440 V26 q-90,24 -180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 t-180,0 Z'/%3E%3C/svg%3E");
}

/* both shelves overlap their neighbour by 2px so no sliver of the section
   can show through at the join */
.shelf__wave.is-top {
    top: -2px;
}

.shelf__wave.is-bottom {
    bottom: -2px;
    transform: rotate(180deg);
}

/* ---------- LED field: a diode panel the cursor lights up ---------- */
.section.has-leds {
    overflow: hidden;
    /* the wave shelves cut exactly 56px off each edge, so the section adds
       that back — its content then clears the edge by the same amount as
       every other section on the page */
    padding-top: calc(var(--section-padding-y) + 56px);
    padding-bottom: calc(var(--section-padding-y) + 56px);
}

/* --mx / --my track the pointer; everything else is two copies of the same
   diode grid, the bright one revealed only around that point */
.led-field {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.led-array {
    display: block;
    position: absolute;
    inset: 0;
    background-size: 26px 26px;
}

/* the panel with the power off */
.led-array.is-dark {
    background-image: radial-gradient(circle at center,
        rgba(255, 176, 180, 0.2) 0px,
        rgba(255, 176, 180, 0.15) 1.2px,
        rgba(232, 96, 104, 0.05) 2.6px,
        rgba(232, 96, 104, 0) 4px);
}

/* the same diodes lit, shown only where the cursor is */
.led-array.is-lit {
    background-image: radial-gradient(circle at center,
        rgba(255, 214, 216, 0.95) 0px,
        rgba(255, 150, 154, 0.7) 1.2px,
        rgba(232, 96, 104, 0.28) 3px,
        rgba(232, 96, 104, 0) 6px);
    -webkit-mask-image: radial-gradient(circle 360px at var(--mx, -999px) var(--my, -999px),
        #000 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0) 78%);
    mask-image: radial-gradient(circle 360px at var(--mx, -999px) var(--my, -999px),
        #000 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0) 78%);
    opacity: 0;
    transition: opacity 0.35s ease-out;
}

/* the light the lit diodes throw onto the panel around them */
.led-halo {
    display: block;
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle 440px at var(--mx, -999px) var(--my, -999px),
        rgba(226, 72, 60, 0.22) 0%,
        rgba(183, 110, 121, 0.1) 45%,
        rgba(0, 0, 0, 0) 78%);
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.led-field.is-lit .led-array.is-lit,
.led-field.is-lit .led-halo {
    opacity: 1;
}

/* ---------- Seamless light protection ---------- */
.shield {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-48);
    width: 100%;
}

.shield-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1040px;
    position: relative;
}

.shield-detail img,
.shield-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-pill);
    border: var(--border-thin) solid rgba(232, 217, 197, 0.22);
}

/* a 16:9 source in a pill frame would letterbox, so it fills and crops */
.shield-video {
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.04);
}

.shield-compare {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--grid-gap);
    width: 100%;
}

.shield-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    flex: 1 1 0;
    max-width: 420px;
    text-align: center;
}

.shield-label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: var(--space-8) var(--space-20);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-invert);
    /* solid black rather than a translucent white — the diode field behind it
       was lifting the pill into a grey lozenge */
    background-color: var(--color-black);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
}

.shield-label.is-brand {
    color: var(--color-ink);
    background-color: var(--color-champagne-soft);
    border-color: transparent;
}

.shield-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-24);
    /* solid black behind the artwork — the translucent white left a grey box
       around the mask on the black section */
    background-color: var(--color-black);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

/* the Eva panel sits straight on the section — no plate, no frame, so the
   diode field behind it reads through instead of a black box */
.shield-col:first-child .shield-figure,
.shield-col:first-child:hover .shield-figure {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* both panels answer the pointer the same way — the diode glow behind them
   is symmetrical, but neither panel itself was reacting to a hover */
.shield-col:hover .shield-figure {
    background-color: #0B0B0B;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(-4px);
}

.shield-col:hover .shield-label {
    border-color: rgba(255, 255, 255, 0.3);
}

.shield-figure img {
    width: 78%;
    height: auto;
}

/* ==========================================================================
   15. FEATURED PRODUCT
   ========================================================================== */
.feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-64);
    width: 100%;
}

/* ---------- Gallery ---------- */
.feature-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    flex: 1 1 46%;
    position: sticky;
    top: 108px;
}

.feature-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-32);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-2xl);
    position: relative;
    overflow: hidden;
}

.feature-stage-glow {
    display: block;
    width: 78%;
    height: 62%;
    background-image: var(--gradient-glow);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.feature-stage img {
    /* the artwork is portrait, so a full-width fit made the stage very tall —
       capping the height keeps the frame in proportion with the copy beside it */
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: contain;
    position: relative;
    z-index: var(--z-base);
    filter: drop-shadow(0 24px 40px rgba(23, 18, 15, 0.14));
}

.feature-flag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: var(--tt-uppercase);
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.9);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-pill);
    position: absolute;
    top: var(--space-20);
    left: var(--space-20);
    z-index: var(--z-raised);
}

.feature-flag i {
    font-size: var(--font-14);
    color: var(--color-rose-gold);
}

/* thumbnails are forced to one aspect so mixed source crops stay tidy */
.feature-thumbs {
    display: flex;
    flex-direction: row;
    gap: var(--space-12);
    width: 100%;
}

.feature-thumb {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    padding: var(--space-8);
    background-color: var(--color-white);
    border: var(--border-base) solid var(--color-line-soft);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.feature-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: var(--radius-xs);
}

.feature-thumb:hover {
    border-color: var(--color-blush);
    transform: translateY(-3px);
}

.feature-thumb.is-active {
    border-color: var(--color-rose-gold);
}

/* ---------- Detail column ---------- */
.feature-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    flex: 1 1 54%;
}

.feature-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
}

.feature-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    padding-top: var(--space-4);
}

.feature-sku {
    font-size: var(--font-11);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-muted);
}

.feature-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
}

.feature-points li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-12);
    font-size: var(--font-15);
    line-height: var(--lh-base);
    color: var(--color-body);
}

.feature-points i {
    font-size: var(--icon-md);
    color: var(--color-rose-gold);
    flex: 0 0 auto;
}

/* ---------- Purchase card ---------- */
.purchase {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
    padding: var(--space-28);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.purchase-price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.purchase-price-now {
    /* the same face the section headings are set in */
    font-family: var(--font-heading);
    font-size: var(--font-display-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}

.purchase-price-was {
    font-size: var(--font-18);
    color: var(--color-muted);
    text-decoration: line-through;
}

.purchase-price-save {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-rose-gold-deep);
    background-color: var(--color-rose-gold-soft);
    border-radius: var(--radius-pill);
}

.purchase-stock {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-13);
    color: var(--color-body);
}

.purchase-stock i {
    font-size: var(--font-16);
    color: var(--color-success);
}

.purchase-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-12);
    width: 100%;
}

.purchase-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding-top: var(--space-12);
    border-top: var(--border-thin) solid var(--color-line-soft);
    flex-wrap: wrap;
}

.purchase-foot .text-caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
}

/* ---------- Quantity stepper ---------- */
.qty {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex: 0 0 auto;
}

.qty-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    min-height: 48px;
    font-size: var(--font-14);
    color: var(--color-ink);
    transition: background-color var(--transition-fast);
}

.qty-btn:hover {
    background-color: var(--color-bg-alt);
}

.qty-btn:disabled {
    color: var(--color-line);
    cursor: not-allowed;
}

.qty-input {
    width: 40px;
    text-align: center;
    font-size: var(--font-15);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
}

.feature-assurance {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.feature-assurance span {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-12);
    letter-spacing: var(--ls-wide);
    text-transform: var(--tt-uppercase);
    color: var(--color-muted);
}

.feature-assurance i {
    font-size: var(--icon-sm);
    color: var(--color-rose-gold);
}

/* ==========================================================================
   18. PRESS LOGOS
   ========================================================================== */
/* ---------- Spec layout: portrait beside the spectrum ---------- */
.spec-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--grid-gap);
    width: 100%;
}

.spec-figure {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    /* the frame carries the source's own 1396x1220 ratio, so the whole mask
       is shown — a stretched box would crop the sides off it */
    align-self: center;
    aspect-ratio: 1396 / 1220;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.spec-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Spectrum rail ---------- */
.spec-spectrum {
    display: block;
    flex: 1 1 auto;
    /* lets the rail shrink beside the portrait instead of forcing the row wide */
    min-width: 0;
    width: 100%;
    /* room for a label stack above and below the rail */
    padding: var(--space-16) 0 var(--space-8);
    position: relative;
}

.spec-waves {
    display: block;
    width: 100%;
    height: 200px;
    list-style: none;
    position: relative;
}

/* the rail is the real thing being measured: blue through visible red into
   the two infrared bands, which have no colour of their own */
.spec-rail {
    display: block;
    height: 10px;
    position: absolute;
    top: calc(var(--space-16) + 100px);
    left: 0;
    right: 0;
    transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background-image: linear-gradient(90deg,
        #4B6BE2 0%,
        #63C7D6 14%,
        #E8B33C 27%,
        #E2483C 34%,
        #A83232 50%,
        #8E2A2A 64%,
        #6B2020 80%,
        #4A1616 100%);
    /* the rail draws itself left to right when the section is scrolled to */
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-spectrum.is-visible .spec-rail {
    transform: translateY(-50%) scaleX(1);
}

.spec-wave {
    /* a zero-width anchor pinned at its own nanometre position */
    width: 0;
    position: absolute;
    left: var(--x);
    top: 50%;
}

.spec-wave-dot {
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
    /* each dot lands after the rail has drawn past its position */
    transform: translate(-50%, -50%) scale(0);
    background-color: var(--tone);
    /* the ring separates the dot from the rail beneath it */
    border: var(--border-base) solid var(--color-white);
    border-radius: var(--radius-circle);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spec-spectrum.is-visible .spec-wave-dot {
    transform: translate(-50%, -50%) scale(1);
}

/* a soft halo in the wavelength's own colour, breathing once landed */
.spec-wave-dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--radius-circle);
    background-color: var(--tone);
    opacity: 0;
}

.spec-spectrum.is-visible .spec-wave-dot::after {
    animation: specPulse 3.2s ease-in-out infinite;
}

@keyframes specPulse {
    0%, 100% { opacity: 0; transform: scale(0.7); }
    50% { opacity: 0.22; transform: scale(1); }
}

.spec-wave-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 148px;
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.spec-spectrum.is-visible .spec-wave-label {
    opacity: 1;
}

/* a hairline from the label back down to its dot */
.spec-wave-label::after {
    content: "";
    width: var(--border-thin);
    height: 26px;
    position: absolute;
    left: 50%;
    background-color: rgba(23, 18, 15, 0.18);
}

/* odd markers hang above the rail, even ones below — 590 and 630 sit only
   6% apart, and staggering is what keeps their labels off each other */
.spec-wave:nth-child(odd) .spec-wave-label {
    bottom: 34px;
}

.spec-wave:nth-child(odd) .spec-wave-label::after {
    top: 100%;
}

.spec-wave:nth-child(even) .spec-wave-label {
    top: 34px;
    flex-direction: column-reverse;
}

.spec-wave:nth-child(even) .spec-wave-label::after {
    bottom: 100%;
}

/* the outermost labels align to their dot instead of centring on it, or they
   would hang off the ends of the rail */
.spec-wave:first-child .spec-wave-label {
    transform: translateX(-12px);
    text-align: left;
}

.spec-wave:first-child .spec-wave-label::after {
    left: 12px;
}

.spec-wave:last-child .spec-wave-label {
    transform: translateX(calc(-100% + 12px));
    text-align: right;
}

.spec-wave:last-child .spec-wave-label::after {
    left: auto;
    right: 12px;
}


/* each marker waits for the rail to reach its own position */
.spec-spectrum.is-visible .spec-wave:nth-child(1) .spec-wave-dot,
.spec-spectrum.is-visible .spec-wave:nth-child(1) .spec-wave-label {
    transition-delay: 0.30s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(1) .spec-wave-dot::after {
    animation-delay: 0.70s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(2) .spec-wave-dot,
.spec-spectrum.is-visible .spec-wave:nth-child(2) .spec-wave-label {
    transition-delay: 0.55s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(2) .spec-wave-dot::after {
    animation-delay: 0.95s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(3) .spec-wave-dot,
.spec-spectrum.is-visible .spec-wave:nth-child(3) .spec-wave-label {
    transition-delay: 0.62s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(3) .spec-wave-dot::after {
    animation-delay: 1.02s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(4) .spec-wave-dot,
.spec-spectrum.is-visible .spec-wave:nth-child(4) .spec-wave-label {
    transition-delay: 0.85s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(4) .spec-wave-dot::after {
    animation-delay: 1.25s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(5) .spec-wave-dot,
.spec-spectrum.is-visible .spec-wave:nth-child(5) .spec-wave-label {
    transition-delay: 1.05s;
}

.spec-spectrum.is-visible .spec-wave:nth-child(5) .spec-wave-dot::after {
    animation-delay: 1.45s;
}

.spec-wave-nm {
    font-family: var(--font-heading);
    font-size: var(--font-display-md);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}

.spec-wave-nm i {
    font-size: var(--font-14);
    font-style: normal;
    color: var(--color-body);
}

.spec-wave-name {
    font-size: var(--font-11);
    letter-spacing: var(--ls-wider);
    text-transform: var(--tt-uppercase);
    color: var(--color-body);
}

/* ---------- Axis + band annotations ---------- */
.spec-axis {
    display: block;
    width: 100%;
    height: 22px;
    position: relative;
}

.spec-tick {
    display: block;
    position: absolute;
    left: var(--x);
    top: 0;
    transform: translateX(-50%);
    padding-top: var(--space-8);
    font-size: var(--font-11);
    letter-spacing: var(--ls-wide);
    color: rgba(23, 18, 15, 0.42);
    white-space: nowrap;
}

.spec-tick::before {
    content: "";
    width: var(--border-thin);
    height: 6px;
    position: absolute;
    left: 50%;
    top: 0;
    background-color: rgba(23, 18, 15, 0.2);
}

/* the first and last ticks align inside the rail instead of centring */
.spec-tick:first-child {
    transform: translateX(0);
}

.spec-tick:first-child::before {
    left: 1px;
}

.spec-tick.is-end {
    transform: translateX(-100%);
}

.spec-tick.is-end::before {
    left: auto;
    right: 1px;
}

/* which half of the rail is which — the part the rail cannot say by itself */
.spec-bands {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: var(--space-12);
    gap: var(--space-12);
}

.spec-band {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-8);
    font-size: var(--font-12);
    color: var(--color-body);
    border-top: var(--border-thin) solid rgba(23, 18, 15, 0.16);
}

/* the split lands at 700nm, where visible light gives way to infrared */
.spec-band.is-visible-light {
    flex: 0 0 42.8%;
}

.spec-band.is-infrared {
    flex: 1 1 auto;
}

/* ==========================================================================
   19. REVIEWS / TESTIMONIALS
   ========================================================================== */
.review-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
    padding: var(--space-28) var(--space-40);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-pill);
    align-self: center;
}

.review-summary-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.review-summary-score .stat-value {
    font-size: var(--font-display-md);
}

.review-summary-divider {
    display: block;
    width: var(--border-thin);
    height: 40px;
    background-color: var(--color-line);
}

.review-avatars {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.review-avatars img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    border: var(--border-base) solid var(--color-white);
    object-fit: cover;
}

.review-avatars img:not(:first-child) {
    transform: translateX(-12px);
}

.review-avatars img:nth-child(3) {
    transform: translateX(-24px);
}

.review-avatars img:nth-child(4) {
    transform: translateX(-36px);
}

/* ---------- Two-column panel: pinned aside + stacked cards ---------- */
.duo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-80);
    width: 100%;
}

.duo-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    flex: 1 1 38%;
    position: sticky;
    top: 108px;
}

.duo-score {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-20);
    padding: var(--space-20) var(--space-24);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-lg);
}

.duo-score-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-right: var(--space-20);
    border-right: var(--border-thin) solid var(--color-line);
}

.duo-score-value .stat-value {
    font-size: var(--font-display-md);
}

.duo-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding-top: var(--space-8);
}

.duo-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    flex: 1 1 62%;
}

/* ---------- Slider ---------- */
.slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    width: 100%;
}

/* the Instagram strip has no lifted hover state, so it needs none of the
   shadow room the review cards do */
#instagram .slider-viewport {
    padding-block: 0;
    margin-block: 0;
}

.slider-viewport {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* The track has to be clipped horizontally, and that clip cuts the hover
       shadow (0 24px 64px) top and bottom too. The padding gives the shadow
       its full reach inside the clip; the negative margins take that space
       back out of the layout so nothing moves. */
    padding: 44px 0 92px;
    margin-block: -28px -68px;
    overflow: hidden;
}

.slider-track {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap);
    width: 100%;
    transition: transform var(--transition-slow);
}

/* every direct child of a track shows three-up by default */
.slider-track > * {
    flex: 0 0 calc((100% - (var(--grid-gap) * 2)) / 3);
}

.review-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-20);
    flex-wrap: wrap;
}

.review-heading i {
    font-size: var(--icon-lg);
    color: var(--color-rose-gold);
}

/* ---------- Review card: image left, testimony right ---------- */
.review-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: var(--space-10);
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.review-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.review-media {
    display: flex;
    flex-direction: column;
    flex: 0 0 34%;
    /* the portraits are tall (460x760); left free they, not the text, set the
       card height — the ratio caps them and the image crops instead */
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.review-body {
    display: flex;
    flex-direction: column;
    /* the photo sets the card's height, so the text sits centred in what is
       left rather than stacking from the top */
    justify-content: center;
    gap: var(--space-8);
    flex: 1 1 auto;
    padding: var(--space-20) var(--space-20) var(--space-20) var(--space-24);
}

.review-title {
    font-family: var(--font-body);
    font-size: var(--font-16);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-none);
    color: var(--color-ink);
}

.review-text {
    font-size: var(--font-16);
    line-height: var(--lh-relaxed);
    color: var(--color-body);
    /* must not shrink, or the clamped lines get squeezed and cut mid-quote */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-name {
    font-size: var(--font-14);
    font-weight: var(--fw-medium);
    color: var(--color-ink);
    padding-top: var(--space-4);
    padding-bottom: var(--space-12);
    border-bottom: var(--border-thin) solid var(--color-line-soft);
}

.review-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    padding-top: var(--space-8);
}

.review-product-thumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: var(--space-4);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
    overflow: hidden;
}

.review-product-thumb img {
    width: 100%;
    height: auto;
}

.review-product-name {
    font-size: var(--font-14);
    color: var(--color-ink-soft);
}

/* round white controls, as in the reference */
.btn-icon.is-round {
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.btn-icon.is-round:hover {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

/* ---------- Instagram tile ---------- */
.ig-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition-base);
}

.ig-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ig-card-veil {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--icon-xl);
    color: var(--color-white);
    background-color: rgba(23, 18, 15, 0.32);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.ig-card:hover {
    transform: translateY(-4px);
}

.ig-card:hover .ig-card-veil,
.ig-card:focus-visible .ig-card-veil {
    opacity: 1;
}

/* ---------- Marquee variant: full-bleed, continuously scrolling ---------- */
.slider.is-marquee {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.slider.is-marquee .slider-viewport {
    padding-left: var(--gutter-width);
    padding-right: var(--gutter-width);
}

.slider.is-marquee .slider-track {
    /* JS drives the transform every frame, so no easing here */
    transition: none;
    width: auto;
}

.slider.is-marquee .slider-track > * {
    flex: 0 0 340px;
}

.slider.is-marquee[data-marquee-direction] .slider-track > * {
    flex: 0 0 380px;
}

/* ---------- Wide variant: full-bleed but still stepped ---------- */
.slider.is-wide {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* .reveal animates transform and would wipe out the -50% centring above */
.slider.is-marquee.reveal,
.slider.is-wide.reveal {
    transform: translateX(-50%) translateY(28px);
}

.slider.is-marquee.reveal.is-visible,
.slider.is-wide.reveal.is-visible {
    transform: translateX(-50%) translateY(0);
}

.slider.is-wide .slider-viewport {
    padding-left: var(--gutter-width);
    padding-right: var(--gutter-width);
}

.slider-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
}

.slider-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-16);
}

.slider-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background-color: var(--color-line);
    transition: all var(--transition-base);
}

.slider-dot.is-active {
    width: 28px;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-dark);
}

/* ==========================================================================
   20. COMPARISON TABLE
   ========================================================================== */
/* image column beside the table */
.compare-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--grid-gap);
    width: 100%;
}

.compare-aside {
    display: flex;
    flex-direction: column;
    /* holds a third of the row; the table takes the rest */
    flex: 0 0 32%;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.compare-aside img {
    width: 100%;
    height: 100%;
    /* the row's height is set by the table, so the photo crops to match */
    object-fit: cover;
    object-position: center;
}

.compare-table-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.compare-table {
    width: 100%;
    /* The wrap stretches to match the photograph beside it, so without this
       the table sat at the top of a taller card — 487px of table in a 614px
       card, the difference showing as empty white under the last row. */
    flex: 1 1 auto;
    border-collapse: separate;
    border-spacing: 0;
}

/* ---------- Column heads: image, name, note ---------- */
.compare-table thead th {
    padding: 0 var(--space-16) var(--space-20);
    text-align: center;
    vertical-align: bottom;
    background-color: transparent;
    border: none;
}

.compare-thumb {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 0;
    /* no frame — the images sit straight on the card */
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
}

.compare-thumb img {
    width: 100%;
    height: 100%;
    /* the product shots are portrait; cover was cropping the mask out of a
       square frame, so the whole image is shown inside it instead */
    object-fit: contain;
    /* the two competitor shots carry a baked #F3F3F3 background — multiply
       drops that near-white to nothing against the card behind it */
    mix-blend-mode: multiply;
    border-radius: var(--radius-lg);
}

.compare-name {
    display: block;
    padding-top: var(--space-12);
    font-size: var(--font-14);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: var(--tt-uppercase);
    color: var(--color-muted);
}

.compare-note {
    display: block;
    padding-top: var(--space-4);
    font-size: var(--font-11);
    color: var(--color-muted);
}

.compare-table thead th.is-brand .compare-name {
    color: var(--color-rose-gold-deep);
}

.compare-table thead th.is-brand .compare-note {
    color: var(--color-rose-gold);
}


/* ---------- Grid ----------
   Hairline rules between rows only. Vertical lines in every cell made this
   read as a spreadsheet; the columns are held by alignment instead. */
.compare-table tbody th,
.compare-table tbody td {
    padding: var(--space-16) var(--space-20);
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: none;
    border-top: var(--border-thin) solid rgba(23, 18, 15, 0.08);
}

.compare-table tbody tr:first-child th,
.compare-table tbody tr:first-child td {
    border-top: none;
}

/* the whole grid sits on one white card */
.compare-table-wrap {
    background-color: var(--color-white);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.06);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 50px rgba(23, 18, 15, 0.06);
    padding: var(--space-12) var(--space-20) var(--space-16);
}

/* ---------- Row labels ---------- */
.compare-table tbody th {
    width: 30%;
    font-family: var(--font-body);
    font-size: var(--font-14);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-none);
    text-transform: var(--tt-none);
    text-align: left;
    color: var(--color-ink-soft);
    background-color: transparent;
}

/* ---------- The Eva column, raised out of the table ---------- */
.compare-table .is-brand-col {
    background-color: rgba(58, 32, 41, 0.035);
}

.compare-table thead th.is-brand .compare-thumb {
    width: 84px;
    height: 94px;
}

.compare-table thead th.is-brand {
    padding-top: var(--space-20);
    background-color: rgba(58, 32, 41, 0.035);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.compare-table tbody tr:last-child .is-brand-col {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* a single plum keyline under the column head, rather than a box around it */
.compare-table thead th.is-brand .compare-name {
    color: var(--color-ink);
}

.compare-table thead th.is-brand .compare-note {
    color: var(--color-rose-gold-deep);
}

/* ---------- Marks ---------- */
.mark {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: var(--font-13);
    border: var(--border-thin) solid currentColor;
    border-radius: var(--radius-circle);
}

/* a yes in the Eva column is filled; elsewhere it is only outlined, so the
   column reads down the table at a glance */
.mark.is-yes {
    color: var(--color-rose-gold);
}

.is-brand-col .mark.is-yes {
    color: var(--color-white);
    background-color: var(--color-rose-gold);
    border-color: transparent;
}

.mark.is-no {
    color: rgba(23, 18, 15, 0.16);
}

.mark-price {
    font-size: var(--font-16);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--color-muted);
}

.is-brand-col .mark-price {
    color: var(--color-ink);
}

/* ==========================================================================
   21. FAQ ACCORDION
   ========================================================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
}

.faq-item {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.faq-item.is-open {
    border-color: var(--color-champagne);
    box-shadow: var(--shadow-sm);
}

.faq-question {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    width: 100%;
    padding: var(--space-24) var(--space-28);
    text-align: left;
    /* the body sans reads better than the display serif at accordion size,
       and separates these from the serif heading beside them */
    font-family: var(--font-body);
    font-size: var(--font-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-ink);
    transition: color var(--transition-base);
}

.faq-question:hover {
    color: var(--color-rose-gold);
}

.faq-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: var(--font-16);
    color: var(--color-rose-gold);
    background-color: var(--color-rose-gold-soft);
    border-radius: var(--radius-circle);
    flex: 0 0 auto;
    transition: all var(--transition-base);
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.faq-answer {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.faq-answer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: 0 var(--space-28) var(--space-28);
}

/* ==========================================================================
   22. CUSTOM SERVICE — RADIAL ORBIT
   ========================================================================== */
.orbit {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.orbit-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 820px;
    aspect-ratio: 1 / 1;
    position: relative;
}

/* ---------- Concentric guide rings ---------- */
.orbit-ring {
    display: block;
    border: var(--border-thin) solid var(--color-champagne);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit-ring.is-outer {
    width: 100%;
    height: 100%;
    border-color: var(--color-rose-gold);
    opacity: 0.24;
}

.orbit-ring.is-inner {
    width: 72%;
    height: 72%;
    border-color: var(--color-rose-gold);
    opacity: 0.4;
}

/* ---------- Expanding waves ---------- */
.orbit-wave {
    display: block;
    width: 100%;
    height: 100%;
    border: var(--border-thin) solid var(--color-rose-gold);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
    animation: orbitWave 7.5s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
    pointer-events: none;
}

.orbit-wave.is-delay-1 {
    animation-delay: 2.5s;
}

.orbit-wave.is-delay-2 {
    animation-delay: 5s;
}

/* the inner guide ring breathes gently with the waves */
.orbit-ring.is-inner {
    animation: orbitBreathe 7.5s ease-in-out infinite;
}

@keyframes orbitWave {
    0% {
        transform: translate(-50%, -50%) scale(0.42);
        opacity: 0;
    }
    12% {
        opacity: 0.5;
    }
    70% {
        opacity: 0.12;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.04);
        opacity: 0;
    }
}

@keyframes orbitBreathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.035);
        opacity: 0.62;
    }
}

/* ---------- Centre product ---------- */
.orbit-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-raised);
}

.orbit-core img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(23, 18, 15, 0.18));
}

/* ---------- Satellite nodes ---------- */
.orbit-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: var(--z-raised);
}

.orbit-node-media {
    display: flex;
    flex-direction: row;
    width: 116px;
    height: 116px;
    background-color: var(--color-white);
    border: var(--border-base) solid var(--color-white);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.orbit-node-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orbit-node-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-16);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-ink);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-champagne);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    position: absolute;
    top: calc(100% - 14px);
}

.orbit-node:hover .orbit-node-media {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-champagne);
}

.orbit-node:hover .orbit-node-label {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

/* the wrapper exists only so the tiles can become a carousel on a phone —
   display:contents keeps it out of the way of the spoke positioning here */
.orbit-nodes {
    display: contents;
}

/* arrows for the CSS scroll-snap carousels; shown only where they exist */
.mcarousel-nav {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    width: 100%;
}

.mcarousel-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: var(--font-16);
    color: var(--color-ink);
    background-color: var(--color-white);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.12);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.mcarousel-btn:hover {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-white);
}

.mcarousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Spec nodes: glass tiles riding the orbit ---------- */
/* Each tile is pinned to the centre of the stage and pushed out along its own
   spoke: rotate to its angle, translate out by the radius, then rotate back so
   the tile itself stays upright. --rot is written from the scroll position, so
   turning the whole ring is one property on the stage. */
.orbit-node.is-spec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    width: 152px;
    padding: var(--space-16);
    background-color: rgba(255, 255, 255, 0.72);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.07);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    left: 50%;
    top: 50%;
    --radius: 324px;
    --angle: calc(var(--base, 0deg) + var(--rot, 0deg));
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateX(var(--radius))
        rotate(calc(-1 * var(--angle)))
        rotate(var(--tilt, 0deg))
        scale(var(--pop, 1));
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

/* five spokes, 72 degrees apart, the first one at the top */
/* six nodes, so 360/6 = 60deg apart — five used to sit 72deg apart */
.orbit-node.is-spec-1 { --base: -90deg; --tilt: -3deg; }
.orbit-node.is-spec-2 { --base: -30deg; --tilt: 2.5deg; }
.orbit-node.is-spec-3 { --base: 30deg; --tilt: -2deg; }
.orbit-node.is-spec-4 { --base: 90deg; --tilt: 3deg; }
.orbit-node.is-spec-5 { --base: 150deg; --tilt: -2.5deg; }
.orbit-node.is-spec-6 { --base: 210deg; --tilt: 2deg; }

/* hovering straightens the tile and brings it forward */
.orbit-node.is-spec:hover {
    background-color: var(--color-white);
    border-color: rgba(58, 32, 41, 0.35);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-sticky);
    --tilt: 0deg;
    --pop: 1.06;
}

.orbit-node-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: var(--font-16);
    color: var(--color-rose-gold);
    background-color: var(--color-rose-gold-soft);
    border-radius: var(--radius-circle);
    transition: all var(--transition-base);
}

.orbit-node.is-spec:hover .orbit-node-icon {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
}

.orbit-node-value {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-family: var(--font-heading);
    font-size: var(--font-display-sm);
    line-height: var(--lh-tight);
    color: var(--color-ink);
}

.orbit-node-value span {
    font-family: var(--font-body);
    font-size: var(--font-11);
    line-height: var(--lh-base);
    color: var(--color-body);
}

.orbit-node.is-spec .orbit-node-label {
    padding: 0;
    font-size: var(--font-11);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-none);
    line-height: var(--lh-snug);
    color: var(--color-body);
    background-color: transparent;
    border: none;
    box-shadow: none;
    white-space: normal;
    text-align: left;
    position: static;
}

.orbit-node.is-spec:hover .orbit-node-label {
    background-image: none;
    color: var(--color-body);
}

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* the wordmark runs to the very bottom edge, so it owns the end padding */
    padding: 0;
    background-color: var(--color-black);
    overflow: hidden;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 100%;
    max-width: var(--container-width);
    padding: var(--space-80) var(--gutter-width) var(--space-20);
}

.footer-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-80);
    width: 100%;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    flex: 0 1 340px;
    max-width: 340px;
}

.footer-brand p {
    color: rgba(239, 231, 222, 0.72);
    font-size: var(--font-14);
    line-height: var(--lh-snug);
}

.footer-socials {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-16);
    flex: 0 0 auto;
}

.footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--font-20);
    color: var(--color-rose-gold-soft);
    transition: all var(--transition-base);
}

.footer-social:hover {
    color: var(--color-white);
    transform: translateY(-3px);
}

.footer-columns {
    display: flex;
    flex-direction: row;
    /* one even gap between every block in the row — pinned to the end, these
       columns left a 260px void between the brand block and Explore */
    gap: var(--space-80);
    flex: 1 1 auto;
    justify-content: flex-start;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 150px;
}

.footer-column-title {
    font-family: var(--font-heading);
    font-size: var(--font-20);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-none);
    text-transform: var(--tt-none);
    color: var(--color-rose-gold-soft);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.footer-links a {
    font-size: var(--font-14);
    color: rgba(239, 231, 222, 0.66);
}

.footer-links a:hover {
    color: var(--color-champagne);
}

.footer-contact-item {
    display: block;
    font-size: var(--font-14);
    color: rgba(239, 231, 222, 0.66);
}


/* ---------- Oversized wordmark ---------- */
.footer-wordmark {
    display: block;
    width: 100%;
    padding: 0 var(--space-16);
    /* the glyphs carry their own optical baseline, so no bottom padding */
    line-height: 0;
}

.footer-wordmark svg {
    display: block;
    width: 100%;
    height: auto;
}

.footer-wordmark text {
    font-family: var(--font-heading);
    /* the size at which the caps' own width is the viewBox's 1000 units, so
       textLength only nudges them — the letters stay tightly set */
    font-size: 204px;
    fill: var(--color-rose-gold-soft);
}

/* ---------- Scroll reveal: the page slides up off a pinned footer ---------- */
/* JS adds these only when the footer actually fits in the viewport */
.site-footer.is-pinned {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: var(--z-base);
}

#main.has-pinned-footer {
    position: relative;
    z-index: var(--z-raised);
    /* opaque, otherwise the pinned footer shows through the page */
    background-color: var(--color-bg);
}

/* ==========================================================================
   23B. NEWSLETTER — sticky tab + modal
   ========================================================================== */
/* ---------- The tab that hangs off the left edge ---------- */
.signup-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-20) var(--space-12);
    font-size: var(--font-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-white);
    background-color: var(--color-bg-dark);
    border: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: 0 10px 30px rgba(23, 18, 15, 0.22);
    cursor: pointer;
    /* stood on its end against the left edge. writing-mode turns the text
       rather than a rotate, so the box stays where it is put */
    writing-mode: vertical-rl;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-sticky);
    transition: background-color var(--transition-base), padding var(--transition-base);
}

.signup-tab:hover {
    background-color: var(--color-bg-dark);
    padding-right: var(--space-16);
}

.signup-tab i {
    font-size: var(--font-16);
}

/* ---------- The modal ---------- */
.signup {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--space-24);
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.signup.is-open {
    opacity: 1;
    visibility: visible;
}

.signup-veil {
    position: absolute;
    inset: 0;
    background-color: rgba(23, 18, 15, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.signup-panel {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 940px;
    background-color: var(--color-pearl);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 120px rgba(23, 18, 15, 0.35);
    overflow: hidden;
    position: relative;
    /* rises into place rather than appearing */
    transform: translateY(24px) scale(0.98);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.signup.is-open .signup-panel {
    transform: translateY(0) scale(1);
}

.signup-close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: var(--font-18);
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.8);
    border: var(--border-thin) solid rgba(23, 18, 15, 0.1);
    border-radius: var(--radius-circle);
    cursor: pointer;
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    z-index: var(--z-raised);
    transition: all var(--transition-base);
}

.signup-close:hover {
    background-color: var(--color-ink);
    color: var(--color-white);
    transform: rotate(90deg);
}

/* ---------- Left half: the mask, lit ---------- */
.signup-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 42%;
    padding: var(--space-40);
    background-image: linear-gradient(165deg, #FBDDE7 0%, #FDEAF0 45%, #FFF8FA 100%);
    position: relative;
    overflow: hidden;
}

.signup-visual img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: var(--z-raised);
}

/* the light the mask is throwing, breathing behind it */
.signup-visual-glow {
    display: block;
    width: 78%;
    aspect-ratio: 1 / 1;
    background-image: radial-gradient(circle at center,
        rgba(226, 72, 60, 0.32) 0%,
        rgba(240, 150, 150, 0.18) 45%,
        rgba(255, 255, 255, 0) 72%);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: signupGlow 5s ease-in-out infinite;
}

@keyframes signupGlow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}



/* ---------- Right half: the offer ---------- */
.signup-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    flex: 1 1 auto;
    padding: var(--space-48) var(--space-40);
}

.signup-body h3 {
    line-height: var(--lh-tight);
}

.signup-body p {
    font-size: var(--font-14);
    line-height: var(--lh-relaxed);
    color: var(--color-body);
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    width: 100%;
    padding-top: var(--space-8);
}

/* the field and its button share one pill */
.signup-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-20);
    background-color: var(--color-white);
    border: var(--border-thin) solid var(--color-line);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.signup-field:focus-within {
    border-color: var(--color-rose-gold);
    box-shadow: 0 0 0 4px rgba(58, 32, 41, 0.14);
}

.signup-field.is-invalid {
    border-color: var(--color-rose-gold-deep);
    box-shadow: 0 0 0 4px rgba(150, 84, 94, 0.16);
}

.signup-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--font-14);
    color: var(--color-ink);
    background: transparent;
    border: none;
    outline: none;
}

.signup-input::placeholder {
    color: var(--color-muted);
}

.signup-submit {
    flex: 0 0 auto;
    padding: var(--space-12) var(--space-20);
    font-size: var(--font-12);
    white-space: nowrap;
}

.signup-note {
    font-size: var(--font-11);
    color: var(--color-muted);
}

.signup-note.is-error {
    color: var(--color-rose-gold-deep);
}

/* ==========================================================================
   24. BACK TO TOP
   ========================================================================== */
.back-to-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: var(--font-20);
    color: var(--color-white);
    background-color: var(--color-bg-dark);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-md);
    position: fixed;
    right: var(--space-32);
    bottom: var(--space-32);
    z-index: var(--z-sticky);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all var(--transition-base);
}

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

.back-to-top:hover {
    background-color: var(--color-bg-dark);
}

/* ==========================================================================
   25. SCROLL REVEAL + KEYFRAMES
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

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

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

@keyframes floatY {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.06);
    }
}

.is-pulsing {
    animation: pulseGlow 4s ease-in-out infinite;
}

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

    .reveal,
    .hero-anim {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   26. ACCESSIBILITY HELPERS
   ========================================================================== */
.visually-hidden {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    position: absolute;
}

.skip-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--space-12) var(--space-20);
    font-size: var(--font-12);
    letter-spacing: var(--ls-wide);
    text-transform: var(--tt-uppercase);
    color: var(--color-white);
    background-color: var(--color-bg-dark);
    border-radius: var(--radius-pill);
    position: absolute;
    top: var(--space-12);
    left: var(--space-12);
    z-index: var(--z-overlay);
    transform: translateY(-200%);
    transition: transform var(--transition-base);
}

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