/* Sisu Development, site design 2026-11, second pass. "From the plan to the keys."
   Paper, ink, bronze, and one red used only the way a drawing sheet uses it (dimension lines).

   ORDER IS THE RULE. A drawing set is exact: everything sits on the grid, edges line up, nothing floats.
   Every page is made of the same few parts, in this file:
     .sheet      the page opener: one ink frame, a title strip along its bottom edge
     .head       a section heading on a ruled line
     .strip      a row of photos that share one height and fill the row edge to edge (no holes)
     .split      text beside one figure, centred on each other
     .index      a contents list: name left, fact right
     .spec       label and fact rows
     .chain      steps on a red dimension line
     .quote      a buyer's words
     .band       the dark closing call
   Direction B, "Drawn, then built" (2026-11-11), adds:
     .lead       the opener of a main page: headline across the sheet, one large figure or a pair, then the words
     .pair       two pictures of one thing side by side (drawn and built, before and after), a red dimension line between
     .wipe       two photos taken from the same spot, one over the other; the red line wipes between them
     .zoom       a picture that opens full size
   No staggered collages, no offset photos, no rows of equal boxes, no pills, no numbered labels. */

:root {
  --paper: #FAF7F1;
  --paper-deep: #F3EEE5;
  --ink: #1A1A1A;
  --ink-soft: #3A3631;
  --muted: #5E5850;
  --rule: rgba(26, 26, 26, 0.55);
  --hair: rgba(26, 26, 26, 0.16);
  --bronze: #9C7F5C;
  --bronze-text: #7A6243;
  --bronze-dark: #B39A74;
  --red: #B3352B;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 8px;
  --gutter: 40px;
  --gap: 24px;
  --space: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Bodoni at display sizes draws hairlines too thin to read on a screen: hold the text cut at every size. */
* { font-variation-settings: "opsz" 14; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; }
h3 { font-size: clamp(23px, 2.1vw, 28px); line-height: 1.18; }
h4 { font-size: 20px; line-height: 1.25; }
p { margin: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; z-index: 50; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.nw { white-space: nowrap; }
.muted { color: var(--muted); }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--hair); background: var(--paper); }
.header-row { display: flex; align-items: center; gap: 28px; height: 80px; }
.logo { flex: none; }
.logo img { width: 160px; height: auto; }
.nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; white-space: nowrap; }
.nav a, .header-phone, .lang a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover, .header-phone:hover, .lang a:hover, .nav a[aria-current] {
  color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.nav a[aria-current] { text-decoration-color: var(--bronze); }
.header-side { display: flex; align-items: center; gap: 20px; padding-left: 24px; border-left: 1px solid var(--hair); white-space: nowrap; }
.header-phone { font-size: 15px; font-weight: 500; color: var(--ink); }
.lang { font-size: 14px; color: var(--muted); }
.lang span { color: var(--ink); font-weight: 500; }
.header-book { font-size: 15px; padding: 11px 16px; white-space: nowrap; }
.menu { display: none; }

/* ---------- Text pieces ---------- */

.lede { margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 32em; }
.note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.actions { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.btn {
  display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; font: inherit;
  font-weight: 500; font-size: 16px; line-height: 1.2; padding: 16px 24px; border-radius: 6px; border: 0; cursor: pointer;
}
.btn:hover { background: #33302B; }
.btn.light { background: var(--bronze-dark); color: var(--ink); }
.btn.light:hover { background: #C3AC88; }
.or-call { color: var(--muted); font-size: 16px; }
.or-call a, .text-link {
  color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--bronze);
  text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.or-call a { white-space: nowrap; }
.text-link { display: inline-block; font-size: 16px; }
.text-link:hover, .or-call a:hover { text-decoration-color: var(--ink); }
.plain a, .faq a, .prose a, .spec a, .index-note a { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plain p + p { margin-top: 0.9em; }

/* ---------- Sections and their ruled heading ---------- */

section { padding: var(--space) 0; }
section.tight { padding: 64px 0; }
section.deep { background: var(--paper-deep); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
section + section:not(.deep):not(.band) { padding-top: 0; }
section.deep + section:not(.deep):not(.band) { padding-top: var(--space); }

.head, .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 40px; border-bottom: 1px solid var(--rule); }
.head p, .section-head p { color: var(--ink-soft); max-width: 34em; font-size: 16px; }
.head .text-link { white-space: nowrap; }
.head h2 { flex: 0 1 auto; }
.after-strip { margin-top: 32px; }

/* ---------- Photos ---------- */

.ph img, .ph video { width: 100%; object-fit: cover; border-radius: var(--radius); background: var(--paper-deep); }
.ph figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ph figcaption b { font-weight: 500; color: var(--ink); }
.ph.line img, .ph.line video { box-shadow: 0 0 0 1px var(--hair); }
.r32 img { aspect-ratio: 3 / 2; }
.r45 img { aspect-ratio: 4 / 5; }
.r43 img { aspect-ratio: 4 / 3; }
.r169 img, .r169 video { aspect-ratio: 16 / 9; }

/* A strip: photos in one row, one shared height, the row filled edge to edge. Each figure carries --r, its
   width divided by its height (the build writes it from the real photo; set data-r on the figure to crop to
   another ratio). Wider photos take more of the row; nothing is left empty. */
.strip { display: flex; gap: var(--gap); align-items: flex-start; }
.strip + .strip { margin-top: var(--gap); }
.strip > figure, .strip > a, .strip > div { flex: var(--r, 1.5) 1 0; min-width: 0; }
.strip > a { text-decoration: none; }
.strip img, .strip video { width: 100%; aspect-ratio: var(--r, 1.5); object-fit: cover; border-radius: var(--radius); background: var(--paper-deep); }
.strip h3 { margin-top: 14px; }
.strip h3 + p { margin-top: 6px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; }
.strip a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--bronze); }

/* Text beside one figure. Twelve columns; the two sides are centred on each other so neither leaves a hole. */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.split > .text { grid-column: 1 / 6; }
.split > .media { grid-column: 7 / 13; }
.split.flip > .text { grid-column: 8 / 13; grid-row: 1; }
.split.flip > .media { grid-column: 1 / 7; grid-row: 1; }
.split.even > .text { grid-column: 1 / 7; }
.split.even > .media { grid-column: 7 / 13; }
.split.even.flip > .text { grid-column: 7 / 13; grid-row: 1; }
.split.even.flip > .media { grid-column: 1 / 7; grid-row: 1; }
.split.top { align-items: start; }
.split h2 + .lede, .split h3 + .lede { margin-top: 18px; }
.split .text > * + .spec, .split .text > * + .index, .split .text > * + .text-link { margin-top: 26px; }

/* ---------- The sheet: the opener of every page ---------- */

.sheet-wrap { padding-top: 28px; }
.sheet { border: 1px solid var(--rule); }
.sheet-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: 56px; }
.sheet-text { grid-column: 1 / 6; }
.sheet-fig { grid-column: 7 / 13; }
.sheet-body.wide .sheet-text { grid-column: 1 / 7; }
.sheet-body.wide .sheet-fig { grid-column: 8 / 13; }
.sheet-body.solo .sheet-text { grid-column: 1 / 9; }
.sheet-body.solo { padding-bottom: 48px; }
.sheet .crumb { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.sheet .crumb a { text-decoration: none; }
.sheet .crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The title strip runs along the bottom edge of the sheet, the way a drawing's title bar does. */
.title-strip { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.35; }
.title-strip > div { padding: 13px 18px 14px; border-left: 1px solid var(--hair); min-width: 0; }
.title-strip > div:first-child { border-left: 0; }
.title-strip dt { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.title-strip dd { margin: 0; color: var(--ink); }
.title-strip a { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.title-strip .ts-name { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
.ts-company { font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.ts-tag { font-family: var(--serif); font-style: italic; color: var(--bronze-text); font-size: 15px; }

/* ---------- Red dimension lines ---------- */

.dim { position: relative; height: 1px; background: var(--red); color: var(--red); }
.dim::before, .dim::after { content: ""; position: absolute; top: -7px; width: 1px; height: 15px; background: var(--red); transform: rotate(45deg); }
.dim::before { left: 0; }
.dim::after { right: 0; }
.dim span {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; background: var(--paper); padding: 0 8px; line-height: 1;
}
section.deep .dim span { background: var(--paper-deep); }

/* Steps on a chain dimension. Each step: text on the left columns, one figure (or nothing) on the right. */
.chain { list-style: none; padding-left: 96px; position: relative; }
.step { position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; --tick: 22px; --gap-y: 72px; }
.step + .step { margin-top: var(--gap-y); }
.step:not(:last-child)::before { content: ""; position: absolute; left: -64px; top: var(--tick); height: calc(100% + var(--gap-y)); width: 1px; background: var(--red); }
.step::after { content: ""; position: absolute; left: -71px; top: calc(var(--tick) - 7px); width: 1px; height: 15px; background: var(--red); transform: rotate(45deg); }
.step-text { position: relative; grid-column: 1 / 6; align-self: start; }
.step-text::before { content: ""; position: absolute; left: -76px; top: var(--tick); width: 64px; height: 1px; background: var(--hair); }
.step h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; }
.step p { margin-top: 12px; color: var(--ink-soft); max-width: 28em; }
.step p + p { margin-top: 10px; }
.step .text-link { margin-top: 16px; }
.step-fig { grid-column: 6 / 12; }
.step-fig img[data-r] { aspect-ratio: 3 / 2; }
.step-when { display: block; margin-top: 8px; font-size: 13.5px; color: var(--red); font-weight: 500; }
.step .spec { margin-top: 18px; font-size: 14.5px; }

/* ---------- Index: a contents list ---------- */

.index { list-style: none; border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--hair); }
.index a, .index .row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 14px 0 12px; text-decoration: none; }
.index .name { font-family: var(--serif); font-size: 25px; line-height: 1.15; white-space: nowrap; }
.index .fact { font-size: 14.5px; color: var(--muted); text-align: right; }
.index a:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--bronze); }
.index.small .name { font-size: 20px; }
.index.cols { columns: 2; column-gap: 48px; border-top: 0; }
.index.cols li { break-inside: avoid; border-top: 1px solid var(--hair); border-bottom: 0; }

/* ---------- Spec rows and tables ---------- */

.spec { margin: 0; border-top: 1px solid var(--rule); font-size: 15.5px; }
.spec > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.spec dt { color: var(--muted); font-size: 14px; }
.spec dd { margin: 0; }
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--rule); }
.tbl th, .tbl td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl th { font-weight: 500; color: var(--muted); font-size: 13.5px; }

/* Plain text choices (filters, tabs): words, the chosen one underlined in bronze. */
.chips { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.chips button, .chips a { font: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--muted); text-decoration: none; }
.chips [aria-pressed="true"], .chips [aria-current], .chips .on { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* A rail that stays in view beside long content (rooms of a home, steps, plans). */
.rail { position: sticky; top: 24px; align-self: start; list-style: none; font-size: 15px; border-left: 1px solid var(--hair); }
.rail a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; }
.rail a[aria-current], .rail a.on { color: var(--ink); border-left-color: var(--bronze); }

/* ---------- Quotes from buyers ---------- */

.quote { margin: 0; padding-left: 24px; border-left: 1px solid var(--red); }
.quote p { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.38; letter-spacing: 0; }
.quote footer { margin-top: 14px; font-size: 14px; color: var(--muted); }
.quote footer b { color: var(--ink); font-weight: 500; }
.quote.small p { font-size: 19px; }
.quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); align-items: center; }
.quotes > .quote:first-child { grid-column: 1 / 8; grid-row: 1 / 3; }
.quotes > .quote:not(:first-child) { grid-column: 8 / 13; }

/* ---------- Questions ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 36px 15px 0; position: relative; font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-family: var(--sans); font-size: 22px; color: var(--bronze-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > *:not(summary) { margin: 0 0 18px; color: var(--ink-soft); max-width: 46em; }

/* ---------- Long reading (journal posts, legal pages) ---------- */

.prose { max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(27px, 2.8vw, 34px); line-height: 1.15; color: var(--ink); margin-top: 2em; }
.prose h3 { font-size: 23px; color: var(--ink); margin-top: 1.7em; }
.prose h4 { margin-top: 1.5em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 1.8em 0; padding: 0 0 0 22px; border-left: 1px solid var(--red); font-family: var(--serif); font-size: 23px; line-height: 1.4; color: var(--ink); }
.prose img { border-radius: var(--radius); }
.prose figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; border-bottom-color: var(--rule); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.2em 0; }

/* ---------- Forms ---------- */

.form { display: grid; gap: 16px; max-width: 560px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=date], .form input[type=number], .form select, .form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 16px;
}
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.form textarea { min-height: 128px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); }
.form .check input { margin-top: 4px; }
.form .btn { justify-self: start; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-done { font-family: var(--serif); font-size: 24px; line-height: 1.3; max-width: 24em; }
.sisu-send-error { margin: 0; font-size: 15px; color: var(--red); }

/* ---------- Dark closing band ---------- */

.band { background: var(--ink); color: #EDE7DC; padding: 88px 0; }
.band h2 { color: #FAF7F1; }
.band p { color: #CFC7BA; max-width: 30em; margin-top: 16px; }
.band .or-call { color: #B9B0A2; }
.band .or-call a, .band .text-link { color: #FAF7F1; text-decoration-color: var(--bronze-dark); }
.band-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 48px; align-items: center; }
.band .actions { margin-top: 0; }
.band .sign { margin-top: 22px; font-size: 14px; color: #B9B0A2; }
.band .sign i { font-family: var(--serif); font-size: 19px; color: var(--bronze-dark); }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #CFC7BA; padding: 56px 0 40px; border-top: 1px solid rgba(250, 247, 241, 0.14); font-size: 14.5px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.footer-logo { width: 150px; }
.footer-about { margin-top: 18px; max-width: 26em; line-height: 1.55; }
.footer-about i { display: block; margin-top: 12px; font-family: var(--serif); font-size: 18px; color: var(--bronze-dark); }
.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer-links h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: #9D958A; margin-bottom: 12px; }
.footer-links ul { list-style: none; }
.footer-links li + li { margin-top: 2px; }
.footer-links a { display: inline-block; padding: 5px 0; }
.site-footer a { color: #F3EEE5; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--bronze-dark); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(250, 247, 241, 0.14); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 13px; color: #9D958A; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.footer-bottom nav a { display: inline-block; padding: 5px 0; }

/* ---------- Cookie note and WhatsApp ---------- */

.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 40; width: min(340px, calc(100vw - 32px)); background: var(--ink); color: #E9E3D8;
  border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 10px 40px rgba(26, 26, 26, 0.25);
}
.consent a { color: #FAF7F1; text-decoration: underline; text-underline-offset: 3px; }
.consent div { margin-top: 9px; display: flex; gap: 8px; }
.consent button { font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(250, 247, 241, 0.4); background: transparent; color: #FAF7F1; }
.consent button.yes { background: var(--bronze-dark); border-color: var(--bronze-dark); color: var(--ink); }
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 39; width: 52px; height: 52px; border-radius: 50%; background: #1FAF54; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(26, 26, 26, 0.22); }
.wa img { width: 28px; height: 28px; }

/* ---------- Narrow desktop and tablet (a half screen browser window lands here) ---------- */

@media (max-width: 1240px) {
  :root { --gutter: 32px; --space: 88px; }
  .nav { gap: 18px; font-size: 14.5px; }
  .header-row { gap: 20px; }
  .header-side { gap: 16px; padding-left: 18px; }
  .lang { display: none; }
  .sheet-body { padding: 44px; }
}

/* Eight menu items: the header tightens before it folds into the Menu button. */
@media (max-width: 1420px) {
  .nav { gap: 16px; font-size: 14px; }
  .header-row { gap: 16px; }
  .header-side { gap: 14px; padding-left: 16px; }
  .header-phone { display: none; }
}

@media (max-width: 1160px) {
  .nav, .header-phone { display: none; }
  .header-side { border-left: 0; padding-left: 0; margin-left: auto; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; padding: 10px 0 10px 8px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; right: 0; top: 46px; z-index: 30; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 0; min-width: 240px; display: grid; }
  .menu-panel a { padding: 11px 18px; text-decoration: none; }
  .menu-panel .sep { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 14px; }
  /* the strip wraps; cells in the last row stretch so the row is always full */
  .title-strip { display: flex; flex-wrap: wrap; overflow: hidden; }
  .title-strip > div { flex: 1 1 30%; border-left: 0; box-shadow: -1px -1px 0 var(--hair); }
  .title-strip .ts-name { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; box-shadow: none; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --gap: 16px; --space: 72px; }
  .sheet-body, .sheet-body.wide, .sheet-body.solo { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 36px 28px; }
  .sheet-text, .sheet-fig, .sheet-body.wide .sheet-text, .sheet-body.wide .sheet-fig, .sheet-body.solo .sheet-text { grid-column: 1; }
  .split, .split.flip, .split.even { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .split > .text, .split > .media, .split.flip > .text, .split.flip > .media, .split.even > .text, .split.even > .media, .split.even.flip > .text, .split.even.flip > .media { grid-column: 1; grid-row: auto; }
  .chain { padding-left: 52px; }
  .step { grid-template-columns: minmax(0, 1fr); row-gap: 22px; --gap-y: 56px; }
  .step-text, .step-fig { grid-column: 1; }
  .step:not(:last-child)::before { left: -36px; }
  .step::after { left: -43px; }
  .step-text::before { left: -48px; width: 40px; }
  .quotes > .quote:first-child, .quotes > .quote:not(:first-child) { grid-column: 1 / -1; grid-row: auto; }
  .band-row { grid-template-columns: minmax(0, 1fr); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index.cols { columns: 1; }
}

/* Photo rows keep one shared height down to a small tablet, then stack one photo per row.
   (A wrapped row cannot keep its photos the same height, so rows never wrap.) */
@media (max-width: 700px) {
  .strip { flex-wrap: wrap; }
  .strip > figure, .strip > a, .strip > div { flex: var(--r, 1.5) 1 100%; }
  .strip > figure img, .strip > a img { max-height: 120vw; }
  .strip.duo { flex-wrap: nowrap; }
  .strip.duo > figure, .strip.duo > a, .strip.duo > div { flex: var(--r, 1.5) 1 0; }
}

/* ---------- Phone ---------- */

@media (max-width: 560px) {
  :root { --gutter: 16px; --space: 64px; }
  body { font-size: 16px; }
  .header-row { height: 68px; gap: 12px; }
  .logo img { width: 124px; }
  .header-book { padding: 10px 11px; font-size: 14px; }
  .menu summary { padding-left: 2px; }
  .sheet-wrap { padding-top: 16px; }
  .sheet-body, .sheet-body.wide, .sheet-body.solo { padding: 28px 20px; row-gap: 28px; }
  h1 { font-size: 42px; }
  .lede { font-size: 17px; margin-top: 18px; }
  .actions { margin-top: 26px; }
  .actions .btn { width: 100%; text-align: center; }
  .title-strip > div { flex-basis: 44%; padding: 11px 14px 12px 20px; }
  .title-strip .ts-name { padding-left: 20px; }
  .head, .section-head { margin-bottom: 28px; padding-bottom: 14px; }
  .chain { padding-left: 34px; }
  .step:not(:last-child)::before { left: -26px; }
  .step::after { left: -33px; }
  .step-text::before { left: -34px; width: 28px; }
  .index .name { font-size: 22px; }
  .index a, .index .row { flex-direction: column; gap: 2px; }
  .index .fact { text-align: left; }
  .form .two { grid-template-columns: 1fr; }
  .band { padding: 64px 0; }
  .prose { font-size: 17px; }
  .faq summary { font-size: 19px; }
  .quote { padding-left: 16px; }
  .consent { left: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .wa { bottom: 84px; right: 12px; width: 46px; height: 46px; }
  .consent[hidden] ~ .wa { bottom: 16px; }
}

/* ---------- Direction B: "Drawn, then built" ---------- */

/* The opener of a main page. The headline runs across the sheet, the figure takes the full width, the words
   and the button sit under it. Use .sheet-head when the page has a short lede beside the headline. */
.sheet-body.lead { display: block; padding: 40px 44px 34px; }
.sheet-body.lead h1 { font-size: clamp(40px, 5.7vw, 80px); line-height: 1.03; }
.sheet-body.lead h1.long { font-size: clamp(34px, 4.3vw, 60px); line-height: 1.08; max-width: 22em; }
.sheet-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: 28px; }
.sheet-head > :first-child { grid-column: 1 / 7; }
.sheet-head > .lede { grid-column: 7 / 13; margin-top: 0; max-width: none; font-size: 17px; }
.sheet-head.solo > :first-child { grid-column: 1 / -1; }
.say { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--hair); }
.say > .lede { grid-column: 1 / 8; margin-top: 0; max-width: none; }
.say > .actions { grid-column: 8 / 13; margin-top: 0; }
.say.solo > .actions { grid-column: 1 / -1; }
.lead-fig img, .lead-fig video { width: 100%; aspect-ratio: 2.1 / 1; object-fit: cover; border-radius: var(--radius); background: var(--paper-deep); }
.lead-fig.tall img { aspect-ratio: 16 / 9; }
.title-strip.four > div, .title-strip.four .ts-name { flex: 1 1 17%; }
.title-strip.four .ts-name { flex-direction: column; align-items: flex-start; gap: 0; }
.title-strip.four .ts-tag { display: block; }

/* A pair: the earlier state on the left (drawing, render, before), the later state on the right (built, after).
   The red dimension line between them is a handle: drag it to see more of one side. On the home page the
   headline is split over the two pictures. Each side has a caption that starts with one bold word. */
.pair { position: relative; display: grid; grid-template-columns: var(--split, 50%) minmax(0, 1fr); --split: 50%; }
.pair > h1 { display: contents; }
.pair > h1 > span { display: block; padding-bottom: 22px; white-space: nowrap; overflow: hidden; }
.pair > h1 > span:first-child { grid-area: 1 / 1; padding-right: 20px; }
.pair > h1 > span:last-child { grid-area: 1 / 2; padding-left: 20px; }
.pair > figure { min-width: 0; }
.pair > figure:first-of-type { grid-area: 2 / 1; padding-right: 20px; }
.pair > figure:last-of-type { grid-area: 2 / 2; padding-left: 20px; }
.pair > figure img { width: 100%; height: clamp(300px, 43vw, 540px); object-fit: cover; border-radius: var(--radius); background: var(--paper-deep); }
.pair.land > figure img { height: auto; aspect-ratio: 4 / 3; }
.pair.small > figure img { height: clamp(220px, 30vw, 380px); }
.pair.wide > figure img { height: auto; aspect-ratio: 16 / 9; }
/* A drawing sheet inside a pair is shown whole on white, never cropped: <figure class="ph line sheet-paper">. */
.pair figure.sheet-paper img { object-fit: contain; background: #fff; }
.sheet-wrap + section.deep { margin-top: 64px; }
.index a.zoom { display: flex; }
.pair-rule { grid-area: 1 / 2 / 3 / 3; justify-self: start; position: relative; top: 4px; width: 1px; background: var(--red); pointer-events: none; }
.pair-rule::before, .pair-rule::after { content: ""; position: absolute; left: -7px; width: 15px; height: 1px; background: var(--red); transform: rotate(-45deg); }
.pair-rule::before { top: 0; }
.pair-rule::after { bottom: 0; }
.pair-grip { grid-area: 2 / 2; justify-self: start; align-self: center; position: relative; width: 44px; height: 72px; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: ew-resize; touch-action: none; }
.pair-grip::before { content: ""; position: absolute; left: 19px; top: 8px; width: 6px; height: 56px; border-radius: 3px; background: var(--red); }

/* A wipe: two photos taken from the same spot. The first <img> is the later state; img.before lies over it and
   is cut at the red line. Line the two up with object-position on the one that sits off. */
.wipe { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; --split: 38%; background: var(--paper-deep); }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe img.before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.wipe .pair-rule { position: absolute; left: var(--split); top: 0; bottom: 0; }
.wipe .pair-rule::before, .wipe .pair-rule::after { display: none; }
.wipe .pair-grip { position: absolute; left: var(--split); top: 50%; transform: translate(-50%, -50%); }
.pair-caps { display: flex; justify-content: space-between; gap: 24px; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.pair-caps b { color: var(--ink); font-weight: 500; }
.pair-caps span:last-child { text-align: right; }

/* A drawing is always shown whole (Daniel 2026-11-11: "I can't see them completely"). Plan sheets, color plans,
   elevations, site plans and sun studies are never cropped, zoomed or cut by a frame: inside a frame of another
   shape they sit whole on white paper, and on a phone the frame takes the drawing's own shape. */
img[src*="plan-bw"], img[src*="plan-upper"], img[src$="/plan.webp"], img[src*="/elevations."], img[src$="/site.webp"],
img[src*="site-plan"], img[src$="/sun.webp"], img[src*="/05/aerial."] {
  object-fit: contain !important; object-position: 50% 50% !important; transform: none !important; background: #fff !important;
}
@media (max-width: 700px) {
  img[src*="plan-bw"], img[src*="plan-upper"], img[src$="/plan.webp"], img[src*="/elevations."], img[src$="/site.webp"],
  img[src*="site-plan"], img[src$="/sun.webp"], img[src*="/05/aerial."] { aspect-ratio: auto !important; height: auto !important; max-height: none !important; }
}

/* A picture that opens full size (drawing sheets, the best photos). */
a.zoom { display: block; cursor: zoom-in; }
.zoom-box { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: auto; }
.zoom-box::backdrop { background: rgba(26, 26, 26, 0.92); }
.zoom-box img { display: block; margin: 0 auto; max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 4px; margin-top: 4vh; background: #fff; }
.zoom-box.big img { max-width: none; max-height: none; width: max(96vw, 1200px); }
.zoom-close { position: fixed; top: 12px; right: 14px; z-index: 2; font: inherit; font-size: 14.5px; font-weight: 500; padding: 9px 14px; border-radius: 6px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }

/* Spacing between parts that follow one another on any page. */
.strip + .index, .pair + .index, .wipe + .index, .work-index, .plan-index { margin-top: 40px; }
.pair + .strip, .wipe + .strip, .pair-caps + .strip { margin-top: var(--gap); }
.split + .strip { margin-top: 48px; }
.split .text > .lede + .lede { margin-top: 14px; }
.lede a:not(.text-link) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sheet-body.lead > .chips { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.split.second { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--hair); }
@media (max-width: 860px) {
  .strip + .index, .pair + .index, .wipe + .index, .work-index, .plan-index { margin-top: 28px; }
  .split.second { margin-top: 48px; padding-top: 48px; }
}

/* A loop that plays on its own gets a pause button from site.js. */
.loop-toggle { margin-top: 8px; font: inherit; font-size: 13.5px; background: none; border: 0; padding: 4px 0; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.loop-toggle + .loop-toggle { margin-left: 20px; }
/* A film that plays as a silent loop until the visitor asks for the sound (data-film). */
video[data-film] { aspect-ratio: 16 / 9; background: var(--ink); }

@media (max-width: 1240px) { .sheet-body.lead { padding: 36px 40px 30px; } }
@media (max-width: 860px) {
  .sheet-body.lead { padding: 32px 28px 28px; }
  .sheet-head, .say { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sheet-head > :first-child, .sheet-head > .lede, .say > .lede, .say > .actions { grid-column: 1; }
}
@media (max-width: 560px) {
  .sheet-body.lead { padding: 26px 20px 24px; }
  .sheet-body.lead h1, .sheet-body.lead h1.long { font-size: 42px; line-height: 1.08; }
  .sheet-body.lead h1.long { font-size: 36px; }
  .pair > h1 { display: block; grid-area: 1 / 1 / 2 / 3; padding-bottom: 20px; }
  .pair > h1 > span { display: inline; padding: 0; white-space: normal; }
  .pair > h1 > span:first-child, .pair > h1 > span:last-child { padding: 0; }
  .pair > figure:first-of-type { padding-right: 9px; }
  .pair > figure:last-of-type { padding-left: 9px; }
  .pair > figure img { height: 300px; }
  .pair.small > figure img { height: 240px; }
  .pair.land > figure img, .pair.wide > figure img { height: auto; }
  .pair .pair-rule { grid-area: 2 / 2 / 3 / 3; top: 0; }
  /* wide pictures do not fit side by side on a phone: the pair stacks, the red line lies between them */
  .pair.land, .pair.wide { grid-template-columns: minmax(0, 1fr); }
  .pair.land > figure:first-of-type, .pair.land > figure:last-of-type, .pair.wide > figure:first-of-type, .pair.wide > figure:last-of-type { grid-area: auto; padding: 0; }
  .pair.land > figure:last-of-type, .pair.wide > figure:last-of-type { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--red); }
  .pair.land .pair-rule, .pair.land .pair-grip, .pair.wide .pair-rule, .pair.wide .pair-grip { display: none; }
  .wipe { aspect-ratio: 4 / 3; }
  .pair-caps { font-size: 12.5px; gap: 14px; }
  .title-strip.four > div { flex-basis: 44%; }
  .title-strip.four .ts-name { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .site-footer, .consent, .wa, .band { display: none; } }