/* Approved typography: two self-hosted Latin WOFF2 files, OFL 1.1. */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }

/* Measured Atelier — APPROVED DESIGN SOURCE, copied from the approved prototype's styles.css.
   Do not edit here. Extensions for inner pages live in site.css. */
:root {
  --disclosure-alpha: .5; /* AI-staging asterisk opacity */
  --paper: #f1eee7;
  --paper-light: #f8f6f1;
  --ink: #171815;
  --muted: #696b64;
  --line: rgba(23, 24, 21, 0.2);
  --moss: #2d3b32;
  --wine: #452f24; /* Dark chocolate brown from customdesksg.com (.wood-section), replacing the old brick red */
  --sand: #c8b99e;
  --display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", Arial, Helvetica, sans-serif;
  --pad: clamp(24px, 5.5vw, 88px);
  --section: clamp(88px, 11vw, 176px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: normal; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
figure, h1, h2, h3, p, dl, dd { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 92px; padding: 0 var(--pad); color: #fff; transition: background .35s, color .35s, height .35s, box-shadow .35s; }
.site-header.is-scrolled { height: 72px; color: var(--ink); background: var(--paper-light); box-shadow: 0 1px 0 var(--line); }
.brand { width: clamp(138px, 14vw, 190px); position: relative; z-index: 2; }
.brand img { filter: brightness(0) invert(1); transition: filter .35s; }
.site-header.is-scrolled .brand img { filter: brightness(0); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { position: relative; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; inset: auto 0 -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 12px 16px; border: 1px solid currentColor; }
.menu-toggle { display: none; background: none; border: 0; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }

.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(360px, 41%) 1fr; background: var(--moss); color: #fff; overflow: hidden; }
.hero-copy { padding: 190px var(--pad) 78px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.eyebrow, .section-index { font-size: 11px; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow { color: rgba(255,255,255,.72); margin-bottom: 32px; }
.hero h1, .section-head h2, .statement h2, .materials h2, .reviews h2, .estimator h2, .studio h2, .enquire h2 { font-family: var(--display); font-size: clamp(52px, 5.6vw, 92px); font-weight: 400; line-height: 1.08; letter-spacing: normal; }
.hero h1 { margin-left: -3px; }
.hero-intro { max-width: 440px; margin-top: 32px; color: rgba(255,255,255,.76); font-family: var(--sans); font-size: clamp(19px, 1.55vw, 25px); line-height: 1.55; letter-spacing: normal; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
/* Homepage hero buttons: labels never wrap; when both do not fit side by side, the second sits neatly below. */
.hero--home .hero-actions, .hero-actions--nowrap { flex-wrap: wrap; row-gap: 20px; }
.hero--home .hero-actions > *, .hero-actions--nowrap > * { flex: none; white-space: nowrap; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 20px; border: 1px solid transparent; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s; }
.button:hover { transform: translateY(-2px); }
.button-dark { color: var(--paper-light); background: var(--ink); }
.button-light { color: var(--ink); background: var(--paper-light); }
.button-outline { border-color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.hero-notes { margin-top: auto; padding-top: 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid rgba(255,255,255,.25); }
.hero-notes div { min-width: 0; display: grid; grid-template-rows: minmax(2.7em, auto) auto; align-content: start; gap: 6px; padding: 0 12px; }
.hero-notes div:first-child { padding-left: 0; }
.hero-notes div:last-child { padding-right: 0; }
.hero-notes div + div { border-left: 1px solid rgba(255,255,255,.18); }
.hero-notes dt, .hero-notes dd { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }   /* owner (Job 164 Prompt 5H): 11px everywhere */
.hero-notes dt { letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hero-notes dd { margin: 0; font-family: var(--sans); }
.hero-media { position: relative; min-height: 100svh; overflow: hidden; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(45,59,50,.25), transparent 35%), linear-gradient(0deg, rgba(10,10,9,.18), transparent 30%); pointer-events: none; }
.hero-media img { height: 100%; object-fit: cover; }
.hero-media figcaption { position: absolute; z-index: 2; inset: auto 24px 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.hero-scroll { position: absolute; left: calc(41% - 20px); bottom: 0; z-index: 3; width: 40px; height: 105px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-scroll span { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; transform: rotate(-90deg); }
.hero-scroll i { display: block; width: 1px; height: 58px; background: rgba(255,255,255,.7); }

.section-pad { padding: var(--section) var(--pad); }
.statement { background: var(--paper-light); }
.section-index { color: var(--muted); margin-bottom: 52px; }
.statement-grid { display: block; }
.statement-content { max-width: 1060px; }
.statement h2 { font-size: clamp(42px, 5.2vw, 80px); text-wrap: balance; }
.statement-grid > div p { max-width: 720px; margin: 28px 0 34px; color: var(--muted); font-family: var(--sans); font-size: 21px; line-height: 1.65; letter-spacing: normal; }

.collection { background: var(--paper); }
.section-head { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 60px; align-items: end; margin-bottom: clamp(52px, 7vw, 104px); }
.section-head .section-index { margin-bottom: 24px; }
.section-head > p { color: var(--muted); font-family: var(--sans); font-size: 19px; line-height: 1.65; letter-spacing: normal; }
.stacked-head { display: block; }
.stacked-head > div { max-width: 1060px; }
.stacked-head .section-intro { max-width: 760px; margin: 28px 0 30px; color: var(--muted); font-family: var(--sans); font-size: 19px; line-height: 1.65; letter-spacing: normal; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 38px); }
.category-card > a { height: 100%; display: grid; grid-template-rows: auto auto 1fr; }
.category-card figure { aspect-ratio: 4 / 5.1; position: relative; overflow: hidden; background: #ddd7cc; }
.category-card img { height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.category-card:hover img { transform: scale(1.025); }
/* Staging mark: a small asterisk at the bottom right of AI-staged or AI-edited photos only.
   Hover, keyboard focus or a tap shows "AI-assisted staging"; its opacity comes from disclosureTone() (50% target, 4.5:1). */
.staging-mark { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: rgba(255,255,255,var(--disclosure-alpha)); background: transparent; border: 0; border-radius: 50%; font-family: var(--sans); font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 4px rgba(0,0,0,.82); cursor: help; }
.staging-glyph { padding-top: 13px; }  /* the asterisk sits high in the font: centre it in the target */
.staging-mark--dark { color: rgba(23,24,21,var(--disclosure-alpha)); text-shadow: 0 1px 4px rgba(255,255,255,.7); }
.staging-mark:focus-visible { outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 2px rgba(23,24,21,.7); }
.staging-tip { position: absolute; right: 0; bottom: calc(100% + 4px); padding: 5px 9px; color: #fff; background: rgba(23,24,21,.88); border-radius: 2px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .02em; line-height: 1.3; text-shadow: none; text-transform: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.staging-mark:hover .staging-tip, .staging-mark:focus-visible .staging-tip, .staging-mark.is-open .staging-tip, a:focus-visible .staging-mark .staging-tip { opacity: 1; visibility: visible; }
.hero-media figcaption .staging-mark { position: static; right: auto; bottom: auto; flex: none; margin: -10px -8px -10px auto; }
/* hero: the tooltip is placed against the whole caption bar, so it sits above the caption text, right-aligned, and never covers it */
.hero-media figcaption .staging-tip { bottom: calc(100% + 10px); }
.card-meta { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 8px; margin-top: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-meta span { color: var(--muted); font-size: 10px; }
.card-meta h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; letter-spacing: normal; }
.card-meta i { font-style: normal; }
.category-card > a > p { padding: 15px 36px 0; color: var(--muted); font-size: 13px; }
.category-card--home .card-meta { grid-template-columns: minmax(0, 1fr); }
.category-card.category-card--home > a > p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; width: 100%; padding: 15px 0 0; line-height: 1.6; }
.category-card--home > a > p i { color: var(--ink); font-style: normal; }

.projects { background: var(--ink); color: var(--paper-light); }
.inverse .section-index, .inverse > p { color: rgba(255,255,255,.52); }
.projects-head { display: block; }
.projects-head > div { max-width: none; }
.projects-head .projects-intro { max-width: none; margin-top: 28px; color: rgba(255,255,255,.58); font-family: var(--sans); font-size: 19px; line-height: 1.65; letter-spacing: normal; }
.project-list { display: flex; flex-direction: column; gap: clamp(90px, 12vw, 180px); }
.project-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); gap: clamp(42px, 7vw, 110px); align-items: center; }
.project-card-reverse { grid-template-columns: minmax(270px, .55fr) minmax(0, 1.45fr); }
.project-card-reverse figure { order: 2; }
.project-card figure { aspect-ratio: 1.35; overflow: hidden; }
.project-card img { height: 100%; object-fit: cover; }
.project-number { margin-bottom: 30px; color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.project-copy h3 { font-family: var(--display); font-size: clamp(34px, 4vw, 62px); font-weight: 400; line-height: 1.08; letter-spacing: normal; }
.project-copy > p:not(.project-number) { margin-top: 24px; color: rgba(255,255,255,.6); font-family: var(--sans); font-size: 18px; line-height: 1.65; letter-spacing: normal; }
.project-copy dl { margin: 36px 0; border-top: 1px solid rgba(255,255,255,.2); }
.project-copy dl div { display: grid; grid-template-columns: 74px 1fr; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.project-copy dt { color: rgba(255,255,255,.4); }.project-copy dd { margin: 0; }
.light-link { color: #fff; }

.materials { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: clamp(48px, 6.5vw, 104px); align-items: center; padding-top: clamp(72px, 7.5vw, 112px); padding-bottom: clamp(72px, 7.5vw, 112px); background: var(--sand); }
.materials .section-index { margin-bottom: 28px; }
.materials h2 { max-width: 620px; font-size: clamp(38px, 4vw, 60px); line-height: 1.1; }
.materials-copy > p:not(.section-index) { max-width: 520px; margin: 24px 0 32px; font-family: var(--sans); font-size: 18px; line-height: 1.62; letter-spacing: normal; }
.material-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 0 0 32px; list-style: none; border-top: 1px solid rgba(23,24,21,.3); }
.material-list li { display: grid; grid-template-columns: 34px 1fr; min-height: 58px; padding: 13px 14px 12px 0; border-bottom: 1px solid rgba(23,24,21,.3); font-size: 11px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.material-list li:nth-child(odd) { border-right: 1px solid rgba(23,24,21,.3); }
.material-list li:nth-child(even) { padding-left: 14px; }
.material-list span { color: rgba(23,24,21,.45); }
.material-main { width: 100%; }
.material-main img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }

.reviews { display: grid; grid-template-columns: .3fr 1.25fr .55fr; gap: clamp(30px, 5vw, 80px); align-items: center; background: var(--paper-light); }
.reviews-mark { align-self: start; color: var(--wine); font-family: var(--display); font-size: clamp(110px, 16vw, 250px); line-height: .7; }
.reviews h2 { font-size: clamp(46px, 5.3vw, 82px); }
.rating-line { display: flex; align-items: center; gap: 24px; margin: 42px 0 24px; }
.rating-number { font-family: var(--display); font-size: 66px; line-height: 1; }
.rating-line b { display: block; color: var(--wine); font-weight: 600; letter-spacing: .15em; }
.rating-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.review-lead { max-width: 580px; margin-bottom: 30px; color: var(--muted); font-family: var(--sans); font-size: 21px; line-height: 1.65; letter-spacing: normal; }
.verification-note { max-width: 510px; margin-top: 22px; color: var(--muted); font-size: 10px; }
.review-stats { border-top: 1px solid var(--line); }
.review-stats div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.review-stats strong { display: block; font-family: var(--display); font-size: 36px; font-weight: 400; }
.review-stats span { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.estimator { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(70px, 10vw, 180px); color: #fff; background: var(--wine); }
.estimator h2 { font-size: clamp(48px, 5.4vw, 82px); }
.estimator-intro > p:not(.section-index) { max-width: 430px; margin-top: 34px; color: rgba(255,255,255,.65); font-family: var(--sans); font-size: 19px; line-height: 1.65; letter-spacing: normal; }
.estimator .section-index { color: rgba(255,255,255,.5); }
.estimate-card { padding: clamp(28px, 4vw, 56px); color: var(--ink); background: var(--paper-light); }
.estimate-card fieldset { padding: 0; border: 0; }
.estimate-card legend { margin-bottom: 22px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.estimate-choice input { position: absolute; opacity: 0; pointer-events: none; }
.estimate-choice span { min-height: 66px; display: flex; align-items: center; gap: 15px; padding: 12px; border: 1px solid var(--line); font-family: var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.estimate-choice i { font-family: var(--sans); font-size: 9px; font-style: normal; color: var(--muted); }
.estimate-choice input:checked + span { color: #fff; background: var(--moss); }
.estimate-choice input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 2px; }
.estimate-result { margin: 34px 0 16px; padding: 30px 0; border-block: 1px solid var(--line); }
.estimate-result p { color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.estimate-result strong { display: block; margin: 8px 0 1px; font-family: var(--display); font-size: clamp(50px, 5vw, 74px); font-weight: 400; line-height: 1.08; letter-spacing: normal; }
.estimate-result span { color: var(--muted); font-family: var(--sans); }
.estimate-note { margin-bottom: 24px; color: var(--muted); font-size: 10px; }

.journal { background: var(--paper); }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.journal-card { min-height: 400px; border-right: 1px solid var(--line); }
.journal-card:last-child { border: 0; }
.journal-card a { height: 100%; display: flex; flex-direction: column; padding: 30px clamp(20px, 3vw, 45px); transition: background .3s, color .3s; }
.journal-card a:hover { color: #fff; background: var(--moss); }
.journal-no { color: var(--muted); font-size: 10px; }.journal-card p { margin-top: 54px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }.journal-card h3 { margin-top: 16px; font-family: var(--display); font-size: clamp(26px, 2.8vw, 40px); font-weight: 400; line-height: 1.16; letter-spacing: normal; }.journal-arrow { margin-top: auto; padding-top: 35px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.social { padding-top: calc(var(--section) * .7); background: var(--paper-light); }
.social-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 42px; }
.social-head .section-index { margin: 0; }
.social h2 { font-family: var(--display); font-size: clamp(35px, 4vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: normal; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.social-tile { position: relative; aspect-ratio: 1; overflow: hidden; }
.social-tile img { height: 100%; object-fit: cover; transition: transform .6s; }
.social-tile:hover img { transform: scale(1.04); }
.social-hover { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(23,24,21,.55); opacity: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s; }
.social-tile:hover .social-hover { opacity: 1; }

.studio { display: grid; grid-template-columns: 1.25fr .75fr; padding: 0; background: var(--moss); color: #fff; }
.studio-image { min-height: 770px; position: relative; }
.studio-image img { height: 100%; object-fit: cover; }
.studio-copy { padding: var(--section) var(--pad); }
.studio .section-index { color: rgba(255,255,255,.5); }.studio h2 { font-size: clamp(46px, 5vw, 76px); }.studio ol { padding: 0; margin: 60px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }.studio li { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.2); }.studio li > span { color: rgba(255,255,255,.4); font-size: 9px; }.studio h3 { font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: normal; }.studio li p { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.6; }

.enquire { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(70px, 10vw, 180px); color: #fff; background: var(--ink); }
.enquire .section-index { color: rgba(255,255,255,.5); }.enquire h2 { font-size: clamp(54px, 6vw, 90px); }.enquire-copy > p:not(.section-index) { max-width: 430px; margin-top: 30px; color: rgba(255,255,255,.58); font-family: var(--sans); font-size: 20px; line-height: 1.65; letter-spacing: normal; }.contact-details { display: flex; flex-direction: column; align-items: start; gap: 9px; margin-top: 50px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }.contact-details a { border-bottom: 1px solid rgba(255,255,255,.5); }
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; align-content: start; }.enquiry-form label { display: block; }.enquiry-form label span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; padding: 10px 0 14px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); border-radius: 0; outline: none; }.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: #fff; }.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: rgba(255,255,255,.34); }.enquiry-form select option { color: var(--ink); }.enquiry-form .wide { grid-column: 1 / -1; }.enquiry-form button { width: 100%; border: 0; cursor: pointer; }.form-status { color: rgba(255,255,255,.45); font-size: 10px; }

.footer { padding: 80px var(--pad) 28px; color: rgba(255,255,255,.72); background: #0e0f0d; }
.footer-top { display: flex; align-items: end; justify-content: space-between; padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,.18); }.footer-top img { width: clamp(190px, 25vw, 350px); filter: brightness(0) invert(1); }.footer-top p { font-family: var(--sans); font-size: 19px; line-height: 1.6; letter-spacing: normal; }.footer-grid { display: grid; grid-template-columns: .6fr .8fr .6fr 1.25fr; gap: 40px; padding: 54px 0 72px; }.footer-grid > div { display: flex; flex-direction: column; align-items: start; gap: 7px; }.footer h3 { margin-bottom: 10px; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }.footer a, .footer p { font-size: 12px; }.footer a:hover { color: #fff; }.footer-news label { width: 100%; display: flex; margin-top: 16px; border-bottom: 1px solid rgba(255,255,255,.4); }.footer-news input { width: 100%; padding: 9px 0; color: #fff; background: transparent; border: 0; outline: 0; }.footer-news button { background: transparent; border: 0; cursor: pointer; }.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.footer h3 { font-weight: 500; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.25,1); }.reveal.is-visible { opacity: 1; transform: none; }.delay-1 { transition-delay: .08s; }.delay-2 { transition-delay: .16s; }.delay-3 { transition-delay: .24s; }.delay-4 { transition-delay: .32s; }

/* Hamburger header below 1220px: any narrower and the logo touches the
   links and the two header buttons wrap. Header rules only; the rest of the 980px layout is unchanged.
   The closed drawer is visibility:hidden (after its slide-out), so Tab skips its links until it opens. */
@media (max-width: 1219px) {
  .site-header { height: 74px; }.menu-toggle { display: flex; align-items: center; gap: 9px; position: relative; z-index: 2; }.menu-toggle i, .menu-toggle i::before { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .25s; }.menu-toggle i { position: relative; }.menu-toggle i::before { content: ""; position: absolute; top: 5px; }.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }.menu-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(90deg); }.site-nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 90px var(--pad); color: var(--paper-light); background: var(--moss); transform: translateY(-105%); visibility: hidden; transition: transform .45s cubic-bezier(.6,0,.2,1), visibility 0s linear .45s; font-family: var(--sans); font-size: 36px; line-height: 1.2; letter-spacing: normal; text-transform: none; }.site-nav.is-open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.6,0,.2,1), visibility 0s; }.site-nav.is-open a:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 6px; }.site-header:has(.is-open) { color: #fff; }.site-header:has(.is-open) .brand img { filter: brightness(0) invert(1); }.nav-cta { margin-top: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }.hero-copy { min-height: 70svh; padding-top: 130px; }.hero-media { min-height: 65svh; }.hero-scroll { display: none; }
  .statement-grid, .section-head, .materials, .reviews, .estimator, .enquire { grid-template-columns: 1fr; }.statement-grid, .section-head { gap: 36px; }.materials { gap: 50px; }.materials-copy { max-width: 680px; }.category-grid { grid-template-columns: repeat(3, 1fr); }.project-card, .project-card-reverse { grid-template-columns: 1.2fr .8fr; }.reviews { grid-template-columns: .25fr 1fr; }.review-stats { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); }.review-stats div { border-right: 1px solid var(--line); }.review-stats div:not(:first-child) { padding-left: 20px; }.journal-card { min-height: 350px; }.studio { grid-template-columns: 1fr; }.studio-image { min-height: 65svh; }.social-grid { grid-template-columns: 1fr 1fr; }.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --pad: 20px; --section: 64px; }
  .brand { width: 150px; }.site-header.is-scrolled { height: 64px; }.hero-copy { min-height: 72svh; padding: 126px var(--pad) 42px; }.hero h1 { font-size: clamp(47px, 14vw, 67px); line-height: 1.1; }.hero-intro { font-size: 19px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 19px; }.hero-notes { padding-top: 38px; }.hero-notes div { padding-inline: 10px; }.hero-notes div:first-child { padding-left: 0; }.hero-notes div:last-child { padding-right: 0; }.hero-media { min-height: 52svh; }.hero-media figcaption { flex-direction: column; inset: auto 14px 14px; gap: 4px; }.section-index { margin-bottom: 30px; }.statement-grid { display: block; }.statement-grid > div { margin-top: 35px; }.statement h2, .section-head h2, .materials h2, .reviews h2, .estimator h2, .studio h2, .enquire h2 { font-size: clamp(42px, 13vw, 61px); line-height: 1.1; }.materials h2 { font-size: clamp(36px, 10.5vw, 48px); line-height: 1.12; }.section-head { display: block; margin-bottom: 50px; }.section-head > p, .section-head > a { margin-top: 28px; }.category-grid { display: block; }.category-card, .category-card:nth-child(2), .category-card:last-child { width: 100%; margin: 0 0 54px; }.category-card figure { aspect-ratio: 4 / 4.7; }.category-card > a > p { padding-left: 36px; }.project-list { gap: 100px; }.project-card, .project-card-reverse { display: flex; flex-direction: column; gap: 34px; align-items: stretch; }.project-card-reverse figure { order: 0; }.project-card figure { aspect-ratio: 4 / 3; }.materials { gap: 42px; padding-top: 72px; padding-bottom: 72px; }.materials-copy > p:not(.section-index) { margin: 20px 0 28px; font-size: 17px; }.material-list li { min-height: 70px; padding-right: 9px; font-size: 9px; }.material-list li:nth-child(even) { padding-left: 9px; }.reviews { display: block; }.reviews-mark { font-size: 140px; height: 80px; }.rating-line { gap: 15px; }.rating-number { font-size: 58px; }.review-stats { margin-top: 50px; grid-template-columns: 1fr 1fr 1fr; }.review-stats strong { font-size: 27px; }.review-stats span { font-size: 8px; }.choice-grid { grid-template-columns: 1fr; }.journal-grid { display: block; }.journal-card { min-height: 310px; border-right: 0; border-bottom: 1px solid var(--line); }.social-head { align-items: flex-start; flex-direction: column; gap: 12px; }.social-grid { gap: 6px; }.studio-image { min-height: 52svh; }.studio-copy { padding: 88px var(--pad); }.enquiry-form { grid-template-columns: 1fr; }.enquiry-form .wide { grid-column: auto; }.footer-top { align-items: flex-start; flex-direction: column; gap: 25px; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-news { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: 8px; }
}

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

/* Measured Atelier — SITE EXTENSIONS.
   Inner-page patterns built ONLY from the approved tokens (atelier.css :root), typography
   (Libre Baskerville display, Instrument Sans body) and spacing (--pad, --section).
   Global refinements to shared homepage components are documented below. */

/* ── Progressive enhancement: content is visible without JavaScript ───────── */
.reveal { opacity: 1; transform: none; }
html.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }

/* ── Header: current page ─────────────────────────────────────────────────── */
.site-nav a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); }

/* ── Page heroes (same moss split composition as the homepage hero) ───────── */
.hero--page { min-height: min(92svh, 900px); }
.hero--page .hero-copy { padding-top: 170px; padding-bottom: 64px; }
.hero--page .hero-media { min-height: min(92svh, 900px); }
.hero--page h1 { font-size: clamp(44px, 4.6vw, 76px); }
.hero--text { grid-template-columns: 1fr; min-height: auto; }
.hero--text .hero-copy { padding-top: 168px; padding-bottom: clamp(56px, 7vw, 96px); max-width: none; }
.hero--text h1 { font-size: clamp(44px, 5vw, 82px); }
.hero--text .hero-intro { max-width: 72ch; }
.hero-proof { max-width: 440px; margin-top: 18px; color: rgba(255,255,255,.72); font-family: var(--sans); font-size: 13px; line-height: 1.6; letter-spacing: .02em; }  /* homepage proof line */
.hero--article h1 { font-size: clamp(36px, 4vw, 64px); max-width: none; text-wrap: balance; }
.h1-lead { display: block; margin: 0 0 32px 3px; color: rgba(255,255,255,.72); font-family: var(--sans); font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: .19em; text-transform: uppercase; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { border-color: var(--accent); }
.hero-media figcaption span:only-child { margin-left: auto; }

/* ── Tones (the approved section colours) ─────────────────────────────────── */
/* --block: the block's own background, for anything that must sit on it exactly (Job 164 Prompt 5E). */
.tone-paper { --block: var(--paper); background: var(--block); }
.tone-light { --block: var(--paper-light); background: var(--block); }
.tone-sand { --block: var(--sand); background: var(--block); }
.tone-ink { --block: var(--ink); background: var(--block); color: var(--paper-light); }
.tone-moss { --block: var(--moss); background: var(--block); color: #fff; }
.tone-wine { --block: var(--wine); background: var(--block); color: #fff; }
.tone-ink .section-index, .tone-moss .section-index, .tone-wine .section-index { color: rgba(255,255,255,.52); }
.tone-ink .section-head > p, .tone-moss .section-head > p, .tone-wine .section-head > p,
.tone-ink .lede, .tone-moss .lede, .tone-wine .lede { color: rgba(255,255,255,.62); }

/* Section heading scale for inner pages (homepage keeps its own sizes). */
.sec h2 { font-family: var(--display); font-size: clamp(38px, 4.2vw, 64px); font-weight: 400; line-height: 1.1; }
.sec h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.16; }
.lede { max-width: 72ch; color: var(--muted); font-size: 19px; line-height: 1.65; }
/* A heading uses its section width; supporting copy stays directly beneath it. */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: clamp(24px, 4vw, 64px); }
.section-head > div { flex: 1 1 36rem; min-width: 0; max-width: none; }
.section-head > a { flex: 0 0 auto; }
.section-head .lede, .section-head .section-intro, .section-head .projects-intro { max-width: 72ch; margin-top: 24px; }
.sec .section-head { display: block; }
.sec .section-head { margin-bottom: clamp(44px, 6vw, 88px); }
.sec .section-head .lede { margin-top: 24px; }
/* Brief sections (a heading, a line and links): tighter padding so they don't float in empty space. */
.sec--short { padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
.sec--short .section-head { margin-bottom: clamp(28px, 3vw, 40px); }
/* The short company-family introduction is a supporting line, not a reading
   column. Keep it as one calm run on laptop/desktop widths; phones and narrow
   tablets retain natural wrapping. */
@media (min-width: 900px) {
  .about-family .section-head .lede {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: clamp(15px, 1.55vw, 18px);
  }
}
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
.split--center { align-items: center; }
.split--even { grid-template-columns: 1fr 1fr; }
.stack > * + * { margin-top: 22px; }
.stack p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.tone-ink .stack p, .tone-moss .stack p, .tone-wine .stack p { color: rgba(255,255,255,.66); }

/* ── Option cards (aligned grid, same rhythm as the furniture cards) ─────── */
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.option-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.option { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.option .num { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.option h3 { margin-top: 26px; }
.option p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.option .price { margin-top: auto; padding-top: 26px; font-family: var(--display); font-size: 26px; }
.option .price small { display: block; margin-top: 6px; color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.option .text-link { margin-top: 22px; align-self: flex-start; }
.option-grid-note { padding: clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.65; }
.option-grid-note strong { color: var(--ink); font-weight: 600; }
.tone-ink .option-grid, .tone-ink .option, .tone-moss .option-grid, .tone-moss .option { border-color: rgba(255,255,255,.2); }
.tone-ink .option p, .tone-moss .option p, .tone-ink .option .num, .tone-moss .option .num { color: rgba(255,255,255,.6); }

/* ── Spec tables and fact lists ───────────────────────────────────────────── */
.spec-wrap { overflow-x: auto; } .spec-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.split > * { min-width: 0; }   /* a wide table scrolls inside its box instead of widening the page (checked at 360 px) */
.wood-library { position: relative; }
.wood-library > .staging-mark { top: 8px; right: 8px; bottom: auto; }
.wood-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wood-card { min-width: 0; padding: clamp(14px, 1.5vw, 22px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wood-card-swatch {
  display: block;
  width: 100%;
  height: clamp(112px, 12vw, 180px);
  background-color: #ded4c2;
  object-fit: cover;
}
.wood-card-swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* the swatch is now a <picture> from the media pipeline (Job 164 Prompt 5H-2) */
.wood-card-copy { padding-top: 18px; }
.wood-card h3 { margin: 0; font: 400 clamp(22px, 1.8vw, 28px)/1.15 var(--display); }
.wood-card p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.wood-library .figure-caption { margin-top: 12px; }
.wood-library-note { margin-top: clamp(22px, 3vw, 36px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--line); }
.wood-library-note p { max-width: 110ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.wood-library-note strong { color: var(--ink); font-weight: 500; }
.wood-library-note p + p { margin-top: 10px; }
@media (max-width: 980px) { .wood-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .wood-cards { grid-template-columns: 1fr; }
  .wood-card { display: grid; grid-template-columns: minmax(112px, .8fr) 1.2fr; gap: 18px; align-items: start; }
  .wood-card-swatch { height: 118px; }
  .wood-card-copy { padding-top: 1px; }
}
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table caption { padding-bottom: 14px; text-align: left; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.spec-table th, .spec-table td { padding: 15px 18px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec-table thead th { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; border-bottom-color: var(--line); }
.spec-table tbody th { font-family: var(--display); font-weight: 400; font-size: 19px; }
.tone-ink .spec-table th, .tone-ink .spec-table td, .tone-moss .spec-table th, .tone-moss .spec-table td { border-color: rgba(255,255,255,.2); }
.tone-ink .spec-table thead th { color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.6); }
.facts { border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(110px, .4fr) 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; padding-top: 3px; }
.facts dd { margin: 0; font-size: 16px; }
.tone-ink .facts, .tone-ink .facts div, .tone-moss .facts, .tone-moss .facts div { border-color: rgba(255,255,255,.2); }
.tone-ink .facts dt, .tone-moss .facts dt { color: rgba(255,255,255,.5); }

/* ── Figures with provenance labels ───────────────────────────────────────── */
.figure { position: relative; overflow: hidden; background: #ddd7cc; }
.figure img { height: 100%; object-fit: cover; }
.figure--contain img { object-fit: contain; background: var(--paper-light); }
.material-chart picture, .material-chart img { display: block; width: 100%; height: auto; }
.material-group-note { margin-top: clamp(18px, 2.2vw, 28px); }
.material-group-note h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); font-weight: 400; line-height: 1.08; }
.material-group-note p { max-width: 78ch; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.material-group-note .text-link { margin-top: 18px; }
.figure-caption { margin-top: 12px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.natural-variation-feature { display: flex; min-height: clamp(540px, 55vw, 760px); align-items: flex-start; justify-content: center; padding: clamp(20px, 2.5vw, 36px) clamp(32px, 6vw, 88px); background: url('/assets/media/wood-natural-variation-workshop-1600.jpg') center center / cover no-repeat; background-image: image-set(url('/assets/media/wood-natural-variation-workshop-1600.avif') type('image/avif'), url('/assets/media/wood-natural-variation-workshop-1600.webp') type('image/webp'), url('/assets/media/wood-natural-variation-workshop-1600.jpg') type('image/jpeg')); }   /* pipeline sizes of the registered photo (Job 164 Prompt 5H-2) */
.natural-variation-panel { width: min(74vw, 1000px); padding: clamp(22px, 2.6vw, 38px) clamp(28px, 3.4vw, 52px); background: rgba(0, 0, 0, .6); color: #fff; text-align: left; }   /* top centre, wider: more of the tabletops show (owner, Job 164 Prompt 5I) */
.natural-variation-panel h2 { margin-top: 14px; }
.natural-variation-panel .lede { margin-top: 14px; }
.natural-variation-panel .section-index { color: rgba(255, 255, 255, .72); }
.natural-variation-panel h2 { color: #fff; }
.natural-variation-panel .lede { color: rgba(255, 255, 255, .86); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; }
@media (max-width: 680px) {
  .natural-variation-feature { min-height: 620px; align-items: flex-start; padding: 20px; background-position: 46% center; background-image: image-set(url('/assets/media/wood-natural-variation-workshop-1200.avif') type('image/avif'), url('/assets/media/wood-natural-variation-workshop-1200.webp') type('image/webp'), url('/assets/media/wood-natural-variation-workshop-1200.jpg') type('image/jpeg')); }
  .natural-variation-panel { width: 100%; padding: 28px 24px; }
  .natural-variation-panel h2 { margin-top: 18px; }
  .natural-variation-panel .lede { margin-top: 20px; }
}
/* Phones (up to 767px; owner, Job 164 Prompt 5I-2): the whole photo first, the text under it on a solid dark panel,
   so no table is covered. 768px and wider keep the top-centre box. */
@media (max-width: 767px) {
  .natural-variation-feature { display: block; min-height: 0; padding: 0; background: #262722; }
  .natural-variation-feature::before {
    content: ""; display: block; aspect-ratio: 1774 / 887;
    background: url('/assets/media/wood-natural-variation-workshop-800.jpg') center / cover no-repeat;
    background-image: image-set(url('/assets/media/wood-natural-variation-workshop-800.avif') type('image/avif'), url('/assets/media/wood-natural-variation-workshop-800.webp') type('image/webp'), url('/assets/media/wood-natural-variation-workshop-800.jpg') type('image/jpeg'));
  }
  .natural-variation-panel { width: 100%; padding: 26px var(--pad) 34px; background: none; }
}
.tone-ink .figure-caption, .tone-moss .figure-caption { color: rgba(255,255,255,.5); }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
.media-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid .figure { aspect-ratio: 4 / 3; }
.more-corners .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-gallery-section { --block: #e5decf; background: var(--block); }
.l-gallery-section .collection-intro--wide { width: 100%; max-width: none; margin: 0 0 clamp(36px, 4vw, 48px); color: var(--muted); font-size: 17px; line-height: 1.7; }
@media (max-width: 680px) {
  .more-corners .media-grid { grid-template-columns: 1fr; }
  .l-gallery-section .collection-intro--wide { font-size: 16px; }
}
.ratio-wide { aspect-ratio: 1.35; }
.ratio-tall { aspect-ratio: 4 / 5; }

/* ── Story steps (requirement → making → result) ──────────────────────────── */
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 38px); counter-reset: story; }
.story--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-rows { display: grid; gap: clamp(36px, 4vw, 60px); }   /* a second row (the finished desks) under the first */
@media (min-width: 681px) { .story-rows .story:not(.story--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* no lone picture on tablets */
.story-step .figure { aspect-ratio: 4 / 3; }
.story-step h3 { margin-top: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.story-step p { margin-top: 12px; color: var(--muted); font-size: 15px; }
.tone-ink .story-step h3 { border-color: rgba(255,255,255,.2); }
.tone-ink .story-step p { color: rgba(255,255,255,.6); }

/* ── Bands: full-width editorial introduction, then the working form/card ── */
.estimator { display: block; }
.estimator--sand { color: var(--ink); background: var(--sand); }
.estimator--sand .section-index { color: rgba(23,24,21,.58); }
.estimator--sand .estimator-intro > p:not(.section-index) { color: var(--muted); }
.estimator--beige-card .estimate-card { background: var(--sand); }
/* Grey text on sand needs a darker grey for 4.5:1 contrast; the label above the sand estimator is dark, not paper (Job 164 Prompt 5H). */
.estimator--sand, .estimator--beige-card .estimate-card { --muted: #45473f; }
.estimator--sand .estimator-intro > .section-index { color: rgba(23,24,21,.72); }
.estimator-intro > p:not(.section-index) { max-width: 72ch; }
.estimator > .estimate-card { max-width: 900px; margin: clamp(42px, 6vw, 80px) 0 0 auto; }
.estimator--centred > .estimate-card { margin-right: auto; }
.enquire { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); column-gap: clamp(48px, 7vw, 110px); row-gap: clamp(42px, 6vw, 80px); }
.enquire-copy { grid-column: 1 / -1; }
.enquire-copy > p:not(.section-index) { max-width: 72ch; margin-top: 24px; }
.enquire > .contact-details { grid-column: 1; align-self: start; margin-top: 0; }
.enquire > .enquiry-form { grid-column: 2; }
.enquire--corporate > .enquiry-form { grid-column: 1 / -1; max-width: 900px; }
.band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 38px; }

/* ── Article / policy prose ───────────────────────────────────────────────── */
.prose { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.75; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.1em; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.18; }
.prose h3 { margin-top: 1.8em; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 26px); line-height: 1.22; }
.prose h4, .prose h5, .prose h6 { margin-top: 1.6em; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { border-bottom: 1px solid var(--link-line); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose a:hover { color: var(--wine); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose .desk-type-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, auto));
  gap: 14px clamp(24px, 3vw, 48px);
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.prose .desk-type-grid li,
.prose .desk-type-grid li + li { margin: 0; }
.prose .desk-type-grid p { margin: 0; line-height: 1.45; }
@media (max-width: 980px) {
  .prose .desk-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, auto));
  }
}
@media (max-width: 620px) {
  .prose .desk-type-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 10px;
  }
}
.prose figure { margin-top: 1.8em; margin-bottom: 1.8em; }
.prose img { width: 100%; height: auto; background: #e6e1d7; }
.prose figure.journal-gallery-item { display: inline-block; width: calc(50% - 8px); margin: 8px 0; vertical-align: top; }
.prose figure.journal-gallery-item:nth-of-type(odd) { margin-right: 12px; }
.prose figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.prose blockquote { margin-left: 0; padding-left: 26px; border-left: 2px solid var(--wine); font-family: var(--display); font-size: 22px; line-height: 1.5; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.journal-unsupported { padding: 18px 20px; border: 1px dashed var(--muted); color: var(--muted); font-size: 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; max-width: 720px; margin: 56px auto 0; padding-top: 26px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.article-tags { list-style: none; padding-inline: 0; color: var(--muted); }
.article-tags { gap: 8px 22px; }
.article-pager { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); margin-top: 0; }
.article-pager a { display: flex; flex-direction: column; gap: 14px; padding: 34px clamp(20px, 3vw, 45px); transition: background .3s, color .3s; }
.article-pager a + a { border-left: 1px solid var(--line); text-align: right; }
.article-pager a:hover { color: #fff; background: var(--moss); }
.article-pager span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .6; }
.article-pager strong { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }

/* ── Journal index ────────────────────────────────────────────────────────── */
.journal-filter { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 48px; padding: 0; list-style: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.journal-filter a { padding-bottom: 5px; border-bottom: 1px solid transparent; color: var(--muted); }
.journal-filter a:hover, .journal-filter a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.journal-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.journal-row a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px 28px; gap: 28px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); transition: background .25s, padding .25s; }
.journal-row a:hover { background: var(--paper-light); padding-inline: 16px; }
.journal-row time, .journal-row .cat { color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.journal-row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.25; }
.journal-row i { font-style: normal; text-align: right; }
.journal-card time { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.journal-card a:hover time { color: rgba(255,255,255,.7); }
.journal-cover { display: block; aspect-ratio: 940 / 788; margin-bottom: 22px; overflow: hidden; background: #e6e1d7; }
.journal-cover img { width: 100%; height: 100%; object-fit: cover; }
.journal-card--cover p { margin-top: 18px; }
.journal-card .journal-excerpt { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; letter-spacing: normal; text-transform: none; }
.journal-card a:hover .journal-excerpt { color: rgba(255,255,255,.75); }
.journal .journal-heading > .text-link { display: block; width: fit-content; margin-top: 18px; }
@media (min-width: 900px) {
  .journal .section-head { display: block; }
  .journal .journal-heading { width: 100%; }
  .journal .journal-heading h2 {
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: clamp(36px, min(4vw, 6.8vh), 68px);
  }
}
/* Article "Read next": secondary to the article — smaller heading and titles, tighter head; homepage and /blog cards unchanged. */
.journal--related .section-head { margin-bottom: clamp(28px, 3vw, 44px); }
.journal--related .section-head h2 { font-size: clamp(30px, 2.8vw, 46px); }
.journal--related .journal-card { min-height: 0; }
.journal--related .journal-card p { margin-top: 28px; }
.journal--related .journal-card h3 { font-size: clamp(18px, 1.75vw, 26px); text-wrap: pretty; }
.journal--related .journal-arrow { padding-top: 26px; }
@media (max-width: 680px) { .journal--related .section-head h2 { font-size: 28px; } .journal--related .section-head { margin-bottom: 28px; } }
.journal-category { padding-top: clamp(48px, 5vw, 72px); }
/* Shared Journal article layout: one reading column, centred images, even spacing, restored galleries. */
.journal-layout { --journal-img-max-h: min(80vh, 760px); padding-top: clamp(48px, 5vw, 72px); }
.journal-layout .prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Short reference tables: columns sized to their content, the whole table centred in the reading column. */
.journal-layout .prose .table-compact { width: fit-content; max-width: 100%; margin-inline: auto; }
.journal-layout .prose .table-compact table { width: auto; }
.journal-layout .prose .table-compact caption { padding-bottom: 10px; text-align: center; }
.journal-layout .prose .table-compact th, .journal-layout .prose .table-compact td { padding-inline: 18px; }
.journal-layout .prose > :first-child { margin-top: 0; }
.journal-layout .prose > figure, .journal-layout .prose > .jg { margin-top: 2.2em; margin-bottom: 2.2em; }
/* Optimised images arrive as <picture>; it takes no box of its own, so the img lays out exactly as before. */
.journal-layout .prose picture { display: contents; }
/* A picture with an asterisk (AI-generated desk scene) keeps its place; the box is the picture's own size. */
.journal-layout .prose .jl-marked { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.journal-layout .prose .jl-marked img { display: block; width: 100%; height: auto; }
.journal-layout .prose > figure > img, .journal-layout .prose > figure > picture > img { display: block; width: 100%; height: auto; margin-inline: auto; }
.journal-layout .prose .jl-zoom { display: block; border: 0; cursor: zoom-in; }
.journal-layout .prose .jl-zoom img { display: block; width: 100%; height: auto; margin-inline: auto; }
.jl-zoom-label { display: block; width: fit-content; margin: 12px 0 0 auto; padding-bottom: 2px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--sans); font-size: 10px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.jl-zoom:hover .jl-zoom-label { color: var(--ink); border-bottom-color: var(--accent); }
.jl-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.jl-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; background: rgba(20,20,18,.96); color: #fff; }
.jl-lightbox::backdrop { background: rgba(20,20,18,.96); }
.jl-lightbox img { display: block; width: min(var(--nat, 1200px), calc(100% - 32px)); height: auto; margin: 64px auto 24px; cursor: zoom-in; }
.jl-lightbox.is-actual img { width: var(--nat, 1200px); max-width: none; margin-inline: 16px; cursor: zoom-out; }
.jl-close { position: fixed; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(247,244,238,.95); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.jl-hint { position: fixed; top: 24px; left: 16px; margin: 0; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
body:has(.jl-lightbox[open]) { overflow: hidden; }
.jg { --gap: 8px; }
.jg-item, .prose .jg-item { margin: 0; }
.jg-media { overflow: hidden; aspect-ratio: var(--a); background: #e6e1d7; }
.jg-media a { display: block; height: 100%; border: 0; }
.jg-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jg-item figcaption { margin-top: 8px; line-height: 1.45; }
.jg--grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); align-items: start; }
.jg--grid .jg-media { aspect-ratio: 1; }
.jg--masonry { display: flex; flex-direction: column; gap: var(--gap); }
.jg-row { display: flex; gap: var(--gap); align-items: flex-start; }
.jg-row .jg-item { flex: var(--a) 1 0%; }
.jg--panorama { display: grid; gap: var(--gap); }
.jg--panorama .jg-media { aspect-ratio: auto; }
.jg--panorama .jg-media img { height: auto; }
.jg--strip { position: relative; }
.jg-track { position: relative; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.jg-track::-webkit-scrollbar { display: none; }
.jg--strip .jg-item { flex: 0 0 auto; scroll-snap-align: start; }
.jg--slider .jg-item { width: min-content; }
.jg--slider .jg-media { height: clamp(240px, 32vw, 400px); }
.jg--fullsize .jg-track { align-items: center; }
.jg--fullsize .jg-item { flex-basis: 100%; }
.jg-btn { display: none; position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(247,244,238,.92); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.js .jg-btn { display: grid; place-items: center; }
.jg-prev { left: 10px; }
.jg-next { right: 10px; }
.jg--slider .jg-btn { top: calc(clamp(240px, 32vw, 400px) / 2); }
.jg-btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 680px) {
  .jg--grid { grid-template-columns: repeat(2, 1fr); }
  .jg--masonry { flex-flow: row wrap; }
  .jg--masonry .jg-row { display: contents; }
  .jg--masonry .jg-item { flex: var(--a) 1 calc(var(--a) * 130px); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-index { padding-top: clamp(48px, 5vw, 72px); }
.faq-group + .faq-group { margin-top: clamp(56px, 7vw, 96px); }
.faq-group > h2 { margin-bottom: 26px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 44px); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-group .faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary { display: grid; grid-template-columns: 1fr 24px; gap: 20px; align-items: baseline; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--sans); font-size: 20px; text-align: right; color: var(--muted); }
.faq-item[open] summary::after { content: "–"; }
.faq-item .prose { margin: 0 0 26px; max-width: 760px; font-size: 16px; }
.prose .faq-item summary h3 { margin: 0; font: inherit; }
.guide-article { padding-top: clamp(48px, 5vw, 72px); }
.guide-article .prose > section:first-child > h2:first-child { margin-top: 0; }
.guide-article .faq-group { margin-top: 26px; }

/* ── Private-build badge (development builds only; production builds omit it) ── */
.dev-banner { position: fixed; left: 12px; bottom: 12px; z-index: 70; max-width: calc(100% - 24px); padding: 8px 12px; background: rgba(240,236,228,.94); border: 1px solid var(--line); color: #3b3a36; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }

/* ── Retained-on-Wix route notice ─────────────────────────────────────────── */
.retained { max-width: 760px; }
.retained p { margin-top: 18px; color: var(--muted); font-size: 18px; line-height: 1.7; }

/* ── Forms (enquiry) ──────────────────────────────────────────────────────── */
.enquiry-form .field-hint { margin-top: 8px; color: rgba(255,255,255,.42); font-size: 11px; }
.enquiry-form .field-error { margin-top: 8px; color: #f3b4a5; font-size: 12px; }
.enquiry-form [aria-invalid="true"] { border-bottom-color: #f3b4a5; }
.enquiry-form input[type="file"] { padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,.35); font-size: 13px; color: rgba(255,255,255,.7); }
.enquiry-form .row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.enquiry-form .row-4 { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.enquiry-form--stacked { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.enquiry-form .consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }
.enquiry-form .consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--paper-light); }
.enquiry-form .consent a { border-bottom: 1px solid var(--link-line); }
.enquiry-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-form button[disabled] { opacity: .55; cursor: progress; }
.form-status:empty { display: none; }
.form-status[data-state="success"] { padding: 18px 20px; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 14px; }
.form-status[data-state="error"] { padding: 18px 20px; border: 1px solid #f3b4a5; color: #f8d3c8; font-size: 14px; }
.form-status[data-state="success"], .form-status[data-state="error"] { letter-spacing: normal; }

/* ── Estimator application ────────────────────────────────────────────────── */
.est-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.est-steps { display: grid; gap: 14px; }
.est-step { padding: clamp(24px, 3vw, 40px); background: var(--paper-light); border: 1px solid var(--line); }
.est-step > h2 { display: flex; gap: 16px; align-items: baseline; margin-bottom: 22px; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); }
.est-step > h2 span { color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: .14em; }
.est-step fieldset { margin: 0; padding: 0; border: 0; }
.est-step fieldset + fieldset, .est-step .field + fieldset, .est-step fieldset + .field { margin-top: 26px; }
.est-step legend, .est-label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.est-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.est-choice input { position: absolute; opacity: 0; pointer-events: none; }
.est-choice span { position: relative; min-height: 60px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 38px 12px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.est-choice small { color: var(--muted); font-size: 12px; }
.est-choice input:checked + span { color: var(--ink); background: var(--selected-tint); border-color: var(--selected-line); font-weight: 600; }
.est-choice input:checked + span small { color: var(--muted); font-weight: 400; }
.est-choice span:hover { border-color: var(--selected-line); background: var(--hover-tint); }
.est-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Safari stops matching :focus-visible once the arrow keys move between radio cards, so site.js marks a card
   group while it is used from the keyboard (any pointer press clears it) and the focused card keeps the same ring. */
.est-choices.is-key-nav .est-choice input:focus + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-grid.is-key-nav .estimate-choice input:focus + span { outline: 2px solid var(--accent); outline-offset: 2px; }  /* the "What are we making?" box */
.est-choice input:disabled + span { opacity: .45; cursor: not-allowed; }
.est-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.field label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 0 12px; border: 0; border-bottom: 1px solid var(--grey-line); background: transparent; color: var(--ink); font-size: 18px; border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.est-qty { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.est-qty label { display: grid; gap: 2px; }
.est-qty small { color: var(--muted); font-size: 12px; }
.est-qty input { width: 70px; padding: 8px; border: 1px solid var(--grey-line); background: #fff; font-size: 16px; text-align: center; }
.est-summary { position: sticky; top: 96px; padding: clamp(24px, 3vw, 40px); background: var(--ink); color: var(--paper-light); }
.est-summary .section-index { margin-bottom: 18px; color: rgba(255,255,255,.5); }
.est-total { margin: 6px 0 4px; font-family: var(--display); font-size: clamp(44px, 4vw, 64px); line-height: 1.05; }
.est-status { color: rgba(255,255,255,.62); font-size: 14px; }
.est-lines { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.est-lines li { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 14px; }
.est-lines li small { display: block; color: rgba(255,255,255,.5); font-size: 12px; }
.est-lines li.pending { color: rgba(255,255,255,.7); }
.est-notices { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.est-notices li { padding: 12px 14px; border-left: 2px solid #c8b99e; background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.55; }
.est-notices li.warning { border-color: #e7a28f; }
.est-actions { display: grid; gap: 10px; margin-top: 26px; }
.est-actions .button { width: 100%; }
.est-actions .button-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.est-disclaimer { margin-top: 20px; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.6; }
.est-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
/* Hevea colours: one photo per tile, the name as plain text under it (never on the picture).
   Selected = moss ring + tick + bold name, so it never relies on colour alone. */
.est-swatch span { min-height: 0; justify-content: flex-start; gap: 8px; padding: 0 0 2px; border: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.3; overflow-wrap: break-word; }
.est-swatch-chip { position: relative; display: block; height: 92px; border: 1px solid var(--line); background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center; transition: border-color .2s; }
.est-swatch :is(input[value="white"], input[value="natural"]) + span .est-swatch-chip { border-color: var(--pale-edge); }  /* palest photos keep a visible edge */
.est-swatch span:hover .est-swatch-chip { border-color: var(--selected-line); }
.est-swatch input:checked + span { color: var(--ink); background: transparent; font-weight: 600; }
.est-swatch input:checked + span .est-swatch-chip { border-color: var(--selected-line); box-shadow: 0 0 0 1px var(--selected-line); }
.est-swatch input:checked + span .est-swatch-chip::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--moss); color: #fff; font: 600 13px/22px var(--sans); text-align: center; box-shadow: 0 0 0 2px #fff; }
.est-swatch input:focus-visible + span { outline-offset: 4px; }
.est-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }

/* ── Footer additions ─────────────────────────────────────────────────────── */
.footer-grid--site { grid-template-columns: .9fr .9fr .9fr .9fr 1.1fr; }
.footer address { font-style: normal; font-size: 12px; line-height: 1.7; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ── Portfolio collection galleries (collections.mjs) ─────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery-item { position: relative; margin: 0; background: var(--paper); overflow: hidden; }  /* the asterisk sits on the tile */
.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 940 / 788; object-fit: cover; }
.collection-intro { margin: 0; max-width: 680px; }
.collection-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collection-links a { border-bottom: 1px solid transparent; transition: border-color .2s; }
.collection-links a:hover, .collection-links a:focus-visible { border-bottom-color: var(--accent); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Jump links that are not whole sections land 24px under the fixed (scrolled) header, 72px tall above
   680px: FAQ topics, the estimate box and anchored headings. Anchored headings sit in a fade-in block that
   rises 22px after arrival, so they reserve 22px more. Keyboard focus gets the same clearance. */
.faq-group[id], .est-summary { scroll-margin-top: 96px; }
h2[id] { scroll-margin-top: 118px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { scroll-margin-top: 96px; }

@media (max-width: 980px) {
  .hero-intro { max-width: 68ch; }
  .enquire { grid-template-columns: 1fr; }
  .enquire-copy, .enquire > .contact-details, .enquire > .enquiry-form { grid-column: 1; }
  .gallery-grid, .collection-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--even, .est-app { grid-template-columns: 1fr; }
  .option-grid, .option-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid, .story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-row a { grid-template-columns: 120px minmax(0, 1fr) 24px; }
  .journal-row .cat { display: none; }
  .footer-grid--site { grid-template-columns: 1fr 1fr; }
  .est-summary { position: static; }
  .hero--page .hero-media { min-height: 56svh; }
}
@media (max-width: 680px) {
  .gallery-grid { gap: 6px; }
  .collection-links { grid-template-columns: 1fr; }
  .hero--page .hero-copy, .hero--text .hero-copy { padding-top: 120px; padding-bottom: 46px; }
  /* Text-only titles fit their text on phones, not 72% of the window. */
  .hero--text .hero-copy { min-height: 0; }
  /* Jump links land with 24px under the fixed header now that phone sections pad by 64px. */
  section[id] { scroll-margin-top: 24px; }
  /* The phone header is 64px when scrolled. */
  .faq-group[id], .est-summary { scroll-margin-top: 88px; }
  h2[id] { scroll-margin-top: 110px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { scroll-margin-top: 88px; }
  .hero--page h1, .hero--text h1 { font-size: clamp(38px, 11vw, 56px); line-height: 1.1; }
  .hero--article h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .sec h2 { font-size: clamp(34px, 10vw, 46px); }
  .option-grid, .option-grid--2, .option-grid--4, .media-grid, .media-grid--2, .story, .story--2 { grid-template-columns: 1fr; }
  .journal-row a { grid-template-columns: 1fr 20px; gap: 6px 14px; }
  .journal-row time { grid-column: 1 / -1; }
  .prose { font-size: 17px; }
  .prose figure.journal-gallery-item { width: 100%; margin-right: 0; }
  .article-pager { grid-template-columns: 1fr; }
  .article-pager a + a { border-left: 0; border-top: 1px solid var(--line); text-align: left; }
  .enquiry-form .row-3, .enquiry-form .row-4 { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* Readability: the approved 9px uppercase label style applies to field LABELS only. */
.enquiry-form .consent span { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; letter-spacing: normal; text-transform: none; }
.enquiry-form .field-hint { display: block; margin: 10px 0 0; color: rgba(255,255,255,.45); font-size: 12px; letter-spacing: normal; text-transform: none; }
.footer-legal a { font-size: 9px; }
.option .price { font-size: clamp(20px, 1.65vw, 26px); line-height: 1.25; }
.split--table { grid-template-columns: 1.35fr .65fr; }
@media (max-width: 980px) { .split--table { grid-template-columns: 1fr; } }
/* Frames section (/adjustable-desks): two equal photos share the table's height; frame names and heights stay on one line */
.nowrap { white-space: nowrap; }
.split--stack { align-items: stretch; }
.figure-stack { display: flex; flex-direction: column; gap: 22px; }
.figure-stack .figure { flex: 1 1 0; min-height: 240px; }
.figure-stack .figure-caption { margin-top: -10px; }
.spec-table--frames tbody th { font-size: 17px; }
@media (min-width: 981px) { .spec-table--frames tbody th, .spec-table--frames td:nth-of-type(2) { white-space: nowrap; } }
@media (max-width: 680px) { .spec-table--frames th, .spec-table--frames td { padding-right: 10px; } }
@media (max-width: 980px) { .figure-stack .figure { flex: none; aspect-ratio: 4 / 5; } }
[hidden] { display: none !important; }
/* Estimator: compact accessory rows (thumbnail beside text), visible outline buttons on ink. */
.est-qty > label { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.est-qty > label > :not(.est-thumb) { grid-column: 2; }
.est-qty .est-thumb { grid-row: 1 / span 6; width: 112px; margin: 0; aspect-ratio: 4 / 3; }
.est-qty b { font-weight: 600; font-size: 15px; }
.est-actions button.button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); cursor: pointer; font-family: var(--sans); }
.est-send > summary { list-style: none; cursor: pointer; }
.est-send > summary::-webkit-details-marker { display: none; }
@media (max-width: 680px) { .est-qty > label { grid-template-columns: 80px minmax(0, 1fr); } .est-qty .est-thumb { width: 80px; } }
.est-mobilebar { display: none; }
@media (max-width: 980px) {
  .est-mobilebar:not([hidden]) { position: fixed; inset: auto 0 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 -1px 0 rgba(255,255,255,.15); }
  .est-mobilebar strong { font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: normal; text-transform: none; }
  body:has(.est-mobilebar:not([hidden])) .dev-banner { bottom: 70px; }
}

/* ── WCAG 2.2 AA contrast adjustments ───────────
   The approved prototype used very faint small labels. Each value below raises the
   approved colour ONLY as far as needed for 4.5:1 — same hue, same role. */
:root { --muted: #5d5f58; }                                   /* was #696b64 */
.hero-notes dt { color: rgba(255,255,255,.62); }              /* was .5 */
.footer h3 { color: rgba(255,255,255,.58); }                  /* was .38 */
.footer-bottom { color: rgba(255,255,255,.58); }              /* was .4 */
.material-list span { color: rgba(23,24,21,.74); }            /* was .45; .66 measured 4.23:1 */
.tone-sand { --muted: #3f413b; }                              /* muted text on sand */
.tone-sand .spec-table thead th, .tone-sand .facts dt { color: #3f413b; }
.project-number, .project-copy dt { color: rgba(255,255,255,.62); }
.inverse .section-index, .inverse > p, .tone-ink .section-index, .tone-moss .section-index, .tone-wine .section-index, .estimator .section-index, .enquire .section-index, .studio .section-index { color: rgba(255,255,255,.62); }
.enquiry-form label span, .form-status { color: rgba(255,255,255,.64); }
.est-qty[style*="opacity"] { opacity: 1 !important; }
/* Below-the-fold labels that a check without scrolling could not see */
.materials { --muted: #3f413b; }                              /* homepage materials index on sand, as .tone-sand */
.estimate-choice input:checked + span i { color: var(--muted); }  /* note on the selected (tinted) choice */
.studio li > span { color: rgba(255,255,255,.62); }           /* was .4 */
.enquiry-form .field-hint { color: rgba(255,255,255,.5); }    /* was .45 (4.49:1) */
.est-qty:has([data-acc]:disabled) label { color: var(--muted); }
.est-qty:has([data-acc]:disabled) .est-thumb { opacity: .5; }
.tone-sand .material-list span { color: #3f413b; }
.article-pager span { opacity: 1; color: var(--muted); }
.article-pager a:hover span { color: rgba(255,255,255,.75); }
.prose video { width: 100%; height: auto; background: #111; }

/* ── Adjustable-desk price notes and the ledge-frame pair ─────────── */
.price-notes { display: grid; gap: 12px; margin-top: 28px; max-width: 78ch; }
.price-notes p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.price-notes strong { color: var(--ink, inherit); }
.ledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.ledge-card { display: flex; flex-direction: column; min-width: 0; }   /* min-width: WebKit kept the two-column width after a resize to one column */
.ledge-figure { aspect-ratio: 4 / 3; margin: 0; background: rgba(23, 23, 23, .07); }
.ledge-figure img { width: 100%; background: transparent; }
/* The photo's own box, centred in the frame, so the asterisk sits on the photo (a tall 2L photo is narrower). */
.ledge-figure { display: flex; align-items: center; justify-content: center; }
.ledge-photo { position: relative; display: block; height: 100%; max-width: 100%; }
.ledge-photo picture { display: block; height: 100%; }
.ledge-figure .ledge-photo img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.ledge-card .figure-caption { margin-top: 10px; }
.ledge-code { margin-top: 26px; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.ledge-card h3 { margin-top: 8px; }
.ledge-card > p:not(.figure-caption):not(.ledge-code):not(.price) { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.ledge-card .spec-table--ledge { margin-top: 20px; }
.ledge-card .price { margin-top: auto; padding-top: 24px; font-family: var(--display); font-size: clamp(20px, 1.65vw, 26px); }
.ledge-card .price small { display: block; margin-top: 6px; color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ledge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; }
@media (max-width: 760px) { .ledge-grid { grid-template-columns: 1fr; } }

/* ── Footer balance: equal tracks with tops aligned. Furniture's nine links run in two sub-columns
   under its one heading, so no column is twice as long as the next (the company line is in the bottom bar). ── */
.footer-grid--site { padding-bottom: 36px; }
/* The heading is an ordinary heading like its neighbours; only the links split into two columns
   (a heading spanning a multi-column box could be drawn cut off at the top). On phones the wrapper is invisible. */
.footer-furniture-links { display: contents; }
@media (min-width: 681px) {
  .footer-grid--site > .footer-furniture { grid-column: span 2; }
  .footer-furniture-links { display: block; align-self: stretch; column-count: 2; column-gap: 40px; }
  .footer-furniture a { display: block; margin-bottom: 7px; break-inside: avoid; }
  .footer-grid--site { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-bottom { flex-wrap: wrap; gap: 8px 24px; }
}
@media (min-width: 1100px) { .footer-grid--site { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── Desktop and tablet spacing, about 20% tighter. Phones keep their own values (680px and below). ── */
@media (min-width: 681px) {
  :root { --section: clamp(70px, 8.8vw, 141px); }
  .section-head { margin-bottom: clamp(42px, 5.6vw, 83px); }
  .sec .section-head { margin-bottom: clamp(35px, 4.8vw, 70px); }
  .sec--short .section-head { margin-bottom: clamp(22px, 2.4vw, 32px); }
  .hero--text .hero-copy { padding-top: 148px; padding-bottom: clamp(45px, 5.6vw, 77px); }
  .enquire { row-gap: clamp(34px, 4.8vw, 64px); }
  /* Jump links to a section land with its first line exactly where it landed before: the padding that was taken
     off is given back as scroll margin (the old padding minus the new). */
  section[id] { scroll-margin-top: calc(clamp(88px, 11vw, 176px) - var(--section)); }
}

/* ── Intro lines: a comfortable reading width and balanced line breaks, so a short intro never ends
   on one stranded word. Browsers without text-wrap simply wrap as before. ── */
.lede, .hero-intro, .section-intro, .projects-intro, .collection-intro, .section-head > p, .section-head > div > p:not(.section-index), .enquire-copy > p:not(.section-index) { text-wrap: balance; }
.enquire-copy > p:not(.section-index), .sec .section-head .lede, .section-head .section-intro, .hero--text .hero-intro { max-width: 76ch; }
.collection-intro, .prose > p { text-wrap: pretty; } /* long paragraphs: avoid a stranded last word without reshaping every line */

/* ── Form controls share one look: text, date and select fields in a row have the same height,
   underline, square corners and text position. Safari draws its own rounded select and padded date box;
   that native styling is removed so every browser lines the row up the same way. ── */
.field { display: flex; flex-direction: column; }
.field > :is(input, select, textarea, .date-wrap) { margin-top: auto; }
.enquiry-form label:not(.consent) { display: flex; flex-direction: column; }
.enquiry-form label:not(.consent) > :is(input, select, textarea) { margin-top: auto; }
.field :is(input:not([type="checkbox"]):not([type="radio"]), select),
.enquiry-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  -webkit-appearance: none; appearance: none; margin-bottom: 0; border-radius: 0; line-height: 1.5;
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select) { height: 54px; }
.enquiry-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { height: 51px; }
.field select, .enquiry-form select {
  padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: left; }
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 8px; opacity: .55; cursor: pointer; }
/* An empty date shows "Choose a date" or "Optional", not the browser's filler (Safari prints today's date in an empty box). */
.date-wrap { position: relative; display: block; }
.date-placeholder { position: absolute; top: 0; left: 0; display: flex; align-items: center; height: 54px; color: var(--muted); font-size: 18px; pointer-events: none; }
.date-placeholder[hidden], .date-wrap:focus-within .date-placeholder { display: none; }
.date-wrap input.is-empty:not(:focus) { color: transparent; -webkit-text-fill-color: transparent; }
@supports not selector(::-webkit-datetime-edit) { .date-placeholder { display: none; } }

/* ── Softer colours ────────────────────────────────
   Emphasis (selected, hover, focus) and solid buttons use the hero green (--moss), not black;
   thin black lines become --grey-line, which keeps 3:1 on paper, paper-light and white so fields
   stay findable. atelier.css stays verbatim: its rules are overridden here. */
:root { --moss-hover: #3a4b40; --grey-line: #85867f; --accent: var(--moss); --link-line: var(--grey-line); }
/* On dark and green backgrounds the accent (focus ring, hover underline) is light and link lines keep the text colour. */
.hero, .tone-ink, .tone-moss, .tone-wine, .projects, .studio, .enquire, .est-summary, .est-mobilebar, .footer,
.site-header:not(.is-scrolled), body.menu-open .site-nav { --accent: var(--paper-light); --link-line: currentColor; }
.tone-sand, .materials { --link-line: rgba(23,24,21,.45); }
/* Keyboard focus: always a visible 2 px ring with an offset (component rules above may refine it). */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Buttons: filled = green with white text; on a green or dark band the filled button turns light so it never disappears. */
.button-dark { color: #fff; background: var(--moss); }
.button-dark:hover { background: var(--moss-hover); }
:is(.hero, .tone-moss, .tone-ink, .studio, .projects, .enquire, .est-summary) .button-dark { color: var(--moss); background: var(--paper-light); }
:is(.hero, .tone-moss, .tone-ink, .studio, .projects, .enquire, .est-summary) .button-dark:hover { background: #fff; }
.button-outline { border-color: var(--moss); color: var(--moss); }
.button-outline:hover { background: var(--moss); color: #fff; }
.text-link { border-bottom-color: var(--link-line); }
.text-link:hover { border-bottom-color: var(--accent); }
.site-header.is-scrolled .site-nav a:not(.nav-cta)::after { background: var(--moss); }
.estimate-choice input:focus-visible + span { outline-color: var(--accent); }
/* atelier.css removes the outline from the dark-band form fields; give keyboard users a clear light ring there too. */
.enquiry-form :is(input, select, textarea):focus-visible, .footer-news input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── Gentler emphasis and green panels ────────────────
   Selected = one tone darker than the page, dark text, a thin soft-green line and a tick (never colour alone).
   Cards, tiles and dividers use the very soft --line; only form fields keep --grey-line (3:1).
   The big black panels and bands become the hero green; the footer stays dark. */
:root { --selected-tint: #ece8df; --hover-tint: #f6f4ef; --selected-line: #6b7d70; --pale-edge: #b9b6ae; }
.est-choice input:checked + span::after, .estimate-choice input:checked + span::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--moss); color: #fff; font: 600 12px/20px var(--sans); text-align: center; }
.est-swatch input:checked + span::after { content: none; }   /* the swatch tick sits on the photo */
.est-swatch span:hover { background: transparent; }
.consult-choice input:checked + span b { font-weight: 700; }
.estimate-choice span { position: relative; padding-right: 38px; }
.estimate-choice span:hover { border-color: var(--selected-line); background: var(--hover-tint); }
.estimate-choice input:checked + span { color: var(--ink); background: var(--selected-tint); border-color: var(--selected-line); font-weight: 600; }
.material-list, .material-list li, .material-list li:nth-child(odd) { border-color: var(--line); }
.projects, .enquire, .tone-ink, .est-summary, .est-mobilebar:not([hidden]) { background: var(--moss); }
:is(.hero, .tone-moss, .tone-ink, .studio, .projects, .enquire, .est-summary) .button-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
/* On green, the faintest light text (50%) and placeholders (34%) fall under 4.5:1; lift them just enough. */
.est-summary :is(.section-index, .est-lines li small, .est-disclaimer) { color: rgba(255,255,255,.6); }
:is(.enquire, .est-summary) :is(input, textarea)::placeholder { color: rgba(255,255,255,.6); }
.enquiry-form :is(input, select, textarea) { border-bottom-color: rgba(255,255,255,.45); }   /* field lines on green keep 3:1 */

/* ── Text runs the full width of its content ────
   Section intros, paragraphs under headings and beside tables or grids, and the Get a Quote sentence run the full
   width of their container on desktop, so no sentence stops part-way under a wide heading, table or grid. Phones and
   tablets (up to 980px) are unchanged. Exempt, keeping a reading column: Journal and guide article bodies, the Privacy
   Notice and Terms, form fields and labels, navigation, the footer, and text inside cards, tables and tooltips.
   Above 1600px the same blocks stop at about 140 characters, so a line never runs absurdly long on very wide screens. */
.process-faq { max-width: 760px; }
@media (min-width: 981px) {
  .lede, .section-head .lede, .section-head .section-intro, .section-head .projects-intro, .sec .section-head .lede,
  .hero--text .hero-intro, .estimator-intro > p:not(.section-index), .enquire-copy > p:not(.section-index), .price-notes,
  .collection-intro, .statement-content, .statement-grid > div p, .stacked-head > div, .stacked-head .section-intro,
  .faq-item .prose, .retained, .process-faq, .process-faq .prose { max-width: none; }
}
@media (min-width: 1601px) {
  .lede, .section-head .lede, .section-head .section-intro, .section-head .projects-intro, .sec .section-head .lede,
  .hero--text .hero-intro, .estimator-intro > p:not(.section-index), .enquire-copy > p:not(.section-index), .price-notes,
  .collection-intro, .statement-grid > div p, .stacked-head .section-intro,
  .faq-item .prose, .retained, .process-faq .prose { max-width: 140ch; }
}

/* ── The company line in the centre of the footer's bottom bar ─────────────────────────────
   Same quiet style and size as the bar. From 1024px: left, centre, right on one row; equal side tracks keep the centre
   text centred, and it may wrap to two centred lines. Below 1024px the three parts stack, centred. */
.footer-copy .footer-private { display: block; margin-top: 6px; }
.footer .footer-brandline { margin: 0; font-size: inherit; line-height: 1.8; text-align: center; text-wrap: balance; }
.footer .footer-brandline a { font-size: inherit; border-bottom: 1px solid rgba(255,255,255,.3); }
.footer-bottom a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 1024px) {
  /* Both side columns get the same minimum (the wider side, the legal links, is about 16.3rem), so the brand
     line is centred on the page, not between two unequal sides. */
  .footer-bottom { display: grid; grid-template-columns: minmax(16.5rem, 1fr) minmax(0, 2.2fr) minmax(16.5rem, 1fr); gap: 8px 32px; align-items: start; }
  .footer-bottom .footer-legal { justify-content: flex-end; }
}
/* At the narrow two-line desktop size, all three columns share the same two
   baselines. The legal links form a deliberate 3 + 2 arrangement and both
   rows finish at the same right edge. The approved one-line bar takes over at
   1085px below. */
@media (min-width: 1024px) and (max-width: 1084px) {
  .footer-bottom :is(.footer-copy, .footer-brandline, .footer-legal) { line-height: 1.8; }
  .footer-bottom .footer-copy { display: grid; grid-template-rows: repeat(2, 24px); }
  /* 24px-tall links so each one is a full touch target (WCAG 2.5.8; Job 164 Prompt 5H). */
  .footer-bottom .footer-legal a, .footer-bottom .footer-cookie { display: inline-block; line-height: 24px; }
  .footer-copy .footer-private { margin-top: 0; }
  .footer-bottom .footer-legal {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(2, 24px);
    column-gap: 22px;
    row-gap: 0;
    align-items: baseline;
    justify-content: end;
  }
  .footer-bottom .footer-legal > :nth-child(4) { grid-column: 2; }
  .footer-bottom .footer-legal > :nth-child(5) { grid-column: 3; }
}
@media (max-width: 1023px) {
  .footer-bottom { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .footer-bottom .footer-legal { justify-content: center; }
}
/* Owner (Job 164 Prompt 5D): on wide screens, where it fits on one line, the bottom bar is ONE centred line, 1pt
   smaller: copyright | brand line | Privacy | Cookie settings | Terms | Returns | Back to top. Same markup and reading
   order; the "|" separators are drawn here and have empty alternative text, so screen readers skip them. Below the
   breakpoint, 1085px (measured: the narrowest width where the line fits, 1084px in Chrome, 1085px in WebKit), the bar is
   exactly as before. */
@media (min-width: 1085px) {
  .footer-bottom { display: flex; justify-content: center; align-items: baseline; flex-wrap: nowrap; gap: 0; font-size: calc(9px - 1pt); white-space: nowrap; }
  .footer-bottom .footer-legal { display: flex; flex-wrap: nowrap; gap: 0; justify-content: flex-start; }
  .footer-bottom .footer-legal a, .footer-bottom .footer-cookie { font-size: inherit; }
  .footer .footer-bottom .footer-brandline { line-height: inherit; text-wrap: nowrap; }
  .footer-bottom .footer-brandline, .footer-bottom .footer-legal > * { position: relative; margin-left: 2.4em; }
  .footer-bottom .footer-brandline::before, .footer-bottom .footer-legal > *::before {
    content: "|"; content: "|" / ""; position: absolute; left: -1.45em; pointer-events: none; color: rgba(255,255,255,.58);
  }
}

/* The horizontal 2L ledge-frame photo keeps its own 4:3 frame in the Frames column (desktop and phone),
   so the whole desk stays in view; the photo below it fills the rest of the column as before. */
.figure-stack .figure--landscape { flex: none; aspect-ratio: 4 / 3; min-height: 0; }

/* A swatch photo above each stain name, in the same thin-line list.
   5 across (2 rows) from 700px, 2 across (5 rows) below; each photo fills its cell's width at 3:1
   (the files are 480 x 160). The vertical dividers of the two-column list are dropped; a column gap separates cells. */
.material-list--swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.material-list--swatches li, .material-list--swatches li:nth-child(odd), .material-list--swatches li:nth-child(even) { grid-template-columns: 26px 1fr; align-items: start; padding: 16px 0; border-right: 0; }
.swatch-cell { min-width: 0; }
.swatch-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; margin-bottom: 10px; background: #e6e1d7; }
.swatch-name { margin: 0; }
@media (min-width: 700px) { .material-list--swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── The edge and corner section, its choices taken from the estimator ───────────────────────
   My-Desk.Co's own style: serif headings, thin lines, ink and green. Two panels side by side from 761px; stacked on
   phones, where each choice stays at least 44px tall to tap. */
.ec-figure { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin: 0 0 clamp(36px, 4vw, 56px); padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); }
.ec-diagram { display: block; width: 100%; max-width: 460px; height: auto; color: var(--moss); }
.ec-diagram-label { fill: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: .16em; }
.ec-terms { display: grid; gap: 18px; margin: 0; }
.ec-terms div { padding-top: 14px; border-top: 1px solid var(--line); }
.ec-terms dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ec-terms dd { margin: 6px 0 0; font-family: var(--display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.ec-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.ec-panel { padding: clamp(22px, 3vw, 40px); }
.ec-panel + .ec-panel { border-left: 1px solid var(--line); }
.ec-num { color: var(--muted); font-size: 10px; letter-spacing: .16em; }
.ec-panel h3 { margin-top: 10px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 400; }
.ec-view { margin-top: 6px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ec-ask { margin-top: 10px; font-size: 15px; }
.ec-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ec-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 14px 8px 12px; border: 1px solid var(--line); background: var(--paper-light); text-align: center; }
.ec-icon { width: 64px; height: 40px; color: var(--moss); }
.ec-choice-name { font-size: 14px; line-height: 1.3; }
.ec-choice-note { color: var(--muted); font-size: 12px; line-height: 1.35; }
.ec-irregular { margin-top: 22px; color: var(--muted); font-size: 15px; }
/* Cut-outs as a third panel of drawn tiles, the same tile, line, fill and type as the edge and corner
   choices; six tiles (five cut-outs and "need more than one cut?"), 3 x 2 from 681px, 2 x 3 on phones. Each tile ends
   with its link. */
.ec-cutouts { margin-top: clamp(36px, 4vw, 56px); border: 1px solid var(--line); }
.ec-choices--cutouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-choices--cutouts .ec-choice { padding: 16px 10px 4px; }
.ec-icon--top { width: 96px; height: 60px; margin-bottom: 4px; }
.ec-choices--cutouts .acc-links { justify-content: center; }
/* No bar under the six tile links; the site's focus ring stays, and hover underlines the words. */
.ec-choices--cutouts .acc-links a { border-bottom: 0; }
.ec-choices--cutouts .acc-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 681px) { .ec-choices--cutouts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#edges-corners, #cut-outs { scroll-margin-top: 96px; }
@media (max-width: 980px) { .ec-choices:not(.ec-choices--cutouts) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ec-figure { grid-template-columns: 1fr; }
  .ec-panels { grid-template-columns: 1fr; }
  .ec-panel + .ec-panel { border-left: 0; border-top: 1px solid var(--line); }
  #edges-corners, #cut-outs { scroll-margin-top: 88px; }
}

/* ── /desk-accessories ────────────────────────────────────────────────────────────────────
   Five numbered groups of photo cards: 3 across from 761px, 2 on phones. No asterisks on this page; one note at the
   bottom says some photos were tidied or staged with AI. */
.acc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.acc-card { display: flex; flex-direction: column; min-width: 0; }
.acc-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #ddd7cc; }
.acc-photo img { width: 100%; height: 100%; object-fit: cover; }
.acc-card h3 { margin-top: 14px; font-family: var(--display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; line-height: 1.3; }
.acc-card p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.acc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; padding-top: 14px; }
.acc-links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--link-line, var(--line)); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.acc-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.acc-fit .figure { aspect-ratio: 4 / 3; }
.acc-fit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
/* The photo note, once, full width along the bottom of the tan band (under the button and the photo). */
.acc-note { margin-top: clamp(32px, 4vw, 56px); color: var(--ink); font-size: 13.33px; line-height: 1.6; max-width: none; }   /* no line above; 2pt smaller (was 16px) */
#fit { padding-bottom: calc(var(--section) / 2); }   /* this tan band only ends with half the usual bottom space */
.acc-card { scroll-margin-top: 96px; }
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .acc-card h3 { font-size: 16px; }
  .acc-card p { font-size: 14px; }
  .acc-links a { font-size: 11px; letter-spacing: .08em; }
  .acc-fit { grid-template-columns: 1fr; }
  .acc-card { scroll-margin-top: 88px; }
}
@media (max-width: 680px) {
  .acc-note { font-size: 14px; }   /* phones: never under 14px */
}
/* The estimator's accessories step links to /desk-accessories. */
.est-more { margin: 4px 0 18px; font-size: 14px; }
.est-more a { border-bottom: 1px solid currentColor; }

/* ── /music-studio-desks design and price sections ─────────────────────────────
   Price block: three rows, price left and words right, stacked on phones. Three design cards: 3 across from 1181px,
   one across below (never 2 + 1). Drawings use the edge and corner line (edge-corner.mjs LINE/FILL). Tables become
   stacked cards on phones. The closing band: four ticks, 2 x 2 from 681px, then the button. */
.md-intro { display: grid; gap: 18px; max-width: 78ch; }
.md-intro p:not(.lede) { color: var(--muted); font-size: 16px; line-height: 1.65; }
.mp-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mp-list li { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.mp-from { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
.mp-text { font-size: 16px; line-height: 1.6; }
.mp-closing { margin-top: 24px; max-width: 78ch; font-size: 16px; line-height: 1.65; }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.md-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.md-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 36px); border: 1px solid var(--line); background: var(--paper-light); }
.md-card h3 { margin-top: 10px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 400; }
.md-figure { margin: 18px 0 0; }
.md-drawing { display: block; width: 100%; height: auto; aspect-ratio: 380 / 200; color: var(--moss); }
.md-area { fill: var(--ink); font-family: var(--sans); font-size: 12px; }
.md-num { fill: var(--paper-light); font-family: var(--sans); font-size: 11px; font-weight: 600; }
.md-parts { column-count: 2; column-gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.35; }   /* a balanced two-column list, read down */
.md-parts li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; break-inside: avoid; }
.md-parts-num { display: inline-grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--moss); color: var(--paper-light); font-size: 11px; font-weight: 600; }
.md-figure .figure-caption { margin-top: 14px; }
.md-facts { display: grid; gap: 14px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.md-facts dt { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.md-facts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.md-tables { display: grid; gap: clamp(36px, 4vw, 56px); }
/* The guide line, once, above the size tables; three guide tiles, 3 across from 681px. */
.md-guide-line { margin-bottom: clamp(28px, 3vw, 40px); padding: 14px 18px; border-left: 3px solid var(--moss); background: var(--paper-light); font-size: 16px; line-height: 1.55; max-width: 78ch; }
.md-guide { margin-top: clamp(36px, 4vw, 56px); }
.md-guide-caption { padding-bottom: 14px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.md-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.md-guide-tile { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); background: var(--paper-light); }
.md-guide-tile h3 { font-family: var(--display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; line-height: 1.3; }
.md-guide-tile p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.md-guide-tile .md-example { color: var(--muted); font-size: 13px; font-style: italic; }
@media (max-width: 680px) { .md-guide-grid { grid-template-columns: 1fr; } }
.md-takeaway { margin-top: clamp(28px, 3vw, 40px); }
.md-takeaway strong { font-weight: 500; }
.tick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tick-list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.tick { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--moss); color: var(--paper-light); font-size: 13px; line-height: 1; }
#intro, #pricing, #designs, #bases, #keyboard-size, #included, #send-details { scroll-margin-top: 96px; }
@media (max-width: 1180px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(24px, 4vw, 48px); align-content: start; }
  .md-card > * { grid-column: 1 / -1; }
  .md-card > .md-figure { grid-column: 1; }
  .md-card > .md-facts { grid-column: 2; grid-row: 4; margin-top: 18px; padding-top: 0; border-top: 0; }
}
@media (max-width: 680px) {
  .mp-list li { grid-template-columns: 1fr; }
  .md-card { display: flex; }
  .md-card > .md-facts { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .tick-list { grid-template-columns: 1fr; }
  .spec-table--stack, .spec-table--stack tbody, .spec-table--stack tr, .spec-table--stack th, .spec-table--stack td { display: block; }
  .spec-table--stack caption { display: block; }
  .spec-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .spec-table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .spec-table--stack tbody tr:first-child { border-top: 1px solid var(--line); }
  .spec-table--stack th, .spec-table--stack td { padding: 4px 0; border-bottom: 0; }
  .spec-table--stack td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .spec-table--stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  .spec-table--stack th[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
  #intro, #pricing, #designs, #bases, #keyboard-size, #included, #send-details { scroll-margin-top: 88px; }
}

/* ── A picture on every card in "Which base suits which design" (photos), "Height and knee
   room" and "What comes with your desk" (drawings, edge-corner line). Pictures sit at the top of each card in a box of
   one shape per row, so every row has equal card heights. Bases: 2 across from 681px; guide tiles: 3 across from
   681px; included: 4 across from 1181px, 2 x 2 from 681px, 1 on phones. */
.md-bases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.md-base { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); background: var(--paper); }
.md-base-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd7cc; }
.md-base-photo picture, .md-base-photo img { display: block; width: 100%; height: 100%; }
.md-base-photo img { object-fit: cover; }
.md-base h3 { margin-top: 18px; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; line-height: 1.25; }
.md-base .md-facts { margin-top: 14px; }
.md-tile-picture { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; margin-bottom: 16px; padding: 8px; border: 1px solid var(--line); background: var(--paper); }
.md-card-drawing { display: block; width: 100%; height: 100%; color: var(--moss); }
.md-label { fill: var(--ink); font-family: var(--sans); font-size: 15px; }
.md-area--small { font-size: 13px; }
.md-table-note { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.md-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.md-tile { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 32px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.md-tile .num { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.md-tile h3 { margin-top: 10px; }
.md-tile p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.md-tile .price { margin-top: auto; padding-top: 22px; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 1.65vw, 26px); line-height: 1.25; }
.md-tile .md-tile-picture { background: var(--paper-light); }
@media (max-width: 1180px) { .md-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* the same break as the design cards: drawings stay readable */
@media (max-width: 680px) {
  .md-bases, .md-tiles { grid-template-columns: 1fr; }
}
/* ── A photo on the "Already have a desk?" card, the same box as the drawings beside it; and
   the gallery of finished desks: five photos and a closing tile with exactly the type of the /bespoke "Need more cuts"
   tile (the same sizes at every width), all the same 4:3 slot (photos cropped to fill), 3 across from
   768px, 2 across on phones. */
.md-tile-picture { min-height: 0; overflow: hidden; }   /* exactly 16:10, drawing or photo, so card pictures line up */
.md-tile-picture--photo { position: relative; padding: 0; }
.md-tile-picture--photo picture, .md-tile-picture--photo img, .md-gallery-item picture, .md-gallery-item img { display: block; width: 100%; height: 100%; }
.md-tile-picture--photo img, .md-gallery-item img { object-fit: cover; }
.md-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.md-gallery-item { position: relative; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd7cc; }
.md-gallery-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: 1px solid var(--line); background: var(--paper-light); text-align: center; }
.md-gallery-more .acc-links { justify-content: center; margin-top: 0; padding-top: 2px; }
.md-gallery-more .acc-links a { border-bottom: 0; }
.md-gallery-more .acc-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* With 13px+ type the closing tile's three lines need a little less spacing on phones to stay inside it (Job 164 Prompt 5H). */
@media (max-width: 680px) { .md-gallery-more { gap: 3px; padding: 8px; } }
@media (min-width: 768px) { .md-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Picture tiles. The picture sits at the top of the tile, edge to edge at 4:3; the words and links keep
   their type. Links line up along the bottom of each row; three picture tiles stay three across on tablets (no orphan). */
.option--photo { --opt-pad: clamp(24px, 2.6vw, 40px); }
/* The picture is laid over the box and the box has an explicit width, so the 4:3 box alone sets the height (WebKit
   otherwise works the height out from the photo, or from the tile's inner width). */
.option-photo { position: relative; display: block; flex: none; align-self: flex-start; width: calc(100% + 2 * var(--opt-pad)); margin: calc(-1 * var(--opt-pad)) calc(-1 * var(--opt-pad)) 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd7cc; }
.option-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.option-photo:hover img { transform: scale(1.025); }
.option--photo .num { margin-top: 24px; }
.option-grid--unnumbered .option--photo h3 { margin-top: 24px; }
.option--photo > .text-link { margin-top: auto; }
.option--photo > :nth-last-child(2):not(.price) { margin-bottom: 22px; }
.option--photo > .price + .text-link { margin-top: 22px; }
@media (min-width: 681px) and (max-width: 980px) { .option-grid--photo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Estimator step 04, the /bespoke edge and corner drawing at the top of each card. One card across on
   phones (as before), two across, four across on wide screens: never three and one. */
.est-choice--drawn span { justify-content: flex-start; }
.est-choice--drawn .ec-icon { flex: none; margin-bottom: 8px; }
.est-choices--drawn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .est-choices--drawn { grid-template-columns: 1fr; } }
@media (min-width: 1600px) { .est-choices--drawn { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "How to choose" on the Height-adjustable, L-shaped and Fixed-height pages. Each card: the drawing
   (the music studio card box), a real project photo at 4:3 linking to the portfolio, a heading and one sentence. Both
   pictures have an explicit width and their own shape, so every card in a row has the same picture heights (WebKit, as
   for .option-photo). 4 cards: 4 across, 2 × 2 on tablets; 3 cards: 3 across; 1 across on phones. */
.choose-card > .choose-drawing, .choose-card > .choose-photo { flex: none; align-self: flex-start; width: 100%; }
.choose-card > .choose-drawing { margin-bottom: 12px; }
.choose-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd7cc; }
.choose-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.choose-photo:hover img { transform: scale(1.025); }
.choose-card h3 { margin-top: 22px; }
.hc-solid { fill: var(--paper); }
/* Opt-in how-to-choose sections: line drawings sit directly on the block's own colour, with
   no lighter panel; the box keeps its size, padding and spacing (the border stays, transparent). The people's solid
   fill follows the block too, so they do not show as pale cut-outs. Photos are untouched. */
.choose-grid--on-block .choose-drawing { background: transparent; border-color: transparent; }
.choose-grid--on-block .hc-solid { fill: var(--block, var(--paper)); }
.choose-note { margin-top: 24px; }
.hc-label { font-size: 18px; }

/* ── Viewport-fit type and spacing (visual-layout pass, 5 Nov 2026) ──────────
   Use the smaller of viewport width and height for display type, so a shallow
   laptop does not inherit the same scale as a tall desktop. The upper caps keep
   the atelier type generous at 1920 × 1080. */
:root { --section: clamp(64px, min(7vw, 10vh), 112px); }

.section-head h2, .statement h2, .materials h2, .reviews h2,
.estimator h2, .studio h2, .enquire h2 {
  font-size: clamp(34px, min(4.1vw, 6.5vh), 68px);
  line-height: 1.08;
}
/* Editorial newlines are normalised in the markup. Headings wrap only when
   their available column requires it, so no line can escape the viewport. */
.section-head h2, .statement h2 { max-width: 100%; text-wrap: pretty; }
.sec h2 { font-size: clamp(34px, min(3.6vw, 6vh), 58px); }
.sec h3, .option h3 { font-size: clamp(19px, min(1.65vw, 3.5vh), 25px); line-height: 1.2; }
.sec .section-head { margin-bottom: clamp(32px, min(4.5vw, 6vh), 64px); }
.section-index { margin-bottom: clamp(20px, min(3vw, 4.5vh), 38px); }
.statement-grid > div p { margin: 22px 0 28px; font-size: clamp(17px, min(1.45vw, 2.8vh), 20px); line-height: 1.58; }
.stacked-head .section-intro, .section-head > p, .projects-head .projects-intro,
.estimator-intro > p:not(.section-index), .enquire-copy > p:not(.section-index) {
  font-size: clamp(16px, min(1.35vw, 2.7vh), 19px);
  line-height: 1.58;
}

/* The deliberately small uppercase labels stay readable without changing the
   brand hierarchy. */
.eyebrow, .section-index, .h1-lead, .crumbs,
.button, .text-link, .hero-proof, .option .num, .project-number,
.project-copy dl div, .rating-line small, .review-stats span,
.estimate-card legend, .estimate-result p, .estimate-note,
.journal-no, .journal-card > a > p:not(.journal-excerpt), .journal-arrow,
.figure-caption, .facts dt, .spec-table caption, .spec-table thead th,
.journal-filter, .journal-row time, .journal-row .cat { font-size: 13px; }

/* Keep actions quiet and architectural rather than letting their boxes dominate
   the composition. Coarse pointers retain the original 52px hit area even
   though the visible control is slimmer. */
.button {
  position: relative;
  min-height: 44px;
}
@media (pointer: coarse) {
  .button::before {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
}

/* Shared enquiry band: a composed consultation layout rather than a heading
   floating above a distant form. Copy and direct contacts form the quiet left
   rail; the working fields sit in one restrained panel on the right. */
.enquire {
  grid-template-columns: minmax(280px, .72fr) minmax(500px, 1.28fr);
  column-gap: clamp(48px, 7vw, 112px);
  row-gap: 0;
  align-items: start;
}
.enquire-copy {
  grid-column: 1;
  grid-row: 1;
}
.enquire h2 {
  font-size: clamp(38px, min(3.6vw, 6vh), 56px);
  line-height: 1.08;
  text-wrap: balance;   /* the narrow left rail wraps the heading: even lines, never one word alone (Job 164 Prompt 5H-2) */
}
.enquire-copy > p:not(.section-index) {
  max-width: 34em;
  text-wrap: pretty;   /* no single word on the last line (Job 164 Prompt 5H-2) */
  margin-top: 20px;
  font-size: clamp(16px, min(1.25vw, 2.6vh), 18px);
  line-height: 1.55;
}
.enquire-contacts {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.enquire-contacts a {
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: 13px;
  letter-spacing: .07em;
}
.enquire-contacts a:hover { color: #fff; border-bottom-color: #fff; }
.enquire > .enquiry-form,
.enquire--corporate > .enquiry-form {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  padding: clamp(26px, 3vw, 44px);
  gap: 24px 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
}
.enquire .enquiry-form label > span:not(.field-error) {   /* the label text; errors keep their 12px style */
  margin-bottom: 4px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  letter-spacing: .11em;
}
.enquire .enquiry-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  height: 46px;
  padding-top: 6px;
  padding-bottom: 10px;
  font-size: 16px;
}
.enquire .enquiry-form textarea {
  min-height: 118px;
  padding-top: 10px;
  padding-bottom: 12px;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
}
.enquire .enquiry-form > button.button {
  width: auto;
  min-width: 210px;
  justify-self: start;
  padding-inline: 20px;
}
.enquire .enquiry-form .form-status {
  max-width: 70ch;
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .enquire { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .enquire-copy,
  .enquire > .enquiry-form,
  .enquire--corporate > .enquiry-form {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 680px) {
  .enquire { row-gap: 24px; }
  .enquire h2 { font-size: clamp(32px, min(9.5vw, 6.5vh), 42px); }
  .enquire > .enquiry-form,
  .enquire--corporate > .enquiry-form { padding: 22px 18px; gap: 22px; }
  .enquire .enquiry-form > button.button { width: 100%; min-width: 0; }
  .enquire .enquiry-form textarea { min-height: 112px; }
}

/* Homepage selected work: three compact editorial cards in one row. The image
   leads; project context and specifications sit beneath it instead of making
   each project a full-width feature band. */
#projects .project-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 38px);
}
#projects .project-card,
#projects .project-card-reverse {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
#projects .project-card figure,
#projects .project-card-reverse figure {
  order: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
}
#projects .project-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-top: clamp(18px, 2vw, 28px);
}
#projects .project-copy h3 {
  font-size: clamp(20px, min(1.8vw, 3.4vh), 29px);
  line-height: 1.14;
}
#projects .project-copy > p:not(.project-number) {
  margin-top: 14px;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
}
#projects .project-copy dl { margin: 18px 0 10px; }
#projects .project-copy dl div {
  grid-template-columns: minmax(58px, .34fr) minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  line-height: 1.4;
}
#projects .project-copy dd {
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}
#projects .project-copy .text-link {
  align-self: flex-start;
  gap: 7px;
  margin-top: 4px;
  padding-bottom: 3px;
  color: rgba(255,255,255,.54);
  border-bottom-color: rgba(255,255,255,.26);
  font-size: 8pt;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.35;
}
#projects .project-copy .text-link:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.72);
}

@media (min-width: 681px) {
  /* Reserve only the text space the cards actually need, then align the two
     useful specification rows. Avoid stretching the cards with empty tracks. */
  #projects .project-copy h3 { min-height: 2.28em; }
  #projects .project-copy > p:not(.project-number) {
    min-height: calc(1.55em * 4);
  }
  #projects .project-copy dl {
    display: grid;
    grid-template-rows: repeat(2, minmax(46px, auto));
  }
  #projects .project-copy dl div { min-height: 0; }
}

@media (min-width: 681px) and (max-width: 980px) {
  #projects .project-copy h3 { min-height: 2.28em; }
  #projects .project-copy > p:not(.project-number) {
    min-height: calc(1.55em * 4);
  }
  #projects .project-copy dl {
    grid-template-rows: repeat(2, minmax(54px, auto));
  }
}

@media (min-width: 1500px) {
  #projects .project-copy > p:not(.project-number) {
    min-height: calc(1.55em * 3);
  }
}

@media (max-width: 680px) {
  #projects .project-list { grid-template-columns: 1fr; gap: 56px; }
  #projects .project-card figure,
  #projects .project-card-reverse figure { aspect-ratio: 4 / 3; }
  #projects .project-copy h3 { font-size: clamp(22px, 6.8vw, 27px); }
  #projects .project-copy > p:not(.project-number) { font-size: 15px; }
}

/* Homepage cards and large numeric callouts no longer compete with headings. */
.journal-card { min-height: 330px; }
.journal-card p { margin-top: 34px; }
.journal-card h3 { font-size: clamp(22px, min(2.1vw, 4vh), 32px); line-height: 1.2; }
.journal-arrow { padding-top: 24px; }
.rating-number { font-size: clamp(48px, min(4.2vw, 7vh), 64px); }
.review-stats strong { font-size: clamp(28px, min(2.5vw, 4.5vh), 36px); }
.estimate-result { margin: 24px 0 14px; padding: 22px 0; }
.estimate-result strong { font-size: clamp(38px, min(3.6vw, 6.5vh), 58px); }
.estimator > .estimate-card { margin-top: clamp(30px, min(4.5vw, 6vh), 56px); }
.est-total { font-size: clamp(38px, min(3.5vw, 6vh), 58px); }

@media (min-width: 981px) {
  .hero--home, .hero--page {
    grid-template-columns: minmax(500px, 46%) minmax(0, 1fr);
    height: min(100svh, 900px);
    min-height: 0;
  }
  .hero-scroll { left: calc(46% - 20px); }
  .hero--home .hero-copy, .hero--page .hero-copy {
    height: 100%;
    min-height: 0;
    padding: clamp(102px, 16vh, 170px) var(--pad) clamp(26px, 4.8vh, 52px);
    justify-content: flex-start;
  }
  /* Side-by-side hero (981px and wider): the original title size and wrap (owner, Job 164 Prompt 5I). */
  .hero--home h1 { font-size: clamp(44px, min(4.7vw, 7.2vh), 76px); line-height: 1.06; }
  .hero--page h1 { font-size: clamp(40px, min(4.1vw, 6.8vh), 68px); line-height: 1.07; }
  .hero--home .hero-media, .hero--page .hero-media { height: 100%; min-height: 0; }
  .hero--home .hero-intro, .hero--page .hero-intro {
    max-width: 46ch;
    margin-top: 18px;
    font-size: clamp(16px, min(1.25vw, 2.8vh), 20px);
    line-height: 1.48;
  }
  .hero--home .hero-actions, .hero--page .hero-actions { margin-top: 18px; gap: 20px; row-gap: 12px; }
  .hero--home .hero-notes, .hero--page .hero-notes { padding-top: 16px; }
}
@media (max-width: 980px) { .hero--home h1 { text-wrap: balance; } }   /* stacked hero: the 18% bigger title wraps evenly, never one word alone (Job 164 Prompts 5H-2, 5I) */

@media (min-width: 981px) and (max-width: 1200px) {
  .hero--home .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
}

.h1-lead { margin-bottom: 14px; }
.crumbs { margin-bottom: 14px; }
.hero-proof { margin-top: 10px; line-height: 1.45; }
.hero-notes dd { margin-top: 2px; }   /* size: atelier.css, 11px (owner, Job 164 Prompt 5H) */
/* At 11px the 2.7em label row (sized from the 16px box) left a gap above each value. The three columns now share two rows, so labels take only the height they need and the values still line up when a label wraps (Job 164 Prompt 5H). */
@supports (grid-template-rows: subgrid) { .hero-notes { grid-template-rows: auto auto; } .hero-notes div { grid-row: span 2; grid-template-rows: subgrid; } }

@media (min-width: 681px) and (max-width: 980px) {
  .hero--home .hero-copy, .hero--page .hero-copy {
    padding-top: clamp(108px, 13vh, 132px);
    padding-bottom: 30px;
    justify-content: flex-start;
  }
  .hero--home .hero-copy, .hero--page .hero-copy { min-height: 0; }
  .hero--home h1 { font-size: calc(1.18 * clamp(46px, min(7vw, 6.5vh), 60px)); }   /* owner: home hero title 18% bigger (Job 164 Prompt 5H-2) */
  .hero--home .hero-intro, .hero--page .hero-intro { margin-top: 18px; font-size: 18px; line-height: 1.5; }
  .hero--home .hero-actions, .hero--page .hero-actions { margin-top: 20px; }
  .hero--home .hero-notes, .hero--page .hero-notes { margin-top: 32px; padding-top: 18px; }
  .hero--text .hero-copy {
    min-height: 0;
    padding-top: clamp(108px, 13vh, 132px);
    padding-bottom: clamp(48px, 6vh, 64px);
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .hero--home .hero-copy, .hero--page .hero-copy {
    padding: 82px var(--pad) 22px;
    justify-content: flex-start;
  }
  .hero--home .hero-copy { min-height: 0; }
  .hero--page .hero-copy { min-height: 0; }
  .hero--home h1 { font-size: calc(1.18 * clamp(36px, min(9.5vw, 6.5vh), 42px)); line-height: 1.06; }   /* owner: home hero title 18% bigger (Job 164 Prompt 5H-2) */
  .hero--page h1 { font-size: clamp(36px, min(10vw, 6.6vh), 44px); line-height: 1.08; }
  .hero--text .hero-copy { padding-top: 100px; padding-bottom: 40px; }
  .hero--text h1 { font-size: clamp(34px, min(9.5vw, 6.5vh), 44px); }
  .h1-lead { margin-bottom: 12px; }
  .crumbs { margin-bottom: 12px; }
  .hero--home .hero-intro, .hero--page .hero-intro {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.48;
  }
  .hero--home .hero-intro { font-size: 15px; line-height: 1.45; }
  .hero-proof { margin-top: 9px; line-height: 1.42; }
  .hero--home .hero-actions, .hero--page .hero-actions { margin-top: 17px; gap: 13px; row-gap: 13px; }
  .hero--home .hero-notes, .hero--page .hero-notes { margin-top: 18px; padding-top: 13px; }
  .hero-notes { gap: 8px; }
  .hero-notes dd { line-height: 1.35; }
  .section-head h2, .statement h2, .materials h2, .reviews h2,
  .estimator h2, .studio h2, .enquire h2, .sec h2 { font-size: clamp(32px, min(9.5vw, 6.5vh), 42px); }
  .journal-card { min-height: 280px; }
  .journal-card p { margin-top: 26px; }
  .journal-card h3 { font-size: clamp(21px, 6.3vw, 26px); }
  .estimate-result strong { font-size: clamp(30px, min(8.5vw, 5.5vh), 36px); }   /* below the section heading on phones too (Job 164 Prompt 5H) */
}

/* The worked example is a decision aid, not a large form. Keep its explanation
   beside the choices on wider screens, then make the card compact enough that
   the result, context and next step read as one deliberate unit. */
@media (min-width: 760px) {
  .estimator {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(32px, 6vw, 104px);
  }
  .estimator-intro > p:not(.section-index) { max-width: 40ch; margin-top: 24px; }
  .estimator > .estimate-card, .estimator--centred > .estimate-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(26px, 3vw, 44px);
  }
  .estimate-result {
    display: grid;
    grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 4px 24px;
  }
  .estimate-result p { grid-column: 1 / -1; }
  .estimate-result strong { grid-column: 1; margin-bottom: 0; }
  .estimate-result span { grid-column: 2; line-height: 1.5; }
}

@media (min-width: 981px) {
  .estimate-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
  }
  .estimate-card fieldset, .estimate-card .estimate-result { grid-column: 1 / -1; }
  .estimate-card .estimate-note { grid-column: 1; align-self: center; margin: 0; line-height: 1.55; }
  .estimate-card > .button { grid-column: 2; align-self: end; white-space: nowrap; }
  .estimator--beige-card .estimate-card .estimate-note { grid-column: 1 / -1; align-self: auto; }
  .estimator--beige-card .estimate-card > .button { grid-column: 1 / -1; width: 100%; margin-top: 24px; }
}

@media (max-width: 759px) {
  .estimator > .estimate-card { margin-top: 26px; padding: 20px; }
  .estimate-card legend { margin-bottom: 16px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .estimate-choice span {
    min-height: 66px;
    gap: 8px;
    padding: 10px 32px 10px 10px;
    font-size: 14px;
    line-height: 1.3;
  }
  .estimate-result { margin: 14px 0 12px; padding: 14px 0; }
  .estimate-note { margin-bottom: 18px; line-height: 1.55; }
}

/* Readable fine print. These are genuine labels, captions and controls—not
   decorative marks—so the smallest public-facing type is 13px. */
@media (min-width: 981px) { .site-nav { font-size: 13px; } }
/* At 13px the full menu needs tighter spacing just above the hamburger breakpoint, so the logo keeps 48px of air and the buttons stay on one line (Job 164 Prompt 5H). */
@media (min-width: 1220px) and (max-width: 1365px) { .site-nav, .site-nav .nav-cta { letter-spacing: .1em; } .site-nav { gap: 22px; } }
.menu-toggle, .nav-cta, .hero-media figcaption, .hero-scroll span,
.staging-tip, .card-meta span, .material-list li, .verification-note,
.social-hover, .studio li > span, .contact-details,
.enquiry-form label span, .enquiry-form .field-hint,
.form-status,   /* field errors stay 12px, uppercase, under their field (form guard; Job 164 Prompt 5H) */
.prose figcaption, .article-meta, .article-tags, .article-pager span,
.journal-card time, .jl-zoom-label, .jl-hint,
.est-step > h2 span, .est-step legend, .est-label, .est-choice small,
.field label, .est-qty small, .est-lines li small, .est-disclaimer,
.ledge-code, .ledge-card .price small, .ec-terms dt, .ec-num,
.ec-view, .ec-choice-note, .acc-links a, .md-area, .md-num,
.md-parts-num, .md-facts dt, .md-guide-caption,
.spec-table--stack th[data-label]::before, .md-tile .num,
.estimate-choice i, .option .price small, .wood-card-head span,
.footer h3, .footer-grid a, .footer-grid p, .footer address { font-size: 13px; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
}
.footer-top img {
  width: min(100%, 320px);
}
.footer-top p {
  width: 100%;
  max-width: 62ch;
  margin: 0;
  justify-self: end;
  text-align: right;
  color: rgba(255,255,255,.66);
  font-size: clamp(14px, min(1.15vw, 2.2vh), 17px);
  line-height: 1.45;
}

@media (max-width: 680px) {
  .footer-top {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }
  .footer-top img { width: min(64vw, 220px); }
  .footer-top p {
    max-width: 34ch;
    justify-self: start;
    text-align: left;
    font-size: 15px;
  }
}

/* On narrow phones, accessory details need the full card width. The quantity
   control moves below its description instead of forcing select fields wider
   than the viewport. */
@media (max-width: 420px) {
  .est-qty { grid-template-columns: minmax(0, 1fr); }
  .est-qty > label { width: 100%; min-width: 0; }
  .est-qty > input { justify-self: end; }
  .est-qty .est-label, .est-qty select { min-width: 0; max-width: 100%; width: 100%; }
}

/* Breadcrumbs are quiet navigation context, not a second eyebrow. */
.crumbs {
  gap: 6px;
  margin-bottom: clamp(40px, min(4.4vw, 6.4vh), 60px);
  color: rgba(255,255,255,.55);   /* the 5b09f3f value: .42 failed contrast (WCAG 4.5:1) on the dark hero (Job 164 Prompt 5H) */
  font-size: 8pt;
  line-height: 1.4;
  letter-spacing: .08em;
}
.crumbs li + li::before {
  margin-right: 6px;
  opacity: .45;
}
.h1-lead {
  margin-bottom: clamp(20px, min(2vw, 3vh), 28px);
}

/* Every worked-example choice uses the same card height, even when one label
   wraps and another does not. */
.choice-grid { grid-auto-rows: 1fr; }
.estimate-choice { height: 100%; }
.estimate-choice span { height: 100%; }

/* Homepage material study: the whole idea reads as one composed frame instead
   of a copy screen followed by a separate image screen. */
#materials {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(48px, min(5vw, 7vh), 76px);
  padding-bottom: clamp(48px, min(5vw, 7vh), 76px);
}
#materials .materials-copy { max-width: 540px; }
#materials .section-index { margin-bottom: 18px; }
#materials h2 {
  font-size: clamp(34px, min(3.5vw, 5.5vh), 54px);
}
#materials .materials-copy > p:not(.section-index) {
  margin: 16px 0 22px;
  font-size: clamp(15px, min(1.2vw, 2.4vh), 17px);
  line-height: 1.52;
}
#materials .material-list { margin-bottom: 22px; }
#materials .material-list li {
  min-height: 48px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#materials .material-main {
  width: 100%;
  height: clamp(300px, min(36vw, 58vh), 420px);
  overflow: hidden;
}
#materials .material-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 720px) and (max-width: 980px) {
  #materials {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 28px;
  }
}

@media (max-width: 719px) {
  #materials {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  #materials .materials-copy { max-width: none; }
  #materials .material-main { height: clamp(190px, 55vw, 240px); }
}

/* Homepage process: preserve the numbered editorial treatment, but contain it
   in one concise frame. Brown separates it from the green enquiry band below. */
#studio {
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: stretch;
  background: var(--wine);
}
#studio .studio-image {
  min-height: 0;
  height: clamp(480px, min(52vw, 72vh), 580px);
  overflow: hidden;
}
#studio .studio-image picture,
#studio .studio-image img {
  width: 100%;
  height: 100%;
}
#studio .studio-image img {
  object-fit: cover;
  object-position: center;
}
#studio .studio-copy {
  padding: clamp(42px, min(4.5vw, 6vh), 66px) var(--pad);
}
#studio .section-index { margin-bottom: 18px; }
#studio ol { margin-top: 30px; }
#studio li { padding-top: 16px; padding-bottom: 16px; }
#studio .studio-cta { margin-top: 24px; }

@media (max-width: 980px) {
  #studio { grid-template-columns: 1fr; }
  #studio .studio-image {
    height: clamp(240px, 46vw, 350px);
  }
  #studio .studio-copy {
    padding-top: 48px;
    padding-bottom: 52px;
  }
}

@media (max-width: 680px) {
  #studio .studio-image { height: clamp(170px, 46vw, 200px); }
  #studio .studio-copy {
    padding-top: 32px;
    padding-bottom: 36px;
  }
  #studio ol { margin-top: 22px; }
  #studio li { padding-top: 10px; padding-bottom: 10px; }
  #studio .studio-cta { margin-top: 18px; }
}

/* Compact menu panel (owner, Job 164 Prompt 5I-2): wherever the MENU button shows, the open menu is a small panel
   under it, right-aligned, about 15% of the screen wide (never narrower than its longest word) and only as tall as
   its items. Every link and button is at least 44px tall. Closed, it sits just off the right edge (and is hidden). */
@media (max-width: 1219px) {
  .site-nav {
    inset: 68px var(--pad) auto auto;   /* just under the MENU button (header 92px tall here) */
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    width: max-content;
    min-width: 15vw;
    height: auto;
    max-height: calc(100dvh - 80px);
    gap: 0;
    padding: 4px 0 8px;
    font-size: 16px;
    line-height: 1.2;
    box-shadow: 0 14px 36px rgba(10, 12, 10, .22);
    transform: translateX(calc(100% + var(--pad) + 4px));
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav > a:not(.nav-cta) { display: flex; align-items: center; min-height: 44px; padding: 0 20px; white-space: nowrap; }
  .site-nav > a:not(.nav-cta)::after { inset: auto 20px 8px; }
  .site-nav .nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 6px 12px 0;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .site-nav .nav-cta--outline { margin-top: 8px; }
  .site-nav a.nav-cta + a.nav-cta { margin-left: 12px; }   /* same width as BOOK (an older rule set this margin to 0) */
  .site-header:has(.site-nav.is-open) .menu-toggle { color: var(--paper-light); }
  .site-header.is-scrolled:has(.site-nav.is-open) { color: var(--ink); }
  .site-header.is-scrolled:has(.site-nav.is-open) .brand img { filter: brightness(0); }
  .site-header.is-scrolled:has(.site-nav.is-open) .menu-toggle { color: var(--ink); }
}
@media (max-width: 980px) { .site-nav { top: 58px; } }   /* header 74px tall */
/* Owner (Job 164 Prompt 5H): the extra line under the estimator note on /adjustable-desks; the note's own style. */
.estimate-card .estimate-note.estimate-note--extra { margin-top: 8px; }

/* Cindy's live review: the worked-example form follows its section colour, with white text. */
.estimator .estimate-card {
  --estimate-base: color-mix(in srgb, var(--wine) 75%, var(--sand));
  --estimate-deep: var(--wine);
  --estimate-hover: color-mix(in srgb, var(--wine) 90%, var(--sand));
  --muted: #fff;
  --accent: #fff;
  --line: rgba(255, 255, 255, .55);
  --selected-line: #fff;
  --hover-tint: var(--estimate-hover);
  --selected-tint: var(--estimate-deep);
  color: #fff;
  background: var(--estimate-base);
}
.estimator .estimate-choice input:checked + span { color: #fff; }
.estimator .estimate-choice input:checked + span::after { background: #fff; color: var(--estimate-deep); }
.estimator .estimate-card > .button-dark { color: #fff; background: var(--estimate-deep); }
.estimator .estimate-card > .button-dark:hover { background: var(--estimate-hover); }

/* Darkened sand keeps the beige section's hue and sufficient contrast for white text. */
.estimator--sand .estimate-card {
  --estimate-base: color-mix(in srgb, var(--sand) 55%, var(--ink));
  --estimate-deep: color-mix(in srgb, var(--sand) 35%, var(--ink));
  --estimate-hover: color-mix(in srgb, var(--sand) 45%, var(--ink));
}

/* Natural variation: let the paragraph flow across the panel instead of balancing its lines. */
.natural-variation-panel .lede { max-width: none; text-wrap: wrap; }

/* Shared worked examples: the note uses the full row, followed by the estimator button. */
.estimator .estimate-card .estimate-note { grid-column: 1 / -1; align-self: auto; max-width: none; text-wrap: wrap; }
.estimator .estimate-card > .button { grid-column: 1 / -1; width: 100%; margin-top: 24px; }

/* ── Booking — its own file, appended after site.css by the build ── */

/* Navigation pair: "Book a Consultation" outlined beside "Begin a project" filled.
   Three header states: over the dark hero (white), scrolled (ink on paper), open mobile menu (paper on moss). */
.site-nav .nav-cta + .nav-cta { margin-left: calc(-1 * clamp(18px, 2.4vw, 40px) + 10px); }
.nav-cta:not(.nav-cta--outline) { border-color: #fff; background: #fff; color: var(--ink); }
.site-header.is-scrolled .nav-cta:not(.nav-cta--outline) { border-color: var(--moss); background: var(--moss); color: #fff; }
.site-header.is-scrolled .nav-cta:not(.nav-cta--outline):hover { border-color: var(--moss-hover); background: var(--moss-hover); }
.nav-cta { transition: background .3s, color .3s, border-color .3s; }
.nav-cta--outline:hover { background: rgba(255,255,255,.12); }
.site-header.is-scrolled .nav-cta--outline { border-color: var(--moss); color: var(--moss); }
.site-header.is-scrolled .nav-cta--outline:hover { background: var(--moss); color: #fff; }

/* ── Consultation request (/book-consultation) — estimator step cards + ink panel ── */
.consult-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.consult-request-intro { max-width: none; margin: 0 0 clamp(24px, 3vw, 42px); color: var(--muted); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.65; text-wrap: pretty; }
.consult-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.consult-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.consult-final-grid > .est-step, .consult-final-grid > .consult-summary { min-width: 0; height: 100%; }
.consult-final-grid > .consult-summary { position: static; }
.consult-final-grid > .est-step { padding: clamp(22px, 2.2vw, 30px); }
.sec .consult-final-grid > .est-step > h2 { margin-bottom: 16px; font-size: clamp(24px, 2vw, 28px); line-height: 1.12; }
.consult-final-grid .consult-fields { grid-template-columns: 1fr; gap: 8px; }
.consult-final-grid .field label { margin-bottom: 4px; font-size: 10px; letter-spacing: .12em; }
.consult-form .consult-final-grid .field :is(input, textarea) { padding: 8px 0; font-size: 14px; line-height: 1.45; }
.consult-form .consult-final-grid .field textarea { min-height: 66px; }
.consult-final-grid :is(.consult-photos, .consult-privacy) { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.consult-choice span { min-height: 132px; justify-content: flex-start; gap: 6px; padding: 18px 40px 16px 18px; }  /* right side keeps room for the selected tick */
.consult-choice b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; }
.consult-choice small { line-height: 1.5; }
.consult-choice .consult-where { margin-top: auto; padding-top: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.consult-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consult-note { display: block; margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.consult-whatsapp { margin-top: 8px; }
.consult-note a, .consult-photos a, .facts dd a { border-bottom: 1px solid var(--link-line); }
.consult-sub { margin-top: 28px; }
.consult-schedule-step { padding: clamp(20px, 2vw, 28px); }
.sec .consult-form .consult-schedule-step > h2 { margin-bottom: 18px; font-size: clamp(24px, min(2.4vw, 4vh), 30px); line-height: 1.15; }
.consult-schedule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: end; }
.consult-schedule-grid .consult-sub { display: none; }
.consult-schedule-grid .field label { font-size: 9px; }
.consult-schedule-grid .field :is(input, select) { font-size: 15px; }
.consult-schedule-grid .date-placeholder { font-size: 15px; line-height: 1.5; }
.consult-schedule-step .consult-note { margin-top: 14px; font-size: 13px; line-height: 1.5; }
.consult-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.consult-wide { grid-column: 1 / -1; }
.consult-form .field textarea { resize: vertical; font: inherit; font-size: 17px; line-height: 1.5; }
.est-step [hidden] { display: none !important; }
.est-step .field-error { display: block; margin-top: 8px; color: #8a3b2f; font-size: 13px; }
.est-step [aria-invalid="true"]:not(fieldset) { border-bottom-color: #8a3b2f; }
.est-step fieldset[aria-invalid="true"] .est-choice span { border-color: #8a3b2f; }
.consult-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 28px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.consult-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--moss); }
.consult-consent a { border-bottom: 1px solid var(--link-line); }
.consult-privacy { margin: 28px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.consult-privacy a { border-bottom: 1px solid var(--link-line); }
.consult-steps { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.consult-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.5; }
.consult-steps span { color: rgba(255,255,255,.62); font-size: 13px; letter-spacing: .12em; padding-top: 3px; }
.consult-callout { margin: 22px 0; padding: 14px 16px; border-left: 2px solid #c8b99e; background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.6; }
.consult-callout strong { color: #fff; }
.consult-submit { width: 100%; border: 0; cursor: pointer; }
.consult-submit[disabled] { opacity: .55; cursor: progress; }
.consult-summary .form-status { margin-top: 14px; font-size: 13px; }
.consult-summary .est-disclaimer a { border-bottom: 1px solid var(--link-line); }
.consult-good-to-know .facts dd { font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: normal; }
.consult-done { max-width: 760px; padding: clamp(28px, 4vw, 56px); background: var(--paper-light); border: 1px solid var(--line); scroll-margin-top: 110px; }
.consult-done:focus { outline: none; }
.consult-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.consult-done h3 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
.consult-done p { font-size: 17px; line-height: 1.65; }
.consult-done .facts { margin: 26px 0 18px; }
.consult-done .consult-photos { margin: 14px 0 28px; color: var(--muted); font-size: 15px; }
.consult-done .button-outline { background: transparent; color: var(--moss); cursor: pointer; }
.consult-done .button-outline:hover { background: var(--moss); color: #fff; }
.consult-ref { color: var(--muted); font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1219px) { /* same breakpoint as the hamburger header in atelier.css */
  .site-nav .nav-cta + .nav-cta { margin-left: 0; }
  .site-nav .nav-cta { margin-top: 0; }
  .site-nav .nav-cta--outline { margin-top: 12px; }
  .nav-cta:not(.nav-cta--outline), .site-header.is-scrolled .nav-cta:not(.nav-cta--outline) { border-color: var(--paper-light); background: var(--paper-light); color: var(--moss); }
  /* the drawer is always moss: keep the outline button light after the page has scrolled */
  .nav-cta--outline, .site-header.is-scrolled .nav-cta--outline { border-color: var(--paper-light); color: var(--paper-light); }
  .site-header.is-scrolled .nav-cta--outline:hover { background: rgba(255,255,255,.12); color: var(--paper-light); }
}

@media (max-width: 980px) {
  .consult-choices { grid-template-columns: 1fr; }
  .sec .consult-form .est-step > h2 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.2; }
  .sec .consult-form .consult-schedule-step > h2 { font-size: 26px; line-height: 1.15; }
  .sec .consult-final-grid > .est-step > h2 { font-size: 26px; }
  .consult-choice span { min-height: 0; }
}

@media (max-width: 820px) {
  .consult-final-grid { grid-template-columns: 1fr; }
  .consult-final-grid > .est-step, .consult-final-grid > .consult-summary { height: auto; }
  .consult-schedule-grid { grid-template-columns: 1fr; gap: 18px; }
  .consult-schedule-grid .consult-sub { display: block; margin: 8px 0 -4px; }
}

/* Header controls over a hero PHOTO (owner, Job 164 Prompt 5I): the outlined BOOK button and the MENU toggle get a dark,
   see-through backing so their light labels stay readable (WCAG AA) over bright photos. Only on the side-by-side hero
   (981px and wider) before the header turns solid on scroll; over plain backgrounds nothing changes. */
@media (min-width: 981px) {
  :root:has(.hero-media) .site-header:not(.is-scrolled) .nav-cta--outline { background: rgba(23, 24, 21, .68); }
  :root:has(.hero-media) .site-header:not(.is-scrolled) .nav-cta--outline:hover { background: rgba(23, 24, 21, .82); }
  :root:has(.hero-media) .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .menu-toggle { padding: 8px 12px; margin: -8px -12px; background: rgba(23, 24, 21, .68); }
  /* the search icon beside MENU gets MENU's treatment, nothing new (Job 164 Prompt 5J) */
  :root:has(.hero-media) .site-header:not(.is-scrolled):not(:has(.site-nav.is-open)) .site-search-toggle--bar { background: rgba(23, 24, 21, .68); }
}

/* ── Floating Get a Quote + WhatsApp actions ────────────
   Bottom-right on every width, stacked, labelled. Two colours that read on both the light
   and the dark (ink, wine) bands. White on #157347 is 5.9:1. No animation: the actions are
   simply hidden while the mobile menu, an enquiry form, the worked-example estimator or the
   footer is on screen
   (client/quick-actions.js), so they never cover form fields, buttons or footer links.
   Both actions take the width of the wider one (Get a Quote), sharing one right edge. */
.quick-actions { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.quick-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px 0 15px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(23, 24, 21, .22); }
.quick-action svg { flex: none; }
.quick-action--quote { background: var(--paper-light); color: var(--moss); border-color: var(--moss); }
.quick-action--quote:hover { background: #fff; }
.quick-action--whatsapp { background: #157347; border-color: #157347; color: #fff; }
.quick-action--whatsapp:hover { background: #0f5f3a; border-color: #0f5f3a; }
.quick-action:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; box-shadow: 0 0 0 7px var(--paper-light); }  /* light halo: visible over any section */
.quick-actions.is-tucked, body.menu-open .quick-actions { visibility: hidden; }
/* The private-build banner sits bottom-left; keep it clear of the actions on phones. */
@media (max-width: 680px) {
  .quick-actions { gap: 8px; }
  .quick-action { min-height: 44px; padding: 0 15px 0 13px; font-size: 13px; }
  .dev-banner { max-width: calc(100% - 180px); }
}
/* Without JavaScript nothing tucks the actions away, so leave room under the footer's last line. */
html:not(.js) .footer { padding-bottom: 140px; }
@media print { .quick-actions { display: none; } }

/* ── Portfolio grid, notes and search ──
   Full rows: 3 across from 681px, 2 on phones, where an odd last photo spans both columns. Photos are not links.
   The note: a dark overlay with white text on hover (mouse devices only), a quiet line under the photo everywhere
   else. Overlay 60% black: white text stays above 5.7:1 even over pure white (test/portfolio-browser.run.mjs). */
.pf-quiet { margin-top: 18px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); }

.pf-search { display: none; }
.js .pf-search { display: block; padding: clamp(32px, 4vw, 56px) var(--pad) 0; }
.pf-search-label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pf-search-row { display: flex; gap: 10px; max-width: 640px; }
.pf-search-input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid rgba(23, 24, 21, .55); border-radius: 0; color: var(--ink); background: var(--paper-light); font-size: 17px; -webkit-appearance: none; appearance: none; }
.pf-search-input::placeholder { color: var(--muted); opacity: 1; }
.pf-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* one Clear button only */
.pf-search-input:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.pf-clear { height: 52px; padding: 0 18px; border: 1px solid rgba(23, 24, 21, .55); background: transparent; font-size: 15px; cursor: pointer; }
.pf-clear:hover { background: var(--paper-light); }
.pf-clear[hidden] { display: none; }
.pf-count { min-height: 1.6em; margin-top: 10px; font-size: 14px; color: var(--muted); }
.pf-empty { max-width: 640px; margin-top: 6px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); background: var(--paper-light); }
.pf-empty[hidden] { display: none; }
.pf-empty-text { margin-bottom: 18px; font-size: 18px; line-height: 1.5; }
.pf-suggest-label { margin-top: 24px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-suggest { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; padding: 0; list-style: none; }
.pf-suggest a { text-decoration: underline; text-underline-offset: 3px; }

.pf-sections { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }
/* a gap, not margins: sections hidden by the search leave no space behind */
.pf-section[hidden] { display: none; }
/* Jump links (/portfolio#music-studio-desks) land with the heading about 24px under the scrolled header (72px). */
.pf-section[id] { scroll-margin-top: 96px; }
.pf-section h2 { margin-bottom: clamp(18px, 2vw, 28px); font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; line-height: 1.15; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.pf-item[hidden] { display: none; }
.pf-photo { position: relative; overflow: hidden; }
.pf-photo picture { display: block; background: #ddd7cc; }
.pf-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.pf-note { display: block; padding-top: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }

@media (max-width: 680px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pf-filtering .pf-item:last-child:nth-child(odd) { grid-column: auto; }
  .pf-item.pf-span { grid-column: 1 / -1; }
  .pf-section[id] { scroll-margin-top: 88px; } /* the phone header is 64px when scrolled */
  .pf-note { padding-top: 6px; font-size: 13px; }
}

@media (hover: hover) and (pointer: fine) {
  .pf-note { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px 20px; color: #fff; background: rgba(0, 0, 0, .6); font-size: 16px; line-height: 1.35; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
  .pf-photo:hover .pf-note { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .pf-note { transition: none; } }

.pf-footnote { padding: 0 var(--pad) clamp(56px, 7vw, 104px); }
/* The full width of the photo grid (same side padding) and 2pt (about 2.7px) smaller than before: 17px -> 14.3px, above the 14px phone minimum. */
.pf-footnote p { max-width: none; font-size: 14.3px; line-height: 1.6; }

/* ── Cookie choice (client/consent.js) ───────────────────────────────────────────────────────────
   A fixed bar at the bottom, added by script after the page loads: nothing on the page moves. While it shows, the
   floating actions, the estimator's price bar and the private-build note sit above it (--consent-h), and the page
   gets the same space at its end so the last lines can still be scrolled into view. Two buttons of equal size and
   weight. No animation. */
.consent { position: fixed; inset: auto 0 0; z-index: 60; max-height: 50vh; overflow-y: auto; padding: 16px var(--pad) max(16px, env(safe-area-inset-bottom)); background: var(--paper-light); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(23, 24, 21, .14); }
.consent[hidden] { display: none; }
.consent-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 32px; max-width: 1180px; margin: 0 auto; }
.consent-text, .consent-current { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: normal; }
.consent-current { grid-column: 1; font-weight: 600; color: var(--moss); }
.consent-text a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-button { min-width: 132px; min-height: 46px; padding: 0 20px; border: 1px solid var(--moss); background: var(--moss); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.consent-button:hover { background: var(--moss-hover); }
.consent-button:focus-visible, .consent-text a:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; box-shadow: 0 0 0 6px var(--paper-light); }
html.has-consent body { padding-bottom: var(--consent-h, 0px); }
/* No choice yet (set in the page head before the first paint): the fixed items wait, unseen, until the banner has its
   final height (fonts loaded), then appear above it. Appearing is not a layout shift; moving would be. */
html.consent-pending :is(.quick-actions, .dev-banner, .est-mobilebar) { visibility: hidden; }
html.has-consent .quick-actions { bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--consent-h, 0px)); }
html.has-consent .dev-banner { bottom: calc(12px + var(--consent-h, 0px)); }
@media (max-width: 980px) { html.has-consent .est-mobilebar:not([hidden]) { bottom: var(--consent-h, 0px); } }
/* A calm two-line banner: the explanation first, then three centred text
   actions. The consent logic and control semantics remain unchanged. */
.consent { display: flex; align-items: center; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.consent-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.consent-text { text-align: center; }
.consent-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.consent-message {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
}
.consent-current:not([hidden]) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.consent-button, .consent-actions a {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--moss);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.consent-separator {
  color: var(--muted);
  text-decoration: none;
}
.consent-button, .consent-actions a { padding-inline: 4px; }
.consent-button:hover, .consent-actions a:hover { color: var(--moss-hover); text-decoration: underline; text-underline-offset: 5px; background: transparent; }
.consent-button:focus-visible, .consent-actions a:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; box-shadow: none; }   /* inside the target: the slim bar never clips it */
/* Height (Job 164 Prompt 5H, back to the EV-187 sizes where the wording allows): 3px vertical padding (6px on touch
   screens); from 681px the message and the actions share one row, the message taking the space the actions leave (one
   line on wide screens, wrapping beside the actions on narrower ones); Accept and No thanks have the same width. */
.consent { padding-top: 3px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
.consent-inner { gap: 0; }
.consent-button { min-width: 6.7em; justify-content: center; }
@media (min-width: 681px) {
  .consent-inner { flex-direction: row; justify-content: center; column-gap: 24px; max-width: 1280px; }   /* room for one line on wide screens */
  .consent-text { flex: 0 1 auto; min-width: 0; text-align: left; }
  .consent-message { text-align: left; }
  .consent-actions { flex: none; }
}
@media (pointer: coarse) {
  .consent { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .consent-button, .consent-actions a { min-height: 40px; }
}
@media (max-width: 680px) {
  .consent-message { max-width: 34em; line-height: 1.35; }
  .consent-actions { gap: 6px; }
  .consent-button, .consent-actions a { padding-inline: 3px; font-size: 13px; letter-spacing: 0; }
}
/* The footer's "Cookie settings" reads like the links beside it. It needs JavaScript, so it is hidden without it. */
.footer-cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 9px; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.footer-cookie:hover { color: #fff; }
.footer-cookie:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html:not(.js) .footer-cookie { display: none; }
@media print { .consent { display: none; } }

/* ── Site search (owner, Job 164 Prompt 5J) ─────────────────────────────────
   Search styling follows the existing paper, ink and moss palette. Behaviour: src/client/search.js. */

/* The magnifier: the colour of the menu words around it (it inherits the header colour), no backing of its own. */
.site-search-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.site-search-toggle[hidden] { display: none; }
.site-search-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-search-toggle .site-search-icon { display: block; }
.site-nav .site-search-toggle--nav { margin: 0 -6px 0 -10px; }   /* the 44px target, without widening the menu's gaps */
.site-search-toggle--bar { display: none; }
@media (max-width: 1219px) {
  .site-search-toggle--nav { display: none !important; }        /* the small menu panel has no search button */
  .site-search-toggle--bar:not([hidden]) { display: inline-flex; margin-left: auto; margin-right: 14px; }
}

/* The panel: under the header, a fixed width on wide screens, full width on phones. */
.site-search {
  position: absolute; top: 100%; right: var(--pad); z-index: 60;
  width: min(560px, calc(100vw - 2 * var(--pad)));
  max-height: calc(100dvh - 110px - var(--consent-h, 0px)); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-gutter: stable;
  border: 1px solid var(--line);
  color: var(--ink); background: var(--paper-light); box-shadow: 0 18px 44px rgba(10, 12, 10, .22);
  font-family: var(--sans); letter-spacing: normal; text-transform: none; text-align: left;
}
.site-search[hidden] { display: none; }
.site-search__inner { padding: 20px 24px 24px; }
.site-search__form { position: sticky; top: 0; z-index: 1; background: var(--paper-light); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); }
.site-search__form .site-search-icon { flex: none; color: var(--muted); }
.site-search__input {
  flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: none; color: var(--ink);
  font: 400 17px/1.3 var(--sans); outline: none; -webkit-appearance: none; appearance: none;
}
.site-search__input::placeholder { color: var(--muted); }
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__form:focus-within { box-shadow: 0 2px 0 0 var(--moss); }
.site-search__close {
  flex: none; width: 44px; height: 44px; margin-right: -6px; border: 0; background: none; color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.site-search__close:focus-visible, .site-search__chip:focus-visible, .site-search__action:focus-visible,
.site-search__email:focus-visible, .site-search__more a:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.site-search__heading { margin: 18px 0 10px; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.site-search__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-search__chip {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink);
  font: 400 15px/1.2 var(--sans); cursor: pointer;
}
.site-search__chip:hover { border-color: var(--moss); background: var(--paper); }

.site-search__results:not(:empty) { margin-top: 10px; }
.site-search__result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; min-height: 68px; padding: 14px 10px; margin: 0 -10px;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.site-search__result:last-child { border-bottom: 0; }
.site-search__result:hover, .site-search__result.is-active { background: rgba(45, 59, 50, .08); }
.site-search__result.is-active { box-shadow: inset 3px 0 0 var(--moss); }
.site-search__result-title { font-size: 17px; font-weight: 500; line-height: 1.35; }
.site-search__result-type { align-self: start; padding-top: 2px; color: var(--moss); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.site-search__result-desc { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; line-height: 1.45; }

.site-search__help { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.site-search__results:empty + .site-search__help { margin-top: 18px; padding-top: 0; border-top: 0; }
.site-search__sorry { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.site-search__projects { margin: 0 0 12px; }
.site-search__projects a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.site-search__projects a:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.site-search__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.site-search__action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--moss); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.site-search__action--message { border-color: var(--moss); background: var(--moss); color: #fff; letter-spacing: .04em; text-transform: none; font-size: 15px; }
.site-search__action--book { background: none; color: var(--moss); }
.site-search__action--build { background: var(--moss); color: #fff; }
.site-search__email { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.site-search__more { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.site-search__more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .site-search { right: 0; left: 0; width: auto; max-height: calc(100dvh - 74px - var(--consent-h, 0px)); }
  .site-search__inner { padding: 14px var(--pad) max(18px, env(safe-area-inset-bottom)); }
  .site-search__result { gap: 4px 8px; }
  .site-search__actions { gap: 8px; }
  .site-search__action--message { flex-basis: 100%; }
  body.search-open { overflow: hidden; }
}
@media (min-width: 981px) and (max-width: 1219px) {
  .site-search-toggle--bar:not([hidden]) { margin-right: 24px; }   /* clear of MENU's own backing box */
}

/* Keep floating actions away from the entire search surface and its tab order. */
body.search-open :is(.quick-actions, .dev-banner) { visibility: hidden; }
.site-search :is(button, a) { touch-action: manipulation; }
.site-search__close:hover { background: var(--paper); }
.site-search :is(.site-search__action--message, .site-search__action--build):hover { background: var(--ink); border-color: var(--ink); }
.site-search__action--book:hover { background: var(--paper); }
.site-search :is(button, .site-search__action):active { background: var(--sand); color: var(--ink); }
.site-search__result:active { background: var(--paper); }
.site-search__result:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .site-search, .site-search * { scroll-behavior: auto; transition: none; animation: none; }
}