/* =============================================================
   PROJECT BASE  (per-project system starter - copy per project, then
   make it unique). Pure custom, variable-driven, no framework.

   THE SYSTEM is reused across projects (class names, structure, the
   variable surface). THE DESIGN is unique per project: change the
   variable VALUES below and every button, card, color, and rhythm
   changes with them. Same vocabulary, different-looking site.

   Three layers:
     1. TOKENS      (:root)             <- edit per project (this is the design)
     2. PREDEFINED  (@layer base / components)  <- shared vocabulary, reads tokens
     3. UTILITIES   (@layer utilities)  <- small modifiers layered on top

   Layer order below = UTILITIES beat PREDEFINED beat BASE. No !important.
   ============================================================= */

@layer base, components, utilities;

/* Always paint the page canvas cream, independent of cascade layers / OS dark mode */
html { background-color: var(--bg); color-scheme: light; }
body { background-color: var(--bg); }

/* =============================================================
   1. TOKENS - THE DESIGN  (edit every value per project)
   Placeholder values below are only a demo. Set them from the logo,
   colors, and reference. Make each project look like nobody else's.
   ============================================================= */
:root {
  /* ---- BRAND COLORS ----
     Set the three base colors. The ramps auto-derive with relative
     color syntax (oklch) - this is the "automatic color relationships"
     idea, native. Set one color, get its tints/shades/hover. */
  --primary: #1c1813;
  --accent:  #b8924e;

  --primary-hover:       oklch(from var(--primary) calc(l - 0.06) c h);
  --primary-light:       oklch(from var(--primary) calc(l + 0.18) calc(c * 0.85) h);
  --primary-ultra-light: oklch(from var(--primary) calc(l + 0.36) calc(c * 0.45) h);
  --primary-dark:        oklch(from var(--primary) calc(l - 0.16) c h);
  --primary-ultra-dark:  oklch(from var(--primary) calc(l - 0.30) c h);
  --primary-contrast:    #f6f1e8;   /* readable text on --primary */

  --accent-hover:        oklch(from var(--accent) calc(l - 0.06) c h);
  --accent-light:        oklch(from var(--accent) calc(l + 0.18) calc(c * 0.85) h);
  --accent-ultra-light:  oklch(from var(--accent) calc(l + 0.36) calc(c * 0.45) h);
  --accent-dark:         oklch(from var(--accent) calc(l - 0.18) c h);
  --accent-contrast:     #1c1813;
  /* Text-safe accent: --accent alone is ~2.5:1 on the cream bg/surface tones
     (fails WCAG AA), but ~6.5:1+ on --dark - so accent-as-text re-scopes per
     context instead of using one flat value everywhere. */
  --accent-text:         var(--accent-dark);

  /* ---- NEUTRALS / SURFACES (explicit for full control) ---- */
  --bg:         #f4efe6;   /* page background */
  --surface:    #fbf8f2;   /* section / card background */
  --surface-2:  #ece3d2;   /* deeper surface */
  --dark:       #12100c;   /* dark sections */
  --text:       #26221c;   /* body text */
  --text-muted: #675f53;   /* secondary text */
  --text-light: #f6f1e8;   /* text on dark */
  --border-color: #e3dac9;

  /* ---- TYPE ---- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --heading-weight: 600;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.02em;
  --heading-text-wrap: balance;

  --h1: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  --h2: clamp(1.6rem, 2.2vw + 0.8rem, 2.35rem);
  --h3: clamp(1.6rem, 2vw + 1rem, 2.25rem);
  --h4: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --h5: clamp(1.1rem, 0.5vw + 1rem, 1.25rem);
  --h6: 1rem;
  --text-lead: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  --text-small: 0.875rem;

  /* ---- FLUID SPACING SCALE (one source for gaps/padding/rhythm) ---- */
  --space-2xs: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-s:   clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --space-m:   clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-l:   clamp(2rem, 1.6rem + 1.8vw, 3.5rem);
  --space-xl:  clamp(3rem, 2.4rem + 3vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 3.5rem + 4vw, 8rem);

  /* ---- LAYOUT ---- */
  --section-space: var(--space-xl);
  --content-width: 1120px;
  --content-narrow: 720px;
  --content-wide: 1320px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- RADIUS (drives the whole shape language of the site) ---- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;

  /* ---- BORDERS ---- */
  --border-width: 1px;
  --border-style: solid;

  /* ---- SHADOWS (a big lever for a site's character) ---- */
  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-m: 0 6px 20px rgb(0 0 0 / 0.08);
  --shadow-l: 0 18px 50px rgb(0 0 0 / 0.12);

  --transition: 200ms ease;

  /* ---- BUTTON SURFACE (deep, so button style is fully per-project) ---- */
  --btn-padding-block: 1.05rem;
  --btn-padding-inline: 2rem;
  --btn-radius: 3px;          /* pill by default; set 6px for squared brands */
  --btn-border-width: 1.5px;
  --btn-font-size: 1rem;
  --btn-font-weight: 600;
  --btn-transition: var(--transition);

  --btn-primary-bg: var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  --btn-primary-text: var(--primary-contrast);

  --btn-secondary-bg: var(--accent);
  --btn-secondary-bg-hover: var(--accent-hover);
  --btn-secondary-text: var(--accent-contrast);

  /* ---- CARD SURFACE (deep, so card construction is per-project) ---- */
  --card-bg: var(--surface);
  --card-padding: clamp(1.25rem, 3vw, 2rem);
  --card-radius: var(--radius-m);
  --card-border: var(--border-width) var(--border-style) var(--border-color);
  --card-shadow: none;          /* set to var(--shadow-m) for a shadowed brand */

  /* ---- HEADING ELEMENT/CLASS shared props ---- */
  --heading-font-family: var(--font-display);

  /* ---- LINKS ---- */
  --link-color: var(--primary);
  --link-decoration: underline;
  --link-underline-offset: 0.15em;

  /* ---- ICONS ---- */
  --icon-size-s: 1rem;
  --icon-size-m: 1.5rem;
  --icon-size-l: 2.25rem;
  --icon-stroke: 2;             /* stroke width for line-style SVG icons */

  /* ---- DARK RELATIONSHIPS ----
     Values a container switches to when it opts into a dark context
     (.bg--dark / .theme--dark). Everything inside auto-adapts. */
  --dark-surface:     oklch(from var(--dark) calc(l + 0.06) c h);
  --dark-surface-2:   oklch(from var(--dark) calc(l + 0.12) c h);
  --dark-text:        var(--text-light);
  --dark-text-muted:  #a6adad;
  --dark-border:      rgb(255 255 255 / 0.14);
  --dark-link:        var(--primary-light);

  /* ---- BREADCRUMB ---- */
  --breadcrumb-sep: "/";        /* set to a chevron etc per project */

  /* ---- SYSTEM KNOBS ---- */
  --grid-gap: var(--space-m);
  --grid-min: 16rem;
  --flow-space: var(--space-m);   /* auto vertical rhythm for .flow */
}

/* =============================================================
   2a. BASE  - reset + element defaults (low precedence)
   ============================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, figcaption, li { max-width: 68ch; }

  /* Headings: element AND class targeting decouples visual size from
     semantic level. <h2 class="h--4"> stays an h2, renders at h4 size. */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6,
  .h--1, .h--2, .h--3, .h--4, .h--5, .h--6 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    text-wrap: var(--heading-text-wrap);
  }
  h1, .h1, .h--1 { font-size: var(--h1); }
  h2, .h2, .h--2 { font-size: var(--h2); }
  h3, .h3, .h--3 { font-size: var(--h3); }
  h4, .h4, .h--4 { font-size: var(--h4); }
  h5, .h5, .h--5 { font-size: var(--h5); }
  h6, .h6, .h--6 { font-size: var(--h6); }

  a:where(:not([class*="btn"])) {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
    text-underline-offset: var(--link-underline-offset);
    transition: color var(--transition);
  }
  a:where(:not([class*="btn"])):hover { color: var(--primary-hover); }

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

/* =============================================================
   2b. PREDEFINED CLASSES - the shared vocabulary (use these first)
   ============================================================= */
@layer components {

  /* ---------- LAYOUT ---------- */
  .content-width        { width: min(100% - (var(--gutter) * 2), var(--content-width));  margin-inline: auto; }
  .content-width--narrow{ width: min(100% - (var(--gutter) * 2), var(--content-narrow)); margin-inline: auto; }
  .content-width--wide  { width: min(100% - (var(--gutter) * 2), var(--content-wide));   margin-inline: auto; }

  .section { padding-block: var(--section-space); }
  .section--sm { padding-block: calc(var(--section-space) * 0.6); }
  .section--lg { padding-block: calc(var(--section-space) * 1.5); }

  /* ---------- AUTO SPACING (contextual "flow" rhythm) ----------
     Adds consistent vertical space between stacked children. */
  .flow > * + * { margin-block-start: var(--flow-space); }
  .flow--tight { --flow-space: var(--space-s); }
  .flow--loose { --flow-space: var(--space-l); }

  /* ---------- AUTO GRIDS (content-responsive, no breakpoints) ---------- */
  .grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6 {
    display: grid; gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  }
  .grid--auto-2 { --grid-min: 26rem; }
  .grid--auto-3 { --grid-min: 19rem; }
  .grid--auto-4 { --grid-min: 15rem; }
  .grid--auto-5 { --grid-min: 12rem; }
  .grid--auto-6 { --grid-min: 10rem; }

  /* ---------- FIXED + RATIO GRIDS ---------- */
  .grid--2, .grid--3, .grid--4 { display: grid; gap: var(--grid-gap); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--1-2 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 2fr; }
  .grid--2-1 { display: grid; gap: var(--grid-gap); grid-template-columns: 2fr 1fr; }
  @media (max-width: 720px) {
    .grid--2, .grid--3, .grid--4, .grid--1-2, .grid--2-1 { grid-template-columns: 1fr; }
  }

  /* ---------- BUTTONS (fully variable-driven) ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid transparent;
    font-family: var(--font-body); font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight); line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--btn-transition), color var(--btn-transition), border-color var(--btn-transition);
  }
  .btn--primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
  .btn--primary:hover { background-color: var(--btn-primary-bg-hover); }
  .btn--secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
  .btn--secondary:hover { background-color: var(--btn-secondary-bg-hover); }
  .btn--outline { background-color: transparent; border-color: var(--primary); color: var(--primary); }
  .btn--outline:hover { background-color: var(--primary); color: var(--primary-contrast); }

  /* ---------- CARDS (fully variable-driven) ---------- */
  .card {
    background-color: var(--card-bg);
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
  }
  .card--dark { --card-bg: var(--dark); color: var(--text-light); --card-border: 0; }

  /* ---------- BACKGROUNDS / TEXT ---------- */
  .bg--primary       { background-color: var(--primary); color: var(--primary-contrast); }
  .bg--primary-light { background-color: var(--primary-ultra-light); color: var(--text); }
  .bg--accent        { background-color: var(--accent); color: var(--accent-contrast); }
  .bg--surface       { background-color: var(--surface); color: var(--text); }
  .bg--surface-2     { background-color: var(--surface-2); color: var(--text); }
  /* Dark relationships: opting a container into dark context re-scopes the
     tokens locally, so every card, text, border, and link inside adapts
     automatically - the ACSS "dark relationships" idea, native. */
  .bg--dark, .theme--dark {
    --bg: var(--dark);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --border-color: var(--dark-border);
    --card-bg: var(--dark-surface);
    --card-border: var(--border-width) var(--border-style) var(--dark-border);
    --link-color: var(--dark-link);
    --accent-text: var(--accent);
    background-color: var(--bg);
    color: var(--text);
  }

  .text--primary { color: var(--primary); }
  .text--accent  { color: var(--accent); }
  .text--muted   { color: var(--text-muted); }
  .text--small   { font-size: var(--text-small); }
  .text--lead    { font-size: var(--text-lead); color: var(--text-muted); }

  /* ---------- BORDERS ---------- */
  .border    { border: var(--border-width) var(--border-style) var(--border-color); }
  .border-t  { border-top: var(--border-width) var(--border-style) var(--border-color); }
  .border-b  { border-bottom: var(--border-width) var(--border-style) var(--border-color); }
  .rounded   { border-radius: var(--radius-m); }
  .rounded-l { border-radius: var(--radius-l); }

  /* ---------- ICONS (inline SVG, currentColor) ---------- */
  .icon {
    display: inline-block;
    inline-size: var(--icon-size, var(--icon-size-m));
    block-size: var(--icon-size, var(--icon-size-m));
    flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
  }
  .icon--s { --icon-size: var(--icon-size-s); }
  .icon--l { --icon-size: var(--icon-size-l); }
  .icon--fill { fill: currentColor; stroke: none; }   /* for solid icons */

  /* Icon-only button (meets 44px touch target). Needs an aria-label. */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.75rem; block-size: 2.75rem;
    border: 0; border-radius: var(--radius-s);
    background: transparent; color: inherit; cursor: pointer;
    transition: background-color var(--transition);
  }
  .icon-btn:hover { background: var(--surface-2); }

  /* Icon in a tinted container (feature icons, etc.) */
  .icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 3rem; block-size: 3rem;
    border-radius: var(--radius-m);
    background: var(--primary-ultra-light); color: var(--primary);
  }

  /* ---------- BREADCRUMB ---------- */
  .breadcrumb__list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2xs); list-style: none; font-size: var(--text-small);
  }
  .breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--text-muted); }
  .breadcrumb__item + .breadcrumb__item::before {
    content: var(--breadcrumb-sep); color: var(--text-muted); margin-inline-end: var(--space-2xs);
  }
  .breadcrumb__item[aria-current="page"] { color: var(--text); font-weight: 600; }

  /* ---------- TABS ---------- */
  .tabs__list {
    display: flex; flex-wrap: wrap; gap: var(--space-xs);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
  }
  .tabs__tab {
    padding: 0.75rem 1.1rem; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    color: var(--text-muted); font-weight: 600; cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
  }
  .tabs__tab:hover { color: var(--text); }
  .tabs__tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
  .tabs__panel { padding-block-start: var(--space-m); }
  .tabs__panel[hidden] { display: none; }

  /* ---------- MODAL ---------- */
  .modal {
    position: fixed; inset: 0; z-index: 500;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-m);
  }
  .modal.is-open { display: flex; }
  .modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
  .modal__dialog {
    position: relative; z-index: 1;
    inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh; overflow: auto;
    background: var(--bg); color: var(--text);
    border-radius: var(--radius-l); box-shadow: var(--shadow-l);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
  .modal__close { position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s); }

  /* ---------- FORMS ---------- */
  .field { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .label { font-weight: 600; font-size: var(--text-small); }
  .input, .textarea, .select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-s);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ultra-light);
  }
  .textarea { min-height: 8rem; resize: vertical; }
  .field--error .input,
  .field--error .textarea,
  .field--error .select { border-color: #c0392b; }
  .field__error { color: #c0392b; font-size: var(--text-small); }
  .field__help  { color: var(--text-muted); font-size: var(--text-small); }

  /* ---------- NAV / FOOTER STRUCTURE (behavior hooks; look is per-project) ----
     Minimal structure only. Design the visual style per project. JS drives
     the open/close and accordion state via these classes + data-attributes. */
  .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--bg); }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
  .nav__list { display: flex; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
  .nav__toggle { display: none; }   /* shown on mobile via utility/query per project */

  .footer__col > .footer__title { cursor: default; }
  /* Mobile: footer columns collapse into accordions (see .is-open in JS). */
  @media (max-width: 720px) {
    .footer__col > .footer__title { cursor: pointer; }
    .footer__col .footer__panel { display: none; }
    .footer__col.is-open .footer__panel { display: block; }
  }
}

/* =============================================================
   3. UTILITIES - small modifiers, highest precedence (token-driven)
   ============================================================= */
@layer utilities {
  /* Flex primitives */
  .flex    { display: flex; gap: var(--gap, var(--space-m)); }
  .stack   { display: flex; flex-direction: column; gap: var(--gap, var(--space-m)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-s)); }
  .flex--center  { align-items: center; justify-content: center; }
  .flex--between { align-items: center; justify-content: space-between; }
  .flex--wrap    { flex-wrap: wrap; }

  .gap--xs { --gap: var(--space-xs); }
  .gap--s  { --gap: var(--space-s); }
  .gap--m  { --gap: var(--space-m); }
  .gap--l  { --gap: var(--space-l); }

  /* Grid modifiers - customize a predefined grid with no new CSS */
  .grid--gap-s  { --grid-gap: var(--space-s); }
  .grid--gap-l  { --grid-gap: var(--space-l); }
  .grid--gap-xl { --grid-gap: var(--space-xl); }
  .grid--min-s  { --grid-min: 12rem; }
  .grid--min-l  { --grid-min: 22rem; }

  /* Spacing */
  .pad--s { padding: var(--space-s); }
  .pad--m { padding: var(--space-m); }
  .pad--l { padding: var(--space-l); }
  .mt--s  { margin-block-start: var(--space-s); }
  .mt--m  { margin-block-start: var(--space-m); }
  .mt--l  { margin-block-start: var(--space-l); }

  /* Text */
  .text--center { text-align: center; }
  .text--left   { text-align: left; }
  .text--right  { text-align: right; }
  .max-w-none   { max-width: none; }

  /* Accessibility helpers */
  .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; left: var(--space-s); top: -100%;
    background: var(--primary); color: var(--primary-contrast);
    padding: 0.6rem 1rem; border-radius: var(--radius-s); z-index: 999;
    transition: top var(--transition);
  }
  .skip-link:focus-visible { top: var(--space-s); }
}

/* =============================================================
   QUALITY FLOOR
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   HOW TO MAKE EACH PROJECT UNIQUE
   The class names stay the same across projects. To make THIS project
   look like nobody else's, change the TOKEN VALUES in Region 1:
     - a distinct --primary / --accent (ramps auto-derive)
     - a different --btn-radius / --btn-border-width (pill vs squared)
     - --card-shadow / --card-border / --card-bg (flat vs shadowed cards)
     - --font-display / --font-body pairing
     - --radius-* shape language and --space-* rhythm
     - one signature element built as a project-specific class
   Add project-only classes freely; keep them token-driven.
   ============================================================= */


/* =============================================================
   PROJECT: RUDBIG INTERIORS  (signature + block styles)
   Token-driven additions layered on the shared system.
   ============================================================= */
@layer components {

  /* ---- Signature: gold eyebrow / kicker label ---- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: var(--text-small); font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
  }
  .eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: currentColor; }
  /* On the gold (--bg--accent) section background, neither --accent-text nor
     --accent read clearly - blend toward --accent-contrast instead. */
  .eyebrow--dark { color: color-mix(in srgb, var(--accent-contrast) 85%, transparent); }
  .hl { color: var(--accent-text); }
  .tst-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-inline-size: none; margin-inline: auto; }
  .tst-head .hl { display: block; }

  /* ---- Button voice: squared, uppercase, tracked, lift on hover ---- */
  .btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
  .btn--wide { min-inline-size: 12rem; }
  @media (max-width: 560px) { .btn--wide { inline-size: 100%; } }
  .btn--outline-light { background: transparent; border-color: rgb(255 255 255 / 0.35); color: var(--text-light); }
  .btn--outline-light:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

  .section__head { max-inline-size: var(--content-narrow); margin-inline: auto; }
  .items-center { align-items: center; }

  /* ---- Media placeholder (drop real <img> here) ---- */
  .placeholder {
    position: relative; inline-size: 100%; block-size: 100%; min-block-size: 100%;
    display: grid; place-items: center; color: var(--text-muted);
    background:
      repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, transparent 12px, transparent 24px),
      var(--surface);
  }
  .placeholder__label {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--bg); color: var(--text-muted); padding: 0.35rem 0.65rem; border-radius: var(--radius-s);
  }

  /* ---- Social icons ---- */
  .social { display: inline-flex; gap: 0.5rem; }
  .social__link {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2rem; block-size: 2rem; border-radius: 50%;
    background: rgb(255 255 255 / 0.08); color: var(--dark-text-muted);
    transition: background var(--transition), color var(--transition), transform var(--transition);
  }
  .social__link:hover { background: var(--accent); color: var(--accent-contrast); transform: translateY(-2px); }

  /* ---- Header + nav ---- */
  .site-header { border-bottom: 1px solid var(--border-color); }
  .site-header__bar { padding-block: var(--space-s); }
  .brand { display: inline-flex; align-items: center; }
  .brand img { block-size: 4.5rem; inline-size: auto; }
  .nav__link {
    text-decoration: none; color: var(--text); font-weight: 500; font-size: 0.95rem;
    padding-block: 0.4rem; background: none; border: 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.35rem; transition: color var(--transition);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent); }
  .nav__cta { white-space: nowrap; }
  .nav__actions { display: flex; align-items: center; gap: var(--space-s); }
  .nav__close { display: none; }
  .nav__call { display: inline-flex; white-space: nowrap; }

  .nav__item { position: relative; }
  /* `inline-size: max-content` (not just min-inline-size) is what actually
     stops "Modern Kitchen Fitting" / "Painting and Decorating" wrapping -
     without it the box was resolving to its min-width instead of growing
     to fit the longest label. white-space: nowrap on the links backs it up. */
  .dropdown__menu {
    display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0;
    inline-size: max-content; min-inline-size: 14rem; max-inline-size: 22rem;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: var(--space-xs); z-index: 20;
  }
  .dropdown__menu::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-s);
    block-size: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }
  [data-dropdown].is-open .dropdown__menu { display: block; }
  .nav__link > svg { transition: transform var(--transition); }
  @media (min-width: 901px) {
    .dropdown__menu {
      display: block; opacity: 0; visibility: hidden;
      transform: translateY(6px) scale(0.97); transform-origin: top left;
      transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    .nav__item:hover > .dropdown__menu,
    .nav__item:focus-within > .dropdown__menu,
    [data-dropdown].is-open > .dropdown__menu { opacity: 1; visibility: visible; transform: none; }
    .nav__item:hover .nav__link > svg,
    .nav__item:focus-within .nav__link > svg { transform: rotate(180deg); }
  }
  .dropdown__menu ul { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0; }
  .dropdown__menu a {
    position: relative; display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 0.9rem 0.65rem 1.15rem; border-radius: var(--radius-s);
    text-decoration: none; color: var(--text); font-size: 0.92rem; font-weight: 500; white-space: nowrap;
    transition: background var(--transition), color var(--transition), padding-inline-start var(--transition);
  }
  .dropdown__menu a::before {
    content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; flex: 0 0 auto;
    background: var(--accent); opacity: 0.45;
    transition: opacity var(--transition), transform var(--transition);
  }
  .dropdown__menu a:hover, .dropdown__menu a:focus-visible {
    background: var(--surface-2); color: var(--accent); padding-inline-start: 1.4rem;
  }
  .dropdown__menu a:hover::before, .dropdown__menu a:focus-visible::before { opacity: 1; transform: scale(1.6); }
  .dropdown__menu li:last-child { margin-block-start: 0.3rem; padding-block-start: 0.4rem; border-block-start: 1px solid var(--border-color); }
  .dropdown__menu li:last-child a { color: var(--accent-text); font-weight: 600; }
  .dropdown__menu li:last-child a::before { display: none; }

  .nav__toggle { display: none; inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
  .nav__toggle-close { display: none; }
  .nav__backdrop { display: none; }

  @media (max-width: 900px) {
    .nav__toggle { display: inline-flex; }
    [data-nav-toggle][aria-expanded="true"] .nav__toggle-open { display: none; }
    [data-nav-toggle][aria-expanded="true"] .nav__toggle-close { display: block; }
    .nav {
      position: fixed; inset: 0; inline-size: 100%;
      background: var(--bg); flex-direction: column; align-items: stretch; justify-content: flex-start;
      gap: var(--space-m); padding: var(--space-xl) var(--space-l);
      transform: translateX(100%); transition: transform 0.35s ease; z-index: 200; overflow: auto; box-shadow: var(--shadow-l);
    }
    .nav.is-open { transform: translateX(0); }
    .nav__close { display: inline-flex; align-self: flex-end; inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text); cursor: pointer; margin-block-end: var(--space-s); }
    .nav__call { display: inline-flex; }
    .nav__actions { flex-direction: column; align-items: stretch; width: 100%; margin-block-start: var(--space-s); }
    .nav__actions .btn { width: 100%; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__list > li { border-block-end: 1px solid var(--dark-border); }
    .nav__list > li > .nav__link { display: flex; width: 100%; padding-block: var(--space-s); }
    .dropdown__menu {
      position: static; box-shadow: none; border: 0; background: none;
      padding: 0 0 0 var(--space-m); inline-size: 100%; min-inline-size: 0; max-inline-size: none;
    }
    .dropdown__menu::before { display: none; }
    .dropdown__menu a { white-space: normal; }
    .dropdown__menu li:last-child { border-block-start-color: var(--dark-border); }
    .nav__backdrop { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); opacity: 0; visibility: hidden; transition: opacity 0.35s ease; z-index: 150; }
    .nav__backdrop.is-open { opacity: 1; visibility: visible; }
  }

  /* ---- Hero (split with slider) ---- */
  .hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hero__title { text-align: center; text-wrap: balance; font-size: clamp(1.9rem, 4.5vw, 3rem); max-inline-size: none; margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-m); }
  .hero__title .hl { display: block; }
  .hero__grid > * { min-inline-size: 0; }
  .hero__media { position: relative; min-block-size: 560px; overflow: hidden; }
  .hero__content { display: flex; flex-direction: column; justify-content: center; padding: var(--space-xl) var(--space-l); }
  .hero__subtitle { font-size: var(--text-lead); font-weight: 500; }
  .hero__features { display: flex; flex-wrap: wrap; gap: var(--space-m); }
  .hero__feature { display: flex; align-items: center; gap: 0.75rem; max-inline-size: 15rem; }
  .hero__feature p { margin: 0; font-size: 0.9rem; }
  .hero__feature .icon-box { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 50%; inline-size: 3rem; block-size: 3rem; flex: 0 0 auto; }
  .hero__feature .icon-box .icon { --icon-size: 1.5rem; }
  @media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__media { min-block-size: 340px; }
    .hero__content { padding: var(--space-l) var(--gutter); }
  }

  /* ---- Slider ---- */
  .slider { position: absolute; inset: 0; }
  .slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
  .slider__slide.is-active { opacity: 1; }
  .slider__arrow {
    position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3;
    inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; border: 0;
    background: rgb(18 16 12 / 0.5); color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background var(--transition), color var(--transition);
  }
  .slider__arrow:hover { background: var(--accent); color: var(--accent-contrast); }
  .slider__arrow--prev { inset-inline-start: 1rem; }
  .slider__arrow--next { inset-inline-end: 1rem; }
  .slider__dots { position: absolute; inset-block-end: 1rem; inset-inline: 0; display: flex; gap: 0.5rem; justify-content: center; z-index: 3; }
  .slider__dot {
    position: relative; inline-size: 24px; block-size: 24px; border-radius: 50%;
    border: 0; background: transparent; cursor: pointer; padding: 0;
    display: grid; place-items: center;
  }
  .slider__dot::after {
    content: ""; inline-size: 10px; block-size: 10px; border-radius: 20px; background: rgb(255 255 255 / 0.55);
    transition: inline-size var(--transition), background var(--transition);
  }
  .slider__dot.is-active::after { inline-size: 28px; background: var(--accent); }

  /* ---- Stats band ---- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-m); overflow: hidden; }
  .stat { padding: var(--space-l) var(--space-s); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; border-inline-end: 1px solid var(--border-color); }
  .stat:last-child { border-inline-end: 0; }
  .stat .icon { color: var(--accent); }
  .stat__num { font-family: var(--font-display); font-weight: 700; font-size: var(--h2); color: var(--accent); line-height: 1; }
  .stat__label { color: var(--text-muted); font-size: var(--text-small); max-inline-size: none; }
  @media (max-width: 720px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2n) { border-inline-end: 0; }
    .stat:nth-child(-n+2) { border-block-end: 1px solid var(--border-color); }
  }

  /* ---- Feature grid (about-story): heading / media / content ---- */
  .feature-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 1fr; grid-template-areas: "media head" "media body"; column-gap: var(--space-l); align-items: center; }
  .feature-grid__head { grid-area: head; align-self: end; }
  .feature-grid__head .eyebrow { margin-block-end: var(--space-s); }
  .feature-grid__media { grid-area: media; }
  .feature-grid__body { grid-area: body; align-self: start; }
  .feature-grid--right { grid-template-areas: "head media" "body media"; }
  @media (max-width: 720px) {
    .feature-grid { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; row-gap: var(--space-m); align-items: stretch; }
  }
  .about__media { position: relative; min-block-size: 440px; margin: 0; }
  .about__media .placeholder { border-radius: var(--radius-m); }
  .about__media-a { position: absolute; inset-block-start: 20px; inset-inline-start: 0; inline-size: 54%; block-size: 400px; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-l); }
  .about__media-b { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 52%; block-size: 300px; border: 8px solid var(--bg); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-l); }
  @media (max-width: 720px) {
    .about__media { min-block-size: 0; }
    .about__media-a { position: static; inline-size: 100%; block-size: 240px; inset-block-start: auto; }
    .about__media-b { display: none; }
  }

  /* ---- Service cards (whole card clickable via stretched link) ----
     .service-card__title a::after is the stretched link. Its containing
     block must be .service-card itself (not .service-card__body) or the
     click area shrinks to just the text at the bottom - .service-card__body
     is a flex item, so it can take z-index without `position: relative`,
     leaving .service-card as the only positioned ancestor. */
  .service-card {
    position: relative; min-block-size: 420px; display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-m);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-l); }
  .service-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  .service-card__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .service-card__media img { transition: transform 500ms ease; }
  .service-card:hover .service-card__media img { transform: scale(1.08); }
  .service-card__scrim {
    position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(10 9 6 / 0.92), rgb(10 9 6 / 0.2) 55%, transparent);
    transition: background var(--transition);
  }
  .service-card:hover .service-card__scrim { background: linear-gradient(to top, rgb(10 9 6 / 0.96), rgb(10 9 6 / 0.35) 55%, transparent); }
  .service-card__body { z-index: 2; padding: var(--space-m); color: #fff; display: flex; flex-direction: column; gap: 0.6rem; }
  .service-card__body h3 { color: #fff; }
  .service-card__body p { color: rgb(246 241 232 / 0.85); font-size: 0.85rem; max-inline-size: none; }
  .service-card__title a { color: #fff; text-decoration: none; }
  .service-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .service-card__title a:focus-visible { outline: none; }
  .service-card__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
  .service-card__more svg { transition: transform var(--transition); }
  .service-card:hover .service-card__more svg { transform: translateX(4px); }

  /* ---- Blog cards (image-on-top, surface body - distinct from the dark
     hero-style .service-card so blog listings read as articles, not
     services). Same stretched-link pattern: only the h3 has an <a>,
     .blog-card__body is a flex item so its z-index doesn't need
     `position: relative`, leaving .blog-card as the ::after's containing
     block and the whole card clickable. ---- */
  .blog-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-m);
    overflow: hidden; box-shadow: var(--shadow-s);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-l); border-color: transparent; }
  .blog-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  .blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
  .blog-card__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 500ms ease; }
  .blog-card:hover .blog-card__media img { transform: scale(1.08); }
  .blog-card__body { z-index: 2; padding: var(--space-m); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
  .blog-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
  .blog-card__title { margin-block-start: 0.2rem; }
  .blog-card__title a { color: var(--text); text-decoration: none; }
  .blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .blog-card__title a:focus-visible { outline: none; }
  .blog-card__excerpt { color: var(--text-muted); font-size: 0.9rem; max-inline-size: none; flex: 1; }
  .blog-card__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; color: var(--accent-text); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
  .blog-card__more svg { transition: transform var(--transition); }
  .blog-card:hover .blog-card__more svg { transform: translateX(4px); }

  /* ---- Blog feature (hero article on the blog archive - same whole-card
     stretched-link pattern, larger side-by-side layout) ---- */
  .blog-feature {
    position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
    background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-l);
    overflow: hidden; box-shadow: var(--shadow-s);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .blog-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: transparent; }
  .blog-feature:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  .blog-feature__media { position: relative; min-block-size: 320px; margin: 0; overflow: hidden; }
  .blog-feature__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 500ms ease; }
  .blog-feature:hover .blog-feature__media img { transform: scale(1.06); }
  .blog-feature__body { z-index: 2; padding: var(--space-l); align-self: center; }
  .blog-feature__title a { color: var(--text); text-decoration: none; }
  .blog-feature__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .blog-feature__title a:focus-visible { outline: none; }
  @media (max-width: 720px) {
    .blog-feature { grid-template-columns: 1fr; }
    .blog-feature__media { min-block-size: 220px; }
  }

  /* ---- Reason cards (why choose) ---- */
  .reason-card { background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-m); padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s); transition: transform var(--transition); }
  .reason-card:hover { transform: translateY(-6px); }
  .reason-card .icon-box { background: rgb(255 255 255 / 0.92); color: var(--accent); border-radius: 50%; }
  .reason-card h3 { color: var(--accent-contrast); }
  .reason-card p { color: color-mix(in srgb, var(--accent-contrast) 82%, transparent); font-size: 0.85rem; max-inline-size: none; }
  .why__media { position: relative; margin: 0; block-size: 100%; min-block-size: 360px; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-l); }

  /* ---- Process stepper ---- */
  .process__track { block-size: 4px; background: rgb(255 255 255 / 0.4); border-radius: 4px; overflow: hidden; }
  .process__progress { block-size: 100%; inline-size: 25%; background: var(--dark); border-radius: 4px; transition: inline-size 0.5s ease; }
  .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
  .process-step {
    position: relative;
    background: var(--dark); border: 2px solid transparent; text-align: center; border-radius: var(--radius-m);
    padding: var(--space-l) var(--space-m); cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: 0.6rem; color: var(--text-light); box-shadow: var(--shadow-m);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  }
  .process-step__num { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; background: var(--accent); color: var(--accent-contrast); margin-block-end: 0.3rem; transition: transform var(--transition); }
  .process-step__title { display: block; color: #fff; }
  .process-step__desc { font-size: var(--text-small); color: rgb(255 255 255 / 0.68); max-inline-size: none; }
  .process-step:hover { transform: translateY(-6px); }
  .process-step.is-active { border-color: var(--accent); transform: translateY(-10px); box-shadow: var(--shadow-l); }
  .process-step.is-active .process-step__num { transform: scale(1.08); }
  @media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .process-steps { grid-template-columns: 1fr; } }

  /* ---- FAQ (native details/summary) ---- */
  .faq { display: flex; flex-direction: column; gap: var(--space-s); }
  .faq__item { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-m); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
  .faq__item[open] { border-color: var(--accent); box-shadow: 0 12px 28px rgb(184 146 78 / 0.18); }
  .faq__summary { list-style: none; cursor: pointer; padding: var(--space-m); display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); font-weight: 500; }
  .faq__summary::-webkit-details-marker { display: none; }
  .faq__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .faq__chevron { flex: 0 0 1.9rem; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; transition: transform var(--transition), background var(--transition), color var(--transition); }
  .faq__item[open] .faq__chevron { transform: rotate(180deg); background: var(--accent); color: var(--accent-contrast); }
  .faq__answer { padding: 0 var(--space-m) var(--space-m); color: var(--text-muted); }
  .faq--center .faq__summary { justify-content: space-between; text-align: left; }
  .faq--center .faq__answer { text-align: left; }
  .faq__answer p { max-inline-size: none; }
  .faq__item[open] .faq__answer { animation: rb-fade 0.35s ease; }

  /* ---- Testimonial carousel ---- */
  .carousel { position: relative; }
  .carousel__row { display: flex; align-items: center; gap: var(--space-m); }
  .carousel__viewport { flex: 1; overflow: hidden; }
  .carousel__track { display: flex; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
  .carousel__slide { flex: 0 0 100%; padding: 0.4rem; }
  .carousel__arrow { flex: 0 0 2.9rem; inline-size: 2.9rem; block-size: 2.9rem; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: background var(--transition), color var(--transition); }
  .carousel__arrow:hover { background: var(--accent); color: var(--accent-contrast); }
  .carousel__dots { display: flex; gap: 0.5rem; justify-content: center; margin-block-start: var(--space-m); }
  .carousel__dot {
    position: relative; inline-size: 24px; block-size: 24px; border-radius: 50%;
    border: 0; background: transparent; cursor: pointer; padding: 0;
    display: grid; place-items: center;
  }
  .carousel__dot::after {
    content: ""; inline-size: 10px; block-size: 10px; border-radius: 20px; background: var(--surface-2);
    transition: inline-size var(--transition), background var(--transition);
  }
  .carousel__dot.is-active::after { inline-size: 28px; background: var(--accent); }
  @media (max-width: 720px) { .carousel__arrow { display: none; } .carousel__slide { padding: 0; } }
  .testimonial { background: var(--surface); border-radius: var(--radius-l); padding: var(--space-xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); box-shadow: var(--shadow-m); margin: 0; }
  .testimonial__quote { font-size: var(--h5); line-height: 1.7; color: var(--text); max-inline-size: 46ch; }
  .testimonial__stars { color: var(--accent); letter-spacing: 3px; }
  .testimonial__author { display: flex; align-items: center; gap: 0.9rem; }
  .testimonial__avatar { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
  .testimonial__name { font-weight: 600; }
  .testimonial cite { font-style: normal; }
  .testimonial__meta { display: flex; flex-direction: column; align-items: flex-start; }
  @media (max-width: 520px) { .testimonial { padding: var(--space-l); } }

  /* ---- Footer ---- */
  .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-l); }
  .footer__brand-logo { block-size: 4rem; inline-size: auto; margin-block-end: var(--space-s); }
  .footer__title { color: var(--accent); margin-block-end: var(--space-s); }
  .footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; }
  .footer__links a { color: var(--dark-text-muted); text-decoration: none; transition: color var(--transition); }
  .footer__links a:hover { color: var(--accent); }
  .footer__bar-inner { padding-block: var(--space-m); }
  .footer__contact { display: flex; gap: var(--space-l); flex-wrap: wrap; }
  .footer__contact a, .footer__contact .footer__hours { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--dark-text); text-decoration: none; }
  .footer__contact a:hover { color: var(--accent); }
  .footer__contact .icon { color: var(--accent); }
  .footer__legal { background: rgb(0 0 0 / 0.35); }
  .footer__legal p { color: var(--dark-text-muted); font-size: var(--text-small); padding-block: var(--space-s); max-inline-size: none; }
  @media (max-width: 720px) {
    .footer__grid { grid-template-columns: 1fr; gap: 0; }
    .footer__col--brand { margin-block-end: var(--space-m); }
    .footer__col:not(.footer__col--brand) { border-block-start: 1px solid var(--dark-border); }
    .footer__col:not(.footer__col--brand) .footer__title { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-s); margin-block-end: 0; }
    .footer__col:not(.footer__col--brand) .footer__title::after { content: ""; inline-size: 0.7rem; block-size: 0.7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition); }
    .footer__col.is-open .footer__title::after { transform: rotate(-135deg); }
    .footer__col .footer__panel { padding-block-end: var(--space-m); }
    .footer__bar-inner { flex-direction: column; align-items: flex-start; gap: var(--space-m); }
    .footer__contact { flex-direction: column; gap: var(--space-s); }
  }

  /* ---- Breadcrumb (extends base .breadcrumb) ---- */
  .breadcrumb { padding-block: var(--space-m); }
  .breadcrumb .breadcrumb__list { margin: 0; padding: 0; }

  /* ---- Page header (inner-page hero, variant with-image) ---- */
  .page-header__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center; }
  .page-header__grid > * { min-inline-size: 0; }
  .page-header__title { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
  .page-header__media { position: relative; margin: 0; min-block-size: 380px; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); }
  @media (max-width: 900px) {
    .page-header__grid { grid-template-columns: 1fr; }
    .page-header__media { min-block-size: 260px; }
  }

  /* ---- Feature split media (image + text) ---- */
  .split-media { position: relative; margin: 0; min-block-size: 360px; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); }

  /* ---- Three-up feature cards (icons / numbered) ---- */
  .feature-card { display: flex; flex-direction: column; gap: var(--space-s); transition: transform var(--transition), box-shadow var(--transition); }
  .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
  .feature-card h3 { font-size: var(--h5); }
  .feature-card p { max-inline-size: none; color: var(--text-muted); font-size: 0.9rem; }
  .num-badge { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--accent-ultra-light); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }

  /* ---- Check list (offerings / benefits / feature lists) ---- */
  .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-s); }
  .check-list li { display: flex; align-items: flex-start; gap: 0.7rem; max-inline-size: none; }
  .check-list li::before { content: "\2713"; flex: 0 0 auto; display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.15rem; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 0.78rem; font-weight: 700; }
  .check-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s) var(--space-l); }
  @media (max-width: 560px) { .check-list--2col { grid-template-columns: 1fr; } }

  /* ---- CTA banner ---- */
  .cta-banner { background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-l); padding: var(--space-xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-m); }
  .cta-banner h2 { color: var(--accent-contrast); }
  .cta-banner p { color: color-mix(in srgb, var(--accent-contrast) 82%, transparent); max-inline-size: 60ch; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
  .chip { border: 1px solid color-mix(in srgb, var(--accent-contrast) 40%, transparent); color: var(--accent-contrast); padding: 0.35rem 0.9rem; border-radius: 999px; font-size: var(--text-small); font-weight: 500; }
}

/* ---- Scroll reveal + keyframes (unlayered) ---- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
@keyframes rb-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Card carousels on mobile: horizontal scroll-snap + swipe hint */
.card-carousel { min-inline-size: 0; }
.swipe-hint { display: none; }
@media (max-width: 720px) {
  .swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-block-end: var(--space-s); color: var(--text-muted); font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
  .swipe-hint .icon { --icon-size: 1.05rem; color: var(--accent); animation: swipe-nudge 1.4s ease-in-out infinite; }
  .swipe-track { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-m); padding-block: var(--space-m) var(--space-s); scrollbar-width: none; }
  .swipe-track::-webkit-scrollbar { display: none; }
  .swipe-track > * { flex: 0 0 80%; min-inline-size: 0; scroll-snap-align: start; }
}
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* =============================================================
   PROJECT: RUDBIG INTERIORS  (additions beyond the two supplied
   templates - contact form, breadcrumb/page-header extras used on
   inner pages, [hidden] fix). Token-driven, same layer discipline.
   ============================================================= */
@layer utilities {
  /* Layers beat specificity: without this, a components-layer display
     rule (e.g. .grid--2{display:grid}) on the same element wins over the
     browser's default [hidden]{display:none} UA rule, since utilities is
     the only layer guaranteed to be declared last. */
  [hidden] { display: none; }
}

@layer components {
  /* ---- Real <img> dropped into a fixed-size media slot (the two supplied
     templates used .placeholder divs, which size to 100%/100% by default;
     a real <img> needs the same treatment plus object-fit) ---- */
  .about__media-a img, .about__media-b img,
  .why__media img, .page-header__media img, .split-media img,
  .hero__media .slider__slide img, .service-card__media img {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%; object-fit: cover;
  }

  /* ---- contact-form (block-catalog: contact-form, variant with-details) ---- */
  .contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: start; }
  .contact-info-item { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block: var(--space-m); border-bottom: var(--border-width) var(--border-style) var(--border-color); }
  .contact-info-item:last-child { border-bottom: none; }
  .contact-info-item .icon-box { margin-block-end: var(--space-2xs); }
  .contact-form-card { background: var(--dark); color: var(--text-light); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-m); }
  .contact-form-card .label { color: inherit; }
  .contact-form-card .input,
  .contact-form-card .textarea,
  .contact-form-card .select { background-color: var(--dark-surface); border-color: var(--dark-border); color: var(--text-light); }
  .contact-form-card .btn--primary { background-color: var(--accent); color: var(--accent-contrast); }
  .contact-form-card .btn--primary:hover { background-color: var(--accent-hover); }
  .form-progress { block-size: 4px; background: rgb(255 255 255 / 0.18); border-radius: 4px; overflow: hidden; margin-block: var(--space-s) var(--space-m); }
  .form-progress > span { display: block; block-size: 100%; background: var(--accent); transition: inline-size 0.35s ease; }
  .form-message { padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); font-size: var(--text-small); }
  .form-success { background: color-mix(in srgb, #2e7d4f 20%, transparent); color: #bfe8cf; }
  .form-error   { background: color-mix(in srgb, #c0392b 20%, transparent); color: #f3c6c0; }
  .honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .map-embed { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-m); }
  .map-embed iframe { width: 100%; min-height: 380px; border: 0; display: block; }

  /* ---- Reviewer initial avatar (no real photo available) ---- */
  .testimonial__avatar { display: flex; align-items: center; justify-content: center; background: var(--accent-ultra-light); color: var(--accent); font-family: var(--font-display); font-weight: 700; }

  /* ---- FAQ answer body for non-Q&A collapsible content (cost breakdowns) ---- */
  .faq__answer .field__help { margin: 0; }

  /* ---- prose (block-catalog: content-narrative, long-form blog article body) ---- */
  .prose { color: var(--text-muted); font-size: 1.05rem; line-height: 1.75; }
  .prose > * + * { margin-block-start: var(--space-m); }
  .prose h2 {
    color: var(--text); font-family: var(--font-display); font-weight: 700;
    font-size: var(--h3); margin-block-start: var(--space-xl); margin-block-end: var(--space-s);
    padding-block-start: var(--space-l); border-block-start: var(--border-width) var(--border-style) var(--border-color);
  }
  .prose > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: none; }
  .prose h3 {
    color: var(--text); font-family: var(--font-display); font-weight: 700;
    font-size: var(--h5); margin-block-start: var(--space-l); margin-block-end: var(--space-2xs);
    display: flex; align-items: center; gap: 0.6rem;
  }
  .prose h3::before {
    content: ""; flex: 0 0 auto; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%;
    background: var(--accent);
  }
  .prose p { max-inline-size: 68ch; }
  .prose > p:first-of-type { font-size: 1.2rem; line-height: 1.6; color: var(--text); }
  .prose ul, .prose ol { padding-inline-start: 0; margin-inline-start: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); max-inline-size: 68ch; }
  .prose li { max-inline-size: none; position: relative; padding-inline-start: 1.6rem; }
  .prose ul li::before {
    content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 0.15em;
    display: inline-grid; place-items: center; inline-size: 1.1rem; block-size: 1.1rem;
    border-radius: 50%; background: var(--accent-ultra-light); color: var(--accent);
    font-size: 0.65rem; font-weight: 700;
  }
  .prose ol { counter-reset: prose-ol; }
  .prose ol li { counter-increment: prose-ol; }
  .prose ol li::before {
    content: counter(prose-ol); position: absolute; inset-inline-start: 0; inset-block-start: 0.1em;
    display: inline-grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem;
    border-radius: 50%; background: var(--accent); color: var(--accent-contrast);
    font-size: 0.7rem; font-weight: 700; font-family: var(--font-display);
  }
  .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
  .prose a:hover { color: var(--accent-hover); }
  .prose strong { color: var(--text); font-weight: 700; }

  /* ---- category pill (blog taxonomy) ---- */
  .category-pill {
    display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: 999px;
    background: var(--accent-ultra-light); color: var(--accent-dark);
    font-size: var(--text-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap;
  }
  .bg--dark .category-pill { background: rgb(255 255 255 / 0.1); color: var(--accent); }
}