/* Hallmark · shape: Portfolio Index · genre: editorial · theme: brand · redesign: full
 * paper: #f5f3ec · accent: #b6f4c9 · display: Manrope · body: Manrope · hero: Stage (/), Banner (/projects), Banner (/services), Banner (/brief) · nav: edge-aligned work index · footer: contact statement · signature: the actual FORMA website beside the invitation to build
 * axes: paper/grotesk/mint · posture: Restrained · brand: WebCMaker (source palette 2026-11-03) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, replaced generic illustration with the actual FORMA project. */
/* Hallmark · reworded section labels into their existing headings · 54 removes duplicate category eyebrows; preserved every fact and destination. */
/* Hallmark · dropped decorative portfolio-hero.svg and portfolio-process.svg image instances · 80 and 84 replace illustration with the existing real FORMA site. Assets retained. */
/* Hallmark · dropped decorative star emblems and repeated category labels · 54 and 66; no logo, route, form or hook changed. */
/* Hallmark · reworded punctuation in existing copy · 19, before/after lines in .hallmark/copy-edits.json; numerical values unchanged. */
/* Hallmark · hero-review: fix · 1 finding · mobile product crop replaced with an intact photo section from the actual site. */
/* Hallmark · waive 77 · two supplied scope and revision disclosures in services · These brief terms explain which websites are accepted and how revisions work; padding them with extra content would dilute the existing offer. */
/* Hallmark · reworded "Остались вопросы? Напишите мне." to "Напишите мне" · 49b keeps the FAQ email action on one line; equivalent EN and UK labels shortened. */
/* Hallmark · dropped repeated FORMA summary below the project · 69, the same construction website and multipage facts already appear in the project caption. */
/* Hallmark · dismissed 25 · all short measures are one-sentence ledes or captions, not sustained prose; approach note is two short lines. */
/* Hallmark · finish-review: subagent · 0 portfolio findings · hero mobile crop resolved; all four pages reviewed at desktop and phone widths. */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: Manrope; src: url('manrope-variable.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { position: relative; min-width: 0; overflow-x: clip; isolation: isolate; }
body.menu-open { overflow-y: clip; }
button,a,summary,input,select,textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button,input,select,textarea { color: inherit; border-radius: 0; }
button { cursor: pointer; }
a { text-decoration: none; }
button,a,summary { transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
button:active,.button:active { transform: translateY(1px); }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
button:disabled,.button:disabled,[aria-disabled=true] { background: var(--soft); color: var(--muted); border-color: var(--line); cursor: not-allowed; opacity: .7; transform: none; }
button[aria-busy=true] { cursor: progress; }
h1,h2,h3 { font-weight: 500; }
p { line-height: 1.65; }
svg { flex-shrink: 0; max-width: 100%; }
.container { position: relative; z-index: 2; }
.section { padding-block: var(--section-gap); }
.skip-link { position: fixed; z-index: var(--z-tooltip); inset: var(--space-md) auto auto var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--accent); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus-visible { transform: none; }
.site-header { position: relative; z-index: var(--z-sticky-nav); background: var(--ink); color: var(--paper); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; }
.brand-mark img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.7px; }
.brand-period { color: var(--accent); }
.main-nav,.nav-pages,.nav-actions,.language-switch { display: flex; align-items: center; }
.main-nav { flex: 1; justify-content: flex-end; gap: var(--space-2xl); }
.nav-pages { gap: var(--space-lg); }
.nav-actions { gap: var(--space-xl); }
.nav-link { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); color: var(--dark-muted); }
.nav-link:hover,.nav-link.active { color: var(--paper); text-decoration: underline; text-underline-offset: .5em; }
.language-switch { gap: var(--space-2xs); }
.language-button { min-width: 40px; min-height: 48px; border: 0; padding: 0 var(--space-xs); font-size: var(--text-sm); background: transparent; color: var(--dark-muted); }
.language-button.active,.language-button:hover { color: var(--accent); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); border: 1px solid transparent; border-radius: 0; font-size: var(--text-sm); font-weight: 700; line-height: 1.5; max-width: 100%; }
.button svg,.text-link svg,.footer-email svg,.brief-email svg { width: 24px; height: 24px; }
.button-blue,.button-dark { background: var(--ink); color: var(--paper); }
.button-blue:hover,.button-dark:hover { background: var(--forest); }
.hero .button-blue { background: var(--accent); color: var(--ink); }
.hero .button-blue:hover { background: var(--blue-hover); }
.nav-cta { border-color: var(--dark-rule); color: var(--paper); background: transparent; min-height: 48px; font-weight: 400; }
.nav-cta:hover { background: var(--dark-soft); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; min-height: 48px; gap: var(--space-lg); padding-block: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; }
.text-link:hover { color: var(--forest); }
.hero .text-link:hover,.site-footer .text-link:hover { color: var(--accent); }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.menu-toggle { display: none; width: 48px; height: 48px; background: transparent; border: 1px solid var(--dark-rule); align-items: center; justify-content: center; flex-direction: column; gap: var(--space-xs); }
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--paper); }
.menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.hero { background: var(--ink); color: var(--paper); }
.hero-grid { min-height: calc(100svh - 88px); max-height: 1000px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.intro-copy { min-width: 0; }
.hero h1 { max-width: 13ch; font-size: var(--text-display); line-height: 1.04; letter-spacing: -.055em; }
.hero-title-line { display: block; }
.hero-intro { max-width: 39ch; margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--dark-muted); }
.hero-art { min-width: 0; position: relative; }
.hero-project { display: block; }
.hero-project-image { display: block; aspect-ratio: 1; background: var(--paper); overflow: clip; }
.hero-project-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-project-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--dark-rule); font-size: var(--text-sm); color: var(--dark-muted); }
.hero-project-caption strong { color: var(--paper); font-weight: 500; }
.hero-project-caption svg { width: 24px; height: 24px; color: var(--accent); }
.hero-project:hover .hero-project-caption { color: var(--paper); }
.hero-bottom { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--dark-rule); font-size: var(--text-sm); color: var(--dark-muted); }
.page-hero { background: var(--ink); color: var(--paper); padding-block: var(--space-2xl); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: var(--gap-columns); align-items: end; }
.page-hero h1 { font-size: var(--text-display-s); max-width: 16ch; }
.page-hero p { max-width: 40ch; margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--dark-muted); }
.page-hero-emblem { justify-self: end; color: var(--accent); }
.page-hero-emblem svg { width: 80px; height: 80px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); margin-bottom: var(--space-xl); }
.section-heading h2 { max-width: 19ch; }
.section-heading>p { max-width: 35ch; color: var(--muted); }
.section-heading>.text-link { flex-shrink: 0; }
.section-work { padding-bottom: var(--section-gap-s); }
.project-grid { display: grid; grid-template-columns: minmax(0,1fr); }
.project-card { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--gap-columns); align-items: start; }
.project-cover { position: relative; min-width: 0; background: var(--soft); }
.project-image { aspect-ratio: 1.6; overflow: clip; }
.project-image img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.project-browser { min-width: 0; }
.concept-badge { display: inline-block; position: absolute; top: var(--space-md); left: var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--paper); color: var(--ink); font-size: var(--text-xs); }
.project-open { position: absolute; bottom: var(--space-md); right: var(--space-md); padding: var(--space-sm); background: var(--paper); color: var(--ink); }
.project-open svg { width: 24px; height: 24px; }
.project-caption { min-width: 0; border-top: 1px solid var(--ink); padding-top: var(--space-lg); }
.project-number,.project-type { font-size: var(--text-sm); color: var(--muted); }
.project-number { margin-right: var(--space-md); }
.project-caption h3,.project-caption h2 { margin-top: var(--space-xl); font-size: clamp(3rem,5vw,5rem); }
.project-caption p { font-size: var(--text-md); max-width: 40ch; margin-top: var(--space-lg); color: var(--muted); }
.project-facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); font-size: var(--text-sm); }
.project-facts span { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
.project-role { display: block; margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--muted); }
.project-discover { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-md); min-height: 48px; font-size: var(--text-sm); border-bottom: 1px solid var(--ink); }
.project-discover svg { width: 24px; height: 24px; }
.project-card:hover .project-discover { color: var(--forest); }
.section-footnote { margin-top: var(--space-lg); color: var(--muted); font-size: var(--text-md); }
.section-services { padding-top: var(--section-gap-s); background: var(--soft); color: var(--ink); }
.service-row { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(0,1fr) 140px 24px; gap: var(--gap-columns); align-items: center; min-height: 128px; border-top: 1px solid var(--line); padding-block: var(--space-lg); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.row-index { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--muted); }
.service-row p { color: var(--muted); max-width: 40ch; }
.service-timing { font-size: var(--text-sm); }
.circle-arrow svg { width: 24px; height: 24px; }
.service-row:hover { color: var(--forest); }
.approach-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: var(--gap-columns); }
.approach-copy { min-width: 0; }
.approach-copy h2 { max-width: 17ch; }
.approach-art { padding-top: var(--space-sm); min-width: 0; }
.approach-art>span { font-size: var(--text-lead); display: block; max-width: 20ch; }
.approach-art p { max-width: 25ch; color: var(--muted); margin-top: var(--space-lg); }
.principles { margin-top: var(--space-xl); }
.principle { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.principle>span { font-size: var(--text-sm); color: var(--muted); }
.principle p { margin-top: var(--space-sm); color: var(--muted); max-width: 48ch; }
.section-process { background: var(--ink); color: var(--paper); }
.section-process .section-heading>p { color: var(--dark-muted); }
.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--gap-columns); list-style: none; padding: 0; margin: 0; }
.process-step { border-top: 1px solid var(--dark-rule); padding-top: var(--space-lg); }
.process-number { display: block; font-size: var(--text-sm); color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2xl); }
.process-step p { margin-top: var(--space-md); color: var(--dark-muted); }
.faq-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: var(--gap-columns); }
.faq-heading h2 { max-width: 10ch; }
.faq-heading .text-link { margin-top: var(--space-xl); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); list-style: none; cursor: pointer; min-height: 88px; padding-block: var(--space-lg); font-size: var(--text-lead); }
summary::-webkit-details-marker { display: none; }
.faq-plus { font-size: 28px; font-weight: 400; flex-shrink: 0; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-answer { padding: 0 0 var(--space-lg); }
.faq-answer p { max-width: 58ch; color: var(--muted); }
.projects-page-work,.service-cards-section,.brief-section { padding-top: var(--space-2xl); }
.project-note { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--gap-columns); align-items: center; padding-top: var(--space-2xl); margin-top: var(--space-2xl); border-top: 1px solid var(--line); }
.project-note p { max-width: 52ch; color: var(--muted); margin-top: var(--space-md); }
.service-grid { display: grid; grid-template-columns: minmax(0,1fr); }
.service-card { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(0,1.2fr); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-2xl); border-top: 1px solid var(--line); scroll-margin-top: var(--space-lg); }
.service-card-top { color: var(--muted); font-size: var(--text-sm); }
.service-card h2 { font-size: var(--text-section); }
.service-card>p { grid-column: 2; color: var(--muted); max-width: 35ch; }
.service-card ul { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md) var(--gap-columns); align-content: start; }
.service-card li { border-bottom: 1px solid var(--line); padding-bottom: var(--space-sm); font-size: var(--text-sm); }
.service-card>.text-link { grid-column: 2; width: fit-content; margin-top: var(--space-md); }
.deliverables-grid,.timing-layout,.brief-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: var(--gap-columns); }
.deliverables-grid h2 { max-width: 12ch; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: grid; grid-template-columns: 32px minmax(0,1fr) 20px; gap: var(--space-lg); align-items: baseline; padding-block: var(--space-md); border-top: 1px solid var(--line); }
.check-list span { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.check-list b { color: var(--forest); font-weight: 400; }
.section-soft { background: var(--soft); color: var(--ink); }
.boundary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-columns); }
.boundary-card { padding-right: var(--space-xl); }
.boundary-card p { max-width: 48ch; margin-top: var(--space-lg); color: var(--muted); }
.timing-layout h2 { max-width: 11ch; }
.timing-layout p { margin-top: var(--space-lg); max-width: 30ch; color: var(--muted); }
.timing-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.timing-row strong { text-align: right; font-weight: 500; }
.brief-layout { align-items: start; }
.brief-aside h2 { max-width: 12ch; }
.brief-aside>p { max-width: 32ch; margin-top: var(--space-lg); color: var(--muted); }
.brief-email { display: flex; align-items: center; gap: var(--space-sm); width: fit-content; max-width: 100%; font-size: var(--text-md); padding-block: var(--space-md); margin-top: var(--space-md); border-bottom: 1px solid var(--ink); overflow-wrap: anywhere; }
.handoff-note { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.handoff-note strong { font-weight: 500; }
.handoff-note p { margin-top: var(--space-sm); color: var(--muted); font-size: var(--text-sm); }
.form-card { min-width: 0; }
.form-card-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.form-card-heading h2 { font-size: var(--text-title); }
.form-card-heading>span { font-size: var(--text-sm); color: var(--muted); }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gap-columns); }
.form-field { display: block; min-width: 0; margin-bottom: var(--space-lg); }
.form-field>span { display: block; font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.form-field b { font-weight: 500; }
.form-field input,.form-field select,.form-field textarea { display: block; width: 100%; min-width: 0; min-height: 52px; padding: var(--space-sm); border: 1px solid var(--muted); background: var(--paper); color: var(--ink); font-size: var(--text-md); line-height: 1.5; }
.form-field textarea { min-height: 128px; resize: vertical; }
.form-field input::placeholder,.form-field textarea::placeholder { color: var(--muted); opacity: 1; }
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible { outline-color: var(--forest); outline-offset: 3px; }
.form-extra { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-block: var(--space-lg); }
.form-extra summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; list-style: none; cursor: pointer; }
.form-extra[open]>div { padding-top: var(--space-lg); }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.form-note { margin-top: var(--space-lg); font-size: var(--text-sm); max-width: 60ch; color: var(--muted); }
.form-note a { text-decoration: underline; }
.form-status { min-height: 1.65em; margin-top: var(--space-md); font-size: var(--text-sm); }
.form-status.is-error { color: var(--color-error); }
.form-status.is-success { color: var(--color-success); }
.mail-fallback { font-size: var(--text-sm); }
.mail-fallback a { text-decoration: underline; overflow-wrap: anywhere; }
.site-footer { position: relative; background: var(--ink); color: var(--paper); padding-top: var(--space-3xl); }
.footer-top { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--gap-columns); padding-bottom: var(--space-2xl); }
.footer-intro h2 { font-size: var(--text-display-s); max-width: 12ch; }
.footer-email { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); margin-top: var(--space-md); max-width: 29ch; border-bottom: 1px solid var(--dark-rule); font-size: clamp(1.125rem,2.2vw,2rem); overflow-wrap: anywhere; }
.footer-email:hover { color: var(--accent); }
.footer-note p { color: var(--dark-muted); max-width: 30ch; margin-top: var(--space-lg); }
.footer-note .text-link { margin-top: var(--space-lg); }
.footer-bottom { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--dark-rule); font-size: var(--text-sm); color: var(--dark-muted); }
.footer-bottom>div { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.footer-bottom a,.ambient-toggle { display: inline-flex; align-items: center; min-height: 48px; }
.ambient-toggle { background: transparent; border: 0; padding: 0; color: var(--dark-muted); font-size: var(--text-sm); }
.ambient-toggle:hover,.ambient-toggle[aria-pressed=true] { color: var(--accent); }
.ambient-field { --ambient-tile-height: 1200px; --ambient-flow-duration: 60s; position: absolute; inset: 0; z-index: 1; overflow: clip; contain: paint; pointer-events: none; user-select: none; opacity: .45; }
.ambient-field::before { content: ''; position: absolute; inset: calc(-1 * var(--ambient-tile-height)) 0 0; background: url('portfolio-field.svg?v=42') 0 0 / 100% var(--ambient-tile-height) repeat-y; transform: translate3d(0,0,0); animation: ambient-flow-down var(--ambient-flow-duration) linear infinite; animation-play-state: paused; }
.ambient-running .ambient-field::before { animation-play-state: running; }
.ambient-paused .ambient-field::before,.ambient-held .ambient-field::before { animation-play-state: paused; }
@keyframes ambient-flow-down { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,var(--ambient-tile-height),0); } }
.noscript-note { padding-block: var(--space-md); font-size: var(--text-sm); }
@media(max-width:1150px) {
  :root { --gutter: 40px; }
  .main-nav,.nav-pages,.nav-actions { gap: var(--space-md); }
  .hero-grid { gap: var(--space-xl); }
  .hero h1 { font-size: clamp(3.5rem,6.8vw,5rem); }
  .service-row { grid-template-columns: 32px minmax(0,1fr) minmax(0,1fr) 120px 24px; }
}
@media(max-width:900px) {
  .header-inner { min-height: 80px; }
  .js .menu-toggle { display: inline-flex; }
  .main-nav { display: none; position: absolute; top: 80px; left: 0; right: 0; padding: var(--space-lg) var(--gutter) var(--space-xl); max-height: calc(100dvh - 80px); overflow-y: auto; background: var(--ink); color: var(--paper); border-top: 1px solid var(--dark-rule); }
  .main-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-lg); }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--space-md); }
  html:not(.js) .main-nav { display: flex; position: static; width: 100%; max-height: none; flex-direction: column; align-items: stretch; padding: var(--space-lg) 0 0; }
  .nav-pages { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
  .nav-link { font-size: var(--text-lg); min-height: 56px; }
  .nav-actions { justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); }
  .hero-grid { min-height: 0; max-height: none; padding-block: var(--space-xl); grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--gap-columns); }
  .hero h1 { font-size: clamp(2.75rem,6.2vw,4.5rem); }
  .hero-project-image { aspect-ratio: .76; }
  .hero-project-caption { flex-wrap: wrap; gap: var(--space-xs); }
  .hero-project-caption svg { margin-left: auto; }
  .project-card { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
  .service-row { grid-template-columns: 32px minmax(0,1fr) 24px; gap: var(--space-sm) var(--gap-columns); }
  .service-row h3,.service-row p,.service-timing { grid-column: 2; }
  .circle-arrow { grid-column: 3; grid-row: 1; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xl) var(--gap-columns); }
  .process-number { margin-bottom: var(--space-xl); }
  .approach-grid,.faq-layout,.deliverables-grid,.timing-layout,.brief-layout { grid-template-columns: minmax(0,1fr); row-gap: var(--space-xl); }
  .approach-art { display: flex; align-items: start; gap: var(--gap-columns); }
  .approach-art>span,.approach-art p { max-width: 30ch; margin: 0; }
  .faq-heading h2 { max-width: 20ch; }
  .brief-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md) var(--gap-columns); }
  .brief-aside>p { grid-column: 1; margin: 0; }
  .brief-email { grid-column: 1; margin-top: 0; }
  .handoff-note { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .service-card { grid-template-columns: 32px minmax(0,1fr) minmax(0,1.2fr); }
  .service-card h2 { font-size: var(--text-3xl); }
  .service-card ul { grid-template-columns: minmax(0,1fr); }
  .footer-top { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
}
@media(max-width:640px) {
  :root { --gutter: 20px; --gap-columns: 24px; }
  .brand-name { font-size: 17px; }
  .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .header-inner { min-height: 76px; }
  .main-nav { top: 76px; max-height: calc(100dvh - 76px); }
  .nav-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .language-button { min-height: 48px; min-width: 48px; }
  .hero-grid { grid-template-columns: minmax(0,1fr); padding-block: var(--space-xl); gap: var(--space-xl); }
  .hero h1 { max-width: 14ch; font-size: clamp(2.75rem,10.5vw,4rem); line-height: 1.08; letter-spacing: -.05em; }
  .hero-intro { font-size: var(--text-md); max-width: 35ch; }
  .button-row { margin-top: var(--space-lg); gap: var(--space-md) var(--space-lg); }
  .hero-project-image { aspect-ratio: 1.13; }
  .hero-project-caption { font-size: var(--text-sm); }
  .hero-bottom { padding-block: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); }
  .hero-bottom span { max-width: 28ch; }
  .page-hero { padding-block: var(--space-xl); }
  .page-hero-grid { grid-template-columns: minmax(0,1fr); }
  .page-hero h1 { font-size: clamp(2.5rem,10.5vw,4rem); max-width: 15ch; line-height: 1.1; }
  .page-hero p { font-size: var(--text-md); max-width: 35ch; }
  .page-hero-emblem { display: none; }
  .section-heading { align-items: start; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); }
  .section-heading h2 { max-width: 18ch; }
  .project-card { grid-template-columns: minmax(0,1fr); row-gap: var(--space-lg); }
  .project-image { aspect-ratio: 1.6; }
  .project-caption { padding-top: var(--space-lg); }
  .project-caption h3,.project-caption h2 { font-size: 48px; margin-top: var(--space-lg); }
  .project-caption p { max-width: 38ch; }
  .project-role { margin-top: var(--space-lg); }
  .project-note { grid-template-columns: minmax(0,1fr); row-gap: var(--space-lg); padding-top: var(--space-xl); margin-top: var(--space-xl); }
  .project-note>.button { justify-self: start; }
  .service-row { min-height: 0; padding-block: var(--space-lg); grid-template-columns: 24px minmax(0,1fr) 24px; }
  .service-row h3 { font-size: var(--text-xl); }
  .approach-art { flex-direction: column; gap: var(--space-md); }
  .principle { grid-template-columns: 24px minmax(0,1fr); }
  .process-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .process-step { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: var(--space-sm) var(--gap-columns); padding-block: var(--space-lg); }
  .process-number { grid-row: 1 / span 2; margin: 0; padding-top: var(--space-2xs); }
  .process-step p { grid-column: 2; margin-top: 0; }
  .faq-item summary { font-size: var(--text-md); min-height: 76px; }
  .faq-heading .text-link { margin-top: var(--space-lg); }
  .service-card { grid-template-columns: 24px minmax(0,1fr); padding-block: var(--space-xl); gap: var(--space-lg) var(--gap-columns); }
  .service-card h2 { font-size: var(--text-section); }
  .service-card ul { grid-column: 2; grid-row: auto; gap: var(--space-sm); }
  .service-card>p,.service-card>.text-link { grid-column: 2; }
  .service-card>.text-link { margin: 0; }
  .boundary-grid,.form-row,.footer-top { grid-template-columns: minmax(0,1fr); }
  .boundary-grid { row-gap: var(--space-xl); }
  .boundary-card { padding-right: 0; }
  .check-list li { grid-template-columns: 24px minmax(0,1fr) 16px; gap: var(--space-md); }
  .timing-row { flex-direction: column; gap: var(--space-xs); }
  .timing-row strong { text-align: left; }
  .brief-aside { display: block; }
  .brief-aside>p { margin-top: var(--space-lg); }
  .brief-email { margin-top: var(--space-sm); }
  .handoff-note { margin-top: var(--space-lg); }
  .form-card-heading { align-items: start; flex-direction: column; gap: var(--space-xs); }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .copy-brief { align-self: start; }
  .footer-top { row-gap: var(--space-xl); }
  .footer-email { font-size: var(--text-lg); }
  .footer-bottom { padding-block: var(--space-lg); flex-direction: column; align-items: start; gap: 0; }
  .footer-bottom>div { gap: var(--space-lg); }
  .site-footer { padding-top: var(--space-2xl); }
  .ambient-field { --ambient-tile-height: 900px; --ambient-flow-duration: 45s; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ambient-toggle { display: none; }
}

.project-concept { display:block; margin-top:var(--space-sm); font-size:var(--text-sm); color:var(--muted); }
.page-hero-grid>p { margin-top:0; }

.faq-heading .text-link { white-space:nowrap; }

.process-grid { counter-reset:process; }
.process-step { counter-increment:process; }
.process-step::before { content:counter(process,decimal-leading-zero); display:block; font-size:var(--text-sm); color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:var(--space-2xl); }
.service-cards-section { padding-top:var(--space-xl); }
.service-card:first-child { padding-top:var(--space-md); }
@media(max-width:640px) { .process-step::before { grid-row:1 / span 2; margin-bottom:0; } }

.service-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 140px 24px; }
@media(max-width:900px) { .service-row { grid-template-columns:minmax(0,1fr) 24px; } .service-row h3,.service-row p,.service-timing { grid-column:1; } .circle-arrow { grid-column:2; } }