/* Hearing Construction — editorial refresh: warm paper, charcoal ink, the brand's muted blue-gray. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback faces sized to match the web fonts, so text does not reflow when they load. Fraunces gets
   narrower as it gets larger (its optical size axis), so one size cannot match both running text and
   headings: measured against Georgia it is about 105% wide at text sizes, 99% at heading sizes and 81%
   at the largest display sizes. Each range has its own fallback face. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 104.5%; }
@font-face { font-family: "Fraunces Display Fallback"; src: local("Georgia"); size-adjust: 99%; }
@font-face { font-family: "Fraunces Large Fallback"; src: local("Georgia"); size-adjust: 82%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 102.3%; }

:root {
  --paper: #f6f2ea;
  --paper-deep: #ebe5d9;
  --ink: #1d2227;
  --slate-800: #28313a;
  --slate-600: #4b5967;   /* text-safe blue-gray: 6.5:1 on paper */
  --brand: #8d9ba9;       /* legacy brand blue-gray: rules and large display accents only */
  --brand-display: #788795; /* brand tone darkened to 3:1+ for very large display type on paper */
  --brand-soft: #c3ccd5;  /* on dark bands */
  --line: rgba(29, 34, 39, 0.18);
  --field-line: #6a7681;
  --error: #9a2318;
  --focus: #1d5c8f;
  --serif: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-display: "Fraunces", "Fraunces Display Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-large: "Fraunces", "Fraunces Large Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::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);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Wide screens set the largest headings at display sizes. */
@media (min-width: 62rem) { h1, .pull { font-family: var(--serif-large); } }
h1, h2, h3 { font-family: var(--serif-display); font-weight: 380; font-optical-sizing: auto; letter-spacing: -0.02em; text-wrap: balance; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.shell { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--slate-600); }
.eyebrow { color: var(--slate-600); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow-quiet { font-weight: 500; }
.numeral { color: var(--slate-600); font-family: var(--serif); font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.04em; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 1rem; }

/* Buttons and links */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.85rem 1.75rem;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 0; color: var(--paper);
  font: 500 1rem/1.2 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.button:hover { background: var(--slate-600); border-color: var(--slate-600); }
.button[disabled] { background: #6d7882; border-color: #6d7882; cursor: not-allowed; }
.button--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.button--light:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem; padding-block: 0.35rem;
  border-bottom: 1px solid currentColor; font-weight: 500; text-decoration: none;
}
.arrow { flex: none; transition: transform 0.4s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* Photo frames: every crop is a deliberate shape with a chosen focal point. */
.frame { position: relative; overflow: hidden; background: var(--paper-deep); }
/* Photo boxes far below the screen are not rendered until the visitor nears them, so their lazy images do
   not start downloading at page open and compete with the first photo. Every such box gets its size from
   the layout (an aspect ratio or a fixed grid row), never from the image, so nothing moves when it is
   rendered. The opening photo is left out: it is always on screen. Browsers without this property behave
   as before. */
.frame:not(.frame--lead) { content-visibility: auto; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame--lead { aspect-ratio: 4 / 5; }
.frame--lead img { object-position: 46% 72%; }
.frame--inset { aspect-ratio: 4 / 3; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--square { aspect-ratio: 1; }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--cinema { aspect-ratio: 3 / 2; }
.frame--cinema img { object-position: 50% 70%; }
/* Homepage views: any number of featured photos (0-12). Phones repeat one full-width photo then two halves. */
.frame--view { aspect-ratio: 4 / 5; }
.views-grid > li:nth-child(3n + 1) .frame--view, .views-grid > li:nth-child(3n + 2):last-child .frame--view { aspect-ratio: 3 / 2; }
@media (min-width: 60rem) {
  .frame--lead { aspect-ratio: auto; height: min(46rem, 82vh); min-height: 30rem; }
  .frame--cinema { aspect-ratio: 21 / 9; }
  /* Wide screens: a 7+5 opening row, then rows of three with the middle photo dropped; leftovers widen to fill the row. */
  .views-grid > li .frame--view, .views-grid > li:nth-child(3n + 1) .frame--view, .views-grid > li:nth-child(3n + 2):last-child .frame--view { aspect-ratio: 4 / 5; }
  .views-grid > li:nth-child(1) .frame--view { aspect-ratio: 7 / 5; }
  .views-grid > li:nth-child(2) .frame--view { aspect-ratio: 1; }
  .views-grid > li:nth-child(3n):last-child .frame--view, .views-grid > li:nth-child(3n):nth-last-child(2) .frame--view,
  .views-grid > li:nth-child(3n + 1):nth-child(n + 4):last-child .frame--view { aspect-ratio: 3 / 2; }
  .views-grid > li:only-child .frame--view { aspect-ratio: 21 / 9; }
}

/* Keep the approved wide homepage cover intact, including the house and lake. */
.frame--lead.frame--home-cover { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
.frame--home-cover img { object-position: center; }

/* Header */
.site-header { position: relative; z-index: 30; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1.25rem; }
.wordmark { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; text-decoration: none; }
.wordmark picture { flex: none; }
.wordmark img { width: auto; height: 2.1rem; }
.wordmark-text { font-family: var(--serif); font-size: clamp(1.0625rem, 4.9vw, 1.3125rem); font-weight: 420; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.wordmark-text span { color: var(--slate-600); }
.nav-toggle {
  position: relative; z-index: 2; display: none; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0 0.5rem 0.75rem;
  background: none; border: 0; color: var(--ink); font: 600 0.8125rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle-bars { position: relative; width: 1.75rem; height: 0.6rem; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(0.26rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-0.26rem) rotate(-45deg); }
.primary-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2.25rem; }
.primary-nav a { display: inline-block; padding-block: 0.6rem; color: var(--slate-600); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color 0.3s var(--ease); }
.primary-nav a:hover { color: var(--ink); }
.primary-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.5em; }

@media (min-width: 62rem) {
  .primary-nav .nav-contact a { padding: 0.6rem 1.1rem; border: 1px solid var(--ink); color: var(--ink); }
  .primary-nav .nav-contact a:hover, .primary-nav .nav-contact a[aria-current="page"] { background: var(--ink); color: var(--paper); text-decoration: none; }
}
@media (max-width: 61.99rem) {
  .no-js .header-inner { flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  /* Small screens: the menu is a full-screen page of large serif links. */
  .js .primary-nav {
    position: fixed; inset: 0; z-index: 1; display: none; overflow-y: auto;
    padding: 6.5rem var(--gutter) 2.5rem; background: var(--paper);
  }
  .js .primary-nav.is-open { display: block; }
  .js .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .primary-nav li { border-top: 1px solid var(--line); }
  .js .primary-nav li:last-child { border-bottom: 1px solid var(--line); }
  .js .primary-nav a { display: block; padding-block: 1.1rem; color: var(--ink); font-family: var(--serif-display); font-size: clamp(1.75rem, 7.5vw, 2.5rem); font-weight: 380; letter-spacing: -0.02em; line-height: 1.1; }
  .js .primary-nav a[aria-current="page"] { color: var(--slate-600); text-decoration: none; }
  .js .primary-nav a[aria-current="page"]::after { content: " —"; }
  .nav-open { overflow: hidden; }
}

/* Home: opening */
.opening { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); }
.opening-copy .eyebrow { margin-bottom: 1.5rem; }
.opening h1 { font-size: clamp(2.9rem, 12.5vw, 4.25rem); font-weight: 340; line-height: 0.98; letter-spacing: -0.03em; }
.opening-intro { margin-top: 1.5rem; max-width: 26ch; color: var(--slate-800); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; }
.opening-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.opening-photos { position: relative; margin-top: 3rem; margin-inline: calc(var(--gutter) * -1); padding-bottom: 14vw; }
.opening-photos .frame--inset { position: absolute; left: var(--gutter); bottom: 0; width: 52%; border: 0.5rem solid var(--paper); border-left: 0; border-bottom: 0; }
@media (min-width: 60rem) {
  .opening-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
  .opening-copy { grid-column: 1 / span 6; padding-bottom: 5.5rem; padding-right: 1rem; }
  .opening h1 { font-size: clamp(3.5rem, 6.7vw, 6.75rem); }
  .opening-photos { grid-column: 7 / -1; margin: 0; padding-bottom: 5.5rem; }
  .opening-photos .frame--inset { left: -16%; width: 44%; border: 0.75rem solid var(--paper); border-bottom: 0; }
}

/* Home: approach */
.approach { padding-bottom: var(--section); }
.approach-copy h2, .section-head h2, .enquire h2, .process h2, .offer h2, .consulting h2, .reach h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; }
.approach-photo { margin-bottom: 3rem; }
.numbered { margin-top: 2.25rem; border-bottom: 1px solid var(--line); }
.numbered li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding-block: 1.4rem; border-top: 1px solid var(--line); }
.numbered .numeral { grid-row: span 2; padding-top: 0.3rem; }
.numbered h3 { font-size: 1.5rem; line-height: 1.2; }
.numbered p { margin-top: 0.4rem; color: var(--slate-800); }
.approach-about { margin-block: 2.5rem 1.5rem; max-width: 60ch; color: var(--slate-800); }
@media (min-width: 60rem) {
  .approach-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .approach-photo { grid-column: 1 / span 5; margin: 0; }
  .approach-copy { grid-column: 7 / -1; padding-top: 3rem; }
}

/* Home: views from the portfolio */
.views { padding-bottom: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--ink); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.views-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem var(--gap); }
.views-grid > li:nth-child(3n + 1), .views-grid > li:nth-child(3n + 2):last-child { grid-column: span 2; }
.views--link-only .section-head { margin-bottom: 0; justify-content: flex-start; }
.view a { display: block; text-decoration: none; }
.view .frame img { transition: transform 0.9s var(--ease); }
.view a:hover .frame img { transform: scale(1.03); }
.view-label { display: block; margin-top: 0.75rem; color: var(--slate-600); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 60rem) {
  .views-grid { grid-template-columns: repeat(12, 1fr); row-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
  .views-grid > li:nth-child(1) { grid-column: 1 / span 7; }
  .views-grid > li:nth-child(2) { grid-column: 9 / -1; margin-top: 5.5rem; }
  .views-grid > li:nth-child(3n) { grid-column: 1 / span 4; }
  .views-grid > li:nth-child(3n + 1):nth-child(n + 4) { grid-column: 5 / span 4; margin-top: 5.5rem; }
  .views-grid > li:nth-child(3n + 2):nth-child(n + 5) { grid-column: 9 / -1; }
  .views-grid > li:nth-child(3n):last-child { grid-column: 4 / span 6; }
  .views-grid > li:nth-child(3n):nth-last-child(2) { grid-column: 1 / span 6; }
  .views-grid > li:nth-child(3n + 1):nth-child(n + 4):last-child { grid-column: 7 / -1; }
  .views-grid > li:only-child { grid-column: 1 / -1; }
}

/* Home: a client's voice (dark band) */
.voice, .closing-cta { background: var(--slate-800); color: var(--paper); }
.voice { padding-block: var(--section); }
.voice :focus-visible, .closing-cta :focus-visible { outline-color: #fff; }
.voice .eyebrow { color: var(--brand-soft); margin-bottom: 2rem; }
.voice blockquote { font-family: var(--serif-display); font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 340; line-height: 1.22; letter-spacing: -0.015em; text-wrap: pretty; }
.voice figcaption { margin-top: 2rem; color: var(--brand-soft); font-size: 0.9375rem; font-weight: 500; }
.voice .link-arrow { margin-top: 2.5rem; }
@media (min-width: 60rem) {
  .voice-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .voice .eyebrow { grid-column: 1 / span 2; margin: 0.9rem 0 0; }
  .voice figure { grid-column: 3 / span 9; }
  .voice .link-arrow { grid-column: 3 / span 6; justify-self: start; }
}

/* Inquiry: home and contact */
.enquire { padding-block: var(--section); background: var(--paper-deep); }
.enquire-intro { margin-top: 1rem; color: var(--slate-800); font-family: var(--serif); font-size: 1.375rem; }
.direct-contact { margin-top: 2.5rem; border-bottom: 1px solid var(--line); }
.direct-contact li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.direct-contact span { color: var(--slate-600); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.direct-contact a { font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-variant-numeric: lining-nums; letter-spacing: -0.01em; text-decoration: none; overflow-wrap: anywhere; }
.direct-contact a:hover { text-decoration: underline; }
.enquire-form { margin-top: 3rem; }
@media (min-width: 60rem) {
  .enquire-grid, .reach-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .enquire-copy, .reach-direct { grid-column: 1 / span 5; }
  .enquire-form, .reach-form { grid-column: 7 / -1; margin-top: 0; }
}
.form-required-note { margin-top: 1.25rem; color: var(--slate-600); font-size: 0.875rem; }
.field { margin-top: 1.4rem; }
.field label { display: block; margin-bottom: 0.25rem; color: var(--slate-800); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.field input, .field textarea {
  display: block; width: 100%; padding: 0.65rem 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0;
  color: var(--ink); font: 400 1.125rem/1.5 var(--sans);
}
.field textarea { resize: vertical; min-height: 8.5rem; padding: 0.75rem; border: 1px solid var(--field-line); margin-top: 0.5rem; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 1px 0 var(--error); }
.field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--error); }
.field-error { margin-top: 0.4rem; color: var(--error); font-size: 0.9375rem; font-weight: 600; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form .button { margin-top: 2rem; min-width: 11rem; }
.form-status:not(:empty), .form-notice { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--paper); border-left: 3px solid var(--slate-600); }
.reach .form-status:not(:empty), .reach .form-notice { background: var(--paper-deep); }
.form-status[data-state="error"], .form-notice[data-state="error"] { border-left-color: var(--error); }
.form-status strong { display: block; }

/* Interior masthead */
.masthead { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.masthead h1 { margin-top: 1.25rem; font-size: clamp(3rem, 11vw, 8.5rem); font-weight: 320; line-height: 0.94; letter-spacing: -0.035em; }
.masthead .standfirst { margin-top: 2rem; max-width: 30ch; color: var(--slate-800); font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.masthead--about h1 { font-size: clamp(2.75rem, 9vw, 7rem); }
@media (min-width: 60rem) {
  .masthead-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
  .masthead-grid > * { grid-column: 1 / -1; }
  .masthead h1 { grid-column: 1 / span 8; }
  .masthead .standfirst { grid-column: 9 / -1; margin: 0 0 0.9rem; }
  .masthead--about h1 { grid-column: 1 / span 7; }
  .masthead--about .standfirst { grid-column: 8 / -1; }
}

/* About */
.about-lead-photo .frame { margin-inline: calc(var(--gutter) * -1); }
.story { padding-block: var(--section); }
.prose > * + * { margin-top: 1.4rem; }
.prose { max-width: 62ch; color: var(--slate-800); }
.prose-first { color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.625rem); line-height: 1.4; letter-spacing: -0.01em; }
.story-photo { margin-top: 2.5rem; }
.pull { padding-block: clamp(3.5rem, 9vw, 8rem); color: var(--brand-display); font-family: var(--serif-display); font-size: clamp(2.6rem, 9.5vw, 8rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.note { padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
@media (min-width: 60rem) {
  .about-lead-photo .frame { margin-inline: 16.66% 0; }
  .story-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .story-grid .story-copy { grid-column: 1 / span 6; }
  .story-grid .story-photo { grid-column: 8 / -1; margin: 0; }
  .story-grid--flip .story-photo { grid-column: 1 / span 4; }
  .story-grid--flip .story-copy { grid-column: 6 / -1; }
}
@media (max-width: 59.99rem) { .story-grid--flip { display: flex; flex-direction: column-reverse; } .story-grid--flip .story-photo { max-width: 22rem; } }

/* Our Work: every subject of work on one page, each a row of its photos, one row under another */
/* This page is its photos, so its heading and the sentence beside it are kept small: on an ordinary laptop
   screen the first rows are in view without scrolling. Other pages keep the large masthead. */
.masthead--work { padding-block: clamp(1rem, 2vw, 1.5rem) 0.75rem; }
.masthead--work h1 { margin-top: 0; font-family: var(--serif-display); font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1; }
.masthead--work .standfirst { margin-top: 0.6rem; max-width: 44ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.filter {
  min-height: 2.75rem; padding: 0.5rem 0.95rem; background: transparent; border: 1px solid var(--field-line); border-radius: 0;
  color: var(--ink); font: 500 0.9375rem var(--sans); cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.filter:hover { background: var(--paper-deep); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.work { padding-bottom: var(--section); }
/* Every row is open, with or without scripts, and they sit close: the name of the next subject is on
   screen under the row being looked at, so scrolling down the page finds each of them. A row's name is a
   small heading. A project's row also has its one sentence and, at the far side, the link to its page. */
.work-row + .work-row { margin-top: clamp(1.75rem, 4vw, 3rem); }
.work-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 1.5rem; }
.work-row-head h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; }
.work-row-head p { color: var(--slate-800); }
.work-row-head .work-row-link { margin-left: auto; }

/* The photo browser is part of the page, not a panel on it. Its frame has no ground, border or shadow of
   its own: the page's paper shows through, and the frame runs the full width of the screen, so the photos
   beside the one at the front carry on past the text column and are cut only by the edge of the screen.
   The frame still clips (that is what stops the page scrolling sideways) and the stage inside it keeps its
   depth. The caption and the controls stay in the text column. The photo written into the page sets the
   frame's height and the card's width, so nothing moves when the carousel takes over.
   --cf-edge is how far the text column is from the left of the screen: the gutter, plus the margin either
   side of the 88rem page on a wider screen. */
.coverflow { min-width: 0; --cf-edge: max(var(--gutter), calc((100vw - 88rem) / 2 + var(--gutter))); }
.article-body .coverflow { margin-block: 2.5rem; }
.cf-frame { position: relative; width: 100vw; margin-left: calc(-1 * var(--cf-edge)); overflow: hidden; container-type: inline-size; padding-block: 1rem; background: transparent; }
/* 100vw counts a scrollbar the page's own width does not, so the frame can be a few pixels wider than the
   page. Its section clips that sliver; nothing else in the section reaches the edge. */
.work, .article:has(.coverflow) { overflow-x: clip; }
.cf-first { display: block; width: min(86%, 40rem); aspect-ratio: 100 / 67; margin-inline: auto; }
/* In a wide frame the card is at most 40rem wide, and less on a short screen: its height is what is left
   of the screen after the header, the heading and the controls (about 29rem), and never under 15rem. */
@container (min-width: 40rem) { .cf-first { width: min(58%, 40rem, max(22.5rem, (100svh - 29rem) * 1.4925)); } }
.cf-first img { width: 100%; height: 100%; object-fit: contain; }
.coverflow[data-cf-live] .cf-first { visibility: hidden; }
.cf-stage { position: absolute; inset: 0; }
/* A row on Our work: the generator's flat fan. --fan-card is how wide a card is. On a phone it is most of
   the screen's width, so the photo the row is on can be read, with the edge of the next photo showing
   beside it. From 40rem up it is about a fifth of the screen, so several photos sit side by side. The
   frame is as tall as the largest card the row can hold (a card is 0.67 as tall as it is wide and may be
   drawn up to a sixth larger and a little tilted) and no taller, so the rows stack closely. Its height is
   set here, not by its photos, so nothing moves when the carousel takes the strip's place or when a photo
   arrives. */
.coverflow--row { --fan-card: min(70vw, 20rem); }
@media (min-width: 40rem) { .coverflow--row { --fan-card: clamp(12rem, 20vw, 18rem); } }
.coverflow--row .cf-frame { height: calc(var(--fan-card) * 0.84 + 1rem); margin-top: 0.35rem; padding-block: 0; }
.cf-size { position: absolute; top: 0; left: 0; width: var(--fan-card); height: 0; visibility: hidden; }
/* Without scripts a row is this strip: every photo of the subject, whole, side by side, scrolled sideways
   inside the frame. The page itself never scrolls sideways. */
.cf-strip { display: flex; align-items: center; gap: calc(var(--fan-card) * 0.094); height: 100%; margin: 0; padding-inline: var(--cf-edge); overflow-x: auto; overscroll-behavior-x: contain; }
.cf-strip li { flex: none; margin: 0; }
.cf-strip a { display: block; width: var(--fan-card); aspect-ratio: 100 / 67; }
.cf-strip img { width: 100%; height: 100%; object-fit: contain; }
/* A photo of a row that has not arrived holds its place with the page's darker paper, so a row is never
   blank while it loads. Once the photo is drawn the card has no ground of its own. */
.coverflow--row .cg-item:not([data-cf-state="loaded"]) .cg-card { background: var(--paper-deep); }
/* Under a row, on one line where there is room: which photo is in the middle and its caption, then
   previous, next and the full view. */
.coverflow--row .cf-controls { gap: 0.5rem 1rem; margin-top: 0.35rem; }
.cf-told { display: flex; flex: 1 1 14rem; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; min-width: 0; }
.cf-told .cf-count { min-width: 0; text-align: left; }
.cf-told .cf-caption { min-height: 0; margin-top: 0; }
.coverflow--row .cf-pager { flex: none; justify-content: flex-start; }
/* The engine's own rules (src/vendor/coverflow-engine.js), as exported, with these changes: the root is
   placed by .cf-stage, the focus ring is the site's and sits inside the clipped frame, cards have no
   dark ground, photos are fitted whole instead of cropped, and a photo is not drawn until it has loaded. */
.cg-root { overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cg-root:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cg-root[data-cg-drag] { cursor: grab; }
.cg-root[data-cg-dragging] { cursor: grabbing; }
.cg-stage { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.cg-item { position: absolute; top: 50%; left: 50%; pointer-events: auto; }
.cg-root[data-cg-tap] .cg-card { cursor: pointer; }
.cg-root[data-cg-moving] .cg-item { will-change: transform; }
.cg-card { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.cg-card img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cg-item:not([data-cf-state="loaded"]) img { visibility: hidden; }
/* Said over the frame while the photo at the front is waiting, and under it when it has failed. */
.cf-state { position: absolute; left: var(--cf-edge); bottom: 0; margin: 0; padding: 0.5rem 0.75rem; background: var(--paper); color: var(--ink); font-size: 0.9375rem; }
.lightbox-frame .cf-state { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); text-align: center; }
.cf-problem { margin-top: 0.75rem; padding: 0.75rem 1rem; border-left: 3px solid var(--brand); background: var(--paper-deep); color: var(--ink); }
.cf-problem .filter { margin-left: 0.5rem; }
/* The caption is a short line: an editor's caption, or the photo's subject. One line is kept for it, so
   the controls stay where they are as the photos change. */
.cf-caption { min-height: 1.65em; margin-top: 0.6rem; max-width: 62ch; color: var(--slate-800); }
.cf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 0.4rem; }
.cf-pager { display: flex; align-items: center; gap: 0.5rem; }
.cf-button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; background: var(--ink); border: 0; border-radius: 0; color: var(--paper); cursor: pointer; transition: background-color 0.3s var(--ease); }
.cf-button:hover { background: var(--slate-600); }
/* At the first and last photo the button that would go past it is switched off. */
.cf-button:disabled, .lightbox-button:disabled { opacity: 0.35; cursor: default; }
.cf-button:disabled:hover { background: var(--ink); }
.lightbox-button:disabled:hover { background: var(--paper); }
/* While the full view is open the page behind it stays where it is. The class is set when the full view
   opens and removed when it closes (site.js); nothing else on the site sets it. */
.is-viewing { overflow: hidden; }
.lightbox { overscroll-behavior: contain; }
.lightbox-frame .cf-state .filter { margin-left: 0.5rem; }
.cf-count { min-width: 8.5rem; color: var(--slate-600); font-size: 0.9375rem; font-variant-numeric: tabular-nums; text-align: center; }
.cf-jump { display: flex; flex: 1 1 18rem; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.9375rem; font-weight: 500; }
.cf-jump span { flex: none; }
.cf-jump select { flex: 1; min-width: 0; min-height: 2.75rem; max-width: 26rem; padding: 0.5rem 0.75rem; background: var(--paper); border: 1px solid var(--field-line); border-radius: 0; color: var(--ink); font: 400 0.9375rem var(--sans); }
/* On a phone the controls stack: previous and next at the two edges with the count between, then the rest. */
@media (max-width: 39.99rem) {
  .cf-pager { flex: 1 1 100%; justify-content: space-between; }
  .cf-jump { flex-basis: 100%; }
}
/* Every photo as a plain list of links. It is how the photos are reached without scripts, and it stays
   closed until asked for. */
.cf-list { margin-top: 1.25rem; }
.cf-list summary { display: inline-block; padding-block: 0.6rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.coverflow .cf-list ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; padding: 0; list-style: none; }
.coverflow .cf-list li { margin: 0; }
.cf-list a { display: block; aspect-ratio: 3 / 2; background: var(--paper-deep); }
.cf-list img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 40rem) { .coverflow .cf-list ol { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } }

.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #14181c; color: var(--paper); }
.lightbox::backdrop { background: #14181c; }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
/* The photo is absolutely fitted so its intrinsic size can never push it over the caption. */
.lightbox-frame { position: relative; min-height: 0; --pad-inline: 0.5rem; }
.lightbox-frame img { position: absolute; top: 3.75rem; left: var(--pad-inline); width: calc(100% - 2 * var(--pad-inline)); height: calc(100% - 4.25rem); object-fit: contain; }
.lightbox-caption { padding: 0.75rem 4.5rem 1.25rem; text-align: center; font-size: 0.9375rem; line-height: 1.5; }
.lightbox-caption span:first-child { display: block; color: var(--brand-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.lightbox-button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--paper); border: 0; border-radius: 0; color: var(--ink); cursor: pointer; }
.lightbox-button:hover { background: #fff; }
.lightbox-button:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--focus); }
.lightbox-close { top: 0.5rem; right: 0.5rem; }
.lightbox-prev { left: 0.5rem; bottom: 0.75rem; }
.lightbox-next { right: 0.5rem; bottom: 0.75rem; }
@media (min-width: 48rem) {
  .lightbox-frame { --pad-inline: 4.5rem; }
  .lightbox-prev, .lightbox-next { top: 50%; bottom: auto; margin-top: -1.5rem; }
}

/* Testimonials */
.testimonies { display: grid; row-gap: clamp(3.5rem, 8vw, 7rem); padding-bottom: var(--section); }
.testimony { padding-top: 1.75rem; border-top: 1px solid var(--ink); }
.testimony blockquote { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
.testimony--2 blockquote, .testimony--3 blockquote { font-size: clamp(1.5rem, 2.9vw, 2.375rem); font-weight: 340; line-height: 1.25; letter-spacing: -0.015em; }
.testimony figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-top: 1.75rem; }
.testimony h2 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.testimony time { color: var(--slate-600); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
@media (min-width: 60rem) {
  .testimonies { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .testimony--1 { grid-column: 1 / span 7; }
  .testimony-photo--right { grid-column: 8 / -1; margin-top: -9rem; grid-row: 2; }
  .testimony--2 { grid-column: 1 / span 6; grid-row: 2; align-self: end; }
  .testimony--3 { grid-column: 4 / -1; }
  .testimony-photo--left { grid-column: 1 / span 5; }
  .testimony--4 { grid-column: 7 / -1; }
}

/* Services */
.consulting { padding-bottom: var(--section); }
.consulting .prose { margin-top: 1.75rem; }
.consulting-photo { margin-top: 2.5rem; }
.offer { padding-block: var(--section); background: var(--paper-deep); }
.offer-list { border-bottom: 1px solid var(--line); margin-block: 2rem 2.5rem; }
.offer-list li { padding-block: 0.95rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.4375rem); line-height: 1.25; letter-spacing: -0.01em; }
.process { padding-block: var(--section); }
.process-aside .frame { margin-top: 2rem; max-width: 26rem; }
.numbered--steps li { grid-template-columns: 3rem 1fr; padding-block: 2rem; }
.numbered--steps h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.numbered--steps .prose { margin-top: 0.75rem; }
.closing-note { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--ink); max-width: 44ch; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
@media (min-width: 60rem) {
  .consulting-grid, .offer-grid, .process-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .consulting-copy { grid-column: 1 / span 6; }
  .consulting-photo { grid-column: 8 / -1; margin: 0; }
  .offer-grid > h2 { grid-column: 1 / span 4; }
  .offer-grid > div { grid-column: 6 / -1; }
  .offer-list { margin-top: 0; columns: 2; column-gap: var(--gap); }
  .offer-list li { break-inside: avoid; }
  .process-aside { grid-column: 1 / span 4; position: sticky; top: 2rem; }
  .numbered--steps { grid-column: 6 / -1; margin-top: 0; }
  .closing-note { margin-left: 41.66%; }
}

/* Contact */
.reach { padding-bottom: var(--section); }
.reach-direct .direct-contact { margin-top: 0; }
.service-area { margin-top: 3rem; }
.reach .service-area h2 { font-size: 1.5rem; }
.service-area p { margin-top: 0.6rem; }
.service-area .link-arrow { margin-top: 0.75rem; }
.reach-form { margin-top: 3.5rem; }
.reach-photo { padding-bottom: var(--section); }
.reach-photo .frame { margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 60rem) { .reach-photo .frame { margin-inline: 0; } }

/* Closing band and footer */
.closing-cta { padding-block: clamp(3.5rem, 7vw, 6rem); }
.closing-cta-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; }
.closing-cta-line { max-width: 18ch; font-family: var(--serif-display); font-size: clamp(2rem, 4.4vw, 3.75rem); font-weight: 340; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.closing-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.closing-cta-phone { font-family: var(--serif); font-size: 1.5rem; font-variant-numeric: lining-nums; text-decoration: none; padding-block: 0.5rem; }
.closing-cta-phone:hover { text-decoration: underline; }

.site-footer { padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; background: var(--paper-deep); font-size: 1rem; }
.page-home .site-footer { background: var(--paper); }
.footer-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.footer-lead img { width: 9.5rem; height: auto; }
.footer-signoff { max-width: 14ch; font-family: var(--serif-display); font-size: clamp(1.9rem, 4vw, 3.25rem); font-weight: 340; line-height: 1.02; letter-spacing: -0.025em; }
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem var(--gap); padding-block: 2.5rem; border-top: 1px solid var(--ink); }
.site-footer h2 { margin-bottom: 0.9rem; color: var(--slate-600); font: 600 0.8125rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-phones a { font-family: var(--serif); font-size: 1.375rem; font-variant-numeric: lining-nums; }
.footer-place { margin-top: 0.3rem; color: var(--slate-600); }
.footer-base { padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--slate-600); font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .view a:hover .frame img, .link-arrow:hover .arrow { transform: none; }
}

/* Shown only by the saved-draft preview inside the workspace; the public site never renders it. */
.preview-notice { margin: 0; padding: 0.7rem var(--gutter); background: var(--slate-800); color: var(--paper); font-size: 0.9375rem; }

.link-row { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }

/* Service pages, project pages and planning guides (content/drafts). Same type and colour as the rest of
   the site; one reading column. */
.masthead--article h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.article { padding-bottom: var(--section); }
.article-lead { margin-bottom: clamp(2rem, 5vw, 4rem); }
.article-body { max-width: 68ch; }
.article-body h2 { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.article-body h3 { margin-top: 2rem; font-size: 1.375rem; line-height: 1.2; }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body ul { list-style: disc; }
.article-body li + li { margin-top: 0.6rem; }
.article-body a { text-decoration: underline; text-underline-offset: 0.18em; }
.article-body .frame { margin-block: 2.5rem; }
.article-body figcaption, .article-lead figcaption { position: absolute; left: 0; bottom: 0; padding: 0.4rem 0.75rem; background: var(--paper); color: var(--slate-800); font-size: 0.875rem; }
/* Text for screen readers only: kept in the accessibility tree, out of the layout and out of sight. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Photos approved for one article: shown whole at their own shape, with the same caption as a frame. */
.article-photo { position: relative; margin-block: 2.5rem; background: var(--paper-deep); }
.article-lead .article-photo { margin-block: 0; }
.article-photo img { display: block; width: 100%; height: auto; }
.article-photo--portrait { max-width: 26rem; }
.article-note { padding: 1rem 1.25rem; border-left: 3px solid var(--brand); background: var(--paper-deep); color: var(--ink); }
.checklist { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); }
.checklist h3 { margin-top: 0; }
.checklist ul { margin-top: 1rem; list-style: square; }
.article-steps { list-style: decimal; }
.article-steps li + li { margin-top: 1.75rem; }
.article-steps h3 { margin-top: 0; }
.article-steps p { margin-top: 0.5rem; }
.article-sources { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.article-sources h2 { margin-top: 0; font-size: 1.375rem; }
.article-source-list, .article-links { margin-top: 1rem; }
.source-covers { display: block; color: var(--slate-600); font-size: 0.9375rem; }
.article-review { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 68ch; color: var(--slate-600); font-size: 0.9375rem; }
/* Shown only by the loopback review preview. */
.review-panel { padding-block: 1.25rem; background: var(--slate-800); color: var(--paper); font-size: 0.9375rem; }
.review-panel a { color: var(--paper); text-decoration: underline; }
.review-panel-title { font-weight: 600; font-size: 1.0625rem; }
.review-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.25rem; margin-top: 0.75rem; }
.review-panel dt { color: var(--brand-soft); }
.review-panel-heading { margin-top: 1rem; font-weight: 600; }
.review-panel ul { margin-top: 0.4rem; padding-left: 1.25rem; list-style: disc; }
.review-panel p + p, .review-panel ul + p { margin-top: 0.75rem; }
.draft-mark { color: var(--slate-600); font-size: 0.875em; white-space: nowrap; }
.review-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.review-table th, .review-table td { padding: 0.75rem 0.75rem 0.75rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.review-table code { color: var(--slate-600); font-size: 0.875rem; }
@media (max-width: 47.99rem) { .review-table thead { display: none; } .review-table td { display: block; padding: 0.25rem 0; border: 0; } .review-table tr { display: block; padding-block: 0.9rem; border-top: 1px solid var(--line); } .review-panel dl { grid-template-columns: 1fr; } }

/* Links from the Services page to the additional pages, in builds that include them. */
.more-links { margin-top: 1.5rem; max-width: 44ch; }
.more-links a { text-decoration: underline; text-underline-offset: 0.18em; }