:root {
  --accent: #EC5C28;
  --accent-bright: #FF6B35;
  --accent-hover: #A83C16;
  --accent-strong: #B8431A;
  --accent-ink: #9A3A12;
  --accent-tint: rgba(236, 92, 40, .10);
  --ink: #17181A;
  --ink-2: #1F2124;
  --ink-3: #2A2D31;
  --graphite: #3C4046;
  --stone: #656970;
  --stone-2: #93979D;
  --paper: #F5F3EF;
  --paper-2: #FBFAF8;
  --sand: #EDEAE3;
  --line: #E6E3DD;
  --line-strong: #D8D4CC;
  --white: #FBFAF8;
  --whatsapp: #157A3E;
  --state-error: #A53524;
  --state-error-bg: #F8E8E4;
  --state-success: #157A3E;
  --state-success-bg: #E7F2E9;
  --on-dark: rgba(255,255,255,.94);
  --on-dark-mute: rgba(255,255,255,.62);
  --on-dark-line: rgba(255,255,255,.15);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --maxw: 1280px;
  /* 4pt scale. Structural spacing comes from here; optical nudges inside
     components (input padding, icon offsets) stay literal on purpose. */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  /* Section rhythm has three steps, not one. Light editorial sections breathe
     at --section; the two dark photographic bands open up to --section-loose
     and act as the page's weight anchors. */
  --section: clamp(80px, 8.5vw, 124px);
  --section-loose: clamp(104px, 11vw, 168px);
  --section-tight: clamp(56px, 6vw, 88px);
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --z-nav: 100;
  --z-menu: 110;
  --z-overlay: 120;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper-2); color: var(--ink); font: 400 16px/1.6 var(--font-body); overflow-x: hidden; -webkit-tap-highlight-color: rgba(236, 92, 40, .16); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--accent-strong); color: var(--white); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; left: 18px; top: 18px; z-index: 1000; background: var(--ink); color: var(--white); padding: 12px 18px; transform: translateY(-200%); transition: transform .2s var(--ease); }
.skip:focus { transform: none; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap { width: min(calc(100% - 64px), var(--maxw)); margin-inline: auto; }
.section { position: relative; padding: var(--section) 0; }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--stone); }
.eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 1px; }
.display { margin: 0; font-family: var(--font-display); font-size: clamp(2.55rem, 5.4vw, 5.5rem); font-weight: 600; line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.display--mid { font-size: clamp(2.2rem, 4.1vw, 4.3rem); }
.lede { max-width: 56ch; margin: 0; color: var(--stone); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.72; text-wrap: pretty; }

.btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: var(--r-xs); padding: 13px 20px; cursor: pointer; font-weight: 600; line-height: 1; transition: transform .24s var(--ease), background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--accent-strong); color: var(--white); }
/* The system's one coloured shadow, reserved for the primary action. */
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 14px 34px -12px rgba(236,92,40,.45); }
.btn--light { background: var(--paper-2); color: var(--ink); }
.btn--light:hover { background: var(--sand); }
.btn--line { border: 1px solid currentColor; background: transparent; }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.text-link::after { content: '↗'; display: inline-grid; place-items: center; width: 23px; height: 23px; background: var(--accent); color: var(--ink); font-size: 12px; transition: transform .2s; }
.text-link:hover::after { transform: translate(2px,-2px); }

/* Shared navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.13); transition: background .3s, color .3s, border-color .3s; }
.nav.scrolled, .legal-page .nav { background: rgba(251,250,248,.94); color: var(--ink); border-color: var(--line); backdrop-filter: blur(16px); }
.nav__inner { width: min(calc(100% - 48px), 1420px); min-height: 72px; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav__brand { display: inline-flex; align-items: center; width: fit-content; }
.nav__brand img { width: auto; height: 40px; filter: brightness(0) invert(1); transition: filter .3s; }
.nav.scrolled .nav__brand img, .legal-page .nav__brand img { filter: none; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__link { position: relative; font-size: 13px; font-weight: 500; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav__call { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid currentColor; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid currentColor; background: transparent; cursor: pointer; }
.nav__toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; }
.nav__scrim { position: fixed; inset: 0; z-index: 104; background: rgba(23,24,26,.62); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.nav__scrim.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.nav__mobile { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-menu); width: min(390px, 90vw); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 26px; padding-right: max(26px, env(safe-area-inset-right)); padding-bottom: max(26px, env(safe-area-inset-bottom)); background: var(--ink); color: var(--white); transform: translateX(102%); transition: transform .45s var(--ease); }
.nav__mobile.open { transform: none; }
.nav__mobile > * { flex: 0 0 auto; }
.nav__mobile-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: clamp(20px, 5vh, 38px); border-bottom: 1px solid var(--on-dark-line); }
.nav__mobile-top button { width: 44px; height: 44px; border: 1px solid var(--on-dark-line); background: transparent; color: var(--white); font-size: 24px; cursor: pointer; }
.m-link { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--on-dark-line); font: 500 clamp(19px, 4.4vh, 24px)/1.1 var(--font-display); }
.m-link span { font: 400 10px/1 var(--font-mono); color: var(--on-dark-mute); }
.nav__mobile-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }

/* Hero */
.hero { position: relative; min-height: min(900px, 92dvh); background: var(--ink); color: var(--white); overflow: hidden; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; opacity: .86; transform: scale(1.015); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,17,.78) 0%, rgba(15,16,17,.42) 42%, rgba(15,16,17,.08) 76%), linear-gradient(0deg, rgba(15,16,17,.42), transparent 44%); }
.hero__content { position: relative; z-index: 2; width: min(calc(100% - 64px), 1160px); min-height: min(900px, 92dvh); margin-inline: auto; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 100px; }
.hero__kicker { margin-bottom: 22px; color: rgba(255,255,255,.68); }
.hero__title { max-width: 790px; margin: 0; font: 600 clamp(3.4rem, 7.9vw, 8rem)/.86 var(--font-display); letter-spacing: -.07em; text-wrap: balance; }
.hero__title em { color: var(--accent); font-style: normal; }
.hero__bottom { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-top: 42px; }
.hero__sub { max-width: 48ch; margin: 0; color: rgba(255,255,255,.77); font-size: 17px; line-height: 1.65; }
.hero__meta { display: grid; grid-template-columns: repeat(3,auto); gap: 24px; }
.hero__meta div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.25); }
.hero__meta b { display: block; font: 500 20px/1 var(--font-display); }
.hero__meta span { display: block; margin-top: 7px; color: rgba(255,255,255,.58); font: 400 9px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* Intro overlap */
.intro-shell { position: relative; z-index: 5; margin-top: -76px; }
.intro-card { width: min(calc(100% - 64px), 1180px); margin-left: auto; padding: clamp(60px, 7vw, 104px) clamp(32px, 7vw, 100px); background: var(--paper-2); display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(44px, 8vw, 120px); }
.intro-card__mark { color: var(--accent); font: 600 clamp(4rem, 8vw, 8rem)/.8 var(--font-display); letter-spacing: -.06em; }
.intro-card__copy h2 { max-width: 720px; margin: 0 0 26px; font: 600 clamp(2rem, 3.6vw, 3.75rem)/1 var(--font-display); letter-spacing: -.045em; text-wrap: balance; }
.proof-line { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 34px; padding-top: 23px; border-top: 1px solid var(--line); color: var(--stone); }
.proof-line span { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--font-mono); }
.proof-line i { width: 5px; height: 5px; background: var(--accent); }

/* Photo ribbon — a bleeding strip that stays reachable: it scrolls rather than clips. */
.photo-ribbon { padding: var(--space-lg) 0 var(--section-tight); }
/* Columns grow with the viewport up to the size they reach around 1440px and
   hold there; past ~2000px the strip is centred instead of stretching on. */
.photo-ribbon__track { display: grid; grid-template-columns: min(23vw, 330px) min(16vw, 230px) min(31vw, 445px) min(20vw, 290px) min(28vw, 400px) min(17vw, 245px); gap: 8px; padding-inline: max(12px, calc((100% - 1980px) / 2)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.photo-ribbon__track::-webkit-scrollbar { display: none; }
.photo-ribbon figure { height: clamp(170px, 20vw, 300px); margin: 0; overflow: hidden; scroll-snap-align: center; }
.photo-ribbon figure:nth-child(even) { margin-top: 34px; }
.photo-ribbon :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.photo-ribbon figure:hover :is(img, video) { transform: scale(1.035); }

/* Project index */
.projects { background: var(--paper-2); }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(54px, 8vw, 100px); }
.projects__list { border-top: 1px solid var(--line-strong); }
.project-row { display: grid; grid-template-columns: 1.2fr .45fr .45fr 220px; align-items: center; gap: 28px; min-height: 190px; border-bottom: 1px solid var(--line-strong); transition: background .3s; }
.project-row:hover { background: var(--paper); }
.project-row__title { margin: 0 0 10px; font: 600 clamp(1.45rem, 2.3vw, 2.4rem)/1 var(--font-display); letter-spacing: -.035em; }
.project-row__desc { max-width: 56ch; margin: 0; color: var(--stone); font-size: 14px; }
.project-row__meta span { display: block; color: var(--stone); font: 400 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.project-row__meta b { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; }
.project-row__image { height: 142px; overflow: hidden; }
.project-row__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project-row:hover img { transform: scale(1.045); }

/* Services */
.services { background: var(--ink); color: var(--white); padding: var(--section-loose) 0; }
.services__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Every dark surface mutes the eyebrow the same way; keep it in one place. */
.services__content .eyebrow, .results__head .eyebrow, .footer__lead .eyebrow { color: var(--on-dark-mute); }
.services__title { margin: 0 0 40px; font: 500 clamp(2.1rem, 4vw, 4.25rem)/.98 var(--font-display); letter-spacing: -.05em; }
.services__nav { border-top: 1px solid var(--on-dark-line); }
.service-row { border-bottom: 1px solid var(--on-dark-line); }
.service-tab { width: 100%; display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 14px; padding: 17px 0; border: 0; background: transparent; color: rgba(255,255,255,.68); text-align: left; cursor: pointer; transition: color .25s var(--ease); }
/* The label steps forward on transform rather than padding, so the row never relayouts. */
.service-tab__num, .service-tab__name { transition: transform .25s var(--ease); }
.service-tab:hover, .service-row.is-open .service-tab { color: var(--white); }
.service-tab:hover .service-tab__num, .service-tab:hover .service-tab__name,
.service-row.is-open .service-tab__num, .service-row.is-open .service-tab__name { transform: translateX(8px); }
.service-tab__icon { transition: background .25s var(--ease), color .25s var(--ease); }
.service-row.is-open .service-tab__icon { background: var(--accent); color: var(--ink); }

/* Open/close on grid-template-rows, never on height. The inner wrapper also
   flips visibility so a collapsed description leaves the accessibility tree. */
.service-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.service-row.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel__inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear .5s; }
.service-row.is-open .service-panel__inner { visibility: visible; transition: visibility 0s; }
/* min-height keeps every open panel the same size, so switching services does not
   shunt the button below it up and down. */
.service-panel p { margin: 0; padding: 0 0 22px 50px; min-height: calc(3 * 1.6em + 22px); max-width: 52ch; color: var(--on-dark-mute); font-size: 15px; line-height: 1.6; }
.service-tab__num { font: 400 9px/1 var(--font-mono); color: var(--accent); }
.service-tab__name { font: 500 clamp(1.12rem, 1.65vw, 1.55rem)/1.1 var(--font-display); }
.service-tab__icon { width: 26px; height: 26px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.services__nav + .btn { margin-top: var(--space-xl); }

/* Values rail — five process steps, all five reachable at every width. */
.values { background: var(--paper); }
.values__head { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-2xl); }
.rail-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--stone); }
.rail-hint i { font-style: normal; }
.values__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 8px; padding-inline: max(32px, calc((100% - var(--maxw)) / 2)); padding-bottom: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.values__rail::-webkit-scrollbar { display: none; }
.values__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* Bodies bottom-align across the rail, which needs the card only as tall as the
   longest one; 260px left a void under every heading. */
.value-card { min-height: 224px; padding: var(--space-lg); display: flex; flex-direction: column; border: 1px solid var(--line-strong); background: var(--sand); scroll-snap-align: center; }
.value-card__num { display: block; color: var(--accent); font: 700 16px/1 var(--font-mono); letter-spacing: .04em; }
.value-card h3 { margin: 24px 0 12px; font: 600 19px/1.1 var(--font-display); }
.value-card p { margin: auto 0 0; max-width: 35ch; color: var(--stone); font-size: 13px; line-height: 1.55; }

/* About */
.about { background: var(--paper-2); }
/* Not a hedge: "Ein Ansprechpartner." needs 532px at this size, so the content
   column is fitted to the headline. The asymmetry here is carried by the
   overlapping 78%/48% image pair instead of the column split. */
.about__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(56px, 8vw, 120px); }
.about__visual { position: relative; min-height: 620px; }
.about__visual img { width: 78%; height: 520px; object-fit: cover; }
.about__visual img + img { position: absolute; width: 48%; height: 300px; right: 0; bottom: 0; border: 12px solid var(--paper-2); }
.about__content .lede { margin: 28px 0 32px; }
.about__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.about__fact { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.about__fact b { color: var(--accent-ink); font: 400 10px/1.5 var(--font-mono); }
.about__fact span { font-size: 14px; font-weight: 500; }

/* Results gallery */
.results { position: relative; padding: var(--section-loose) 0; color: var(--white); background: var(--ink); overflow: hidden; }
.results::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,24,26,.92), rgba(23,24,26,.58)), url('/img/hf_20260319_212308_b092fc54-c442-4165-8d5c-ca927f246a76.webp') center/cover; opacity: .9; }
.results .wrap { position: relative; }
.results__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
.gallery__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.gallery__filter { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--on-dark-line); background: rgba(23,24,26,.34); color: rgba(255,255,255,.72); padding: 10px 15px; cursor: pointer; font-size: 12px; transition: .2s; }
.gallery__filter:hover, .gallery__filter.active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery__item { position: relative; min-height: 350px; margin: 0; overflow: hidden; background: var(--sand); color: var(--ink); cursor: zoom-in; }
.gallery__item:nth-child(4n+2) { grid-column: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
/* The scrim has to carry this text over any photo, including a white wall or bright sky. */
.gallery__item-cap { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 12px; padding: 40px 14px 12px; color: var(--white); background: linear-gradient(transparent, rgba(15,16,17,.5) 40%, rgba(15,16,17,.94)); font-size: 12px; text-shadow: 0 1px 2px rgba(12,13,14,.55); }
.gallery__item.hide, .gallery__item.beyond { display: none; }
/* Filtering and "load more" reflow the grid, so the arriving tiles carry the motion. */
.gallery__item.enter { animation: tile-in .5s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px); } }
.gallery__more { display: flex; justify-content: center; margin-top: 28px; }
.gallery__more.is-done { display: none; }

/* Contact */
.contact { background: var(--sand); }
.contact__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(56px, 8vw, 112px); align-items: start; }
.contact__left .lede { margin: 28px 0 32px; }
.contact__info { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.contact__info-item { padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.contact__info-item span { display: block; margin-bottom: 4px; color: var(--stone); font: 400 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.contact__info-item a, .contact__info-item strong { font-weight: 600; }
.contact__card { padding: clamp(28px, 4vw, 52px); background: var(--paper-2); border: 1px solid var(--line-strong); }
.contact__card h3 { margin: 0 0 6px; font: 600 26px/1 var(--font-display); }
.contact__card > p { margin: 0 0 28px; color: var(--stone); font-size: 13px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.form-group input, .form-group textarea { width: 100%; min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--r-xs); background: var(--sand); color: var(--ink); padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* State is never colour alone: the border shifts, and a marked message appears below. */
.form-err { display: none; margin-top: 6px; color: var(--state-error); font-size: 12px; }
.form-group.error .form-err { display: flex; align-items: center; gap: 6px; }
.form-err::before { content: '!'; flex: 0 0 auto; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--state-error); color: var(--white); font: 700 9px/1 var(--font-mono); }
.form-group.error input, .form-group.error textarea { border-color: var(--state-error); }
.form-group.error input:focus, .form-group.error textarea:focus { box-shadow: 0 0 0 3px rgba(165,53,36,.14); }
.contact__submit { width: 100%; position: relative; overflow: hidden; }
/* Sending is a state, not a disabled control: hold full contrast and show it working. */
.btn:disabled { cursor: progress; transform: none; box-shadow: none; }
.btn--primary:disabled, .btn--primary:disabled:hover { background: var(--accent-ink); box-shadow: none; }
.contact__submit:disabled::after { content: ''; position: absolute; left: 0; bottom: 0; width: 38%; height: 2px; background: var(--white); opacity: .6; animation: submit-scan 1.15s var(--ease) infinite; }
@keyframes submit-scan { from { transform: translateX(-110%); } to { transform: translateX(375%); } }
.form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-xs); font-size: 13px; }
.form-status.show { display: block; }
.form-status.success { background: var(--state-success-bg); color: var(--state-success); }
.form-status.fail { background: var(--state-error-bg); color: var(--state-error); }
.contact__disclaimer { margin: 14px 0 0 !important; font-size: 11px !important; }
.contact__disclaimer a { text-decoration: underline; }

/* Footer */
.footer { position: relative; color: rgba(255,255,255,.72); background: var(--ink); overflow: hidden; }
.footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,24,26,.93), rgba(23,24,26,.70)), url('/img/hf_20260319_210807_a0e9c72d-59e0-4c50-a6d5-efbd054f792a.webp') center/cover; opacity: .82; }
.footer__inner, .footer__bottom { position: relative; }
.footer__inner { width: min(calc(100% - 64px), var(--maxw)); margin-inline: auto; padding: var(--section-tight) 0 var(--space-3xl); }
.footer__lead { max-width: 570px; margin-bottom: var(--space-4xl); }
.footer__lead h2 { margin: 0 0 24px; color: var(--white); font: 600 clamp(2.7rem, 5vw, 5rem)/.92 var(--font-display); letter-spacing: -.055em; }
.footer__grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr .9fr; gap: 46px; }
.footer__brand img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.footer__desc { max-width: 32ch; font-size: 13px; }
.footer h4 { margin: 0 0 20px; color: var(--white); font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.footer__link { display: block; margin: 9px 0; font-size: 13px; transition: color .2s; }
.footer__link:hover { color: var(--white); }
.footer__ci { display: flex; gap: 10px; margin: 10px 0; font-size: 13px; }
.footer__social { display: flex; gap: 8px; margin-top: 20px; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--on-dark-line); transition: background .2s, border-color .2s, color .2s; }
.footer__social a:hover { background: var(--on-dark-line); color: var(--white); }
.footer__bottom { border-top: 1px solid var(--on-dark-line); padding-bottom: env(safe-area-inset-bottom); }
.footer__bottom-inner { width: min(calc(100% - 64px), var(--maxw)); margin-inline: auto; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; }
.footer__bottom-links { display: flex; gap: 6px; padding-right: 72px; }
.footer__bottom-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.footer__bottom-links a:first-child { margin-left: -8px; }
.wa-float { position: fixed; z-index: 80; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); width: 52px; height: 52px; display: grid; place-items: center; background: var(--whatsapp); color: var(--white); border-radius: 50%; box-shadow: 0 14px 30px rgba(35,25,15,.26); transition: transform .2s; }
.wa-float:hover { transform: translateY(-3px); }

/* Floating dock — a second navigation within thumb reach. It stays out of the
   way until the hero is behind you, tracks the section actually being read, and
   steps aside once the contact section arrives, so it never covers the form it
   has been pointing at all the way down the page. */
.dock { position: fixed; inset: auto 0 0; z-index: 95; display: flex; flex-direction: column; align-items: center; padding: 0 12px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(calc(100% + 12px)); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.dock.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
/* One hook covers both overlays: the mobile menu and the lightbox set menu-open. */
body.menu-open .dock { opacity: 0; visibility: hidden; transform: translateY(calc(100% + 12px)); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
.dock__stack { position: relative; display: flex; }
/* One surface, nothing boxed inside it: the bar is text and glyphs, and the only
   colour is the accent hairline that marks where you are. */
.dock__inner { position: relative; display: flex; align-items: center; padding: 5px 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-xs); background: rgba(23,24,26,.82); backdrop-filter: blur(20px); box-shadow: 0 14px 34px -20px rgba(12,13,14,.7); color: var(--white); pointer-events: auto; }
/* Reading progress for the whole page, drawn on the dock's own top edge. */
.dock__progress { position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255,255,255,.07); }
.dock__progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.dock__current { display: none; }
.dock__links { position: relative; display: flex; align-items: center; }
/* The marker travels on transform and width, so the row itself never relayouts. */
.dock__marker { position: absolute; left: 0; bottom: 5px; width: var(--w, 0px); height: 2px; background: var(--accent); opacity: 0; transform: translateX(var(--x, 0px)); transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease); }
.dock.has-active .dock__marker { opacity: 1; }
.dock__link { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); transition: color .25s var(--ease); }
.dock__link:hover, .dock__link[aria-current] { color: var(--white); }
.dock__actions { display: flex; align-items: center; margin-left: 10px; }
.dock__icon { width: 36px; height: 36px; display: grid; place-items: center; color: rgba(255,255,255,.55); transition: color .25s var(--ease); }
.dock__icon:hover { color: var(--white); }
.dock__icon--wa:hover { color: #4FD469; }
.dock__cta { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--white); transition: color .25s var(--ease); }
.dock__cta span { display: inline-block; color: var(--accent); transition: transform .25s var(--ease); }
.dock__cta:hover { color: var(--accent); }
.dock__cta:hover span { transform: translate(2px, -2px); }
/* The section sheet belongs to the compact layout only; below 760px the inline
   links give way to a chip that opens this list upwards, into the thumb zone. */
.dock__sheet { display: none; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: 60px; background: rgba(12,13,14,.96); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
/* Visibility flips on the first frame when opening, so the dialog can take focus at once. */
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }
.lightbox img { max-width: min(1100px, 88vw); max-height: 82vh; object-fit: contain; touch-action: pan-y; transition: opacity .2s var(--ease); }
.lightbox button { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: var(--white); cursor: pointer; }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 24px; color: rgba(255,255,255,.68); font: 400 10px/1 var(--font-mono); }

/* Legal pages use the same shell while retaining their content layout. */
.legal-page { background: var(--paper); }
.legal-page .page-hero { min-height: 440px; padding-top: 150px; background: var(--ink); }
.legal-page .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,24,26,.94), rgba(23,24,26,.72)), url('/img/hf_20260319_212308_b092fc54-c442-4165-8d5c-ca927f246a76.webp') center/cover; opacity: .72; }
.legal-page .page-hero__inner { position: relative; z-index: 1; }
.legal-page .page-hero__title { font-size: clamp(2.7rem, 6vw, 5.4rem); letter-spacing: -.055em; }
.legal-page .legal-card { border-radius: 0; box-shadow: none; border: 1px solid var(--line-strong); }
.legal-page .legal-section { border-color: var(--line); }
.legal-page .quick-links { background: var(--sand); }

.reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }

/* Hero entrance — the one orchestrated moment on the page.
   The headline sets out line by line from behind its own baseline, the way a
   drawing gets struck out, then the mono annotations land around it. */
.hero__line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__line > span { display: block; }

.reveal-ready .hero__image { transform: scale(1.055); }
.reveal-ready .hero__line > span { transform: translateY(108%); }
.reveal-ready .hero__kicker,
.reveal-ready .hero__sub,
.reveal-ready .hero__meta > div { opacity: 0; transform: translateY(15px); }

.reveal-ready .hero.is-in .hero__image { transform: scale(1.015); transition: transform 1.7s var(--ease-out); }
.reveal-ready .hero.is-in .hero__line > span { transform: none; transition: transform .95s var(--ease-out) var(--d, 0s); }
.reveal-ready .hero.is-in .hero__kicker,
.reveal-ready .hero.is-in .hero__sub,
.reveal-ready .hero.is-in .hero__meta > div { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s); }

.hero__kicker { --d: .06s; }
.hero__line:nth-child(1) > span { --d: .16s; }
.hero__line:nth-child(2) > span { --d: .27s; }
.hero__sub { --d: .52s; }
.hero__meta > div:nth-child(1) { --d: .60s; }
.hero__meta > div:nth-child(2) { --d: .67s; }
.hero__meta > div:nth-child(3) { --d: .74s; }

/* Widescreen. Up to ~1600px the containers that hug the viewport read as an
   intentional edge tension. Past it they pull apart: the nav, the hero and the
   intro card each sit on a different measure, and the ribbon's vw columns grow
   without limit. From here everything is referred back to --maxw so the page
   keeps one column, and the full-bleed ribbon stops tracking the viewport. */
@media (min-width: 1600px) {
  .nav__inner { width: min(calc(100% - 48px), var(--maxw)); }
  .hero__content { width: min(calc(100% - 64px), var(--maxw)); }
  /* The card keeps its offset into the column, but its right edge now lands on
     the content edge instead of the screen edge. */
  .intro-shell { width: min(100%, var(--maxw)); margin-inline: auto; }
  /* The scrim was viewport-proportional while the headline is column-anchored,
     so past this width the text drifted onto the bright half of the photo.
     Tie the stops to the column instead. */
  .hero::after { background: linear-gradient(90deg, rgba(15,16,17,.84) 0%, rgba(15,16,17,.72) calc(50% - var(--maxw) / 2), rgba(15,16,17,.34) calc(50% + var(--maxw) / 5), rgba(15,16,17,.06) calc(50% + var(--maxw) / 2)), linear-gradient(0deg, rgba(15,16,17,.42), transparent 44%); }
  /* Space-between pushed the figures onto the bright side of the photo and left
     a hole in the middle of the row; they travel with the paragraph instead. */
  .hero__bottom { justify-content: flex-start; gap: clamp(56px, 6vw, 112px); }
}

/* Ultrawide: a 900px hero band across 2560px reads as a letterbox, so the one
   full-bleed section on the page is allowed more height. */
@media (min-width: 2100px) {
  .hero, .hero__content { min-height: min(1040px, 92dvh); }
}

/* Any touch surface, at any width: comfortable tap targets. */
@media (pointer: coarse) {
  .nav__brand, .text-link { min-height: 44px; }
  .contact__info-item a { display: inline-flex; align-items: center; min-height: 40px; }
  .contact__disclaimer a { display: inline-block; padding-block: 6px; }
  .footer__link, .footer__ci a { display: flex; align-items: center; min-height: 44px; margin: 0; }
  .footer__ci { margin: 0; }
  .m-link, .gallery__filter, .footer__bottom-links a { min-height: 46px; }
  /* The dock sits flush against the thumb zone, so its bare glyphs still need
     the full target even though nothing around them is drawn. */
  .dock__link, .dock__cta { min-height: 44px; }
  .dock__icon { width: 44px; height: 44px; }
}

/* Touch and coarse pointers: hover states stick after a tap, so neutralise them. */
@media (hover: none), (pointer: coarse) {
  .btn:hover { transform: none; }
  .btn--light:hover { background: var(--paper-2); }
  .btn--line:hover { background: transparent; border-color: currentColor; color: inherit; }
  .text-link:hover::after { transform: none; }
  .nav__link:hover::after { transform: scaleX(0); }
  .project-row:hover { background: transparent; }
  .project-row:hover img, .photo-ribbon figure:hover :is(img, video), .gallery__item:hover img { transform: none; }
  .service-tab:hover { color: rgba(255,255,255,.68); }
  .service-tab:hover .service-tab__num, .service-tab:hover .service-tab__name { transform: none; }
  .service-row.is-open .service-tab { color: var(--white); }
  .service-row.is-open .service-tab__num, .service-row.is-open .service-tab__name { transform: translateX(8px); }
  .gallery__filter:hover { background: rgba(23,24,26,.34); border-color: var(--on-dark-line); color: rgba(255,255,255,.72); }
  .gallery__filter.active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
  .footer__link:hover { color: inherit; }
  .wa-float:hover { transform: none; }
  .dock__link:hover, .dock__icon:hover, .dock__icon--wa:hover { color: rgba(255,255,255,.55); }
  .dock__link[aria-current] { color: var(--white); }
  .dock__cta:hover { color: var(--white); }
  .dock__cta:hover span { transform: none; }
  .dock__icon:active, .dock__cta:active, .dock__current:active { opacity: .6; }
  .btn:active { transform: scale(.98); }
}

@media (max-width: 1180px) {
  .project-row { grid-template-columns: 1.2fr .5fr .5fr 176px; gap: 20px; }
  .project-row__image { height: 124px; }
}

@media (max-width: 1080px) {
  .nav__inner { grid-template-columns: 1fr auto; gap: 16px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .hero__bottom { align-items: start; flex-direction: column; }
  .intro-card { grid-template-columns: 1fr; }
  .intro-card__mark { display: none; }
  .gallery__grid { grid-template-columns: repeat(3,1fr); }
  .gallery__item:nth-child(4n+2) { grid-column: auto; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* Tablet portrait: two narrow columns stop working before the phone layout does. */
@media (max-width: 980px) {
  .project-row { grid-template-columns: auto 1fr 180px; grid-template-rows: auto auto; align-items: center; gap: 14px 22px; min-height: 0; padding: 26px 0; }
  .project-row > div:first-child { grid-column: 1 / 3; grid-row: 1; }
  .project-row__meta { display: flex; align-items: baseline; gap: 8px; }
  .project-row__meta:nth-child(2) { grid-column: 1; grid-row: 2; }
  .project-row__meta:nth-child(3) { grid-column: 2; grid-row: 2; }
  .project-row__meta span, .project-row__meta b { display: inline; margin: 0; }
  .project-row__image { grid-column: 3; grid-row: 1 / -1; height: 132px; }
  /* The committed asymmetries only read at desktop; below that the narrow
     column starves, so image/content pairs stack instead. */
  .services__grid, .about__grid, .values__head { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .service-panel p { max-width: 62ch; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .wrap, .hero__content, .intro-card, .footer__inner, .footer__bottom-inner { width: min(calc(100% - 36px), var(--maxw)); }
  .nav__inner { width: calc(100% - 28px); min-height: 64px; }
  .nav__brand img { height: 34px; }
  .nav__actions .btn { display: none; }
  .nav__call { display: grid; }
  .hero { min-height: min(820px, 96dvh); }
  .hero__content { min-height: min(820px, 96dvh); padding: 104px 0 72px; }
  .hero::after { background: linear-gradient(0deg, rgba(15,16,17,.72), rgba(15,16,17,.15) 70%), linear-gradient(90deg, rgba(15,16,17,.62), transparent); }
  .hero__title { font-size: clamp(2.6rem, 14vw, 5.1rem); }
  .hero__bottom { gap: 26px; margin-top: 32px; }
  .hero__meta { grid-template-columns: repeat(3,1fr); width: 100%; gap: 10px; }
  .hero__meta div { padding-left: 8px; }
  .hero__meta b { font-size: 16px; }
  .hero__meta span { line-height: 1.3; }
  .intro-shell { margin-top: -42px; }
  .intro-card { margin-left: 18px; padding: 48px 26px 54px; }
  .photo-ribbon { padding-bottom: 76px; }
  .photo-ribbon__track { grid-template-columns: repeat(6, 62vw); padding-inline: 18px; }
  .photo-ribbon figure { height: 200px; }
  .photo-ribbon figure:nth-child(even) { margin-top: 22px; }
  .section-heading-row, .results__head { align-items: start; flex-direction: column; }
  .project-row { grid-template-columns: auto 1fr 116px; gap: 12px 18px; padding: 22px 0; }
  .project-row__desc { font-size: 13px; }
  .project-row__image { height: 108px; }
  .values__head, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .rail-hint { margin-top: 14px; }
  .service-panel p { padding-left: 0; }
  .values__rail { grid-auto-columns: min(78vw, 320px); padding-inline: 18px; }
  .value-card { min-height: 216px; padding: 22px; }
  .value-card h3 { margin: 20px 0 10px; }
  .about__visual { min-height: 450px; }
  .about__visual img { width: 84%; height: 360px; }
  .about__visual img + img { width: 54%; height: 220px; border-width: 8px; }
  /* Filters become a single swipeable row instead of three stacked rows of chips. */
  .gallery__filters { flex-wrap: nowrap; gap: 6px; margin-inline: -18px; padding-inline: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .gallery__filters::-webkit-scrollbar { display: none; }
  .gallery__filter { flex: 0 0 auto; }
  .gallery__grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .gallery__item { min-height: 46vw; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer__inner { padding-top: 72px; }
  .footer__lead { margin-bottom: 54px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer__grid > :first-child, .footer__grid > :nth-child(4) { grid-column: 1 / -1; }
  .footer h4 { margin-bottom: 12px; }
  .footer__ci { margin: 0; }
  .footer__bottom-inner { padding: 16px 0; align-items: start; flex-direction: column; gap: 4px; }
  /* Compact dock: four inline links no longer fit beside the actions, so the
     current section becomes a chip that opens the list upwards. */
  .dock { align-items: stretch; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .dock__stack { width: 100%; }
  .dock__inner { flex: 1 1 auto; padding: 4px 6px; }
  .dock__links { display: none; }
  .dock__current { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--white); text-align: left; cursor: pointer; }
  .dock__current-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 13px/1.2 var(--font-display); }
  .dock__chevron { flex: 0 0 auto; color: rgba(255,255,255,.45); transition: transform .3s var(--ease); }
  .dock.sheet-open .dock__chevron { transform: rotate(180deg); }
  .dock__actions { margin-left: 4px; }
  .dock__sheet { position: absolute; inset: auto 0 calc(100% + 8px) 0; display: grid; padding: 6px; border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-xs); background: rgba(23,24,26,.92); backdrop-filter: blur(20px); box-shadow: 0 18px 42px -22px rgba(12,13,14,.8); color: var(--white); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; }
  .dock.sheet-open .dock__sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s; }
  /* The current section is marked by an accent rule, not a filled row. */
  .dock__sheet-link { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-left: 2px solid transparent; color: rgba(255,255,255,.55); font: 500 14px/1.2 var(--font-display); }
  .dock__sheet-link[aria-current] { border-left-color: var(--accent); color: var(--white); }
  .lightbox { padding: 16px 16px calc(88px + env(safe-area-inset-bottom)); }
  .lightbox img { max-width: 92vw; max-height: 70vh; }
  .lightbox__close { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
  .lightbox__nav--prev { left: 16px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__nav--next { right: 16px; top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__count { bottom: calc(34px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .wrap, .hero__content, .footer__inner, .footer__bottom-inner { width: calc(100% - 32px); }
  .display { font-size: clamp(2.1rem, 10vw, 2.65rem); }
  .hero__title { font-size: clamp(2.5rem, 13.5vw, 3.4rem); }
  .hero__meta { gap: 6px; }
  .hero__meta div { padding-left: 7px; }
  .hero__meta b { font-size: 15px; }
  .hero__meta span { font-size: 8px; letter-spacing: .06em; }
  .intro-card { margin-left: 14px; padding: 42px 22px 46px; }
  .project-row { grid-template-columns: 1fr 104px; grid-template-rows: auto auto auto; gap: 8px 16px; }
  .project-row > div:first-child { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  .project-row__meta { justify-self: start; }
  .project-row__meta:nth-child(2) { grid-column: 1; grid-row: 2; }
  .project-row__meta:nth-child(3) { grid-column: 1; grid-row: 3; }
  .project-row__image { grid-column: 2; grid-row: 1 / -1; height: 100px; }
  .gallery__filters { margin-inline: -16px; padding-inline: 16px; }
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item { min-height: 74vw; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .hero__meta { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .hero__meta div:last-child { grid-column: 1 / -1; }
  .project-row { grid-template-columns: 1fr 88px; }
  .project-row__image { height: 88px; }
  .dock { padding-inline: 8px; }
  .dock__cta { padding: 0 8px; }
  .dock__cta span { display: none; }
}

/* Phone in landscape: a viewport-height hero would push everything below the fold. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1080px) {
  .hero, .hero__content { min-height: 0; }
  .hero__content { padding: 88px 0 56px; }
  /* No hero/intro overlap here: vertical space is too scarce to spend on the flourish. */
  .intro-shell { margin-top: 0; }
  .hero__title { font-size: clamp(2.2rem, 8.5vh, 3.6rem); }
  .hero__bottom { flex-direction: row; align-items: end; gap: 28px; margin-top: 26px; }
  .hero__sub { font-size: 15px; }
  .hero__meta { width: auto; grid-template-columns: repeat(3, auto); }
  .wrap, .hero__content, .footer__inner, .footer__bottom-inner { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .nav__mobile-top { padding-bottom: 16px; }
  .m-link { min-height: 48px; padding: 10px 0; }
  /* Vertical space is scarce here, so the dock hugs the edge and the sheet
     scrolls rather than growing past the top of the screen. */
  .dock { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .dock__sheet { inset: auto 0 calc(100% + 8px) 0; max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; }
  .lightbox img { max-height: 62vh; }
}

@media print {
  .nav, .nav__scrim, .nav__mobile, .wa-float, .dock, .lightbox, .grain, .skip, .photo-ribbon,
  .gallery__filters, .gallery__more, .rail-hint, .footer__social, .contact__card, .text-link, .btn { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero, .services, .results, .footer, .values, .contact, .about, .projects, .intro-card { background: #fff !important; color: #000 !important; }
  .hero__image, .hero::after, .results::before, .footer::before { display: none !important; }
  .hero__title, .hero__sub, .hero__kicker, .hero__meta, .hero__meta b, .hero__meta span,
  .services__content, .services__title, .service-panel p, .results__head, .footer h4, .footer__lead h2 { color: #000 !important; }
  /* Print every service description, not just the open one. */
  .service-panel { grid-template-rows: 1fr !important; }
  .service-panel__inner { visibility: visible !important; }
  .hero, .hero__content { min-height: 0 !important; padding: 0 0 16pt !important; }
  .section, .services, .results, .footer__inner { padding: 16pt 0 !important; }
  .intro-shell { margin-top: 0; }
  .about__visual, .gallery__grid { display: none !important; }
  .values__rail { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-inline: 0; }
  .value-card { min-height: 0; background: #fff; }
  .services__nav, .service-tab { border-color: #999 !important; color: #000 !important; }
  section, article, .project-row, .value-card, .contact__info { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Belt and braces: the entrance is never armed under reduced motion, but if the
     class is ever present, every hidden start state resolves to its resting value. */
  .reveal-ready [data-reveal],
  .reveal-ready .hero__kicker, .reveal-ready .hero__sub, .reveal-ready .hero__meta > div { opacity: 1; transform: none; }
  .reveal-ready .hero__line > span { transform: none; }
  .reveal-ready .hero__image { transform: scale(1.015); }
  .contact__submit:disabled::after { animation: none; opacity: .35; width: 100%; }
}