/* Gaffneys Bathroom Services: design system
   Phase 1, Revision 4 (Immersive Architectural).
   Fonts: Gilda Display (display) + Work Sans (interface/body), SIL OFL 1.1, self-hosted. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Gilda Display"; src: url("../fonts/gilda-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Palette: white, cool mist, ice blue, Gaffneys blue, slate/ink. No beige. */
  --white: #FFFFFF;
  --mist: #F3F5F7;
  --ice: #EEF4FB;
  --ice-2: #DCE8F5;
  --blue: #1A7DD7;      /* logo blue: accents */
  --blue-ink: #1566B4;  /* AA blue: buttons, links */
  --blue-deep: #0F4E8C;
  --blue-soft: #9CC8F0; /* accents on dark */
  --ink: #101C2A;
  --slate: #17283A;
  --text: #3B4754;
  --grey: #5A6672;      /* AA on white, mist and ice */
  --line: #DCE2E8;
  --line-2: #C7D0D9;

  --display: "Gilda Display", "Iowan Old Style", Georgia, serif;
  --ui: "Work Sans", "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale */
  --t-h1: clamp(2.2rem, 1.35rem + 3.1vw, 3.9rem);
  --t-h2: clamp(2.1rem, 1.5rem + 2.1vw, 3.5rem);
  --t-statement: clamp(1.85rem, 1.25rem + 2.1vw, 3.2rem);
  --t-quote: clamp(1.8rem, 1.2rem + 2.1vw, 3rem);
  --t-h3: clamp(1.45rem, 1.2rem + .8vw, 2.1rem);
  --t-h4: clamp(1.2rem, 1.08rem + .4vw, 1.6rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-xs: .8125rem;

  /* Bespoke radius system: one architectural curve on two opposite corners of key frames; near-square elsewhere */
  --arc: 36px;
  --r: 4px;

  --wrap: 1312px;
  --pad: 64px;
  --nav-h: 80px;
  --nav-top: 32px;
  /* Section rhythm (v5.7.0): was clamp(64px, 3.5rem + 4vw, 128px), i.e. 111px per side at 1366px.
     Now 85px at 1366, 88px at 1440, 104px max, 56px on phones. One token, so every page keeps the same rhythm. */
  --sec: clamp(56px, 2.25rem + 3.6vw, 104px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); }
body { margin: 0; background: var(--white); color: var(--text); font: 400 var(--t-body)/1.65 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--ink); margin: 0; }
strong, b { font-weight: 600; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }
.ic--flip { transform: scaleX(-1); }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: 16px; top: -80px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); transition: top .2s; }
.skip-link:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Shared roles ---------- */
.label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 .75rem/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.label::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.h2 em, .meet__state em { font-style: normal; color: var(--blue-ink); }
.tag { display: inline-block; padding: 4px 9px; border-radius: 2px; background: rgba(255,255,255,.93); font: 600 .625rem/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.tag--real { background: var(--ink); color: #fff; }
.tag--real::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6FB6F5; margin-right: 7px; vertical-align: 1px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--r); font: 600 1rem/1.2 var(--ui); text-align: center; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s; }
.btn .ic { transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--blue { background: var(--blue-ink); color: #fff; }
.btn--blue:hover { background: var(--blue-deep); }
.btn--line { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--line:hover .ic { transform: none; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #22364b; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--ice); }
.btn--ghost { border-color: rgba(255,255,255,.32); color: #fff; }
.btn--ghost:hover { border-color: #fff; }
.btn--ghost:hover .ic { transform: none; }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; padding: 0 32px; font-size: 1.0625rem; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 var(--t-small)/1 var(--ui); color: var(--ink); border-bottom: 1px solid currentColor; }
.link:hover { color: var(--blue-ink); }
.link .ic { transition: transform .3s var(--ease); }
.link:hover .ic { transform: translateX(3px); }

/* ---------- Header (fixed, floating) ---------- */
.nav { position: fixed; z-index: 60; top: var(--nav-top); left: 32px; right: 32px; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 12px 0 20px; background: #fff; border-radius: 22px var(--r) var(--r) var(--r); box-shadow: 0 14px 40px -22px rgba(16,28,42,.45); transition: top .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease); }
.nav.is-stuck { top: 12px; box-shadow: 0 16px 40px -18px rgba(16,28,42,.4); }
.nav.is-hidden { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.nav__brand { flex: none; }
.nav__brand img { height: 58px; width: auto; }
.nav__main { margin: 0 auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; background: none; border: 0; font: 500 var(--t-small)/1 var(--ui); color: var(--ink); }
.nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__link:hover { color: var(--blue-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__dd-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.ic--chev { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.nav__dd-btn[aria-expanded="true"] .ic--chev { transform: rotate(180deg); }
.nav__dd { position: relative; }
.dd { position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-38%); width: min(680px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r) var(--r) var(--r) 22px; box-shadow: 0 30px 60px -30px rgba(16,28,42,.35); animation: ddIn .28s var(--ease); }
.dd::before { content: ""; position: absolute; top: -23px; left: 0; right: 0; height: 23px; }
@keyframes ddIn { from { opacity: 0; transform: translate(-38%, -6px); } to { opacity: 1; transform: translate(-38%, 0); } }
.dd__group { padding: 24px 22px 20px; }
.dd__group + .dd__group { border-left: 1px solid var(--line); background: var(--mist); }
.dd__label { margin: 0 0 10px 12px; font: 600 .6875rem/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.dd ul a { display: block; padding: 10px 12px; border-radius: var(--r); transition: background-color .2s; }
.dd ul a strong { display: block; font: 500 1rem/1.3 var(--ui); color: var(--ink); }
.dd ul a span { display: block; margin-top: 3px; font-size: var(--t-xs); line-height: 1.45; color: var(--grey); }
.dd ul a:hover, .dd ul a:focus-visible { background: var(--ice); }
.dd ul a:hover strong { color: var(--blue-ink); }
.dd__aside { display: block; margin: 14px 12px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--grey); }
.dd__aside span { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--blue-ink); font-weight: 600; }
.nav__act { display: flex; align-items: center; gap: 18px; flex: none; }
.nav__tel { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 600 var(--t-small)/1 var(--ui); color: var(--ink); }
.nav__tel small { display: block; margin-bottom: 4px; font: 500 .6875rem/1 var(--ui); color: var(--grey); letter-spacing: .02em; }
.nav__tel:hover { color: var(--blue-ink); }
.nav .btn { min-height: 52px; }
.nav__menu { display: none; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r); font: 600 .875rem/1 var(--ui); }
.nav__menu i { width: 16px; height: 10px; border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; }

/* ---------- Mobile menu ---------- */
.mmenu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #fff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow-y: auto; overscroll-behavior: contain; }
.mmenu.is-open { animation: mmIn .32s var(--ease); }
.mmenu.is-closing { animation: mmOut .22s var(--ease) forwards; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes mmOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.mmenu.is-open .mmenu__nav > *, .mmenu.is-open .mmenu__foot { animation: mmItem .4s var(--ease) both; }
.mmenu.is-open .mmenu__nav > *:nth-child(2) { animation-delay: .03s; } .mmenu.is-open .mmenu__nav > *:nth-child(3) { animation-delay: .06s; }
.mmenu.is-open .mmenu__nav > *:nth-child(4) { animation-delay: .09s; } .mmenu.is-open .mmenu__nav > *:nth-child(5) { animation-delay: .12s; }
.mmenu.is-open .mmenu__nav > *:nth-child(n+6) { animation-delay: .15s; } .mmenu.is-open .mmenu__foot { animation-delay: .18s; }
@keyframes mmItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mmenu__nav > a, .mmenu__acc > button, .mmenu__acc ul a { -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s; }
.mmenu__nav > a:active, .mmenu__acc > button:active, .mmenu__acc ul a:active { background: var(--mist); }
.mmenu__acc ul:not([hidden]) { animation: mmItem .25s var(--ease) both; }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.mmenu__logo { height: 46px; width: auto; }
.mmenu__close { width: 48px; height: 48px; display: grid; place-items: center; margin-right: -10px; background: none; border: 0; }
.mmenu__close .ic { width: 26px; height: 26px; }
.mmenu__nav { padding: 12px 20px 20px; }
.mmenu__nav > a, .mmenu__acc > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; font: 500 1.25rem/1.3 var(--ui); color: var(--ink); }
.mmenu__nav .mmenu__acc > button { font-size: 1.125rem; min-height: 54px; }
.mmenu__nav > a[aria-current="page"] { color: var(--blue-ink); }
.mmenu__label { margin: 22px 0 0; font: 600 .6875rem/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.mmenu__acc > button .ic { transition: transform .3s var(--ease); }
.mmenu__acc > button[aria-expanded="true"] .ic { transform: rotate(45deg); }
.mmenu__acc ul { padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.mmenu__acc ul a { display: flex; align-items: center; min-height: 48px; padding-left: 16px; border-left: 1px solid var(--line); font-size: var(--t-body); color: var(--text); }
.mmenu__acc ul a:hover { color: var(--blue-ink); border-left-color: var(--blue-ink); }
.mmenu__foot { display: grid; gap: 12px; margin-top: auto; padding: 24px 20px 28px; background: var(--mist); border-top: 1px solid var(--line); }
.mmenu__meta { margin-top: 4px; text-align: center; font-size: var(--t-xs); color: var(--grey); }
body.menu-open { overflow: hidden; }

/* ---------- A. Hero ---------- */
.hero { padding: 14px 14px 0; }
.hero__frame { position: relative; height: clamp(560px, 100vh - 28px, 860px); height: clamp(560px, 100svh - 28px, 860px); overflow: hidden; border-radius: var(--arc) 6px var(--arc) 6px; background: #CDD4DB; } /* v5.7.0: was clamp(760px, ..., 900px); the 760px floor pushed the CTAs below the fold in a real 1366x768 browser window (about 640px tall) */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.hero__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,28,42,.22), rgba(16,28,42,0) 22%); pointer-events: none; }
.hero__tag { position: absolute; z-index: 3; right: 18px; bottom: 18px; }
.hero__panel { position: absolute; z-index: 4; left: 18px; bottom: 18px; width: min(640px, 52%); padding: 46px 48px 0; background: #fff; border-radius: 6px 6px 6px var(--arc); }
.hero__panel .label { margin-bottom: 22px; }
.hero__panel h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -.012em; margin-bottom: 20px; text-wrap: balance; }
.hero__panel h1 span { color: var(--blue-ink); }
.hero__lede { font-size: 1.125rem; max-width: 30em; margin-bottom: 30px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.creds { display: flex; margin: 0 -48px; padding: 0 48px; border-top: 1px solid var(--line); }
.creds li { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; padding: 18px 0 22px; font: 500 .875rem/1.3 var(--ui); color: var(--ink); white-space: nowrap; }
.creds li + li { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.creds svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--blue-ink); stroke-width: 1.5; }

/* ---------- B. Meet Gaffneys ---------- */
.meet { padding: var(--sec) 0; }
.meet__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 88px; align-items: center; } /* v5.7.0: centred, so neither column leaves a dead band */
.meet__state { margin-top: 24px; font-size: var(--t-statement); line-height: 1.14; letter-spacing: -.008em; text-wrap: pretty; }
.meet__trio { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--ink); }
.meet__trio li { padding: 22px 24px 0 0; }
.meet__trio li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.meet__trio h3 { font-size: 1.5rem; margin-bottom: 6px; }
.meet__trio p { font-size: var(--t-small); }
.meet__side { padding-top: 0; } /* v5.7.0: was 42px */
.meet__photo { position: relative; width: 340px; max-width: 100%; }
.meet__photo img { width: 340px; height: 340px; object-fit: cover; border-radius: 6px var(--arc) 6px 6px; } /* v5.7.0: 340px (was 370px, the photo's native size; never enlarged) */
.meet__photo .tag { position: absolute; left: 14px; bottom: 14px; }
.meet__note { margin-top: 22px; }
.meet__note p { max-width: 24em; margin-bottom: 12px; }

/* ---------- C. Services ---------- */
.services { padding: var(--sec) 0; background: var(--mist); }
.s-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 32px; }
.s-head .h2 { margin-top: 18px; max-width: 13em; }
.s-ctrl { display: flex; align-items: center; gap: 22px; }
.s-count { font: 500 var(--t-small)/1 var(--ui); color: var(--grey); }
.s-count b { color: var(--ink); }
.s-arrows { display: flex; gap: 8px; }
.s-arrows button { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s, opacity .25s; }
.s-arrows button:not([disabled]):hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.s-arrows button[data-s-next]:not([disabled]) { background: var(--ink); color: #fff; border-color: var(--ink); }
.s-arrows button[disabled] { opacity: .35; cursor: default; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 392px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); scroll-padding-inline: var(--pad); }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }
.card { scroll-snap-align: start; }
.card a { position: relative; display: block; height: 540px; height: clamp(340px, 54vh, 440px); overflow: hidden; border-radius: 6px; color: #fff; } /* v5.7.0: was a fixed 540px poster; now about 345px in a 1366x768 browser window, 440px max */
.card:first-child a { border-top-left-radius: var(--arc); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card a:hover img, .card a:focus-visible img { transform: scale(1.045); }
.card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,28,42,.06) 0%, rgba(16,28,42,.34) 34%, rgba(16,28,42,.9) 78%, rgba(16,28,42,.94) 100%); } /* v5.7.0: deeper lower half for text contrast on the shorter card */
.card .tag { position: absolute; z-index: 2; top: 18px; left: 18px; }
.card__meta { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; }
.card__n { display: block; margin-bottom: 10px; font: 500 var(--t-xs)/1 var(--ui); letter-spacing: .12em; opacity: .85; }
.card__h { margin-bottom: 8px; color: #fff; font-size: clamp(1.45rem, 1.1rem + .9vw, 1.95rem); line-height: 1.08; }
.card__p { margin-bottom: 14px; font-size: var(--t-small); line-height: 1.5; color: rgba(255,255,255,.92); }
.card__more { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.6); font: 600 .875rem/1 var(--ui); }
.s-progress { position: relative; height: 2px; margin-top: 26px; background: #D3DAE1; }
.s-progress i { position: absolute; left: 0; top: 0; width: 40%; height: 2px; background: var(--ink); transition: left .4s var(--ease), width .4s var(--ease); }
.s-also { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.s-also__title { font: 400 1.5rem/1.2 var(--display); color: var(--ink); }
.s-also__title span { display: block; margin-top: 6px; font: 400 var(--t-small)/1.4 var(--ui); color: var(--grey); }
.s-also__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.s-also__list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; height: 100%; min-height: 84px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.s-also__list a:hover { border-color: var(--blue-ink); box-shadow: 0 14px 30px -24px rgba(16,28,42,.5); }
.s-also__list a:hover .ic { transform: translateX(3px); color: var(--blue-ink); }
.s-also__list .ic { transition: transform .3s var(--ease); }
.s-also__n { font: 400 1rem/1 var(--display); color: var(--blue-ink); }
.s-also__t strong { display: block; font: 600 1rem/1.3 var(--ui); color: var(--ink); }
.s-also__t small { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.4; color: var(--grey); }

/* ---------- D. Projects ---------- */
.projects { padding: var(--sec) 0; }
.p-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.p-head .h2 { margin: 18px 0 18px; }
.p-intro { max-width: 28em; margin-bottom: 34px; }
.p-list { border-top: 1px solid var(--line); }
.p-list button { width: 100%; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 12px; min-height: 64px; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; transition: padding .35s var(--ease); }
.p-list .n { font: 500 var(--t-xs)/1 var(--ui); letter-spacing: .08em; color: var(--grey); }
.p-list .t { font: 400 1.5rem/1.2 var(--display); color: var(--ink); transition: color .3s; }
.p-list .ic { opacity: 0; color: var(--blue-ink); transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.p-list button[aria-selected="true"] { padding-left: 14px; box-shadow: inset 2px 0 0 var(--blue-ink); }
.p-list button[aria-selected="true"] .t, .p-list button[aria-selected="true"] .n { color: var(--blue-ink); }
.p-list button[aria-selected="true"] .ic, .p-list button:hover .ic { opacity: 1; transform: none; }
.p-list button:hover .t { color: var(--blue-ink); }
.p-foot { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.p-mfoot { display: none; }

/* Viewer: a calm pale-blue "viewing room". The genuine photo is the focal point at native 370px. */
.viewer { position: relative; padding: 48px 52px 30px; background: var(--ice); border-radius: 6px var(--arc) 6px 6px; }
.viewer::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(21,102,180,.1); border-radius: 2px calc(var(--arc) - 10px) 2px 2px; pointer-events: none; }
.v-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 26px; }
.v-idx { font: 400 1.0625rem/1 var(--display); color: var(--grey); }
.v-idx b { font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.v-stage { position: relative; z-index: 1; display: grid; grid-template-columns: 370px 1fr; gap: 34px; align-items: end; }
.v-main { width: 370px; height: 370px; background: #fff; box-shadow: 0 34px 60px -38px rgba(16,28,42,.55); }
.v-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.v-open img { width: 370px; height: 370px; object-fit: cover; transition: opacity .35s var(--ease); }
.v-open.is-fading img { opacity: 0; }
.v-zoom { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 18px -8px rgba(16,28,42,.45); transition: transform .25s var(--ease); }
.v-open:hover .v-zoom { transform: scale(1.08); }
.v-info h3 { margin-bottom: 10px; font-size: 1.85rem; line-height: 1.15; }
.v-info p { margin-bottom: 22px; font-size: var(--t-small); }
.v-nav { display: flex; gap: 8px; }
.v-nav button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ice-2); background: #fff; color: var(--ink); transition: border-color .25s; }
.v-nav button:hover { border-color: var(--blue-ink); }
.v-thumbs { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(21,102,180,.12); }
.v-thumbs button { width: 52px; height: 52px; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: none; opacity: .5; box-shadow: 0 0 0 1px transparent; transition: opacity .3s, box-shadow .3s; }
.v-thumbs button:hover { opacity: .85; }
.v-thumbs button.on { opacity: 1; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--blue-ink); }
.v-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.lightbox { width: 100%; max-width: min(92vw, 500px); padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(16,28,42,.88); }
.lightbox figure { padding: 10px 10px 14px; background: #fff; border-radius: var(--r); }
.lightbox img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--mist); }
.lightbox figcaption { padding: 12px 6px 0; font-size: var(--t-small); color: var(--ink); }
.lightbox__close { position: absolute; top: -54px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: #fff; }
.lightbox__close .ic { width: 28px; height: 28px; }
.lightbox__nav { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 14px; color: #fff; font-size: .875rem; }
.lightbox__nav button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; }
.lightbox__nav button:hover { background: rgba(255,255,255,.12); }

/* ---------- E. Craftsmanship (the one dark band) ---------- */
.craft { padding: var(--sec) 0; background: var(--slate); color: #BFCAD5; }
.craft .label { color: var(--blue-soft); }
.c-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.c-head .h2 { margin-top: 18px; color: #fff; }
.c-head .h2 em { color: var(--blue-soft); }
.c-head p { font-size: 1.125rem; color: #BFCAD5; }
.c-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.c-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.c-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.c-steps span { padding-top: 6px; font: 400 1.0625rem/1 var(--display); color: var(--blue-soft); }
.c-steps h3 { margin-bottom: 6px; color: #fff; font-size: 1.6rem; }
.c-steps p { font-size: var(--t-small); color: #BFCAD5; }
.c-photos__label { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 16px; font-size: var(--t-small); color: #BFCAD5; }
.c-photos__label span { font: 600 .6875rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
.c-photos ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.c-photos figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.c-photos li:first-child img { border-top-left-radius: var(--arc); }
.c-photos li:last-child img { border-bottom-right-radius: var(--arc); }
.c-photos figcaption { margin-top: 10px; font-size: var(--t-xs); color: #AEBBC8; }
.c-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 56px; padding: 24px 30px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); }
.c-foot p { font: 400 1.5rem/1.3 var(--display); color: #fff; }

/* ---------- F. Process ---------- */
.process { padding: var(--sec) 0; }
.f-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.f-head .h2 { margin: 18px 0 14px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps::before { content: ""; position: absolute; left: 32px; right: 12%; top: 31px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.step { position: relative; }
.step__n { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 50%; border: 1px solid var(--blue-ink); background: #fff; font: 400 1.6rem/1 var(--display); color: var(--blue-ink); }
.step:last-child .step__n { background: var(--blue-ink); color: #fff; }
.step h3 { margin-bottom: 10px; font-size: 1.6rem; }
.step p { font-size: var(--t-small); max-width: 22em; }
.step small { display: block; margin-top: 12px; font: 500 var(--t-xs)/1.4 var(--ui); color: var(--grey); }
.f-note { margin-top: 48px; text-align: center; font-size: var(--t-small); color: var(--grey); }
.f-note a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--blue-ink); }

/* ---------- G. Testimonials ---------- */
.reviews { padding: var(--sec) 0; background: var(--ice); }
.r-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
.r-mark { display: block; height: 64px; margin-top: 18px; overflow: hidden; font: 400 132px/1 var(--display); color: var(--blue); }
.r-feature blockquote p { margin: 12px 0 28px; font: 400 var(--t-quote)/1.15 var(--display); letter-spacing: -.008em; color: var(--ink); text-wrap: pretty; }
.r-feature footer { display: flex; align-items: center; gap: 14px; }
.r-ini { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; font: 400 1.25rem/1 var(--display); color: var(--blue-ink); }
.r-feature footer b { display: block; font: 600 1rem/1.3 var(--ui); color: var(--ink); }
.r-feature footer span span { font-size: .875rem; color: var(--grey); }
.r-side { display: grid; gap: 16px; }
.r-card { padding: 26px 28px; background: #fff; border-radius: var(--r); }
.r-card:first-child { border-top-right-radius: var(--arc); }
.r-card p { margin-bottom: 16px; font-size: 1rem; }
.r-card footer { display: flex; justify-content: space-between; gap: 12px; font: 500 .875rem/1.3 var(--ui); color: var(--grey); }
.r-card footer b { color: var(--ink); }
.r-side .link { justify-self: start; margin-top: 8px; }

/* ---------- H. Areas ---------- */
.areas { padding: var(--sec) 0; }
.a-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; }
.a-copy .h2 { margin: 18px 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem); }
.a-copy p { max-width: 30em; margin-bottom: 24px; }
.a-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.a-chips li { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 2px; font: 500 var(--t-small)/1 var(--ui); color: var(--ink); }
.a-chips li.p { background: var(--ink); color: #fff; border-color: var(--ink); }
.a-map { position: relative; height: 380px; overflow: hidden; background: var(--mist); border-radius: var(--arc) 6px 6px 6px; }
.a-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-map__note { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; gap: 12px; font: 500 var(--t-xs)/1.4 var(--ui); color: var(--grey); }

/* ---------- I. FAQ ---------- */
.faq { padding: var(--sec) 0; background: var(--mist); }
.q-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.q-head .h2 { margin: 18px 0; }
.q-head p { margin-bottom: 24px; }
.q-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.qa { border-top: 1px solid #CDD5DD; }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 64px; padding: 22px 0; cursor: pointer; font: 400 1.3rem/1.3 var(--display); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue-ink); }
.qa summary i { position: relative; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--line-2); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--blue-ink); }
.qa summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.qa[open] summary i::after { transform: rotate(0); }
.qa p { padding: 0 40px 22px 0; font-size: var(--t-small); }
.qa[open] p { animation: fadeUp .3s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- J. Quote (v5.8.0 redesign) ----------
   One full-width form, no decorative photo panel. Four numbered rows (About you, About the job, Your project,
   How to reach you), each with an editorial label column on wide screens. Description and photos are always
   visible. Container queries let the same component sit full width (12 pages) or inside the Contact card.
   Field names, ids, validation hooks and the v6.1 integration hooks are unchanged. */
.quote { padding: 14px; }
.q-shell { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--arc) 6px var(--arc) 6px; }
.q-right { container: qf / inline-size; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 52px var(--pad) 48px; scroll-margin-top: 24px; outline: none; }
.q-right:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-ink); }
.q-right.is-arrived .demo-flag, .q-right.is-arrived .q-title { animation: arrive 1.2s var(--ease); }
@keyframes arrive { 0% { opacity: .35; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

/* Header: heading and one sentence on the left, a discreet call link on the right */
.qf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.q-title { margin: 0; font-size: clamp(1.85rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; }
.q-sub { margin: 8px 0 0; max-width: 40em; font-size: 1rem; color: var(--text); }
.q-sub a { font-weight: 600; color: var(--blue-ink); white-space: nowrap; }
.q-tel { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px; color: var(--ink); }
.q-tel .ic { width: 20px; height: 20px; color: var(--blue-ink); }
.q-tel span { font: 400 1.35rem/1.15 var(--display); }
.q-tel small { display: block; font: 500 var(--t-xs)/1.3 var(--ui); color: var(--grey); }
.q-tel:hover span { color: var(--blue-ink); }
.q-right:has(> .q-done:not([hidden])) .qf-head { display: none; } /* the thank-you panel has its own heading and phone link */

/* STAGING ONLY: remove in the go-live build */
.demo-flag { display: block; margin: 0 0 26px; padding: 12px 16px 12px 44px; position: relative; background: #FFF4D1; border: 1px solid #E5C875; border-left: 4px solid #C99A1A; border-radius: var(--r); font-size: .8438rem; line-height: 1.5; color: #5B4A17; }
.demo-flag::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #C99A1A; color: #fff; font: 600 13px/20px var(--ui); text-align: center; }
.demo-flag--inline { margin: 16px 0 20px; }

/* Groups: a small numbered label, then the fields. Laid out by .qf-cols and .qf-foot below. */
.grp { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.grp__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; width: 100%; margin: 0 0 14px; padding: 0; font: 600 .8125rem/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.grp__n { font: 400 1.25rem/1 var(--display); letter-spacing: 0; color: var(--blue-ink); }
.grp__label small { flex-basis: 100%; margin-top: 4px; font: 400 .875rem/1.4 var(--ui); letter-spacing: 0; text-transform: none; color: var(--grey); }
.grp__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
.grp__body > .fld { margin-bottom: 14px; }
.grp--project .fld { margin-bottom: 14px; }
.grp--project .fld:last-child { margin-bottom: 0; }
.grp.fld--chips { margin-bottom: 22px; }
.qf-col--side { padding-top: 22px; border-top: 1px solid var(--line); }
.qf-foot { padding-top: 22px; border-top: 1px solid var(--line); }
.qf-foot .grp--reach { margin-bottom: 18px; }
.qf-foot .grp--reach .fld, .qf-foot .grp--reach .fld--chips { margin-bottom: 14px; }

/* Shared field styles (also used by Contact and Get Appointment) */
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fld { margin-bottom: 14px; min-width: 0; }
.row .fld { margin-bottom: 14px; }
.fld label, .fld__legend { display: block; margin-bottom: 8px; padding: 0; font: 600 .875rem/1.35 var(--ui); color: var(--ink); }
.opt-tag { font-style: normal; font-weight: 400; color: var(--grey); }
.fld input[type="text"], .fld input[type="tel"], .fld input[type="email"], .fld textarea { width: 100%; min-height: 54px; padding: 14px 16px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r); font: 400 16px/1.4 var(--ui); color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.fld textarea { min-height: 150px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: #6E7A86; }
.fld input:hover, .fld textarea:hover { border-color: var(--line-2); }
.fld input:focus, .fld textarea:focus { outline: none; background: #fff; border-color: var(--blue-ink); box-shadow: 0 0 0 4px rgba(21,102,180,.14); }
.fld [aria-invalid="true"] { border-color: #B3261E; background: #fff; }
.fld__err { margin-top: 6px; font-size: .8438rem; color: #B3261E; }
.fld--chips { margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 2px; background: #fff; font: 500 .9375rem/1 var(--ui); color: var(--ink); transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--blue-ink); background: var(--ice); color: var(--blue-ink); box-shadow: inset 0 0 0 1px var(--blue-ink); }
.chip input:checked + span::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.fld--chips[aria-invalid="true"] .chip span { border-color: #E2A7A3; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Old "Add details" toggle: no longer in the quote form (kept for any cached page) */
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-bottom: 20px; padding: 14px 20px; background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: left; }
.q-extra { margin: 0 0 24px; }

/* Photo drop area: the whole box is the file input, so clicking, tapping or dropping photos all work */
.upload, .fld .upload { position: relative; display: flex; flex-direction: column; margin: 0; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 20px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: #FBFCFD; text-align: center; cursor: pointer; font-weight: 400 !important; transition: border-color .2s, background-color .2s; }
.upload::before { content: ""; width: 38px; height: 38px; margin-bottom: 2px; border-radius: 50%; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231566B4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Ccircle cx='9' cy='10.5' r='1.6'/%3E%3Cpath d='m20.5 15.5-4.5-4.5-7 7'/%3E%3C/svg%3E") center/20px no-repeat; }
.upload:hover, .upload:focus-within { border-color: var(--blue-ink); background: var(--ice); }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload input:focus-visible ~ .upload__btn { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.upload__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--r); background: #fff; font: 600 var(--t-small)/1 var(--ui); color: var(--ink); }
.upload__or { font-size: var(--t-xs); color: var(--grey); }
.upload__hint { font-size: var(--t-xs); line-height: 1.45; color: var(--grey); }
.upload__list { display: grid; gap: 6px; margin-top: 10px; font-size: .875rem; }
.upload__list:empty { display: none; }
.upload__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--mist); border-radius: var(--r); }
.upload__list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__list li span:last-child { white-space: nowrap; color: var(--grey); }

/* Send row */
.send { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.send .btn { width: 100%; }
.send p { font-size: .8438rem; line-height: 1.55; color: var(--grey); }
.btn__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading .btn__spinner { display: inline-block; }
.is-loading { pointer-events: none; opacity: .9; }
.q-status:empty { display: none; }
.q-status { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); font-size: var(--t-small); }
.q-status.is-error { background: #FCEEEE; border: 1px solid #EBC2BF; color: #7A1E17; }
.q-status a { font-weight: 600; }
.q-done { max-width: 720px; }
.q-done h3 { margin: 14px 0; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.1; }
.q-done:focus { outline: none; }

/* Medium (tablets, and the Contact page card): fields side by side, groups still stacked */
@container qf (min-width: 600px) {
  .grp--you .grp__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grp--reach .grp__body { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 24px; }
  .qf-foot .grp--reach .fld, .qf-foot .grp--reach .fld--chips { margin-bottom: 0; }
  .send { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
  .send .btn { width: auto; flex: none; order: 2; }
  .grp--project { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 18px; }
  .grp--project .grp__label { grid-column: 1 / -1; }
  .grp--project .fld { margin-bottom: 0; }
  .grp--project .upload { min-height: 150px; }
}
/* Wide: details and service on the left, the project description and photos on the right */
@container qf (min-width: 900px) {
  .qf-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 52px; }
  .qf-col--side { padding: 0 0 0 52px; margin-left: -26px; border-top: 0; border-left: 1px solid var(--line); }
  .grp--project { display: block; }
  .grp--project .fld { margin-bottom: 14px; }
  .grp--project .fld:last-child { margin-bottom: 0; }
  .qf-col .grp:last-child, .qf-col .grp.fld--chips:last-child { margin-bottom: 26px; }
  .grp--project textarea { min-height: 156px; }
  .grp--project .upload { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; padding: 16px 18px; text-align: left; }
  .grp--project .upload::before { margin: 0; }
  .grp--project .upload__hint { flex-basis: 100%; }
  .qf-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 52px; align-items: end; }
  .qf-foot .grp--reach { margin: 0; }
  .send { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; }
  .send .btn { width: 100%; order: 0; }
  .send p { font-size: .8125rem; }
}

/* ---------- K. Footer ---------- */
.footer { margin-top: 14px; padding: 96px 0 0; overflow: hidden; background: var(--ink); color: #AEBBC8; }
.f-cta { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-bottom: 72px; border-bottom: 1px solid rgba(255,255,255,.12); }
.f-cta__title { font: 400 clamp(2.4rem, 1.5rem + 3vw, 4.25rem)/1.02 var(--display); letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.f-cta__title em { font-style: normal; color: var(--blue-soft); }
.f-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.f-grid { display: grid; grid-template-columns: 4fr 2fr 2.4fr 3fr; gap: 48px; padding: 64px 0 56px; }
.f-logo { display: inline-block; margin-bottom: 22px; padding: 10px 14px; background: #fff; border-radius: 14px var(--r) var(--r) var(--r); }
.f-logo img { height: 60px; width: auto; }
.f-brand p { max-width: 24em; font-size: var(--t-small); }
.f-col__h { margin-bottom: 16px; font: 600 .75rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.f-col li { font-size: var(--t-small); }
.f-col a { display: inline-flex; align-items: center; min-height: 40px; }
.f-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.f-col--contact li { min-height: 36px; display: flex; align-items: center; overflow-wrap: anywhere; }
.f-big { font: 400 1.6rem/1.2 var(--display) !important; color: #fff; }
.wordmark { height: .74em; margin: 0 0 0 -.04em; overflow: hidden; font: 400 clamp(108px, 23vw, 340px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; color: rgba(255,255,255,.06); user-select: none; }
.wordmark::before { content: attr(data-word); }
.f-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 22px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-xs); }
.f-base a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mobile action bar ---------- */
.mbar { display: none; }

/* ---------- Reveal (motion-safe; JS adds .reveal only when allowed) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
/* v5.7.0 Hero on shorter desktop windows (e.g. a 1366x768 screen, where the browser leaves about 620 to 660px):
   the same panel, photo and wording, with tighter internal spacing and a height-aware headline size, so the
   headline, explanation, both CTAs and the credential strip are all visible without scrolling. */
@media (min-width: 1024px) and (max-height: 860px) {
  :root { --nav-top: 22px; }
  .hero__panel { width: min(660px, 54%); padding: 32px 44px 0; }
  .hero__panel .label { margin-bottom: 14px; }
  .hero__panel h1 { font-size: clamp(2.5rem, 6.6vh, 3.9rem); margin-bottom: 14px; }
  .hero__panel h1 span { display: block; } /* keeps "built to last." as its own closing line, as in the approved design */
  .hero__lede { font-size: 1.0625rem; line-height: 1.55; margin-bottom: 22px; }
  .hero__ctas { margin-bottom: 22px; }
  .creds { margin: 0 -44px; padding: 0 44px; }
  .creds li { padding: 15px 0 17px; }
}
@media (min-width: 1024px) and (max-height: 600px) {
  .hero__panel { padding-top: 26px; }
  .hero__panel .label { display: none; }
  .hero__lede { margin-bottom: 18px; }
  .hero__ctas { margin-bottom: 18px; }
}

@media (max-width: 1240px) {
  .nav__tel span { display: none; }
  .nav__tel { width: 46px; justify-content: center; border: 1px solid var(--line); border-radius: 50%; }
  .nav__link { padding: 0 10px; }
  .nav__link::after { left: 10px; right: 10px; }
  .hero__panel { width: min(600px, 56%); padding: 40px 40px 0; }
  .creds { margin: 0 -40px; padding: 0 40px; }
  .creds li { font-size: .8125rem; }
  .creds li + li { margin-left: 12px; padding-left: 12px; }
}

@media (max-width: 1080px) {
  :root { --pad: 40px; }
  .meet__grid { gap: 56px; }
  .p-grid { gap: 48px; }
  .viewer { padding: 40px 36px 26px; }
  .v-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .v-main, .v-open img { width: 100%; max-width: 370px; height: auto; aspect-ratio: 1; }
  .v-info { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; }
  .v-info p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .v-info .v-nav { grid-column: 2; grid-row: 1; }
  .c-grid { grid-template-columns: 1fr; gap: 36px; }
  .c-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .c-steps li, .c-steps li:last-child { border-bottom: 0; }
}

@media (max-width: 1023px) {
  :root { --nav-h: 68px; --nav-top: 18px; }
  .nav { left: 18px; right: 18px; gap: 10px; padding: 0 8px 0 14px; }
  .nav__brand img { height: 48px; }
  .nav__main, .nav__cta { display: none; }
  .nav__act { margin-left: auto; gap: 8px; }
  .nav__menu { display: inline-flex; }
  .hero__frame { height: auto; min-height: 0; overflow: visible; background: none; border-radius: 0; }
  .hero__img { position: relative; height: 520px; border-radius: var(--arc) 6px 6px 6px; }
  .hero__frame::before { bottom: auto; height: 520px; border-radius: var(--arc) 6px 6px 6px; }
  .hero__tag { top: 100px; bottom: auto; right: 16px; }
  .hero__panel { position: relative; left: auto; bottom: auto; width: auto; max-width: 720px; margin: -160px 24px 0; box-shadow: 0 30px 60px -40px rgba(16,28,42,.55); }
  .meet__grid, .r-grid, .a-grid, .q-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .meet__side { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding-top: 0; }
  .meet__photo, .meet__photo img { width: 220px; height: 220px; }
  .meet__note { margin-top: 0; }
  .s-also { grid-template-columns: 1fr; gap: 16px; }
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .p-list, .p-foot { display: none; }
  .p-intro { margin-bottom: 0; }
  .p-mfoot { display: flex; gap: 10px; }
  .viewer { max-width: 720px; }
  .v-stage { grid-template-columns: 370px 1fr; align-items: end; }
  .v-info { display: block; }
  .v-info p { margin-bottom: 18px; }
  .c-head { grid-template-columns: 1fr; gap: 16px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .steps::before { display: none; }
  .f-cta { grid-template-columns: 1fr; gap: 28px; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
  .f-col a { min-height: 44px; }
  .mbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
  .mbar.is-visible { transform: none; visibility: visible; }
  .mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: var(--r); font: 600 1rem/1 var(--ui); }
  .mbar__call { border: 1px solid var(--line-2); color: var(--ink); }
  .mbar__quote { background: var(--blue-ink); color: #fff; }
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  :root { --pad: 18px; --arc: 26px; --nav-h: 60px; --nav-top: 16px; }
  body { font-size: 1rem; }
  .label { font-size: .6875rem; letter-spacing: .12em; }
  .btn { min-height: 52px; padding: 0 20px; }

  /* Hero: compact photo + overlapping panel; quote, phone and credentials inside 390x844 */
  .hero { padding: 8px 8px 0; }
  .nav { left: 16px; right: 16px; border-radius: 18px var(--r) var(--r) var(--r); }
  .nav.is-stuck { top: 8px; }
  .nav__brand img { height: 42px; }
  .nav__tel { width: 46px; height: 46px; }
  .hero__img { height: 252px; border-radius: var(--arc) var(--r) var(--r) var(--r); object-position: 50% 55%; }
  .hero__frame::before { height: 252px; border-radius: var(--arc) var(--r) var(--r) var(--r); }
  .hero__tag { top: 84px; right: 14px; font-size: .5625rem; }
  .hero__panel { margin: -40px 8px 0; padding: 24px 20px 0; border-radius: var(--r) var(--r) var(--r) var(--arc); }
  .hero__panel .label { margin-bottom: 12px; }
  .hero__panel h1 { font-size: 2.2rem; line-height: 1.04; margin-bottom: 12px; }
  .hero__lede { font-size: .9688rem; line-height: 1.55; margin-bottom: 18px; }
  .hero__ctas { flex-direction: column; gap: 8px; margin-bottom: 18px; }
  .hero__ctas .btn { width: 100%; }
  .creds { margin: 0 -20px; padding: 0 20px; }
  .creds li { flex: 1 1 0; padding: 13px 0 15px; font-size: .78rem; white-space: normal; }
  .creds li + li { margin-left: 10px; padding-left: 10px; }
  .creds svg { display: none; }

  .meet__state { margin-top: 16px; font-size: 1.85rem; line-height: 1.16; }
  .meet__trio { grid-template-columns: 1fr; margin-top: 26px; }
  .meet__trio li, .meet__trio li + li { display: grid; grid-template-columns: 136px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .meet__trio h3 { font-size: 1.2rem; margin: 0; }
  .meet__side { grid-template-columns: 120px 1fr; gap: 16px; }
  .meet__photo, .meet__photo img { width: 120px; height: 120px; }
  .meet__photo .tag { display: none; }
  .meet__note p { font-size: var(--t-small); margin-bottom: 6px; }

  .s-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
  .s-head .h2 { margin-top: 14px; }
  .s-arrows button { width: 46px; height: 46px; }
  .rail { grid-auto-columns: 82%; gap: 12px; }
  .card a { height: 380px; } /* v5.7.0: was 420px */
  .card__meta { left: 22px; right: 22px; bottom: 22px; }
  .s-progress { margin-top: 22px; }
  .s-also { margin-top: 28px; padding-top: 24px; }
  .s-also__title { font-size: 1.3rem; }
  .s-also__list { grid-template-columns: 1fr; gap: 8px; }
  .s-also__list a { min-height: 70px; padding: 14px 16px; }

  .viewer { padding: 22px 16px 18px; border-radius: var(--r) var(--arc) var(--r) var(--r); }
  .viewer::after { inset: 8px; }
  .v-top { margin-bottom: 16px; }
  .v-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v-info { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
  .v-info h3 { font-size: 1.5rem; }
  .v-info p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .v-info .v-nav { grid-column: 2; grid-row: 1; }
  .v-thumbs { gap: 6px; margin-top: 16px; padding-top: 14px; justify-content: space-between; }
  .v-thumbs button { width: 44px; height: 44px; }
  .p-mfoot .btn { flex: 1; padding: 0 12px; font-size: .9375rem; }

  .c-head { margin-bottom: 32px; }
  .c-head p { font-size: 1rem; }
  .c-steps { grid-template-columns: 1fr; gap: 0; }
  .c-steps li, .c-steps li:last-child { padding: 16px 0; }
  .c-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
  .c-steps h3 { font-size: 1.35rem; }
  .c-photos ul { gap: 8px; }
  .c-photos figcaption { font-size: .72rem; line-height: 1.35; }
  .c-foot { flex-direction: column; align-items: stretch; margin-top: 32px; padding: 22px; }
  .c-foot p { font-size: 1.3rem; }

  .f-head { margin-bottom: 32px; text-align: left; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 48px 1fr; gap: 0 18px; padding-bottom: 24px; }
  .step::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; border-left: 1px dashed var(--line-2); }
  .step:last-child::before { display: none; }
  .step__n { grid-row: span 3; width: 48px; height: 48px; margin: 0; font-size: 1.25rem; }
  .step h3 { margin: 8px 0 6px; font-size: 1.35rem; }
  .f-note { margin-top: 4px; text-align: left; }

  .r-mark { height: 44px; font-size: 96px; }
  .r-card { padding: 22px; }
  .a-map { height: 240px; }
  .q-list { grid-template-columns: 1fr; }
  .qa summary { padding: 18px 0; font-size: 1.15rem; }
  .qa p { padding-right: 0; }

  .quote { padding: 8px; }
  .q-shell { border-radius: var(--arc) var(--r) var(--arc) var(--r); }
  .q-right { padding: 30px 18px 30px; }
  .qf-head { margin-bottom: 22px; }
  .q-tel span { font-size: 1.2rem; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .chip span { min-height: 46px; padding: 0 13px; font-size: .9063rem; }

  .footer { padding-top: 56px; margin-top: 8px; }
  .f-cta { padding-bottom: 40px; }
  .f-cta__title { font-size: 2.3rem; }
  .f-cta__acts { flex-direction: column; }
  .f-cta__acts .btn { width: 100%; }
  .f-grid { gap: 30px 20px; padding: 40px 0 32px; }
  .f-col--contact { grid-column: 1 / -1; }
  .wordmark { font-size: 104px; }
  .f-base { flex-direction: column; }
}

@media (max-width: 359px) {
  .nav__tel { display: none; }
  .hero__panel h1 { font-size: 1.95rem; }
  .creds li { font-size: .72rem; }
  .meet__trio li, .meet__trio li + li { grid-template-columns: 1fr; gap: 2px; }
  .chip span { padding: 0 10px; font-size: .8125rem; }
  .f-grid { grid-template-columns: 1fr; }
}

/* v5.7.0 Short phones (e.g. 320x568, 360x640): smaller photo band so the quote button is reachable without scrolling */
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .hero__img, .hero__frame::before { height: 176px; }
  .hero__tag { top: 76px; }
  .hero__panel { margin-top: -28px; padding-top: 20px; }
  .hero__panel .label { margin-bottom: 8px; }
  .hero__panel h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .hero__lede { margin-bottom: 14px; }
}

/* Landscape phones: keep the hero compact; hide the action bar so it can't cover content */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  :root { --nav-h: 56px; --nav-top: 10px; }
  .nav__brand img { height: 40px; }
  .hero__img, .hero__frame::before { height: 132px; } /* v5.7.0: was 190px */
  .hero__tag { top: 70px; }
  .hero__panel { margin-top: -24px; padding-top: 18px; }
  .hero__panel .label { display: none; }
  .hero__panel h1 { font-size: 1.75rem; margin-bottom: 8px; }
  .hero__lede { margin-bottom: 12px; }
  .hero__ctas { flex-direction: row; }
  .hero__ctas .btn { width: auto; flex: 1; }
  .mmenu__nav > a, .mmenu__nav .mmenu__acc > button { min-height: 48px; font-size: 1.0625rem; }
  .mbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}