/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Newcastle Shutters — site.css
   The independent shutter guide: filtered coastal morning light in a quiet reading room.
   Tokens are the brand kit's OKLCH block VERBATIM — build every colour from tokens.
   Light is the third colour: paper→morning gradients + low-contrast louvre stripes do
   the decorative work. --gum owns the enquiry path; --sage is graphic-only on light. */

:root {
  --ink:         #232823;
  --ink-soft:    #4C544C;
  --paper:       #F7F6EF;
  --paper-shade: #EFEDE1;
  --morning:     #F6F0DD;
  --gum:         #425D48;
  --gum-deep:    #263628;
  --sage:        #7FA286;
  --sage-tint:   #E4ECE0;
  --sage-light:  #B3CBB4;
  --cream:       #EAE0C6;
  --hairline:    #D9D7C7;

  --font-display:  "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:     "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-longform: "Newsreader", Georgia, serif;

  --wrap: 1120px;
  --wrap-narrow: 74ch;
  --radius: 6px;
  --shadow-soft: 0 1px 2px rgba(35, 40, 35, .05), 0 8px 28px rgba(35, 40, 35, .07);
  --ease: cubic-bezier(.33, .12, .16, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
::placeholder { color: rgba(76, 84, 76, .38); }
a { color: var(--gum); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); }
a:hover { color: var(--gum-deep); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.18; margin: 0 0 .5em; letter-spacing: .002em; }
h1 { font-size: clamp(2.15rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; }
p { margin: 0 0 1em; }
em { font-family: var(--font-display); font-style: italic; }
strong { font-weight: 600; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.kicker {
  font-family: var(--font-body); font-weight: 600; font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gum);
  margin: 0 0 .9rem; display: block;
}
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.lede-serif { font-family: var(--font-longform); font-size: 1.28rem; font-optical-sizing: auto; }

/* the site's hr: the mark's blade rhythm (currentColor mask) */
hr {
  border: 0; height: 20px; width: min(420px, 70%);
  margin: 2.6rem auto;
  background-color: var(--gum);
  -webkit-mask: url("/assets/brand/micro/hr.svg") center / contain no-repeat;
  mask: url("/assets/brand/micro/hr.svg") center / contain no-repeat;
}

/* brand list bullets: the mark's slit sun */
ul.brand { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
ul.brand li { position: relative; padding-left: 1.6em; margin-bottom: .55em; }
ul.brand li::before {
  content: ""; position: absolute; left: .1em; top: .42em; width: .72em; height: .72em;
  background-color: var(--sage);
  -webkit-mask: url("/assets/brand/micro/bullet.svg") center / contain no-repeat;
  mask: url("/assets/brand/micro/bullet.svg") center / contain no-repeat;
}

blockquote {
  margin: 2.2rem 0; padding: 1.4rem 1.6rem 1.2rem 3.4rem; position: relative;
  background: var(--sage-tint); border-radius: var(--radius);
  font-family: var(--font-longform); font-size: 1.18rem; line-height: 1.55;
}
blockquote::before {
  content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1.7rem; height: 1.7rem;
  background-color: var(--gum);
  -webkit-mask: url("/assets/brand/micro/quote.svg") center / contain no-repeat;
  mask: url("/assets/brand/micro/quote.svg") center / contain no-repeat;
}
blockquote p:last-child { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .78rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-primary { background: var(--gum); color: #fff; }
.btn-primary:hover { background: var(--gum-deep); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--gum); border-color: var(--gum); }
.btn-ghost:hover { background: var(--sage-tint); color: var(--gum-deep); border-color: var(--gum-deep); }
.btn-paper { background: var(--paper); color: var(--gum-deep); }
.btn-paper:hover { background: var(--morning); color: var(--gum-deep); }

/* ---------- dateline + masthead ---------- */
.dateline {
  background: var(--paper-shade); border-bottom: 1px solid var(--hairline);
  font-size: .8rem; color: var(--ink-soft);
}
.dateline .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .42rem; }
.dateline span em { font-size: .86rem; }
@media (max-width: 720px) { .dateline .is-extra { display: none; } }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .95rem;
}
/* Condense is a transform scale, not a padding/height tween: keeps it off the
   layout thread (no reflow per animation frame), GPU-friendly. */
.masthead-inner { transform-origin: left center; transition: transform .25s var(--ease); }
.masthead.is-condensed .masthead-inner { transform: scale(.94); }
.masthead .logo img { height: 52px; width: auto; }

.nav-primary { display: flex; align-items: center; gap: 1.5rem; }
.nav-primary a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .96rem;
  padding: .25rem 0; border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-primary a:not(.btn):hover { color: var(--gum); }
body[data-page="shutters"]  .nav-primary a[data-nav="shutters"],
body[data-page="areas"]     .nav-primary a[data-nav="areas"],
body[data-page="guides"]    .nav-primary a[data-nav="guides"],
body[data-page="advice"]    .nav-primary a[data-nav="advice"],
body[data-page="about"]     .nav-primary a[data-nav="about"] { border-bottom-color: var(--sage); color: var(--gum); }

/* mobile toggle: four louvre blades that tilt open */
.nav-toggle {
  display: none; background: none; border: 0; padding: .5rem; cursor: pointer;
  flex-direction: column; gap: 4px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle .blade {
  display: block; width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .blade:nth-child(1) { transform: translateY(6.5px) rotate(32deg); }
.nav-toggle[aria-expanded="true"] .blade:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .blade:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .blade:nth-child(4) { transform: translateY(-13px) rotate(-32deg); }

/* the drawer: PAPER, big Newsreader links (dark budget is spent on the footer) */
.drawer {
  display: none; border-bottom: 1px solid var(--hairline);
  background: var(--paper) url("/assets/brand/textures/louvre-whisper.svg");
}
.drawer.is-open { display: block; }
.drawer nav { display: flex; flex-direction: column; padding: 1.2rem clamp(1.1rem, 4vw, 2rem) 1.6rem; }
.drawer a:not(.btn) {
  font-family: var(--font-display); font-size: 1.45rem; color: var(--ink);
  text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--hairline);
}
.drawer a:not(.btn):hover { color: var(--gum); }
.drawer .btn { margin-top: 1.1rem; justify-content: center; }
.drawer-note { padding: 0 clamp(1.1rem, 4vw, 2rem) 1.3rem; margin: 0; color: var(--ink-soft); font-size: .9rem; font-style: italic; font-family: var(--font-display); }

@media (max-width: 920px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- bands + light ---------- */
.band { padding-block: clamp(3rem, 7vw, 5.2rem); }
.band-shade { background: var(--paper-shade); }
.band-tint { background: var(--sage-tint); }
.band-morning { background: linear-gradient(175deg, var(--morning) 0%, var(--paper) 88%); }
.band-louvre { background-image: url("/assets/brand/textures/louvre-whisper.svg"); }
.band-leaf { background-image: url("/assets/brand/textures/leaf-whisper.svg"); }
.band-fanlight { background-image: url("/assets/brand/textures/fanlight-whisper.svg"); }
.band-limewash { background-image: url("/assets/brand/textures/limewash-whisper.png"); background-size: 800px; }

/* louvre-light: soft stripes of morning sun at the mark's angle (decor, never zebra) */
.louvre-light { position: relative; overflow: hidden; }
.louvre-light::before {
  content: ""; position: absolute; inset: -12% -4%; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    177deg,
    transparent 0 46px,
    color-mix(in srgb, var(--morning) 62%, transparent) 46px 74px
  );
}
.louvre-light > * { position: relative; z-index: 1; }

/* the hero's stripes drift almost imperceptibly — the page breathing */
@keyframes louvre-drift { from { transform: translateY(0); } to { transform: translateY(28px); } }
.louvre-light.is-alive::before { animation: louvre-drift 48s linear infinite alternate; }

.morning-corner { position: relative; }
.morning-corner::after {
  content: ""; position: absolute; top: 0; right: 0; width: min(560px, 55%); height: 100%;
  background: url("/assets/brand/textures/morning-light.svg") top right / cover no-repeat;
  pointer-events: none; z-index: 0;
}
.morning-corner > * { position: relative; z-index: 1; }

.headland-divider { display: block; width: 100%; height: clamp(70px, 9vw, 130px); }
.headland-divider img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* watermark roundel behind a corner */
.watermarked { position: relative; overflow: hidden; }
.watermarked::before {
  content: ""; position: absolute; right: -120px; bottom: -140px; width: 460px; height: 460px;
  background: url("/assets/brand/textures/watermark-mark.svg") center / contain no-repeat;
  pointer-events: none;
}

/* ---------- recommendation card: THE unit ---------- */
.rec-card {
  background: var(--sage-tint); border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.35rem; margin: 1.4rem 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
a .rec-card:hover, .rec-card.is-hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.rec-verdict { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; line-height: 1.35; margin: 0 0 .3rem; }
.rec-reason { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); font-weight: 400; }
.rec-note { font-size: .93rem; color: var(--ink-soft); margin: .3rem 0 .55rem; }
.rec-link { font-weight: 600; font-size: .93rem; text-decoration: none; border-bottom: 1px solid var(--sage); padding-bottom: 1px; }
.rec-card p:last-child { margin-bottom: 0; }
.rec-compact { padding: .85rem 1.1rem; margin: .9rem 0; }
.rec-compact .rec-verdict { font-size: 1.08rem; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(3rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy .lede { margin-bottom: 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-aside { margin-top: 1.6rem; font-size: .9rem; color: var(--ink-soft); max-width: 46ch; }

/* framed print: the journal device for feature photos */
.framed { background: #fff; padding: 14px; border: 1px solid var(--hairline); box-shadow: var(--shadow-soft); }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.framed figcaption, .figure figcaption {
  font-size: .84rem; color: var(--ink-soft); padding-top: .6rem;
  font-family: var(--font-body);
}
.figure { margin: 2rem 0; }
.figure img { border-radius: var(--radius); width: 100%; object-fit: cover; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 560px; }
}

/* ---------- the ledger (one city, three kinds of windows) ---------- */
.ledger { margin-top: 1.5rem; }
.ledger-row {
  display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  padding-block: 2rem; border-top: 1px solid var(--hairline);
}
.ledger-row:last-child { border-bottom: 1px solid var(--hairline); }
.ledger-icon svg { width: 64px; height: 64px; }
.ledger-place { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin: 0 0 .35rem; }
.ledger-place a { text-decoration: none; color: var(--ink); }
.ledger-place a:hover { color: var(--gum); }
.ledger-body p { margin-bottom: .4rem; }
.ledger-row .rec-card { margin: 0; }
@media (max-width: 780px) {
  .ledger-row { grid-template-columns: 1fr; gap: .9rem; }
  .ledger-icon svg { width: 48px; height: 48px; }
}

/* ---------- materials spread ---------- */
.materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 2.4rem; }
.material-col { display: flex; flex-direction: column; }
.material-col img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.1rem; }
.material-col h3 { margin-bottom: .2rem; }
.material-sub { font-style: italic; font-family: var(--font-display); color: var(--ink-soft); margin-bottom: .8rem; }
.choose h4 { margin: .9rem 0 .3rem; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gum); }
.choose ul { margin: 0; padding-left: 1.1rem; }
.choose li { margin-bottom: .3rem; font-size: .95rem; }
@media (max-width: 880px) { .materials { grid-template-columns: 1fr; } }

/* ---------- icon tiles (brand icon PNGs at feature-tile weight) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.tile { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.3rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.tile { text-decoration: none; color: var(--ink); display: block; }
a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.tile img.tile-icon { width: 56px; height: 56px; margin-bottom: .9rem; }
.tile h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.tile p { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.tile .tile-more { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .9rem; color: var(--gum); }

/* ---------- guide library index ---------- */
.guide-index { counter-reset: guide; margin-top: 1rem; }
.guide-entry {
  counter-increment: guide;
  display: grid; grid-template-columns: 64px 1fr auto; gap: 1.4rem; align-items: baseline;
  padding-block: 1.35rem; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink);
}
.guide-entry:last-of-type { border-bottom: 1px solid var(--hairline); }
.guide-entry::before {
  content: counter(guide, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.5rem; color: var(--sage); font-style: italic;
}
.guide-entry h3 { font-size: 1.32rem; margin: 0 0 .15rem; transition: color .2s var(--ease); }
.guide-entry:hover h3 { color: var(--gum); }
.guide-entry p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.guide-entry .entry-tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gum); white-space: nowrap;
}
@media (max-width: 680px) {
  .guide-entry { grid-template-columns: 44px 1fr; }
  .guide-entry .entry-tag { display: none; }
  .guide-entry::before { font-size: 1.2rem; }
}

/* ---------- steps (the honest model) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.2rem; }
.step { position: relative; padding-top: 1.1rem; }
.step::before {
  content: attr(data-n); position: absolute; top: -0.4rem; left: 0;
  font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: var(--sage); opacity: .55;
}
.step h3 { margin: 0 0 .4rem; padding-left: 2.6rem; font-size: 1.18rem; }
.step p { padding-left: 2.6rem; margin: 0; font-size: .96rem; color: var(--ink-soft); }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 500; font-size: .9rem; }
.field .hint { font-size: .8rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .68rem .85rem; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.form-note { font-size: .84rem; color: var(--ink-soft); margin: 0; }
[data-lead-success] {
  background: var(--sage-tint); border-left: 3px solid var(--sage); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem; margin-top: 1.2rem; grid-column: 1 / -1;
}
[data-lead-success] .spot { width: 130px; margin-bottom: .6rem; }
[data-lead-error] {
  background: var(--cream); border-left: 3px solid var(--gum); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem 1.1rem; margin-top: 1rem; grid-column: 1 / -1; font-size: .95rem;
}
form[data-sent] .form-grid, form[data-sent] .form-actions { display: none; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- enquiry band ---------- */
.enquiry-band .band-inner {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 880px) { .enquiry-band .band-inner { grid-template-columns: 1fr; } }

/* ---------- article (longform guides) ---------- */
.article-head { padding-block: clamp(2.4rem, 5vw, 4rem) 1rem; }
.article-head .meta { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
.article {
  font-family: var(--font-longform); font-size: 1.13rem; line-height: 1.7;
  font-optical-sizing: auto; padding-block: 1.5rem 3rem;
}
.article > p, .article > ul, .article > ol, .article h2, .article h3, .article .rec-card, .article blockquote, .article table { max-width: 68ch; }
.article h2 { margin-top: 2.4rem; }
.article h3 { margin-top: 1.8rem; }
.article .figure, .article .figure img { max-width: 100%; }
.article table { font-family: var(--font-body); font-size: .93rem; }
.article .rec-card, .article aside { font-family: var(--font-body); }
.article .rec-verdict, .article .rec-reason { font-family: var(--font-display); }

table.spec { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
table.spec th, table.spec td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.spec th { font-weight: 600; font-size: .86rem; letter-spacing: .04em; background: var(--paper-shade); }
table.spec tbody tr:hover { background: color-mix(in srgb, var(--sage-tint) 55%, transparent); }
.table-scroll { overflow-x: auto; }

.aside-cream {
  background: var(--cream) url("/assets/brand/textures/leaf-grain.svg");
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 2rem 0; font-size: .97rem;
}
.aside-cream h4 { margin-top: 0; }
.aside-cream p:last-child { margin-bottom: 0; }

.refs { border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 1.4rem; font-family: var(--font-body); font-size: .9rem; color: var(--ink-soft); }
.refs h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.refs ol { padding-left: 1.2rem; margin: 0; }
.refs li { margin-bottom: .6rem; }

.faq h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.faq p { color: var(--ink-soft); }

/* ---------- Talk It Through: the advisory tool ---------- */
.adv-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 880px) { .adv-app { grid-template-columns: 1fr; } }

.adv-form { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.6rem; }
.adv-form fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
.adv-form fieldset:last-child { margin-bottom: 0; }
.adv-form legend { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; margin-bottom: .6rem; padding: 0; }

/* choice pills — the shared question UI */
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-row.choice-col { flex-direction: column; align-items: stretch; }
.choice {
  position: relative; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 999px; padding: .42rem 1rem;
  font-size: .92rem; background: #fff; user-select: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.choice-col .choice { border-radius: var(--radius); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--sage); }
.choice:has(input:checked) { background: var(--gum); border-color: var(--gum); color: #fff; }
.choice:has(input:focus-visible) { outline: 2px solid var(--sage); outline-offset: 2px; }

/* the reading column sits with the form and holds still on scroll */
.adv-read { position: sticky; top: 90px; }
@media (max-width: 880px) { .adv-read { position: static; } }

/* the day-band: how a room's aspect moves the sun. Light is the third colour. */
.adv-day { margin: 0 0 1.2rem; }
.adv-day-track {
  position: relative; height: 96px; border-radius: var(--radius);
  border: 1px solid var(--hairline); overflow: hidden;
  background: linear-gradient(180deg, var(--morning) 0%, var(--paper-shade) 100%);
}
.adv-day-light { position: absolute; inset: 0; transition: background .6s var(--ease); }
.adv-sun {
  position: absolute; bottom: 16px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle, #E7CE93 0%, #DFC389 60%, rgba(223,195,137,0) 72%);
  box-shadow: 0 0 18px 6px rgba(223,195,137,.5);
  transition: left .6s var(--ease), opacity .6s var(--ease);
}
.adv-day-marks {
  display: flex; justify-content: space-between;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  margin: .45rem .2rem 0;
}
.adv-day-cap { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--ink-soft); margin: .55rem 0 0; }

.adv-rec { margin: 0 0 1.1rem; }
.adv-teach { font-size: .93rem; color: var(--ink-soft); margin: .55rem 0 0; }
.adv-rec .rec-note em { color: var(--gum); font-style: italic; }

/* kept notes — an editorial reading, never a spec table */
.adv-kept { margin-top: 1.6rem; }
.adv-empty { text-align: center; padding: 1.6rem 1rem; color: var(--ink-soft); }
.adv-empty img { width: 200px; margin: 0 auto .8rem; }
.adv-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: .6rem; }
.adv-note {
  position: relative; background: var(--sage-tint); border: 1px solid var(--sage-light);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.adv-note h3 { font-size: 1.14rem; margin: 0 0 .15rem; padding-right: 1.4rem; }
.adv-note-meta { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; }
.adv-note-verdict { font-family: var(--font-display); font-weight: 500; font-size: 1.04rem; line-height: 1.35; margin: 0 0 .35rem; }
.adv-note-why { font-size: .9rem; margin: 0; }
.adv-note-why em { font-family: var(--font-display); color: var(--gum); }
.adv-note-del {
  position: absolute; top: .5rem; right: .55rem; background: none; border: 0;
  color: var(--ink-soft); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .2rem .35rem;
  transition: color .18s var(--ease);
}
.adv-note-del:hover { color: var(--gum-deep); }
.adv-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.3rem; }
.adv-disclaimer { font-size: .83rem; color: var(--ink-soft); margin-top: 1.1rem; max-width: 74ch; }

/* ---------- footer: the one dark band ---------- */
.foot {
  background: var(--gum-deep) url("/assets/brand/textures/louvre-whisper-dark.svg");
  color: var(--sage-light); margin-top: 0;
}
.foot-inner { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3rem); padding-block: 3.2rem 2rem; }
.foot .foot-logo img { width: 150px; height: auto; margin-bottom: 1rem; }
.foot p { font-size: .9rem; }
.foot h4 { color: var(--paper); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; }
.foot a:not(.btn) { color: var(--sage-light); text-decoration: none; font-size: .93rem; }
.foot a:not(.btn):hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.foot-base {
  border-top: 1px solid color-mix(in srgb, var(--sage-light) 25%, transparent);
  padding-block: 1.2rem 1.6rem; font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between;
}
.foot-base a { color: var(--sage-light); }
.foot-base .disclosure { max-width: 62ch; }
@media (max-width: 880px) { .foot-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-inner { grid-template-columns: 1fr; } }

/* ---------- page furniture ---------- */
.breadcrumbs { font-size: .84rem; color: var(--ink-soft); padding-top: 1.4rem; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gum); text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--ink); }

.page-head { padding-block: clamp(2rem, 5vw, 3.6rem) clamp(1.6rem, 3vw, 2.4rem); }
.page-head .lede { margin-top: .4rem; }

.crosslinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }

.spot-stage { text-align: center; padding-block: clamp(3rem, 8vw, 5rem); }
.spot-stage img { width: min(300px, 70%); margin: 0 auto 1.6rem; }

/* two-up editorial split used on inner pages */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4.5vw, 3.6rem); align-items: center; }
.split.is-media-right .split-media { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.is-media-right .split-media { order: 0; } }

/* ---------- signature interaction: the light-blade ---------- */
/* The ambient signature is the hero's louvre-light drift (light moves, furniture
   doesn't). This is that same morning light, now answering the pointer: a thin warm
   streak wipes once across the primary CTA on hover or keyboard focus, pulling the eye
   toward the enquiry. At rest the streak is invisible, so the resting design is unchanged. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  pointer-events: none; opacity: 0; transform: translateX(-160%);
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--morning) 88%, #fff) 50%,
    transparent 100%);
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { animation: blade-sweep .55s var(--ease) 1; }
@keyframes blade-sweep {
  0%   { transform: translateX(-160%); opacity: 0; }
  18%  { opacity: .5; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* ---------- :focus-visible parity (keyboard gets the same affordance as hover) ---------- */
/* The global :focus-visible outline (top of file) stays as the always-on ring; these
   mirror the lift/colour a mouse user gets, so the keyboard path feels identical. */
.btn-primary:focus-visible { background: var(--gum-deep); color: #fff; transform: translateY(-1px); }
.btn-ghost:focus-visible { background: var(--sage-tint); color: var(--gum-deep); border-color: var(--gum-deep); }
.btn-paper:focus-visible { background: var(--morning); color: var(--gum-deep); }
.nav-primary a:not(.btn):focus-visible,
.drawer a:not(.btn):focus-visible,
.ledger-place a:focus-visible,
.breadcrumbs a:focus-visible { color: var(--gum); }
a.tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
a:focus-visible .rec-card { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.guide-entry:focus-visible h3 { color: var(--gum); }

/* ---------- scroll-reveal (cards settle into the morning light) ---------- */
/* .reveal-init is added by motion.js ONLY to cards below the fold, never authored as a
   resting state here. No-JS visitors, crawlers and the whole first screen stay fully
   visible; there is no opacity:0 for JS to undo. */
.reveal-init {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-init.is-revealed { opacity: 1; transform: none; }

/* ---------- reduced-motion floor (non-negotiable) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .louvre-light.is-alive::before { animation: none !important; }
  .btn-primary::after { animation: none !important; }
  /* motion.js declines to hide anything under reduced motion, but keep a CSS floor too:
     should a .reveal-init ever land, it must rest visible, not blank. */
  .reveal-init { opacity: 1 !important; transform: none !important; }
}