/* ===========================================================================
   TEXSTONE — public stylesheet

   Contents
     1.  Fonts
     2.  Design tokens          <- re-skin the whole site from here
     3.  Reset and base
     4.  Typography
     5.  Layout and containers
     6.  Buttons
     7.  Header and navigation
     8.  Hero
     9.  Section furniture
    10.  Cards
    11.  Solutions
    12.  Texture rails and feature bands
    13.  Colour
    14.  Gallery and lightbox
    15.  Before and after slider
    16.  Catalogue and filters
    17.  Journal
    18.  FAQ accordion
    19.  Forms
    20.  Calls to action
    21.  Footer
    22.  Floating and mobile bar
    23.  Pagination, breadcrumbs, flash
    24.  Utilities
    25.  Motion and reduced motion
    26.  Print
   =========================================================================== */

/* -----------------------------------------------------------------  1. fonts
   Self-hosted so the site makes no third-party request on page load and the
   Content-Security-Policy can stay at font-src 'self'. Licences and swap
   instructions: /assets/fonts/LICENSES.md
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The display face. Chosen to match the TexStone wordmark on the pack: a
   heavy, high-contrast serif with ball terminals. One variable file carries
   every weight from 400 to 900. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A heavy grotesque, kept for small numeric labels such as pack sizes. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivoblack.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------  2. tokens
   Everything visual is declared here. Rebranding TEXSTONE is a rewrite of this
   block, not of the rules beneath it.
   --------------------------------------------------------------------------- */

:root {
  /* --- TEXSTONE brand palette ---------------------------------------------
     Sampled from the TexStone logo and pack artwork: a deep maroon with
     black, on warm cream, and a deep charcoal for the dark bands. Everything
     visual is declared here; rebranding is a rewrite of this block, not of
     the rules beneath it.
     ---------------------------------------------------------------------- */

  /* maroon */
  --maroon:         #7A0E22;   /* primary brand — fills, large text (logo) */
  --maroon-dark:    #6A0B1D;   /* text, primary buttons */
  --maroon-hover:   #540817;
  --maroon-bright:  #9C1B33;   /* secondary */
  --maroon-light:   #EBA8B2;   /* rose — legible on dark only (8:1 on charcoal) */
  --maroon-deep:    #2A060F;   /* the darkest band: hero, page heads, call to action */
  --champagne:      #E6C79A;   /* accent on maroon and charcoal (9.6:1 on maroon) */
  --sand-accent:    #E2CCB7;   /* soft accent */

  /* neutrals */
  --page:           #FCFAF7;   /* warm gallery white */
  --ivory:          #F6F1E9;   /* soft ivory — main background band */
  --bone:           #EBE3D8;   /* limestone — soft section */
  --warm-white:     #FFFDF9;
  --white:          #FFFFFF;
  --sand:           #E3DCD2;   /* warm beige — borders and rules */
  --stone:          #E2CCB7;
  --taupe:          #92877D;   /* stone grey — decorative, never small text */
  --graphite:       #6B625B;
  --charcoal:       #26221F;   /* deep charcoal */
  --ink:            #26221F;

  /* --- semantic roles ----------------------------------------------------- */
  --bg:             var(--page);
  --bg-alt:         var(--ivory);
  --bg-deep:        var(--bone);
  --bg-dark:        var(--charcoal);
  --surface:        var(--white);

  --text:           var(--charcoal);

  /* Two text tiers, not three. A third, lighter tone cannot clear AA on a
     background this pale, so the smallest labels take their hierarchy from
     size, weight and letter-spacing instead of from lightness. */
  --text-muted:     #6B625B;
  --text-faint:     #6B625B;

  --text-invert:    #FFFFFF;
  --text-invert-dim: #D8CEC4;

  --border:         var(--sand);
  --border-strong:  #D2BCA2;
  --border-control: #957B66;   /* form edges — clears 3:1 as a control boundary */
  --border-dark:    rgba(255, 253, 249, 0.16);

  /* Maroon as text uses the dark step, which clears AA on every light band;
     the logo maroon is for fills, icons and anything set large. */
  --accent:         var(--maroon-dark);
  --accent-fill:    var(--maroon-dark);
  --accent-hover:   var(--maroon-hover);
  --accent-on-dark: var(--champagne);

  --success:        #1F7A44;
  --success-soft:   #E4F2E9;
  /* Your soft red, kept for fills and borders. Small red text uses the
     darker step: #C94B45 reaches only 3.8:1 on the beige section, and the
     required-field asterisk is small text that carries meaning. */
  --danger:         #AE372F;
  --danger-fill:    #C94B45;
  --danger-soft:    #FBEAE9;
  --notice:         #6A0B1D;
  --notice-soft:    #F6E9D8;

  /* WhatsApp keeps its own green. White on it reaches only 2:1, so the label
     is set in the deep charcoal instead, which reaches 8:1. */
  --whatsapp:       #25D366;
  --whatsapp-hover: #1EBA59;
  --whatsapp-ink:   #17301F;

  /* --- typography --------------------------------------------------------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  /* Headings share the TexStone wordmark's heavy serif, so the page and the
     pack read as one brand. Labels and numerals keep a heavy grotesque. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-brand:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-label:   'Archivo Black', 'Arial Black', sans-serif;

  /* A deep-to-bright maroon sweep, for large display type and fills. Every
     stop clears 7:1 on the light bands. */
  --maroon-sweep: linear-gradient(100deg, #4F0614 0%, #7A0E22 55%, #9C1B33 100%);
  /* A champagne sweep, for display type on maroon and dark photography. */
  --maroon-sweep-light: linear-gradient(100deg, #F3E2C4 0%, #E6C79A 50%, #D9B67E 100%);
  /* A fine champagne rule that separates the maroon field from what follows:
     under the hero, under every page head and along the top of the footer. */
  --edge-line: linear-gradient(90deg, rgba(230, 199, 154, 0) 0%, rgba(230, 199, 154, 0.55) 18%, rgba(230, 199, 154, 0.55) 82%, rgba(230, 199, 154, 0) 100%);
  --edge-line-h: 1px;

  /* The deep maroon field behind the hero, page heads and calls to action. */
  --maroon-field: linear-gradient(135deg, #2A060F 0%, #4A0A18 58%, #6A0F22 100%);

  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-body:    1rem;
  --fs-lg:      clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --fs-xl:      clamp(1.1875rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-h3:      clamp(1.25rem, 1vw + 1.05rem, 1.625rem);
  --fs-h2:      clamp(2rem, 2.4vw + 1.05rem, 3.375rem);
  --fs-h1:      clamp(2.375rem, 3.8vw + 1.1rem, 4.5rem);
  --fs-display: clamp(2.625rem, 4.8vw + 1.1rem, 5.75rem);

  --lh-tight:   1.04;
  --lh-snug:    1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.72;

  /* A heavy serif needs a little negative tracking at display sizes, and
     small capitals need generous positive tracking to stay legible. */
  --tracking-display: -0.018em;
  --tracking-tight:   -0.015em;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.18em;

  /* --- spacing ------------------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* Generous bands: space is most of what reads as premium. */
  --section-y:    clamp(4rem, 7.5vw, 7.5rem);
  --section-y-lg: clamp(4.5rem, 9vw, 9rem);

  /* --- containers --------------------------------------------------------- */
  --container:      1320px;
  --container-wide: 1480px;
  --container-text: 46rem;
  --gutter:         clamp(1.25rem, 4vw, 4rem);

  /* --- shape -------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* Warm shadows. A neutral grey drop shadow is the fastest way to make a
     maroon and cream palette look cheap. */
  --shadow-sm: 0 1px 2px rgba(38, 34, 31, 0.05);
  --shadow:    0 2px 10px rgba(38, 34, 31, 0.07);
  --shadow-md: 0 10px 30px rgba(38, 34, 31, 0.10);
  --shadow-lg: 0 24px 60px rgba(38, 34, 31, 0.16);
  --shadow-brand: 0 10px 30px rgba(122, 14, 34, 0.18);

  /* --- motion ------------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   520ms;

  /* A fine grain laid over the flat colour fields, so a plaster-and-stone
     brand does not read as flat screen colour. Kept at a few percent: it
     should be felt rather than seen. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  --grain-opacity: 0.30;

  --header-h: 88px;
  --mobile-bar-h: 68px;

  --z-header:   100;
  --z-drawer:   200;
  --z-float:    150;
  --z-lightbox: 300;
}

/* ----------------------------------------------------------  3. reset & base */

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + 1rem);
}

/* The page only ever scrolls up and down. Nothing may push it wider than the
   screen, and a sideways trackpad swipe must not bounce it left or right,
   which cut off the left edge of the footer on a Mac. */
html,
body {
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  background-blend-mode: soft-light;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; }

/* Sprite icons carry no intrinsic size, so without this any usage outside a
   sized context expands to fill its container. 1em keeps an icon in step with
   the text beside it; specific rules below override where needed. */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
}

/* No blanket background here: it shows as a filled box behind a transparent
   logo. Every container that benefits from a loading placeholder — cards, the
   gallery, the hero, the comparison slider — sets one itself. */
img { height: auto; }

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

button { cursor: pointer; }

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

p { margin: 0 0 var(--space-4); }

p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--charcoal);
  color: var(--ivory);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Visible only to screen readers, until it receives focus. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--charcoal);
  color: var(--ivory);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.skip-link:focus { top: var(--space-4); }

/* -----------------------------------------------------------  4. typography */

/* Page and section headings carry the wordmark's voice: a heavy,
   high-contrast serif. Everything from h3 down is the text face, so cards,
   lists and forms stay quiet and readable. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: none;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }
h5, h6 { font-size: var(--fs-lg); }

/* Small headings that are h2 for document outline only. They take the text
   face back, and each one's own rule sets its size. */
.meta-title,
.enquire-panel__title,
.palette__title,
.footer-col__title {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
}

.meta-title,
.footer-col__title { letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}

/* Emphasis inside a heading, produced by accent() in PHP: the logo's maroon
   sweep, painted into the letters. */
.accent {
  font-style: normal;
  color: var(--accent-fill);
}

h1 .accent, h2 .accent, .display .accent {
  background: var(--maroon-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.section-head--centred .eyebrow { justify-content: center; }

.eyebrow--muted { color: var(--text-faint); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
}

.lede--wide { max-width: 62ch; }

.prose {
  max-width: var(--container-text);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* Inside long-form copy a capitalised display heading every few paragraphs
   would shout; article sub-heads use the text face. */
.prose h2 {
  margin-top: var(--space-9);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

.prose h3 {
  margin-top: var(--space-7);
  font-size: var(--fs-xl);
  color: var(--ink);
}

.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose ul,
.prose ol { margin-bottom: var(--space-5); padding-left: 1.2em; }

.prose li { margin-bottom: var(--space-2); }

.prose li::marker { color: var(--accent); }

.prose strong { color: var(--ink); font-weight: 600; }

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-on-dark);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur) var(--ease);
}

.prose a:hover { text-decoration-color: var(--accent); }

.prose blockquote {
  margin: var(--space-7) 0;
  padding: var(--space-5);
  border-left: 3px solid var(--accent-fill);
  background: var(--bg-deep);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink);
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }

/* -------------------------------------------------------------  5. layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Each band paints its own colour, so it would otherwise cover the grain on
   the body; the texture is repeated on top of the colour instead. */
.section--alt,
.section--deep,
.section--dark,
.page-hero:not(.page-hero--image),
.cta-band {
  background-image: var(--grain);
  background-blend-mode: soft-light;
}

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

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

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--ivory); }

.section--dark .lede,
.section--dark .prose,
.section--dark .section-head__text,
.section--dark .text-muted { color: var(--text-invert-dim); }

.section--dark .eyebrow { color: var(--accent-on-dark); }

.grid { display: grid; gap: var(--space-6); }
.grid > *, .feature > *, .form-grid > *, .footer-top > * { min-width: 0; }

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

/* A wider gap for the big editorial splits. */
.grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}

.grid--split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.grid--sidebar    { grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 4vw, 4rem); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--between { justify-content: space-between; }

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split,
  .grid--split-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------  6. buttons */

.btn {
  --btn-bg: var(--charcoal);
  --btn-fg: var(--ivory);
  --btn-border: var(--charcoal);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.4;
  text-align: center;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  /* Comfortably above the 44px touch target minimum. */
  min-height: 48px;
  max-width: 100%;
}

.btn:hover {
  --btn-bg: var(--ink);
  --btn-border: var(--ink);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }

.btn .icon { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  --btn-bg: var(--accent-fill);
  --btn-border: var(--accent-fill);
  --btn-fg: #FFFFFF;
}

.btn--primary:hover {
  --btn-bg: var(--accent-hover);
  --btn-border: var(--accent-hover);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  --btn-border: var(--border-strong);
}

.btn--outline:hover {
  --btn-bg: var(--charcoal);
  --btn-fg: var(--ivory);
  --btn-border: var(--charcoal);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--charcoal);
  --btn-border: transparent;
  padding-inline: 0.5rem;
}

.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  --btn-border: transparent;
}

.btn--light {
  --btn-bg: var(--ivory);
  --btn-fg: var(--charcoal);
  --btn-border: var(--ivory);
}

.btn--light:hover {
  --btn-bg: #FFFFFF;
  --btn-border: #FFFFFF;
  --btn-fg: var(--ink);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-border: rgba(255, 253, 249, 0.4);
}

.btn--on-dark:hover {
  --btn-bg: var(--ivory);
  --btn-fg: var(--charcoal);
  --btn-border: var(--ivory);
}

/* Deeper than WhatsApp's own brand green, which only reaches 3.1:1 against
   white text and fails at button size. */
.btn--whatsapp {
  --btn-bg: var(--whatsapp);
  --btn-border: var(--whatsapp);
  --btn-fg: var(--whatsapp-ink);
}

.btn--whatsapp:hover {
  --btn-bg: var(--whatsapp-hover);
  --btn-border: var(--whatsapp-hover);
}

.btn--sm { padding: 0.65rem 1.1rem; font-size: var(--fs-sm); min-height: 44px; }
.btn--lg { padding: 1rem 1.5rem; font-size: var(--fs-sm); min-height: 54px; }
.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* A text link with a rule that draws itself on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow:hover {
  color: var(--accent);
  background-size: 100% 1px;
}

.link-arrow .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------  7. header & navigation */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over a hero image the header is transparent with light text; once the page
   scrolls, or on any page without a hero, it becomes a solid bar. */
.site-header--over { position: fixed; left: 0; right: 0; }

.site-header--solid,
.site-header.is-stuck {
  position: fixed;
  left: 0;
  right: 0;
  /* Nearly opaque: over the maroon hero a thinner bar tints pink. */
  background: rgba(255, 253, 249, 0.985);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: var(--header-h);
}

/* --- wordmark ------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

/* The typeset wordmark, set as the TexStone pack sets it: a heavy serif
   name with "Stone" in maroon, over a ruled line of small capitals. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--ink);
}

.wordmark__name {
  font-family: var(--font-brand);
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.wordmark__accent { color: var(--maroon); }

.wordmark__line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark__line::before,
.wordmark__line::after {
  content: '';
  width: 0.875rem;
  height: 1px;
  background: var(--maroon);
}

.wordmark--light { color: var(--ivory); margin-bottom: var(--space-5); }
.wordmark--light .wordmark__name { font-size: 2.25rem; }
.wordmark--light .wordmark__accent { color: var(--champagne); }
.wordmark--light .wordmark__line { color: var(--text-invert-dim); }
.wordmark--light .wordmark__line::before,
.wordmark--light .wordmark__line::after { background: var(--champagne); }

.brand__tagline {
  display: none;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The wide TexStone logo, the copper bucket beside the name, from
   Settings → Branding. Full colour, so it needs no light version. */
.brand__logo {
  display: block;
  height: 54px;
  width: auto;
}

@media (min-width: 1200px) {
  .brand__logo { height: 60px; }
}

/* The tagline and the phone number are the first things to go when the bar
   runs out of room; the navigation and the call to action are not. */
.brand__tagline { display: none; }

/* --- desktop navigation --------------------------------------------------- */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.35vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent-fill);
  transition: width var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--accent); }

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

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.header-cta { white-space: nowrap; }
.nav-toggle { border: 1px solid var(--border); border-radius: 50%; }

.header-phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}

.header-phone .icon { width: 1rem; height: 1rem; color: var(--accent); }

.header-phone:hover { color: var(--accent); }

/* Header sitting over a dark hero image. */
.site-header--over:not(.is-stuck) .brand__mark,
.site-header--over:not(.is-stuck) .header-phone { color: var(--ivory); }

.site-header--over:not(.is-stuck) .brand__tagline { color: var(--text-invert-dim); }

.site-header--over:not(.is-stuck) .nav__link { color: rgba(255, 253, 249, 0.78); }

.site-header--over:not(.is-stuck) .nav__link:hover,
.site-header--over:not(.is-stuck) .nav__link.is-active { color: var(--ivory); }

.site-header--over:not(.is-stuck) .btn--outline {
  --btn-fg: var(--ivory);
  --btn-border: rgba(255, 253, 249, 0.45);
}

.site-header--over:not(.is-stuck) .btn--outline:hover {
  --btn-bg: var(--ivory);
  --btn-fg: var(--charcoal);
  --btn-border: var(--ivory);
}

.site-header--over:not(.is-stuck) .nav-toggle { color: var(--ivory); }

/* --- mobile controls ------------------------------------------------------ */

.header-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn .icon { width: 22px; height: 22px; }

.icon-btn:hover { background: rgba(38, 34, 31, 0.06); }

.site-header--over:not(.is-stuck) .icon-btn { color: var(--ivory); }
.site-header--over:not(.is-stuck) .icon-btn:hover { background: rgba(255, 253, 249, 0.12); }

.icon-btn--whatsapp { color: #128C44; }

.nav-toggle { color: var(--ink); }

@media (min-width: 960px) {
  .nav { display: block; }
  .header-mobile { display: none; }
  .nav__list { gap: clamp(1.75rem, 3vw, 3rem); }
}

@media (min-width: 1600px) {
  .header-phone { display: inline-flex; }
}

@media (max-width: 560px) {
  :root { --header-h: 72px; }
  .header-cta { display: none; }
  .brand__logo { height: 46px; }
  .header-inner { gap: var(--space-3); }
  .wordmark__name { font-size: 1.625rem; }
}

/* --- mobile drawer -------------------------------------------------------- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  background: var(--warm-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.nav-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.nav-drawer__body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6) var(--gutter);
  -webkit-overflow-scrolling: touch;
}

.nav-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-drawer__list li + li { border-top: 1px solid var(--border); }

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.nav-drawer__link .icon {
  width: 18px;
  height: 18px;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease);
}

.nav-drawer__link:hover .icon { transform: translateX(4px); color: var(--accent); }

.nav-drawer__link.is-active { color: var(--accent); }

.nav-drawer__foot {
  padding: var(--space-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
}

.nav-drawer__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

body.is-locked { overflow: hidden; }

.noscript-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-block: calc(var(--header-h) + 1rem) 1rem; }
.noscript-nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-height: 600px) {
  .nav-drawer__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0.75rem; }
  .nav-drawer__contact { grid-column: 1 / -1; }
  .nav-drawer__link { padding-block: 0.6rem; font-size: 1.4rem; }
}

/* ----------------------------------------------------------------  8. hero */

/* The edge line: a fine champagne rule along the top of the footer. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--edge-line-h);
  background: var(--edge-line);
}

/* The home page opens on the maroon field with the message centred. Under
   it five arched pictures stand in a row like doorways: the house in the
   middle, real walls either side and the loose chips at each end. The
   arches run past the foot of the maroon onto the page colour, which ties
   the hero to the row of facts beneath it. */
.home-hero {
  --arch-overlap: clamp(4.5rem, 9vw, 9rem);
  position: relative;
  overflow-x: clip;
}

.home-hero__field {
  position: relative;
  isolation: isolate;
  /* Its own formatting context, so the arches' negative margin pulls the
     foot of the maroon up behind them instead of escaping the block. */
  display: flow-root;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 4.25vw, 3.75rem));
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: var(--ivory);
}

/* Marble-chip grain, barely there, so the maroon reads as a material. */
.home-hero__field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/dana/shade-golden-card.webp') center / cover no-repeat;
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* A soft warm light behind the arches. */
.home-hero__field::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(72rem, 140vw);
  height: 75%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(230, 199, 154, 0.2), rgba(230, 199, 154, 0));
  pointer-events: none;
}

.home-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
}

.home-hero__eyebrow::before,
.home-hero__eyebrow::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.home-hero__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(2.625rem, 4.6vw + 1rem, 5.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ivory);
}

.home-hero__title em {
  display: block;
  /* Room below the baseline, so the gradient clip keeps descenders (y, p). */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  font-style: normal;
  color: var(--champagne);
  background: var(--maroon-sweep-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-hero__text {
  max-width: 44ch;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(255, 253, 249, 0.84);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.home-hero__actions .btn { gap: 0.75rem; }

.home-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--champagne);
}

.home-hero__link .icon { transition: transform var(--dur) var(--ease); }
.home-hero__link:hover .icon { transform: translateX(3px); }

/* --- the arches ----------------------------------------------------------- */

.arches {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.625rem, 1.5vw, 1.5rem);
  width: 100%;
  max-width: 84rem;
  margin: clamp(2.25rem, 3.75vw, 3.25rem) auto calc(-1 * var(--arch-overlap));
  padding: 0 var(--gutter);
  list-style: none;
}

.arch {
  --ratio: 0.7;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  animation: arch-rise 900ms var(--ease-out) both;
}

.arch--side   { --ratio: 0.66; flex-grow: 1.18; animation-delay: 120ms; }
.arch--edge   { --ratio: 0.72; animation-delay: 240ms; }
.arch--centre { --ratio: 0.66; flex-grow: 1.5; animation-name: arch-rise-centre; }

/* A round top whatever the width: the horizontal radius is half the width
   and the vertical one the same length, as a share of the height. */
.arch__frame {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / calc(var(--ratio) * 50%) calc(var(--ratio) * 50%) var(--radius-lg) var(--radius-lg);
  background: #3A0814;
  box-shadow: 0 34px 60px -28px rgba(10, 2, 5, 0.75);
  color: #FFFFFF;
}

.arch__frame picture { display: block; width: 100%; height: 100%; }

.arch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.arch:hover .arch__frame img { transform: scale(1.05); }
a.arch__frame:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

/* A fine champagne outline set off around the middle arch. */
.arch--centre::before {
  content: '';
  position: absolute;
  inset: -0.75rem;
  border: 1px solid rgba(230, 199, 154, 0.5);
  border-radius: 50% 50% calc(var(--radius-lg) + 0.75rem) calc(var(--radius-lg) + 0.75rem) / calc(var(--ratio) * 50%) calc(var(--ratio) * 50%) calc(var(--radius-lg) + 0.75rem) calc(var(--radius-lg) + 0.75rem);
  pointer-events: none;
}

.arch__label {
  position: absolute;
  left: 50%;
  bottom: 0.875rem;
  transform: translateX(-50%);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 14, 12, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.arch__cta {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--warm-white);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.arch__cta .icon { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.arch__cta:hover { background: var(--maroon); color: var(--ivory); }
.arch__cta:hover .icon { transform: translateX(3px); }

@keyframes arch-rise {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: none; }
}

/* The middle picture is the first thing to paint, so it only moves. */
@keyframes arch-rise-centre {
  from { transform: translateY(1.5rem); }
  to   { transform: none; }
}

/* --- facts under the arches ----------------------------------------------- */

.home-facts {
  padding-top: calc(var(--arch-overlap) + clamp(2rem, 4vw, 3.25rem));
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.home-facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--border);
}

.home-fact {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 1.25rem clamp(0.75rem, 2vw, 1.5rem);
}

.home-fact + .home-fact { border-left: 1px solid var(--border); }

.home-fact > .icon {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--maroon);
}

.home-fact > span {
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

.home-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 899px) {
  .home-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-fact:nth-child(3) { border-left: 0; }
  .home-fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* Phones: the row of arches is wider than the screen, so the middle arch
   is large and the two beside it are cut by the edges, inviting a look. */
@media (max-width: 699px) {
  .home-hero { --arch-overlap: 3.75rem; }
  .home-hero__title { font-size: clamp(2.375rem, 10.5vw, 3.5rem); }
  .home-hero__text { font-size: 1rem; }

  .arches {
    width: 200%;
    max-width: none;
    margin-left: -50%;
    padding: 0;
    gap: 0.625rem;
  }

  .arch--centre::before { inset: -0.5rem; }
  .arch__cta { bottom: 0.875rem; padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
  .home-fact { padding: 1rem 0.75rem; gap: 0.625rem; }
  .home-fact > .icon { width: 40px; height: 40px; padding: 9px; }
  .home-fact strong { font-size: 1.0625rem; }
  .home-fact > span { font-size: 0.8125rem; }
}

@media (max-width: 560px) {
  .home-hero__actions { display: grid; width: 100%; max-width: 24rem; gap: 0.625rem; }
  .home-hero__actions .btn { min-height: 52px; }
}

@media (max-width: 400px) {
  .home-hero__eyebrow { letter-spacing: 0.16em; }
  .home-hero__eyebrow::before,
  .home-hero__eyebrow::after { display: none; }
  .home-fact { flex-direction: column; align-items: flex-start; }
}

/* A phone held sideways has under 500px of height: a slimmer header, and a
   smaller headline so the call buttons still show on the first screen. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 64px; }
  .wordmark__name { font-size: 1.5rem; }
  .wordmark__line { margin-top: 0.2rem; }
  .brand__logo { height: 42px; }
  .product-gallery__main { aspect-ratio: 16 / 9; }
  .home-hero__field { padding-top: calc(var(--header-h) + 1.5rem); }
  .home-hero__eyebrow { margin-bottom: var(--space-3); }
  .home-hero__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-3); }
  .home-hero__text { margin-bottom: var(--space-4); }
}

/* --- compact page hero ---------------------------------------------------- */

.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem)) clamp(3.5rem, 7vw, 6rem);
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: var(--ivory);
  overflow: hidden;
}

/* Page heads share the hero's maroon field, with marble-chip grain faded in
   from the right and a fine champagne line along the foot. */
.page-hero:not(.page-hero--image)::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: min(60%, 860px);
  background: url('../img/dana/shade-white-card.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 75%);
  mask-image: linear-gradient(to right, transparent, #000 75%);
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}

.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--edge-line-h);
  background: var(--edge-line);
}

@media (max-width: 760px) {
  .page-hero:not(.page-hero--image)::before { width: 90%; }
}

.page-hero--image {
  background: var(--maroon-deep);
}

.page-hero--image .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero--image .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.page-hero--image .page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 6, 15, 0.94), rgba(42, 6, 15, 0.55));
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero h1 { color: var(--ivory); }

.page-hero .lede { color: rgba(255, 253, 249, 0.8); }

/* The accent maroon is tuned for a light background; on the maroon field the
   eyebrow takes the champagne. */
.page-hero .eyebrow { color: var(--accent-on-dark); }

.page-hero__title {
  max-width: 20ch;
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------  9. section furniture */

.section-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-6);
}

.section-head__title { margin: 0; max-width: 20ch; }

.section-head__text {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.section-head--centred {
  justify-items: center;
  text-align: center;
}

.section-head--centred .section-head__title,
.section-head--centred .section-head__text { max-width: 44ch; }

@media (max-width: 760px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* A hairline rule with a small label, used to divide long pages. */
.rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* -------------------------------------------------------------  10. cards */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-brand);
  transform: translateY(-3px);
}

.card:focus-within, .solution-card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 16 / 10;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.055); }

.card__media--tall { aspect-ratio: 3 / 4; }
.card__media--square { aspect-ratio: 1 / 1; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.card__title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.22;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
}

.card__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-muted);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

/* The whole card is clickable, but the visible link is what a screen reader
   and the status bar announce. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-xs);
  background: rgba(255, 253, 249, 0.93);
  color: var(--graphite);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(6px);
}

.badge--dark { background: rgba(38, 34, 31, 0.86); color: var(--ivory); }
.badge--accent { background: var(--accent); color: #fff; }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); backdrop-filter: none; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--notice { background: var(--notice-soft); color: var(--notice); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ----------------------------------------------------------  11. solutions */

.solution-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

/* Separate material cards keep the catalogue readable at each breakpoint. */
@media (min-width: 640px) { .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: background var(--dur) var(--ease);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.solution-card:hover { background: var(--bg-alt); }

.solution-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bone);
}

/* Several of these finishes are deliberately pale. Without an edge they read
   as an empty panel rather than as a photograph of a very light surface. */
.solution-card__media::after,
.card__media::after,
.texture-swatch__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(38, 34, 31, 0.07),
              inset 0 -40px 50px -40px rgba(38, 34, 31, 0.12);
}

.solution-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.solution-card:hover .solution-card__media img { transform: scale(1.06); }

.solution-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: clamp(1.25rem, 2vw, 2rem);
}

.solution-card__index {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-faint);
}

.solution-card__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.solution-card__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-muted);
}

.solution-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-5);
}

.solution-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--ink);
  flex: none;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.solution-card__go .icon { width: 18px; height: 18px; }

.solution-card:hover .solution-card__go {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #FFFFFF;
  transform: translateX(3px);
}

.solution-card__scope {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* On a phone each solution is a row: square picture beside the name and a
   two-line summary, so all ten fit in a few screens instead of ten. */
@media (max-width: 600px) {
  .solution-grid { gap: 0.75rem; }
  .solution-card:has(.solution-card__media) { flex-direction: row; align-items: stretch; }
  .solution-card__media { flex: none; width: 112px; aspect-ratio: auto; min-height: 112px; }
  .solution-card__body { gap: 0.25rem; padding: 0.875rem 1rem; justify-content: center; }
  .solution-card__index { font-size: 0.6875rem; }
  .solution-card__title { font-size: 1.0625rem; line-height: 1.25; }
  .solution-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .solution-card__foot { display: none; }
}

/* --------------------------------------  12. texture rails & feature bands */

/* A wrapping grid of texture swatches: one row on a desktop, three across on
   a tablet, two on a phone. An odd swatch left over at the end of the phone
   grid takes the whole row as a wide panel instead of sitting alone. */
.texture-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6) var(--space-4);
}

@media (max-width: 1023px) {
  .texture-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .texture-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  .texture-swatch { gap: var(--space-2); }
  .texture-rail .texture-swatch__media { aspect-ratio: 1 / 1; }
  .texture-swatch:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .texture-rail .texture-swatch:last-child:nth-child(odd) .texture-swatch__media { aspect-ratio: 2.1 / 1; }
  .texture-swatch__name { font-size: 0.9375rem; line-height: 1.35; }
  .texture-swatch__meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }
}

.texture-swatch {
  position: relative;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.texture-swatch__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
}

.texture-swatch__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.texture-swatch:hover .texture-swatch__media img { transform: scale(1.06); }

.texture-swatch__name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.texture-swatch__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

/* --- large editorial feature band ---------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.feature--reverse .feature__media { order: 2; }

.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
}

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

.feature__media--wide { aspect-ratio: 3 / 2; }

/* A second, smaller image overlapping the first, as a material sample would
   be laid on a board. */
.feature__inset {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 8px solid var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bone);
}

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

.feature__body { max-width: 34rem; }

.feature__list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.feature__list li,
.feature__list > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
}

.feature__list dd { margin: 0; }

.feature__list dt,
.feature__list .feature__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { aspect-ratio: 4 / 3; }
  .feature__inset { width: 35%; border-width: 5px; }
  .feature__body { max-width: none; }
  .feature__list li,
  .feature__list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ------------------------------------------------------------  13. colour */

.palette {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.palette__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.palette__title { margin: 0; font-size: var(--fs-xl); }

.palette__type {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.palette__text {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-muted);
}

.palette__strip {
  display: flex;
  min-height: 108px;
}

@media (max-width: 600px) {
  .palette__strip { min-height: 72px; }
  .palette__head { padding: var(--space-4) var(--space-4) var(--space-2); }
  .palette__text { padding: 0 var(--space-4) var(--space-4); font-size: 0.9375rem; line-height: 1.55; }
}

.palette__strip span {
  flex: 1;
  display: block;
}

.swatches {
  display: grid;
  /* auto-fit, not auto-fill: a palette of five colours should fill the row
     rather than leave empty tracks showing the divider colour. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}

/* Two across on a phone: an odd colour left at the end takes the full row,
   so the grid never shows an empty cell. */
@media (max-width: 600px) {
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatch:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .swatch:last-child:nth-child(odd) .swatch__chip { aspect-ratio: 3 / 1; }
}

.swatch {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.swatch__chip {
  aspect-ratio: 5 / 3;
  border-bottom: 1px solid rgba(38, 34, 31, 0.08);
}

.swatch__body { padding: var(--space-3) var(--space-4) var(--space-4); }

.swatch__name {
  margin: 0 0 0.15rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}

.swatch__role {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.swatch__code {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.swatch__text {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* The wall / ceiling / trim combination preview. */
.combination {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The colour block and its label are separate rows.
   Putting the label on the colour looked neater but could not be made
   readable for every tone an administrator might add — a mid taupe is too
   close to both brand text colours to carry either at an accessible ratio. */
.combination__part { display: flex; flex-direction: column; }

.combination__swatch { min-height: 132px; }

.combination__label {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.combination__label small {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* --- small labelled link lists -------------------------------------------
   Used in detail-page sidebars. Deliberately separate from .footer-list,
   which is styled light-on-dark and is unreadable anywhere else. */

.meta-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

.link-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.link-list a .icon {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.link-list a:hover { color: var(--accent); }
.link-list a:hover .icon { transform: translateX(3px); }

/* -------------------------------------------------  14. gallery & lightbox */

/* A masonry-style column layout. CSS columns give real masonry with no
   JavaScript and no layout thrash as images arrive. */
.gallery-grid {
  column-count: 3;
  column-gap: var(--space-4);
}

@media (max-width: 1000px) { .gallery-grid { column-count: 2; } }
@media (max-width: 560px)  {
  .gallery-grid { column-count: 2; column-gap: 0.75rem; }
  .gallery-grid .gallery-item { margin-bottom: 0.75rem; }
  .gallery-item__caption { padding: var(--space-5) var(--space-3) var(--space-3); }
  .gallery-item__title { font-size: 0.875rem; line-height: 1.3; }
  .gallery-item__meta { font-size: 0.625rem; }
}

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--space-4);
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bone);
  border: 0;
  padding: 0;
  text-align: left;
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* A very tall photo is trimmed to a tall frame, so one picture cannot take
   a whole screen in the gallery columns. */
.gallery-grid .gallery-item img { max-height: 34rem; object-fit: cover; }

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

.gallery-item__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(38, 34, 31, 0.85), rgba(38, 34, 31, 0));
  color: var(--ivory);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption { opacity: 1; transform: translateY(0); }

.gallery-item__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 500;
}

.gallery-item__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.7);
}

/* --- filter chips --------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  line-height: 1;
  min-height: 44px;
  line-height: 1.4;
  max-width: 100%;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.chip:hover { border-color: var(--accent-fill); color: var(--accent); }

.chip.is-active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #FFFFFF;
}

.chip__count {
  font-size: 0.6875rem;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

.filter-select { flex: 0 1 15rem; min-width: 0; }

/* On a phone the chips sit on one line that scrolls sideways, with the edge
   faded so it is clear there is more, instead of stacking four rows deep. */
@media (max-width: 600px) {
  .filters {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-right: 2rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 0.5rem 0.9rem; font-size: 0.8125rem; letter-spacing: 0.02em; white-space: nowrap; }
}

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(30, 26, 23, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  color: rgba(255, 253, 249, 0.7);
  font-size: var(--fs-sm);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}

.lightbox__stage {
  display: grid;
  place-items: center;
  padding: 0 clamp(1rem, 6vw, 5rem);
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox__caption {
  padding: var(--space-4) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  color: var(--ivory);
  text-align: center;
}

.lightbox__caption p { margin: 0; font-size: var(--fs-base); }

.lightbox__caption small {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.55);
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 253, 249, 0.25);
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.06);
  color: var(--ivory);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lightbox__btn:hover { background: rgba(255, 253, 249, 0.16); border-color: rgba(255, 253, 249, 0.5); }

.lightbox__btn .icon { width: 22px; height: 22px; }

.lightbox__btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__btn--next { right: clamp(0.5rem, 2vw, 1.5rem); }

.lightbox__close { color: var(--ivory); }

@media (max-width: 640px) {
  .lightbox__btn { width: 44px; height: 44px; }
}

/* -----------------------------------------------  15. before & after slider */

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
  /* The handle is dragged, so the browser must not claim the gesture. */
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The "after" layer is clipped from the left edge to the handle position. */
.compare__after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--ivory);
  box-shadow: 0 0 0 1px rgba(38, 34, 31, 0.15);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ivory);
  background: rgba(38, 34, 31, 0.45);
  color: var(--ivory);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-md);
  cursor: ew-resize;
  padding: 0;
}

.compare__handle .icon { width: 24px; height: 24px; }

.compare__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.compare__label {
  position: absolute;
  top: var(--space-4);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-xs);
  background: rgba(38, 34, 31, 0.7);
  color: var(--ivory);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  pointer-events: none;
}

.compare__label--before { left: var(--space-4); }
.compare__label--after  { right: var(--space-4); }

.compare-item { display: grid; gap: var(--space-5); }

.compare-item__body { max-width: 60ch; }

/* --------------------------------------------------  16. catalogue & filters */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.toolbar__count {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: min(100%, 22rem);
  flex: 1 1 18rem;
}

.search-field .icon {
  position: absolute;
  left: 0.9rem;
  width: 18px;
  height: 18px;
  color: var(--accent);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  font-size: var(--fs-base);
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.search-field input:focus {
  outline: none;
  border-color: var(--accent-fill);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(122, 14, 34, 0.16);
}

.product-meta {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.product-meta div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.product-meta dt {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.6;
}

.product-meta dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text);
}

@media (max-width: 640px) {
  .product-meta div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* --- product cards -------------------------------------------------------- */

/* Four across on a computer, three on a tablet, two on a phone. Each card
   carries its photo, title, a short description, the rate and the two ways
   to order, so the buttons sit at the foot of every card in a row. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

@media (max-width: 1099px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 819px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }

.product-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bone);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

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

.product-card__badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--maroon);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(0.875rem, 1.4vw, 1.25rem);
}

.product-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem);
  font-weight: 800;
  line-height: 1.2;
}

.product-card__title a { color: var(--ink); }
.product-card__title a:hover { color: var(--accent); }

.product-card__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* The rate and the buttons sit at the foot of the card, level across a row. */
.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  margin: auto 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.product-card__price strong {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.product-card__price .product-card__ask { font-size: 1rem; color: var(--accent); }
.product-card__price s { font-size: var(--fs-sm); color: var(--text-muted); }
.product-card__price > span { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-muted); }

.product-card__actions { display: grid; gap: 0.5rem; margin-top: 0.25rem; }

.product-card__actions .btn {
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* A wide card puts the two buttons side by side; a narrow one drops
   "Enquiry on" so the WhatsApp label stays on one line. */
@container (min-width: 300px) {
  .product-card__actions { grid-template-columns: minmax(0, 1fr) auto; }
}

@container (max-width: 229px) {
  .product-card__long { display: none; }
  .product-card__price strong { font-size: 1.1875rem; }
}

/* --- rate on the product page ---------------------------------------------- */

.product-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: var(--space-6) 0 var(--space-5);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.product-rate__amount {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.product-rate__amount--ask { font-size: var(--fs-xl); color: var(--accent); }
.product-rate__mrp { color: var(--text-muted); }

.product-rate__off {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--maroon);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
}

.product-rate__unit { flex-basis: 100%; font-size: var(--fs-sm); color: var(--text-muted); }

.product-buy { margin-bottom: var(--space-3); }

/* --- product gallery ------------------------------------------------------ */

.product-gallery { display: grid; gap: var(--space-3); }

.product-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  width: 100%;
}

.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-2);
}

.product-gallery__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bone);
  padding: 0;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0.72;
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { border-color: var(--charcoal); opacity: 1; }

/* -----------------------------------------------------------  17. journal */

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

.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.post-card__meta .sep { opacity: 0.5; }

.post-card__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.24;
}

.post-card__title a { transition: color var(--dur) var(--ease); }
.post-card:hover .post-card__title a { color: var(--accent); }

.post-card__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text-muted);
}

/* On a phone an article becomes a row: square thumbnail, then the text. */
@media (max-width: 600px) {
  .post-card:has(.post-card__media) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-content: start;
    column-gap: 1rem;
    row-gap: 0.375rem;
  }
  .post-card:has(.post-card__media) > * { grid-column: 2; }
  .post-card:has(.post-card__media) > .post-card__media { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1 / 1; }
  .post-card__meta { font-size: 0.6875rem; letter-spacing: 0.08em; gap: 0.375rem; }
  .post-card__title { font-size: 1.0625rem; line-height: 1.3; }
  .post-card:has(.post-card__media) .post-card__text { display: none; }
}

.article-head {
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
}

.article-hero {
  margin-block: clamp(2rem, 5vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
}

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

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* -----------------------------------------------------  18. faq accordion */

.faq { border-top: 1px solid var(--border); }

.faq__item { border-bottom: 1px solid var(--border); }

.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.faq__trigger:hover { color: var(--accent); }

.faq__trigger .icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.25rem;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq__trigger[aria-expanded='true'] .icon { transform: rotate(180deg); color: var(--accent); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.faq__panel[data-open='true'] { grid-template-rows: 1fr; }

.faq__panel > div { overflow: hidden; }

.faq__answer {
  padding-bottom: var(--space-5);
  max-width: 68ch;
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------  19. forms */

.form { display: grid; gap: var(--space-5); }

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

.form-grid--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* The short enquiry form: name, phone and city side by side when the form
   has room, then the message, then the button with one line beside it.
   Laid out by the form's own width, so it fits a page and a side panel. */
.form--short { container-type: inline-size; gap: var(--space-4); }
.form--short .form-grid { gap: var(--space-4); }
.form--short .textarea { min-height: 6.25rem; }

@container (min-width: 380px) {
  .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 > .field:nth-child(3) { grid-column: 1 / -1; }
}

@container (min-width: 600px) {
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid--3 > .field:nth-child(3) { grid-column: auto; }
}

.form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.form__note {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}

.form__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@container (max-width: 379px) {
  .form__send .btn { width: 100%; }
}

.field { display: grid; gap: var(--space-2); align-content: start; }
.field, .search-field, .toolbar > *, .input, .select, .textarea { min-width: 0; }

.field--span { grid-column: 1 / -1; }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--graphite);
}

.field__label .req { color: var(--danger); margin-left: 0.15em; }

.field__hint {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-faint);
}

.field__error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--danger);
}

.field__error .icon { width: 15px; height: 15px; flex: none; }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  min-height: 50px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* 16px minimum on the actual control stops iOS zooming the page on focus. */
}

.textarea { min-height: 9rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px rgba(122, 14, 34, 0.16);
}

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); opacity: 1; }

.input.has-error,
.select.has-error,
.textarea.has-error {
  border-color: var(--danger-fill);
  box-shadow: 0 0 0 3px rgba(201, 75, 69, 0.14);
}

/* --- file input ----------------------------------------------------------- */

.file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.file-field:hover,
.file-field.is-dragging { border-color: var(--accent); background: var(--notice-soft); }

.file-field input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-field .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }

.file-field__text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }

.file-field__text strong { display: block; color: var(--ink); font-weight: 500; }

/* --- checkbox ------------------------------------------------------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

.check input[type='checkbox'] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- error summary and flash --------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.alert .icon { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; }

.alert p { margin: 0; }

.alert__body { color: var(--text); }

.alert--success { background: var(--success-soft); color: var(--success); }
.alert--error   { background: var(--danger-soft);  color: var(--danger); }
.alert--notice  { background: var(--notice-soft);  color: var(--notice); }
.alert--info    { background: var(--bg-alt);       color: var(--graphite); }

.alert ul { margin: var(--space-2) 0 0; padding-left: 1.1em; }

.alert li { margin-bottom: 0.2rem; }

/* Hidden from people, irresistible to naive bots. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------  20. call to action */

.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: #FFFFFF;
}

.cta-band__media {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: soft-light;
}

.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }

.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding-block: var(--section-y);
  justify-items: center;
  text-align: center;
}

.cta-band__title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--fs-h1);
  line-height: 1.04;
  color: var(--ivory);
}

.cta-band__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(255, 253, 249, 0.78);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.cta-band__phone {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.6);
}

.cta-band__phone a { color: var(--ivory); }
.cta-band__phone a:hover { color: var(--accent-on-dark); }

/* An inline enquiry prompt for the foot of a detail page. */
.enquire-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.enquire-panel__title { margin: 0; font-size: var(--fs-xl); }

.enquire-panel__text { margin: 0; color: var(--text-muted); font-size: var(--fs-base); }

.enquire-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* -------------------------------------------------------------  21. footer */

.site-footer {
  position: relative;
  background-color: var(--ink);
  background-image: var(--grain);
  background-blend-mode: overlay;
  color: var(--text-invert-dim);
  padding-block: clamp(2.75rem, 5vw, 4rem) var(--space-5);
  font-size: var(--fs-base);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border-dark);
}

@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

/* The TEXSTONE name from the logo, beside the icon. */
.footer-brand__logo { display: block; height: 30px; width: auto; }

/* The TexStone icon, the same one people see on the browser tab and the
   phone home screen, beside the name. */
.footer-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: var(--space-4);
  color: inherit;
}

.footer-brand__mark .wordmark--light,
.footer-brand__mark .footer-brand__logo { margin-bottom: 0; }

.footer-brand__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(230, 199, 154, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 560px) {
  .footer-brand__icon { width: 48px; height: 48px; border-radius: 11px; }
}

.footer-brand__text {
  max-width: 36ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-invert-dim);
}

.footer-col__title {
  font-family: var(--font-sans);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #FFFFFF;
}

.footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }

.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-invert-dim);
  transition: color var(--dur) var(--ease);
}

.footer-list a:hover { color: var(--accent-on-dark); }

.footer-contact { display: grid; gap: var(--space-1); }

.footer-contact__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.footer-contact__row span { min-width: 0; }
.footer-contact__row a { display: inline-flex; align-items: center; min-height: 36px; }

.footer-contact__row .icon {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.55rem;
  color: var(--accent-on-dark);
}

.footer-contact__row a:hover { color: var(--ivory); }

.footer-contact__row strong { color: var(--ivory); font-weight: 500; }

.footer-social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: var(--text-invert-dim);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.footer-social a:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.footer-social .icon { width: 19px; height: 19px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  font-size: var(--fs-sm);
  color: rgba(255, 253, 249, 0.6);
}

.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }

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

/* -------------------------------------------------  22. floating & mobile bar */

.float-whatsapp {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--whatsapp-ink);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.float-whatsapp:hover { background: var(--whatsapp-hover); transform: scale(1.06); }

.float-whatsapp .icon { width: 28px; height: 28px; }

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 68px);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--warm-white);
  color: var(--graphite);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

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

.to-top:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--ivory); }

.to-top .icon { width: 20px; height: 20px; }

/* A sticky Call / WhatsApp / Enquire bar, phones only. */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-float);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: var(--warm-white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(38, 34, 31, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 0.4rem;
  min-height: var(--mobile-bar-h);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--graphite);
  border-right: 1px solid var(--border);
}

.mobile-bar a:last-child { border-right: 0; }

.mobile-bar .icon { width: 21px; height: 21px; }

/* Written as .mobile-bar a.x rather than .x: the base rule above is
   ".mobile-bar a", which outranks a bare class and was leaving the Enquire
   button with dark text on its dark background. */
.mobile-bar a.mobile-bar__whatsapp { color: #107C3C; }

.mobile-bar a.mobile-bar__primary {
  background: var(--charcoal);
  color: var(--ivory);
  border-right-color: var(--charcoal);
}

@media (max-width: 767px) {
  .mobile-bar { display: grid; }
  /* Keep the bar from covering the last line of the page. */
  body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom)); }
  .float-whatsapp { display: none; }
  .to-top { bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + 1rem); }
}

/* -------------------------------  23. pagination, breadcrumbs, notices */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.breadcrumbs a { color: var(--text-muted); transition: color var(--dur) var(--ease); }
.breadcrumbs a:hover { color: var(--accent); }

.breadcrumbs .sep { opacity: 0.7; }

.breadcrumbs [aria-current='page'] { color: var(--ink); }

.page-hero .breadcrumbs { color: rgba(255, 253, 249, 0.55); }
.page-hero .breadcrumbs a { color: rgba(255, 253, 249, 0.75); }
.page-hero .breadcrumbs a:hover { color: var(--champagne); }
.page-hero .breadcrumbs [aria-current='page'] { color: var(--ivory); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination a:hover { border-color: var(--charcoal); color: var(--ink); }

.pagination .is-current {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #FFFFFF;
}

.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

.empty-state {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-alt);
}

.empty-state .icon { width: 34px; height: 34px; color: var(--text-faint); }

.empty-state h3 { margin: 0; font-size: var(--fs-xl); }

.empty-state p { margin: 0; max-width: 46ch; color: var(--text-muted); }

/* ----------------------------------------------------------  24. utilities */

.flow > * + * { margin-top: var(--space-5); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.text-center { text-align: center; }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.hide { display: none !important; }

@media (max-width: 860px) { .hide-mobile { display: none !important; } }
@media (min-width: 861px) { .hide-desktop { display: none !important; } }

.divider-top { border-top: 1px solid var(--border); padding-top: var(--space-6); }

/* ------------------------------------------------  25. motion & preferences */

/* Shared adaptations for detail pages, forms, touch devices and compact screens. */
.page-hero__title, .home-hero__title, .cta-band__title { overflow-wrap: anywhere; }
.page--contact .grid--sidebar > div:first-child { padding: clamp(1.25rem, 3vw, 3rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.page--contact .enquire-panel { border-top: 3px solid var(--accent); }
.enquire-panel .footer-contact__row .icon { color: var(--accent); }
.enquire-panel .footer-contact__row a:hover { color: var(--accent); }
.footer-bottom p { margin: 0; }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: 36px; }
.breadcrumbs > * { min-width: 0; overflow-wrap: anywhere; }
.check { min-height: 44px; align-items: flex-start; }
.check > span { min-width: 0; }
.file-field { overflow: hidden; }
.file-field:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.file-field__text { min-width: 0; overflow-wrap: anywhere; }
.search-field input, .toolbar select { font-size: 1rem; }
.product-gallery__thumb:focus-visible { outline-offset: -3px; }

@media (hover: none) {
  .gallery-item__caption { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
  .card:hover img, .solution-card:hover img, .texture-swatch:hover img, .gallery-item:hover img { transform: none; }
}

@media (max-width: 860px) {
  .page-hero { padding-block: calc(var(--header-h) + 2.5rem) 2.5rem; }
  .grid--split-wide { gap: 2rem; }
  .product-gallery { max-width: 100%; }
}

@media (max-width: 600px) {
  .toolbar { align-items: stretch; gap: 0.75rem; }
  .toolbar .search-field { flex-basis: 100%; }
  .toolbar .filter-select { flex: 1 1 100%; width: 100%; max-width: none; }
  .toolbar__count { flex-basis: 100%; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .footer-brand, .footer-top > :last-child { grid-column: 1 / -1; }
  .footer-list { gap: 0; }
  .footer-bottom { gap: 0.5rem; }
  .footer-bottom nav { gap: 0.5rem 1rem; }
  .cta-band__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; width: 100%; }
  .cta-band__actions .btn { padding-inline: 0.75rem; }
  .cta-band__actions > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .enquire-panel { padding: 1.25rem; }
  .enquire-panel__actions > .btn { flex: 1 1 100%; }
  .cluster > .btn { flex: 1 1 100%; }
  .form > .btn, .form .cluster > .btn { width: 100%; }
}

@media (max-width: 360px) {
}

/* Scroll reveal. The class is added by JavaScript only after it confirms
   IntersectionObserver support, so without JS everything is simply visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.js [data-reveal][data-reveal-delay='1'] { transition-delay: 70ms; }
.js [data-reveal][data-reveal-delay='2'] { transition-delay: 140ms; }
.js [data-reveal][data-reveal-delay='3'] { transition-delay: 210ms; }
.js [data-reveal][data-reveal-delay='4'] { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }

  .arch, .home-intro__seal text, .shade-panel:not([hidden]) { animation: none; }
}

/* ------------------------------------------------------------  26. print */

@media print {
  .site-header,
  .site-footer,
  .mobile-bar,
  .float-whatsapp,
  .to-top,
  .nav-drawer,
  .lightbox,
  .cta-band,
  .enquire-panel { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }

  .home-hero__field { padding-block: 1rem; background: #fff; color: #000; }
  .home-facts { padding-top: 1rem; }
  .arches { display: none; }
  .home-hero__title, .home-hero__title em, .home-hero__text { color: #000; -webkit-text-fill-color: #000; }

  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }

  .section { padding-block: 1rem; }
}

/* ---------------------------------------------------------- product band */

/* The packed product: the brand's banner beside its sizes, properties and
   colours. On a phone the portrait banner leads and the details follow. */
.product-band {
  background-color: var(--bg-alt);
  background-image: var(--grain);
  background-blend-mode: soft-light;
  border-block: 1px solid var(--border);
}

.product-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The details run longer than the banner is tall, so on a wide screen the
   banner stays in view while they scroll past. */
.product-band__media {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone);
  box-shadow: var(--shadow-lg);
}

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

.product-band__body { min-width: 0; }

.product-band__title { margin-bottom: var(--space-4); }

.product-band__lede {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
}

.product-band__label {
  display: block;
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-band__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-band__sizes li {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-label);
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.product-band__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.25rem;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0;
  list-style: none;
  border-block: 1px solid var(--border);
}

.product-band__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.product-band__features .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1.5px solid var(--maroon);
  border-radius: 50%;
  color: var(--accent);
}

/* A row of the eight shade chips leading down to the shade card. */
.product-band__shade-link {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.product-band__shade-link .icon { color: var(--accent); transition: transform var(--dur) var(--ease); }
.product-band__shade-link:hover .icon { transform: translateY(2px) rotate(90deg); }

.product-band__shade-dots { display: flex; padding-left: 0.5rem; }

.product-band__shade-dots span {
  width: 30px;
  height: 30px;
  margin-left: -0.5rem;
  border: 2px solid var(--bg-alt);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

/* The shade card: the eight shades side by side as on the brand's printed
   card. On a wide screen the shade under the pointer opens out; on a phone
   they wrap four to a row. */
.shade-card { margin: clamp(3rem, 6vw, 5rem) 0 0; }

.shade-card__strip {
  display: flex;
  height: clamp(300px, 30vw, 420px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 30px 60px -28px rgba(38, 34, 31, 0.45);
}

.shade {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow var(--dur-slow) var(--ease-out);
}

.shade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.shade__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 0.5rem 0.875rem;
  background: linear-gradient(to top, rgba(20, 14, 12, 0.72), rgba(20, 14, 12, 0));
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) and (min-width: 700px) {
  .shade:hover { flex-grow: 2.2; }
}

/* Eight narrow columns on a tablet: let a long name like "Salt & Pepper"
   take two lines instead of running into the next shade. */
@media (max-width: 1199px) {
  .shade__name { padding-inline: 0.25rem; letter-spacing: 0.06em; white-space: normal; }
}

.shade-card__caption {
  max-width: 46ch;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 699px) {
  .product-band__shade-link { gap: 0.625rem; }
  .product-band__shade-dots span { width: 24px; height: 24px; margin-left: -0.4rem; }
  .shade-card__strip { flex-wrap: wrap; height: auto; border-radius: 18px; }
  .shade { flex: 1 1 25%; height: 150px; }
  .shade__name { padding: 1.75rem 0.25rem 0.625rem; font-size: 0.75rem; letter-spacing: 0; text-transform: none; white-space: normal; }
  .shade-card__caption { font-size: var(--fs-base); }
}

.product-band__actions { margin-top: var(--space-6); }

@media (max-width: 960px) {
  .product-band__grid { grid-template-columns: minmax(0, 1fr); }
  .product-band__media { position: static; }
  .product-band__lede { max-width: none; }
}

@media (max-width: 699px) {
  .product-band__media { max-width: 30rem; margin-inline: auto; }
  .product-band__features { gap: 0.75rem; }
  .product-band__features li { gap: 0.5rem; font-size: 0.8125rem; }
  .product-band__features .icon { width: 34px; height: 34px; padding: 7px; }
}

/* -------------------------------------------------------------- homepage */

/* Accented words in a heading on a dark band take the champagne sweep, as
   the maroon one would vanish into the background. */
.section--dark h2 .accent,
.home-product h2 .accent {
  background: var(--maroon-sweep-light);
  -webkit-background-clip: text;
  background-clip: text;
}

.link-arrow--light { color: var(--champagne); }
.link-arrow--light:hover { color: var(--ivory); }

.home-shades .section-head__text,
.home-work .section-head__text { text-wrap: balance; }

.home-work .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 899px) {
  .home-work .section-head--split { grid-template-columns: minmax(0, 1fr); }
}

/* --- what is marble texture paint ----------------------------------------- */

.home-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.home-intro__body h2 { max-width: 14ch; }
.home-intro__body .lede { margin: 0 0 var(--space-5); }
.home-intro__body .prose { margin-bottom: var(--space-5); }

.home-intro__media {
  position: relative;
  isolation: isolate;
  margin: 0 1.5rem 1.5rem 0;
}

/* A maroon board set off behind the photo. */
.home-intro__media::before {
  content: '';
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--maroon-field);
}

.home-intro__frame {
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone);
  box-shadow: var(--shadow-md);
}

.home-intro__frame img { width: 100%; height: 100%; object-fit: cover; }

/* A round seal on the corner of the photo, its words slowly turning. */
.home-intro__seal {
  position: absolute;
  top: -2.25rem;
  left: -2.25rem;
  width: clamp(6rem, 9vw, 7.75rem);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(38, 34, 31, 0.25));
}

.home-intro__seal circle { fill: var(--warm-white); }

.home-intro__seal text {
  font-family: var(--font-sans);
  font-size: 9.4px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--maroon);
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: seal-turn 28s linear infinite;
}

.home-intro__seal-mark { fill: var(--maroon); }

@keyframes seal-turn { to { transform: rotate(360deg); } }

@media (max-width: 899px) {
  .home-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .home-intro__media { max-width: 34rem; margin-left: 1.25rem; }
  .home-intro__seal { top: auto; bottom: -1.75rem; left: -1.25rem; }
}

/* --- shade picker --------------------------------------------------------- */

.shade-picker { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }

.shade-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.25rem, 1.2vw, 1rem);
}

.shade-swatch {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: 6rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: color var(--dur) var(--ease);
}

.shade-swatch__chip {
  display: block;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 1px rgba(38, 34, 31, 0.12), 0 8px 16px -8px rgba(38, 34, 31, 0.5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.shade-swatch__chip img { width: 100%; height: 100%; object-fit: cover; }

.shade-swatch:hover { color: var(--ink); }
.shade-swatch:hover .shade-swatch__chip { transform: translateY(-3px); }
.shade-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shade-swatch[aria-selected='true'] { color: var(--ink); }

.shade-swatch[aria-selected='true'] .shade-swatch__chip {
  box-shadow: 0 0 0 3px var(--bg-alt), 0 0 0 5px var(--maroon), 0 12px 22px -10px rgba(38, 34, 31, 0.55);
}

.shade-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas:
    'closeup info'
    'closeup wall';
  grid-template-rows: auto 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--warm-white);
  box-shadow: var(--shadow-md);
}

.shade-panel:not([hidden]) { animation: panel-in var(--dur-slow) var(--ease-out); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.shade-panel__closeup,
.shade-panel__wall {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone);
}

.shade-panel__closeup { grid-area: closeup; align-self: stretch; min-height: clamp(20rem, 32vw, 30rem); }
.shade-panel__wall { grid-area: wall; min-height: 12rem; margin-right: clamp(0rem, 1.5vw, 0.75rem); }

.shade-panel__closeup img,
.shade-panel__wall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shade-panel__tag {
  position: absolute;
  left: 0.875rem;
  top: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 14, 12, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shade-panel__info {
  grid-area: info;
  align-self: end;
  padding: clamp(0.5rem, 2vw, 1.5rem) clamp(0rem, 1.5vw, 0.75rem) 0 0;
}

.shade-panel__count {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.shade-panel__name {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.shade-panel__text {
  max-width: 34ch;
  margin: 0 0 var(--space-5);
  line-height: 1.6;
  color: var(--text-muted);
}

.shade-panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 899px) {
  .shade-panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
      'closeup wall'
      'info info';
    grid-template-rows: auto auto;
  }

  .shade-panel__closeup { min-height: 0; aspect-ratio: 4 / 3; }
  .shade-panel__wall { min-height: 0; margin-right: 0; }
  .shade-panel__info { padding: 0.25rem 0.5rem 0.5rem; }
  .shade-panel__text { max-width: none; }
}

/* Tablets: all eight in one even row. Phones: two rows of four. */
@media (max-width: 899px) {
  .shade-picker__swatches {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.25rem 0.125rem;
  }

  .shade-swatch { width: auto; font-size: 0.8125rem; padding-inline: 0; }
  .shade-swatch__chip { width: 60px; height: 60px; }
}

@media (max-width: 599px) {
  .shade-picker__swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shade-swatch { font-size: 0.75rem; }
  .shade-swatch__chip { width: 56px; height: 56px; }
  .shade-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shade-panel__closeup { aspect-ratio: 4 / 5; }
  .shade-panel__tag { left: 0.5rem; top: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
  .shade-panel__actions .btn { flex: 1 1 100%; }
}

/* --- where to use it ------------------------------------------------------ */

.home-uses .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.use-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
  margin-block: 0;
  list-style: none;
}

.use-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: clamp(24rem, 36vw, 32rem);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #1C1816;
  color: var(--ivory);
}

.use-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.use-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20, 14, 12, 0.5) 0%, rgba(20, 14, 12, 0) 24%),
    linear-gradient(to top, rgba(20, 14, 12, 0.94) 0%, rgba(20, 14, 12, 0.6) 34%, rgba(20, 14, 12, 0) 66%);
}

.use-tile:hover .use-tile__media { transform: scale(1.05); }

.use-tile__num {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--champagne);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.use-tile__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2vw + 0.85rem, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
}

.use-tile__title a { color: inherit; }

/* The whole picture is the link. */
.use-tile__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.use-tile__title a:focus-visible { outline: none; }
.use-tile:focus-within { outline: 2px solid var(--champagne); outline-offset: 3px; }

.use-tile__text {
  max-width: 30ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 253, 249, 0.82);
}

.use-tile__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 14, 12, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 249, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.use-tile:hover .use-tile__arrow { background: var(--champagne); color: var(--ink); transform: rotate(-45deg); }

@media (max-width: 1099px) {
  .use-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-tile { min-height: clamp(20rem, 52vw, 26rem); }
}

/* Phones: a row to swipe through, each card most of the screen wide. */
@media (max-width: 699px) {
  .use-tiles-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .use-tiles-wrap::-webkit-scrollbar { display: none; }

  .use-tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 20rem);
    width: max-content;
    max-width: none;
    gap: 0.75rem;
  }

  .use-tile { min-height: 25rem; scroll-snap-align: start; }
}

/* --- recent work ---------------------------------------------------------- */

.work-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(13rem, 20vw, 19rem));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.work-bento .gallery-item { margin: 0; height: 100%; border-radius: var(--radius-lg); }
.work-bento .gallery-item img { height: 100%; object-fit: cover; }
.work-bento__item:first-child { grid-row: span 2; }

.work-bento__more {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: var(--ivory);
}

.work-bento__more::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/dana/shade-golden-card.webp') center / cover no-repeat;
  opacity: 0.09;
  mix-blend-mode: screen;
}

.work-bento__more-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.4vw + 0.9rem, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.work-bento__more-text {
  max-width: 26ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 253, 249, 0.8);
}

.work-bento__more-arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--champagne);
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}

.work-bento__more:hover .work-bento__more-arrow { transform: rotate(-45deg); }

/* Without a pointer to hover with, the captions stay in view. */
@media (hover: none) {
  .work-bento .gallery-item__caption { opacity: 1; transform: none; }
}

@media (max-width: 699px) {
  .work-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(9.5rem, 40vw, 13rem);
    gap: 0.625rem;
  }

  .work-bento__item:first-child { grid-column: 1 / -1; }
  .work-bento__more { padding: 1rem; }
  .work-bento__more-title { font-size: 1.375rem; }
  .work-bento__more-arrow { top: 0.875rem; right: 0.875rem; width: 40px; height: 40px; }
  .work-bento__more-text { display: none; }
}

/* --- before and after ----------------------------------------------------- */

.home-compare__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  grid-template-areas:
    'intro stage'
    'switch stage'
    'more stage';
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.home-compare__intro { grid-area: intro; }
.home-compare__intro h2 { max-width: 12ch; }
.home-compare__intro .lede { margin: 0; }
.home-compare__stage { grid-area: stage; align-self: center; }
.home-compare__stage .compare { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.home-compare__more { grid-area: more; margin-top: var(--space-4); justify-self: start; }

.compare-switch {
  grid-area: switch;
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-6);
}

.compare-switch__btn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 56px;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--warm-white);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.compare-switch__btn img {
  flex: none;
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.compare-switch__btn:hover { border-color: var(--border-strong); color: var(--ink); }

.compare-switch__btn[aria-selected='true'] {
  border-color: var(--maroon);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--maroon), var(--shadow-sm);
}

.compare-switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 899px) {
  .home-compare__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'intro' 'stage' 'switch' 'more';
    grid-template-rows: none;
  }

  .home-compare__stage { margin-top: var(--space-6); }

  /* The comparisons become a row of thumbnails to swipe along. */
  .compare-switch {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--space-4);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.25rem var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .compare-switch::-webkit-scrollbar { display: none; }
  .compare-switch__btn { flex: 0 0 auto; width: auto; max-width: 15rem; scroll-snap-align: start; }
}

/* --- product and packs ---------------------------------------------------- */

.home-product {
  position: relative;
  isolation: isolate;
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: var(--ivory);
}

.home-product::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/dana/shade-golden-card.webp') center / cover no-repeat;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}

.home-product h2 { color: var(--ivory); }
.home-product .eyebrow { color: var(--champagne); }
.home-product .lede { max-width: 40ch; color: rgba(255, 253, 249, 0.8); }

.home-product__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.home-product__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(230, 199, 154, 0.25);
}

.home-product__media img { display: block; width: 100%; height: auto; }

.home-product__label {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--champagne);
}

.pack-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 26rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem 0.875rem;
  border: 1px solid rgba(230, 199, 154, 0.35);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.05);
  text-align: center;
}

.pack-size .icon { width: 26px; height: 26px; color: var(--champagne); }
.pack-size > span { font-size: var(--fs-sm); color: rgba(255, 253, 249, 0.78); }

.pack-size strong {
  font-family: var(--font-label);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
}

.home-product__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-6); }

.home-product__why {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(230, 199, 154, 0.25);
}

.home-product__why-title {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ivory);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.why-item__body { min-width: 0; }

.why-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(230, 199, 154, 0.12);
  box-shadow: inset 0 0 0 1px rgba(230, 199, 154, 0.3);
  color: var(--champagne);
}

.why-item__icon .icon { width: 22px; height: 22px; }

.why-item__title {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #FFFFFF;
}

.why-item__text {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 253, 249, 0.74);
}

@media (max-width: 999px) {
  .home-product__top { grid-template-columns: minmax(0, 1fr); }
  .home-product__media { max-width: 44rem; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .home-product__media { max-width: 19rem; margin-inline: auto; }
  .pack-sizes { max-width: none; }
  .home-product__actions .btn { flex: 1 1 100%; }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- how it goes on ------------------------------------------------------- */

.home-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.home-steps__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone);
  box-shadow: var(--shadow-lg);
}

.home-steps__media img { width: 100%; height: 100%; object-fit: cover; }

.home-steps__list {
  display: grid;
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.home-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding-bottom: 1.75rem;
}

.home-step:last-child { padding-bottom: 0; }

/* The line that joins one step to the next. */
.home-step::before {
  content: '';
  position: absolute;
  top: 3.75rem;
  bottom: 0.5rem;
  left: calc(1.625rem - 0.5px);
  width: 1px;
  background: var(--border-strong);
}

.home-step:last-child::before { display: none; }

.home-step__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--maroon);
  box-shadow: 0 10px 20px -10px rgba(122, 14, 34, 0.7);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
}

.home-step__title { margin: 0.6rem 0 0.35rem; font-size: var(--fs-lg); font-weight: 600; }
.home-step__text { margin: 0; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 899px) {
  .home-steps__grid { grid-template-columns: minmax(0, 1fr); }
  .home-steps__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .home-step { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; }
  .home-step__num { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
  .home-step::before { top: 3.25rem; left: calc(1.375rem - 0.5px); }
  .home-step__title { margin-top: 0.45rem; }
}

/* --- questions ------------------------------------------------------------ */

.home-faq__panel {
  border: 0;
  background-color: var(--maroon-deep);
  background-image: var(--maroon-field);
  color: var(--ivory);
}

.home-faq__panel .enquire-panel__title { color: #FFFFFF; }
.home-faq__panel .enquire-panel__text { color: rgba(255, 253, 249, 0.82); }

/* Shade-card tiles are links to each shade's page. */
.shade > a { position: absolute; inset: 0; display: block; color: inherit; }
.shade > a:focus-visible { outline-offset: -4px; }

/* ---------------------------------------------------------- products page */

/* The filter chips and the result count on one line above the grid. */
.catalogue-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-7);
}

.catalogue-bar .filters { margin: 0; }

/* Services: a numbered two-column index, no cards. */
.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
}

.service {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}

.service__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--accent);
}

.service__title { margin: 0 0 0.25rem; font-size: var(--fs-lg); font-weight: 600; }
.service__text { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }

@media (max-width: 760px) {
  .service-list { grid-template-columns: minmax(0, 1fr); }
  .service { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; }
}

/* ----------------------------------------------------------- gallery page */

.compare-list { display: grid; gap: clamp(3rem, 6vw, 5rem); max-width: 64rem; margin-inline: auto; }
.compare-item__title { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: 600; }

/* Two comparisons side by side on a wide screen, so the five do not run
   the length of five screens; an odd last one sits centred. */
@media (min-width: 900px) {
  .compare-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2rem); max-width: none; }
  .compare-list > .compare-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(0.625rem, 1.25vw, 1rem)); }
  .compare-item { gap: var(--space-4); align-content: start; }
  .compare-item__title { font-size: var(--fs-lg); }
  .compare-item__body { font-size: var(--fs-sm); }
}

/* --- about page ------------------------------------------------------------ */

/* Four photos of finished walls under the opening words. */
.about-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.625rem, 1.4vw, 1.25rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.about-photos a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bone);
}

.about-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.about-photos a:hover img { transform: scale(1.04); }

/* The story points side by side, each a short card. */
.about-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.about-point {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--border);
  border-top: 3px solid var(--maroon);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.about-point .eyebrow { margin: 0; }
.about-point__title { margin: 0; font-size: var(--fs-xl); }
.about-point__lede { margin: 0; font-weight: 500; color: var(--ink); }
.about-point__text { color: var(--text-muted); line-height: 1.65; }
.about-point__text p { margin: 0 0 var(--space-3); }
.about-point__text p:last-child { margin-bottom: 0; }
.about-point .link-arrow { margin-top: auto; align-self: flex-start; }

@media (max-width: 699px) {
  .about-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------- shade cards */

/* On the catalogue the finished-wall picture leads; the card stays quiet. */

.gallery-note {
  max-width: 60ch;
  margin: var(--space-7) auto 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}

/* The footer's shade list runs in two short columns. */
.footer-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }

/* On a phone the shades share half the footer width, so one column. */
@media (max-width: 600px) {
  .footer-list--two { grid-template-columns: minmax(0, 1fr); }
}

/* The floating WhatsApp and back-to-top buttons sit at the bottom right.
   The last two footer lines keep clear of them at the side, so the footer
   needs no tall empty band at the bottom. On a phone the body already
   leaves room for the Call / WhatsApp / Enquire bar; the back-to-top button
   sits beside the centred credit line, clear of its words. */
.footer-bottom nav { margin-right: 5.5rem; }
.footer-credit { padding-inline: 5.5rem; }

@media (max-width: 767px) {
  .site-footer { padding-bottom: var(--space-5); }
  .footer-bottom nav { margin-right: 0; }
  .footer-credit { padding-inline: 3.25rem; }
}

/* Designer credit: the last line of the page. */
.footer-credit { flex-basis: 100%; margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-dark); text-align: center; font-size: var(--fs-xs); letter-spacing: 0.04em; color: rgba(255, 253, 249, 0.55); }
.footer-credit a { color: var(--champagne); }
.footer-credit a:hover { color: var(--ivory); text-decoration: underline; }

/* Error pages: the wordmark sits above the message. */
.error-brand { display: inline-flex; margin-bottom: var(--space-8); }

/* Phone-sized tap targets for the small text links. */
.link-arrow { min-height: 44px; }
.product-band__shade-link { min-height: 44px; }
.eyebrow > a { display: inline-flex; align-items: center; min-height: 44px; }
.page--error .eyebrow { justify-content: center; }