/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-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:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/karla-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:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/karla-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:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/karla-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:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/karla-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;}
/* Cessnock Shutters - design system
   One idea: the page mirrors the day. Paper morning, one golden light-wash band,
   vine-ink dusk at the footer. Shiraz is a decision (CTA/link/active), copper is
   hardware (glints, ticks, tags), hairline does the drawn work. */

:root {
  --ink:          oklch(24.1% 0.020 337);  /* #261C23 primary text, headings */
  --ink-soft:     oklch(44.6% 0.019 342);  /* #5C5057 secondary text, captions, labels */
  --paper:        oklch(97.1% 0.010 82);   /* #F9F5EE page ground - warm limewash */
  --paper-shade:  oklch(93.1% 0.019 80);   /* #EFE7DA cards, alternating sections */
  --light-wash:   oklch(94.0% 0.033 84);   /* #F6EAD3 the golden-hour band - ONE per view */
  --primary:      oklch(37.4% 0.097 348);  /* #64284A shiraz - CTAs, links, active states */
  --primary-deep: oklch(25.7% 0.042 336);  /* #301B2B vine-ink - hero/footer dark grounds */
  --accent:       oklch(68.6% 0.100 57);   /* #C98A5A burnished copper - glints on dark, hovers */
  --accent-ink:   oklch(50.0% 0.095 58);   /* #8B5426 copper as TEXT on light grounds */
  --hairline:     oklch(87.4% 0.016 55);   /* #DED3CC rules, dividers, diagram line-work */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --wrap-narrow: 780px;
  --radius: 10px;
  --shadow-soft: 0 10px 30px -18px oklch(24.1% 0.020 337 / 0.35);
  --ease: cubic-bezier(.33,.8,.35,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.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 640;
  font-variation-settings: "SOFT" 80, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin: 0 0 .4em; }
p { margin: 0 0 1.1em; }
a { color: var(--primary); text-decoration-color: color-mix(in oklch, var(--primary) 40%, transparent); text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
a:hover { text-decoration-color: var(--primary); }
strong { font-weight: 700; }
::placeholder { color: color-mix(in oklch, var(--ink-soft) 35%, transparent); }
::selection { background: color-mix(in oklch, var(--accent) 30%, var(--paper)); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }

.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); }

/* the kicker: the voice one line away from the plain H1 */
.kicker {
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 .9rem; display: block;
}
.on-dark .kicker, .band-dusk .kicker { color: var(--accent); }

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 38em; }
.band-dusk .lede { color: color-mix(in oklch, var(--paper) 82%, var(--primary-deep)); }

/* aspect tag - the little compass-and-hour label */
.aspect-tag {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink);
}
.band-dusk .aspect-tag { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  letter-spacing: .015em; text-decoration: none; cursor: pointer;
  padding: .8em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: var(--paper); }
.btn-primary:hover { box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--primary) 70%, transparent); }
/* on vine-ink grounds the CTA is copper with dark ink - the hardware catching light */
.btn-copper { background: var(--accent); color: var(--primary-deep); }
.btn-copper:hover { background: color-mix(in oklch, var(--accent) 88%, white); box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--accent) 65%, transparent); }
.btn-ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.band-dusk .btn-ghost { border-color: color-mix(in oklch, var(--paper) 35%, transparent); color: var(--paper); }
.band-dusk .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* text-link with arrow */
.more { font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* ---------- header ---------- */
.site-head {
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 60;
}
.site-head .bar {
  max-width: var(--wrap); margin-inline: auto; padding: .7rem clamp(1.1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1.5rem;
  /* the drawer is a sibling INSIDE this header's stacking context at z-55; without
     this lift the open drawer paints over the toggle and the menu can't be closed
     by touch (caught in build verify, 2026-07-07) */
  position: relative; z-index: 56;
}
.site-head .logo { display: block; line-height: 0; margin-right: auto; }
.site-head .logo img { height: 42px; width: auto; }
.nav-primary { display: flex; align-items: center; gap: 1.4rem; }
.nav-primary a:not(.btn) {
  font-weight: 700; font-size: .88rem; letter-spacing: .02em; text-decoration: none;
  color: var(--ink-soft); padding: .2rem 0; border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-primary a:not(.btn):hover { color: var(--primary); }
/* active page marker */
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="planner"]  .nav-primary a[data-nav="planner"],
body[data-page="about"]    .nav-primary a[data-nav="about"] {
  color: var(--primary); border-bottom-color: var(--accent);
}
.nav-primary .btn { padding: .55em 1.2em; font-size: .85rem; }

/* mobile: louvre hamburger -> vine-ink drawer */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .55rem .4rem;
  margin-left: .25rem;
}
.nav-toggle .louvre { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--ink); margin: 5px 0; transition: transform .3s var(--ease), opacity .3s var(--ease); transform-origin: center; }
/* open state: the two bars cross at the blade angle (a shallow X, still a louvre gesture) */
.nav-open .nav-toggle .louvre:nth-child(1) { transform: translateY(7.5px) rotate(-20deg); }
.nav-open .nav-toggle .louvre:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle .louvre:nth-child(3) { transform: translateY(-7.5px) rotate(20deg); }

.drawer {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: var(--primary-deep);
  padding: 6.2rem clamp(1.4rem, 6vw, 3rem) 2.5rem;
  overflow-y: auto;
}
.nav-open .drawer { display: block; }
.drawer nav { display: grid; gap: .35rem; }
.drawer a:not(.btn) {
  font-family: var(--font-display); font-weight: 620; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: 1.7rem; color: var(--paper); text-decoration: none;
  padding: .5rem 0; border-bottom: 1px solid color-mix(in oklch, var(--paper) 14%, transparent);
  transition: color .2s var(--ease), transform .25s var(--ease);
}
.drawer a:not(.btn):hover { color: var(--accent); transform: translateX(.4rem); }
.drawer .btn { margin-top: 1.6rem; font-size: 1rem; padding: .9em 1.6em; }
.drawer .drawer-note { color: color-mix(in oklch, var(--paper) 60%, transparent); font-size: .9rem; margin-top: 1.4rem; }
.nav-open { overflow: hidden; }
/* backdrop-filter makes the header the containing block for fixed descendants,
   which pinned the "fixed" drawer INSIDE the header box (a ~64px strip). Drop it
   while the drawer is open so inset:0 means the viewport again (build verify, 2026-07-07). */
.nav-open .site-head { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.nav-open .site-head .logo img { content: url("/assets/brand/primary-reversed.svg"); }
.nav-open .nav-toggle .louvre { background: var(--paper); }

@media (max-width: 880px) {
  .nav-primary { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- bands (the day) ---------- */
.band { padding-block: clamp(3.2rem, 7vw, 5.5rem); position: relative; }
.band-paper { background: var(--paper); }
.band-shade { background: var(--paper-shade); }
.band-gold  { background: var(--light-wash) url("/assets/brand/louvre-light-whisper.webp") center / cover no-repeat; }
.band-dusk  { background: var(--primary-deep) url("/assets/brand/vine-ink-grain.webp") center / cover no-repeat; color: var(--paper); }
.band-dusk h1, .band-dusk h2, .band-dusk h3 { color: var(--paper); }
.band-dusk p { color: color-mix(in oklch, var(--paper) 85%, var(--primary-deep)); }
.band-dusk a:not(.btn) { color: var(--accent); text-decoration-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.band-dusk a:not(.btn):hover { text-decoration-color: var(--accent); }

/* oversized corner watermark - one per view, bleeds off the edge */
.has-watermark { overflow: hidden; }
.has-watermark::after {
  content: ""; position: absolute; width: 560px; height: 560px;
  right: -140px; bottom: -170px; pointer-events: none;
  background: url("/assets/brand/watermark.svg") center / contain no-repeat;
}
.band-dusk.has-watermark::after { background-image: url("/assets/brand/watermark-reversed.svg"); }

/* louvre-light band edge */
.stripe-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200px; pointer-events: none;
  background: url("/assets/brand/louvre-stripe-band.svg") top center / cover no-repeat;
}

/* the site's hr */
hr.sun-rule { border: 0; height: 16px; margin: 2.6rem auto; max-width: 240px;
  background: url("/assets/brand/divider.svg") center / contain no-repeat; }

/* branded list bullets */
ul.sun-list { list-style: none; padding-left: 0; }
ul.sun-list li { padding-left: 1.6em; position: relative; margin-bottom: .55em; }
ul.sun-list li::before { content: ""; position: absolute; left: 0; top: .38em; width: .85em; height: .85em;
  background: url("/assets/brand/bullet.svg") center / contain no-repeat; }

/* pull-quote */
.pull {
  margin: 2.2rem 0; padding: .4rem 0 .4rem 1.6rem; border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-weight: 560; font-variation-settings: "SOFT" 90, "WONK" 0;
  font-size: 1.35rem; line-height: 1.4; color: var(--primary);
  position: relative;
}
.pull::before { content: ""; position: absolute; left: -14px; top: -20px; width: 34px; height: 26px;
  background: url("/assets/brand/blockquote.svg") center / contain no-repeat; opacity: .9; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 5.8rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-figure { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .55); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; align-items: center; }
.hero .h-sub { margin-top: 1.2rem; }
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
}

/* page hero for inner pages (paper, hairline base) */
.page-head { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.8rem, 4vw, 2.6rem); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
.page-head .crumb { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 1.1rem; }
.page-head .crumb a { color: var(--ink-soft); text-decoration: none; }
.page-head .crumb a:hover { color: var(--primary); }
.page-head .sun-arc { position: absolute; right: 0; bottom: -6px; width: min(560px, 55vw); opacity: .9; pointer-events: none; }

/* ---------- aspect strip (home) ---------- */
.aspect-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.aspect-cell { background: var(--paper); padding: 1.5rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; transition: background-color .25s var(--ease); }
.aspect-cell:hover { background: var(--light-wash); }
.aspect-cell .dir { font-family: var(--font-display); font-weight: 640; font-variation-settings: "SOFT" 80, "WONK" 0; font-size: 1.5rem; display: flex; align-items: baseline; gap: .5rem; }
.aspect-cell .dir small { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.aspect-cell p { font-size: .95rem; color: var(--ink-soft); margin: 0; flex-grow: 1; }
.aspect-cell .more { font-size: .88rem; }
@media (max-width: 880px) { .aspect-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .aspect-strip { grid-template-columns: 1fr; } }

/* ---------- feature rows ---------- */
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: center; margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.feature-row.flip .feature-copy { order: 2; }
.feature-row figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.feature-row figure img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s var(--ease); }
.feature-row figure:hover img { transform: scale(1.02); }
.feature-row figcaption { font-size: .8rem; color: var(--ink-soft); padding: .55rem .2rem 0; }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row.flip .feature-copy { order: 0; }
}

/* small card grid (supporting services) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2rem; }
.card {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.35rem; display: flex; flex-direction: column; gap: .5rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: color-mix(in oklch, var(--accent) 45%, var(--hairline)); }
.card .icon { width: 52px; height: 52px; margin-bottom: .4rem; }
.card p { font-size: .95rem; color: var(--ink-soft); margin: 0; flex-grow: 1; }
.card .more { font-size: .9rem; }
.band-shade .card { background: var(--paper); }
@media (max-width: 880px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* steps (how it works) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; counter-reset: step; }
.step { position: relative; padding: 1.6rem 1.4rem 1.4rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -16px; left: 1.2rem;
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--paper);
  font-weight: 700; font-size: .95rem; display: grid; place-items: center;
}
.step img { width: 46px; height: 46px; margin-bottom: .7rem; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step { margin-top: .6rem; } }

/* area tiles */
.area-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.area-tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-soft); }
.area-tile img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: transform .5s var(--ease); }
.area-tile:hover img { transform: scale(1.04); }
.area-tile .veil { position: absolute; inset: 0; background: linear-gradient(to top, oklch(25.7% 0.042 336 / .94) 0%, oklch(25.7% 0.042 336 / .66) 48%, oklch(25.7% 0.042 336 / .2) 74%, transparent 90%); }
.area-tile .label { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; color: var(--paper); }
.area-tile .label .aspect-tag { color: color-mix(in oklch, var(--accent) 55%, var(--paper)); text-shadow: 0 1px 3px oklch(25.7% 0.042 336 / .8), 0 0 14px oklch(25.7% 0.042 336 / .5); }
.area-tile .label h3 { color: var(--paper); margin: .25rem 0 .2rem; }
.area-tile .label p { color: color-mix(in oklch, var(--paper) 82%, transparent); font-size: .9rem; margin: 0; }
@media (max-width: 820px) { .area-tiles { grid-template-columns: 1fr; } }

/* guide list rows */
.guide-list { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; margin-top: 2rem; }
.guide-item { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; background: var(--paper); padding: 1.3rem 1.4rem; text-decoration: none; transition: background-color .25s var(--ease); }
.guide-item:hover { background: var(--light-wash); }
.guide-item .gi-tag { font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); writing-mode: initial; min-width: 5.2em; }
.guide-item h3 { margin: 0 0 .15rem; font-size: 1.18rem; color: var(--ink); }
.guide-item p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.guide-item .arrow { color: var(--accent-ink); font-weight: 700; transition: transform .25s var(--ease); }
.guide-item:hover .arrow { transform: translateX(4px); }
@media (max-width: 640px) { .guide-item { grid-template-columns: 1fr; gap: .35rem; } .guide-item .arrow { display: none; } }

/* ---------- article (guides) ---------- */
.article { padding-block: clamp(2.4rem, 5vw, 4rem); }
.article .measure { max-width: 46em; }
.article h2 { margin-top: 2.2em; }
.article h3 { margin-top: 1.8em; }
.article figure { margin: 2.2rem 0; }
.article figure img { border-radius: var(--radius); }
.article figcaption { font-size: .82rem; color: var(--ink-soft); padding-top: .55rem; }
.diagram { margin: 2.4rem 0; padding: 1.8rem 1.4rem 1.2rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); }
.diagram svg { display: block; margin-inline: auto; }
.diagram .cap { font-size: .84rem; color: var(--ink-soft); text-align: center; margin: .9rem 0 0; }
.foot-refs { border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 1.4rem; font-size: .9rem; color: var(--ink-soft); }
.foot-refs h2 { font-size: 1.1rem; margin-top: 0; }
.foot-refs li { margin-bottom: .5em; }

/* data table */
.spec-table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .95rem; }
.spec-table th { font-weight: 700; text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: .6rem .8rem; border-bottom: 2px solid var(--hairline); }
.spec-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.spec-table td.num { text-align: right; font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* ---------- planner ---------- */
.planner-shell { background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-soft); padding: clamp(1.4rem, 4vw, 2.6rem); margin-top: 2.2rem; }
.planner-q { font-family: var(--font-display); font-weight: 620; font-variation-settings: "SOFT" 80, "WONK" 0; font-size: 1.3rem; margin: 0 0 1rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.chip {
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; cursor: pointer;
  padding: .55em 1.1em; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--paper); }

/* the compass dial */
.dial-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 4vw, 2.4rem); align-items: center; margin-bottom: 1.4rem; }
.dial { width: min(240px, 62vw); }
.dial .seg { cursor: pointer; }
.dial .seg circle.hit { fill: transparent; }
.dial .seg text { font-family: var(--font-body); font-weight: 700; font-size: 15px; fill: var(--ink-soft); letter-spacing: .05em; transition: fill .2s var(--ease); }
.dial .seg:hover text { fill: var(--accent-ink); }
.dial .seg[aria-pressed="true"] text { fill: var(--primary); }
.dial .seg[aria-pressed="true"] circle.ring-dot { fill: var(--accent); }
.dial-note { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 640px) { .dial-row { grid-template-columns: 1fr; justify-items: center; } .dial-note { text-align: center; } }

.guidance-card { border: 1px solid var(--hairline); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.3rem 1.4rem; background: var(--light-wash); margin-top: 1.4rem; }
.guidance-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.guidance-card .why { color: var(--ink-soft); font-size: .95rem; }
.guidance-card .spec { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: .8rem 0; }
.guidance-card .spec span { background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: .3em .7em; font-size: .82rem; font-weight: 700; }
.rail-note { font-size: .85rem; color: var(--ink-soft); border-top: 1px dashed var(--hairline); margin-top: 1rem; padding-top: .8rem; }

.room-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.room-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: .75rem 1rem; font-size: .95rem; }
.room-list li .rm { font-weight: 700; }
.room-list li .rm small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .85rem; }
.room-list button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.room-list button:hover { color: var(--primary); }

.planner-summary { margin-top: 2rem; padding: 1.6rem 1.5rem; background: var(--primary-deep) url("/assets/brand/vine-ink-grain.webp") center / cover no-repeat; border-radius: var(--radius); color: var(--paper); }
.planner-summary h3 { color: var(--paper); margin-top: 0; }
.planner-summary p { color: color-mix(in oklch, var(--paper) 85%, transparent); }
.planner-empty { text-align: center; padding: 2.2rem 1rem; color: var(--ink-soft); }
.planner-empty img { width: 150px; margin: 0 auto .8rem; opacity: .9; }

/* ---------- enquiry form (the measure sheet) ---------- */
.sheet { background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-soft); padding: clamp(1.5rem, 4vw, 2.4rem); }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1.6rem; }
.sheet-head h2 { margin: 0; font-size: 1.5rem; }
.sheet-head .sheet-no { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
.field label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: color-mix(in oklch, var(--ink-soft) 75%, transparent); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--hairline); border-radius: 0; padding: .45em .1em;
  transition: border-color .2s var(--ease);
}
.field textarea { border: 1.5px solid var(--hairline); border-radius: 8px; padding: .7em .8em; min-height: 7.5em; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.sheet .btn { width: 100%; margin-top: .4rem; font-size: 1.02rem; padding: 1em 1.5em; }
.form-note { font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.form-result { border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-top: 1.3rem; font-size: .98rem; }
.form-result.ok { background: var(--light-wash); border: 1px solid var(--accent); display: flex; gap: 1rem; align-items: center; }
.form-result.ok img { width: 74px; flex: 0 0 auto; }
.form-result.err { background: color-mix(in oklch, var(--primary) 8%, var(--paper)); border: 1px solid var(--primary); color: var(--primary); }

/* enquiry page layout */
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .enquiry-grid { grid-template-columns: 1fr; } }
.next-steps { display: grid; gap: 1rem; }
.next-steps .ns { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.next-steps .ns img { width: 40px; height: 40px; margin-top: .15rem; }
.next-steps .ns p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.next-steps .ns h4 { margin: 0 0 .2rem; }

/* the home golden band's two-column pitch (collapses on mobile) */
.gold-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 2rem; align-items: center; }
@media (max-width: 820px) { .gold-grid { grid-template-columns: 1fr; } }

/* ---------- enquiry cta band ---------- */
.cta-band { text-align: left; }
.cta-band .cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 2rem; align-items: center; }
@media (max-width: 820px) { .cta-band .cta-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot { background: var(--primary-deep) url("/assets/brand/vine-ink-grain.webp") center / cover no-repeat; color: color-mix(in oklch, var(--paper) 80%, transparent); padding: clamp(2.8rem, 6vw, 4.2rem) 0 2rem; font-size: .93rem; }
.site-foot .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.4rem; align-items: start; }
.site-foot .foot-logo img { width: 220px; height: auto; }
.site-foot h4 { color: var(--paper); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.site-foot nav { display: grid; gap: .4rem; }
.site-foot a:not(.btn) { color: color-mix(in oklch, var(--paper) 78%, transparent); text-decoration: none; transition: color .2s var(--ease); }
.site-foot a:not(.btn):hover { color: var(--accent); }
.site-foot .foot-line { border-top: 1px solid color-mix(in oklch, var(--paper) 14%, transparent); margin-top: 2.4rem; padding-top: 1.3rem; font-size: .8rem; color: color-mix(in oklch, var(--paper) 55%, transparent); display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: space-between; }
.site-foot .foot-line a { color: inherit; text-decoration: underline; }
.site-foot .foot-line a:hover { color: var(--accent); }
@media (max-width: 820px) { .site-foot .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- reveal on scroll (ambient, subtle) ----------
   Resting state is fully visible (no-JS visitors and crawlers see everything).
   JS adds .pending at runtime only when it can also observe + reveal the
   element, so opacity:0 is never authored as a state markup rests in. */
.reveal.pending { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.pending.in { opacity: 1; transform: none; }

/* ---------- focus-visible parity ----------
   The global outline (see :focus-visible above) stays as the affordance of
   record; these give a keyboard user the SAME responsive motion the hand gets
   on the elements that carry the path to the enquiry, so the eye is led the
   same way whether tabbing or pointing. Transform/opacity only, house ease. */
.btn:focus-visible { transform: translateY(-1.5px); }
.nav-primary a:not(.btn):focus-visible { color: var(--primary); }
.guide-item:focus-visible { background: var(--light-wash); }
.guide-item:focus-visible .arrow { transform: translateX(4px); }
.area-tile:focus-visible img { transform: scale(1.04); }
.chip:focus-visible { border-color: var(--accent-ink); color: var(--accent-ink); transform: translateY(-1px); }
.dial .seg:focus-visible text { fill: var(--accent-ink); }

/* 404 + utility */
.spot-stage { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; }
.spot-stage img { width: 230px; margin: 0 auto 1.4rem; }

/* ---------- reduced motion floor ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
  .reveal.pending { opacity: 1; transform: none; }
  .feature-row figure:hover img, .area-tile:hover img, .area-tile:focus-visible img { transform: none; }
}