:root {
  color-scheme: light;
  --experience-font: Manrope, Arial, sans-serif;
  --xp-canvas: #f6eeee;
  --xp-surface: #ffffff;
  --xp-ink: #55252a;
  --xp-muted: #675054;
  --xp-line: #dfcdd0;
  --xp-dark: #79272d;
  --xp-on-dark: #fffafa;
  --xp-dark-muted: #f0d8da;
  --xp-panel: #a85b62;
  --xp-rose: #fae9eb;
  --xp-subtle: #efe0e2;
  --xp-image-scrim: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .82));
  --xp-shadow: 0 20px 50px rgb(0 0 0 / .07);
  --paper: #f7f5f0;
  --paper-deep: #eeebe3;
  --paper-line: #d7d4cc;
  --paper-muted: #d5d2ca;
  --ink: #55252a;
  --ink-soft: #675054;
  --ink-line: #a85b62;
  --font-editorial: var(--experience-font);

  --background: #fbf7f6;
  --foreground: #55252a;
  --surface: #ffffff;
  --surface-raised: #fbf7f6;
  --surface-muted: #efe0e2;
  --muted-foreground: #675054;
  --subtle-foreground: #795e63;
  --benefit-unavailable-on-paper: #6b6c72;
  --benefit-unavailable: var(--benefit-unavailable-on-paper);
  --border: #dfcdd0;
  --border-strong: #98757b;

  --accent: #79272d;
  --accent-hover: #5e1d22;
  --accent-soft: #f2dfe2;
  --accent-ink: #ffffff;
  --portal-accent-foreground: var(--accent);

  --hero-background: #061820;
  --hero-foreground: #f8fbfa;
  --hero-muted: #d7e1df;
  --hero-overlay: rgb(3 18 24 / 0.74);
  --hero-overlay-soft: rgb(3 18 24 / 0.34);
  --hero-overlay-clear: rgb(3 18 24 / 0);
  --hero-copy-surface: rgb(4 22 29 / 0.56);
  --hero-border: rgb(255 255 255 / 0.28);

  --success: #246448;
  --success-soft: #e1f1e9;
  --error: #a51e2d;
  --error-soft: #f9e5e8;
  --focus-ring: rgb(121 39 45 / 0.3);
  --shadow-soft: 0 1.25rem 3.75rem rgb(0 0 0 / 0.07);
  --shadow-raised: 0 1.75rem 4.5rem rgb(0 0 0 / 0.11);
  --shadow-floating: 0 2rem 5rem rgb(0 0 0 / 0.16);
  --surface-glass: rgb(255 255 255 / 0.82);
  --surface-glass-strong: rgb(255 255 255 / 0.94);
  --product-glass: rgb(255 255 255 / 0.68);
  --product-glass-hover: rgb(255 255 255 / 0.76);
  --glass-highlight: rgb(255 255 255 / 0.78);
  --image-shade: linear-gradient(90deg, rgb(0 0 0 / 0.34), rgb(0 0 0 / 0.04) 66%, rgb(0 0 0 / 0));
  --transparent: rgb(255 255 255 / 0);

  --font-display: var(--experience-font);
  --font-body: var(--experience-font);
  --font-label: var(--experience-font);

  --page-gutter: clamp(1.25rem, 5vw, 4.75rem);
  --content-width: 76rem;
  --reading-width: 43rem;
  --section-space: clamp(5.5rem, 10vw, 9.5rem);
  --header-height: 4rem;
  --radius-small: 0.75rem;
  --radius-medium: 1.25rem;
  --radius-large: 2rem;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shared component system. Existing cinematic tokens remain independent. */
  --ds-brand: var(--accent);
  --ds-brand-hover: var(--accent-hover);
  --ds-ink: var(--xp-ink);
  --ds-muted: var(--xp-muted);
  --ds-paper: var(--xp-surface);
  --ds-wash: var(--background);
  --ds-tint: var(--xp-rose);
  --ds-line: var(--xp-line);
  --ds-inverse: var(--xp-on-dark);
  --ds-inverse-muted: var(--xp-dark-muted);
  --ds-inverse-line: var(--xp-panel);
  --ds-clear: transparent;
  --ds-shadow: 0 1rem 3rem rgb(85 37 42 / .09);
  --ds-shadow-hover: 0 1.25rem 3.5rem rgb(85 37 42 / .14);
  --ds-focus: 0 0 0 .25rem var(--accent-soft);
  --ds-border: 1px;
  --ds-focus-width: 3px;
  --ds-focus-offset: 4px;
  --ds-radius-sm: .5rem;
  --ds-radius: 1rem;
  --ds-radius-lg: 1.5rem;
  --ds-pill: var(--radius-pill);
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-section: clamp(3.5rem, 6vw, 6rem);
  --ds-gutter: clamp(1.25rem, 4vw, 4rem);
  --ds-width: 80rem;
  --ds-gap: clamp(1.5rem, 4vw, 4rem);
  --ds-display: clamp(2.2rem, 3.9vw, 3.65rem);
  --ds-heading: clamp(1.8rem, 2.7vw, 2.7rem);
  --ds-title: clamp(1.25rem, 1.6vw, 1.55rem);
  --ds-body: 1rem;
  --ds-lead: 1.1rem;
  --ds-small: .9rem;
  --ds-caption: .8rem;
  --ds-weight: 600;
  --ds-weight-strong: 700;
  --ds-leading: 1.65;
  --ds-leading-heading: 1.15;
  --ds-tracking: -.025em;
  --ds-measure: 68ch;
  --ds-hero-measure: 22ch;
  --ds-icon: 1.35rem;
  --ds-icon-small: 1rem;
  --ds-icon-tile: 3rem;
  --ds-icon-large: 4rem;
  --ds-hero-height: 28rem;
  --ds-photo-height: 16rem;
  --ds-photo-small: 12rem;
  --ds-control-height: 3rem;
  --ds-control-padding: .8rem 1.2rem;
  --ds-nav-top: calc(var(--header-height) - 1px);
  --ds-scroll-offset: 10rem;
  --ds-speed: 220ms;
  --ds-speed-long: 600ms;
  --ds-ease: var(--ease-out);
  --ds-lift: -.25rem;
  --ds-image-scale: 1.04;
  --ds-image-entry: inset(0 0 8% 0);
  --ds-graphic-turn: -7deg;
  --ds-step-size: 2.75rem;
  --ds-guide-column: 16rem;
  --ds-signature-size: 5rem;
  --ds-error-size: clamp(7rem, 20vw, 16rem);
  --ds-display-bold: clamp(2.65rem, 5.4vw, 5rem);
  --ds-heading-bold: clamp(2.3rem, 4vw, 3.7rem);
  --ds-panel-title: clamp(1.6rem, 2.3vw, 2.2rem);
  --ds-stage-height: 24rem;
  --ds-flagship-height: 35rem;
  --ds-portrait-height: 29rem;
  --ds-gallery-height: 32rem;
  --ds-photo-shade: linear-gradient(0deg, rgb(45 14 19 / .96), rgb(45 14 19 / .55) 45%, rgb(45 14 19 / 0) 75%);
  --ds-panel-shadow: 0 1.5rem 4rem rgb(85 37 42 / .12);
  --ds-tall-leading: 1.04;
  --ds-open-brief: 1.45;
  --ds-plan-price: clamp(3.6rem, 5vw, 5rem);
  --ds-quiet-white: rgb(255 250 250 / .18);
  --flow-section: clamp(2rem, 4vw, 4rem);
  --flow-heading: clamp(1.7rem, 2.7vw, 2.6rem);
  --flow-display: clamp(2.3rem, 4.2vw, 4rem);
  --flow-rail-width: minmax(15rem, .38fr);
  --flow-rail-tablet: 13rem;
  --flow-screen-height: 31rem;
  --flow-screen-shadow: inset 0 0 0 .25rem var(--ds-paper), var(--ds-shadow);
  --flow-detail-height: 28rem;
  --flow-brief-height: 22rem;
  --flow-gallery-height: 19rem;
  --flow-quiet-height: 22rem;
  --flow-scroll-offset: calc(var(--header-height) + 1.5rem);
  --flow-picker-top: calc(var(--header-height) + env(safe-area-inset-top));
  --flow-mobile-chip: 10rem;
  --flow-card-turn: -2deg;
  /* Navigator cards share the established brand palette. */
  --nav-surface: var(--ds-paper);
  --nav-border: var(--ds-clear);
  --nav-icon-surface: var(--ds-clear);
  --nav-selected-icon: var(--ds-quiet-white);
  --nav-scroll-thumb: var(--border-strong);
  --nav-selected-shadow: none;
  --nav-rail-width: clamp(13rem, 20vw, 16rem);
  --nav-icon-tile: 2rem;
  --nav-mobile-icon: 1.75rem;
  --nav-card-height: 4rem;
  --nav-mobile-height: 3.25rem;
  --nav-focus-width: 2px;
  --nav-focus-offset: -4px;
  --card-stage-padding: clamp(1.25rem, 2.5vw, 1.75rem);
  --card-heading: clamp(1.65rem, 2.2vw, 2.15rem);
  --card-preview-radius: .875rem;
  --card-stage-height: 30rem;
  --hp-panel-height: var(--card-stage-height);
  --hp-panel-padding: clamp(1.25rem, 2vw, 1.5rem);
  --hp-heading: clamp(1.7rem, 2.25vw, 2.1rem);
  --about-photo-height: 26rem;
  --about-panel-padding: clamp(1.5rem, 3vw, 3rem);
  --about-statement-size: clamp(1.55rem, 2.3vw, 2.25rem);
  --about-letter-size: 3.5rem;
  --about-letter-width: 2.6rem;
  /* Visible artwork begins 136px into the unchanged 1536px PNG. */
  --footer-logo-inset: -8.85416667%;
  --page-title-size: clamp(2.25rem, 4.1vw, 3.65rem);
  --page-title-leading: 1.12;
  --page-content-width: 72rem;
  --page-content-inset: clamp(1.25rem, 5.5vw, 5.5rem);
  --page-hero-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  --navigation-font-size: .875rem;
  --navigation-font-weight: 650;
  --category-hero-height: clamp(24rem, calc(100svh - 13rem), 28rem);
  --mobile-gutter: max(clamp(1rem, 4.5vw, 1.25rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --mobile-hero-height: 40rem;
  --mobile-hero-title: clamp(2.25rem, 9.5vw, 3rem);
  --content-group-gap: var(--ds-space-4);
  --content-block-gap: var(--ds-space-6);
  --content-heading-gap: var(--ds-space-3);
  --enquiry-height: 2.75rem;
  --enquiry-padding: var(--ds-space-2) var(--ds-space-4);
  --mobile-panel-heading: 1.5rem;
  --mobile-panel-leading: 1.25;
  --mobile-content-icon: 2rem;
  --mobile-section-gap: var(--ds-space-8);
}

[data-mode="dark"] {
  color-scheme: dark;
  --background: #28191c;
  --foreground: #fffafa;
  --surface: #382126;
  --surface-raised: #48292f;
  --surface-muted: #5b343b;
  --muted-foreground: #edcfd4;
  --subtle-foreground: #d8b1b8;
  --benefit-unavailable: #c0b8bd;
  --border: #80535c;
  --border-strong: #bb929b;
  --accent-soft: #522d36;
  --portal-accent-foreground: var(--foreground);
  --success-soft: #173c2d;
  --error-soft: #421d26;
  --shadow-soft: 0 18px 48px rgb(0 0 0 / 0.22);
  --shadow-raised: 0 26px 74px rgb(0 0 0 / 0.34);
  --shadow-floating: 0 2rem 5rem rgb(0 0 0 / 0.42);
  --surface-glass: rgb(56 33 38 / 0.86);
  --surface-glass-strong: rgb(56 33 38 / 0.96);
  --product-glass: rgb(56 33 38 / 0.72);
  --product-glass-hover: rgb(56 33 38 / 0.82);
  --glass-highlight: rgb(255 255 255 / 0.18);
}

@media (max-width: 48rem) {
  :root {
    --page-gutter: var(--mobile-gutter);
    --ds-gutter: var(--mobile-gutter);
    --page-content-inset: var(--mobile-gutter);
    --card-stage-padding: var(--ds-space-4);
    --hp-panel-padding: var(--ds-space-4);
  }
}