:root {
    --ink: #111516;
    --ink-soft: #2f3637;
    --night: #0b0e0f;
    --night-2: #14191a;
    --paper: #f2efe8;
    --paper-2: #e7e2d8;
    --white: #fffdf8;
    --muted: #9a9e9b;
    --copper: #bd9364;
    --copper-dark: #7d5b37;
    --line-dark: rgba(255,255,255,.16);
    --line-light: rgba(17,21,22,.18);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
    --page: min(1320px, calc(100vw - 64px));
    --ease: cubic-bezier(.2,.7,.2,1);
    /* Distance the page spine sits outside the content column. Only enough
       gutter exists for it above 1440px, so it is an enhancement, not a base. */
    --spine-inset: 26px;
    /* Paper sections are a flat hex otherwise; this gives them a tooth that
       suits a business whose subject is materials. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--night); background: var(--copper); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 12px 16px; color: var(--night); background: var(--white); }
.skip-link:focus { top: 16px; }
.shell { width: var(--page); margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { width: 28px; height: 1px; content: ""; background: currentColor; opacity: .65; }
.display { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
/* Every section statement emphasises its operative phrase the way the hero
   does, so the pages below read as the same voice rather than filler. */
.display em { color: var(--copper); font-weight: 400; }
.section-title { max-width: 850px; font-size: clamp(48px, 6.4vw, 96px); }
.body-large { font-size: clamp(19px, 2vw, 26px); font-weight: 300; line-height: 1.45; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border: 1px solid transparent; border-radius: 1px; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .nav-toggle:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.button--light { color: var(--night); background: var(--white); }
.button--light:hover { background: var(--copper); }
.button--line { color: var(--white); border-color: rgba(255,255,255,.5); background: transparent; }
.button--line:hover { color: var(--night); border-color: var(--white); background: var(--white); }
.button--dark { color: var(--white); background: var(--night); }
.button--dark:hover { color: var(--night); background: var(--copper); }
.arrow { font-size: 17px; line-height: 1; transition: transform .2s; }
.button:hover .arrow { transform: translateX(4px); }

.site-header { height: 88px; position: absolute; z-index: 20; inset: 0 0 auto; color: var(--white); border-bottom: 1px solid var(--line-dark); }
.site-header__inner { width: var(--page); height: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { justify-self: start; display: inline-flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1; }
.brand__main { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.brand__sub { margin-top: 7px; font-size: 8px; letter-spacing: .34em; text-transform: uppercase; opacity: .7; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a { position: relative; text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.site-nav a::after { height: 1px; position: absolute; inset: auto 100% -7px 0; content: ""; background: var(--copper); transition: right .25s; }
.site-nav a:hover::after { right: 0; }
.header-contact { justify-self: end; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nav-toggle { width: 48px; height: 48px; display: none; align-items: center; justify-content: center; border: 1px solid var(--line-dark); color: var(--white); background: transparent; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before { width: 20px; height: 1px; display: block; position: relative; background: currentColor; transition: transform .2s; }
.nav-toggle span::before { position: absolute; top: 6px; content: ""; }

/* Travel is sized to the frame count so each shot gets a consistent slice of
   scroll: ~13svh per frame across 17 shots. Re-tune if frames are added. */
.hero { height: 300svh; position: relative; color: var(--white); background: var(--night); }
.hero__sticky { height: 100svh; position: sticky; top: 0; display: flex; overflow: hidden; background: var(--night); }
.hero__media { position: absolute; inset: 0; background: var(--night); }
/* Three targeted scrims instead of one blanket darkening, so the sunset skies
   stay bright and only the strips carrying text are protected:
   1. header band  - nav sits on the lightest part of the frame, needs its own
   2. left column  - headline and body copy
   3. bottom edge  - scroll cue, shot counter, and the seam into .signal */
.hero__media::before { position: absolute; z-index: 4; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(4,6,7,.38) 0%, rgba(4,6,7,.26) 88px, transparent 200px), linear-gradient(90deg, rgba(4,6,7,.78) 0%, rgba(4,6,7,.38) 45%, rgba(4,6,7,.03) 100%), linear-gradient(0deg, rgba(4,6,7,.46) 0%, transparent 46%); }
/* The camera move lives in the frames themselves, so scenes hold a fixed
   overscan and only opacity is animated — any scale here would double up. */
.hero__scene { height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 45%; filter: saturate(.72) brightness(1.22); opacity: 0; transform: scale(1.02); transform-origin: center; will-change: opacity; }
.hero__scene:first-child { opacity: 1; }
/* padding-bottom reserves the strip the cue and shot counter are pinned to,
   so copy never lands on top of them on short viewports. */
.hero__content { width: var(--page); position: relative; z-index: 5; margin: auto; padding-top: 110px; padding-bottom: 96px; will-change: opacity, transform; }
.hero h1 { max-width: 910px; font-size: clamp(68px, 8.4vw, 102px); }
.hero h1 em { display: block; color: var(--copper); font-weight: 400; }
.hero__lower { max-width: 900px; margin-top: 54px; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }
.hero__lower p { max-width: 580px; margin: 0; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.45vw, 21px); font-weight: 300; line-height: 1.6; }
.hero__actions { display: flex; gap: 10px; }
.hero__index { position: absolute; z-index: 6; right: max(32px, calc((100vw - min(1320px, calc(100vw - 64px))) / 2)); bottom: 38px; display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.hero__index::before { width: 80px; height: 1px; content: ""; background: var(--copper); }
.hero__index span { min-width: 62px; color: var(--copper); font-variant-numeric: tabular-nums; }
.hero__scroll-cue { position: absolute; z-index: 6; left: max(32px, calc((100vw - min(1320px, calc(100vw - 64px))) / 2)); bottom: 34px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.78); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; will-change: opacity; }
.hero__track { width: 1px; height: 52px; position: relative; overflow: hidden; background: rgba(255,255,255,.28); }
.hero__track span { width: 100%; height: 100%; position: absolute; inset: 0; background: var(--copper); transform: scaleY(0); transform-origin: top; will-change: transform; }
.hero__chapter { max-width: 500px; position: absolute; z-index: 5; right: max(32px, calc((100vw - min(1320px, calc(100vw - 64px))) / 2)); top: 50%; color: var(--white); opacity: 0; transform: translateY(-40%); text-align: right; pointer-events: none; will-change: opacity, transform; }
.hero__chapter p { margin: 0; font-family: var(--serif); font-size: clamp(38px, 4.8vw, 70px); line-height: .98; letter-spacing: -.035em; }
.hero__chapter span { margin-top: 18px; display: block; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.signal { color: var(--white); background: var(--night); border-top: 1px solid var(--line-dark); }
.signal__inner { width: var(--page); min-height: 116px; margin-inline: auto; display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; align-items: stretch; }
.signal__item { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; border-left: 1px solid var(--line-dark); }
.signal__item:first-child { padding-left: 0; border-left: 0; }
.signal__item span { color: var(--muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.signal__item strong { margin-top: 4px; font-family: var(--serif); font-size: 24px; font-weight: 400; }

.intro { padding: 100px 0; background-color: var(--paper); background-image: var(--grain), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.intro__grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 120px; align-items: end; }
.intro__aside { padding: 32px 28px 34px; border-left: 1px solid var(--copper); background: linear-gradient(180deg, rgba(189,147,100,.10), rgba(189,147,100,0)); }
.intro__aside p { margin: 0 0 26px; color: #4e5555; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.text-link span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; transition: background .2s, color .2s; }
.text-link:hover span { color: var(--white); background: var(--ink); }

/* Faint field behind the whole section. The veil sits over the art rather
   than baking dimness into the file, so the image stays reusable and the
   strength is one number to tune. Set --services-bg to switch it on. */
/* `contain` rather than `cover`: the section's aspect ranges 0.96–1.94, and
   cover would crop the eaves off the elevation on narrow screens. The art's
   black was remapped to this exact section colour on export, so the bands
   contain leaves are seamless. Veil is set by the contrast floor of the 15px
   row copy where it crosses linework — see --services-veil. */
.services { --services-veil: .86; --services-bg: url("/assets/services-bg.webp"); color: var(--white); background-color: var(--night-2); background-image: linear-gradient(rgba(20,25,26,var(--services-veil)), rgba(20,25,26,var(--services-veil))), var(--services-bg, none); background-size: auto, contain; background-position: center, center; background-repeat: no-repeat, no-repeat; }
.services__header { padding: 128px 0 70px; border-bottom: 1px solid var(--line-dark); }
.services__header .section-title { max-width: 1000px; }
/* Services is a rest beat: no entrance motion, all of its life is on hover.
   The three are parallel offerings, not a sequence, so they carry no numbers. */
.service-row { min-height: 310px; position: relative; display: grid; grid-template-columns: 1.15fr .85fr 50px; gap: 40px; align-items: center; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--line-dark); transition: background .25s; }
.service-row:hover { background: rgba(255,255,255,.025); }
.service-row::after { position: absolute; inset: auto 0 -1px 0; height: 1px; content: ""; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.service-row:hover::after, .service-row:focus-visible::after { transform: scaleX(1); }
.service-row h3 { margin: 0; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.025em; transition: transform .45s var(--ease); }
.service-row:hover h3, .service-row:focus-visible h3 { transform: translateX(12px); }
.service-row p { max-width: 430px; margin: 0; color: rgba(255,255,255,.58); font-size: 15px; }
.service-row__arrow { width: 48px; height: 48px; display: grid; place-items: center; justify-self: end; border: 1px solid var(--line-dark); border-radius: 50%; transition: border-color .2s, transform .2s; }
.service-row:hover .service-row__arrow, .service-row:focus-visible .service-row__arrow { border-color: var(--copper); transform: rotate(-35deg); }

.work { padding: 50px 0; background-color: var(--paper); background-image: var(--grain); }
.work__heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 100px; align-items: end; margin-bottom: 74px; }
.work__heading p { max-width: 460px; margin: 0 0 8px; color: #555c5d; }
.project-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: start; }
.project { margin: 0; }
.project--offset { margin-top: 120px; }
.project__image { position: relative; overflow: hidden; background: #cbc7bd; }
.project__image img { aspect-ratio: 1.28 / 1; object-fit: cover; filter: saturate(.68); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .3s; }
.project--offset .project__image img { aspect-ratio: .82 / 1; }
.project:hover img { filter: saturate(.9); transform: scale(1.025); }
.project__label { position: absolute; left: 18px; top: 18px; padding: 8px 10px; color: var(--white); background: rgba(11,14,15,.76); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); }
.project figcaption { display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-light); }
.project h3 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.05; }
.project figcaption span { color: #555d5c; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.prototype-note { margin-top: 44px; padding: 18px 0 0; color: #555d5c; border-top: 1px solid var(--line-light); font-size: 12px; }

.process { padding: 140px 0; color: var(--white); background: var(--night); }
.process__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 90px; }
.process__head p { max-width: 520px; margin: 0; color: rgba(255,255,255,.6); }
/* The steps are a genuine sequence, so they get the page's one timeline:
   a rule that fills as you scroll, with a node marking each stage. */
.process-list { position: relative; padding-left: 38px; border-top: 1px solid var(--line-dark); }
.process-list::before { position: absolute; inset: 0 auto 0 0; width: 1px; content: ""; background: var(--line-dark); }
.process-list__fill { position: absolute; inset: 0 auto auto 0; width: 1px; height: 100%; background: var(--copper); transform: scaleY(0); transform-origin: top; will-change: transform; }
.process-step { position: relative; display: grid; grid-template-columns: 100px .9fr 1.1fr; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--line-dark); }
.process-step::before { position: absolute; left: -41px; top: 46px; width: 7px; height: 7px; content: ""; border: 1px solid var(--copper); border-radius: 50%; background: var(--night); transition: background .4s var(--ease); }
.process-step.is-reached::before { background: var(--copper); }
.process-step__no { color: var(--copper); font-size: 11px; letter-spacing: .14em; }
.process-step h3 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; }
.process-step p { max-width: 540px; margin: 0; color: rgba(255,255,255,.58); font-size: 14px; }

.consult { display: grid; grid-template-columns: .85fr 1.15fr; background: var(--paper-2); }
.consult__visual { min-height: 900px; position: relative; }
.consult__visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(11,14,15,.75), transparent 60%); }
.consult__visual img { height: 100%; object-fit: cover; filter: saturate(.55); }
.consult__visual-copy { position: absolute; z-index: 1; inset: auto 52px 54px; color: var(--white); }
.consult__visual-copy p { max-width: 440px; margin: 18px 0 0; color: rgba(255,255,255,.7); }
.consult__form-wrap { padding: 110px max(64px, 8vw); }
.consult__form-wrap h2 { max-width: 650px; font-size: clamp(52px, 5.5vw, 82px); }
.consult__form-wrap > p { max-width: 620px; margin: 28px 0 52px; color: #52595a; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1px solid #a7a59e; border-radius: 0; color: var(--ink); background: transparent; appearance: none; }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #898c88; }
.field-hint { margin: 0; color: #6b716f; font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.field label .field-hint { margin-left: 8px; }
.field--files input[type=file] { min-height: 0; padding: 6px 0 0; font-size: 12px; color: #52595a; border-bottom: 0; }
.field--files input[type=file]::file-selector-button { min-height: 38px; margin-right: 14px; padding: 0 18px; border: 1px solid var(--night); border-radius: 1px; color: var(--night); background: transparent; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.field--files input[type=file]::file-selector-button:hover { color: var(--white); background: var(--night); }
.field--files input[type=file]:disabled::file-selector-button { opacity: .5; cursor: default; }
.attachments { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.attachment { display: flex; align-items: center; gap: 14px; padding: 9px 13px; border-left: 2px solid var(--copper-dark); background: rgba(255,255,255,.55); font-size: 12px; }
.attachment__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment__size { color: #6b716f; font-variant-numeric: tabular-nums; }
.attachment__remove { padding: 0; border: 0; color: #6b716f; background: transparent; font: inherit; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.attachment__remove:hover { color: #9c3a2f; }
.field-errors { margin: 4px 0 0; padding-left: 16px; color: #9c3a2f; font-size: 11px; line-height: 1.7; }

/* Turnstile renders in interaction-only mode, so this is an empty box on almost
   every visit — :not(:empty) keeps it from leaving a gap when it is. */
.form-verify:not(:empty) { margin-top: 26px; }

/* Off-screen rather than display:none. A bot that skips hidden inputs is
   exactly the bot this is meant to catch. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-footer { margin-top: 32px; display: flex; align-items: center; gap: 22px; }
.form-note { max-width: 320px; margin: 0; color: #535957; font-size: 11px; }
.button[disabled] { opacity: .5; cursor: progress; }
.button[disabled]:hover { transform: none; }
.form-status { display: none; margin-top: 22px; padding: 14px 18px; border-left: 2px solid var(--copper-dark); background: rgba(255,255,255,.45); font-size: 13px; }
.form-status.is-visible { display: block; }
.form-status--error { border-left-color: #9c3a2f; }
.form-status--success { border-left-color: #6b7f66; }

.site-footer { padding: 80px 0 32px; color: var(--white); background: var(--night); }
.footer-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; padding-bottom: 70px; border-bottom: 1px solid var(--line-dark); }
.footer-mark { max-width: 580px; font-family: var(--serif); font-size: clamp(48px, 6vw, 88px); font-weight: 400; line-height: .9; letter-spacing: -.03em; }
.footer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-self: end; }
.footer-details h3 { margin: 0 0 16px; color: var(--muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.footer-details p, .footer-details a { margin: 0; color: rgba(255,255,255,.76); text-decoration: none; font-size: 14px; }
.footer-details a:hover { color: var(--copper); }
.footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* Motion rhythm. Bare [data-reveal] rises in — used on the sections that
   should move. ="calm" only fades, giving the page rest beats between them.
   Gated on .js (set by an inline script in <head>) so the hidden state only
   ever exists when there is script running to undo it. Without that gate a
   throttled or failed script leaves the copy permanently invisible. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="calm"] { transform: none; transition-duration: .55s; }
.process-step[data-reveal]:nth-of-type(2) { transition-delay: .09s; }
.process-step[data-reveal]:nth-of-type(3) { transition-delay: .18s; }
.process-step[data-reveal]:nth-of-type(4) { transition-delay: .27s; }
.project[data-reveal]:nth-of-type(2) { transition-delay: .12s; }
[data-parallax] { will-change: transform; }

/* The spine only appears where there is real gutter to hold it. Below
   1440px the content margin is 32px, which is not enough room. */
.flow { position: relative; }
.spine, .spine-tick::before { display: none; }
@media (min-width: 1440px) {
    .spine { display: block; position: absolute; z-index: 1; inset: 0 auto 0 calc((100vw - var(--page)) / 2 - var(--spine-inset)); width: 1px; background: rgba(150,128,102,.26); pointer-events: none; }
    .spine__fill { position: absolute; inset: 0 0 auto 0; height: 100%; background: var(--copper); transform: scaleY(0); transform-origin: top; will-change: transform; }
    .spine-tick { position: relative; }
    .spine-tick::before { display: block; position: absolute; z-index: 2; left: calc((100vw - var(--page)) / 2 - var(--spine-inset)); top: 0; width: 13px; height: 1px; content: ""; background: var(--copper); opacity: .5; }
}

@media (max-width: 980px) {
    :root { --page: calc(100vw - 40px); }
    .site-header__inner { grid-template-columns: 1fr auto; }
    .site-nav { position: fixed; inset: 88px 0 auto; display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 28px 20px 40px; color: var(--white); background: rgba(11,14,15,.98); border-bottom: 1px solid var(--line-dark); }
    .site-nav.is-open { display: flex; }
    .site-nav a { width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
    .header-contact { display: none; }
    .nav-toggle { display: flex; }
    .hero__lower { grid-template-columns: 1fr; gap: 32px; }
    .hero__actions { flex-wrap: wrap; }
    .signal__inner { grid-template-columns: 1fr 1fr; }
    .signal__item:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
    .signal__item:nth-child(4) { border-top: 1px solid var(--line-dark); }
    .intro__grid, .work__heading, .process__head { grid-template-columns: 1fr; gap: 52px; }
    .intro__aside { max-width: 600px; }
    .service-row { min-height: 0; grid-template-columns: 1fr 50px; gap: 20px 32px; padding: 56px 0; }
    .service-row p { grid-column: 1 / 2; }
    .service-row__arrow { grid-column: 2; grid-row: 1 / 3; }
    .consult { grid-template-columns: 1fr; }
    .consult__visual { min-height: 620px; }
    .consult__form-wrap { padding: 90px 40px; }
    .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    :root { --page: calc(100vw - 32px); }
    .site-header { height: 76px; }
    .brand__main { font-size: 20px; }
    .brand__sub { font-size: 7px; }
    .site-nav { top: 76px; }
    .hero { height: 250svh; }
    .hero__content { padding-top: 80px; }
    .hero h1 { font-size: clamp(56px, 18vw, 84px); }
    .hero__lower { margin-top: 34px; }
    .hero__actions { align-items: stretch; flex-direction: column; }
    .hero__actions .button { width: 100%; }
    .hero__index { display: none; }
    .hero__scroll-cue { left: 16px; bottom: 22px; }
    .hero__scroll-cue > span:last-child { max-width: 110px; line-height: 1.35; }
    .hero__chapter { max-width: calc(100vw - 32px); right: 16px; left: 16px; top: 48%; }
    .hero__chapter p { font-size: clamp(42px, 14vw, 66px); }
    .signal__inner { grid-template-columns: 1fr; }
    .signal__item { min-height: 94px; padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
    .signal__item:first-child { border-top: 0; }
    .intro, .work { padding: 100px 0; }
    .services__header { padding: 90px 0 50px; }
    .service-row { min-height: 0; grid-template-columns: 1fr; gap: 16px; padding: 42px 0; }
    .service-row h3 { font-size: 42px; }
    .service-row:hover h3, .service-row:focus-visible h3 { transform: none; }
    .service-row p { grid-column: auto; }
    .service-row__arrow { display: none; }
    .project-grid { grid-template-columns: 1fr; }
    .project--offset { margin-top: 44px; }
    .project--offset .project__image img { aspect-ratio: 1.05 / 1; }
    .process { padding: 100px 0; }
    .process-list { padding-left: 26px; }
    .process-step { grid-template-columns: 45px 1fr; gap: 18px; }
    .process-step::before { left: -29px; top: 42px; }
    .process-step p { grid-column: 2; }
    .consult__visual { min-height: 520px; }
    .consult__visual-copy { inset: auto 24px 28px; }
    .consult__form-wrap { padding: 80px 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .field--full { grid-column: auto; }
    .form-footer { align-items: stretch; flex-direction: column; }
    .form-footer .button { width: 100%; }
    .footer-top { gap: 54px; }
    .footer-details { grid-template-columns: 1fr; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    [data-parallax] { transform: none !important; }
    .spine__fill, .process-list__fill { transform: scaleY(1) !important; }
    .process-step::before { background: var(--copper); }
    .hero { height: 100svh; min-height: 760px; }
    .hero__sticky { height: 100%; min-height: inherit; position: relative; }
    .hero__scene:not(:first-child), .hero__scroll-cue, .hero__chapter { display: none; }
}

/* Blazor framework hooks. The template ships these as red browser outlines
   on a Bootstrap baseline; restyled to the design system so validation reads
   as part of the page rather than as a default. */
h1:focus { outline: none; }
.field .invalid { border-bottom-color: #9c3a2f; }
.field .valid.modified { border-bottom-color: #6b7f66; }
.validation-message { margin: 2px 0 0; color: #9c3a2f; font-size: 11px; letter-spacing: .02em; }