/* Hallmark · macrostructure: Photographic · genre: editorial · theme: Almanac · tone: architectural luxury · anchor hue: 55 · nav: N6 · footer: Ft1 · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
@import url("../tokens.css");
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/sofia-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/sofia-sans-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: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/noto-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/noto-sans-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: "Sofia Fallback"; src: local("Arial"); size-adjust: 91%; ascent-override: 105%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Noto Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 100%; descent-override: 27%; line-gap-override: 0%; }
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--space-lg); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; font-synthesis: none; }
body:has(dialog[open]) { overflow-y: hidden; }
::selection { background: var(--color-ink); color: var(--color-paper); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: var(--color-clear); }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
.on-dark :focus-visible, .hero :focus-visible, dialog :focus-visible { outline-color: var(--color-accent-light); }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, ul { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-lg); line-height: 1.2; }
p { max-width: 65ch; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
[hidden] { display: none !important; }
.shell { width: 100%; max-width: var(--page-width); padding-inline: var(--page-gutter); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.on-dark { background: var(--color-ink); color: var(--color-on-dark); }
.muted { color: var(--color-muted); }
.on-dark .muted { color: var(--color-muted-dark); }
.prose { display: grid; gap: var(--space-md); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 44px; width: fit-content; border-bottom: var(--rule-hair) solid currentColor; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.arrow { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 1.25em; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.arrow-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 56px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid currentColor; border-radius: var(--radius-pill); background: var(--color-clear); color: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.button--dark { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.button:active, .text-link:active, .icon-button:active { transform: translateY(1px); }
.skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-modal); padding: var(--space-sm); background: var(--color-paper); color: var(--color-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
/* A masthead and a separate navigation register keep the company identity quiet. */
.site-header { background: var(--color-paper); color: var(--color-ink); }
.masthead { min-height: 104px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.masthead-note { max-width: 22ch; font-size: var(--text-xs); letter-spacing: 0.11em; line-height: 1.6; text-transform: uppercase; }
.brand { display: block; padding-block: var(--space-xs); }
.brand img { width: 136px; height: 66px; object-fit: contain; }
.masthead-contact { justify-self: end; display: grid; text-align: right; }
.masthead-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.masthead-contact span { font-size: var(--text-xs); color: var(--color-muted); }
.nav-register { border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 54px; }
.primary-nav { display: flex; align-items: center; gap: var(--space-lg); }
.primary-nav a { display: inline-flex; position: relative; align-items: center; min-height: 52px; font-size: var(--text-sm); white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-contact { justify-self: end; border: 0; font-size: var(--text-xs); }
.menu-toggle { display: none; min-height: 44px; min-width: 44px; border: 0; padding: var(--space-2xs); background: var(--color-clear); color: var(--color-ink); }
/* Real project photography is the first impression. */
.hero { position: relative; min-height: 620px; min-height: min(680px, 77svh); display: grid; align-items: end; background: var(--color-ink); color: var(--color-on-dark); isolation: isolate; }
.hero-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--color-overlay), var(--color-overlay-light)); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.hero-copy { max-width: 650px; display: grid; gap: var(--space-lg); }
.hero-copy h1 { max-width: 16ch; }
.hero-copy .hero-description { max-width: 39ch; font-size: var(--text-sm); color: var(--color-on-dark); }
.hero-actions { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.hero-caption { justify-self: end; font-size: var(--text-xs); display: grid; gap: var(--space-xs); width: 240px; max-width: 100%; padding: var(--space-md); background: var(--color-ink); color: var(--color-on-dark); }
.hero-caption strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; }
.hero-caption .text-link { min-height: 44px; font-size: var(--text-xs); }
.hero-copy, .page-title { animation: enter var(--dur-long) var(--ease-out) both; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
.proof-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); gap: var(--space-xl); }
.proof-item { display: flex; gap: var(--space-md); align-items: center; }
.proof-item strong { font-family: var(--font-display); font-size: var(--text-stat); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.proof-item span { font-size: var(--text-sm); max-width: 14ch; line-height: 1.5; }
.proof-place { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-xl); display: grid; align-content: center; gap: var(--space-2xs); }
.proof-place strong { font-size: var(--text-md); font-family: var(--font-display); font-weight: 700; }
.proof-place span { font-size: var(--text-sm); color: var(--color-muted); }
.intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
.intro-heading { display: grid; gap: var(--space-xl); }
.intro-heading h2 { max-width: 18ch; }
.intro-heading .text-link { color: var(--color-accent); }
.quality-list { display: grid; gap: var(--space-sm); list-style: none; padding: var(--space-lg) 0 0; border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-xs); font-size: var(--text-sm); }
.quality-list li { display: flex; gap: var(--space-sm); align-items: baseline; }
.quality-list li::before { content: "+"; color: var(--color-accent); }
.section-heading { display: flex; gap: var(--space-lg); justify-content: space-between; align-items: end; margin-bottom: var(--space-xl); }
.section-heading h2 { max-width: 22ch; }
.section-heading > .text-link { flex-shrink: 0; }
.projects-section { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
.project-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-xl); }
.project-card { min-width: 0; }
.project-card:nth-child(even) { margin-top: var(--space-2xl); }
.project-image { display: block; position: relative; overflow: clip; background: var(--color-paper-2); color: var(--color-ink); }
.project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.project-card:nth-child(even) .project-image img { aspect-ratio: 1.18; }
.project-view { position: absolute; bottom: var(--space-sm); right: var(--space-sm); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.project-meta { display: flex; gap: var(--space-sm); justify-content: space-between; align-items: start; padding-top: var(--space-md); }
.project-meta :is(h2, h3) { font-size: var(--text-lg); margin-bottom: var(--space-3xs); }
.project-meta p { font-size: var(--text-sm); color: var(--color-muted); }
.project-category { font-size: var(--text-xs); color: var(--color-muted); padding-top: var(--space-3xs); white-space: nowrap; }
.projects-bottom { display: flex; justify-content: center; margin-top: var(--space-2xl); }
.expertise-section { padding-block: var(--space-3xl); }
.expertise-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: start; }
.expertise-heading { position: sticky; top: var(--space-xl); display: grid; gap: var(--space-lg); }
.expertise-heading h2 { max-width: 16ch; }
.expertise-heading p { color: var(--color-muted-dark); font-size: var(--text-sm); }
.service-row { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-dark); }
.service-row:first-child { padding-top: 0; border-top: 0; }
.service-row h3 { margin-bottom: var(--space-xs); }
.service-row p { color: var(--color-muted-dark); font-size: var(--text-base); }
.service-note { margin-top: var(--space-xs); }
.service-row .text-link { margin-top: var(--space-xs); color: var(--color-on-dark); }
.principles { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.principles-photo { width: 100%; height: 560px; object-fit: cover; }
.principles-copy { display: grid; gap: var(--space-lg); }
.principles-copy h2 { font-size: var(--text-xl); }
.principle-items { display: grid; gap: var(--space-md); }
.principle-items h3 { font-size: var(--text-md); }
.principle-items p { color: var(--color-muted); font-size: var(--text-base); margin-top: var(--space-3xs); }
.client-section { padding-top: var(--space-lg); padding-bottom: var(--space-3xl); }
.client-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); margin-bottom: var(--space-xl); }
.client-intro h2 { font-size: var(--text-xl); max-width: 24ch; }
.client-intro p { font-size: var(--text-base); color: var(--color-muted); }
.client-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); }
.client-list li { min-height: 90px; display: flex; align-items: center; font-family: var(--font-display); font-size: var(--text-lg); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.contact-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.contact-band h2 { font-size: var(--text-xl); max-width: 22ch; }
.contact-band > div { justify-self: end; display: grid; gap: var(--space-xs); }
.contact-band a { font-size: var(--text-md); }
.footer { padding-top: var(--space-2xl); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.footer-wordmark { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: -0.035em; font-weight: 700; line-height: 1; }
.footer-submark { display: block; font-size: var(--text-sm); letter-spacing: 0.1em; font-weight: 400; line-height: 2; }
.footer-description { font-size: var(--text-sm); color: var(--color-muted-dark); max-width: 36ch; margin-top: var(--space-md); }
.footer-column { display: grid; align-content: start; gap: var(--space-md); font-size: var(--text-sm); }
.footer-column h2 { font-size: var(--text-md); letter-spacing: 0; }
.footer-column p { color: var(--color-muted-dark); font-size: var(--text-sm); }
.footer-column a { display: flex; align-items: center; min-height: 44px; width: fit-content; white-space: nowrap; }
.footer-column .footer-email { font-size: var(--text-xs); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-dark); font-size: var(--text-xs); color: var(--color-muted-dark); }
.footer-bottom a { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-md); white-space: nowrap; }
.footer-bottom p { align-self: center; }
/* Internal pages share the same register, type and spacing. */
.page-intro { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.breadcrumb { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-lg); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.breadcrumb span[aria-hidden] { color: var(--color-accent); }
.page-intro .page-title { max-width: 20ch; }
.page-lead { max-width: 55ch; color: var(--color-muted); margin-top: var(--space-lg); }
.wide-photo { margin-top: var(--space-lg); }
.wide-photo img { width: 100%; max-height: 660px; aspect-ratio: 2.25; object-fit: cover; }
.wide-photo figcaption { padding-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.about-body { padding-top: var(--space-2xl); }
.about-body .intro-heading h2 { font-size: var(--text-xl); }
.about-facts { margin-top: var(--space-xl); display: flex; align-items: baseline; gap: var(--space-md); }
.about-facts strong { font-family: var(--font-display); font-size: var(--text-stat); line-height: 1; }
.about-facts span { font-size: var(--text-sm); color: var(--color-muted); }
.service-list { padding-top: var(--space-lg); }
.service-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); align-items: center; scroll-margin-top: var(--space-xl); }
.service-detail:nth-child(even) .service-figure { order: 2; }
.service-detail img { width: 100%; height: 340px; object-fit: cover; }
.service-detail .prose { gap: var(--space-md); }
.service-detail h2 { font-size: var(--text-xl); }
.service-detail p { color: var(--color-muted); }
.filter-bar { display: flex; justify-content: space-between; gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); margin-bottom: var(--space-xl); align-items: start; }
.filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.filter-button { min-height: 44px; padding: var(--space-2xs) var(--space-sm); background: var(--color-clear); color: var(--color-muted); border: var(--rule-hair) solid var(--color-clear); font-size: var(--text-sm); white-space: nowrap; }
.filter-button[aria-pressed="true"] { color: var(--color-ink); border-color: var(--color-ink); }
.filter-button[aria-pressed="true"]::after { content: " ·"; }
.filter-count { padding-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.portfolio { padding-top: var(--space-lg); }
.portfolio .project-grid { gap: var(--space-2xl) var(--space-xl); }
.portfolio .project-card:nth-child(even) { margin-top: 0; }
.portfolio .project-image img { aspect-ratio: 4 / 3; }
.portfolio .project-card:nth-child(3n) { grid-column: 1 / -1; }
.portfolio .project-card:nth-child(3n) .project-image img { aspect-ratio: 2.1; }
.portfolio.is-filtered .project-card { grid-column: auto; }
.portfolio.is-filtered .project-image img { aspect-ratio: 4 / 3; }
.gallery { position: fixed; inset: 0; margin: auto; width: min(1280px, calc(100% - 48px)); max-width: none; height: fit-content; max-height: 94svh; overflow: auto; border: 0; padding: var(--space-md); background: var(--color-ink); color: var(--color-on-dark); }
.gallery::backdrop { background: var(--color-backdrop); }
.gallery[open] { animation: enter var(--dur-short) var(--ease-out); }
.gallery-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); }
.gallery-top h2 { font-size: var(--text-lg); }
.gallery-top p { color: var(--color-muted-dark); font-size: var(--text-sm); }
.icon-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: var(--rule-hair) solid var(--color-rule-dark); background: var(--color-clear); color: inherit; font-size: var(--text-lg); }
.gallery-stage { position: relative; min-height: 160px; background: var(--color-ink-2); color: var(--color-on-dark); }
.gallery-image { width: 100%; height: min(65svh, 700px); object-fit: contain; }
.gallery-stage[data-state="loading"] .gallery-image { opacity: 0.4; }
.gallery-status { position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: var(--space-md); display: none; }
.gallery-stage[data-state="error"] .gallery-status { display: flex; }
.gallery-stage[data-state="error"] .gallery-image { visibility: hidden; }
.gallery-controls { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-sm); }
.gallery-counter { font-size: var(--text-sm); font-variant-numeric: tabular-nums; flex: 1; }
.gallery-controls .text-link { font-size: var(--text-xs); margin-right: var(--space-md); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); padding-top: var(--space-md); padding-bottom: var(--space-3xl); }
.contact-details { display: grid; gap: var(--space-xl); align-content: start; }
.contact-primary { display: grid; gap: var(--space-xs); }
.contact-primary a { font-family: var(--font-display); font-size: var(--text-xl); display: flex; align-items: center; min-height: 44px; width: fit-content; white-space: nowrap; }
.contact-primary .contact-email { font-family: var(--font-body); font-size: var(--text-sm); }
.address-block { display: grid; gap: var(--space-xs); max-width: 40ch; }
.address-block h2 { font-size: var(--text-lg); }
.address-block p { color: var(--color-muted); font-size: var(--text-base); }
.address-block .text-link { font-size: var(--text-xs); }
.map-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--color-paper-2); color: var(--color-ink); min-height: 580px; }
.map-panel iframe { width: 100%; height: 100%; min-height: 480px; border: 0; }
.map-caption { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
.error-page { padding-block: var(--space-3xl); }
.error-code { font-family: var(--font-display); font-size: var(--text-stat); color: var(--color-accent); margin-bottom: var(--space-md); }
.error-page h1 { font-size: var(--text-title); }
.error-page p { margin-block: var(--space-lg); }
@media (hover: hover) {
  .primary-nav a:hover::after { transform: scaleX(1); }
  .text-link:hover .arrow, .button:hover .arrow { transform: translateX(5px); }
  .project-image:hover img { transform: scale(1.025); }
  .filter-button:hover { border-color: var(--color-rule); color: var(--color-ink); }
  .icon-button:hover { border-color: var(--color-on-dark); }
  .footer-column a:hover, .contact-primary a:hover, .masthead-contact a:hover { text-decoration: underline; text-underline-offset: 5px; }
}
@media (min-width: 1500px) { .hero { min-height: 720px; } }
@media (max-width: 1050px) {
  .nav-contact { display: none; }
  .nav-register { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .intro, .principles, .expertise-layout, .client-intro { gap: var(--space-xl); }
  .hero-inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .hero-caption { max-width: 180px; }
  .proof-strip { gap: var(--space-lg); }
  .proof-place { padding-left: var(--space-lg); }
  .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-description { max-width: 65ch; }
}
@media (max-width: 767px) {
  :root { --text-display: clamp(2.35rem, 7.8vw, 3.6rem); --text-title: clamp(2rem, 7vw, 3rem); --space-3xl: 4.5rem; }
  .masthead { min-height: 86px; grid-template-columns: minmax(0, 1fr) auto; }
  .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .brand img { width: 118px; height: 58px; }
  .masthead-note, .masthead-contact { display: none; }
  .menu-toggle { display: inline-flex; gap: var(--space-xs); align-items: center; justify-content: center; font-size: var(--text-sm); }
  .menu-symbol { width: 20px; display: grid; gap: 5px; }
  .menu-symbol::before, .menu-symbol::after { content: ""; display: block; width: 20px; height: 1px; background: currentColor; transition: transform var(--dur-short) var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-symbol::before { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-symbol::after { transform: translateY(-3px) rotate(-45deg); }
  .nav-register { display: block; min-height: 0; border-top: 0; }
  .primary-nav { display: flex; justify-content: start; flex-wrap: wrap; gap: 0 var(--space-md); padding-bottom: var(--space-sm); }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: flex; }
  .primary-nav a { min-height: 48px; }
  .hero { min-height: 650px; min-height: min(750px, calc(100svh - 86px)); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-lg) var(--space-xl); }
  .hero-copy { gap: var(--space-md); max-width: 500px; }
  .hero-copy h1 { max-width: 17ch; }
  .hero-caption { display: none; }
  .hero::before { background: linear-gradient(90deg, var(--color-overlay), var(--color-overlay-light)); }
  .hero-photo { object-position: 62% center; }
  .hero-actions { gap: var(--space-md); }
  .hero-actions .text-link { font-size: var(--text-xs); }
  .hero-description { max-width: 34ch !important; }
  .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--space-lg); gap: var(--space-lg) var(--space-xs); }
  .proof-item { gap: var(--space-xs); flex-wrap: wrap; }
  .proof-item strong { font-size: 3.3rem; }
  .proof-item span { font-size: var(--text-xs); }
  .proof-place { grid-column: 1 / -1; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding-left: 0; padding-top: var(--space-md); }
  .intro, .principles, .expertise-layout, .client-intro, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .intro-heading h2 { max-width: 23ch; }
  .intro-heading .text-link { order: 2; }
  .section-heading { flex-direction: column; align-items: start; gap: var(--space-md); }
  .project-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .project-card:nth-child(even) { margin-top: 0; }
  .project-card .project-image img, .project-card:nth-child(even) .project-image img { aspect-ratio: 4 / 3; }
  .project-category { display: none; }
  .project-meta :is(h2, h3) { font-size: var(--text-lg); }
  .expertise-heading { position: static; }
  .expertise-heading h2 { max-width: 22ch; }
  .service-row:first-child { border-top: var(--rule-hair) solid var(--color-rule-dark); padding-top: var(--space-lg); }
  .principles-photo { height: 400px; }
  .client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-list li { min-height: 80px; font-size: var(--text-md); }
  .contact-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .contact-band > div { justify-self: start; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: var(--space-xs); }
  .footer-bottom p { align-self: start; }
  .footer-column .footer-email { font-size: var(--text-sm); }
  .page-intro { padding-top: var(--space-lg); }
  .page-lead { margin-top: var(--space-md); }
  .wide-photo img { aspect-ratio: 1.2; }
  .service-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .service-detail:nth-child(even) .service-figure { order: 0; }
  .service-detail img { height: auto; aspect-ratio: 4 / 3; }
  .filter-bar { flex-direction: column; gap: var(--space-sm); }
  .filters { gap: var(--space-2xs); }
  .filter-button { padding-inline: var(--space-xs); font-size: var(--text-xs); }
  .portfolio .project-card:nth-child(3n) { grid-column: auto; }
  .portfolio .project-card:nth-child(3n) .project-image img { aspect-ratio: 4 / 3; }
  .gallery { width: calc(100% - 16px); padding: var(--space-sm); max-height: 96svh; }
  .gallery-image { height: min(55svh, 600px); }
  .gallery-top h2 { font-size: var(--text-md); }
  .gallery-controls { flex-wrap: wrap; }
  .gallery-controls .text-link { display: none; }
  .contact-primary a { font-size: 2rem; }
  .contact-primary .contact-email { font-size: var(--text-sm); }
  .map-panel { min-height: 420px; }
  .map-panel iframe { min-height: 360px; }
}
@media (max-width: 374px) {
  .hero-actions { gap: var(--space-xs); }
  .hero-actions .button { padding-inline: var(--space-sm); gap: var(--space-md); }
  .hero-actions .text-link { gap: var(--space-xs); }
  .hero-copy h1 { font-size: 2.25rem; }
  .hero-copy .hero-description { font-size: var(--text-xs); }
  .footer-column .footer-email { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .project-image:hover img, .text-link:hover .arrow, .button:hover .arrow { transform: none; }
}

/* Keep text links reachable without changing the typographic composition. */
.project-meta a, .service-row h3 a { display: inline-flex; align-items: center; min-height: 44px; }
a:active, button:active { transform: translateY(1px); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Hallmark refinement: meaningful symbols, distinct narrative rhythms and a photographic rail. */
.line-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.accent-text { color: var(--color-accent); }
.hero-photo { object-position: center 43%; }
.hero-caption--service { gap: var(--space-sm); }
.hero-caption--service > .line-icon { width: 32px; height: 32px; color: var(--color-accent-light); }
.hero-caption--service strong { font-size: var(--text-lg); }
.intro-heading .quality-list { margin-top: 0; max-width: 360px; padding-top: var(--space-md); gap: var(--space-xs); }
.quality-list li { align-items: center; gap: var(--space-sm); min-height: 44px; }
.quality-list li::before { content: none; }
.quality-list .line-icon { width: 20px; height: 20px; color: var(--color-accent); }
.narrative { display: grid; gap: var(--space-lg); }
.narrative-block { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.narrative-block > .line-icon { margin-top: var(--space-3xs); color: var(--color-accent); }
.narrative-block h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.narrative-block p { color: var(--color-muted); font-size: var(--text-base); }
.narrative-block strong { color: var(--color-ink); font-weight: 600; }
.narrative-block--absolute { background: var(--color-accent-paper); color: var(--color-ink); padding: var(--space-lg) var(--space-md); border-bottom: 0; }
.narrative-block--absolute h3 { color: var(--color-accent); }
.narrative-block--partnership > .line-icon, .narrative-block--partnership h3 { color: var(--color-sage); }
.project-slider { min-width: 0; }
.project-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--space-lg); position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-paper-3); padding-bottom: var(--space-md); }
.project-slider .project-card { margin-top: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.project-slider .project-card .project-image img { aspect-ratio: 4 / 3; }
.project-slider .project-meta { display: block; }
.project-slider .project-category { display: inline-block; margin-top: var(--space-xs); color: var(--color-accent); }
.project-slider-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-md); }
.project-slider-bottom > p { font-size: var(--text-sm); color: var(--color-muted); }
.project-slider-controls { display: flex; align-items: center; gap: var(--space-xs); }
.slider-position { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 100px; text-align: right; margin-right: var(--space-xs); }
.slider-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 48px; min-height: 48px; padding: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); background: var(--color-clear); color: var(--color-ink); white-space: nowrap; font-size: var(--text-xs); }
.slider-button .line-icon { width: 20px; height: 20px; }
.slider-playback { padding-inline: var(--space-sm); }
.slider-playback[aria-pressed="true"] { background: var(--color-paper-2); color: var(--color-ink); }
.expertise-photo { margin-top: var(--space-md); }
.expertise-photo img { width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.expertise-photo figcaption { padding-block: var(--space-sm); color: var(--color-accent-light); font-size: var(--text-sm); }
.service-row h3 { display: flex; align-items: center; gap: var(--space-sm); }
.service-row h3 > .line-icon { color: var(--color-accent-light); }
.service-row p { padding-left: calc(24px + var(--space-sm)); }
.service-row .service-note { font-size: var(--text-sm); }
.principle-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.principle-items article { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.principle-items article > .line-icon { color: var(--color-accent); margin-bottom: var(--space-sm); }
.principle-items article:nth-child(3) > .line-icon { color: var(--color-sage); }
.principle-items h3 { line-height: 1.3; }
.principle-items p { font-size: var(--text-sm); margin-top: var(--space-xs); }
.service-symbol { width: 32px; height: 32px; color: var(--color-accent); }
@media (hover: hover) {
  .slider-button:hover { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
}
@media (max-width: 1050px) {
  .project-slider-bottom { flex-wrap: wrap; }
  .project-slider-controls { margin-left: auto; }
  .principle-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hero-photo { object-position: 63% center; }
  .intro-heading { gap: var(--space-lg); }
  .intro-heading .text-link { order: 0; }
  .intro-heading .quality-list { max-width: none; }
  .narrative { gap: var(--space-md); }
  .narrative-block { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); padding-bottom: var(--space-md); }
  .narrative-block--absolute { padding: var(--space-md); }
  .narrative-block h3 { font-size: var(--text-lg); }
  .project-slider-track { grid-auto-columns: 87%; gap: var(--space-md); }
  .project-slider-bottom { align-items: start; gap: var(--space-sm); }
  .project-slider-bottom > p { font-size: var(--text-xs); }
  .project-slider-controls { width: 100%; margin-left: 0; justify-content: end; }
  .slider-position { margin-right: auto; min-width: 0; text-align: left; }
  .slider-playback { padding-inline: var(--space-xs); }
  .slider-button { min-width: 44px; min-height: 44px; }
  .expertise-photo { max-width: 520px; }
  .principle-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .service-row p { padding-left: 0; }
}
@media (max-width: 413px) {
  .principle-items { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .project-slider-track { scroll-behavior: auto; }
}

/* Keep the hero actions together and let the photograph breathe. */
.hero-inner--simple { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg) var(--space-xl); }
.hero-inner--simple .hero-copy { max-width: 900px; gap: var(--space-md); }
.hero-inner--simple .hero-copy h1 { max-width: none; font-size: clamp(1.75rem, 3.4vw, 2.9rem); line-height: 1.12; text-wrap: pretty; }
.hero-title-part { display: inline-block; }
.button--light { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }

/* Six services share two rows, with the introduction above the grid. */
.expertise-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.expertise-heading { position: static; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); align-items: start; }
.expertise-heading h2 { max-width: 22ch; }
.expertise-heading .text-link { justify-self: start; }
.expertise-photo { grid-column: 2; grid-row: 1 / 4; margin: 0; }
.expertise-photo img { height: 180px; }
.expertise-photo figcaption { padding-bottom: 0; }
.expertise-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
.expertise-services .service-row { padding: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule-dark); }
.expertise-services .service-row h3 { align-items: start; }
.expertise-services .service-row h3 > .line-icon { margin-top: var(--space-xs); }
.expertise-services .service-row p { padding-left: 0; }
@media (max-width: 1050px) {
  .expertise-section { padding-block: var(--space-2xl); }
  .expertise-services { column-gap: var(--space-md); }
  .expertise-services .service-row h3 { display: block; font-size: var(--text-md); }
  .expertise-services .service-row h3 > .line-icon { display: block; margin: 0 0 var(--space-xs); }
}
@media (max-width: 767px) {
  .expertise-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expertise-heading { grid-template-columns: minmax(0, 1fr); }
  .expertise-photo { grid-column: auto; grid-row: auto; max-width: none; margin-top: var(--space-sm); }
}
@media (max-width: 479px) {
  .expertise-services { grid-template-columns: minmax(0, 1fr); }
}

/* A small type increase keeps the masthead and navigation easy to read. */
.masthead-note, .masthead-contact span, .nav-contact { font-size: var(--text-base); }
.masthead-contact a, .primary-nav a, .menu-toggle { font-size: var(--text-md); }
@media (min-width: 1051px) {
  .primary-nav { grid-column: 2; }
}

/* Hallmark · component: client showcase · genre: editorial · theme: architectural
 * Static roster · existing company names · pre-emit critique: P4 H5 E4 S4 R5 V4
 */
.client-showcase { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr); gap: var(--space-2xl); align-items: start; scroll-margin-top: var(--space-xl); }
.client-showcase .client-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin: 0; padding: var(--space-lg); background: var(--color-sage-paper); border-top: var(--rule-fine) solid var(--color-sage); }
.client-showcase .client-intro h2 { font-size: var(--text-xl); max-width: 18ch; overflow-wrap: anywhere; min-width: 0; }
.client-showcase .client-intro h2 span { color: var(--color-sage); }
.client-showcase .client-intro p { font-size: var(--text-sm); line-height: 1.8; }
.client-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); border: 0; margin: 0; column-gap: var(--space-lg); }
.client-wall li { grid-column: span 3; min-width: 0; min-height: 112px; padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: 0; }
.client-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; }
@media (max-width: 1050px) {
  .client-showcase { gap: var(--space-xl); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
  .client-showcase .client-intro { padding: var(--space-md); }
  .client-wall { column-gap: var(--space-md); }
}
@media (max-width: 767px) {
  .client-showcase { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .client-showcase .client-intro h2 { max-width: 22ch; }
  .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
  .client-wall li:nth-child(n+2) .client-name { font-size: var(--text-lg); }
}
@media (max-width: 374px) {
  .client-wall li:nth-child(n+2) .client-name { font-size: var(--text-md); }
}

/* Give the new logo enough room while preserving its original proportions. */
.masthead { min-height: 136px; }
.brand { padding-block: var(--space-2xs); }
.brand img { width: 200px; height: auto; }
@media (max-width: 767px) {
  .masthead { min-height: 112px; }
  .brand img { width: 164px; }
  .hero { min-height: min(750px, calc(100svh - 112px)); }
}
@media (max-width: 374px) {
  .brand img { width: 152px; }
}

/* Native dialog keeps the mobile drawer, focus and backdrop together. */
.mobile-menu { position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto; width: min(380px, calc(100% - 48px)); max-width: none; height: 100vh; height: 100dvh; max-height: none; border: 0; padding: var(--space-md); padding-top: max(var(--space-md), env(safe-area-inset-top)); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); background: var(--color-paper); color: var(--color-ink); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[open] { display: flex; flex-direction: column; gap: var(--space-lg); animation: mobile-menu-in var(--dur-long) var(--ease-out) both; }
.mobile-menu::backdrop { background: color-mix(in oklch, var(--color-ink) 48%, var(--color-clear)); animation: mobile-menu-dim var(--dur-short) var(--ease-out) both; }
.mobile-menu.is-closing { animation: mobile-menu-out var(--dur-short) var(--ease-in) both; }
.mobile-menu.is-closing::backdrop { animation: mobile-menu-undim var(--dur-short) var(--ease-in) both; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.mobile-menu-header h2 { font-size: var(--text-lg); }
.mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-clear); color: var(--color-ink); font-size: var(--text-lg); }
.js .mobile-menu .primary-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 0; }
.mobile-menu .primary-nav a { min-height: 64px; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.mobile-menu .primary-nav a::after { display: none; }
.mobile-menu .primary-nav a[aria-current="page"] { color: var(--color-accent); }
.mobile-menu-contact { margin-top: auto; padding-top: var(--space-lg); }
.mobile-menu-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); font-weight: 600; white-space: nowrap; }
.mobile-menu-contact p { color: var(--color-muted); font-size: var(--text-sm); }
html.has-mobile-menu, html.has-mobile-menu body { overflow-y: hidden; overscroll-behavior: none; }
@media (hover: hover) {
  .mobile-menu-close:hover { background: var(--color-paper-2); }
  .mobile-menu .primary-nav a:hover { color: var(--color-accent); }
}
@media (max-width: 767px) {
  html:not(.js) .menu-toggle { display: none; }
}
@keyframes mobile-menu-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mobile-menu-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mobile-menu-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobile-menu-undim { from { opacity: 1; } to { opacity: 0; } }

/* Client logo wall: even grid, logos centred in equal cells; white marks are inked dark */
.client-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.client-wall li { grid-column: span 2; min-height: 120px; padding: var(--space-md); justify-content: center; }
.client-logo { display: block; max-width: min(100%, 160px); max-height: 60px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.client-logo--pad { transform: scale(1.4); }
.client-logo--white { filter: brightness(0); opacity: 0.85; }
/* last row holds two logos: centre them */
.client-wall li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.client-wall li:last-child:nth-child(3n+1) { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 767px) {
  .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-wall li, .client-wall li:nth-last-child(2):nth-child(3n+1) { grid-column: auto; }
  .client-wall li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
  .client-wall li { min-height: 96px; padding: var(--space-sm); }
  .client-logo { max-width: min(100%, 130px); max-height: 52px; }
}

/* Rounded photographs (trial). Logos and the full-bleed hero stay square. */
:root { --radius-photo: 16px; }
.project-image, .principles-photo, .gallery-image, main img:not(.client-logo):not(.hero-photo) { border-radius: var(--radius-photo); }
@media (max-width: 767px) { :root { --radius-photo: 12px; } }

/* Project detail pages (generated by tools/seo.py) */
.project-lead { margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-muted); }
.project-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); padding-block: var(--space-xl); }
.project-photo { margin: 0; min-width: 0; }
.project-photo img { display: block; width: 100%; height: auto; }
.project-photo--lead { grid-column: 1 / -1; }
.project-back { padding-bottom: var(--space-xl); }
@media (max-width: 767px) { .project-photos { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }