/* Alpina Plast (alpinaplast) – PVC and aluminium joinery, Dobrich.
   The look comes from the firm's own building: a cobalt wall with white windows and the red-and-navy sign.
   Pages open on that wall; the drawn windows are white PVC with the sky behind the glass (day in the light
   theme, night in the dark one), photos sit in white "window frames", and headings lean like the logo.
   Font: Geologica (SIL OFL 1.1), one variable file with weight and slant, self-hosted, Latin + Cyrillic,
   with the Bulgarian forms of the letters built in (see CONTENT_SOURCE.md, "Fonts"). */

@font-face {
    font-family: "Geologica";
    src: url("/fonts/geologica-bg.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* The same in both themes: the wall, the sign, the profiles. */
:root {
    --cobalt: #1b3fa8;
    --cobalt-deep: #132c7c;
    --navy: #0b1533;
    --sign-red: #d3251c;
    --frame: #ffffff;
    --frame-ink: #0e1b3d;
    --on-wall: #dce7ff;
    --gutter: clamp(18px, 4vw, 40px);
    --sec: clamp(56px, 8.5vw, 116px);
    --lean: "slnt" -10;
    --font: "Geologica", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Light is the design's own theme. */
:root,
:root[data-theme="light"] {
    --bg: #f2f5fb;
    --surface: #ffffff;
    --raised: #e4eaf6;
    --text: #0e1b3d;
    --muted: #4a5878;
    --line: #d3dcee;
    --brand: #1b3fa8;
    --brand-ink: #ffffff;
    --accent: #c3221a;
    --focus: #1b3fa8;
    --shadow: 14 27 61;
    --wall-a: #2a57d2;
    --wall-b: #1b3fa8;
    --wall-c: #14308a;
    --sky-top: #3f8fe2;
    --sky-low: #d3eafc;
    --metal: linear-gradient(135deg, #f1f4f9 0%, #cfd8e6 42%, #f4f6fa 58%, #b7c3d5 100%);
    color-scheme: light;
}

/* The dark theme (js/theme.js sets data-theme): the same wall at night. */
:root[data-theme="dark"] {
    --bg: #0a1330;
    --surface: #101c45;
    --raised: #1a2a60;
    --text: #eaf0ff;
    --muted: #aab7da;
    --line: #27376b;
    --brand: #a3c0ff;
    --brand-ink: #0a1330;
    --accent: #ff8479;
    --focus: #a3c0ff;
    --shadow: 0 0 0;
    --wall-a: #17327f;
    --wall-b: #102568;
    --wall-c: #0a1a4d;
    --sky-top: #050a20;
    --sky-low: #2b4897;
    --metal: linear-gradient(135deg, #d9dfe9 0%, #a9b4c6 42%, #e1e6ee 58%, #a6b1c4 100%);
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.62 var(--font);
    overflow-wrap: break-word;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

[id] {
    scroll-margin-top: 112px;
}

h1,
h2,
h3 {
    margin: 0 0 0.55em;
    line-height: 1.06;
    text-wrap: balance;
}

h1,
h2 {
    font-weight: 800;
    font-variation-settings: var(--lean);
    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(1.8rem, 4.2vw, 3rem);
}

h3 {
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

p {
    max-width: 68ch;
    margin: 0 0 1em;
}

a {
    color: var(--brand);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 3px;
}

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

.hero,
.page-hero,
.cta,
.foot,
.samples,
.tile-pvc,
.not-found {
    --focus: #ffffff;
}

.wrap {
    width: min(1200px, 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.narrow > * {
    max-width: 760px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.defs {
    position: absolute;
}

.skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 50;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip:focus {
    transform: none;
}

/* ---- header: a glass bar that stays on top ---- */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
}

.top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding-block: 9px 4px;
}

/* The firm's own logo, 340 x 86 px in the file: shown smaller, never larger. */
.brand {
    flex: none;
    margin-right: auto;
}

.brand img {
    display: block;
    width: auto;
    height: 32px;
}

/* Pictures that exist once per theme: the logo with navy letters and with white ones. */
.brand .on-dark,
:root[data-theme="dark"] .brand .on-light {
    display: none;
}

:root[data-theme="dark"] .brand .on-dark {
    display: block;
}

.nav {
    display: flex;
    flex: 1 1 100%;
    order: 5;
    gap: 2px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav::-webkit-scrollbar {
    display: none;
}

.nav a {
    flex: none;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav a:hover {
    background: var(--raised);
}

.nav a[aria-current="page"] {
    background: var(--brand);
    color: var(--brand-ink);
}

.lang {
    display: flex;
    flex: none;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}

.lang > * {
    display: grid;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}

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

.lang [aria-current] {
    background: var(--raised);
    color: var(--text);
}

/* The theme switch (js/theme.js): the moon leads to the dark theme, the sun back to the light one. */
.theme {
    display: inline-grid;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.theme[hidden] {
    display: none;
}

.theme:hover {
    border-color: var(--brand);
    color: var(--text);
}

.theme:focus-visible {
    border-radius: 50%;
}

.theme svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-sun,
:root[data-theme="dark"] .theme-moon {
    display: none;
}

:root[data-theme="dark"] .theme-sun {
    display: block;
}

.call {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--sign-red);
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.call:hover {
    background: #b51d15;
}

.call svg {
    width: 17px;
    height: 17px;
}

.call-number {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ---- buttons ---- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--brand);
    color: var(--brand-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button:focus-visible {
    border-radius: 999px;
}

.button-light {
    background: #fff;
    color: var(--cobalt-deep);
}

.button-light:hover {
    background: var(--on-wall);
}

.button-line {
    border-color: var(--brand);
    background: none;
    color: var(--brand);
}

.button-line:hover {
    background: var(--brand);
    color: var(--brand-ink);
}

.link-light {
    color: #fff;
    font-weight: 500;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

/* ---- the wall: the hero and the page heads ---- */

.hero,
.page-hero {
    position: relative;
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 50% 0 / 100% 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 50% 0 / 34px 100%,
        radial-gradient(120% 100% at 82% 0%, var(--wall-a) 0%, var(--wall-b) 52%, var(--wall-c) 100%);
    color: #fff;
}

.hero {
    --sill-drop: clamp(48px, 7vw, 74px);
    padding-top: clamp(34px, 6vw, 84px);
}

.hero-grid {
    display: grid;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.hero h1 {
    margin-bottom: 0.42em;
    font-size: clamp(2.3rem, 9.4vw, 4.3rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.lead {
    max-width: 56ch;
    margin-bottom: 1.5em;
    color: var(--on-wall);
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    font-weight: 350;
}

.hero-window {
    margin: 0;
}

.hero-window .elevation {
    width: 100%;
}

.hero-window figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 6px;
    color: var(--on-wall);
    font-size: 0.9rem;
    line-height: 1.45;
}

.hero-window figcaption span {
    flex: 1 1 260px;
}

.hero-window figcaption a {
    color: #fff;
}

.window-toggle {
    flex: none;
    min-height: 44px;
    padding: 8px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.window-toggle:hover {
    background: #fff;
    color: var(--cobalt-deep);
}

.window-toggle:focus-visible {
    border-radius: 999px;
}

.window-toggle[hidden] {
    display: none;
}

/* The figures stand on a window sill that sticks out under the wall. */
.sill {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    margin: clamp(34px, 5vw, 60px) 0 calc(var(--sill-drop) * -1);
    padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 36px) clamp(16px, 2.4vw, 24px);
    border-bottom: 12px solid var(--raised);
    border-radius: 6px 6px 26px 26px;
    background: var(--surface);
    box-shadow: 0 30px 44px -26px rgb(var(--shadow) / 0.55);
    color: var(--text);
}

.sill div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
}

.sill dd {
    margin: 0;
    color: var(--brand);
    font-size: clamp(1.75rem, 4.6vw, 3.1rem);
    font-weight: 850;
    font-variation-settings: var(--lean);
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.sill small {
    font-size: 0.45em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sill dt {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.hero + .band {
    padding-top: calc(var(--sec) + clamp(48px, 7vw, 74px));
}

.page-hero {
    padding-block: clamp(38px, 7vw, 92px) clamp(34px, 6vw, 76px);
    overflow: hidden;
}

.page-hero h1 {
    margin-bottom: 0.35em;
    font-size: clamp(2.3rem, 8vw, 4.6rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

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

.jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jump a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jump a:hover {
    border-color: #fff;
    background: #fff;
    color: var(--cobalt-deep);
}

.jump a:focus-visible {
    border-radius: 999px;
}

/* ---- the drawn windows (templates/_partials/elevation.html.twig) ---- */

.sky-top {
    stop-color: var(--sky-top);
}

.sky-low {
    stop-color: var(--sky-low);
}

.elevation {
    --paper: var(--wall-b);
    display: block;
    height: auto;
    overflow: visible;
}

.elevation .frame,
.elevation .sash {
    fill: var(--frame);
    stroke: var(--frame-ink);
    stroke-width: 0.9;
    stroke-linejoin: round;
}

.elevation .bead {
    fill: none;
    stroke: var(--frame-ink);
    stroke-width: 0.7;
}

.elevation .sheen {
    pointer-events: none;
}

.elevation .swing {
    fill: none;
    stroke: rgba(14, 27, 61, 0.5);
    stroke-width: 0.6;
}

.elevation .grip {
    fill: var(--frame-ink);
}

.elevation .dim {
    fill: none;
    stroke: #fff;
    stroke-width: 0.7;
}

.elevation .ext {
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 0.45;
}

.elevation text {
    fill: #fff;
    font: 600 7.6px var(--font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.scene-day {
    fill: #fff;
    opacity: 0.92;
}

.scene-night {
    display: none;
    fill: #fff6d6;
}

:root[data-theme="dark"] .scene-day {
    display: none;
}

:root[data-theme="dark"] .scene-night {
    display: block;
}

/* An opening sash swings on its hinges: towards the viewer, so its free edge drops a little. */
.leaf {
    transform-box: fill-box;
    transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.leaf--hinge-left {
    transform-origin: 0% 50%;
}

.leaf--hinge-right {
    transform-origin: 100% 50%;
}

.hero-window .elevation:hover .leaf--hinge-left,
.hero-window.is-open .leaf--hinge-left,
.samples li:hover .leaf--hinge-left {
    transform: skewY(7deg) scaleX(0.7);
}

.hero-window .elevation:hover .leaf--hinge-right,
.hero-window.is-open .leaf--hinge-right,
.samples li:hover .leaf--hinge-right {
    transform: skewY(-7deg) scaleX(0.7);
}

.hero-window .frame {
    filter: drop-shadow(0 7px 9px rgba(4, 10, 36, 0.4));
}

/* ---- sections ---- */

.band {
    padding-block: var(--sec);
}

.band-white {
    background: var(--surface);
}

.band-white .system,
.band-white .pcard,
.band-white .types > div {
    background: var(--bg);
}

.section-head {
    margin-bottom: clamp(24px, 4vw, 44px);
}

.section-head > :last-child {
    margin-bottom: 0;
}

.section-head p,
.prose p {
    color: var(--muted);
}

.note {
    margin-top: 28px;
    padding: 4px 0 4px 18px;
    border-left: 4px solid var(--sign-red);
    color: var(--muted);
    font-size: 0.96rem;
}

.two-col,
.made-grid,
.compare-grid,
.contact-grid {
    display: grid;
    gap: clamp(28px, 5vw, 72px);
}

.two-col + p,
.two-col + .note {
    margin-top: 28px;
}

.two-col h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.terms {
    margin-top: clamp(32px, 5vw, 56px);
}

/* A photo sits in a white PVC frame, like a pane in a window: also in the dark theme. */
.pane,
.shot {
    margin: 0;
    padding: 9px;
    border-radius: 3px;
    background: var(--frame);
    box-shadow: 0 0 0 1px rgb(var(--shadow) / 0.08), 0 22px 34px -22px rgb(var(--shadow) / 0.5);
    color: var(--frame-ink);
}

.pane img,
.shot img {
    display: block;
    width: 100%;
}

.pane a,
.shot a {
    display: block;
    overflow: hidden;
}

.pane figcaption,
.shot figcaption {
    padding: 9px 2px 1px;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.3;
}

.product-photo {
    margin-bottom: 26px;
}

.made-photo {
    width: 100%;
    max-width: 501px;
    rotate: -1.5deg;
}

.made-grid {
    align-items: center;
}

/* ---- what we make: a bento grid ---- */

.bento {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile > a {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(20px, 2.6vw, 30px);
    overflow: hidden;
    border-radius: 26px;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tile > a:hover {
    box-shadow: 0 26px 40px -26px rgb(var(--shadow) / 0.55);
    transform: translateY(-4px);
}

.tile > a:focus-visible {
    border-radius: 26px;
}

.tile h3 {
    margin-bottom: 0.35em;
    font-size: clamp(1.3rem, 2.3vw, 1.7rem);
    font-weight: 800;
    font-variation-settings: var(--lean);
    letter-spacing: -0.03em;
}

.tile p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.tile-art {
    display: block;
    margin-top: auto;
    padding-top: 24px;
}

.tile-pvc > a {
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 34px 100%,
        linear-gradient(140deg, var(--wall-a), var(--wall-c));
    color: #fff;
}

.tile-pvc p {
    max-width: 44ch;
    color: var(--on-wall);
}

.tile-pvc .tile-art {
    align-self: flex-end;
    width: min(100%, 330px);
}

.tile-pvc .elevation {
    --paper: #183a9c;
    width: 100%;
}

.tile-alu > a {
    background: var(--metal);
    color: var(--frame-ink);
}

.tile-alu p {
    color: #2a3654;
}

.chips {
    display: flex;
    gap: 5px;
}

.chips i {
    flex: 1;
    height: 62px;
    border-radius: 4px 4px 14px 14px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.14);
}

.tile-photo-frame {
    display: block;
    margin: calc(clamp(20px, 2.6vw, 30px) * -1) calc(clamp(20px, 2.6vw, 30px) * -1) 20px;
    overflow: hidden;
}

.tile-photo-frame img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tile > a:hover .tile-photo-frame img {
    transform: scale(1.05);
}

.tile-door-pair {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.tile-door-pair img {
    width: auto;
    height: 190px;
    border: 6px solid var(--frame);
    border-radius: 2px;
    box-shadow: 0 14px 22px -14px rgb(var(--shadow) / 0.5);
}

.tile-door-pair img + img {
    translate: 0 10px;
}

/* insect screen: a fine mesh that fades in from the corner */
.tile-mesh > a::after {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, var(--muted) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 7px);
    content: "";
    opacity: 0.4;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 52%);
    mask-image: linear-gradient(315deg, #000 0%, transparent 52%);
}

.tile-mesh > a,
.tile-sill > a {
    min-height: 190px;
}

.tile-sill .tile-art {
    align-self: flex-end;
    width: min(100%, 300px);
    height: auto;
}

.sill-body {
    fill: var(--frame);
    stroke: var(--muted);
    stroke-width: 2;
    stroke-linejoin: round;
}

.sill-ribs {
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
}

/* ---- warranty: one bar per component, ten years is the full width ---- */

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

.warranty li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 18px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.warranty li:last-child {
    border-bottom: 1px solid var(--line);
}

.warranty p {
    max-width: none;
    margin: 0;
}

.warranty-what {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.warranty-what strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
}

.warranty-bar {
    position: relative;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--raised);
}

.warranty-bar::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--y) * 10%);
    min-width: 14px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cobalt), #4d86ee);
    content: "";
    transform-origin: 0 50%;
}

.warranty-term {
    min-width: 5.6em;
    color: var(--brand);
    font-size: 1.3rem;
    font-weight: 800;
    font-variation-settings: var(--lean);
    letter-spacing: -0.03em;
    text-align: right;
    white-space: nowrap;
}

/* ---- before and now: two photos, a slider when /js/home.js runs ---- */

.compare-grid {
    align-items: center;
}

.compare-frame {
    width: 100%;
    max-width: 464px;
    justify-self: center;
}

.compare {
    display: grid;
    gap: 9px;
}

.compare figure {
    position: relative;
    margin: 0;
}

.compare figcaption {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 13px;
    border-radius: 999px;
    background: rgba(11, 21, 51, 0.86);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
}

.compare.is-live {
    --pos: 50%;
    gap: 0;
}

.compare.is-live > * {
    grid-area: 1 / 1;
}

.compare.is-live figure:nth-child(2) {
    clip-path: inset(0 0 0 var(--pos));
}

.compare.is-live figure:nth-child(2) figcaption {
    right: 10px;
    left: auto;
}

.compare-handle {
    position: relative;
    z-index: 2;
    width: 4px;
    margin-left: calc(var(--pos) - 2px);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(11, 21, 51, 0.35);
    pointer-events: none;
}

.compare-handle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat;
    box-shadow: 0 6px 14px rgba(11, 21, 51, 0.4);
    content: "";
    translate: -50% -50%;
}

.compare-range {
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}

.compare-range::-webkit-slider-thumb {
    width: 1px;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.compare-range::-moz-range-thumb {
    width: 1px;
    border: 0;
}

.compare:has(.compare-range:focus-visible) .compare-handle::after {
    outline: 3px solid var(--sign-red);
    outline-offset: 3px;
}

/* ---- photos: the strip on the home page and the gallery ---- */

.shot a:hover img {
    transform: scale(1.04);
}

.shot img {
    transition: transform 0.4s ease;
}

.reel {
    --row: min(335px, 56vw);
    display: flex;
    gap: 16px;
    margin: 0 -6px;
    padding: 6px 6px 20px;
    overflow-x: auto;
    list-style: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
    scrollbar-color: var(--brand) transparent;
    scrollbar-width: thin;
}

.reel:focus-visible {
    outline-offset: -3px;
}

.reel > li {
    flex: none;
    scroll-snap-align: start;
}

.reel .shot {
    width: min-content;
    padding: 8px;
}

.reel .shot img {
    width: auto;
    max-width: none;
    height: var(--row);
}

.reel-more {
    max-width: none;
    margin: 26px 0 0;
}

.shots {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shots li {
    width: 100%;
    max-width: calc(var(--w) * 1px + 18px);
}

.shots-portrait li {
    width: calc(50% - 9px);
}

.door-row {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.door-row li {
    flex: 1 1 0;
    max-width: 269px;
}

.door-row li:nth-child(2) {
    translate: 0 14px;
}

/* The controls that /js/carousel.js adds: arrows beside the heading, one marker per photo below. */

.has-carousel-controls {
    position: relative;
}

.has-carousel-controls > :first-child {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-bottom: 18px;
    padding-right: 112px;
}

.has-carousel-controls > .reel {
    padding-bottom: 8px;
    scrollbar-width: none;
}

.has-carousel-controls > .reel::-webkit-scrollbar {
    display: none;
}

.carousel-nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}

.carousel-arrow {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid var(--brand);
    border-radius: 50%;
    background: none;
    color: var(--brand);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.carousel-arrow::before {
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    background: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.carousel-prev {
    rotate: 180deg;
}

.carousel-arrow:hover {
    background: var(--brand);
    color: var(--brand-ink);
}

.carousel-arrow:focus-visible {
    border-radius: 50%;
}

.carousel-arrow[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.carousel-arrow[aria-disabled="true"]:hover {
    background: none;
    color: var(--brand);
}

.carousel-markers {
    display: flex;
    gap: 5px;
    margin: 8px 0 0;
}

.carousel-markers[hidden],
.carousel-nav[hidden] {
    display: none;
}

.carousel-marker {
    width: 22px;
    height: 24px;
    padding: 0;
    border: 0;
    background: linear-gradient(var(--line), var(--line)) center / 100% 4px no-repeat;
    cursor: pointer;
    transition: width 0.25s ease;
}

.carousel-marker[aria-current="true"] {
    width: 40px;
    background-image: linear-gradient(var(--brand), var(--brand));
}

/* ---- lightbox: /js/lightbox.js opens a linked photo enlarged over the page, in a <dialog>.
   It keeps its own night colours in both themes. ---- */

[data-lightbox] {
    cursor: zoom-in;
}

html:has(.lightbox[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 68px 12px 14px;
    border: 0;
    background: rgba(7, 13, 36, 0.96);
    color: #eaf0ff;
    overscroll-behavior: contain;
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.lightbox::backdrop {
    background: none;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.lightbox-stage img {
    display: block;
    max-width: none;
    border: 8px solid #fff;
    border-radius: 3px;
    background: #fff;
}

.lightbox-caption {
    display: grid;
    place-items: center;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0 56px;
    font-size: 0.94rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-button {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-button:hover {
    border-color: #fff;
    background-color: var(--cobalt);
}

.lightbox-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 50%;
}

.lightbox-button[hidden] {
    display: none;
}

.lightbox-close {
    top: 12px;
    right: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.lightbox-prev,
.lightbox-next {
    bottom: 14px;
}

.lightbox-prev {
    left: 12px;
    rotate: 180deg;
}

.lightbox-next {
    right: 12px;
}

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

.systems {
    display: grid;
    gap: 16px;
}

.system {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: 26px;
    background: var(--surface);
}

.system p {
    color: var(--muted);
    font-size: 0.96rem;
}

/* The head of a system card: its number of chambers as a large figure, and the profile's own picture. */
.system-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.system-figure {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.2;
}

.system-figure strong {
    display: block;
    color: var(--brand);
    font-size: 3.3rem;
    font-weight: 850;
    font-variation-settings: var(--lean);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

/* A product picture of the original site: small, so it stands at its own size on a white plate. */
.plate {
    display: grid;
    flex: none;
    width: fit-content;
    margin: 0;
    padding: 12px;
    place-items: center;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(14, 27, 61, 0.12);
}

.plate img {
    display: block;
}

.facts {
    margin: 0;
}

.system .facts {
    margin-top: auto;
}

.facts div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
}

.facts dt {
    color: var(--muted);
}

.facts dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.system .button,
.pcard .button {
    align-self: flex-start;
    margin-top: 20px;
}

.pcards {
    display: grid;
    gap: 16px;
}

.pcard {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: 26px;
    background: var(--surface);
}

.pcard .plate {
    margin-bottom: 20px;
}

.pcard p {
    color: var(--muted);
    font-size: 0.96rem;
}

.pcard .button {
    margin-top: auto;
}

/* ---- one product in detail (templates/_partials/product_page.html.twig) ---- */

.crumb {
    margin-bottom: 14px;
    color: var(--on-wall);
    font-size: 0.94rem;
    font-weight: 500;
}

.crumb a {
    color: #fff;
}

.crumb span {
    margin-inline: 6px;
    opacity: 0.6;
}

.product-grid {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.product-text > section + section {
    margin-top: clamp(30px, 4vw, 46px);
}

.product-text h2 {
    font-size: clamp(1.5rem, 2.9vw, 2.1rem);
}

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

.product-text .types {
    margin-block: 18px;
}

.section-pic {
    margin-bottom: 18px;
}

.spec {
    display: grid;
    gap: 20px;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: 26px;
    background: var(--bg);
}

.spec-pic {
    width: 100%;
    min-height: 168px;
}

.spec .button {
    padding-inline: 16px;
}

/* on a phone the picture and the short facts come before the long text */
@media (max-width: 859px) {
    .spec {
        order: -1;
    }
}

.spec .swatches {
    margin-top: 0;
}

.spec-links {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 0.94rem;
}

/* the RAL chart of the original: one chip per colour, its code under it */
.ral {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 14px 10px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    list-style: none;
    text-align: center;
}

.ral span {
    display: block;
    height: 50px;
    margin-bottom: 6px;
    border-radius: 6px 6px 16px 16px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(128, 136, 156, 0.4);
}

.more-products ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.more-products a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 22px;
    border: 2px solid var(--brand);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.more-products a:hover {
    background: var(--brand);
    color: var(--brand-ink);
}

.more-products a:focus-visible {
    border-radius: 999px;
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 16px 0 0;
    padding: 0;
    font-size: 0.9rem;
    list-style: none;
}

.swatches li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.swatch {
    width: 26px;
    height: 26px;
    border: 1px solid rgb(var(--shadow) / 0.25);
    border-radius: 50%;
}

.swatch-white {
    background: #fff;
}

.swatch-oak {
    background: linear-gradient(100deg, #b98342, #9a6426 45%, #c08a48);
}

.swatch-mahogany {
    background: linear-gradient(100deg, #6e2c1e, #4f1c12 45%, #7a3424);
}

.types {
    display: grid;
    gap: 14px;
    margin: 0;
}

.types > div {
    padding: 22px 24px;
    border-radius: 22px;
    background: var(--surface);
}

.types dt {
    margin-bottom: 6px;
    font-size: 1.12rem;
    font-weight: 800;
    font-variation-settings: var(--lean);
    letter-spacing: -0.02em;
}

.types dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.ticks {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.ticks li {
    position: relative;
    padding: 9px 0 9px 34px;
    border-top: 1px solid var(--line);
}

.ticks li:first-child {
    border-top: 0;
}

.ticks li::before {
    position: absolute;
    top: 0.82em;
    left: 2px;
    width: 18px;
    height: 10px;
    border-bottom: 3px solid var(--brand);
    border-left: 3px solid var(--brand);
    content: "";
    rotate: -45deg;
    scale: 0.8;
}

.ticks-plain li::before {
    top: 1.32em;
    width: 14px;
    height: 0;
    border-left: 0;
    border-color: var(--accent);
    rotate: none;
    scale: 1;
}

/* ---- prices: the six sample configurations as sheets of the same wall ---- */

.samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.samples li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 30px 22px 24px;
    border-radius: 26px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 34px 100%,
        var(--wall-b);
    color: #fff;
}

.samples .elevation {
    width: var(--w);
    max-width: 100%;
    margin-block: auto;
}

.samples .elevation text {
    font-size: 9px;
}

.samples p {
    align-self: stretch;
    margin: 0;
    color: var(--on-wall);
    font-size: 0.94rem;
}

.samples strong {
    display: block;
    color: #fff;
    font-size: 1.06rem;
}

.table-scroll {
    overflow-x: auto;
}

.spec {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.spec th,
.spec td {
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.spec thead th {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 500;
}

.spec tbody th {
    font-weight: 600;
}

.spec .num {
    padding-right: 0;
    color: var(--brand);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* ---- call to action: the red of the sign, cut on the slant of its letters ---- */

.cta {
    padding-block: calc(var(--sec) * 0.8 + 3vw) calc(var(--sec) * 0.8);
    background: var(--sign-red);
    clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
    color: #fff;
}

.band + .cta,
.cta + .foot {
    margin-top: -1px;
}

.cta-grid {
    display: grid;
    gap: 28px clamp(28px, 5vw, 72px);
    align-items: center;
}

.cta h2 {
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
}

.cta p {
    margin: 0;
}

.cta-actions {
    display: grid;
    justify-items: start;
    gap: 18px;
}

.cta-phone {
    color: #fff;
    font-size: clamp(2rem, 7.4vw, 3.6rem);
    font-weight: 850;
    font-variation-settings: var(--lean);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.cta-phone span {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 500;
    font-variation-settings: normal;
    letter-spacing: 0;
}

.cta-phone:hover {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.12em;
}

.cta .button-light {
    color: #8f140d;
}

/* ---- contact ---- */

.contact-list {
    margin: 0 0 34px;
}

.contact-list div {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.contact-list div:first-child {
    padding-top: 0;
    border-top: 0;
}

.contact-list dt {
    color: var(--muted);
    font-size: 0.88rem;
}

.contact-list dd {
    margin: 2px 0 0;
    font-size: 1.08rem;
}

.big-phone {
    color: var(--brand);
    font-size: clamp(2.1rem, 8vw, 3.4rem);
    font-weight: 850;
    font-variation-settings: var(--lean);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-decoration: none;
    white-space: nowrap;
}

.big-phone:hover {
    text-decoration: underline;
    text-decoration-thickness: 4px;
}

.contact-grid > div:last-child {
    padding: clamp(22px, 3.4vw, 40px);
    border-radius: 26px;
    background: var(--bg);
}

.contact-form {
    display: grid;
    gap: 16px;
}

.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.92rem;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s ease;
}

.contact-form textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form input:hover,
.contact-form textarea:hover {
    border-color: var(--brand);
}

.contact-form ::placeholder {
    color: var(--muted);
    opacity: 1;
}

.contact-form ul {
    margin: 6px 0 0;
    padding: 0;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    list-style: none;
}

.contact-form .button {
    justify-self: start;
}

.form-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.contact-sent {
    margin-bottom: 20px;
    padding: 16px 20px;
    border-left: 5px solid var(--brand);
    border-radius: 0 14px 14px 0;
    background: var(--surface);
}

.contact-sent strong {
    display: block;
}

/* ---- footer: the wall at night, in both themes ---- */

.foot {
    padding-block: clamp(44px, 6vw, 76px) 26px;
    background: var(--navy);
    color: #c7d2ee;
}

.foot a {
    color: #fff;
}

.foot-grid {
    display: grid;
    gap: 34px clamp(28px, 5vw, 72px);
}

.foot-brand img {
    display: block;
    width: auto;
    height: clamp(52px, 7vw, 76px);
    margin-bottom: 18px;
}

.foot-brand p {
    max-width: 34ch;
    margin: 0;
}

.foot-list {
    display: grid;
    gap: 18px;
    margin: 0;
}

.foot-list dt {
    color: #97a6cf;
    font-size: 0.84rem;
}

.foot-list dd {
    margin: 2px 0 0;
}

.foot-phone {
    font-size: 1.5rem;
    font-weight: 800;
    font-variation-settings: var(--lean);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.foot-phone:hover {
    text-decoration: underline;
}

.foot-nav ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.foot-nav a {
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
}

.foot-nav a:hover {
    text-decoration: underline;
}

.foot-bottom {
    max-width: none;
    margin: clamp(30px, 5vw, 54px) 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #97a6cf;
    font-size: 0.88rem;
}

/* ---- 404 ---- */

.not-found {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px var(--gutter);
    place-items: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 50% 0 / 100% 34px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 50% 0 / 34px 100%,
        radial-gradient(120% 100% at 82% 0%, var(--wall-a) 0%, var(--wall-b) 52%, var(--wall-c) 100%);
    color: #fff;
}

.not-found > div {
    max-width: 620px;
}

.not-found img {
    display: block;
    width: auto;
    height: 64px;
    margin-bottom: 34px;
}

.not-found h1 {
    font-size: clamp(2.2rem, 8vw, 4rem);
    font-weight: 850;
    line-height: 1;
}

.not-found h2 {
    font-size: 1.5rem;
}

.not-found p {
    color: var(--on-wall);
}

.not-found a:not(.button) {
    color: #fff;
}

.not-found [lang="en"] {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---- wider screens ---- */

@media (min-width: 380px) {
    .brand img {
        height: 36px;
    }
}

@media (min-width: 560px) {
    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tile-pvc {
        grid-column: span 2;
    }

    .tile-pvc > a {
        flex-flow: row wrap;
        align-items: flex-end;
        gap: 0 24px;
    }

    .tile-pvc h3,
    .tile-pvc p {
        flex: 1 1 100%;
    }

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

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

    .foot-brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 620px) {
    .section-pic {
        float: right;
        margin: 4px 0 14px 26px;
    }

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

@media (min-width: 700px) {
    .sill {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sill div + div {
        padding-left: 18px;
        border-left: 1px solid var(--line);
    }

    .shots li {
        --row: 264px;
        width: calc(var(--w) / var(--h) * var(--row) + 18px);
    }

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

    .warranty li {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
    }

    .warranty-what {
        grid-column: auto;
    }

    .lightbox {
        padding: 24px 86px 18px;
    }

    .lightbox-caption {
        padding: 0;
    }

    .lightbox-prev,
    .lightbox-next {
        top: calc(50% - 23px);
        bottom: auto;
    }

    .lightbox-prev {
        left: 20px;
    }

    .lightbox-next,
    .lightbox-close {
        right: 20px;
    }

    .lightbox-close {
        top: 20px;
    }
}

@media (min-width: 860px) {
    .two-col,
    .contact-grid,
    .cta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-head {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 0 clamp(28px, 5vw, 72px);
        align-items: end;
    }

    .section-head h2 {
        margin-bottom: 0;
    }

    .made-grid {
        grid-template-columns: minmax(0, 501px) minmax(0, 1fr);
    }

    .compare-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 464px);
    }

    .cta-actions {
        justify-items: end;
        text-align: right;
    }

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

    .product-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    }

    .spec {
        position: sticky;
        top: 96px;
    }

    .product-text .types {
        grid-template-columns: minmax(0, 1fr);
    }

    .foot-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    }

    .foot-brand {
        grid-column: auto;
    }

    /* A window in the wall of every page head: the first sample configuration, a fixed light and a sash. */
    .page-hero::after {
        position: absolute;
        right: max(var(--gutter), calc(50% - 600px));
        bottom: -34px;
        width: clamp(230px, 27vw, 360px);
        aspect-ratio: 200 / 135;
        border: 9px solid var(--frame);
        border-radius: 2px;
        background:
            linear-gradient(90deg, transparent calc(65% - 5px), var(--frame) calc(65% - 5px) calc(65% + 5px), transparent calc(65% + 5px)),
            linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.3) 30%, transparent 40%, rgba(255, 255, 255, 0.18) 48%, transparent 56%),
            linear-gradient(var(--sky-top), var(--sky-low));
        box-shadow: 0 18px 30px -12px rgba(4, 10, 36, 0.55), inset 0 0 0 1.5px var(--frame-ink);
        content: "";
        outline: 1.5px solid var(--frame-ink);
    }

    .page-hero .wrap > * {
        max-width: min(100%, 720px);
    }
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .hero h1 {
        font-size: clamp(2.6rem, 4.9vw, 4.3rem);
    }
}

@media (min-width: 1000px) {
    .top-row {
        flex-wrap: nowrap;
        gap: 14px;
        padding-block: 12px;
    }

    .brand {
        margin-right: 0;
    }

    .brand img {
        height: 44px;
    }

    .nav {
        flex: 1 1 auto;
        order: 0;
        justify-content: center;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .call {
        padding: 0 20px;
    }

    .call-number {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    [id] {
        scroll-margin-top: 92px;
    }

    .bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .tile {
        grid-column: span 4;
    }

    .tile-pvc {
        grid-column: span 7;
    }

    .tile-pvc > a {
        flex-flow: column;
        align-items: stretch;
    }

    .tile-pvc h3,
    .tile-pvc p {
        flex: none;
    }

    .tile-alu {
        grid-column: span 5;
    }

    .tile-mesh,
    .tile-sill {
        grid-column: span 6;
    }
}

/* ---- phones: larger figures on the drawings, which are small there ---- */

@media (max-width: 620px) {
    .elevation text {
        font-size: 10.5px;
        stroke-width: 6px;
    }
}

/* ---- motion ---- */

@media (prefers-reduced-motion: no-preference) {
    .reel {
        scroll-behavior: smooth;
    }

    stop {
        transition: stop-color 0.6s ease;
    }

    .lightbox[open] {
        animation: fade-in 0.2s ease;
    }

    /* The one moment when the home page opens: the window draws itself on the wall, the sky comes up
       behind the glass, the sizes follow, and the two sashes swing open once. */
    .elevation--draw .frame,
    .elevation--draw .sash,
    .elevation--draw .bead {
        stroke-dasharray: 1;
        animation: draw 1.15s ease-out backwards;
    }

    .elevation--draw .sash,
    .elevation--draw .bead {
        animation-delay: 0.35s;
    }

    .elevation--draw .sky,
    .elevation--draw .scene,
    .elevation--draw .sheen,
    .elevation--draw .swing,
    .elevation--draw .grip {
        animation: fade-in 0.7s 1.1s ease-out backwards;
    }

    .elevation--draw .dims {
        animation: fade-in 0.6s 1.5s ease-out backwards;
    }

    .elevation--draw .leaf--hinge-left {
        animation: swing-left 1.9s 2.1s ease-in-out;
    }

    .elevation--draw .leaf--hinge-right {
        animation: swing-right 1.9s 2.1s ease-in-out;
    }

    .hero-text {
        animation: rise 0.7s ease-out backwards;
    }

    .sill {
        animation: rise 0.7s 0.5s ease-out backwards;
    }

    @supports (animation-timeline: view()) {
        .warranty-bar::after {
            animation: grow linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

@keyframes draw {
    from {
        fill-opacity: 0;
        stroke: #fff;
        stroke-dashoffset: 1;
    }

    70% {
        fill-opacity: 0;
        stroke: #fff;
        stroke-dashoffset: 0;
    }

    to {
        fill-opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }
}

@keyframes swing-left {
    40%,
    62% {
        transform: skewY(7deg) scaleX(0.7);
    }
}

@keyframes swing-right {
    40%,
    62% {
        transform: skewY(-7deg) scaleX(0.7);
    }
}

@keyframes grow {
    from {
        transform: scaleX(0);
    }
}