/* Bright Design Consultancy — public site.
   Faithful to the approved mock-up (design-reference/template.html).
   No inline styles anywhere, so a strict Content-Security-Policy works. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-garamond-500-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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-garamond-500-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: 'Outfit'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fonts/outfit-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: 'Outfit'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fonts/outfit-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; }

:root {
  /* 'navy' tokens now hold Resene Grey Friars N35-004-253 (#57595C) and its deeper partner,
     COLORSTEEL Grey Friars (#313436) - Tank, 7 Oct 2026. Names kept so nothing else moves. */
  --navy: #57595C; --navy-deep: #313436;
  /* Tank, 8 Oct 2026 (review V5): the LARGE surfaces (hero, page heads, feature and quote bands,
     footer) and the main button use the deep Grey Friars; the mid #57595C stays for accents (the
     phone menu, the contact card, headings and small marks on paper). Mid-grey behind photos and
     as a button read flat / "disabled". */
  --band: var(--navy-deep); --accent: var(--navy);
  /* Small gold text on Grey Friars: the brand gold is only 2.8:1 there, this pale gold is 4.5:1. */
  --gold-on-grey: #E0CEA5;
  --gold: #c4a052; --gold-deep: #b08c3e; --gold-light: #d4b268;
  /* gold for SMALL TEXT on the light (paper) background: 4.7:1, passes WCAG AA.
     #b08c3e / #c4a052 are only 3.0 / 2.4:1 there; they stay for rules, borders,
     the logo and text on the deep grey #313436 (5.1:1). On Grey Friars use --gold-on-grey. */
  --gold-text: #8a6d2e;
  --paper: #fbfbf9; --mist: #d9d8d2; --ink: #2f3034;
  --body: #55575e; --body-2: #45474d; --meta: #6b6d74; --field: #9a9ca3; --field-line: #767880;  /* field underline: 4.3:1, above the 3:1 non-text minimum */ --foot: #b9bccb;
  --line: rgba(196,160,82,0.35);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: #8a8c93; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.paper :focus-visible, .site-header :focus-visible { outline-color: var(--navy); }   /* gold is 2.4:1 on paper; navy 6.78:1 */
/* Grey Friars boxes, including the ones that sit INSIDE the header or a paper section (the phone
   menu, the contact card): the brand gold ring is only 2.84:1 on #57595C and navy on navy is 1:1.
   The pale gold passes WCAG 1.4.11 (3:1) everywhere it can land: 4.53:1 on #57595C, 8.08:1 on
   #313436. Must come AFTER the rule above (same specificity, later wins). Review 8 Oct 2026, AX-A1/A2. */
.band :focus-visible, .band-deep :focus-visible, .menu-panel :focus-visible,
.contact-card :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-on-grey); }
.skip:focus-visible { outline-color: var(--navy-deep); }                /* sits on the paper header: 12.1:1 */
/* the sticky header (~83px) must not hide a focused element or an anchor target (2.4.11, AX-A5) */
html { scroll-padding-top: 100px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--paper); padding: 12px 16px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 760px; }
.upper { text-transform: uppercase; }

/* ---------- monogram + wordmark ---------- */
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.mono { position: relative; width: 40px; height: 50px; font-family: var(--serif); font-weight: 500; color: var(--gold); line-height: 1; flex: none; }
.mono span { position: absolute; font-size: 38px; }
.mono .b { left: 0; top: -2px; }
.mono .d { left: 9px; top: 15px; }
.brand .rule { width: 1px; height: 40px; background: var(--gold); }
.wordmark { display: flex; flex-direction: column; gap: 3px; }
.wordmark .w1 { font-size: 20px; letter-spacing: 0.2em; font-weight: 400; line-height: 1; }
.wordmark .w2 { font-size: 8.5px; letter-spacing: 0.2em; white-space: nowrap; color: var(--gold-deep); font-weight: 500; line-height: 1; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251,251,249,0.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.nav-desktop { display: flex; align-items: center; gap: 36px; }
.nav-link { font-size: 12px; letter-spacing: 0.2em; color: var(--ink); padding: 6px 0; border-bottom: 1px solid transparent; text-transform: uppercase; }
.nav-link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav-link[aria-current="page"], .nav-link.active { border-bottom-color: var(--gold); }

.btn { display: inline-block; border: none; cursor: pointer; font-size: 12px; letter-spacing: 0.22em; padding: 18px 32px; text-transform: uppercase; line-height: 1.2; text-align: center; min-height: 44px; }
.btn-navy { background: var(--band); color: var(--paper); }                 /* 12.1:1 */
.btn-navy:hover { background: #1f2123; color: var(--paper); }
.btn-gold { background: var(--gold); color: var(--navy-deep); font-weight: 500; }
.btn-gold:hover { background: var(--gold-light); color: var(--navy-deep); }
.btn-small { padding: 13px 22px; font-size: 11px; letter-spacing: 0.2em; white-space: nowrap; }
.textlink { font-size: 12px; letter-spacing: 0.22em; padding: 8px 0; border-bottom: 1px solid var(--gold); text-transform: uppercase; color: var(--ink); display: inline-block; }
.on-dark .textlink, .textlink.light { color: var(--paper); }
.textlink:hover { color: var(--gold); }                              /* on the deep bands: 5.1:1 */
.paper .textlink:hover { color: var(--gold-text); }                  /* brand gold is 2.4:1 on paper (V16) */

/* mobile menu: <details>, so it works with no JS at all */
.nav-mobile { display: none; }
.nav-mobile > summary { list-style: none; cursor: pointer; font-size: 12px; letter-spacing: 0.22em; color: var(--ink);
  padding: 12px 0 12px 12px; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile .bars { display: flex; flex-direction: column; gap: 5px; }
.nav-mobile .bars span { width: 22px; height: 1px; background: var(--gold); }
.nav-mobile .when-open { display: none; }
.nav-mobile[open] .when-open { display: inline; }
.nav-mobile[open] .when-closed { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); padding: 32px 24px 40px;
  display: flex; flex-direction: column; gap: 4px; height: calc(100vh - 83px); height: calc(100dvh - 83px); overflow-y: auto; }
.menu-panel .nav-link { font-size: 22px; letter-spacing: 0.18em; color: var(--paper); padding: 18px 0; border-bottom: 1px solid var(--line); }
.menu-panel .btn { margin-top: 32px; padding: 18px; }
.menu-panel .nav-sublink { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist);
  padding: 12px 0 12px 20px; border-bottom: 1px solid rgba(196,160,82,0.18); }

/* Services popup (desktop) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item .caret { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold); transform: translateY(-3px) rotate(45deg); }
.subnav { position: absolute; top: 100%; left: -22px; padding-top: 14px; z-index: 30;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Escape dismisses it without moving focus or the pointer (WCAG 1.4.13, AX-A9; site.js adds the
   class and takes it off when the pointer or focus leaves). Same specificity as above: keep after. */
.has-sub.is-closed .subnav { opacity: 0; visibility: hidden; }
.subnav-panel { list-style: none; margin: 0; padding: 10px 0; min-width: 250px; background: var(--paper);
  border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 14px 30px rgba(49,52,54,0.14); }
.subnav-panel a { display: block; padding: 11px 22px; font-size: 14px; color: var(--ink); letter-spacing: 0.02em; }
.subnav-panel a:hover, .subnav-panel a:focus-visible { background: rgba(196,160,82,0.12); color: var(--navy); }
.subnav-panel .subnav-all a { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 13px; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
@media (prefers-reduced-motion: reduce) { .subnav { transition: none; transform: none; } }
.menu-panel .contact { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 15px; padding-top: 32px; }
.menu-panel .contact a { color: var(--mist); }

@media (max-width: 999px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}
/* the smallest phones (320px): brand and MENU only just fit, so tighten the gaps (no sideways scroll) */
@media (max-width: 359px) {
  .site-header .bar { gap: 8px; }
  .brand { gap: 10px; }
  .nav-mobile > summary { padding-left: 4px; gap: 8px; }
}

/* ---------- common section shapes ---------- */
.band { background: var(--band); color: var(--paper); }
.band-deep { background: var(--navy-deep); color: var(--paper); }
.paper { background: var(--paper); }
/* two paper sections in a row (a testimonial then the closing call to action) get a hairline */
.paper + .cta.paper { border-top: 1px solid var(--line); }
/* balance: a long eyebrow wraps as two even lines, never "... ·" then one lonely word (V17) */
.eyebrow { font-size: 12px; letter-spacing: 0.28em; color: var(--gold-on-grey); text-transform: uppercase; text-wrap: balance; }
.paper .eyebrow { color: var(--gold-text); }
/* a link inside an eyebrow (the category on a project page) keeps the eyebrow's accessible colour
   instead of the global brand gold (2.84:1 on Grey Friars), and gets an underline so it is not
   told apart by colour alone. Review 8 Oct 2026, AX-A3. */
.eyebrow a { color: inherit; border-bottom: 1px solid currentColor; }
.eyebrow a:hover { color: var(--paper); }
.paper .eyebrow a:hover { color: var(--ink); }
.rule-64 { width: 64px; height: 1px; background: var(--gold); }
.rule-48 { width: 48px; height: 1px; background: var(--gold); }
.vrule { width: 1px; height: 56px; background: var(--gold); }
.lead { margin: 0; font-size: 18px; line-height: 1.7; font-weight: 300; color: var(--mist); max-width: 560px; text-wrap: pretty; }
.paper .lead { color: var(--body); }

.page-head .wrap { padding-top: clamp(72px, 10vw, 130px); padding-bottom: clamp(72px, 10vw, 130px); display: flex; flex-direction: column; gap: 28px; }
.page-head h1 { margin: 0; font-weight: 300; font-size: clamp(32px, 4.6vw, 56px); letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; }
.page-head .role { font-size: 14px; letter-spacing: 0.24em; color: var(--gold-on-grey); text-transform: uppercase; }
.page-head .meta { font-size: 14px; letter-spacing: 0.14em; color: var(--mist); font-weight: 300; }
/* detail pages (a service, a journal post): a short head so the content and photos come sooner (V2) */
.page-head.compact .wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 48px); gap: 18px; }
.page-head.compact h1 { font-size: clamp(28px, 3.6vw, 44px); }
/* a long title (a project, a post) reads better in the display serif, sentence case (V6) */
.serif-title { font-family: var(--serif); font-weight: 500; text-transform: none; letter-spacing: 0.005em; line-height: 1.15; text-wrap: balance; }
.page-head h1.serif-title { font-weight: 500; font-size: clamp(34px, 5vw, 60px); letter-spacing: 0.005em; text-transform: none; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.section-head .titles { display: flex; flex-direction: column; gap: 20px; }
h2.h-section { margin: 0; font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.paper h2.h-section { color: var(--navy); }

/* ---------- image frames ---------- */
.frame { position: relative; overflow: hidden; background: #e9e8e3; }
.band .frame, .band-deep .frame { background: #6a6c6f; }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame.natural > img { position: static; height: auto; }
.img-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
  border: 1px dashed rgba(196,160,82,0.6); color: var(--meta); font-size: 13px; letter-spacing: 0.08em; }
.band .img-missing { color: var(--mist); }
.paper .img-missing, .frame .img-missing { color: var(--body-2); }
.band .frame .img-missing, .band-deep .frame .img-missing { color: var(--mist); }
.ph-tag { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: rgba(49,52,54,0.78); color: var(--paper);
  font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 8px; line-height: 1.3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
/* focal point chosen in the admin (V10): which part of the photo every crop keeps. A class, not an
   inline style, because the Content-Security-Policy forbids inline styles. Centre is the default. */
.frame > img.fp-t { object-position: 50% 15%; }   .frame > img.fp-b { object-position: 50% 85%; }
.frame > img.fp-l { object-position: 15% 50%; }   .frame > img.fp-r { object-position: 85% 50%; }
.frame > img.fp-tl { object-position: 15% 15%; }  .frame > img.fp-tr { object-position: 85% 15%; }
.frame > img.fp-bl { object-position: 15% 85%; }  .frame > img.fp-br { object-position: 85% 85%; }
/* a slow, slight zoom on a card's photo says "this opens" (V16). The reduced-motion rule at the
   foot of this file removes the transition. */
.project-card .frame > img, .feature .frame > img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.project-card:hover .frame > img, .feature:hover .frame > img,
.project-card:focus-visible .frame > img, .feature:focus-visible .frame > img { transform: scale(1.03); }

/* ---------- home ---------- */
/* Split hero. Stacked (phones, tablets) the PHOTO comes first, edge to edge, so the first screen
   holds both the picture and the words (V3). Side by side from 1000px, copy 7 : photo 5, which
   gives the headline room to keep its two authored lines (V7). */
.hero-split .wrap { padding-top: 0; padding-bottom: clamp(56px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 56px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 32px; }
.hero h1 { margin: 0; font-weight: 300; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.18; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-split h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: 0.08em; text-wrap: balance; }
.hero .lead { max-width: 440px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 8px; }
.hero-split .hero-image { order: -1; height: clamp(240px, 62vw, 460px); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
@media (min-width: 1000px) {
  .hero-split .wrap { padding-top: clamp(56px, 9vw, 120px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 88px); }
  .hero-split .hero-image { order: 0; height: clamp(420px, 44vw, 620px); margin: 0; }
}
.hero-full { position: relative; height: min(88vh, 860px); min-height: 520px; }
.hero-full .frame { position: absolute; inset: 0; }
.hero-full .shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(49,52,54,0.88) 0%, rgba(49,52,54,0.55) 55%, rgba(49,52,54,0.15) 100%); }
.hero-full .wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.hero-full h1 { font-size: clamp(34px, 5.6vw, 72px); }
/* On a phone the words run the full width, so a side-to-side shade would leave their ends over a
   bright photo: shade bottom-up instead and sit the words at the foot (V9). */
@media (max-width: 899px) {
  .hero-full .shade { background: linear-gradient(180deg, rgba(49,52,54,0.35) 0%, rgba(49,52,54,0.86) 62%, rgba(49,52,54,0.92) 100%); }
  .hero-full .wrap { justify-content: flex-end; padding-bottom: 48px; gap: 24px; }
}

.block { padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(80px, 11vw, 150px); display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 5vw, 64px); }
/* Four services (Project consultancy added Oct 2026): 4 across, 2x2, or 1 - never 3 + an orphan. */
.cards-3.cards-4 { grid-template-columns: 1fr; }
.type-route { margin: 0; line-height: 2.2; }                           /* "Or see my work by type" (C18) */
@media (min-width: 640px) { .cards-3.cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards-3.cards-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 40px); } }
.svc-card { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 1px solid var(--gold); color: inherit; }
.svc-card:hover { color: inherit; }
.svc-card .num { font-family: var(--serif); font-size: 22px; color: var(--gold-text); }
.svc-card h3, .svc-card h2 { margin: 0; font-weight: 400; font-size: 18px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.svc-card p { margin: 0; font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--body); text-wrap: pretty; }
.svc-card:hover h3, .svc-card:hover h2 { color: var(--gold-text); }          /* 4.7:1 (gold-deep was 3.0, V16) */
/* Cards side by side share their rows, so a title that wraps to two lines pushes every card's
   paragraph down together instead of leaving them ragged (V4). Subgrid: all current browsers. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .cards-3.cards-4 { row-gap: clamp(40px, 5vw, 64px); }
    .cards-3.cards-4 > .svc-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 20px; align-content: start; }
  }
}
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 640px) { .cards-3.cards-4 .svc-card h3 { min-height: 2.6em; } }
}
@media (min-width: 1100px) { .cards-3.cards-4 .svc-card h3 { font-size: 16px; letter-spacing: 0.14em; } }

/* auto-FILL: a card's width never depends on how many there are, so one featured project is not
   blown up to the full row (V1). One project gets a wide landscape frame instead; two sit side by
   side. The frame ratio is set here, by count, not in the template. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.feature-grid .frame { aspect-ratio: 4 / 5; }
.feature-grid.is-one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .feature-grid.is-one .frame { aspect-ratio: 16 / 9; max-height: 72vh; }
  .feature-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid.is-two .frame { aspect-ratio: 4 / 3; }
}
/* phones: two or more featured projects become a swipeable row, the next card peeking in, rather
   than ~1,500px of tall tiles (V20). Each card is a link, so the keyboard reaches every one. */
@media (max-width: 699px) {
  .feature-grid.is-many { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 8px; scrollbar-width: thin; }
  .feature-grid.is-many > .feature { flex: 0 0 82%; scroll-snap-align: start; }
}
.feature { display: flex; flex-direction: column; gap: 18px; color: var(--paper); }
.feature:hover { color: var(--gold-on-grey); }
.feature .caption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(196,160,82,0.5); }
.feature .t { font-family: var(--serif); font-size: 22px; line-height: 1.25; letter-spacing: 0.01em; font-weight: 500; }
.feature .c { font-size: 12px; letter-spacing: 0.16em; color: var(--gold-on-grey); text-transform: uppercase; white-space: nowrap; }

.cta .wrap { padding-top: clamp(88px, 12vw, 160px); padding-bottom: clamp(88px, 12vw, 160px); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.cta h2 { margin: 0; font-weight: 400; font-size: clamp(24px, 3vw, 36px); letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.cta.paper h2 { color: var(--navy); }
.cta p { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.75; font-weight: 300; color: var(--body); text-wrap: pretty; }
.cta.band p { color: var(--mist); }
.cta .btn { margin-top: 12px; }
.cta.band { border-top: 1px solid rgba(196,160,82,0.4); }

/* ---------- services ---------- */
.svc .wrap { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
.svc.paper { color: var(--accent); }
.svc .svc-image { height: clamp(320px, 42vw, 540px); }
/* the zig-zag only means something side by side; stacked, every section is photo then words (V8) */
@media (min-width: 1000px) {
  .svc .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc.flip .svc-image { order: 1; }
}
/* a single service's own page: no repeated number and title, so the copy can sit at the top */
.svc.solo .wrap { align-items: start; padding-top: clamp(48px, 6vw, 88px); }
.svc-copy { display: flex; flex-direction: column; gap: 24px; }
.svc-copy .num { font-family: var(--serif); font-size: 26px; color: var(--gold-on-grey); }
.svc.paper .svc-copy .num { color: var(--gold-text); }
.svc-copy h2 { margin: 0; font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.svc-copy h2 a { color: inherit; }
.svc-copy h2 a:hover { color: var(--gold); }                         /* deep band: 5.1:1 */
.svc.paper .svc-copy h2 a:hover { color: var(--gold-text); }         /* paper: 4.7:1 */
.svc-copy .long { margin: 0; font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--body); text-wrap: pretty; }
.svc-copy .long p { margin: 0 0 1em; }
.svc-copy .long p:last-child { margin-bottom: 0; }
.svc.band .long, .svc.band .sub .d { color: var(--mist); }
.sub { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 1px solid var(--gold); }
.sub .t { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.sub .d { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--body); }
.inclusions { list-style: none; margin: 8px 0 0; padding: 0; }
.inclusions li { padding: 14px 0; border-bottom: 1px solid rgba(196,160,82,0.4); font-size: 15px; letter-spacing: 0.04em; font-weight: 300; }
.svc-copy .more { align-self: flex-start; }

/* ---------- projects ---------- */
.projects-body { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(88px, 11vw, 150px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px 32px; border-bottom: 1px solid rgba(196,160,82,0.45); margin: 0; padding: 0; list-style: none; }
.filters a { display: inline-block; font-size: 12px; letter-spacing: 0.2em; padding: 14px 0; margin-bottom: -1px; color: var(--meta); border-bottom: 1px solid transparent; text-transform: uppercase; }
.filters a:hover { color: var(--navy); }
.filters a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
/* phones: one row that scrolls sideways, never two rows with the underline floating between (V12) */
@media (max-width: 699px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; gap: 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
    /* a scroller clips what overhangs it: draw the base line inside, under the links */
    border-bottom: none; box-shadow: inset 0 -1px 0 rgba(196,160,82,0.45); }
  .filters::-webkit-scrollbar { display: none; }
  .filters li { flex: none; }
  .filters a { margin-bottom: 0; }
  .filters a:focus-visible { outline-offset: -3px; }
}
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(40px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.project-card { display: flex; flex-direction: column; gap: 16px; color: inherit; }
.project-card[hidden] { display: none; }
.project-card .caption { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--gold); }
.project-card .t { font-family: var(--serif); font-size: 22px; line-height: 1.25; letter-spacing: 0.01em; font-weight: 500; color: var(--accent); }
.project-card .m { font-size: 13px; letter-spacing: 0.08em; color: var(--meta); font-weight: 300; }
.project-card:hover .t { color: var(--gold-text); }                  /* 4.7:1 on paper (V16) */
.empty { color: var(--meta); font-weight: 300; }

/* project detail */
.cover { padding-top: clamp(40px, 6vw, 72px); }
.cover .frame { aspect-ratio: 16 / 9; }
/* A project opens on its photograph, edge to edge, with a quiet title underneath (V2). Taller on
   a phone (4:5, not a 180px strip); on wider screens 16:9, never taller than most of the screen. */
.project-cover .frame { aspect-ratio: 4 / 5; max-height: 78vh; }
@media (min-width: 700px) { .project-cover .frame { aspect-ratio: 16 / 9; max-height: 68vh; } }
.project-head { padding-top: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; gap: 18px; }
.project-head h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 5vw, 60px); }
.project-head .meta { font-size: 14px; letter-spacing: 0.14em; color: var(--meta); font-weight: 300; }
.project-head + .story { padding-top: clamp(40px, 5vw, 72px); }
.story { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 6vw, 88px); align-items: start; }
.story .summary { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.45; color: var(--navy); font-weight: 500; }
.story-parts { display: flex; flex-direction: column; gap: 40px; }
.story-part { display: flex; flex-direction: column; gap: 14px; }
.story-part h2 { margin: 0; font-size: 13px; letter-spacing: 0.24em; font-weight: 400; color: var(--gold-text); text-transform: uppercase; }
.story-part p, .prose p { margin: 0 0 1em; font-size: 17px; line-height: 1.85; font-weight: 300; color: var(--body-2); text-wrap: pretty; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(196,160,82,0.4); font-size: 15px; font-weight: 300; }
.facts .k { font-size: 11px; letter-spacing: 0.22em; color: var(--gold-text); text-transform: uppercase; padding-top: 3px; }
.facts a { color: var(--ink); border-bottom: 1px solid var(--gold); }
/* Gallery: every photo at its own shape (portrait stairs and tall joinery are not cropped to 3:2),
   two across with a landscape photo spanning both now and then (render.gallery_layout), one across
   on a phone (V11, P3). Each photo is a link to its largest file, so it can be opened and zoomed
   with no JavaScript; site.js upgrades that to an in-page viewer. */
.gallery { padding-bottom: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure.wide { grid-column: 1 / -1; }
}
.gallery figure, .pair figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gallery .enlarge { display: block; position: relative; cursor: zoom-in; }
.gallery .enlarge:focus-visible { outline-color: var(--accent); }
figcaption { font-size: 13px; color: var(--meta); font-weight: 300; letter-spacing: 0.04em; }
.pairs { padding-bottom: clamp(64px, 8vw, 110px); display: flex; flex-direction: column; gap: 40px; }
.pairs h2.eyebrow { margin: 0; font-weight: 400; }
.pair { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.pair > figcaption { grid-column: 1 / -1; }
.pair .label { font-size: 11px; letter-spacing: 0.22em; color: var(--gold-text); text-transform: uppercase; }

/* the in-page photo viewer (site.js): a native <dialog>, so focus stays inside and Escape closes */
.viewer { border: none; padding: 0; margin: auto; width: 100vw; max-width: none; max-height: none;
  height: 100vh; height: 100dvh; background: rgba(31,33,35,0.97); color: var(--paper); }
.viewer::backdrop { background: rgba(31,33,35,0.9); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer .v-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px var(--gutter); }
.viewer .v-count { font-size: 12px; letter-spacing: 0.2em; color: var(--mist); }
.viewer button { background: transparent; color: var(--paper); border: 1px solid rgba(196,160,82,0.6); min-height: 44px; min-width: 44px;
  padding: 10px 16px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.viewer button:hover { background: rgba(196,160,82,0.18); }
.viewer :focus-visible { outline-color: var(--gold-on-grey); }
.viewer .v-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.viewer .v-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.viewer .v-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--gutter) 20px; }
.viewer .v-cap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mist); font-weight: 300; flex: 1; text-align: center; }
.quote .wrap { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; max-width: 880px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.quote .who { font-size: 12px; letter-spacing: 0.24em; color: var(--gold-on-grey); text-transform: uppercase; }
.paper.quote .who { color: var(--gold-text); }
.quotes .wrap { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.quotes .h-section { margin: 0; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; width: 100%; margin-top: 16px; text-align: left; }
.quote-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px); }
.quote-card { margin: 0; padding: 32px 28px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold);
  display: flex; flex-direction: column; gap: 22px; }
.quote-card blockquote { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 23px); line-height: 1.45; font-weight: 500; color: var(--navy); }
.quote-card figcaption { margin-top: auto; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
.quote-card figcaption a { display: block; margin-top: 10px; font-size: 14px; letter-spacing: 0.04em; text-transform: none; color: var(--navy); border-bottom: 1px solid var(--gold); align-self: flex-start; width: fit-content; }
.next-project { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid rgba(196,160,82,0.45); }

/* ---------- about ---------- */
.about-body { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(48px, 7vw, 104px); align-items: start; }
.about-copy { display: flex; flex-direction: column; gap: 24px; }
.about-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 38px); letter-spacing: 0.005em; line-height: 1.25; color: var(--accent); text-wrap: balance; }
.about-copy p { margin: 0; font-size: 17px; line-height: 1.85; font-weight: 300; color: var(--body-2); text-wrap: pretty; }
.credentials { list-style: none; margin: 8px 0 0; padding: 0; }
.credentials li { padding: 14px 0; border-bottom: 1px solid rgba(196,160,82,0.4); font-size: 15px; font-weight: 300; }

/* ---------- contact ---------- */
.contact-body { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(88px, 11vw, 150px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 104px); align-items: start; }
@media (min-width: 900px) { .contact-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* stacked, the contact card comes after the whole form: a one-line "call me" above it (V15) */
.quick-contact { grid-column: 1 / -1; margin: 0 0 calc(-1 * clamp(24px, 4vw, 56px)); font-size: 16px; line-height: 1.6; color: var(--body); font-weight: 300; }
.quick-contact a { color: var(--ink); border-bottom: 1px solid var(--gold); padding: 6px 0; }
@media (min-width: 900px) { .quick-contact { display: none; } }
.enquiry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 36px 32px; }
.enquiry label { display: flex; flex-direction: column; gap: 10px; }
.enquiry .full { grid-column: 1 / -1; }
.enquiry .lbl { font-size: 11px; letter-spacing: 0.22em; color: var(--gold-text); text-transform: uppercase; }
.enquiry input, .enquiry select, .enquiry textarea { border: none; border-bottom: 1px solid var(--field-line); background: transparent; padding: 10px 0;
  font-size: 17px; color: var(--ink); border-radius: 0; width: 100%; }
.enquiry select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #c4a052 50%), linear-gradient(135deg, #c4a052 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.enquiry textarea { line-height: 1.6; resize: vertical; border: 1px solid var(--field-line); padding: 12px 14px; }   /* a box, so 5 rows read as room to write (V14) */
/* focus: a clear navy outline (13:1 on paper) plus a thicker underline; never outline:none */
.enquiry input:focus-visible, .enquiry select:focus-visible, .enquiry textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { border-bottom: 2px solid var(--navy); margin-bottom: -1px; }
.enquiry .err { font-size: 13px; color: #9b2c2c; }
.enquiry .hint { font-size: 13px; color: var(--meta); font-weight: 300; }
.enquiry input[type="file"] { border-bottom: none; font-size: 15px; color: var(--body); }
/* the file button in the house style, not the system's grey bevel (V14); 44px tall to tap */
.enquiry input[type="file"]::file-selector-button { font: inherit; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--gold); padding: 12px 18px; margin-right: 14px; cursor: pointer; min-height: 44px; }
.enquiry input[type="file"]::file-selector-button:hover { background: rgba(196,160,82,0.12); }
@media (max-width: 699px) { .enquiry button[type="submit"] { width: 100%; } }
.enquiry [aria-invalid="true"] { border-bottom-color: #9b2c2c; }
.enquiry .note { font-size: 13px; line-height: 1.6; color: var(--meta); font-weight: 300; margin: 0; }
.enquiry .note a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.form-alert { grid-column: 1 / -1; padding: 16px 20px; border-left: 2px solid #9b2c2c; background: #f6eeee; color: #5c1d1d; font-size: 15px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-card { background: var(--navy); color: var(--paper); padding: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 28px; }
.contact-card .name { font-size: 17px; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-card .role { font-size: 12px; letter-spacing: 0.22em; color: var(--gold-on-grey); text-transform: uppercase; }
.contact-card .hr { width: 100%; height: 1px; background: rgba(196,160,82,0.5); }
.contact-card .item { display: flex; flex-direction: column; gap: 6px; }
.contact-card .k { font-size: 11px; letter-spacing: 0.22em; color: var(--gold-on-grey); text-transform: uppercase; }
.contact-card .v, .contact-card .v a { color: var(--paper); font-size: 18px; font-weight: 300; word-break: break-word; }
.follow { display: flex; gap: 24px; flex-wrap: wrap; }
.follow a, .follow span { color: var(--paper); font-size: 15px; letter-spacing: 0.12em; padding: 6px 0; border-bottom: 1px solid var(--gold); text-transform: uppercase; }
.follow .ph, .foot-social .ph { font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--mist); }
.thanks { display: flex; flex-direction: column; gap: 24px; padding-top: 28px; border-top: 1px solid var(--gold); }
.thanks h2 { margin: 0; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: 0.14em; color: var(--navy); text-transform: uppercase; }
.thanks p { margin: 0; font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--body-2); }

/* ---------- journal + prose ---------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.post-card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
.post-card .d { font-size: 12px; letter-spacing: 0.16em; color: var(--gold-text); text-transform: uppercase; }
.post-card .t { font-family: var(--serif); font-size: 24px; letter-spacing: 0.01em; font-weight: 500; color: var(--accent); line-height: 1.25; }
.post-card p { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--body); }
.prose-wrap { padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(80px, 10vw, 130px); }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-weight: 400; font-size: 22px; letter-spacing: 0.12em; color: var(--navy); text-transform: uppercase; margin: 2em 0 0.8em; line-height: 1.4; }
.prose h3 { font-weight: 400; font-size: 16px; letter-spacing: 0.16em; color: var(--gold-text); text-transform: uppercase; margin: 1.8em 0 0.6em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.2em; font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--body-2); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.prose blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 1px solid var(--gold); font-family: var(--serif); font-size: 24px; line-height: 1.5; color: var(--navy); }
.prose .updated { font-size: 13px; letter-spacing: 0.08em; color: var(--meta); }
.prose .inline-photo { margin: 2em 0; position: relative; }
.prose .inline-photo img { width: 100%; height: auto; display: block; }
.prose .inline-photo figcaption { font-size: 13px; color: var(--meta); margin-top: 10px; }

/* ---------- content and conversion (review 8 Oct 2026, batch 4) ---------- */
/* a desktop menu of six items plus the button: tighter gaps until there is room (How I work, C2) */
.nav-desktop .nav-link { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1239px) { .nav-desktop { gap: 20px; } .nav-desktop .btn-small { padding: 13px 16px; } }
.box-title { margin: 0; font-weight: 400; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
.band .box-title { color: var(--gold-on-grey); }
.info-box { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.info-box p, .lead-paras p, .fee p, .step-copy p, .faq .a p, .next-steps li, .meet-copy p { margin: 0; font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--body-2); text-wrap: pretty; }
.info-box p + p, .lead-paras p + p, .fee p + p, .step-copy p + p, .faq .a p + p, .meet-copy p + p { margin-top: 0.8em; }
.info-box .textlink { align-self: flex-start; margin-top: 4px; }
.svc-more .wrap { padding-bottom: clamp(64px, 8vw, 110px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.svc-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.svc-faqs { display: flex; flex-direction: column; gap: 24px; max-width: 820px; }
.svc-faqs .textlink { align-self: flex-start; }
/* questions and answers: <details>, open with no JavaScript (C9, I4) */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(196,160,82,0.45); }
.faq { border-bottom: 1px solid rgba(196,160,82,0.45); }
.faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 18px 0; min-height: 44px; font-family: var(--serif); font-size: clamp(20px, 2vw, 23px); line-height: 1.35; font-weight: 500; color: var(--accent); }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 22px; font-weight: 300; color: var(--gold-text); }
.faq[open] > summary::after { content: "\2212"; }
.faq .a { padding: 0 0 22px; max-width: 70ch; }
.faq-page { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.faq-page .updated { margin: 0; font-size: 13px; line-height: 1.6; color: var(--meta); }
/* How I work: a numbered timeline that reads down a phone screen (C2) */
.process-body { gap: clamp(48px, 6vw, 72px); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 860px; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid rgba(196,160,82,0.45); }
.step:last-child { border-bottom: 1px solid rgba(196,160,82,0.45); }
.step .num { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--gold-text); }
.step-copy { display: flex; flex-direction: column; gap: 10px; }
.step-title { margin: 0; font-weight: 400; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.step-time { font-size: 13px; letter-spacing: 0.08em; color: var(--meta); }
.info-box.wide { max-width: 860px; }
.lead-paras { max-width: 720px; }
.band .lead-paras p, .band .fee p { color: var(--mist); }
.fee-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }  /* one full-width stack (Tank, 9 Oct 2026): columns squashed on phones and left the 4th alone on desktop */
.fee { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(196,160,82,0.5); }
.fee h3 { margin: 0; font-weight: 400; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; }
.fee h3 a { color: var(--paper); border-bottom: 1px solid var(--gold); }
.fee h3 a:hover { color: var(--gold-on-grey); }
.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.area-list li { padding: 10px 18px; border: 1px solid var(--gold); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.faq-teaser .wrap { padding-bottom: clamp(56px, 7vw, 96px); }
/* home: Meet Monica and the process strip (C15) */
.paper + .paper.meet { border-top: 1px solid var(--line); }
.meet-body { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 800px) { .meet-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.meet-photo { width: 100%; max-width: min(420px, 62vw); }           /* a phone sees the words on the first screen too */
.meet-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.credentials.compact { margin: 0; width: 100%; }
.credentials.compact li { padding: 10px 0; font-size: 14px; }
.credentials .ph { color: var(--meta); font-size: 13px; }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 24px 16px; }   /* two across on a phone */
.strip li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(196,160,82,0.5); }
.strip .num { font-family: var(--serif); font-size: 22px; color: var(--gold-on-grey); }
.strip .t { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; color: var(--paper); }
/* contact: what happens next, then the short optional brief (C5, C6, I5) */
.next-steps { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); background: #fff;
  border: 1px solid var(--line); border-left: 2px solid var(--gold); }
.next-steps ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.next-steps .textlink { align-self: flex-start; }
.enquiry fieldset.brief { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.enquiry fieldset.brief > legend { padding: 0 0 22px; }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 30px 32px; }
.thanks-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.thanks .while { font-size: 14px; letter-spacing: 0.08em; color: var(--meta); }
.thanks a:not(.textlink) { color: var(--ink); border-bottom: 1px solid var(--gold); }
.contact-card .v.small { font-size: 15px; line-height: 1.6; }
/* about: credentials beside the portrait (C4) */
.about-side { display: flex; flex-direction: column; gap: 32px; }
.cred-block { display: flex; flex-direction: column; gap: 6px; }
.about-copy p.areas-line { font-size: 15px; color: var(--meta); }
/* testimonials: what kind of project, and where (C19) */
.t-context { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.2em; color: var(--meta); }
.quote .t-context { color: var(--mist); }
.paper.quote .t-context { color: var(--meta); }
.review-ask { padding-bottom: clamp(56px, 8vw, 100px); }
.foot-col .foot-areas, .foot-col .foot-cred { font-size: 13px; line-height: 1.6; max-width: 300px; }

/* ---------- footer ---------- */
.site-footer { background: var(--band); color: var(--paper); border-top: 1px solid rgba(196,160,82,0.4); }   /* a hairline where a deep band meets it */
.site-footer .wrap { padding-top: clamp(64px, 8vw, 96px); padding-bottom: 32px; display: flex; flex-direction: column; gap: 56px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.foot-brand { display: flex; flex-direction: column; gap: 24px; }
.site-footer .brand { color: var(--paper); }
.site-footer .wordmark .w2 { color: var(--gold); }
.foot-tag { font-size: 12px; letter-spacing: 0.24em; color: var(--mist); line-height: 1.9; text-transform: uppercase; }
.rule-40 { width: 40px; height: 1px; background: var(--gold); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 56px; }
.foot-col { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 300; }
.foot-col > a, .foot-col > span:not(.k) { padding: 6px 0; }          /* taller taps on a phone (V17) */
.foot-col .k { font-size: 11px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; font-weight: 400; margin-bottom: 6px; }
.foot-col a, .foot-col span { color: var(--mist); }
.foot-col a:hover { color: var(--paper); }
.foot-col .nl { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.foot-social { display: flex; gap: 20px; margin-top: 4px; }
.foot-social a, .foot-social > span { color: var(--paper); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; padding: 10px 0; }
.foot-bottom { display: flex; flex-direction: column; gap: 18px; }
.foot-bottom .hr { height: 1px; background: var(--gold); }
.foot-bottom .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 11px; letter-spacing: 0.22em; color: var(--foot); text-transform: uppercase; }
.foot-bottom .row span { text-wrap: balance; }
.foot-bottom .row a { color: var(--foot); }
.foot-bottom .row a:hover { color: var(--paper); }
/* temporary (SHOW_ADMIN_BUTTON): the way into the admin, home page footer only */
.foot-bottom .row a.admin-btn { display: inline-block; margin-left: 10px; padding: 6px 12px; border: 1px solid var(--gold); color: var(--gold-light); letter-spacing: 0.2em; }
.foot-bottom .row a.admin-btn:hover { background: var(--gold); color: var(--navy-deep); }

/* ---------- preview banner (admin preview only) ---------- */
.preview-banner { background: #7a2e2e; color: #fff; text-align: center; font-size: 12px; letter-spacing: 0.2em; padding: 8px 16px; text-transform: uppercase;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.preview-banner a { color: #fff; letter-spacing: 0.05em; text-transform: none; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
@media (max-width: 600px) { .preview-banner { padding: 4px 16px; row-gap: 0; } .preview-banner span { order: -1; flex-basis: 100%; padding-top: 6px; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---- ideas batch (review 8 Oct 2026) ---------------------------------------------------------- */
/* /book/ with her booking link set (I8) */
.book-page { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; gap: 20px; }
.book-page p { margin: 0; font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--body-2); }
/* what to bring, on the thank-you page (I8) */
.thanks .bring { margin: -8px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.thanks .bring li { font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--body-2); }
/* the pre-wire / pre-pipe checklist (I9): a tick box per item, on screen and on paper */
.guide .wrap { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.guide-actions { margin: 0; }
.guide-actions [hidden] { display: none; }
.guide-section h2 { margin: 0 0 14px; font-weight: 400; font-size: clamp(18px, 2vw, 22px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checklist li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--body-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border: 1.5px solid var(--navy); background: #fff; }
.guide-outro p { margin: 0; font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--body-2); }
.guide-outro p + p { margin-top: 0.8em; }
.guide-more { margin: 0; }
.print-only { display: none; }
/* her social links on the About page (I13) */
.follow-line { margin: 0; font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--body-2); }
.follow-line a { color: var(--ink); border-bottom: 1px solid var(--gold); }

/* Printing (I9, and any page): the words only, black on white, no menu, footer or buttons. */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; display: block; min-height: 0; }
  .site-header, .site-footer, .skip, .preview-banner, .cta, .guide-actions, .guide-more,
  .nav-mobile, .btn, .hero-actions { display: none !important; }
  .band, .page-head { background: #fff !important; color: #000 !important; }
  .page-head h1, .page-head .eyebrow, .page-head .lead { color: #000 !important; }
  .page-head { padding: 0 0 6mm; }
  .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .guide .wrap { padding-top: 0; padding-bottom: 0; gap: 7mm; }
  .guide-section { break-inside: avoid-page; }
  .guide-section h2 { color: #000; font-size: 13pt; break-after: avoid; }
  .checklist, .checklist li { border-color: #999; }
  .checklist li { color: #000; font-size: 11pt; padding: 2.2mm 0 2.2mm 8mm; break-inside: avoid; }
  .checklist li::before { top: 2.6mm; width: 4mm; height: 4mm; border: 0.3mm solid #000; }
  .guide-outro p { color: #000; font-size: 10.5pt; }
  .print-only { display: block; margin: 0; font-size: 9.5pt; color: #000; border-top: 0.3mm solid #999; padding-top: 3mm; }
  a { color: #000; }
}