/* Паркет Пловдив – parquet sanding, lacquering and laying, Plovdiv.
   Draughtsman's paper and golden oak: the oak of the firm's old header photo, the sunlight across it,
   the grey of its old pages turned graphite ink. A light theme (default) and a dark one, through
   js/theme.js or the system setting. Every colour that differs between the themes is a custom property. */

@font-face {
    font-family: "Alumni Sans";
    src: url("../fonts/alumni-sans.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Arsenal";
    src: url("../fonts/arsenal-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Arsenal";
    src: url("../fonts/arsenal-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Arsenal";
    src: url("../fonts/arsenal-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: light;
    --paper: #f4efe6;
    --sheet: #fbf8f2;
    --sheet-2: #efe7da;
    --ink: #1f2328;
    --ink-2: #4a4f56;
    --line: rgba(31, 35, 40, 0.14);
    --grid: rgba(31, 35, 40, 0.055);
    --oak-text: #7a3f0b;
    --btn: #7a3f0b;
    --btn-text: #fffaf0;
    --btn-hover: #652707;
    --focus: #b85c00;
    --shadow: 0 24px 60px -28px rgba(70, 38, 8, 0.45);
    --mark-bg: #1f2328;
    --mark-a: #e2a24f;
    --mark-b: #f3d48a;
    --glass: rgba(244, 239, 230, 0.82);

    /* the same in both themes */
    --oak: #8f5714;
    --oak-deep: #652707;
    --sun: #f3d48a;
    --sun-soft: #f8e6b8;
    --graphite: #1f2328;
    --graphite-2: #2a2f36;
    --on-dark: #efe9df;
    --on-dark-2: #c3bcb0;
    --display: "Alumni Sans", "Arial Narrow", sans-serif;
    --text: "Arsenal", "Segoe UI", sans-serif;
    --wrap: 1180px;
    --r: 22px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #15181c;
        --sheet: #1b1f24;
        --sheet-2: #22272d;
        --ink: #efe9df;
        --ink-2: #b9b2a6;
        --line: rgba(239, 233, 223, 0.14);
        --grid: rgba(239, 233, 223, 0.045);
        --oak-text: #e5a85e;
        --btn: #e5a85e;
        --btn-text: #15181c;
        --btn-hover: #f3c27f;
        --focus: #f3d48a;
        --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
        --mark-bg: #2a2f36;
        --glass: rgba(21, 24, 28, 0.82);
        --graphite: #0f1114;
        --graphite-2: #1d2126;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #15181c;
    --sheet: #1b1f24;
    --sheet-2: #22272d;
    --ink: #efe9df;
    --ink-2: #b9b2a6;
    --line: rgba(239, 233, 223, 0.14);
    --grid: rgba(239, 233, 223, 0.045);
    --oak-text: #e5a85e;
    --btn: #e5a85e;
    --btn-text: #15181c;
    --btn-hover: #f3c27f;
    --focus: #f3d48a;
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
    --mark-bg: #2a2f36;
    --glass: rgba(21, 24, 28, 0.82);
    --graphite: #0f1114;
    --graphite-2: #1d2126;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.125rem/1.6 var(--text);
    overflow-x: clip;
}

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

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

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

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

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.005em;
    margin: 0 0 0.4em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(3.4rem, 2rem + 6.5vw, 7.4rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.86;
}

h2 {
    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.6rem);
}

h3,
.h3 {
    font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
}

p {
    margin: 0 0 1em;
}

.wrap {
    width: min(100% - 32px, var(--wrap));
    margin-inline: auto;
}

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

.sprite {
    position: absolute;
    width: 0;
    height: 0;
}

.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 50;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 10px;
}

.skip:focus {
    top: 12px;
}

/* ---- header ---- */

.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--line);
}

.top-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px 28px;
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

.brand-name {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.brand-mark {
    flex: none;
    border-radius: 7px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.nav a {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
}

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

.nav a[aria-current] {
    background: var(--ink);
    color: var(--paper);
}

.top-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--btn);
    color: var(--btn-text);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.2s;
}

.call:hover {
    background: var(--btn-hover);
    transform: translateY(-1px);
}

.lang {
    display: flex;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.lang a,
.lang span {
    padding: 6px 10px;
    color: var(--ink);
    text-decoration: none;
}

.lang span {
    background: var(--sheet-2);
}

.theme {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.theme[hidden] {
    display: none;
}

.theme:hover {
    background: var(--sheet-2);
}

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

.theme-moon path {
    fill: currentColor;
    stroke: none;
}

.theme-moon {
    display: none;
}

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

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

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid var(--btn);
    border-radius: 999px;
    background: var(--btn);
    color: var(--btn-text);
    font: 700 1.05rem/1.2 var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
    background: var(--btn-hover);
    border-color: var(--btn-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-big {
    min-height: 60px;
    padding: 14px 28px;
    font: 800 1.9rem/1 var(--display);
    letter-spacing: 0.02em;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

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

.btn-ink {
    background: #1f2328;
    border-color: #1f2328;
    color: #f8e6b8;
}

.btn-ink:hover {
    background: #000;
    border-color: #000;
}

.btn-ghost-ink {
    background: transparent;
    border-color: #1f2328;
    color: #1f2328;
}

.btn-ghost-ink:hover {
    background: #1f2328;
    border-color: #1f2328;
    color: #f8e6b8;
}

/* ---- the paper with its 1 m grid, behind the hero and the page heads ---- */

.hero,
.page-hero {
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: -1px -1px;
}

.hero {
    padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font: 700 1.35rem/1 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--oak-text);
}

.eyebrow::before {
    content: "";
    width: 36px;
    height: 3px;
    background: currentColor;
}

.hero h1 span {
    display: block;
    color: var(--oak-text);
}

.lead {
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 38ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* ---- the room on the plan ---- */

.plan {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.plan-svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--sheet);
    border-bottom: 1px solid var(--line);
}

.plan-grid line {
    stroke: var(--grid);
    stroke-width: 1;
}

.lam rect {
    stroke: rgba(70, 35, 5, 0.35);
    stroke-width: 0.6;
}

.lam .o1 {
    fill: #b97c36;
}

.lam .o2 {
    fill: #a3672a;
}

.lam .o3 {
    fill: #cb9149;
}

.beam {
    opacity: 0.8;
}

.walls {
    fill: none;
    stroke: var(--ink);
    stroke-width: 7;
    stroke-dasharray: 1000;
}

.window {
    fill: var(--sheet);
    stroke: var(--ink);
    stroke-width: 1.5;
}

.window-mid {
    stroke: var(--ink);
    stroke-width: 1;
}

.door-gap {
    stroke: var(--sheet);
    stroke-width: 9;
}

.door {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
}

.dim,
.tick {
    fill: none;
    stroke: var(--oak-text);
    stroke-width: 1.2;
}

.tick {
    stroke-width: 1.8;
}

.dim-text {
    fill: var(--oak-text);
    font: 700 22px var(--display);
    letter-spacing: 0.04em;
}

.tag {
    fill: var(--ink);
}

.tag-text {
    fill: var(--paper);
    font: 800 27px var(--display);
}

@media (prefers-reduced-motion: no-preference) {
    .walls {
        animation: draw 1.3s cubic-bezier(0.6, 0, 0.3, 1) both;
    }

    .floor-reveal {
        animation: lay 1.5s 0.8s cubic-bezier(0.7, 0, 0.2, 1) both;
    }

    .openings,
    .dims,
    .area-tag {
        animation: fade 0.6s 1.9s both;
    }

    .beam {
        animation: sun 1.6s 2.2s ease-out both;
    }

    .hero-text > * {
        animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .hero-text > :nth-child(2) {
        animation-delay: 0.1s;
    }

    .hero-text > :nth-child(3) {
        animation-delay: 0.2s;
    }

    .hero-text > :nth-child(4) {
        animation-delay: 0.3s;
    }
}

@keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lay {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sun {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 0.8;
        transform: none;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4px 28px;
    padding: 22px clamp(18px, 3vw, 28px) 24px;
}

.calc-title {
    grid-column: 1 / -1;
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
    margin-bottom: 8px;
}

.calc-sample,
.calc-caption {
    color: var(--ink-2);
    font-size: 1rem;
    margin-bottom: 10px;
}

.calc-controls[hidden],
.calc-sample[hidden] {
    display: none;
}

.slider {
    display: grid;
    grid-template-columns: 5.5em 1fr 4.2em;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 700;
}

.slider input {
    width: 100%;
    accent-color: var(--btn);
}

.slider output {
    font: 800 1.6rem/1 var(--display);
    text-align: right;
    color: var(--oak-text);
}

.checks {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    cursor: pointer;
}

.check input {
    width: 20px;
    height: 20px;
    accent-color: var(--btn);
}

.check small {
    color: var(--ink-2);
}

.calc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: start;
}

.calc-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 12px;
    align-items: baseline;
    padding: 9px 12px;
    border-radius: 12px;
    border-bottom: 1px dashed var(--line);
}

.calc-list li.is-promo {
    background: var(--sun-soft);
    color: #1f2328;
    border-bottom-color: transparent;
}

.calc-name {
    font-weight: 700;
}

.calc-name small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
}

.calc-rate {
    grid-row: 2;
    font-size: 0.9rem;
    color: var(--ink-2);
}

.is-promo .calc-rate,
.is-promo .calc-name small {
    color: #4a3a20;
}

.calc-total {
    grid-row: 1 / 3;
    grid-column: 2;
    font: 800 1.9rem/1 var(--display);
    color: var(--oak-text);
}

.is-promo .calc-total {
    color: #6b3708;
}

.calc-note {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    font-size: 0.95rem;
    color: var(--ink-2);
}

/* ---- the oak band: the firm's own words on solid parquet ---- */

.oak {
    position: relative;
    overflow: hidden;
    color: #fff8ea;
    background:
        linear-gradient(115deg, transparent 58%, rgba(255, 226, 150, 0.16) 58%, rgba(255, 226, 150, 0.16) 72%, transparent 72%),
        linear-gradient(115deg, transparent 76%, rgba(255, 226, 150, 0.1) 76%, rgba(255, 226, 150, 0.1) 80%, transparent 80%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 120px),
        linear-gradient(160deg, #6e300a, #8a4f12 55%, #7a3c09);
    padding: clamp(56px, 9vw, 120px) 0;
}

.oak-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px 56px;
    align-items: end;
}

.oak-title {
    font-size: clamp(2.8rem, 1.8rem + 4vw, 5.4rem);
    text-transform: uppercase;
    margin: 0;
}

.oak-text {
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
    line-height: 1.55;
    margin: 0;
}

/* ---- bands and section heads ---- */

.band {
    padding: clamp(56px, 8vw, 104px) 0;
}

.band-tight {
    padding: clamp(32px, 5vw, 56px) 0;
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 48px;
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head h2 {
    margin: 0;
    text-transform: uppercase;
}

.section-head p {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.15rem;
}

.graphite {
    background: var(--graphite);
    color: var(--on-dark);
}

.graphite .section-head p {
    color: var(--on-dark-2);
}

.graphite a {
    color: var(--sun);
}

.more {
    margin: 28px 0 0;
    font-weight: 700;
}

/* ---- services: a bento grid ---- */

.bento {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.bento-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-2,
.bento-5,
.bento-6 {
    grid-column: span 2;
}

.bento a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 190px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--sheet);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.bento a:hover {
    transform: translateY(-4px);
    border-color: var(--oak-text);
    box-shadow: var(--shadow);
}

.bento strong {
    font: 800 clamp(1.8rem, 1.5rem + 1vw, 2.3rem)/1 var(--display);
    text-transform: uppercase;
}

.bento span:last-child {
    color: var(--ink-2);
}

.bento-num {
    font: 800 3.2rem/0.8 var(--display);
    color: var(--oak-text);
    margin-bottom: auto;
}

.bento a::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 18px;
    font-size: 1.6rem;
    color: var(--oak-text);
    transition: transform 0.25s;
}

.bento a:hover::after {
    transform: translateX(5px);
}

/* the large card: oak in basket weave */
.bento-1 a {
    background:
        linear-gradient(180deg, rgba(40, 18, 4, 0.1), rgba(40, 18, 4, 0.82) 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg stroke='%23462305' stroke-opacity='.35'%3E%3Crect width='36' height='12' fill='%23b97c36'/%3E%3Crect y='12' width='36' height='12' fill='%23a3672a'/%3E%3Crect y='24' width='36' height='12' fill='%23cb9149'/%3E%3Crect x='36' width='12' height='36' fill='%23a3672a'/%3E%3Crect x='48' width='12' height='36' fill='%23cb9149'/%3E%3Crect x='60' width='12' height='36' fill='%23b97c36'/%3E%3Crect y='36' width='12' height='36' fill='%23cb9149'/%3E%3Crect x='12' y='36' width='12' height='36' fill='%23b97c36'/%3E%3Crect x='24' y='36' width='12' height='36' fill='%23a3672a'/%3E%3Crect x='36' y='36' width='36' height='12' fill='%23b97c36'/%3E%3Crect x='36' y='48' width='36' height='12' fill='%23cb9149'/%3E%3Crect x='36' y='60' width='36' height='12' fill='%23a3672a'/%3E%3C/g%3E%3C/svg%3E");
    color: #fff8ea;
    border-color: transparent;
    min-height: 394px;
}

.bento-1 strong {
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
}

.bento-1 .bento-num,
.bento-1 a::after {
    color: var(--sun);
}

.bento-1 span:last-child {
    color: #f6ead2;
    font-size: 1.2rem;
}

/* ---- packages: lacquer tins ---- */

.tins {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.tin {
    --lid: #c8862a;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 20px 22px;
    border-radius: 18px 18px 24px 24px;
    background: linear-gradient(180deg, #2f353d, var(--graphite-2) 60%);
    border: 1px solid rgba(239, 233, 223, 0.12);
    color: var(--on-dark);
    transition: transform 0.25s;
}

.tin::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 14px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--lid), color-mix(in srgb, var(--lid) 70%, #fff) 45%, var(--lid));
}

.tin:hover {
    transform: translateY(-4px) rotate(-0.6deg);
}

.tin-caparol-promo {
    --lid: #f3d48a;
    background: linear-gradient(180deg, #3a3326, #2a2620 60%);
    border-color: rgba(243, 212, 138, 0.45);
}

.tin-viva {
    --lid: #9cc7a3;
}

.tin-kemichal {
    --lid: #d9774a;
}

.tin-betek {
    --lid: #e9a640;
}

.tin p {
    margin: 0;
}

.tin-label {
    font: 700 1.05rem/1 var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-2);
}

.tin-caparol-promo .tin-label {
    color: var(--sun);
}

.tin-name {
    font-size: 2.3rem;
    margin: 6px 0 4px;
}

.tin-lacquer {
    font-size: 0.98rem;
    color: var(--on-dark-2);
    min-height: 3em;
}

.tin-price {
    margin: 16px 0 6px !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.tin-price strong {
    font: 800 3.1rem/0.9 var(--display);
    color: var(--sun);
}

.tin-price span {
    color: var(--on-dark-2);
}

.tin-incl {
    font-weight: 700;
}

.tin-notes {
    font-size: 0.95rem;
    color: var(--on-dark-2);
    margin: 6px 0 14px !important;
}

.tin-third {
    margin-top: auto !important;
    padding-top: 12px;
    border-top: 1px dashed rgba(239, 233, 223, 0.22);
    font-size: 0.95rem;
}

/* ---- good to know: a numbered trail ---- */

.trail {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tip;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}

.trail li {
    counter-increment: tip;
    position: relative;
    padding: 22px 0 22px 84px;
    border-top: 2px solid var(--ink);
}

.trail li::before {
    content: counter(tip, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 16px;
    font: 800 3.6rem/1 var(--display);
    color: var(--oak-text);
}

.trail p {
    margin-bottom: 8px;
}

.trail a {
    font-weight: 700;
}

.trail a::after {
    content: " →";
}

/* ---- call band ---- */

.callband {
    background:
        linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0.35) 70%, transparent 70%),
        var(--sun);
    color: #1f2328;
    padding: clamp(40px, 6vw, 72px) 0;
}

.callband-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto;
    gap: 20px 48px;
    align-items: center;
}

.callband h2 {
    text-transform: uppercase;
    margin-bottom: 8px;
}

.callband p {
    margin: 0;
    font-size: 1.15rem;
}

.callband-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- inner pages ---- */

.page-hero {
    padding: clamp(36px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
}

.page-hero .lead {
    max-width: 52ch;
    margin: 0;
}

.crumbs {
    margin-bottom: 18px;
    font-weight: 700;
    color: var(--ink-2);
}

.crumbs a {
    color: var(--ink-2);
}

.crumbs [aria-current] {
    color: var(--oak-text);
}

.service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px 64px;
    align-items: start;
    padding: clamp(40px, 6vw, 72px) 0;
}

.prose {
    max-width: 66ch;
}

.prose h2 {
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
    margin-top: 1.1em;
}

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

.price-card {
    position: sticky;
    top: 96px;
    padding: 26px;
    border-radius: var(--r);
    background: var(--sheet);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.price-card h2 {
    text-transform: uppercase;
}

.price-lines {
    margin: 0 0 12px;
}

.price-lines div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}

.price-lines dt {
    flex: 1;
}

.price-lines dd {
    margin: 0;
    font: 800 1.55rem/1 var(--display);
    color: var(--oak-text);
    white-space: nowrap;
}

.price-lines small {
    font: 400 0.85rem var(--text);
    color: var(--ink-2);
    margin-left: 2px;
}

.price-note {
    font-size: 0.95rem;
    color: var(--ink-2);
    margin-bottom: 0.6em;
}

/* sandpaper grits: the dots get finer */
.grits {
    list-style: none;
    margin: 0 0 1.2em;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.grits li {
    --dot: 7px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
    padding: 14px;
    border-radius: 16px;
    background:
        radial-gradient(circle, rgba(31, 35, 40, 0.28) 30%, transparent 32%) 0 0 / var(--dot) var(--dot),
        #d9c3a0;
    color: #1f2328;
}

.grits li:nth-child(2) {
    --dot: 4.5px;
}

.grits li:nth-child(3) {
    --dot: 3px;
}

.grits strong {
    font: 800 2.4rem/1 var(--display);
    background: #d9c3a0;
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 6px;
}

.grits span {
    background: #d9c3a0;
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 6px;
}

.coats {
    list-style: none;
    margin: 0 0 1.2em;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.coats li {
    padding: 16px;
    border-radius: 16px;
    background: var(--sheet);
    border: 1px solid var(--line);
}

.coats strong {
    display: block;
    font: 800 4rem/0.9 var(--display);
    color: var(--oak-text);
}

.coats span {
    font-size: 1rem;
}

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

.chips a {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--sheet);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.chips a:hover {
    border-color: var(--oak-text);
}

.chips a[aria-current] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* prices page */
.price-groups {
    columns: 2 380px;
    column-gap: 48px;
}

.price-group {
    break-inside: avoid;
    margin-bottom: 36px;
}

.price-group h3 {
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 4px;
}

.oak-soft {
    background: var(--sheet-2);
}

.rules {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px 56px;
    align-items: center;
}

.marks {
    margin: 0;
    padding-left: 1.2em;
}

.marks li {
    margin-bottom: 6px;
}

.marks li::marker {
    color: var(--oak-text);
}

.minimum {
    margin: 0;
    padding: 28px;
    border-radius: var(--r);
    background: var(--graphite);
    color: var(--on-dark);
}

.minimum span {
    display: block;
    color: var(--on-dark-2);
}

.minimum strong {
    font: 800 4rem/1 var(--display);
    color: var(--sun);
}

/* contact */
.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.contact-card,
.form-card {
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--r);
    background: var(--sheet);
    border: 1px solid var(--line);
}

.contact-card h2,
.form-card h2 {
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
    margin-top: 0.6em;
}

.form-card h2 {
    margin-top: 0;
}

.big-phone-line {
    margin: 0 0 6px;
}

.big-phone {
    font: 800 clamp(2.8rem, 2rem + 3vw, 4.2rem)/1 var(--display);
    color: var(--oak-text);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.big-mail {
    font-size: 1.25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.muted {
    color: var(--ink-2);
}

.steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    counter-reset: step;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 16px 56px;
    min-height: 44px;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font: 800 1.5rem/1 var(--display);
}

.notice {
    margin: 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--sun-soft);
    color: #1f2328;
    font-weight: 700;
}

.contact-form > div {
    margin-bottom: 14px;
}

.contact-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    border-color: var(--oak-text);
}

.contact-form ul {
    margin: 4px 0 0;
    padding-left: 1.1em;
    color: #b42318;
}

.form-hint {
    margin-top: 10px;
    font-size: 0.92rem;
    color: var(--ink-2);
}

.contact-sent {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--sun-soft);
    color: #1f2328;
}

.contact-sent strong {
    display: block;
}

/* ---- footer: graphite in both themes ---- */

.foot {
    background: var(--graphite);
    color: var(--on-dark-2);
    padding: 56px 0 24px;
}

.foot a {
    color: var(--on-dark);
}

.foot h2 {
    font-size: 1.6rem;
    color: var(--on-dark);
    text-transform: uppercase;
}

.foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.foot-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 800 2.2rem/1 var(--display);
    text-transform: uppercase;
    color: var(--on-dark);
    --mark-bg: #2a2f36;
}

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

.foot-links li {
    margin-bottom: 6px;
}

.foot-phone {
    font: 800 2rem/1 var(--display);
    text-decoration: none;
    color: var(--sun) !important;
}

.foot-bottom {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(239, 233, 223, 0.14);
    font-size: 0.92rem;
}

.foot-bottom p {
    margin: 0;
}

/* the call bar: phones only */
.callbar {
    display: none;
}

/* ---- reveal on scroll, where the browser can tie it to the scroll ---- */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .bento li,
        .tin,
        .trail li,
        .price-group {
            animation: rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

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

.not-found {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    text-align: center;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 36px 36px;
}

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

.not-found .brand {
    justify-content: center;
    margin-bottom: 18px;
}

.not-found h1 {
    font-size: clamp(2.8rem, 2rem + 4vw, 4.8rem);
}

.not-found [lang="en"] {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

/* ---- responsive ---- */

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

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

@media (max-width: 960px) {
    .top-row {
        grid-template-columns: auto auto;
        justify-content: space-between;
        padding: 8px 0 10px;
    }

    .nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .hero-grid,
    .oak-inner,
    .section-head,
    .service-grid,
    .rules,
    .duo,
    .callband-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-card {
        position: static;
    }

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

    .bento-1 {
        grid-column: span 2;
        grid-row: auto;
    }

    .bento-1 a {
        min-height: 300px;
    }

    .bento-2,
    .bento-5,
    .bento-6 {
        grid-column: auto;
    }

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

    .foot-grid > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: 68px;
    }

    .call-number {
        display: none;
    }

    .call {
        padding: 10px 12px;
    }

    .brand-name {
        font-size: 1.6rem;
    }

    .nav a {
        padding: 7px 11px;
    }

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

    .tins {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 80%);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 0 14px;
        overscroll-behavior-x: contain;
    }

    .tin {
        scroll-snap-align: start;
    }

    .callbar {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        border-radius: 999px;
        background: var(--btn);
        color: var(--btn-text);
        font-weight: 700;
        font-size: 1.1rem;
        text-decoration: none;
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.45);
    }
}

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

    .bento-1 {
        grid-column: auto;
    }

    .bento a {
        min-height: 0;
    }

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

    .slider {
        grid-template-columns: 4.8em 1fr 3.8em;
    }

    .grits,
    .coats {
        gap: 6px;
    }

    .grits li {
        min-height: 96px;
        padding: 10px;
    }

    .coats li {
        padding: 12px 10px;
    }

    .coats strong {
        font-size: 3rem;
    }

    .trail li {
        padding-left: 66px;
    }

    .trail li::before {
        font-size: 3rem;
    }

    .btn-big {
        font-size: 1.7rem;
    }
}

/* ---- lightbox: /js/lightbox.js opens a linked image enlarged over the page, in a <dialog> ----
   Paste this block into the site's css/site.css. The overlay is dark in every theme and brings its own
   colours and box sizing, so it does not depend on the rest of the stylesheet. To recolour it to the
   site, set these on .lightbox (or on :root): --lb-bg, --lb-text, --lb-accent (focus ring),
   --lb-accent-soft (hover). */

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

.lightbox,
.lightbox * {
    box-sizing: border-box;
}

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: var(--lb-bg, rgba(12, 14, 16, 0.95));
    color: var(--lb-text, #f2f2f2);
    color-scheme: dark;
    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-radius: 4px;
    background: #fff;
}

.lightbox-caption {
    display: grid;
    place-items: center;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0 56px;
    color: var(--lb-text, #f2f2f2);
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-button {
    position: absolute;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lightbox-button:hover {
    border-color: #ffffff;
    background-color: var(--lb-accent-soft, rgba(255, 255, 255, 0.16));
}

.lightbox-button:focus-visible {
    outline: 3px solid var(--lb-accent, #ffffff);
    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' 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;
}

@media (min-width: 760px) {
    .lightbox {
        padding: 24px 84px 18px;
    }

    .lightbox-caption {
        padding: 0;
    }

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

    .lightbox-prev {
        left: 20px;
    }

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

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

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] {
        animation: lightbox-in 0.2s ease;
    }
}

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