/* ==========================================================================
   INTERA · BRAND LAYER
   Loaded after main.css. Built on the Brand Book (Edition 01, September 2026),
   restyled on 2026-10-06 to the owner's "classic white" direction (variant C,
   "almost like the old site"): white page, light grey bands and hairlines, grey
   running text under near-black headings, centred section heads, white swatch
   cards, Montserrat throughout. Product photos: no frame, square corners, no
   shadow. The new logo, header and footer structure and all content stay.
   The direction-specific rules are collected in the last section of this file.
   ========================================================================== */

:root {
    --ink: #1A1A1A;           /* headings, buttons, dark bands (the old site's #1A1A1A) */
    --paper: #FFFFFF;         /* the page and every light surface; also the text colour on Ink */
    --band: #F8F8F8;          /* alternate section colour (the old site's #F9F9F9) */
    --hair: #E6E6E6;          /* hairline rules and card edges (the old site's #EEE) */
    --text-body: #555555;     /* running text: 7.5:1 on white, 7.0:1 on the band */
    --text-soft: #666666;     /* captions and notes: 5.7:1 on white, 5.4:1 on the band */
    --rust: #7E4326;          /* form error frames and messages only (links and hovers are Ink / #555). Never on Ink. */
    --stainless: #A9A7A1;     /* brand token, not used in the classic direction */
    --black-iron: #2E2C2A;
    --oak: #C8A97C;

    /* main.css tokens remapped to the same palette */
    --bg-white: var(--paper);
    --bg-gray: var(--band);
    --text-dark: var(--ink);
    --text-gray: var(--text-body);
    --text-muted: var(--text-soft);
    --border-light: var(--hair);
    --border-dark: var(--ink);
    --accent: var(--ink);

    --font-text: 'Montserrat', 'Montserrat Fallback', 'Montserrat Fallback Symbols', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* codes and dimensions read in Montserrat like the line around them (classic direction:
       no typewriter face mid-sentence); the token stays so every use can switch back at once */
    --font-mono: var(--font-text);
    --rule-major: 1px solid var(--ink);
    --rule-minor: 1px solid var(--hair);
    --margin: 64px;           /* brand book p18: one margin for everything */
    --measure: 28em;          /* 45-60 characters of Montserrat 16px */
}

@media (max-width: 1024px) { :root { --margin: 40px; } }
@media (max-width: 768px)  { :root { --margin: 20px; } }

/* Metric-matched fallback so the Montserrat swap does not move the layout (owner choice 2026-10-07).
   One face per weight band, tuned on the site's own text (2026-10-12): 400 is mostly mixed-case
   running text, 500 mostly uppercase labels, 600/700 mostly uppercase headings (real Arial Bold,
   not a synthetic bold). Vertical overrides = Montserrat's 968/251 units divided by size-adjust.
   Liberation Sans and Arimo have Arial's metrics (Linux, Chrome OS); the late-swap layout shift
   measured over all 32 pages went from 1.19 to 0.10 in total, worst page 0.159 to 0.022.
   The bands cover what Montserrat itself covers (Google's latin + latin-ext ranges); every other
   character (the arrows, the approx sign, the play triangle) keeps the earlier single Arial face
   through 'Montserrat Fallback Symbols', so those glyphs look exactly as before. */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
    font-weight: 100 449;
    size-adjust: 112%;
    ascent-override: 86.43%;
    descent-override: 22.41%;
    line-gap-override: 0%;
    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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
    font-weight: 450 549;
    size-adjust: 105%;
    ascent-override: 92.19%;
    descent-override: 23.90%;
    line-gap-override: 0%;
    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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Arimo-Bold');
    font-weight: 550 900;
    size-adjust: 105%;
    ascent-override: 92.19%;
    descent-override: 23.90%;
    line-gap-override: 0%;
    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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat Fallback Symbols';
    src: local('Arial');
    size-adjust: 112.83%;
    ascent-override: 85.79%;
    descent-override: 22.25%;
    line-gap-override: 0%;
}

/* ---------- Base ---------- */
html {
    background: var(--paper);
    scroll-padding-top: 96px;
}

@media (max-width: 768px) { html { scroll-padding-top: 86px; } }

body {
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 400;
    background: var(--paper);
    color: var(--ink);
}

*, *::before, *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--ink) !important;
    outline-offset: 2px !important;
}

/* Reversed surfaces get a Paper ring: the focus ring is never removed (p19) */
.page-hero.has-media :focus-visible,
.about-teaser :focus-visible,
.promise-bar :focus-visible,
footer :focus-visible,
.cookie-banner :focus-visible,
.cta-band.pdf-strip :focus-visible {
    outline-color: var(--paper) !important;
}

.scroll-top:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid var(--paper) !important;
    outline-offset: -6px !important;
}

.scroll-top:hover:focus-visible,
.modal-close:hover:focus-visible { outline-color: var(--ink) !important; }

/* Inline links in body copy: the heading colour, underlined, as on the old site
   (the grey running text around them stays #555) */
main p a:not([class]),
main li a:not([class]) {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
}

main p a:not([class]):hover,
main li a:not([class]):hover { text-decoration-thickness: 2px; }

.about-teaser p a:not([class]) { color: var(--paper); }

strong { font-weight: 600; }

.mono,
.swatch-code,
.delivery-unit {
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.eyebrow,
.hero-tag {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink);
}

.nowrap { white-space: nowrap; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link { background: var(--ink); color: var(--paper); }

/* ---------- One margin for every block ---------- */
.container {
    max-width: none;
    padding: 0 var(--margin);
}

header,
.promise-bar {
    padding-left: var(--margin);
    padding-right: var(--margin);
}

/* ---------- Layout: content flush left, section heads centred (old site) ---------- */
section { text-align: left; }

.section-title {
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.07em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 14px 0;
}

.section-subtitle {
    color: var(--text-body);
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 600px) { .section-title { font-size: 22px; } }

.section-title,
.split-text h2,
.flagship-text h3,
.hero-text-content h1 { text-wrap: balance; }

/* running text never ends on a lone word (the .text-balance utility below still wins) */
.lead,
.section-subtitle,
.feature p,
.prose p,
.faq-list p { text-wrap: pretty; }

/* short headings and button labels break into even lines, never one orphaned word */
.faq-list summary,
.btn-primary,
.btn-outline { text-wrap: balance; }

/* a dimension is one unit: never split "3/4 in (20 mm)" across lines */
.card p .mono,
.flagship-points .mono { white-space: nowrap; }

@media (min-width: 1201px) and (max-width: 1300px) { .palette-card h3, .palette-card .palette-title { font-size: 16px; } }
@media (max-width: 340px) { .hero-text-content h1 { font-size: 27px; } }

/* ---------- Buttons: square, caps, label centred (old site proportions) ---------- */
.btn-primary,
.btn-outline {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 28px;
    min-width: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--paper) !important;
}

.btn-primary:hover {
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink) !important;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
}

.btn-outline:hover {
    background: var(--ink);
    color: var(--paper) !important;
}

.btn-text {
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
}

.btn-text:hover {
    color: var(--text-body);
    border-bottom-color: var(--text-body);
}

/* ---------- Header ---------- */
header {
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    backdrop-filter: none;
    gap: 24px;
}

.brand-logo-img {
    height: 40px;          /* 98 px wide: above the 96 px screen minimum */
    width: auto;
}

nav ul.nav-menu li a {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink);
    text-decoration: none;
}

nav ul.nav-menu li a:hover { color: var(--text-body); }

nav ul.nav-menu li a.active::after { height: 2px; background: var(--ink); }

nav ul.nav-menu li a.btn-primary {
    min-width: 0;
    padding: 12px 20px !important;
    color: var(--paper) !important;
    white-space: nowrap;
}

nav ul.nav-menu li a.btn-primary:hover { color: var(--ink) !important; }

.hamburger span { background: var(--ink); }

@media (min-width: 769px) {
    nav ul.nav-menu li a { white-space: nowrap; }      /* "IKEA SEKTION" never breaks onto two lines */
}

@media (min-width: 769px) and (max-width: 900px) {
    nav ul.nav-menu { gap: 12px; }
    nav ul.nav-menu li a { letter-spacing: 0.06em; font-size: 11px; }
    nav ul.nav-menu li a.btn-primary { padding: 10px 14px !important; }
}

@media (max-width: 768px) {
    nav ul.nav-menu {
        background: var(--paper);
        padding: 32px var(--margin);
        visibility: hidden;
        transition: left 0.3s ease, visibility 0s linear 0.3s;
    }
    nav ul.nav-menu.open {
        visibility: visible;
        transition: left 0.3s ease, visibility 0s linear 0s;
    }
    nav ul.nav-menu li a {
        font-size: 15px;
        letter-spacing: 0.16em;
        display: inline-block;
        padding: 8px 0;
    }
}

/* ---------- Homepage hero ---------- */
.hero-split { background: var(--paper); }

.hero-text-side {
    justify-content: flex-start;
    padding: 0 var(--margin);
}

.hero-text-content { max-width: 620px; }

.hero-text-content h1 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0 0 22px 0;
}

.hero-text-content p.practical {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-body);
    max-width: 460px;
    margin-bottom: 34px;
}

.hero-image-side {
    justify-content: flex-end;
    padding: 40px var(--margin) 40px 0;
}

/* the slides are studio packshots already set on the panel colour: the build put the white
   ground at exactly #F3F3F3 and left the door pixels untouched, so photo and panel are one
   surface with no edge. darken stays as a safety net for any ground lighter than the panel.
   No frame, no shadow. The slider is a size container: the caption's layout follows the
   width of the box, not of the window (the box is height-capped on short desktop windows). */
.hero-slider {
    background: #F3F3F3;
    border: none;
    overflow: visible;                  /* the narrowest boxes set the caption just under the panel */
    container: hero-slider / inline-size;
}

/* contain, not cover: on short windows the box is capped at 72vh and gets wider than 4:5;
   cover then cut the frame's top and bottom and put the caption on the door's shadow.
   With the ground at the panel colour the side bands of contain are invisible. */
.hero-slider img { mix-blend-mode: darken; object-fit: contain; }

/* Slider controls: classic round dots at the bottom left, the caption on the same line at the
   bottom right (designer, 2026-10-12: a product photo never appears without its name).
   24px hit areas (WCAG 2.5.8); the first visible dot sits 24px in from the edge, as the caption. */
.slider-dots {
    left: 16px;
    bottom: 18px;
    transform: none;
    gap: 2px;
    align-items: center;
}

.slider-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    position: relative;
    transform: none;
}

.slider-dot::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50% !important;      /* the global zero-radius rule must not square the dots */
    background: #8C8C8C;                /* 3.0:1 on the #F3F3F3 panel (WCAG 1.4.11), as the pause icon */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-dot:hover::before { background: #555555; }

.slider-dot.active { background: transparent; transform: none; }

.slider-dot.active::before { background: #1A1A1A; transform: scale(1.2); }

/* Pause / play: icon only, same quiet weight as the dots; the label stays in aria-label */
.slider-pause {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

.slider-pause::before,
.slider-pause::after {
    content: '';
    position: absolute;
    top: 7px;
    width: 2px;
    height: 10px;
    background: #8C8C8C;
    transition: background-color 0.2s ease;
}

.slider-pause::before { left: 9px; }
.slider-pause::after { left: 13px; }

.slider-pause[aria-label^="Play"]::before {
    left: 9px;
    top: 7px;
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #8C8C8C;
}

.slider-pause[aria-label^="Play"]::after { display: none; }

.slider-pause:hover { background: transparent; }
.slider-pause:hover::before,
.slider-pause:hover::after { background: #1A1A1A; }
.slider-pause[aria-label^="Play"]:hover::before { background: transparent; border-left-color: #1A1A1A; }

/* Caption: "PROFILE > NAME · Material", small uppercase in the running-text grey (#555 on the
   #F3F3F3 panel: 6.7:1). One line on the dots' line when the box has room (the longest caption
   is 311px at 11px), otherwise profile over material; it never runs under the controls
   (max-width keeps it clear of the 134px dot row). The text comes from the slide's data-caption. */
.slider-caption {
    position: absolute;
    right: 24px;
    bottom: 18px;
    z-index: 10;
    max-width: calc(100% - 190px);      /* 16 inset + 134 controls + 16 gap + 24 inset */
    margin: 0;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;                  /* one line, centred on the 24px dot row */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
    color: #555555;
    pointer-events: none;
}

.slider-caption span { white-space: nowrap; }

.slider-caption span + span::before { content: "\00B7\00A0"; }

/* boxes under 502px: profile over material, the material line on the dots' line */
@container hero-slider (max-width: 501.98px) {
    .slider-dots { left: 8px; }
    .slider-caption {
        right: 16px;
        bottom: 22px;                   /* last line centred on the dots (30px up) */
        max-width: calc(100% - 170px);  /* 8 + 134 + 12 gap + 16 */
        line-height: 16px;
        letter-spacing: 0.1em;
    }
    .slider-caption span { display: block; white-space: normal; }
    .slider-caption span + span::before { content: none; }
}

/* boxes 320-349px (375 and 360 phones): still two lines inside the panel, on the dots' line.
   The controls close up (each target stays 24x24: 8 + 5 x 24 = 128px) and the type tightens a
   little; the longest line ("SPECIALS > STAINLESS 316", 161px) keeps at least 14px clear of
   the dots (max-width: 8 + 120 controls + 12 gap + 16 inset) */
@container hero-slider (max-width: 349.98px) {
    .slider-dots { gap: 0; }
    .slider-pause { margin-left: 0; }
    .slider-caption {
        font-size: 10.5px;
        letter-spacing: 0.08em;
        max-width: calc(100% - 156px);
    }
}

/* boxes under 320px (phones under 360px): the longest caption would need three lines beside
   the dots and reach the door's shadow, so it sits just under the panel, right-aligned */
@container hero-slider (max-width: 319.98px) {
    .slider-caption {
        top: calc(100% + 10px);
        bottom: auto;
        right: 0;
        max-width: 100%;
    }
}

@media (max-width: 359.98px) {
    .pg-index .hero-image-side { padding-bottom: 64px; }   /* room for the caption under the panel */
}

@media (max-width: 900px) {
    .hero-split { align-items: stretch; }
    .hero-text-side,
    .hero-text-content { text-align: left; }
    .hero-text-content h1 { font-size: 38px; }
    .hero-buttons { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
    .hero-image-side {
        justify-content: flex-start;
        padding: 32px var(--margin) 40px;
    }
    .hero-slider { margin: 0; max-width: 460px; }
}

@media (max-width: 480px) {
    .hero-text-content h1 { font-size: 30px; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons a { width: 100%; }
}

/* ---------- Promise band (reversed: white on Ink, the old site's caps strip) ---------- */
.promise-bar {
    background: var(--ink);
    color: var(--paper);
    justify-content: space-around;
    gap: 56px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .promise-bar {
        align-items: center;           /* one centred column, as on the old site */
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;
        gap: 12px;
    }
}

/* ---------- The space within: the brand idea, right under the black bar ----------
   Designer 2026-10-12: the core of the concept. A calm white section (the owner: no more
   black), the head larger than the section titles and in sentence case, one centred
   paragraph, a hairline closing it off from the white products section below. */
.space-within {
    padding: 112px 0 104px;
    text-align: center;
    border-bottom: var(--rule-minor);
}

.space-within-title {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 44px);   /* always under the h1 (30px on phones), over the 22px section titles */
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 24px 0;
}

.space-within-text {
    max-width: 34em;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-body);
    text-wrap: balance;
}

/* the closing sentence ("We fill it, ...") starts its own line wherever it fits on one line;
   the first sentence balances above it. On the narrowest phones it runs on, so it breaks as
   "... We fill it, / made to measure and built to last." and never inside "made to measure" */
.space-within-close { display: block; }

@media (max-width: 409.98px) {
    .space-within-close { display: inline; }
}

@media (max-width: 768px) {
    .space-within { padding: 72px 0 68px; }
    .space-within-title { margin-bottom: 18px; }
    .space-within-text { font-size: 17px; }
}

/* ---------- Product cards: photo with no frame, caption centred under it ---------- */
.card { text-align: center; }

.card-img-wrapper {
    background: var(--paper);
    border: none;
    cursor: zoom-in;
}

/* Fino card: keep the milled handle groove at the top of the door in view */
.card-img-wrapper img.card-img-handle { object-position: 50% 25%; }

.card h3 {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.12em;
    border-top: none;
    padding-top: 0;
}

.card:hover h3 { color: var(--text-body); }

.card p {
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- Flagship ---------- */
.flagship-img { background: none; border: none; overflow: visible; }

.flagship-img img { border: none; }

.flagship-text h3 {
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.flagship-text p {
    color: var(--text-body);
    max-width: var(--measure);
}

.flagship-points li {
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
}

.flagship-points li::before { background: var(--ink); height: 1px; }

.img-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 10px 0 0 0;
    color: var(--text-soft);
}

@media (max-width: 900px) {
    .flagship { text-align: left; }
    .flagship-img { margin: 0; }
    .flagship-actions { justify-content: flex-start; }
}

/* ---------- Catalog palette: white cards on the grey band (old site) ---------- */
.palette-card {
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 30px 24px;
}

.palette-card:hover { border-color: #CCCCCC; }

.palette-card .btn-text { align-self: flex-start; }

.pg-index .catalog-section .grid-5 { margin-bottom: 70px; }

/* a hairline so white decors still read on the white card */
.main-swatch { border: 1px solid var(--hair); background-color: var(--paper); }
.thumb { border: 1px solid #E0E0E0; background-color: var(--paper); }

.thumb { opacity: 1; }

.thumb:hover,
.thumb:focus-visible { transform: none; outline: 1px solid var(--ink); outline-offset: 2px; }

/* The metal sources are whole panels shot on white. They show whole, like the
   old site: zoomed into the surface the black iron read as concrete. */

.palette-card h3,
.palette-card .palette-title {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 8px;
}

.palette-card p {
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.6;
}

.grid-note {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-soft);
    margin: -40px 0 40px 0;
}

/* ---------- Lead time & delivery: white cards on the grey band ---------- */
.delivery-card {
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 28px 24px;
}

.delivery-figure {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 52px;
    letter-spacing: -0.01em;
}

.delivery-unit {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.delivery-card p {
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.6;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .delivery-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ---------- Split sections: sentence-case heads as on the old site ---------- */
.split-text h2 {
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -0.01em;
    text-transform: none;
}

@media (max-width: 480px) { .split-text h2 { font-size: 24px; } }

.split-text p {
    color: var(--text-body);
    max-width: var(--measure);
}

.split-image { min-width: 0; }

.split-image img { border: none; }

/* index: the factory photo keeps one height at every width */
.split-photo { position: relative; overflow: hidden; }

.split-photo img { width: 100%; height: 420px; object-fit: cover; }

/* the app screenshot is UI: a faint hairline keeps it from floating */
.app-mockup-frame {
    background: var(--paper);
    border: 1px solid var(--hair);
}

.app-mockup-header {
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
}

.app-mockup-header .mono {
    font-size: 11px;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.app-mockup-dot { background: #D5D5D5 !important; border-radius: 50% !important; }   /* the old site's grey window dots */

.app-mockup-frame img { background: var(--paper); border: none; max-height: none; }

@media (max-width: 768px) {
    .container.split-section {
        padding: 0 var(--margin);          /* the section already carries 80px: same rhythm as every other section */
        align-items: stretch;
        text-align: left;
    }
    .split-text { padding-left: 0 !important; padding-right: 0 !important; }
    .split-wrapper.reverse .split-section { flex-direction: column-reverse; }
    .app-mockup-frame img { height: auto; }
}

@media (min-width: 769px) and (max-width: 1079px) {
    .container.split-section { flex-direction: column; align-items: stretch; gap: 40px; }
    .split-wrapper.reverse .split-section { flex-direction: column-reverse; }
    .split-text { max-width: none; padding-left: 0 !important; padding-right: 0 !important; }
    .app-mockup-frame img { height: auto; }
}

/* ---------- Galleries ----------
   Masonry tiles: the photo sits square-on, no frame, and the caption reads
   below it. Nothing is laid over the photo. */
.masonry-item {
    background: transparent;
    color: var(--ink);
    overflow: visible;
}

.masonry-item img { border: none; }

.masonry-item:hover img { transform: none; opacity: 1; }

.masonry-overlay {
    position: static;
    background: none;
    color: var(--ink);
    text-align: center;
    padding: 12px 0 0 0;
    transform: none;
    opacity: 1;
    transition: none;
}

.masonry-overlay h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0 0 4px 0;
}

.masonry-overlay p {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.masonry-item:hover .masonry-overlay h3 { color: var(--text-body); }

/* ---------- About teaser (reversed) ---------- */
.about-teaser { background: var(--ink); color: var(--paper); }

.about-teaser .section-title { color: var(--paper); }

/* running text on Ink: the old site's light grey (#CCC, 10:1 on Ink) */
.about-teaser .section-subtitle,
.about-content,
.about-teaser :is(p, li) { color: #CCCCCC; }

.about-content {
    margin: 0 auto;
    max-width: 36em;
}

.btn-outline.on-ink {
    border-color: var(--paper);
    color: var(--paper);
}

.btn-outline.on-ink:hover {
    background: var(--paper);
    color: var(--ink) !important;
}

/* ---------- Footer (reversed, the old site's #111 with its #333 top line) ---------- */
footer {
    background: #111111;
    color: var(--paper);
    text-align: left;
    border-top: 1px solid #333333;
    padding: 56px var(--margin) 40px;
}

.footer-inner { max-width: none; }

/* the KBIS line: the old site's "Next show" box inside the footer, #222 with a
   #444 edge, so no light strip sits between a dark section and the footer */
a.event-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
    row-gap: 10px;
    max-width: none;
    margin: 0 0 48px 0;
    padding: 16px 24px;
    background: #222222;
    color: var(--paper);
    border: 1px solid #444444;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-align: left;
}

a.event-banner:hover,
a.event-banner:focus,
a.event-banner:focus-visible {
    background: #333333;
    border-color: #666666;
    color: var(--paper);
}

a.event-banner:focus-visible { outline: 2px solid var(--paper) !important; outline-offset: 2px !important; }

a.event-banner span,
a.event-banner:hover span { color: inherit; font-weight: inherit; letter-spacing: inherit; }

a.event-banner .event-cta {
    margin: 0;
    color: #CCCCCC;
    font-weight: 500;
    letter-spacing: 0.2em;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

a.event-banner:hover .event-cta,
a.event-banner:focus-visible .event-cta { color: var(--paper); text-decoration-thickness: 2px; }

.footer-brand {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 16px 64px;
    flex-wrap: wrap;
    border-bottom: 1px solid #333333;
    padding-bottom: 28px;
    margin-bottom: 26px;
}

.footer-brand img { height: 48px; width: auto; }

/* the kit's Paper logo (#F1EDE8) read beige on #111: the same artwork drawn pure white */
.footer-brand img { filter: brightness(0) invert(1); }

.footer-tagline {
    margin: 0;
    font-size: 16px;
    color: #CCCCCC;
    max-width: var(--measure);
    text-wrap: balance;
}

/* the brand's signature line (designer: "the space within" is the whole concept), on every page */
.footer-signature {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

footer .footer-contact {
    justify-content: flex-start;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--paper);
    margin: 0 0 18px 0;
}

footer .footer-contact a {
    color: var(--paper);
    font-weight: 500;
    text-decoration: none;
}

footer .footer-contact a:hover,
footer .footer-contact a:focus-visible {
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}

footer .footer-contact span,
.footer-links span { color: #888888; }      /* neutral grey separators, 5.3:1 on #111 */

.footer-links {
    justify-content: flex-start;
    margin-top: 0;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.footer-links a {
    color: var(--paper);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.footer-links a:hover { color: var(--paper); border-bottom-color: var(--paper); }

.footer-legal,
.footer-copy {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #AAAAAA;
    margin: 6px 0 0 0;
}

.footer-copy { margin-top: 34px; }

@media (max-width: 1024px) {
    .footer-links span,
    footer .footer-contact span { display: none; }
    .footer-links { gap: 12px 28px; }
    footer .footer-contact { gap: 10px 28px; }
}

@media (max-width: 768px) {
    footer { padding-top: 40px; padding-bottom: 40px; }
    a.event-banner { margin-bottom: 40px; padding: 14px 16px; }
}

/* ---------- Floating UI ---------- */
.scroll-top {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--paper);
    font-weight: 500;
    /* centred in the page margin, never over the content column (45px button) */
    right: max(8px, calc((var(--margin) - 45px) / 2));
    bottom: max(8px, calc((var(--margin) - 45px) / 2));
}

@media (max-width: 768px) { .scroll-top { display: none !important; } }

.scroll-top:hover { background: var(--paper); color: var(--ink); transform: none; }

/* Hidden means hidden: never peeking at the bottom, never in the tab order */
.cookie-banner,
.cookie-banner.show {
    left: var(--margin);
    right: var(--margin);
    width: auto;
    max-width: 800px;
}

.cookie-banner {
    bottom: 30px;
    transform: translateY(calc(100% + 40px));
    visibility: hidden;
    transition: transform 0.5s ease, visibility 0s linear 0.5s;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--paper);
    text-align: left;
    align-items: flex-start;
}

.cookie-banner.show {
    transform: none;
    visibility: visible;
    transition: transform 0.5s ease, visibility 0s linear 0s;
}

.cookie-banner p,
.cookie-banner a { color: var(--paper) !important; }

.cookie-btn {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-weight: 500;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.cookie-btn:hover { background: #DDDDDD; }

.cookie-btn.decline,
.cookie-btn.decline:hover {
    background: transparent;
    color: var(--paper);
    padding-left: 0;
    padding-right: 0;
}

.cookie-btn.decline:hover { text-decoration-thickness: 2px; }

@media (max-width: 768px) {
    .cookie-banner { align-items: flex-start; text-align: left; }
}


.modal-backdrop { background: var(--ink); backdrop-filter: none; }

.modal-container { background: var(--paper); }

.modal-close { background: var(--ink); color: var(--paper); border: 1px solid var(--paper); }

.modal-close:hover { transform: none; background: var(--paper); color: var(--ink); }

.modal-media { background: var(--ink); }

/* a landscape photo or video on a phone sits on the frame, not in a 350px box */
@media (max-width: 768px) { .modal-media { min-height: 0; } }

.modal-info { background: var(--paper); }

.modal-info p { color: var(--text-body); }

/* ========== Shared page components (all pages) ==========
   One definition per component for every inner page. Markup contract and
   do/don't list: rollout/COMPONENTS.md. Page-specific rules live in
   css/brand-<group>.css, scoped under the page's body class (.pg-<file>).
   Nothing here matches an element on index.html. */

/* ---------- Defaults for unclassed headings in content ---------- */
main :where(h1, h2, h3, h4, h5, h6) { font-weight: 600; }

/* ---------- Page hero: grey band, centred type (the old inner pages) ----------
   Markup: .page-hero > .container > .page-hero-text, plus figure.page-hero-media on
   a page with a photo (.has-media): that photo becomes the full-width picture
   behind the type (see the last section of this file). */
.page-hero {
    display: block;
    min-height: 0;
    background: var(--band);
    color: var(--ink);
    border-bottom: 1px solid var(--hair);
    padding: 96px 0 88px 0;
    text-align: center;
    overflow: visible;
}

.page-hero .container {
    position: static;
    max-width: none;
    margin: 0;
}

/* the running head: caps underlined in Ink, as on the old inner pages */
.page-hero .hero-tag {
    display: inline-block;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    border: none;
    border-bottom: 2px solid var(--ink);
    padding: 0 0 6px 0;
    margin: 0 0 20px 0;
}

.page-hero h1 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 15em;
    margin: 0 auto 22px auto;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.lead,
.page-hero p.lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 34px 0;
}

.page-hero p.lead { max-width: 40em; margin-left: auto; margin-right: auto; }

.page-hero .btn-row { justify-content: center; }

.page-hero .lead:last-child,
.page-hero-text > :last-child { margin-bottom: 0; }

/* Hero with a photo (the old inner pages): the photo fills the hero behind the
   centred type under a dark scrim; the type and the buttons turn white. A caption,
   where the page has one, sits small in the bottom-right corner. */
.page-hero.has-media {
    position: relative;
    overflow: hidden;
    padding: 110px 0 100px 0;
    background: #222222;
    border-bottom: none;
}

.page-hero.has-media .page-hero-text {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.page-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 62%;
    border: none;
}

.page-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);      /* neutral, as on the old site; white type stays above 4.5:1 on a white pixel */
}

.page-hero-media .img-caption {
    position: absolute;
    right: var(--margin);
    bottom: 14px;
    z-index: 1;
    margin: 0;
    color: var(--paper);
}

.page-hero.has-media :is(.hero-tag, h1, .lead, dt, dd) { color: var(--paper); }
.page-hero.has-media .hero-tag { border-bottom-color: var(--paper); }
.page-hero.has-media .breadcrumbs ol { justify-content: center; }
.page-hero.has-media .breadcrumbs :is(a:not([class]), [aria-current]) { color: var(--paper); }
.page-hero.has-media .breadcrumbs li + li::before { color: #CCCCCC; }
.page-hero.has-media .spec-list { border-top-color: rgba(255, 255, 255, 0.5); text-align: left; }
.page-hero.has-media .spec-list > div { border-bottom-color: rgba(255, 255, 255, 0.3); }

/* buttons on the photo: white, like .on-ink (.btn-primary sets its colour with !important) */
.page-hero.has-media .btn-primary { background: var(--paper); border-color: var(--paper); color: var(--ink) !important; }
.page-hero.has-media .btn-primary:hover { background: transparent; color: var(--paper) !important; }
.page-hero.has-media .btn-outline { background: transparent; border-color: var(--paper); color: var(--paper); }
.page-hero.has-media .btn-outline:hover { background: var(--paper); color: var(--ink) !important; }

@media (max-width: 900px) {
    .page-hero h1 { font-size: 38px; }
}

@media (max-width: 768px) {
    .page-hero { padding: 56px 0 56px 0; }
    .page-hero.has-media { padding: 72px 0 64px 0; }
    .page-hero-media .img-caption { left: var(--margin); right: var(--margin); bottom: 10px; text-align: center; }
}

@media (max-width: 480px) {
    .page-hero h1 { font-size: 30px; }
    .lead,
    .page-hero p.lead { font-size: 16px; }
}

@media (max-width: 340px) { .page-hero h1 { font-size: 27px; } }

/* ---------- Button rows ---------- */
.btn-row,
.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px 20px;
}

.section-actions { margin-top: 64px; }

.btn-block {
    display: block;
    width: 100%;
    min-width: 0;
}

/* Paper button for reversed (Ink) surfaces; .btn-outline.on-ink is defined above */
.btn-primary.on-ink {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink) !important;      /* .btn-primary sets its colour with !important */
}

.btn-primary.on-ink:hover {
    background: var(--ink);
    border-color: var(--paper);
    color: var(--paper) !important;
}

button.btn-primary,
button.btn-outline { cursor: pointer; }

@media (max-width: 768px) { .section-actions { margin-top: 48px; } }

@media (max-width: 480px) {
    .btn-row > .btn-primary,
    .btn-row > .btn-outline,
    .section-actions > .btn-primary,
    .section-actions > .btn-outline { flex: 1 1 100%; }
}

/* ---------- Sub-navigation (product family, material family) ---------- */
/* full-bleed grey band (the old inner pages); its hairlines sit on the margin */
.subnav { background: var(--band); }

.subnav .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 36px;
    width: auto;
    margin: 0 var(--margin);
    padding: 0;
    border-top: var(--rule-minor);
    border-bottom: var(--rule-minor);
}

/* optional: stays under the header while the page scrolls (catalog-page had this);
   1px up so its top rule hides under the header rule instead of doubling it */
.subnav.is-sticky {
    position: sticky;
    top: 79px;
    z-index: 900;
}

.subnav a {
    display: inline-block;
    padding: 18px 0 15px 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;               /* the active bar sits on the band's rule */
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.subnav a:hover { color: var(--text-body); }

.subnav a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }

/* Focus ring drawn inside the band's height and 6px clear of the label on each
   side: an outline 2px outside the link merged with the Ink strip or the header
   rule above it and touched the first letter */
.subnav a { position: relative; }

.subnav a:focus-visible { outline: none !important; }

.subnav a:focus-visible::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 4px;
    left: -6px;
    right: -6px;
    border: 2px solid var(--ink);
    pointer-events: none;
}

/* with the band stuck under the header (79px + 52px), focus and anchors land below both */
@media (min-width: 901px) {
    html:has(.subnav.is-sticky) { scroll-padding-top: 148px; }
}

/* tighter tracking keeps the band on one line down to 901px (five catalog links) */
@media (max-width: 1200px) {
    .subnav .container { gap: 0 20px; }
    .subnav a { letter-spacing: 0.1em; }
}

@media (max-width: 1024px) { .subnav .container { gap: 0 16px; } }

/* 900px and below: the links wrap into centred rows, as on the old site; the current
   page keeps its 2px bar under its own label. The band scrolls away here. */
@media (max-width: 900px) {
    .subnav.is-sticky { position: static; }
    .subnav .container {
        justify-content: center;
        gap: 0 22px;
        padding: 6px 0;
        border-top: none;
        border-bottom: none;
    }
    .subnav a {
        padding: 10px 0 8px 0;
        margin-bottom: 0;
        letter-spacing: 0.12em;
    }
    .subnav a:focus-visible::after { top: 2px; bottom: 0; }
}

/* ---------- Sections ---------- */
/* section padding (120 / 80px) comes from main.css; a section never carries a
   background or a full-bleed rule: its .section-title draws the 2px division */
.section-compact { padding-top: 80px; padding-bottom: 80px; }

@media (max-width: 768px) { .section-compact { padding-top: 56px; padding-bottom: 56px; } }

/* ---------- Text blocks: white cards (the old specification boxes) ---------- */
.feature {
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 24px;
    text-align: left;
}

.feature-index {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

.feature h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.feature p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 12px 0;
}

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

/* a grey panel with an Ink edge, as the old about page set its client line */
.callout {
    background: var(--band);
    border-left: 3px solid var(--ink);
    padding: 20px 24px;
    margin: 48px 0;
    max-width: 40em;
}

.callout-label {
    display: block;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.callout p { font-weight: 500; font-size: 16px; line-height: 1.6; margin: 0; }

/* ---------- Long text (legal pages, narratives) ---------- */
/* one centred reading column under the centred section head (old site) */
.prose { max-width: 40em; margin-left: auto; margin-right: auto; }

.prose > :first-child { margin-top: 0; }

.prose h2 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    border-top: var(--rule-minor);
    padding-top: 16px;
    margin: 56px 0 16px 0;
}

.prose h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 40px 0 12px 0;
}

.prose p,
.prose li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: none;
}

.prose p { margin: 0 0 20px 0; }

/* .prose p (0-1-1) must not restyle a component placed inside the prose */
.prose .mono-note { font-size: 12px; line-height: 1.5; margin: 48px 0 0 0; }
.prose .callout p { margin: 0; max-width: none; }

.prose hr {
    border: none;
    border-top: var(--rule-minor);
    margin: 48px 0;
}

/* ---------- Lists ---------- */
.list-dash,
.prose ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.list-dash > li,
.prose ul > li {
    position: relative;
    padding-left: 24px;
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.list-dash > li::before,
.prose ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 12px;
    height: 1px;
    background: var(--ink);
}

.list-steps,
.prose ol {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    counter-reset: step;
    border-top: var(--rule-major);
}

.list-steps > li,
.prose ol > li {
    counter-increment: step;
    position: relative;
    padding: 16px 0 16px 56px;
    border-bottom: var(--rule-minor);
    line-height: 1.6;
    max-width: none;
}

.list-steps > li::before,
.prose ol > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- Figures and captions ---------- */
.figure { margin: 0; }

.figure img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

.figure-wide { margin: 64px 0 0 0; }

.figure .img-caption,
.card .img-caption { margin-top: 10px; }

/* .card p (0-1-1) would set a caption inside a card at 16px */
.card .img-caption { font-size: 11px; line-height: 1.5; }

.figure [role="button"],
.card[role="button"],
.masonry-item[role="button"] { cursor: zoom-in; }

/* Gallery cards: only the photo is the control (a real <button>), so the card's
   heading and spec line stay readable to screen readers. The button keeps the
   wrapper's size. */
button.card-img-wrapper,
button.masonry-zoom {
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}

button.masonry-zoom {
    margin: 0;
    border: 0;
    background: none;
}

/* the photo button clips its own zoom (main.css), so its card need not clip: the
   2px focus ring then shows on all four sides instead of only under the photo */
.card:has(> button.card-img-wrapper) { overflow: visible; }

@media (max-width: 768px) { .figure-wide { margin-top: 40px; } }

/* ---------- Spec tables and spec lists (brand book p23) ---------- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    border-top: var(--rule-major);
    text-align: left;
}

.spec-table th {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    vertical-align: bottom;
    padding: 14px 20px 12px 0;
    border-bottom: var(--rule-minor);
}

.spec-table td {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    vertical-align: top;
    white-space: nowrap;               /* a dimension or a code is one unit */
    padding: 14px 20px 14px 0;
    border-bottom: 1px solid var(--hair);
}

.spec-table tbody th,
.spec-table td:first-child {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: top;
    white-space: normal;
    padding: 13px 20px 13px 0;
    border-bottom: 1px solid var(--hair);
}

.spec-table th:last-child,
.spec-table td:last-child { text-align: right; padding-right: 0; }

.spec-table caption {
    caption-side: bottom;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 12px;
}

.spec-list {
    margin: 0;
    border-top: var(--rule-major);
}

.spec-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
}

.spec-list dt {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-top: 2px;
}

.spec-list dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .spec-list > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* ---------- Breadcrumbs (defined for later use: no page carries them yet) ---------- */
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 24px 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.breadcrumbs li + li::before {
    content: '/';
    margin: 0 10px;
    color: #999999;
}

.breadcrumbs a:not([class]) {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumbs a:not([class]):hover { color: var(--text-body); }

.breadcrumbs [aria-current="page"] { font-weight: 500; }

/* ---------- CTA band: the closing call on the light grey band, a hairline above it,
   Ink and outline buttons (the old site's "Built to last" / "Engineered for seamless
   fit" sections) ---------- */
.cta-band {
    background: var(--band);
    color: var(--ink);
    border-top: 1px solid var(--hair);
    padding: 100px 0;
}

.cta-band .section-subtitle { margin-bottom: 40px; }

.cta-band .btn-row { justify-content: center; }

@media (max-width: 768px) { .cta-band { padding: 80px 0; } }

/* the lead-time cards that follow a CTA band (shaker, IKEA) sit on white, so two grey
   bands never run into each other */
.cta-band + .delivery-section {
    background: var(--paper);
    border-top: none;
}

/* the catalog page's PDF strip stays the old site's slim Ink line (Paper text,
   Paper focus ring, .btn-outline.on-ink) */
.cta-band.pdf-strip {
    background: var(--ink);
    color: var(--paper);
    border-top: none;
}

.cta-band.pdf-strip :is(p, span) { color: var(--paper); }

/* ---------- FAQ ---------- */
.faq-list {
    max-width: 48em;
    margin: 0 auto;
    border-top: var(--rule-minor);
}

.faq-list details {
    border-bottom: var(--rule-minor);
    padding: 0;
}

.faq-list summary {
    padding: 20px 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    gap: 24px;
}

.faq-list summary:hover { color: var(--text-body); }

.faq-list summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
}

.faq-list details[open] summary::after { content: '\2212'; }

.faq-list p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 22px 0;
}

summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ---------- Forms ---------- */
/* the form is a white card with a hairline edge, as on the old contact page */
.smart-form {
    max-width: none;
    margin: 0;
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--hair);
    text-align: left;
}

.smart-form .form-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 12px 0;
    margin: 0 0 24px 0;
}

@media (max-width: 600px) { .smart-form { padding: 24px 20px; } }

.form-group { margin: 0 0 24px 0; }

.form-group label,
.form-label {
    display: block;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 8px 0;
}

.form-control {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 13px 14px;
    font-family: var(--font-text);
    font-size: 16px;                   /* 16px: iOS does not zoom the page on focus */
    line-height: 1.4;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid #8C8C8C;         /* 3.4:1 on white: the field edge stays visible (WCAG 1.4.11) */
    transition: none;
}

/* Example text reads as an example: a lighter grey that still reads (4.5:1 on white) */
.form-control::placeholder {
    color: #767676;
    opacity: 1;
    font-family: var(--font-text);
    font-size: 14px;
    letter-spacing: 0;
}

.form-control:focus {
    border-color: var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B0B0B' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* the unchosen "Select your role" state matches the placeholders */
select.form-control:invalid {
    font-size: 14px;
    color: #767676;
}

select.form-control option {
    font-family: var(--font-text);
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.form-control[aria-invalid="true"],
.form-control.is-invalid {
    border: 2px solid var(--rust);
    padding: 12px 13px;
}

select.form-control[aria-invalid="true"],
select.form-control.is-invalid { padding-right: 43px; }

/* a field the visitor has tried and left wrong gets the same Rust frame; no script needed */
.form-control:user-invalid { border: 2px solid var(--rust); padding: 12px 13px; }
select.form-control:user-invalid { padding-right: 43px; }

.form-error {
    display: block;
    margin: 8px 0 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--rust);
}

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

.form-group label.form-check,
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 16px 0;
    cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0 0;
    accent-color: var(--ink);
}

.form-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 24px 0;
}

/* Sent / failed message under a form. Its visibility stays with the page
   script (inline display), the look comes from here: no green, no red. */
.form-status {
    margin: 20px 0 0 0;
    padding: 14px 0 0 0;
    border-top: var(--rule-major);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    text-align: left;
    background: none;
}

.form-status.is-error {
    border-top-color: var(--rust);
    color: var(--rust);
}

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

/* ---------- Utilities (only where a class is clearer than a scoped rule) ---------- */
.measure { max-width: var(--measure); }
.text-balance { text-wrap: balance; }

.mono-note {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 24px 0 0 0;
}

.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-64 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; }

@media (max-width: 768px) { .mt-64 { margin-top: 48px; } }

/* ========== Pages: products ==========
   flat-page, shaker-page, handles-page, specials-page.
   Page-specific rules, every selector scoped under the page body class (.pg-<file>). */

/* ---------- Dimensions inside running text ----------
   A dimension is one unit and reads at the size of the line around it. */
:is(.pg-flat-page, .pg-shaker-page, .pg-handles-page, .pg-specials-page) :is(.lead, .section-subtitle, .feature p) .mono {
    white-space: nowrap;
}

/* ---------- Product cards: one crop for every cell ----------
   The legacy fixed height (420px, 320px on a phone) cut the top and bottom
   of the door on the taller photos and on wide two-column cells. A 4:5 cell
   (the portrait hero ratio) keeps every door whole at every width. */
:is(.pg-flat-page, .pg-shaker-page, .pg-handles-page, .pg-specials-page) .card-img-wrapper {
    height: auto;
    aspect-ratio: 4 / 5;
}

/* ---------- Shaker profile tabs (was the head <style> block) ----------
   Same language as the sub-nav: caps labels on a 1px rule, the chosen
   profile carries the 2px Ink bar. The page script toggles .active. */
.pg-shaker-page .shaker-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 40px;
    margin: 0 0 64px 0;
    border-bottom: var(--rule-minor);
}

.pg-shaker-page .tab-btn {
    display: inline-block;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin: 0 0 -1px 0;                 /* the bar sits on the row's rule */
    padding: 18px 0 15px 0;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}

.pg-shaker-page .tab-btn .mono {
    font-weight: 400;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.pg-shaker-page .tab-btn:hover { color: var(--text-body); }

.pg-shaker-page .tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.pg-shaker-page .shaker-tab-content { display: none; }

.pg-shaker-page .shaker-tab-content.active { display: block; }

/* tablets and phones: the three profiles stay one row of tabs (three equal columns,
   the width under the name) so they never read as a second copy of the sub-nav list */
@media (max-width: 768px) {
    .pg-shaker-page .shaker-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
        margin-bottom: 48px;
    }
    .pg-shaker-page .tab-btn {
        min-width: 0;
        padding: 15px 0 12px 0;
        letter-spacing: 0.16em;
        text-align: center;
    }
    .pg-shaker-page .tab-btn .tab-sep { display: none; }
    .pg-shaker-page .tab-btn .mono {
        display: block;
        margin-top: 4px;
        letter-spacing: 0;
    }
}

@media (max-width: 374px) {
    .pg-shaker-page .tab-btn .mono { font-size: 11px; white-space: normal; }
}

/* ---------- Delgado in a real kitchen: title and caption under the photo ---------- */
.pg-shaker-page .shaker-kitchen figcaption {
    margin: 25px 0 0 0;
    padding: 12px 0 0 0;
    border-top: var(--rule-minor);
}

.pg-shaker-page .shaker-kitchen figcaption h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

.pg-shaker-page .shaker-kitchen .img-caption { margin: 0; }

/* ========== Pages: catalog ==========
   catalog-page and the five material pages (melamine, laminate, acrylic,
   veneer, metals).
   Page-specific rules, every selector scoped under the page body class (.pg-<file>). */

/* ---------- Catalog overview: PDF strip (reversed band, Paper on Ink) ----------
   The strip carries .cta-band for the reversed surface (Paper text, Paper focus
   ring, .btn-outline.on-ink); here it only gets its slim height and one line. */
.pg-catalog-page .pdf-strip { padding: 20px 0; }

.pg-catalog-page .pdf-strip .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 40px;
}

.pg-catalog-page .pdf-strip span {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    max-width: 40em;
    text-align: center;                /* centred over the centred button when the line wraps (old site) */
}

.pg-catalog-page .pdf-strip .btn-outline {
    min-width: 0;
    padding: 11px 20px;
}

/* ---------- Catalog overview: the five families ----------
   The sticky sub-nav already draws the division above, so the section opens
   at 64px; the anchor (#catalogs) lands under the header and the sub-nav. */
.pg-catalog-page #catalogs { padding-top: 64px; }

.pg-catalog-page #catalogs .grid-5 { margin: 0; }

@media (max-width: 768px) { .pg-catalog-page #catalogs { padding-top: 48px; } }

/* ---------- Swatch grid: white swatch cards (the old site) ----------
   Each decor is a white card with a hairline edge: the decor scan fills the
   top (7:5, the scans are 3:2), the code and the name read under it inside
   the card. Five across on a wide screen, four for short grids. */
:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    text-align: left;
}

:is(.pg-catalog-page, .pg-catalog-metals) .swatch-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--hair);
    overflow: hidden;
    padding: 0 0 14px 0;
    transition: none;
    text-align: left;
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-item:hover {
    transform: none;
    border-color: #CCCCCC;
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 5;
    border: none;
    border-bottom: 1px solid var(--hair);
    background: var(--paper);
    overflow: hidden;
}

/* every cell is the same size and the same crop distance; the metal sources are
   whole panels shot on white and show whole, like the old site */
:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-info {
    display: block;
    padding: 0;
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-code {
    margin: 14px 16px 0 16px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    overflow-wrap: anywhere;
}

:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-desc {
    margin: 4px 16px 0 16px;
    font-family: var(--font-text);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-body);
}

/* hover and keyboard focus: the edge darkens and the code greys, as on the old site; no lift, no zoom */
:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-item:hover .swatch-code,
:is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-item:focus-visible .swatch-code {
    color: var(--text-body);
}

@media (max-width: 1200px) {
    :is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    :is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-grid,
    :is(.pg-catalog-page, .pg-catalog-metals) .swatch-grid.is-four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    :is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-grid,
    :is(.pg-catalog-page, .pg-catalog-metals) .swatch-grid.is-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    :is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-code { margin: 10px 10px 0 10px; font-size: 12px; }
    :is(.pg-catalog-page, .pg-catalog-laminate, .pg-catalog-melamine, .pg-catalog-acrylic, .pg-catalog-veneer, .pg-catalog-metals) .swatch-desc { margin: 2px 10px 0 10px; }
}

/* the five metals: one full-width column on a phone, as on the old site (two across
   left Stainless alone in half a row) */
@media (max-width: 600px) {
    .pg-catalog-metals .swatch-grid.is-four { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pg-catalog-metals .swatch-code { margin: 14px 16px 0 16px; font-size: 13px; }
    .pg-catalog-metals .swatch-desc { margin: 4px 16px 0 16px; }
}

/* ---------- Premium laminate: one library, four decor families ----------
   (was the head <style> block) The family head: a rule on top, the name in
   Montserrat caps, the decor count in small grey caps at the end of the line. */
.pg-catalog-laminate .swatch-library { padding-top: 64px; }

.pg-catalog-laminate .swatch-library .section-subtitle { margin-bottom: 0; }

.pg-catalog-laminate .category-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 24px;
    margin: 64px 0 24px 0;
    padding: 16px 0 0 0;
    border-top: var(--rule-major);
    border-bottom: none;
    text-align: left;
}

.pg-catalog-laminate .category-header .category-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}

.pg-catalog-laminate .category-header span {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

@media (max-width: 768px) {
    .pg-catalog-laminate .swatch-library { padding-top: 56px; }
    .pg-catalog-laminate .category-header { margin-top: 56px; }
}

@media (max-width: 480px) {
    .pg-catalog-laminate .category-header .category-title { font-size: 18px; }
}

/* ========== Pages: projects ==========
   projects.html and the nine case studies (rules scoped to the case studies).
   Page-specific rules, every selector scoped under the page body class (.pg-<file>). */

/* ---------- Case-study facts: a white strip under the photo hero ----------
   The hero carries only the head, the lead and the buttons (the old site's height);
   the facts read on white below it, one centred row of label over value with a
   hairline under the strip. Phones: a two-column table on hairline rows. */
.project-facts-band {
    padding: 36px 0;
    border-bottom: 1px solid var(--hair);
}

.project-facts-band .project-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 64px;
    max-width: none;
    margin: 0;
    border-top: none;
    text-align: center;
}

.project-facts-band .project-facts > div {
    display: block;
    padding: 0;
    border-bottom: none;
}

.project-facts-band .project-facts dt {
    color: var(--text-soft);
    padding: 0;
    margin: 0 0 6px 0;
}

.project-facts-band .project-facts dd {
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
}

@media (max-width: 600px) {
    .project-facts-band { padding: 8px 0 28px 0; }
    .project-facts-band .project-facts { display: block; text-align: left; }
    .project-facts-band .project-facts > div {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr);
        column-gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--hair);
    }
    .project-facts-band .project-facts dt { margin: 0; padding-top: 3px; }
    .project-facts-band .project-facts dd { font-size: 15px; }
}

/* Palo Alto: the lobby sign sits under the buttons instead of behind the head and
   the lead (wide screens only; on a phone the photo is cropped to the hero's height) */
@media (min-width: 769px) {
    .pg-project-palo-alto .page-hero-media img { object-position: 50% 2%; }
}

/* ---------- Case-study gallery: photo, name, facts line ----------
   The facts line sits close under the project name (size: .card .img-caption). */
:is(.pg-project-femina, .pg-project-final, .pg-project-kone, .pg-project-monday, .pg-project-nova,
    .pg-project-palo-alto, .pg-project-playstudios, .pg-project-plus500, .pg-project-wsc) .project-gallery .card .img-caption {
    margin: 6px 0 0 0;
}

/* Until the material, profile and frame width of each project are confirmed, these
   lines are descriptions, not specs: sentence case at reading size, not small caps */
:is(.pg-project-femina, .pg-project-final, .pg-project-kone, .pg-project-monday, .pg-project-nova,
    .pg-project-palo-alto, .pg-project-playstudios, .pg-project-plus500, .pg-project-wsc) .project-gallery .card .img-caption,
.pg-projects #gallery .masonry-overlay p {
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Portfolio masonry: one crop per gallery so the columns end level ----------
   Commercial: every photo at 3:2 (eight of nine are landscape). Residential: four
   landscape and two portrait photos cannot balance three columns, so all six take
   a square crop, each placed on its subject. The modal still opens the whole photo. */
.pg-projects #gallery .masonry-item img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.pg-projects #residential .masonry-item img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pg-projects #residential .masonry-item img.crop-top { object-position: 50% 10%; }   /* keeps the vitrine crown in frame */

/* ========== Pages: company ==========
   about-page, story-page, events, application-page.
   Page-specific rules, every selector scoped under the page body class (.pg-<file>). */

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* The space within: a quiet pull-quote that opens the story, on the reading column with a
   thin Ink rule on its left (no box, no band). A paragraph, not a heading: the story's
   h2 stays the section's first heading. */
.pg-about-page .pull-quote {
    max-width: 640px;                   /* the prose column, as the story head below */
    margin: 0 auto 64px auto;
    padding: 4px 0 4px 24px;
    border-left: 1px solid var(--ink);
}

.pg-about-page .pull-quote p {
    margin: 0;
    max-width: none;
    color: var(--text-body);
    font-size: 19px;
    line-height: 1.6;
    text-wrap: pretty;
}

.pg-about-page .pull-quote .pull-quote-head {
    color: var(--ink);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .pg-about-page .pull-quote { margin-bottom: 48px; padding-left: 18px; }
    .pg-about-page .pull-quote p { font-size: 17px; }
    .pg-about-page .pull-quote .pull-quote-head { font-size: 21px; }
}

/* the narrative ends on the callout: the section padding is the space below it */
.pg-about-page .prose > .callout:last-child { margin-bottom: 0; }

.pg-about-page .prose > p:first-child { font-size: 17px; }

/* the narrative head sits on the reading column's left edge, over the left-set prose,
   as on the old about page (a centred head over a left column read crooked on phones) */
.pg-about-page #story .section-title { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; }   /* 640px = the prose column (40em at 16px) */

/* Team: portraits with no frame, caption under the photo. Two leaders, two columns at
   every width; the row stops at 944 px so the 460 px portraits are never blown up past their size */
.pg-about-page .team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 944px;
    gap: 48px 24px;
    margin: 0 auto;
    text-align: left;
}

/* the team sits on the grey band in white cards, as on the old about page */
.pg-about-page section:has(.team-grid) { background: var(--band); }

.pg-about-page .team-member-card {
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 16px 16px 22px 16px;
    transition: none;
}

.pg-about-page .team-member-card:hover { border-color: #CCCCCC; }

.pg-about-page .team-member-avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 0 16px 0;
    padding: 12px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: var(--band);
    background-size: cover;
    background-position: center;
    border: none;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.pg-about-page .team-member-avatar.crop-top { background-position: center top; }

/* individual portraits, cut from the IWF Atlanta 2026 booth photo iwf-2026-08 (name badges
   visible in the source); the group photo stays in the hero only */
.pg-about-page .team-member-avatar.is-alex { background-image: url('../about/alex-bialostozky.webp'); background-position: center; }
.pg-about-page .team-member-avatar.is-eyal { background-image: url('../about/eyal-bialostozky.webp'); background-position: center; }

.pg-about-page .team-member-card .team-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

.pg-about-page .team-member-card p.role {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0;
}

@media (max-width: 600px) {
    .pg-about-page .team-grid { gap: 40px 12px; }
    .pg-about-page .team-member-card { padding: 8px 8px 16px 8px; }
    .pg-about-page .team-member-avatar { padding: 10px; margin-bottom: 12px; }
    .pg-about-page .team-member-card .team-name { font-size: 14px; }
    .pg-about-page .team-member-card p.role { font-size: 13px; }
}

/* ==========================================================================
   STORY: factory stations
   ========================================================================== */
.pg-story-page .station-grid { gap: 64px 24px; }

.pg-story-page .station-card {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    overflow: visible;
    transition: none;
    text-align: left;
}

.pg-story-page .station-card:hover { transform: none; }

/* The poster is a still, square-on, no frame, nothing laid over the picture:
   the play control is a small Ink square on its bottom-left corner */
.pg-story-page .station-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: var(--band);
    border: none;
    overflow: hidden;
    cursor: pointer;
}

.pg-story-page .station-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: none;
    pointer-events: none;
}

.pg-story-page .station-poster:hover img { transform: none; opacity: 1; }

.pg-story-page .station-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0 0 0;
    text-align: left;
}

.pg-story-page .station-body p.on-screen {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
}

.pg-story-page .station-body h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.pg-story-page .station-body p.desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0;
}

.pg-story-page .station-body .btn-outline { margin-top: 24px; }

/* Seven stations run in pairs, so the closing station takes the whole last row: its still
   on the left column line, its text beside it on the right one, Watch level with the frame's foot */
.pg-story-page .station-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.pg-story-page .station-card:last-child:nth-child(odd) .station-poster { align-self: start; }
.pg-story-page .station-card:last-child:nth-child(odd) .station-body { padding: 0; }

@media (max-width: 768px) {
    .pg-story-page .station-grid { gap: 56px 20px; }
    .pg-story-page .station-card:last-child:nth-child(odd) { column-gap: 20px; }
}

@media (max-width: 600px) {
    .pg-story-page .station-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-story-page .station-card:last-child:nth-child(odd) { display: flex; }
    .pg-story-page .station-card:last-child:nth-child(odd) .station-body { padding: 20px 0 0 0; }
}

/* Play control shared by the story stations and the events recap */
.pg-story-page .play-button-overlay,
.pg-events .recap-poster .play-button-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: none;
    font-size: 0;                      /* the text glyph is replaced by a drawn triangle */
    color: var(--paper);
    pointer-events: none;
}

.pg-story-page .play-button-overlay::before,
.pg-events .recap-poster .play-button-overlay::before {
    content: '';
    display: block;
    width: 13px;
    height: 16px;
    margin-left: 3px;
    background: var(--paper);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pg-story-page .station-poster:hover .play-button-overlay,
.pg-events .recap-poster:hover .play-button-overlay,
.pg-events .recap-poster:focus-visible .play-button-overlay {
    background: var(--paper);
    outline: 1px solid var(--ink);
    outline-offset: -1px;
}

.pg-story-page .station-poster:hover .play-button-overlay::before,
.pg-events .recap-poster:hover .play-button-overlay::before,
.pg-events .recap-poster:focus-visible .play-button-overlay::before { background: var(--ink); }

@media (max-width: 768px) {
    .pg-story-page .play-button-overlay { width: 40px; height: 40px; }
}

/* ==========================================================================
   EVENTS
   ========================================================================== */

/* Next show: the old site's card, a white box with a hairline edge; the date on
   an Ink panel on the left, the text beside it */
.pg-events .next-show {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--paper);
    border: 1px solid var(--hair);
    overflow: visible;
    text-align: left;
}

.pg-events .next-show-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    color: var(--paper);
    padding: 48px 40px;
}

.pg-events .next-show-date .show-name {
    display: block;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #CCCCCC;
    margin: 0 0 14px 0;
}

.pg-events .next-show-date .days {
    display: block;
    font-weight: 600;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 14px 0;
}

.pg-events .next-show-date .city {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.pg-events .next-show-date .booth {
    display: block;
    margin: 22px 0 0 0;
    padding: 14px 0 0 0;
    border-top: 1px solid #444444;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #CCCCCC;
}

.pg-events .next-show-body {
    padding: 40px 40px 44px 40px;
}

.pg-events .next-show-body h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.pg-events .next-show-body p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 14px 0;
}

.pg-events .next-show-actions { margin-top: 32px; }

/* IWF recap: the show in figures, one centred row under the centred head (old site) */
.pg-events .show-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 720px;
    margin: 0 auto 80px auto;
}

.pg-events .show-facts > div {
    text-align: center;
    border-top: none;
    padding: 0;
}

.pg-events .show-facts strong {
    display: block;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 10px 0;
}

.pg-events .show-facts span {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Recap video: portrait still on the left, text on the grid beside it */
.pg-events .recap-video {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
    align-items: center;
    text-align: left;
    margin: 0 0 80px 0;
}

.pg-events .recap-poster {
    grid-column: 1 / span 4;
    position: relative;
    max-width: none;
    margin: 0;
    background: var(--band);
    border: none;
    overflow: hidden;
    cursor: pointer;
}

.pg-events .recap-poster img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: none;
}

.pg-events .recap-poster:hover img { transform: none; opacity: 1; }

.pg-events .recap-text {
    grid-column: 6 / span 6;
}

.pg-events .recap-text h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.pg-events .recap-text h3,
.pg-events .next-show-body h3 { text-wrap: balance; }

/* the IWF recap sits on the grey band, as on the old page */
.pg-events #iwf-2026 {
    background: var(--band);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

.pg-events .recap-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0 0 14px 0;
}

.pg-events .recap-text .btn-outline { margin-top: 18px; }

/* Show photos: square-on, no frame, no hover zoom; a click opens the photo */
.pg-events .show-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.pg-events .show-gallery .card-img-wrapper {
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0;
    cursor: zoom-in;
}

.pg-events .show-gallery .card-img-wrapper img,
.pg-events .show-gallery .card-img-wrapper:hover img {
    transform: none;
    transition: none;
}

@media (max-width: 1024px) {
    .pg-events .recap-poster { grid-column: 1 / span 5; }
    .pg-events .recap-text { grid-column: 7 / -1; }
    .pg-events .show-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pg-events .next-show { grid-template-columns: minmax(0, 1fr); }
    .pg-events .next-show-date { padding: 36px 28px; }
    .pg-events .next-show-body { padding: 32px 28px 36px 28px; }
}

@media (max-width: 768px) {
    .pg-events .show-facts,
    .pg-events .recap-video { margin-bottom: 56px; }
    .pg-events .show-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 600px) {
    .pg-events .recap-poster,
    .pg-events .recap-text { grid-column: 1 / -1; }
    .pg-events .recap-poster { max-width: none; }
    .pg-events .show-facts { gap: 12px; margin-bottom: 48px; }
    .pg-events .show-facts span { letter-spacing: 0.08em; }
    .pg-events .show-facts strong { font-size: 32px; }
    .pg-events .next-show-date .days { font-size: 40px; }
}

@media (max-width: 400px) {
    .pg-events .next-show-date .days { font-size: 34px; }
}

@media (max-width: 480px) {
    .pg-events .show-gallery { gap: 12px; }
}

/* ==========================================================================
   APPLICATION: the ordering workflow
   ========================================================================== */
.pg-application-page #workflow { counter-reset: app-step; }

.pg-application-page .app-step-card {
    counter-increment: app-step;
    background: none;
    border: none;
    overflow: visible;
    margin: 0 0 80px 0;
    transition: none;
}

/* the closing button row follows the last step: the step's margin is the space */
.pg-application-page #workflow .section-actions { margin-top: 0; }

/* each step is a row on the 12-column grid, opened by a 1px rule; the
   screenshot alternates sides as before */
.pg-application-page .app-step-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;               /* the text sits level with the middle of the screenshot (old site) */
    padding: 22px 0 0 0;
    border-top: var(--rule-minor);
}

.pg-application-page .app-step-text-box {
    grid-column: 1 / span 5;
    grid-row: 1;
    text-align: left;
}

.pg-application-page .app-step-img-box {
    grid-column: 7 / -1;
    grid-row: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: zoom-in;
}

.pg-application-page .app-step-inner.reverse .app-step-img-box { grid-column: 1 / span 6; }
.pg-application-page .app-step-inner.reverse .app-step-text-box { grid-column: 8 / -1; }

.pg-application-page .app-step-text-box::before {
    content: counter(app-step, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

.pg-application-page .app-step-text-box h3 {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    text-wrap: balance;
}

.pg-application-page .app-step-text-box p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--measure);
    margin: 0;
}

/* the screenshots are UI: a faint hairline keeps them from floating */
.pg-application-page .app-step-img-box img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--paper);
    border: 1px solid var(--hair);
}

/* the screenshots are about 750px wide: in the one-column layout they stop at
   640px instead of being stretched across the full width */
@media (max-width: 900px) {
    .pg-application-page .app-step-img-box { max-width: 640px; }
}

@media (max-width: 900px) {
    .pg-application-page .app-step-inner { row-gap: 24px; align-items: start; }
    .pg-application-page .app-step-text-box,
    .pg-application-page .app-step-inner.reverse .app-step-text-box { grid-column: 1 / -1; grid-row: 1; }
    .pg-application-page .app-step-img-box,
    .pg-application-page .app-step-inner.reverse .app-step-img-box { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 768px) {
    .pg-application-page .app-step-card { margin-bottom: 56px; }
}

/* ========== Pages: forms ==========
   contact-page, get-catalog, thank-you, privacy, accessibility.
   Page-specific rules, every selector scoped under the page body class (.pg-<file>). */

/* ---------- Two-column blocks on the 12-column grid ----------
   contact: details in columns 1 to 4, form in 6 to 12
   catalog: preview in columns 1 to 6, form in 8 to 12 */
.pg-contact-page .contact-grid,
.pg-get-catalog .catalog-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    text-align: left;
}

.pg-contact-page .contact-grid > :first-child { grid-column: 1 / span 4; min-width: 0; }
.pg-contact-page .contact-grid > :last-child { grid-column: 6 / -1; min-width: 0; }

.pg-get-catalog .catalog-grid > :first-child { grid-column: 1 / span 6; min-width: 0; }
.pg-get-catalog .catalog-grid > :last-child { grid-column: 8 / -1; min-width: 0; }

@media (max-width: 1200px) {
    .pg-contact-page .contact-grid > :first-child { grid-column: 1 / span 5; }
    .pg-contact-page .contact-grid > :last-child { grid-column: 7 / -1; }
}

@media (max-width: 900px) {
    .pg-contact-page .contact-grid,
    .pg-get-catalog .catalog-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 64px;
    }
    .pg-contact-page .contact-grid > :first-child,
    .pg-contact-page .contact-grid > :last-child,
    .pg-get-catalog .catalog-grid > :first-child,
    .pg-get-catalog .catalog-grid > :last-child { grid-column: 1 / -1; }
    .pg-contact-page .contact-info-card,
    .pg-contact-page .smart-form,
    .pg-get-catalog .smart-form { max-width: 40em; }
}

@media (max-width: 768px) {
    .pg-contact-page .contact-grid,
    .pg-get-catalog .catalog-grid { row-gap: 48px; }
}

/* ---------- Contact: trade details, a white card like the form beside it ---------- */
.pg-contact-page .contact-info-card {
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 32px;
}

.pg-contact-page .contact-info-card .info-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 12px 0;
    margin: 0 0 24px 0;
}

@media (max-width: 600px) { .pg-contact-page .contact-info-card { padding: 24px 20px; } }

/* label + value rows, divided like a spec list (brand book p23) */
.pg-contact-page .info-block {
    border-top: 1px solid var(--hair);
    padding: 14px 0 0 0;
    margin: 0 0 24px 0;
}

.pg-contact-page .info-block:last-child { margin-bottom: 0; }

/* the title's Ink underline already opens the first block */
.pg-contact-page .info-title + .info-block { border-top: none; padding-top: 0; }

.pg-contact-page .info-block .info-label {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 8px 0;
}

.pg-contact-page .info-block p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

.pg-contact-page .info-key { font-weight: 600; }

/* phone, email and handle: underlined in the heading colour, like every inline link */
.pg-contact-page .info-block a[href^="tel:"],
.pg-contact-page .info-block a[href^="mailto:"],
.pg-contact-page .info-block .ig-link {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.pg-contact-page .info-block a:hover { text-decoration-thickness: 2px; }

/* ---------- Forms: what the shared layer leaves to the page ---------- */
.pg-contact-page .smart-form .btn-block,
.pg-get-catalog .smart-form .btn-block {
    margin-top: 8px;
    padding: 17px 24px;
}

.pg-contact-page .smart-form button[disabled],
.pg-get-catalog .smart-form button[disabled] { cursor: progress; }

/* ---------- Get the catalog: preview and contents ---------- */
.pg-get-catalog .catalog-preview { margin: 0; }

.pg-get-catalog .catalog-preview img {
    aspect-ratio: 1200 / 678;
    object-fit: cover;
    background: var(--paper);
}

.pg-get-catalog .catalog-points {
    list-style: none;
    padding: 0;
    margin: 40px 0 0 0;
    border-top: var(--rule-major);
    max-width: 40em;
}

.pg-get-catalog .catalog-points li {
    position: relative;
    padding: 14px 0 14px 28px;
    border-bottom: var(--rule-minor);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
}

.pg-get-catalog .catalog-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(14px + 0.8em);
    width: 12px;
    height: 1px;
    background: var(--ink);
}

.pg-get-catalog .catalog-points .mono { white-space: nowrap; }

/* ---------- Thank you ---------- */
/* the three variants are shown by removing [hidden]: never set their display */
.pg-thank-you .thanks-hero { min-height: 60vh; }

.pg-thank-you .thanks-card {
    max-width: 40em;
    margin: 72px auto 0 auto;
    text-align: left;
}

.pg-thank-you .thanks-card .thanks-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.pg-thank-you .next-steps { margin: 0; }

.pg-thank-you .next-steps li {
    font-size: 16px;
    color: var(--text-body);
}

.pg-thank-you .next-steps strong { color: var(--ink); }

/* 404: the way-out list reads as one centred column under its centred head */
.pg-404 .list-dash { max-width: 34em; margin: 0 auto; }

/* file size under the download label: a small spec line */
.pg-thank-you .dl-size {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .pg-thank-you .thanks-hero { min-height: 0; }
    .pg-thank-you .thanks-card { margin-top: 56px; }
}

/* ---------- Privacy and accessibility: legal prose ---------- */
.pg-privacy .prose code,
.pg-accessibility .prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    letter-spacing: 0;
    background: none;
    padding: 0;
}

/* the opt-out confirmation sits inside a paragraph; the script shows it */
.pg-privacy #optOutConfirmation { max-width: var(--measure); }

.pg-accessibility .callout { margin: 32px 0 0 0; }

.pg-accessibility .callout a[href^="tel:"],
.pg-accessibility .callout a[href^="mailto:"] {
    font-family: var(--font-mono);
    font-size: 15px;
    overflow-wrap: anywhere;
}

/* the CCPA opt-out link acts as a control: a touch more weight than prose links */
.pg-privacy .prose a[onclick] { font-weight: 500; }

/* a phone number is one unit: never split it across lines */
.pg-contact-page .info-block a[href^="tel:"],
.pg-privacy .prose a[href^="tel:"],
.pg-accessibility .prose a[href^="tel:"] { white-space: nowrap; }

/* long URLs and emails in legal prose may break rather than push the page sideways */
.pg-privacy .prose p,
.pg-accessibility .prose p,
.pg-accessibility .prose li { overflow-wrap: break-word; }

/* ========== Pages: ikea ==========
   ikea-sektion-cabinet-doors (fronts for IKEA SEKTION).
   Every selector scoped under the page body class. */

/* a dimension is one unit: never split across lines */
.pg-ikea-sektion-cabinet-doors :is(.lead, .section-subtitle, .feature p, .card p, .faq-list p, .list-steps li) .mono {
    white-space: nowrap;
}

/* breadcrumbs open the hero text, one step above the running head */
.pg-ikea-sektion-cabinet-doors .page-hero .breadcrumbs ol { margin: 0 0 20px 0; }

/* profile cards link to the product page: one 4:5 crop like the product pages,
   a plain pointer (the photo does not open a lightbox here) */
.pg-ikea-sektion-cabinet-doors .card-img-wrapper {
    height: auto;
    aspect-ratio: 4 / 5;
    cursor: pointer;
}

.pg-ikea-sektion-cabinet-doors a.card:focus-visible h3,
.pg-ikea-sektion-cabinet-doors a.card:hover h3 { color: var(--text-body); }

.pg-ikea-sektion-cabinet-doors .card p { max-width: var(--measure); }

/* phones: the four profiles stay two across, so the one-decor comparison reads as a set
   instead of four near-identical tall crops stacked one per screen */
@media (max-width: 480px) {
    .pg-ikea-sektion-cabinet-doors .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }

    .pg-ikea-sektion-cabinet-doors .profile-grid h3 { font-size: 16px; }
}

/* the spec list and the steps read as a centred column under the centred head */
.pg-ikea-sektion-cabinet-doors .spec-list { max-width: 60em; margin: 0 auto; }

.pg-ikea-sektion-cabinet-doors .list-steps { max-width: 48em; margin: 0 auto; }

.pg-ikea-sektion-cabinet-doors .list-steps > li { font-size: 16px; color: var(--text-body); }

.pg-ikea-sektion-cabinet-doors .list-steps strong { font-weight: 600; color: var(--ink); }

/* handles and specials: one running line under the grid */
.pg-ikea-sektion-cabinet-doors .range-note {
    max-width: 36em;
    margin: 40px auto 0 auto;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
}

.pg-ikea-sektion-cabinet-doors .callout { max-width: 48em; margin: 56px auto 40px auto; }

.pg-ikea-sektion-cabinet-doors .callout + .btn-row { justify-content: center; }

/* the trademark note closes the page content, on a hairline above the KBIS band */
.pg-ikea-sektion-cabinet-doors .delivery-section { padding-bottom: 80px; }

.pg-ikea-sektion-cabinet-doors .ikea-tm { padding: 0 0 80px 0; }

.pg-ikea-sektion-cabinet-doors .ikea-tm .mono-note {
    max-width: 48em;
    margin: 0 auto;
    padding: 16px 0 0 0;
    border-top: 1px solid var(--hair);
}

@media (max-width: 768px) {
    .pg-ikea-sektion-cabinet-doors .delivery-section { padding-bottom: 56px; }
    .pg-ikea-sektion-cabinet-doors .ikea-tm { padding-bottom: 56px; }
    .pg-ikea-sektion-cabinet-doors .callout { margin: 48px auto 32px auto; }
}

/* ---------- Page transition loader (brand icon loop) ---------- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0.32s;
}

html.is-leaving .page-loader,
html.is-arriving .page-loader {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0s;
}

/* No JavaScript needed to uncover: if loader.js never runs, the cover still lifts */
html.is-arriving .page-loader {
    animation: page-loader-failsafe 0.32s cubic-bezier(0.2, 0, 0, 1) 1.6s forwards;
}

@keyframes page-loader-failsafe { to { opacity: 0; visibility: hidden; } }

html.loader-snap .page-loader { transition: none !important; animation: none !important; }

/* The Lottie symbol inside a 61px box matches the 46x60 static symbol to the pixel */
.page-loader-mark {
    position: relative;
    width: 61px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader-mark > img { width: 46px; height: 60px; }

.page-loader-mark > svg { position: absolute; inset: 0; }

/* The symbol draws itself; the static mark only shows if the player is late or unavailable */
html.is-arriving:not(.loader-static) .page-loader-mark > img,
html.is-leaving:not(.loader-static) .page-loader-mark > img {
    opacity: 0;
    animation: page-loader-static-in 0.2s linear 0.6s forwards;
}

@keyframes page-loader-static-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .page-loader { display: none !important; }
    html { scroll-behavior: auto; }
    nav ul.nav-menu { transition: none !important; }
}

/* ========== Owner direction 2026-10-06: classic white (variant C) ==========
   The owner compared three variants side by side and chose C, "almost like the
   old site", and on the phone "the most normal". Most of the direction lives in
   the tokens at the top (white page, light grey band, hairlines, grey running
   text, Montserrat for codes) and in the components above; this section holds what
   only exists for it. Explicit choices: product photos have no frame, square
   corners and no shadow (the global rule in Base keeps every corner square and
   every shadow off); swatches are white cards with the code and the name under
   the scan; the home headline reads in sentence case. */

/* ---------- Running text: grey under near-black heads ----------
   Any paragraph or list item in the content without its own colour reads in the
   old site's #555 (:where keeps this weaker than every component rule). */
main :where(p, li) { color: var(--text-body); }

/* ---------- Alternating bands, as on the old home and inner pages ----------
   .catalog-section, .delivery-section and .split-wrapper.reverse take the band
   and its hairlines from main.css (--bg-gray, --border-light). */
.pg-catalog-page #catalogs + section,
main section:has(.feature) {
    background: var(--band);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

/* ---------- Centred rows under centred heads ---------- */
.grid-note,
:is(.swatch-grid, .grid-5, .profile-grid) + .mono-note { text-align: center; color: var(--text-soft); }

.section-actions { justify-content: center; }

.about-teaser .about-content .mt-40 { text-align: center; }

.pg-index .catalog-section .container > .btn-primary { display: table; margin: 0 auto; }

/* tab rows sit centred, as the old inner pages had them */
@media (min-width: 769px) {
    .pg-shaker-page .shaker-tabs,
    .subnav .container { justify-content: center; }
}

/* ---------- Flagship: the old site's small "Flagship" label ---------- */
.flagship-text .hero-tag {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}