/* ==========================================================================
   Woodesk Proje - public site
   --------------------------------------------------------------------------
   Design direction: "atelier spec sheet". The reference is a joinery
   workshop's own drawings and a printed furniture monograph - not a SaaS
   landing page. That drives every choice below:

     - Square corners. Radius is 0 almost everywhere; cabinetry has edges.
     - Hairlines, not shadows. Structure comes from 1px rules on a paper
       ground, the way a technical drawing is built. Cards do not float.
     - Mono for labels and numbers, serif for statements, sans for reading.
       Section eyebrows are numbered (01 / 02) like drawing sheets.
     - Asymmetry. Headings sit in a narrow measure offset from the grid
       rather than centred, so pages read as editorial spreads.

   Hand-written, no build step - served exactly as it sits here.

   Two rules worth knowing before editing:
   - Hover transforms live behind @media (hover:hover) and (pointer:fine).
     Without that guard, touch devices fire :hover on tap and the element
     sticks in its hovered state under the finger.
   - Turkish needs the latin-ext subset (ğ ş ı İ ç ö ü). The font link in the
     layout requests it explicitly; dropping it silently breaks glyphs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Near-white paper with a trace of warmth. Not pure #FFF - that reads
       cold and screen-y beside photographs of timber - but light enough that
       the site feels bright rather than sepia. Every text pair on this ground
       clears WCAG AA. */
    --paper: #FBFAF7;
    --paper-2: #F4F1EB;
    --paper-3: #EAE4DA;
    --ink: #17140F;
    --ink-2: #332C22;
    --muted: #6A6154;
    --muted-2: #948A7B;

    --rule: #E1DACE;
    --rule-strong: #C6BAA7;

    /* The Woodesk brand green, sampled from the logo (#006847). Used
       sparingly - on rules, numbers and the primary action only. Against the
       warm paper ground it reads as timber-and-forest rather than corporate. */
    --accent: #006847;
    --accent-2: #005036;
    --accent-wash: #E3EDE8;

    --white: #FFFFFF;
    --danger: #9B2C1E;
    --ok: #2C5B43;

    --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --f-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --container: 1280px;
    --gutter: 28px;
    --header-h: 76px;

    --ease: cubic-bezier(.2, .6, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-2); text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    color: var(--ink);
    margin: 0 0 .5em;
    font-weight: 400;
    /* Fraunces is a variable font: dial in a low optical size and a touch of
       "soft" so large headings stay warm rather than brittle. */
    font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 40;
    line-height: 1.08;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .65vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.05rem; line-height: 1.3; }

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
strong { font-weight: 600; color: var(--ink); }

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

::selection { background: var(--accent); color: var(--paper); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: .85rem 1.25rem; z-index: 200;
    font-family: var(--f-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; }

/* Honeypot: hidden from people, still present and fillable for bots.
   Never display:none - many bots skip those. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 780px; }

.section { padding: clamp(64px, 8vw, 128px) 0; }
.section--tight { padding: clamp(44px, 5vw, 76px) 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: rgba(251, 250, 247, .74); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--paper); }
.section--rule-top { border-top: 1px solid var(--rule); }

.grid { display: grid; gap: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap { gap: 32px; }

/* Editorial section head: label column on the left, statement on the right.
   This offset is the layout's signature - it is what stops every section
   looking like a centred hero. */
.section-head {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: clamp(30px, 4vw, 52px);
    margin-bottom: clamp(30px, 4vw, 52px);
    border-bottom: 1px solid var(--rule);
}
.section-head__body { max-width: 60ch; }
.section-head h2 { margin-bottom: .35em; }
.section-head .lead { margin-bottom: 0; }

.eyebrow {
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin: 0;
}
/* The rule after the label is what makes it read as a drawing annotation. */
.eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule-strong);
    transform: translateY(-3px);
}
.section--ink .eyebrow { color: #6FB496; }
.section--ink .eyebrow::after { background: rgba(251, 250, 247, .28); }

.lead { font-size: 1.12rem; color: var(--muted); }
.section--ink .lead { color: rgba(251, 250, 247, .7); }

.measure { max-width: 62ch; }

/* --------------------------------------------------------------------------
   4. Buttons - rectangular, mono, letterspaced. No pills anywhere.
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7em;
    font-family: var(--f-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 1.15em 1.9em;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost { background: transparent; border-color: rgba(251, 250, 247, .35); color: var(--paper); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--wide { width: 100%; }
.btn--sm { padding: .85em 1.3em; font-size: .72rem; }

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
    .btn--outline:hover { background: var(--ink); color: var(--paper); }
    .btn--ghost:hover { background: rgba(251, 250, 247, .1); border-color: var(--paper); }
    .btn--light:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Text link with a rule that draws in from the left on hover. */
.link-arrow {
    font-family: var(--f-mono);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--rule-strong);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .link-arrow:hover { color: var(--accent); border-color: var(--accent); }
    .link-arrow:hover svg { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--ink);
    color: rgba(251, 250, 247, .62);
    font-family: var(--f-mono);
    font-size: .73rem;
    letter-spacing: .04em;
    padding: .55rem 0;
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.topbar a { color: rgba(251, 250, 247, .85); }
.topbar a:hover { color: var(--paper); }
.topbar__links { display: flex; gap: 1.6rem; align-items: center; }

.header {
    position: sticky; top: 0; z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo__mark { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.logo__text { display: flex; flex-direction: column; line-height: 1; gap: .22rem; }
.logo__name {
    font-family: var(--f-display);
    font-size: 1.42rem;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 20;
    color: var(--ink);
    letter-spacing: -.02em;
}
.logo__sub {
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
}

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
    position: relative;
    font-family: var(--f-mono);
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: .4rem 0;
}
.nav__link::after {
    content: '';
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--accent);
    transition: right .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .nav__link:hover { color: var(--ink); }
    .nav__link:hover::after { right: 0; }
}
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { right: 0; }

.nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--rule-strong);
    width: 44px; height: 44px;
    cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
}
.nav__toggle span { display: block; position: relative; width: 18px; height: 1px; background: var(--ink); }
.nav__toggle span::before, .nav__toggle span::after {
    content: ''; position: absolute; left: 0;
    width: 18px; height: 1px; background: var(--ink);
    transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero - asymmetric, oversized, with a drafting grid ground
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
}
/* Faint drafting grid. Drawn in CSS so it costs no request and scales. */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(156, 74, 33, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(156, 74, 33, .05) 1px, transparent 1px);
    background-size: 68px 68px;
    pointer-events: none;
}
.hero__inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding: clamp(56px, 7vw, 104px) 0;
}
.hero__eyebrow { margin-bottom: 1.6rem; max-width: 320px; }
.hero__title { margin-bottom: .45em; }
/* Pull the accent word out of the headline flow in italic - Fraunces has a
   genuinely different italic, so this reads as typographic voice, not styling. */
.hero__title em { font-style: italic; color: var(--accent); font-variation-settings: 'SOFT' 40, 'WONK' 1; }
.hero__lead { font-size: clamp(1.04rem, .98rem + .34vw, 1.22rem); color: var(--muted); max-width: 40ch; margin-bottom: 2.2rem; }

.hero__art {
    position: relative;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    aspect-ratio: 5 / 6;
    overflow: hidden;
}
.hero__art img, .hero__art svg { width: 100%; height: 100%; object-fit: cover; }
/* Corner ticks, like a drawing's crop marks. */
.hero__art::before, .hero__art::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid var(--accent);
    pointer-events: none;
}
.hero__art::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.hero__art::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.hero__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(23, 20, 15, .88);
    color: var(--paper);
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    padding: .85rem 1.1rem;
    display: flex; justify-content: space-between; gap: 1rem;
}

/* Page (non-home) hero */
.hero--page .hero__inner { display: block; padding: clamp(44px, 5.5vw, 84px) 0 clamp(36px, 4.5vw, 60px); }
.hero--page .hero__title { max-width: 18ch; }
.hero--page .hero__lead { margin-bottom: 0; max-width: 58ch; }

/* --------------------------------------------------------------------------
   7. Stat row - hairline separated, mono figures
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--rule);
}
/* Symmetric padding and centred content: the cell is the unit of the grid, so
   the figure has to sit in the middle of it. Asymmetric padding left every
   stat flush against its left edge with dead space before the next divider. */
.stats__item {
    padding: clamp(24px, 3vw, 40px) 20px;
    border-right: 1px solid var(--rule);
    text-align: center;
}
.stats__item:last-child { border-right: 0; }
.stats__value {
    font-family: var(--f-display);
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    color: var(--ink);
    line-height: 1; margin-bottom: .5rem;
}
.stats__value sup { font-size: .42em; color: var(--accent); vertical-align: super; margin-left: .1em; }
.stats__label {
    font-family: var(--f-mono);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   8. Index rows - services as a numbered list, not a card deck
   -------------------------------------------------------------------------- */
.index-list { border-top: 1px solid var(--rule); }
.index-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr) 150px;
    gap: 28px;
    align-items: center;
    padding: clamp(26px, 3vw, 40px) 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
    transition: background-color .3s var(--ease);
}
.index-row__num {
    font-family: var(--f-mono);
    font-size: .78rem; letter-spacing: .1em;
    color: var(--accent);
}
.index-row__title { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.05rem); transition: transform .35s var(--ease); }
.index-row__title a { color: var(--ink); }
.index-row__text { color: var(--muted); font-size: .96rem; margin: 0; }
.index-row__go { justify-self: end; }
@media (hover: hover) and (pointer: fine) {
    .index-row:hover { background: var(--paper-2); }
    .index-row:hover .index-row__title { transform: translateX(10px); }
    .index-row:hover .index-row__title a { color: var(--accent); }
}
/* Full-row click target without nesting interactive elements. */
.index-row__link::after { content: ''; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   9. Project cards - image-led, hairline framed, no shadow
   -------------------------------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.work-grid--2 { grid-template-columns: repeat(2, 1fr); }

.work {
    position: relative;
    background: var(--paper);
    display: flex; flex-direction: column;
    transition: background-color .3s var(--ease);
}
.work__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.work__tag {
    position: absolute; top: 0; left: 0;
    background: var(--paper);
    color: var(--accent);
    font-family: var(--f-mono);
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .5rem .8rem;
}
.work__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.work__title { font-size: 1.28rem; margin-bottom: .5rem; }
.work__title a { color: var(--ink); }
.work__text { color: var(--muted); font-size: .93rem; margin-bottom: 1.2rem; flex: 1; }
.work__meta {
    font-family: var(--f-mono);
    font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted-2);
    display: flex; flex-wrap: wrap; gap: .4rem .9rem;
    padding-top: .9rem; border-top: 1px solid var(--rule);
    margin-top: auto;
}
.work__link::after { content: ''; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
    .work:hover { background: var(--paper-2); }
    .work:hover .work__media img { transform: scale(1.05); }
    .work:hover .work__title a { color: var(--accent); }
}

/* --------------------------------------------------------------------------
   10. Process - vertical spec sheet
   -------------------------------------------------------------------------- */
.process { border-top: 1px solid rgba(251, 250, 247, .2); }
.process__row {
    display: grid;
    grid-template-columns: 90px minmax(0, .9fr) minmax(0, 1.5fr);
    gap: 28px;
    padding: clamp(24px, 3vw, 38px) 0;
    border-bottom: 1px solid rgba(251, 250, 247, .2);
    align-items: baseline;
}
.process__num { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; color: #6FB496; }
.process__title { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin: 0; }
.process__text { margin: 0; color: rgba(251, 250, 247, .68); font-size: .96rem; }

/* --------------------------------------------------------------------------
   11. Feature grid - hairline cells
   -------------------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.feature {
    background: var(--paper);
    padding: clamp(1.6rem, 2.4vw, 2.3rem);
}
.feature__icon { color: var(--accent); margin-bottom: 1.1rem; }
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.feature p { color: var(--muted); font-size: .93rem; margin: 0; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.checklist li {
    position: relative;
    padding: .85rem 0 .85rem 2.1rem;
    margin: 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    font-size: .96rem;
}
.checklist li::before {
    content: '';
    position: absolute; left: 0; top: 1.15rem;
    width: 13px; height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006847' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   12. Product showcase (mirrored store catalogue)
   -------------------------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.product { background: var(--paper); display: flex; flex-direction: column; transition: background-color .3s var(--ease); }
.product__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.product__media { aspect-ratio: 1; overflow: hidden; background: var(--white); }
.product__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.product__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.product__cat {
    font-family: var(--f-mono);
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-2); margin-bottom: .45rem;
}
.product__title {
    font-family: var(--f-body);
    font-size: .9rem; font-weight: 400; line-height: 1.45;
    color: var(--ink-2); margin: 0 0 .8rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product__price { margin-top: auto; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; font-family: var(--f-mono); }
.product__price-now { font-size: .88rem; color: var(--ink); }
.product__price-was { font-size: .75rem; color: var(--muted-2); text-decoration: line-through; }
@media (hover: hover) and (pointer: fine) {
    .product:hover { background: var(--paper-2); }
    .product:hover .product__media img { transform: scale(1.06); }
}

.store-note {
    margin-top: 1.8rem;
    font-family: var(--f-mono);
    font-size: .74rem; letter-spacing: .04em;
    color: var(--muted); text-align: center;
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-card { background: var(--paper); border: 1px solid var(--rule); padding: clamp(1.6rem, 3vw, 2.6rem); }
.form-card--ink { background: var(--ink); border-color: rgba(251, 250, 247, .2); }

.field { margin-bottom: 1.2rem; }
.field label {
    display: block;
    font-family: var(--f-mono);
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .5rem;
}
.form-card--ink .field label { color: rgba(251, 250, 247, .6); }
.field .req { color: var(--accent); }

.input, .select, .textarea {
    width: 100%;
    font-family: inherit;
    font-size: 16px; /* iOS zooms the page on focus below 16px */
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: .7rem 0;
    transition: border-color .25s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.form-card--ink .input,
.form-card--ink .select,
.form-card--ink .textarea { color: var(--paper); border-bottom-color: rgba(251, 250, 247, .3); }
.form-card--ink .input::placeholder,
.form-card--ink .textarea::placeholder { color: rgba(251, 250, 247, .35); }

.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.textarea { min-height: 116px; resize: vertical; line-height: 1.6; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6154' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 16px;
    padding-right: 2rem;
}
.form-card--ink .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4EE' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.form-card--ink .select option { color: var(--ink); }

.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--accent); }

.field--error .input, .field--error .select, .field--error .textarea { border-bottom-color: var(--danger); }
.field__error { color: var(--danger); font-size: .82rem; margin-top: .4rem; }
.form-card--ink .field__error { color: #E39684; }

.form-note { font-size: .82rem; color: var(--muted); margin-top: 1.1rem; }
.form-card--ink .form-note { color: rgba(251, 250, 247, .55); }
.form-note a { color: inherit; text-decoration: underline; }

.alert {
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    font-size: .93rem;
    border-left: 3px solid;
}
.alert--success { background: #E9F0EB; border-color: var(--ok); color: var(--ok); }
.alert--error { background: #F6E8E5; border-color: var(--danger); color: var(--danger); }

/* --------------------------------------------------------------------------
   14. Breadcrumbs, filters, pagination
   -------------------------------------------------------------------------- */
.breadcrumb {
    list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
    padding: 0; margin: 0 0 1.6rem;
    font-family: var(--f-mono); font-size: .7rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: '/'; color: var(--rule-strong); }
.breadcrumb a { color: var(--muted); }
.breadcrumb [aria-current='page'] { color: var(--ink-2); }

.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 2.4rem; border-bottom: 1px solid var(--rule); }
.filter {
    font-family: var(--f-mono);
    font-size: .73rem; letter-spacing: .09em; text-transform: uppercase;
    padding: .9rem 1.25rem;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.filter:hover { color: var(--ink); }
.filter.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.pagination { display: flex; justify-content: center; gap: 0; margin-top: 3.2rem; flex-wrap: wrap; border: 1px solid var(--rule); width: fit-content; margin-inline: auto; }
.pagination a, .pagination span {
    min-width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .9rem;
    font-family: var(--f-mono); font-size: .78rem;
    color: var(--ink-2);
    border-right: 1px solid var(--rule);
}
.pagination > :last-child { border-right: 0; }
.pagination a:hover { background: var(--paper-2); }
.pagination .is-current { background: var(--ink); color: var(--paper); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

/* --------------------------------------------------------------------------
   15. Prose
   -------------------------------------------------------------------------- */
.prose { font-size: 1.05rem; color: var(--ink-2); }
.prose h2 { margin-top: 2em; font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7em; }
.prose li { margin-bottom: .55em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose > ul li::marker { color: var(--accent); }

/* --------------------------------------------------------------------------
   16. FAQ - native disclosure, hairline rows
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding: 1.3rem 0;
    font-family: var(--f-display);
    font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
    color: var(--ink);
    cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: '+';
    font-family: var(--f-mono);
    font-size: 1.2rem; color: var(--accent);
    flex: none; line-height: 1;
    transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.5rem; color: var(--muted); font-size: .98rem; max-width: 70ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Gallery and project detail
   -------------------------------------------------------------------------- */
.project-hero { border: 1px solid var(--rule); background: var(--paper-3); aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.project-hero img { width: 100%; height: 100%; object-fit: cover; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.gallery__item { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .gallery__item:hover img { transform: scale(1.04); }
}

.spec-list { border-top: 1px solid var(--rule); }
.spec-list__row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: .93rem;
}
.spec-list__key { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); }
.spec-list__val { color: var(--ink); text-align: right; }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2.2rem, 5vw, 4.2rem);
    display: grid;
    grid-template-columns: 1.5fr auto;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(251, 250, 247, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(251, 250, 247, .04) 1px, transparent 1px);
    background-size: 54px 54px;
    pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper); margin-bottom: .4rem; }
.cta-band p { color: rgba(251, 250, 247, .72); margin: 0; max-width: 46ch; }
.cta-band__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
.contact-list { border-top: 1px solid var(--rule); }
.contact-item { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.contact-item__icon { flex: none; color: var(--accent); padding-top: .15rem; }
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item__label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .2rem; }
.contact-item__value { color: var(--ink); font-size: 1rem; }
.contact-item__value a { color: var(--ink); }
.contact-item__value a:hover { color: var(--accent); }

.map-embed { border: 1px solid var(--rule); aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(251, 250, 247, .62); padding: clamp(52px, 6vw, 84px) 0 0; }
.footer a { color: rgba(251, 250, 247, .78); }
.footer a:hover { color: var(--paper); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer h4 {
    font-family: var(--f-mono);
    color: var(--paper);
    font-size: .68rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .65rem; font-size: .92rem; }
.footer p { font-size: .92rem; line-height: 1.7; }
.footer .logo { margin-bottom: 1.1rem; }
.footer .logo__name { color: var(--paper); }

.footer__social { display: flex; gap: .5rem; margin-top: 1.3rem; }
.footer__social a {
    width: 38px; height: 38px;
    border: 1px solid rgba(251, 250, 247, .22);
    display: grid; place-items: center;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.footer__social a:hover { background: rgba(251, 250, 247, .1); border-color: rgba(251, 250, 247, .5); }
.footer__social svg { width: 17px; height: 17px; }

.footer__bottom {
    border-top: 1px solid rgba(251, 250, 247, .16);
    padding: 1.5rem 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em;
}

/* Sticky mobile action bar - the highest-intent actions on a phone. */
.callbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--ink);
    border-top: 1px solid rgba(251, 250, 247, .2);
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    gap: .5rem;
}
.callbar .btn { flex: 1; padding: .95em .8em; }

/* --------------------------------------------------------------------------
   20b. Price configurator
   -------------------------------------------------------------------------- */
.config { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 0; border: 1px solid var(--rule); }
.config__controls { border-right: 1px solid var(--rule); }
.config__panel { background: var(--paper-2); }

.config-step { padding: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--rule); }
.config-step:last-child { border-bottom: 0; }
.config-step__head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.4rem; }
.config-step__num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--accent); }
.config-step__title { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.config-step__note { font-size: .88rem; color: var(--muted); margin: -.6rem 0 1.4rem; }

/* Dimension control: number field and range slider bound to one value. */
.dim { margin-bottom: 1.6rem; }
.dim:last-child { margin-bottom: 0; }
.dim__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.dim__label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dim__hint { font-family: var(--f-mono); font-size: .68rem; color: var(--muted-2); }
.dim__entry { display: flex; align-items: baseline; gap: .4rem; }
.dim__number {
    width: 5.5ch;
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    color: var(--ink);
    background: transparent;
    border: 0; border-bottom: 1px solid var(--rule-strong);
    border-radius: 0; padding: 0 0 .15rem; text-align: right;
    -moz-appearance: textfield; appearance: textfield;
}
.dim__number::-webkit-outer-spin-button,
.dim__number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dim__number:focus { outline: none; border-bottom-color: var(--accent); }
.dim__unit { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }

.dim__range {
    width: 100%; height: 24px;
    background: transparent; -webkit-appearance: none; appearance: none;
    cursor: pointer;
}
.dim__range::-webkit-slider-runnable-track { height: 2px; background: var(--rule-strong); }
.dim__range::-moz-range-track { height: 2px; background: var(--rule-strong); }
.dim__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; margin-top: -9px;
    background: var(--accent); border: 0; border-radius: 0;
    transform: rotate(45deg);
}
.dim__range::-moz-range-thumb {
    width: 20px; height: 20px;
    background: var(--accent); border: 0; border-radius: 0;
}
.dim__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Choice rows - radios and checkboxes styled as full-width selectable rows. */
.choice-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.choice {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: opacity .2s var(--ease);
}
.choice input { margin: .25rem 0 0; accent-color: var(--accent); width: 17px; height: 17px; flex: none; cursor: pointer; }
.choice__body { flex: 1; min-width: 0; }
.choice__name { font-weight: 500; color: var(--ink); font-size: .98rem; display: block; }
.choice__desc { font-size: .86rem; color: var(--muted); margin: .2rem 0 0; }
.choice__price {
    font-family: var(--f-mono); font-size: .82rem; color: var(--accent);
    white-space: nowrap; padding-top: .1rem;
}
.choice:has(input:checked) .choice__name { color: var(--accent); }

/* Sticky result panel */
.price-panel { position: sticky; top: calc(var(--header-h) + 16px); padding: clamp(1.5rem, 3vw, 2.2rem); }
.price-panel__label { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.price-panel__value {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    color: var(--ink); line-height: 1.1; margin-bottom: .5rem;
    /* Tabular figures stop the number jittering as the slider moves. */
    font-variant-numeric: tabular-nums;
}
.price-panel__value span { color: var(--muted-2); font-size: .5em; }
.price-panel__units { font-family: var(--f-mono); font-size: .76rem; color: var(--muted); margin-bottom: 1.4rem; }

.breakdown { border-top: 1px solid var(--rule); margin-bottom: 1.4rem; }
.breakdown__row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .88rem; }
.breakdown__label { color: var(--ink-2); }
.breakdown__detail { display: block; font-family: var(--f-mono); font-size: .68rem; color: var(--muted-2); margin-top: .15rem; }
.breakdown__amount { font-family: var(--f-mono); font-size: .84rem; color: var(--ink); white-space: nowrap; }

.price-note { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.price-note strong { color: var(--ink); }

.config-flag {
    font-size: .82rem; padding: .7rem .9rem; margin-bottom: 1.2rem;
    background: var(--accent-wash); border-left: 3px solid var(--accent); color: var(--ink-2);
}
.config-flag[hidden] { display: none; }

/* Configurator index cards */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tool {
    position: relative; background: var(--paper);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    display: flex; flex-direction: column;
    transition: background-color .3s var(--ease);
}
.tool__icon { color: var(--accent); margin-bottom: 1.2rem; }
.tool__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .5rem; }
.tool__title a { color: var(--ink); }
.tool__text { color: var(--muted); font-size: .94rem; flex: 1; margin-bottom: 1.4rem; }
.tool__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.tool__from { font-family: var(--f-mono); font-size: .74rem; color: var(--accent); }
.tool__link::after { content: ''; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
    .tool:hover { background: var(--paper-2); }
    .tool:hover .tool__title a { color: var(--accent); }
}

@media (max-width: 980px) {
    .config { grid-template-columns: 1fr; }
    .config__controls { border-right: 0; border-bottom: 1px solid var(--rule); }
    /* Unsticking matters on mobile: a sticky panel below the controls would
       pin itself to the bottom of a long scroll and cover the form. */
    .price-panel { position: static; }
    .tool-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. Empty states and utilities
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: clamp(2.6rem, 6vw, 4.5rem) 1.5rem;
    border: 1px dashed var(--rule-strong);
    color: var(--muted);
}
.empty-state svg { width: 40px; height: 40px; color: var(--accent); margin: 0 auto 1.2rem; }

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 1.6rem; }
.mt-4 { margin-top: 2.4rem; }
.mb-4 { margin-bottom: 2.4rem; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .grid--4, .product-grid { grid-template-columns: repeat(3, 1fr); }
    .work-grid { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__art { order: -1; aspect-ratio: 16 / 10; }
    .index-row { grid-template-columns: 60px minmax(0, 1fr) 130px; }
    .index-row__text { display: none; }
}

@media (max-width: 860px) {
    :root { --header-h: 64px; --gutter: 20px; }

    .section-head { grid-template-columns: 1fr; gap: 18px; }
    .grid--3, .grid--2, .feature-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .work-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats__item { border-right: 0; border-bottom: 1px solid var(--rule); }
    .stats__item:nth-child(odd) { border-right: 1px solid var(--rule); }
    /* No trailing rule under the last row - the section below draws its own. */
    .stats__item:nth-last-child(-n+2) { border-bottom: 0; }
    .cta-band { grid-template-columns: 1fr; }
    .topbar__links { display: none; }
    .process__row { grid-template-columns: 50px 1fr; }
    .process__text { grid-column: 2; }

    .nav__toggle { display: inline-flex; }

    /* Mobile drawer. Toggled by a class swap on a live node in site.js -
       never re-render the nav to open it. */
    .nav {
        position: fixed; inset: var(--header-h) 0 0;
        background: var(--paper);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; padding: 1.2rem var(--gutter) 2.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        visibility: hidden;
    }
    .nav.is-open { transform: translateX(0); visibility: visible; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__list li { border-bottom: 1px solid var(--rule); }
    .nav__link { display: block; padding: 1.1rem 0; font-size: .95rem; }
    .nav__link::after { display: none; }
    .nav .btn { margin-top: 1.6rem; }

    body.nav-open { overflow: hidden; }

    .callbar { display: flex; }
    .footer { padding-bottom: 74px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .index-row { grid-template-columns: 44px 1fr; gap: 16px; }
    .index-row__go { display: none; }
    .gallery { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .btn { width: 100%; }
    .cta-band__actions { width: 100%; }
    .hero__caption { font-size: .66rem; }
}

@media print {
    .header, .footer, .callbar, .cta-band, .topbar, .nav { display: none; }
    body { background: #fff; font-size: 11pt; }
}

/* --------------------------------------------------------------------------
   23. Colour swatches (configurator step 03)
   -------------------------------------------------------------------------- */
/* Borders live on the cells, not as a 1px gap over a coloured ground: the
   swatch count rarely fills the last row, and a gap-based grid paints those
   empty cells as a solid block of rule colour. */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.swatch {
    position: relative;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: .9rem .9rem 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: background-color .2s var(--ease);
}
/* The radio stays in the DOM for keyboard and form semantics; the chip is
   the visible control. */
.swatch input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
}
.swatch__chip {
    display: block;
    height: 54px;
    border: 1px solid rgba(23, 20, 15, .18);
    transition: box-shadow .2s var(--ease);
}
.swatch__name { font-size: .85rem; color: var(--ink); line-height: 1.3; }
.swatch__price { font-family: var(--f-mono); font-size: .66rem; color: var(--muted-2); letter-spacing: .04em; }
.swatch:has(input:checked) { background: var(--paper-2); }
.swatch:has(input:checked) .swatch__chip { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.swatch:has(input:checked) .swatch__name { color: var(--accent); }
.swatch:has(input:focus-visible) .swatch__chip { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .swatch:hover { background: var(--paper-2); }
}

/* --------------------------------------------------------------------------
   24. Configurator live elevation preview
   -------------------------------------------------------------------------- */
.preview {
    margin: 0 0 1.6rem;
    border: 1px solid var(--rule);
    background: var(--paper);
    /* Same drafting ground as the hero, so the drawing reads as a workshop
       sheet rather than a product render. */
    background-image:
        linear-gradient(to right, rgba(0, 104, 71, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 104, 71, .06) 1px, transparent 1px);
    background-size: 22px 22px;
}
.preview__svg {
    display: block;
    width: 100%;
    /* A fixed box keeps the sticky panel from jumping as proportions change;
       the viewBox letterboxes inside it. */
    height: 230px;
    padding: 14px;
    box-sizing: border-box;
    overflow: visible;
}
.preview__caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .8rem;
    border-top: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-2);
    background: var(--paper);
}

@media (max-width: 980px) {
    .preview__svg { height: 200px; }
}

/* --------------------------------------------------------------------------
   25. Service-area list (local SEO block)
   -------------------------------------------------------------------------- */
.area-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
.area-list li {
    margin: 0;
    padding: .85rem 1rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--ink-2);
}
.area-list li::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--accent);
    margin-right: .6rem;
    vertical-align: middle;
}