/* Constructions Signature Gauthier: page styles.
   Every colour, radius and shadow comes from tokens.css. Built from the design system's
   components/bundle.css and the « CSG — Site » canvas (Bureau 1280 × 800, Téléphone 390 × 844).
   One breakpoint: 720px. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
/* The canvas AND the body are dark (Safari 26 tints its status bar from the body at the top of the page), so the browser's own areas (behind the status bar, past the footer, the overscroll
   bounce) continue the hero at the top and the footer at the bottom instead of flashing white. */
html { background: var(--night); }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--night); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
h1, h2, p { margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-m); background: var(--paper); color: var(--ink); font: 600 14px var(--font-sans); }
.skip:focus { top: 16px; }
.m-only { display: none; }
@media (max-width: 720px) { .d-only { display: none; } .m-only { display: inline; } br.m-only { display: block; } }

.screen { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; }
.footer { scroll-snap-align: end; }
/* Every scroll lands on a whole section. Phones: the browser's own mandatory snap (a flick moves one section;
   a section taller than the screen scrolls freely inside). Desktop: main.js turns each wheel or trackpad gesture
   and each Page Down / arrow / space into one step to the next section, because CSS snapping pulled the page back
   unless the visitor scrolled more than half a screen. */
@media (max-width: 720px) { html { scroll-snap-type: y mandatory; } }
@media (min-width: 721px) { html { scroll-snap-type: none; } }

/* ---------- Type helpers ---------- */
.kicker { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.h2 { font: 700 40px/1.05 var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
.h2--l { font-size: 44px; line-height: 1.04; }

/* ---------- Gold CTA (actions only) ---------- */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border: 0; border-radius: var(--radius-m); background: var(--gold); color: var(--on-gold); font: 700 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background .15s; white-space: nowrap; }
.cta:hover { background: var(--gold-hover); }
.cta:active { background: var(--gold-pressed); }
.cta:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.cta svg { width: 16px; height: 16px; }
.cta--photo { box-shadow: var(--shadow-cta); }
.cta--photo:focus-visible { outline-color: var(--on-dark); }
.cta--l { height: 58px; padding: 0 28px; gap: 12px; font-size: 16px; }
.cta--block { width: 100%; height: 54px; font-size: 16px; font-weight: 600; }
.cta--s { height: 40px; padding: 0 14px; font-size: 14px; box-shadow: var(--shadow-cta); }
.cta--bar { height: 40px; padding: 0 16px; font-size: 14px; }
.cta:disabled { background: var(--disabled); color: var(--on-disabled); cursor: not-allowed; }

/* ---------- Round pads ---------- */
.pads { display: flex; gap: 12px; flex-shrink: 0; }
.pad { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-round); background: var(--pad); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .15s; }
.pad svg { width: 16px; height: 16px; }
.pad:hover { background: var(--pad-hover); }
.pad:active { transform: scale(.94); }
.pad:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.pad--photo { width: 48px; height: 48px; background: var(--pad-on-photo); box-shadow: var(--shadow-pad); }
.pad--photo svg { width: 18px; height: 18px; }
.pad--photo:hover { background: var(--paper); }
.pad--photo:focus-visible { outline-color: var(--on-dark); }

/* ---------- Glass chip ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--glass-chip); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--on-dark); font: 500 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.chip--tag { padding: 6px 11px; letter-spacing: .08em; }

.icon-btn { width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -4px; }
.icon-btn--glass { width: 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: var(--radius-round); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ============ HERO ============ */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--slate); color: var(--on-dark); user-select: none; -webkit-user-select: none; }
.ba__layer { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity .9s ease; }
.ba__layer.is-current { opacity: 1; z-index: 2; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ba__blur { display: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1.3s cubic-bezier(.65,0,.35,1); }
.ba__line { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: var(--paper); box-shadow: var(--shadow-wipe); opacity: 0; transition: left 1.3s cubic-bezier(.65,0,.35,1), opacity .35s; }
.hero[data-state="before"] .is-current .ba__before { clip-path: inset(0 0 0 0); }
.hero[data-state="before"] .is-current .ba__line { left: 0; }
.hero.is-moving .is-current .ba__line { opacity: 1; }
.hero.is-snapping .ba__before, .hero.is-snapping .ba__line { transition: none !important; }

.hero__scrim-top { position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 3; background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-soft) 55%, rgba(0,0,0,0) 100%); pointer-events: none; }
.hero__scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 3; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, var(--scrim) 100%); pointer-events: none; }
.hero__hit { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.hero__hit:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -6px; }

.header { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 40px 0 36px; pointer-events: none; }
.header > * { pointer-events: auto; }
.header__logo { display: block; border-radius: 4px; }
.header__logo img { height: 124px; width: auto; filter: drop-shadow(var(--shadow-logo)); }
.header__logo:focus-visible, .mtop__logo:focus-visible, .bar__logo:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 4px; }
.header__right { display: flex; align-items: center; gap: 36px; padding-top: 16px; }
.header__nav, .bar__nav { display: flex; gap: 4px; }
.header__nav a, .bar__nav a { padding: 12px; color: var(--on-dark); text-decoration: none; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.header__nav a:hover, .bar__nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.header__nav a:focus-visible, .bar__nav a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

.mtop { display: none; }

.hero__bottom { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; pointer-events: none; }
.hero__text { display: flex; flex-direction: column; gap: 18px; }
.hero__title { font: 700 52px/1.04 var(--font-sans); letter-spacing: -.03em; color: var(--on-dark); text-wrap: balance; }
.hero__title span { display: block; font-weight: 500; color: var(--on-dark-muted); }
.hero__meta { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; pointer-events: auto; }

/* Segmented Avant / Après */
.seg { --seg-w: 96px; position: relative; display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); }
.seg__knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: var(--seg-w); border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-knob); transform: translateX(var(--seg-w)); transition: transform .45s cubic-bezier(.22,.7,.2,1); }
.hero[data-state="before"] .seg__knob { transform: none; }
.seg__btn { position: relative; width: var(--seg-w); height: 40px; padding: 0; border: 0; background: none; border-radius: var(--radius-pill); color: var(--on-dark-muted); font: 600 14px/1 var(--font-sans); cursor: pointer; transition: color .3s; }
.seg__btn[aria-pressed="true"] { color: var(--ink); }
.seg__btn:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

/* ============ CONDENSED BAR (desktop) ============ */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: rgba(18,18,18,.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--on-dark); transform: translateY(calc((var(--p, 0) - 1) * 100%)); opacity: calc(.3 + .7 * var(--p, 0)); will-change: transform; }
/* --p (0 → 1) is set from the scroll position in main.js, so the bar moves with the page rather than popping in. */
.bar__logo img { height: 44px; width: auto; }
.bar__right { display: flex; align-items: center; gap: 28px; }
.bar__nav { gap: 0; }
.bar__nav a { padding: 12px 10px; }
.bar .cta:focus-visible { outline-color: var(--on-dark); }

/* ============ NOS PROJETS ============ */
.projects { --slide-w: min(880px, calc(100vw - 80px)); --slide-h: clamp(340px, calc(100svh - 320px), 720px); --step: calc(var(--slide-w) + 24px);
  position: relative; background: var(--paper); color: var(--ink-2); display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 88px 0 40px; overflow: hidden; }
.projects__head, .caption { width: var(--slide-w); margin: 0 auto; }
.projects__head { display: flex; flex-direction: column; gap: 10px; }
.track { position: relative; height: var(--slide-h); flex-shrink: 0; touch-action: pan-y; }
.slide { --d: 0; position: absolute; top: 0; left: 50%; width: var(--slide-w); height: var(--slide-h); margin-left: calc(var(--slide-w) / -2); padding: 0; border: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--mist); cursor: pointer; opacity: 0; filter: grayscale(1); z-index: 1;
  transform: translateX(calc(var(--d) * var(--step))) scale(.86); transition: transform .6s cubic-bezier(.22,.7,.2,1), opacity .6s, filter .6s, box-shadow .6s; -webkit-tap-highlight-color: transparent; }
.slide.is-near { opacity: .55; z-index: 2; }
.slide.is-current { opacity: 1; filter: none; transform: translateX(0) scale(1); cursor: default; z-index: 3; box-shadow: var(--shadow-slide); }
.slide.is-far { transition: none; visibility: hidden; }
/* While a photo loads: its ~1 KB copy, stretched (soft on its own), in the same frame. */
[style*="--ph"] { background-image: var(--ph); background-size: cover; background-position: center; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.slide .chip { position: absolute; left: 16px; bottom: 16px; z-index: 1; opacity: 0; transition: opacity .4s; }
.slide.is-current .chip { opacity: 1; }
.slide__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong); }
.slide:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 4px; }
.caption { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 64px; }
.caption__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.caption__cat { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.caption__desc { font: 500 22px/1.3 var(--font-sans); letter-spacing: -.01em; }

/* ============ FAMILLE ============ */
.family { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--stone); color: var(--ink); }
/* The family section and the footer share the last screen: the section leaves room for the footer
   (its height is measured into --footer-h by main.js), so the page ends with both in view. */
.family.screen { min-height: calc(100vh - var(--footer-h, 0px)); min-height: calc(100svh - var(--footer-h, 0px)); }
.family__photo { position: relative; background: var(--slate); overflow: hidden; min-height: 240px; }
.family__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }
.family__photo .chip { position: absolute; left: 20px; top: 84px; } /* below the condensed bar */
.family__text { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.family__p { font: 400 17px/1.55 var(--font-sans); color: var(--muted-strong); max-width: 440px; }
.family__text .cta { margin-top: 10px; }

/* ============ FOOTER ============ */
/* One slim line: legal left, quiet sentence-case links right. No logo here: the family section
   right above carries the brand, and the logo badge is unreadable at footer size. */
.footer { background: var(--night); color: var(--on-dark-faint); padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
.footer__legal { order: -1; font: 400 11px/1.6 var(--font-mono); letter-spacing: .04em; }
.footer__nav { display: flex; align-items: center; gap: 24px; }
.footer__nav a, .footer__nav button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--on-dark-soft); font: 400 13px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; transition: color .15s ease; }
.footer__nav a:hover, .footer__nav button:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
.footer__nav a:focus-visible, .footer__nav button:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; border-radius: 2px; }
.footer__nav svg { width: 12px; height: 12px; }
.footer__nav .footer__top { margin-left: 8px; padding-left: 24px; border-left: 1px solid var(--line-dark); }

/* ============ FLOATING BUTTON (mobile) ============ */
.fab { display: none; }

/* ============ MENU (mobile) ============ */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--graphite); color: var(--on-dark); }
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: var(--graphite); }
/* Same spot as the page's mobile header (.mtop), so the logo and the button don't move when the menu opens. */
.menu__top { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px; border-bottom: 1px solid var(--line-dark); }
.menu__top .icon-btn { margin-top: 2px; }
.menu__top img { height: 52px; width: auto; }
.menu__nav { display: flex; flex-direction: column; padding: 12px 20px 0; }
.menu__nav a { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark); text-decoration: none; font: 700 28px/1.1 var(--font-sans); letter-spacing: -.02em; }
.menu__nav a span { font: 400 12px var(--font-mono); color: var(--muted); letter-spacing: 0; }
.menu__nav a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.menu__foot { margin-top: auto; padding: 20px 20px calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
.menu__foot .cta:focus-visible { outline-color: var(--on-dark); }
.menu__legal { font: 500 11px/1.7 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-faint); }

/* ============ QUOTE FORM ============ */
.quote { width: 1040px; max-width: calc(100vw - 32px); height: fit-content; max-height: 92vh; margin: auto; padding: 0; border: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-dialog); }
.quote[open] { display: flex; }
.quote::backdrop { background: var(--overlay); }
.quote__panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quote__grip { display: none; }
.qf__head { flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 24px 18px 32px; }
.qf__title { font: 700 26px/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--ink); }
.qf__intro { margin-top: 6px; font: 400 15px/1.45 var(--font-sans); color: var(--muted-strong); }
.qf__close { flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-round); background: var(--pad); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.qf__close:hover { background: var(--pad-hover); }
.qf__close:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.qf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Desktop: everything visible at once, no inner scroll on a laptop screen. Two columns: contact (2 × 2)
   with the photos under it; the project beside them (description filling the height, budget and date). */
.qf__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "contact project" "photos project"; align-content: start; column-gap: 32px; row-gap: 24px; padding: 2px 32px 24px; }
.qf__group--contact { grid-area: contact; }
.qf__group--project { grid-area: project; }
.qf__photos { grid-area: photos; }
.qf-field--grow { flex: 1; }
.qf__group--project textarea.input { flex: 1; height: auto; min-height: 112px; }
.qf__group, .qf__photos { border: 0; margin: 0; padding: 0; min-width: 0; }
.qf__group { display: flex; flex-direction: column; gap: 16px; }
.qf__group legend, .qf__photos legend { padding: 0; margin: 0 0 14px; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qf__photos legend .opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; }
.qf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qf-label { font: 500 14px/1.3 var(--font-sans); color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }
.req { color: var(--required); font-weight: 600; }
.input { height: 48px; width: 100%; padding: 0 14px; border: 1px solid var(--field-border); border-radius: var(--radius-m); background: var(--paper); color: var(--ink); font: 400 16px var(--font-sans); -webkit-appearance: none; appearance: none; }
.input[type="date"] { display: flex; align-items: center; min-height: 48px; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--required); }
.input[aria-invalid="true"]:focus { outline-color: var(--required); }
.qf-error { margin-top: -2px; font: 400 13px/1.4 var(--font-sans); color: var(--required); }
/* .nowrap: see markField in main.js */
.nowrap { white-space: nowrap; }
.qf-note { margin-top: -2px; font: 400 13px/1.4 var(--font-sans); color: var(--muted-strong); }
.qf-note button { padding: 0; border: 0; background: none; color: var(--ink); font: 600 13px/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.select { padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.select:invalid { color: var(--muted); }
.select option { color: var(--ink); }
textarea.input { height: 112px; padding: 12px 14px; resize: none; line-height: 1.45; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qf__photos { display: flex; flex-direction: column; gap: 10px; }
.qf__photos-row { display: flex; flex-direction: column; gap: 12px; }
/* A strip, not a block: icon, then the two lines of text. The whole strip is the file input. */
.drop { position: relative; flex: 1; min-width: 300px; min-height: 84px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-content: center; padding: 14px 20px; border: 1.5px dashed var(--field-border); border-radius: var(--radius-l); background: var(--field-fill); color: var(--ink); text-align: left; transition: background .15s, border-color .15s; }
.drop:hover, .drop.is-over { border-color: var(--ink); }
.drop.is-over { background: var(--pad); }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop svg { grid-row: 1 / 3; align-self: center; width: 32px; height: 32px; }
.drop__title { font: 600 16px var(--font-sans); letter-spacing: -.01em; }
.drop__sub { font: 400 15px var(--font-sans); color: var(--muted-strong); }
.drop > .drop__title { grid-column: 2; grid-row: 1; }
.drop__or { font-weight: 400; color: var(--muted-strong); }
.drop__or u { text-underline-offset: 3px; }
.drop > .drop__hint { grid-column: 2; grid-row: 2; }
.drop__sub u { text-underline-offset: 3px; }
.drop__hint { font: 400 13px/1.45 var(--font-sans); color: var(--muted); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.thumbs { min-width: 0; display: flex; gap: 8px; overflow-x: auto; }
.thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--radius-m); overflow: hidden; background: var(--mist); }
.thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.thumb__name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6px; font: 500 10px/1.3 var(--font-mono); color: var(--muted-strong); text-align: center; word-break: break-all; }
.thumb__state { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s; }
.thumb.is-done .thumb__state { opacity: 0; transition: opacity .4s .2s; }
.thumb.is-error { outline: 2px solid var(--required); outline-offset: -2px; }
.thumb button { position: absolute; z-index: 2; top: 4px; right: 4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-round); background: var(--glass-chip); color: var(--on-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.thumb button:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -3px; }
.count { font: 400 13px var(--font-sans); color: var(--muted); }

.qf__foot { flex-shrink: 0; padding: 16px 32px 24px; border-top: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hint { font: 400 13px/1.3 var(--font-sans); color: var(--muted); min-height: 17px; }
.hint.is-error { color: var(--required); }
.cta--send { height: 52px; padding: 0 28px; font-size: 16px; flex-shrink: 0; }
.cta--send svg { width: 18px; height: 18px; }

/* Success: replaces the head and the form. A graphite panel holds the thanks and the request number; the white side says what happens next. */
.quote.is-done { width: 860px; height: fit-content; }
.quote.is-done .qf__head { display: none; }
.qf__done { flex: 1; display: grid; grid-template-columns: 340px 1fr; }
.qf__done[hidden] { display: none; }
.done__lead { display: flex; flex-direction: column; align-items: flex-start; padding: 40px 36px 36px; background: var(--graphite); color: var(--on-dark); }
.done__check { width: 56px; height: 56px; border-radius: var(--radius-round); background: var(--gold); color: var(--on-gold); display: flex; align-items: center; justify-content: center; animation: done-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.done__kicker { margin-top: 28px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.done__title { margin-top: 10px; font: 700 30px/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--on-dark); outline: none; }
.done__ref { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.done__ref::before { content: ""; display: block; height: 1px; margin-bottom: 18px; background: var(--line-dark); }
.done__ref[hidden] { display: none; }
.done__ref-label { font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-faint); }
.done__ref-num { font: 500 20px/1.2 var(--font-mono); letter-spacing: .02em; color: var(--on-dark); user-select: all; }
.done__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 40px 40px 36px; }
.done__close { position: absolute; top: 24px; right: 24px; }
.done__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.done__steps { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; }
.done__steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.done__steps li:last-child { border-bottom: 1px solid var(--line); }
.done__n { padding-top: 2px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.done__steps strong { display: block; font: 600 16px/1.35 var(--font-sans); color: var(--ink); }
.done__steps p { margin-top: 4px; font: 400 15px/1.5 var(--font-sans); color: var(--muted-strong); }
.done__btn { margin-top: 28px; }
@keyframes done-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.btn-quiet { margin-top: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-m); background: var(--pad); color: var(--ink); font: 600 15px var(--font-sans); cursor: pointer; transition: background .15s; }
.btn-quiet:hover { background: var(--pad-hover); }
.btn-quiet:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

/* Tablet widths: keep the desktop layout, tighten the type. */
@media (max-width: 1100px) and (min-width: 721px) {
  .hero__title { font-size: 44px; }
  .header__logo img { height: 104px; }
  .header__right { gap: 20px; }
  .family__text { padding: 64px 40px; }
  .h2--l { font-size: 38px; }
}

/* ============ MOBILE (≤ 720px) ============ */
@media (max-width: 720px) {
  .h2, .h2--l { font-size: 28px; line-height: 1.08; letter-spacing: -.02em; }

  /* Hero: zoomed-out photo over a blurred copy of itself */
  .hero { min-height: 560px; }
  .ba__layer { transition-duration: .7s; }
  .ba__before, .ba__line { transition-duration: 1.2s; }
  .ba__blur { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); filter: blur(36px) brightness(.8) saturate(1.05); transform: scale(1.2); }
  .ba__img { top: 0; bottom: auto; height: 80%; object-position: var(--pos-m, var(--pos, 50% 50%)); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); }
  .hero__scrim-top { height: 160px; background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-soft) 45%, rgba(0,0,0,0) 100%); }
  .hero__scrim-bottom { height: 48%; }

  .header { display: none; }
  .mtop { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 0 16px; pointer-events: none; }
  .mtop > * { pointer-events: auto; }
  .mtop__logo { display: block; border-radius: 4px; }
  .mtop__logo img { height: 52px; width: auto; filter: drop-shadow(var(--shadow-logo)); }
  .mtop__right { display: flex; align-items: center; gap: 8px; }
  .mtop .cta:focus-visible { outline-color: var(--on-dark); }

  .hero__bottom { left: 20px; right: 20px; bottom: 20px; flex-direction: column; align-items: stretch; gap: 18px; }
  .hero__text { gap: 10px; }
  .hero__title { font-size: 30px; line-height: 1.06; }
  .hero__meta { font-size: 11px; letter-spacing: .05em; }
  .hero__controls { flex-direction: row; justify-content: space-between; align-items: center; pointer-events: none; }
  .hero__controls > * { pointer-events: auto; }
  .seg { --seg-w: 80px; padding: 3px; }
  .seg__knob { top: 3px; bottom: 3px; left: 3px; }
  .hero__controls .pads { gap: 10px; }
  .pad--photo { width: 44px; height: 44px; }
  .pad--photo svg { width: 16px; height: 16px; }

  .bar { display: none; }

  /* Phones: the browser's bars show the page itself. Safari (iOS 26) draws the content above the
     viewport, blurred, behind the status bar, and the content below it behind its floating address bar;
     Chrome and older Safari tint their bars with theme-color (main.js keeps it on the section in view).
     So every screen bleeds past both edges with its own background:
     - --bleed-top: each section after the hero snaps with its top this far ABOVE the viewport
       (negative scroll-margin), so the status bar shows the section's own top, not the end of the
       previous one. Larger than any status bar (47–62pt); its content is pushed down by as much.
     - --bleed-bottom: each screen runs this far below the large viewport (100lvh), under the address
       bar, so the next section never peeks there.
     Anything pinned to a screen's bottom (the hero's title and controls) stays clear of an expanded
     address bar: it is lifted by the bleed plus (100lvh − 100svh). */
  :root { --bleed-top: 72px; --bleed-bottom: 120px; }
  .screen { min-height: calc(100lvh + var(--bleed-bottom)); }
  .hero { height: calc(100lvh + var(--bleed-bottom)); }
  .hero__bottom { bottom: calc(20px + var(--bleed-bottom) + 100lvh - 100svh); }
  .hero .ba__img { height: calc(100lvh * .8); }
  .hero__scrim-bottom { height: calc(48% + var(--bleed-bottom)); }
  .projects, .family { scroll-margin-top: calc(-1 * var(--bleed-top)); }
  /* The bleeds must not count as part of the snap area: a snap area taller than the screen lets the
     page stop anywhere inside it. Negative margins trim each area to at most the small viewport. */
  .hero, .projects { scroll-margin-bottom: calc(-1 * (var(--bleed-bottom) + 100lvh - 100svh)); }
  .projects.screen { min-height: calc(var(--bleed-top) + 100lvh + var(--bleed-bottom)); }
  .family.screen { min-height: calc(var(--bleed-top) + 100lvh - var(--footer-h, 0px)); }


  /* Projects */
  .projects { --slide-w: 290px; --slide-h: clamp(300px, calc(100svh - 340px), 520px); --step: calc(var(--slide-w) * .93 + 10px); justify-content: flex-start; padding: calc(var(--bleed-top) + 56px) 0 96px; gap: 22px; }
  .projects__head { width: auto; margin: 0 20px; gap: 6px; }
  .projects__head .kicker { font-size: 11px; }
  .caption { width: auto; margin: 0 20px; align-items: flex-start; gap: 16px; min-height: 72px; }
  .caption__text { gap: 6px; }
  .caption__cat { font-size: 11px; }
  .caption__desc { font-size: 17px; line-height: 1.35; letter-spacing: 0; }
  .caption .pads { gap: 10px; }
  .slide { transition-duration: .5s; }
  .slide img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .slide .chip { left: 12px; bottom: 12px; font-size: 10px; }
  .slide__empty { font-size: 10px; }

  /* Family */
  .family { display: flex; flex-direction: column; }
  .family__photo { flex: 1; min-height: 360px; }
  .family__photo img { object-position: 46% 28%; }
  .family__photo .chip { left: 12px; top: 12px; font-size: 10px; }
  .family__text { padding: 30px 20px 36px; gap: 14px; }
  .family__text .kicker { font-size: 10px; }
  .family__p { font-size: 16px; }
  .family__text .cta { width: 100%; height: 54px; margin-top: 8px; }
  .family__text .cta svg { display: none; }

  /* Footer */
  .footer { flex-direction: column; align-items: flex-start; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .footer__nav { gap: 20px; flex-wrap: wrap; }
  .footer__nav .footer__top { margin-left: 0; padding-left: 0; border-left: 0; }
  .footer__legal { order: 0; letter-spacing: .03em; }

  /* Floating quote button */
  .fab { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 10; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
  .fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .fab .cta { width: 100%; height: 52px; font-size: 16px; box-shadow: var(--shadow-cta); }
  .fab .cta svg { width: 18px; height: 18px; }

  /* Quote form: bottom sheet */
  .quote { width: 100%; max-width: none; height: auto; max-height: none; position: fixed; inset: 44px 0 0 0; margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-sheet); }
  .quote[open] { animation: sheet-up .32s cubic-bezier(.22,.7,.2,1); }
  .quote.is-shown { animation: none; }
  .quote.is-dragging { transition: none; }
  .quote.is-settling { transition: transform .26s cubic-bezier(.22,.7,.2,1); }
  .quote__grip, .qf__head { touch-action: none; }
  .quote__grip { display: block; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--line); margin: 8px auto 0; flex-shrink: 0; }
  .qf__head { padding: 14px 16px 18px 20px; }
  .qf__title { font-size: 22px; }
  .qf__intro { display: none; }
  .qf__body { display: flex; flex-direction: column; gap: 28px; padding: 0 20px 4px; }
  .qf__body > * { flex-shrink: 0; min-height: auto; }
  .qf__group--project textarea.input { flex: none; height: 112px; }
  .qf__grid { grid-template-columns: minmax(0, 1fr); }
  .qf__group--contact .qf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .qf__group--contact .qf-field:nth-child(n+3) { grid-column: 1 / -1; }
  .qf__photos { padding-bottom: 4px; }
  .qf__photos legend .opt { display: none; }
  .qf__photos-row { flex-direction: column; }
  .drop { flex: none; min-width: 0; min-height: 120px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; border-radius: var(--radius-m); }
  .drop svg { width: 30px; height: 30px; }
  .drop__title { font-size: 16px; letter-spacing: 0; }
  .drop__sub { font-size: 14px; }
  .drop__hint { margin-top: 0; }
  .thumbs { flex-wrap: wrap; gap: 10px; overflow: visible; }
  .thumb { width: 72px; height: 72px; }
  .qf__foot { padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .cta--send { width: 100%; }
  .hint { text-align: center; }
  .quote.is-done { width: 100%; top: auto; max-height: calc(100% - 44px); }
  .quote.is-done .quote__panel { overflow-y: auto; }
  .quote.is-done .quote__grip { background: var(--line-dark); position: absolute; left: 50%; margin-left: -20px; z-index: 1; }
  .qf__done { grid-template-columns: 1fr; }
  .done__lead { padding: 36px 20px 24px; }
  .done__check { width: 48px; height: 48px; }
  .done__kicker { margin-top: 20px; }
  .done__title { font-size: 26px; }
  .done__ref { padding-top: 24px; }
  .done__ref::before { margin-bottom: 14px; }
  .done__body { padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .done__close { display: none; }
  .done__steps { margin-top: 12px; }
  .done__steps li { padding: 14px 0; }
  .done__btn { width: 100%; margin-top: 20px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ba__before, .ba__line, .ba__layer, .seg__knob, .slide, .bar, .fab, .quote[open], .done__check { transition-duration: .01s !important; animation: none !important; }
}