@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url(/assets/fonts/work-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 500; font-display: swap; src: url(/assets/fonts/work-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600; font-display: swap; src: url(/assets/fonts/work-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 700; font-display: swap; src: url(/assets/fonts/work-sans-latin-700-normal.woff2) format("woff2"); }
/* metric-matched fallbacks so text does not jump when the real fonts land */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("Times"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 104%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }

/* ==========================================================================
   Elite Walls v5 — v3 with room to breathe.
   Same dark editorial idea. Wider gutters, one section-head system, body
   copy that is never smaller than 16px, rails on the edges, and sections
   that fill their own space. Nothing is hidden by CSS; JS only ever hides
   what it is about to reveal.
   ========================================================================== */

:root {
  --ink: #131213; --dark: #1b1a1b; --dark-2: #232123;
  --accent: #aaddf8; --accent-ink: #4ea7d8;
  --plaster: #e9e4dc; --plaster-2: #f4f1ec; --plaster-3: #d9d2c7;
  --white: #fff;
  --muted: #6b6669; --muted-dark: #b3adb0;
  --line: rgba(19,18,19,.12); --line-dark: rgba(255,255,255,.14);
  --serif: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
  --sans: "Work Sans", "Work Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1360px;
  --gutter: clamp(24px, 6.5vw, 112px);
  --rail: 64px;
  --nav-h: 84px;
  --r: 6px;
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-2: cubic-bezier(.77,0,.175,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { margin: 0; font-family: var(--sans); font-size: 17.5px; line-height: 1.62; color: var(--ink); background: var(--plaster-2); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0 0 .45em; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; }
::selection { background: var(--accent); color: var(--ink); }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - var(--gutter) * 2, 920px); margin-inline: auto; }
.section { padding: clamp(96px, 12vw, 190px) 0; position: relative; }
.section--tight { padding: clamp(56px, 7vw, 110px) 0; }
.dark { background: var(--dark); color: var(--plaster-2); }
.ink { background: var(--ink); color: var(--plaster-2); }
.plaster { background: var(--plaster); }
.light { background: var(--plaster-2); }
main > section:not(.hero) { position: relative; z-index: 2; }

/* ---------------------------------------------------------- type */
.display { font-family: var(--serif); font-size: clamp(3rem, 9.4vw, 9rem); line-height: .94; letter-spacing: -.03em; }
.t-xl { font-family: var(--serif); font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -.025em; }
.t-l { font-family: var(--serif); font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.02; letter-spacing: -.02em; }
.t-m { font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.08; }
.display em, .t-xl em, .t-l em, .t-m em { font-style: italic; color: var(--accent-ink); }
.dark .display em, .ink .display em, .dark .t-xl em, .ink .t-xl em, .dark .t-l em, .ink .t-l em, .dark .t-m em, .ink .t-m em { color: var(--accent); }
.lede { font-size: clamp(1.1rem, 1.55vw, 1.32rem); line-height: 1.55; color: var(--muted); max-width: 52ch; }
.dark .lede, .ink .lede { color: var(--muted-dark); }
.eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.dark .eyebrow, .ink .eyebrow { color: var(--accent); }
.split-line { overflow: hidden; perspective: 900px; } .split-line > * { display: block; }
.split-inner { display: block; transform-style: preserve-3d; backface-visibility: hidden; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--ink); padding: 12px 18px; z-index: 999; }
.skip:focus { left: 12px; top: 12px; }

/* one section-head system: heading gets the room, lede sits beside it */
.head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 96px); align-items: end; margin-bottom: clamp(44px, 6vw, 88px); position: relative; }
.head h2 { max-width: 24ch; margin: 0; }
.head .lede { margin-bottom: .35em; }
.head .num { position: absolute; right: 0; top: -1.2em; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--muted); letter-spacing: .04em; }
.dark .head .num, .ink .head .num { color: var(--muted-dark); }
.head--stack { grid-template-columns: 1fr; align-items: start; }
.head .rule { grid-column: 1 / -1; display: block; height: 1px; background: var(--line); transform-origin: left; margin-top: clamp(20px, 3vw, 36px); }
.dark .head .rule, .ink .head .rule, .act .head .rule { background: var(--line-dark); }
.rule { display: block; height: 1px; background: var(--line); transform-origin: left; }
.dark .rule, .ink .rule { background: var(--line-dark); }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------- preloader / cursor / progress / rails */
.loader { position: fixed; inset: 0; z-index: 1000; background: var(--ink); color: var(--plaster-2); display: grid; place-items: center; pointer-events: none; }
.loader__word { font-family: var(--serif); font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: -.03em; overflow: hidden; }
.loader__word span { display: inline-block; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 900; transform: translate(-50%, -50%); mix-blend-mode: difference; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), opacity .3s; }
.cursor.is-on { opacity: 1; } .cursor.is-hover { width: 64px; height: 64px; } .cursor.is-view { width: 96px; height: 96px; }
.cursor__label { position: absolute; inset: 0; display: grid; place-items: center; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.is-view .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }

.rail { position: fixed; top: 50%; transform: translateY(-50%); z-index: 450; display: none; pointer-events: none; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--muted); mix-blend-mode: difference; }
.rail--l { left: 0; width: var(--rail); align-items: center; flex-direction: column; gap: 18px; }
.rail__line { width: 1px; height: 180px; background: rgba(128,128,128,.35); position: relative; overflow: hidden; }
.rail__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.rail__label { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; white-space: nowrap; }
.rail__label b { color: var(--accent); font-weight: 600; margin-left: 10px; }
.rail--r { right: 0; width: var(--rail); align-items: center; flex-direction: column; gap: 22px; }
.rail__meta { writing-mode: vertical-rl; color: #fff; opacity: .7; white-space: nowrap; }
.booktab { position: fixed; right: 0; bottom: 18vh; z-index: 460; display: none; writing-mode: vertical-rl; transform: rotate(180deg); text-decoration: none; background: var(--accent); color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 18px 12px; border-radius: 0 6px 6px 0; }
.booktab:hover { background: #fff; }
@media (min-width: 1240px) { .rail { display: flex; } .booktab { display: block; } }

/* ---------------------------------------------------------- header + menu */
.header { position: fixed; inset: 0 0 auto 0; z-index: 500; height: var(--nav-h); display: flex; align-items: center; color: var(--plaster-2); transition: transform .5s var(--ease), background .4s, color .4s; }
.header.is-hidden { transform: translateY(-100%); }
.header.is-solid { background: rgba(19,18,19,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header.on-light:not(.is-solid) { color: var(--ink); }
.nav { width: min(100% - var(--gutter) * 2, 1600px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav__phone { text-decoration: none; font-size: .8rem; letter-spacing: .04em; font-weight: 500; }
.btn-pill { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 15px 26px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--accent); color: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
.btn-pill::before { content: ""; position: absolute; inset: 0; background: var(--plaster-2); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; border-radius: inherit; }
.btn-pill:hover::before { transform: translateY(0); }
.btn-pill--ghost { background: transparent; border: 1px solid currentColor; color: inherit; }
.btn-pill--ghost::before { background: currentColor; }
.btn-pill--ghost:hover { color: var(--ink); }
.nav__burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; }
.nav__burger svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.menu { position: fixed; inset: 0; z-index: 480; background: var(--ink); color: var(--plaster-2); display: grid; align-content: center; padding: var(--gutter); clip-path: inset(0 0 100% 0); pointer-events: none; }
.menu.is-open { pointer-events: auto; }
.menu a { text-decoration: none; }
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.menu__links a { font-family: var(--serif); font-size: clamp(2.4rem, 9vw, 5rem); line-height: 1.05; letter-spacing: -.03em; display: inline-block; }
.menu__meta { margin-top: 40px; display: grid; gap: 8px; color: var(--muted-dark); font-size: 1rem; }
.menu__meta a { color: var(--accent); }
@media (max-width: 960px) { .nav { grid-template-columns: auto 1fr auto; } .nav__links { display: none; } .nav__burger { display: block; order: -1; } .nav__logo { justify-self: center; } .nav__end .nav__phone, .nav__end .btn-pill { display: none; } }

.actionbar { display: none; }
@media (max-width: 860px) {
  .actionbar { position: fixed; inset: auto 0 0 0; z-index: 470; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: rgba(19,18,19,.9); backdrop-filter: blur(12px); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); }
  .actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
  .actionbar__call { color: #fff; border: 1px solid rgba(255,255,255,.35); }
  .actionbar__book { background: var(--accent); color: var(--ink); }
  .actionbar svg { width: 15px; height: 15px; fill: currentColor; }
  body { padding-bottom: 76px; }
}

/* ---------------------------------------------------------- hero (sticky; the page scrolls over it) */
.hero { position: sticky; top: 0; z-index: 1; height: 100svh; min-height: 640px; display: grid; align-items: end; color: var(--plaster-2); overflow: hidden; background: var(--ink); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,18,19,.5) 0%, rgba(19,18,19,.12) 40%, rgba(19,18,19,.86) 100%); }
.hero__inner { position: relative; z-index: 2; padding: calc(var(--nav-h) + 40px) 0 clamp(56px, 8vw, 110px); width: 100%; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero .eyebrow { color: var(--accent); }
.hero__sub { max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(244,241,236,.88); margin: clamp(24px, 3vw, 40px) 0 clamp(30px, 3.4vw, 46px); line-height: 1.55; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__aside { display: grid; gap: 22px; text-align: right; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,241,236,.68); }
.hero__aside strong { display: block; color: var(--plaster-2); font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.01em; text-transform: none; font-weight: 400; margin-bottom: 4px; }
.hero__corner { position: absolute; z-index: 3; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,236,.6); }
.hero__corner--bl { left: var(--gutter); bottom: 22px; display: flex; align-items: center; gap: 12px; }
.hero__corner--br { right: var(--gutter); bottom: 22px; }
.scrollcue { width: 1px; height: 44px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.scrollcue::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: cue 1.8s var(--ease-2) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.page-hero { height: auto; min-height: min(78svh, 760px); }
.page-hero .hero__inner { padding-top: calc(var(--nav-h) + 100px); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__aside { display: none; } .hero__corner--br { display: none; } }

/* ---------------------------------------------------------- manifesto / trust */
.manifesto { font-family: var(--serif); font-size: clamp(1.8rem, 3.9vw, 3.6rem); line-height: 1.18; letter-spacing: -.02em; max-width: 26ch; }
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 1px solid var(--line); }
.dark .trust, .ink .trust { border-color: var(--line-dark); }
.trust > div { padding: clamp(30px, 3.6vw, 48px) 0; border-bottom: 1px solid var(--line); }
.dark .trust > div, .ink .trust > div { border-color: var(--line-dark); }
.trust strong { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: -.02em; margin-bottom: .45rem; }
.trust span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.dark .trust span, .ink .trust span { color: var(--muted-dark); }

/* ---------------------------------------------------------- finish explorer */
.explorer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.explorer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.explorer__list li { border-bottom: 1px solid var(--line-dark); }
.explorer__list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; column-gap: 18px; row-gap: 8px; padding: clamp(18px, 2vw, 26px) 0; text-decoration: none; transition: padding .4s var(--ease); } /* v7f: name on one line, tag under it, every row the same shape */
.explorer__list a:hover, .explorer__list a.is-active { padding-left: 12px; }
.explorer__list .i { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1rem; }
.explorer__list .n { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.02em; line-height: 1; transition: color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explorer__list a:hover .n, .explorer__list a.is-active .n { color: var(--accent); }
.explorer__list .t { grid-column: 2; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.explorer__stage { position: sticky; top: calc(var(--nav-h) + 24px); }
.stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--dark-2); width: min(100%, calc((100svh - var(--nav-h) - 64px) * .8)); margin-left: auto; } /* never taller than the viewport while pinned, so the caption plate baked into the image stays on screen */
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.stage img.is-active { opacity: 1; transform: none; }
.explorer__more { margin-top: 30px; }
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  /* v7f: the picture pins under the header so a tapped name swaps an image you can see; it rides up to the edge when the header hides */
  .explorer__stage { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 3; order: -1; background: var(--ink); padding-bottom: 12px; transition: top .5s var(--ease); }
  .stage { width: 100%; margin-left: 0; aspect-ratio: 16 / 10; }
  .explorer__list .t { font-size: .66rem; letter-spacing: .1em; } /* the longest tag fits one line at 390px */
}

/* ---------------------------------------------------------- horizontal services */
.hscroll { position: relative; overflow: hidden; }
.hscroll__head { padding: clamp(80px, 10vw, 150px) 0 clamp(36px, 4vw, 64px); }
.hprog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; max-width: 420px; }
.hprog i { height: 2px; background: var(--line-dark); position: relative; overflow: hidden; }
.hprog i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hprog i.is-on::after { transform: scaleX(1); }
.hscroll__track { display: flex; gap: clamp(24px, 3.2vw, 56px); padding: 0 var(--gutter) clamp(80px, 10vw, 150px); will-change: transform; }
.panel { flex: 0 0 min(86vw, 1120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3.6vw, 60px); background: var(--dark-2); color: var(--plaster-2); padding: clamp(28px, 3.6vw, 56px); border-radius: var(--r); text-decoration: none; position: relative; overflow: hidden; border: 1px solid var(--line-dark); }
.panel__idx { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1; color: var(--accent); }
.panel__body { display: grid; align-content: space-between; gap: 28px; }
.panel h3 { font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -.025em; margin: 14px 0 10px; }
.panel__pitch { color: var(--plaster-2); font-weight: 500; font-size: 1.15rem; margin-bottom: .6em; }
.panel p { color: var(--muted-dark); font-size: 1.05rem; line-height: 1.55; max-width: 40ch; }
.panel__media { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.panel:hover .panel__media img { transform: scale(1.05); }
.panel__link { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; }
.panel__link::after { content: "\2192"; transition: transform .4s var(--ease); }
.panel:hover .panel__link::after { transform: translateX(8px); }
@media (max-width: 960px) { .hscroll__track { flex-direction: column; } .panel { flex: none; grid-template-columns: 1fr; } .panel__media { aspect-ratio: 16 / 10; } .hprog { display: none; } }

/* ---------------------------------------------------------- marquee / gallery / band */
.marquee { overflow: hidden; padding: clamp(26px, 3.4vw, 44px) 0; border-block: 1px solid var(--line-dark); background: var(--ink); color: var(--plaster-2); }
.marquee__inner { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.7rem); padding: 0 clamp(20px, 2.8vw, 44px); white-space: nowrap; letter-spacing: -.01em; }
.marquee__item b { font-family: var(--sans); font-weight: 600; font-size: .5em; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); vertical-align: middle; margin-right: 14px; }
.marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.marquee--light { background: var(--plaster); color: var(--ink); border-color: var(--line); }
.marquee--light .marquee__item b { color: var(--accent-ink); } .marquee--light .marquee__dot { background: var(--accent-ink); }

.masonry { columns: 3 300px; column-gap: clamp(18px, 2.4vw, 32px); }
.masonry > * { break-inside: avoid; margin: 0 0 clamp(18px, 2.4vw, 32px); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.tile { display: block; position: relative; overflow: hidden; border-radius: var(--r); background: var(--plaster-3); border: 0; padding: 0; cursor: pointer; width: 100%; text-align: left; }
.tile img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--ease); will-change: transform; }
.grid .tile img { aspect-ratio: 1; object-fit: cover; }
.tile:hover img { transform: scale(1.05); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(180deg, transparent, rgba(19,18,19,.7)); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.tile:hover .tile__cap { opacity: 1; transform: none; }
.tile[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 44px); }
.filter { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; font-size: .82rem; letter-spacing: .04em; cursor: pointer; color: var(--muted); transition: all .3s var(--ease); }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--plaster-2); }
.filter .n { opacity: .5; margin-left: 6px; }

.band { overflow: hidden; padding: clamp(48px, 7vw, 110px) 0; background: var(--plaster); border-block: 1px solid var(--line); }
.band__line { font-family: var(--serif); font-size: clamp(5rem, 17vw, 21rem); line-height: .85; letter-spacing: -.04em; white-space: nowrap; will-change: transform; color: var(--ink); }
.band__line em { color: var(--accent-ink); }
.band__line .outline { color: transparent; -webkit-text-stroke: 1px var(--ink); }

/* ---------------------------------------------------------- compare / timeline / cost / fit / faq */
.tablewrap { overflow-x: auto; }
.compare { border-collapse: collapse; width: 100%; min-width: 720px; }
.compare th, .compare td { padding: 24px 26px; text-align: left; border-bottom: 1px solid var(--line-dark); vertical-align: top; font-size: 1.05rem; line-height: 1.5; }
.compare thead th { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; letter-spacing: -.02em; }
.compare thead th:last-child { color: var(--accent); }
.compare tbody th { font-weight: 600; width: 150px; font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.compare td:last-child { background: rgba(170,221,248,.08); color: var(--plaster-2); }
.compare td { color: var(--muted-dark); }

.tl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 120px); align-items: start; }
.tl__side { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 22px; }
.tl__big { font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 14vw, 13rem); line-height: .8; color: var(--accent-ink); letter-spacing: -.04em; }
.tl__line { width: 100%; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.tl__line i { position: absolute; inset: 0; background: var(--accent-ink); transform-origin: left; transform: scaleX(0); }
.tl__side p { color: var(--muted); max-width: 30ch; }
.tl__steps { display: grid; }
.tl__step { padding: clamp(36px, 4.6vw, 72px) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 80px 1fr; gap: clamp(18px, 3vw, 48px); transition: opacity .5s; }
.tl__step:last-child { border-bottom: 1px solid var(--line); }
.tl__step .i { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--accent-ink); padding-top: .35em; }
.tl__step h3 { font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 3rem); letter-spacing: -.025em; margin-bottom: .45em; }
.tl__step p { color: var(--muted); font-size: 1.12rem; line-height: 1.6; max-width: 54ch; }
.tl__step.is-past { opacity: .45; }
@media (max-width: 900px) { .tl { grid-template-columns: 1fr; } .tl__side { position: static; } .tl__big { font-size: 5rem; } .tl__step { grid-template-columns: 56px 1fr; } }

.factor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 3vw, 72px); padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.factor h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.02em; margin: 0; }
.factor p { color: var(--muted); margin: 0; font-size: 1.08rem; line-height: 1.6; max-width: 56ch; }
@media (max-width: 760px) { .factor { grid-template-columns: 1fr; gap: 10px; } }

.fitgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 48px); }
.fitcard { padding: clamp(32px, 4vw, 60px); border: 1px solid var(--line-dark); border-radius: var(--r); background: var(--dark-2); }
.fitcard h3 { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: 1.1em; }
.fitcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.fitcard li { position: relative; padding-left: 44px; color: var(--muted-dark); font-size: 1.06rem; line-height: 1.55; }
.fitcard li::before { position: absolute; left: 0; top: .42em; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fitcard--yes li::before { content: "yes"; color: var(--accent); }
.fitcard--no li::before { content: "no"; color: var(--muted-dark); }
.fitcard--no { background: transparent; }
@media (max-width: 760px) { .fitgrid { grid-template-columns: 1fr; } }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(22px, 2.8vw, 34px) 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; color: var(--accent-ink); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 clamp(22px, 2.8vw, 34px); color: var(--muted); max-width: 70ch; overflow: hidden; font-size: 1.06rem; line-height: 1.6; }

/* ---------------------------------------------------------- testimonial carousel */
.carousel { position: relative; }
.carousel__track { display: flex; gap: clamp(18px, 2.4vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.carousel__track::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 min(84vw, 440px); scroll-snap-align: start; padding: clamp(30px, 3.4vw, 46px); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); display: grid; gap: 28px; align-content: space-between; min-height: 300px; }
.quote p { font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.28; letter-spacing: -.015em; margin: 0; }
.quote footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.quote cite { font-style: normal; font-weight: 600; font-size: .95rem; }
.quote .tag { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.carousel__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.carousel__nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 1.3rem; color: var(--ink); transition: all .3s var(--ease); }
.carousel__nav button:hover { background: var(--ink); color: var(--plaster-2); border-color: var(--ink); }

/* ---------------------------------------------------------- split rows / specs / finish details / cards / team */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.split__sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
.frame { overflow: hidden; border-radius: var(--r); position: relative; }
.frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.frame--tall { aspect-ratio: 3 / 4; } .frame--wide { aspect-ratio: 16 / 10; }
.spec + .spec { margin-top: clamp(40px, 5vw, 72px); }
.spec__label { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1.3rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.spec dl { margin: 0; display: grid; gap: 1.6rem; }
.spec dt { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.015em; margin-bottom: .3em; }
.spec dd { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .split__sticky { position: static; } .frame--tall { aspect-ratio: 16 / 10; } }

.fdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--line-dark); }
.fdetail:nth-child(even) .fdetail__media { order: 2; }
.fdetail__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--dark-2); }
.fdetail__media img { width: 100%; height: 100%; object-fit: cover; }
.fdetail h3 { font-family: var(--serif); font-size: clamp(2.2rem, 3.8vw, 3.6rem); letter-spacing: -.025em; }
.fdetail .spec-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 26px 0 26px; font-size: 1rem; }
.fdetail .spec-row dt { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; color: var(--accent); padding-top: 4px; }
.fdetail .spec-row dd { margin: 0; color: var(--muted-dark); }
.pill { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--plaster-2); border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 12px; margin: 0 6px 6px 0; }
.thumbs { display: flex; gap: 10px; margin-top: 6px; }
.thumbs button { border: 0; padding: 0; background: none; cursor: pointer; width: 72px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; outline: 2px solid transparent; outline-offset: 3px; }
.thumbs button[aria-pressed="true"] { outline-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .fdetail { grid-template-columns: 1fr; } .fdetail:nth-child(even) .fdetail__media { order: 0; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.card { text-decoration: none; color: inherit; display: grid; gap: 20px; }
.card__media { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--plaster-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card h3 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -.02em; margin-bottom: .25em; }
.card .pitch { font-weight: 500; margin-bottom: .45em; font-size: 1.05rem; }
.card p { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.dark .card p, .ink .card p { color: var(--muted-dark); }
.card .more { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3.4vw, 56px); }
.team__m img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.team__m h3 { font-family: var(--serif); font-size: 2rem; margin: 1.3rem 0 .15rem; }
.team__role { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1rem; }
.team__m p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

/* ---------------------------------------------------------- lead form */
.formgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.leadform { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px, 3.8vw, 56px); }
.leadform h3 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: .3em; }
.leadform__intro { color: var(--muted); margin-bottom: 1.8rem; font-size: 1rem; }
.form { display: grid; gap: 24px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 9px; }
.field label, .field .lbl { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--plaster-2); color: inherit; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(78,167,216,.2); }
.field textarea { min-height: 150px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: block; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font-size: .9rem; cursor: pointer; transition: all .25s var(--ease); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--plaster-2); }
.chip input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form__ok { display: none; padding: 16px 18px; border-radius: var(--r); background: rgba(47,125,79,.1); border: 1px solid rgba(47,125,79,.35); color: #235f3c; }
.form__ok.is-shown { display: block; }
.note { font-size: .95rem; color: var(--muted); line-height: 1.55; }
.dark .note, .ink .note { color: var(--muted-dark); }
.checks { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; color: var(--muted); font-size: 1.05rem; }
@media (max-width: 960px) { .formgrid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- brands / areas / cta / footer */
.brands { display: flex; flex-wrap: wrap; gap: clamp(40px, 7vw, 110px); justify-content: center; align-items: center; }
.brands img { height: clamp(38px, 5vw, 66px); width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .7; transition: opacity .4s; }
.brands img:hover { opacity: 1; }
.arealist { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.arealist li { border: 1px solid var(--line-dark); border-radius: 999px; padding: 10px 18px; font-size: .9rem; color: rgba(244,241,236,.82); }

.cta { position: relative; overflow: hidden; background: var(--accent); color: var(--ink); padding: clamp(100px, 15vw, 220px) 0; text-align: center; }
.cta .display { font-size: clamp(3rem, 9vw, 9rem); max-width: 12ch; margin-inline: auto; }
.cta .display em { color: var(--ink); font-style: italic; }
.cta__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 52px); }
.cta .btn-pill { background: var(--ink); color: var(--plaster-2); }
.cta .btn-pill::before { background: var(--plaster-2); }
.cta .btn-pill:hover { color: var(--ink); }

.footer { background: var(--ink); color: var(--plaster-2); padding: clamp(80px, 10vw, 140px) 0 30px; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.footer h4 { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.3rem; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.footer a { text-decoration: none; color: rgba(244,241,236,.78); transition: color .3s; }
.footer a:hover { color: var(--accent); }
.footer p { color: rgba(244,241,236,.55); max-width: 38ch; font-size: 1rem; line-height: 1.6; }
.footer__word { font-family: var(--serif); font-size: clamp(4rem, 16vw, 20rem); line-height: .8; letter-spacing: -.04em; margin-top: clamp(56px, 8vw, 130px); color: var(--plaster-2); white-space: nowrap; }
.footer__word em { color: var(--accent); }
.footer__bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .84rem; color: rgba(244,241,236,.45); }
.social { display: flex; gap: 14px; margin-top: 18px; }
.social a { display: flex; opacity: .8; } .social a:hover { opacity: 1; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.lightbox { position: fixed; inset: 0; z-index: 800; background: rgba(19,18,19,.96); display: none; place-items: center; padding: 4vmin; }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92svh; width: auto; object-fit: contain; border-radius: var(--r); }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 14px; opacity: .7; }
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 8px; right: 12px; } .lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }

.center { text-align: center; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-2 { margin-bottom: 2rem; }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--accent-ink); }
.textlink::after { content: "\2192"; transition: transform .4s var(--ease); }
.textlink:hover::after { transform: translateX(8px); }
.dark .textlink, .ink .textlink { border-color: var(--accent); }
.prose { max-width: 70ch; font-size: 1.15rem; line-height: 1.7; }
.prose h2 { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.prose h3 { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 1.6em 0 .4em; }
.prose p, .prose li { color: #3f3b3d; }
.prose img { border-radius: var(--r); margin: 2.6em 0; }
.prose:not(.prose--plain) p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; float: left; line-height: .8; margin: .08em .12em 0 0; color: var(--accent-ink); }
.posts { display: grid; border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 120px 1fr 340px; gap: clamp(22px, 3.4vw, 56px); align-items: center; padding: clamp(30px, 3.8vw, 52px) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.post__date { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.post h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.02em; margin-bottom: .35em; transition: color .3s; }
.post:hover h2 { color: var(--accent-ink); }
.post p { color: var(--muted); font-size: 1.02rem; max-width: 60ch; }
.post__media { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
@media (max-width: 900px) { .post { grid-template-columns: 1fr; gap: 14px; } .post__media { order: -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader, .cursor, .scrollcue, .progress, .rail { display: none !important; }
  .hero { position: relative; }
  .act { --act-bg: #f4f1ec; --act-fg: #131213; --act-muted: #6b6669; --tex-o: .88; }
}

/* ---------------------------------------------------------- act one: why plaster (the hero handoff) */
.act { position: relative; z-index: 2; background: var(--act-bg, var(--plaster-2)); color: var(--act-fg, var(--ink)); --act-muted: var(--muted); padding: clamp(96px, 12vw, 190px) 0 clamp(56px, 7vw, 100px); border-radius: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0 0; box-shadow: 0 -40px 100px rgba(0,0,0,.35); overflow: clip; }
.act .eyebrow { color: var(--act-muted); }
.act .lede, .act .manifesto .dim, .act .trust span { color: var(--act-muted); }
.act .trust, .act .trust > div { border-color: color-mix(in srgb, var(--act-fg) 14%, transparent); }
.act__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; min-height: 70svh; }
.act__copy { max-width: 660px; }
.beat { position: relative; display: inline-block; margin: 0 0 .35em; }
.beat .beat__text { position: relative; display: inline-block; padding-right: .1em; }
.beat__strike { position: absolute; left: 0; right: 0; top: 54%; height: .06em; background: currentColor; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.beat--final { display: block; margin: .25em 0 .5em; }
.beat--final em { font-style: italic; color: var(--accent-ink); }
.act .manifesto { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-family: var(--sans); line-height: 1.55; letter-spacing: 0; max-width: 46ch; color: var(--act-muted); margin-top: 1.2rem; }
.sweep { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--plaster-3); isolation: isolate; }
.sweep img { width: 100%; height: 100%; object-fit: cover; }
.sweep__cap { position: absolute; left: 18px; bottom: 16px; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.act__numcol { position: absolute; top: 0; bottom: 0; left: calc(var(--rail) + 6px); width: 1px; pointer-events: none; display: none; }
.act__num { position: sticky; top: 36vh; font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 11vw, 10rem); line-height: .8; color: var(--accent-ink); letter-spacing: -.04em; opacity: .9; }
.act__edge { position: absolute; width: clamp(120px, 11vw, 190px); pointer-events: none; display: none; }
.act__edge .frame { aspect-ratio: 3 / 4; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.act__edge--a { left: calc(var(--rail) + 10px); top: 46%; }
.act__edge--b { right: 14px; top: 12%; width: clamp(140px, 13vw, 230px); }
.act__edge--c { right: 22px; bottom: 26%; width: clamp(100px, 9vw, 150px); }
.act__trust { margin-top: clamp(56px, 8vw, 120px); }
.act__trust .rule { margin-bottom: 0; }
.trust--act { border-top: 0; }
@media (min-width: 1240px) { .act__numcol, .act__edge { display: block; } }
@media (max-width: 900px) { .act__grid { grid-template-columns: 1fr; min-height: 0; } .act .sweep { aspect-ratio: 16 / 11; } .act__copy { max-width: none; } }
.act__mobnum { display: inline-block; font-family: var(--serif); font-style: italic; color: var(--accent-ink); font-size: 1.1rem; margin-right: 12px; }
@media (min-width: 1240px) { .act__mobnum { display: none; } }

/* manifesto sections elsewhere get a picture and a numeral so a paragraph never sits alone */
.note-sec { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.note-sec .frame { aspect-ratio: 16 / 11; }
.note-sec__num { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .8; color: var(--accent); letter-spacing: -.04em; margin-bottom: 1.2rem; display: block; }
.note-sec .rule { margin: 1.6rem 0 1.4rem; max-width: 120px; background: var(--accent); }
@media (max-width: 900px) { .note-sec { grid-template-columns: 1fr; } }

/* rail index rolls when the section changes */
.rail__label b { display: inline-block; }


/* ==========================================================================
   v6 — conversion hero: huge tap-to-call number + three-field form in the hero
   ========================================================================== */
.hero--lead { height: auto; min-height: 100svh; align-items: center; }
.hero.is-flow { position: relative; }
.hero--lead .hero__inner { padding: calc(var(--nav-h) + 28px) 0 clamp(64px, 7vw, 96px); }
.hero--lead .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4vw, 72px); }
.hero--lead .display { font-size: clamp(2.7rem, 6.2vw, 6.6rem); }
.hero--lead .hero__sub { margin: clamp(18px, 2.4vw, 30px) 0 0; max-width: 40ch; }
.hero--lead .hero__media::after { background: linear-gradient(180deg, rgba(19,18,19,.55) 0%, rgba(19,18,19,.28) 45%, rgba(19,18,19,.88) 100%); }

.hero__phone { display: inline-grid; gap: 8px; text-decoration: none; color: var(--plaster-2); margin-top: clamp(26px, 3.4vw, 44px); position: relative; justify-items: start; }
.hero__phone small { display: inline-flex; align-items: center; gap: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.hero__phone .ring { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__phone .ring::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--accent); animation: ring 2.2s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.hero__phone b { display: flex; overflow: hidden; padding-bottom: .06em; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6.6vw, 7rem); line-height: .95; letter-spacing: -.025em; transition: color .35s var(--ease); font-variant-numeric: tabular-nums; }
.hero__phone b span { display: inline-block; }
.hero__phone b .sp { width: .16em; }
.hero__phone:hover b, .hero__phone:focus-visible b { color: var(--accent); }
.hero__phone-under { height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; width: min(100%, 460px); }
.hero__phone em { font-style: normal; font-size: .92rem; color: rgba(244,241,236,.72); max-width: 42ch; line-height: 1.5; }

.herocard { background: rgba(19,18,19,.6); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: clamp(22px, 2.4vw, 34px); color: var(--plaster-2); box-shadow: 0 30px 80px rgba(0,0,0,.38); position: relative; }
.herocard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(170,221,248,.55), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(170,221,248,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.herocard h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.2rem); font-weight: 400; margin-bottom: .2em; letter-spacing: -.02em; }
.herocard h3 em { font-style: italic; color: var(--accent); }
.herocard__intro { font-size: .95rem; color: rgba(244,241,236,.7); margin-bottom: 1.3rem; }
.herocard .form { gap: 16px; }
.herocard .field label, .herocard .field .lbl { color: rgba(244,241,236,.82); }
.herocard .field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--plaster-2); padding: 15px 16px; }
.herocard .field input::placeholder { color: rgba(244,241,236,.38); }
.herocard .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(170,221,248,.22); }
.herocard .chip span { border-color: rgba(255,255,255,.22); color: var(--plaster-2); padding: 9px 14px; font-size: .86rem; }
.herocard .chip span:hover { border-color: var(--accent); }
.herocard .chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.herocard .btn-pill { width: 100%; justify-content: center; padding: 18px 26px; font-size: .78rem; }
.herocard__note { font-size: .82rem; color: rgba(244,241,236,.55); margin: 0; text-align: center; }
.herocard .form__ok { background: rgba(170,221,248,.12); border-color: rgba(170,221,248,.4); color: var(--plaster-2); }

.nav__call svg { width: 14px; height: 14px; fill: currentColor; }
.nav__call.is-pulse { animation: navpulse 1.2s var(--ease) 1; }
@keyframes navpulse { 0% { box-shadow: 0 0 0 0 rgba(170,221,248,.7); } 100% { box-shadow: 0 0 0 18px rgba(170,221,248,0); } }

@media (max-width: 960px) { .nav__end .nav__call { display: none; } }
@media (max-width: 900px) {
  .hero--lead { position: relative; min-height: 0; }
  .hero--lead .hero__inner { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 40px; }
  .hero--lead .hero__grid { grid-template-columns: 1fr; gap: 26px; }
  .hero--lead .display { font-size: clamp(2.6rem, 11vw, 4rem); }
  .hero__phone { width: 100%; margin-top: 22px; }
  .hero__phone b { font-size: clamp(2.3rem, 11.6vw, 3.8rem); }
  .hero__phone-under { width: 100%; }
  .herocard { padding: 22px 18px; }
  .hero--lead .hero__corner--bl { display: none; }
}
@media (min-width: 901px) and (max-height: 720px) { .hero--lead .display { font-size: clamp(2.4rem, 5vw, 4.6rem); } .hero__phone b { font-size: clamp(2.2rem, 5.2vw, 5rem); } .hero--lead .hero__inner { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 40px; } }

/* ---- v6: layered scroll backdrop (tall textures at different speeds) ---- */
.layers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.layers > .layer { position: absolute; left: 0; right: 0; top: -20%; height: 140%; background-repeat: repeat-y; background-size: 100% auto; background-position: center top; will-change: transform; opacity: var(--layer-o, .35); }
.layers > .layer--mask { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.has-layers { position: relative; isolation: isolate; }
.has-layers > .wrap { position: relative; z-index: 1; }

/* v6 tune: the number is the point */
.hero__phone b { font-size: clamp(2.8rem, 7.4vw, 8rem); }
.hero--lead .display { font-size: clamp(2.6rem, 5.6vw, 6rem); }
@media (max-width: 900px) { .hero__phone b { font-size: clamp(2.6rem, 13vw, 4.2rem); } }
@media (max-width: 600px) { .hero--lead .hero__sub { font-size: 1rem; max-width: 34ch; } .hero--lead .display { font-size: clamp(2.5rem, 12vw, 3.4rem); } }

/* ---- v6 QA pass: nav never wraps, mobile action bar waits until the hero has passed ---- */
.nav__links li { white-space: nowrap; }
@media (max-width: 1360px) and (min-width: 961px) { .nav__end .btn-pill--ghost { display: none; } .nav__links { gap: 22px; } }
.actionbar { transition: transform .5s var(--ease); }
.actionbar.is-off { transform: translateY(110%); }
.hero--lead .hero__inner { padding-bottom: clamp(56px, 7vw, 96px); }

/* ---- v7: brand marks. Line drawings of the trade in the gutters, drawn on by the scroll ---- */
.has-marks { position: relative; }
.has-marks > .wrap { position: relative; z-index: 1; }
.mark { position: absolute; z-index: 0; width: clamp(96px, 10vw, 170px); height: auto; color: var(--accent-ink); opacity: .7; pointer-events: none; display: none; }
.dark .mark, .ink .mark, .cta .mark { color: var(--accent); opacity: .55; }
.mark path { stroke: currentColor; }
.mark--tl { left: calc(var(--gutter) * .18); top: 6%; }
.mark--tr { right: calc(var(--gutter) * .18); top: 8%; }
.mark--bl { left: calc(var(--gutter) * .22); bottom: 7%; }
.mark--br { right: calc(var(--gutter) * .22); bottom: 6%; }
.mark--l { left: calc(var(--gutter) * .18); top: 42%; }
.mark--r { right: calc(var(--gutter) * .18); top: 40%; }
.ghost { position: absolute; z-index: 0; top: 50%; font-family: var(--serif); font-style: italic; font-size: clamp(18rem, 38vw, 44rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px currentColor; pointer-events: none; user-select: none; opacity: .14; display: none; transform: translateY(-50%); }
.light .ghost, .plaster .ghost { color: var(--ink); } .dark .ghost, .ink .ghost { color: var(--plaster-2); opacity: .1; }
.ghost--l { left: -.18em; } .ghost--r { right: -.18em; }
@media (min-width: 960px) { .mark, .ghost { display: block; } }
@media (min-width: 960px) and (max-width: 1239px) { .mark { width: 84px; opacity: .45; } .ghost { opacity: .09; } }

/* v7 tune: marks live in the section's padding band, not over the copy */
.mark { width: clamp(88px, 8vw, 136px); }
.mark--tl { top: 22px; } .mark--tr { top: 22px; } .mark--bl { bottom: 22px; } .mark--br { bottom: 22px; }
.mark--l, .mark--r { display: none; }
@media (min-width: 1700px) { .mark { width: clamp(120px, 8vw, 170px); } .mark--tl, .mark--bl { left: calc((100vw - var(--wrap)) / 4 - 60px); } .mark--tr, .mark--br { right: calc((100vw - var(--wrap)) / 4 - 60px); } .mark--tl, .mark--tr { top: 12%; } .mark--bl, .mark--br { bottom: 12%; } }

/* v7 tune 2: ink marks on the accent CTA, ghosts smaller so the letter reads, marks clear the rails */
.cta .mark { color: var(--ink); opacity: .5; }
.ghost { font-size: clamp(12rem, 26vw, 30rem); opacity: .12; }
.ghost--l { left: -.08em; } .ghost--r { right: -.08em; }
@media (min-width: 1240px) { .mark--tl, .mark--bl { left: calc(var(--rail) + 12px); } .mark--tr, .mark--br { right: calc(var(--rail) + 12px); } }

/* ==========================================================================
   v7b: the second act is texture-led and scales to the screen. Liquid glass on top of real plaster.
   ========================================================================== */
.act { overflow: clip; } /* clip, not hidden: hidden would make the section a scroll container and kill position:sticky below */
/* v7e: the wall is a sticky plate the size of the viewport, so the photo is shown at screen scale and both real spotlights read.
   Before this it was stretched to cover the whole 2500px section and only a fifth of it was ever on screen. No light sweeps. */
.act__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.act__tex { position: sticky; top: -3svh; height: 106svh; width: 100%; background: url(/assets/img/tex/plaster-wall.webp) center / cover no-repeat; opacity: var(--tex-o, 0); will-change: transform, opacity; }
.act > .wrap, .act__numcol, .act__edge { position: relative; z-index: 1; }
.act__edge { position: absolute; }
.act .beat.t-l { font-size: clamp(2.1rem, 3.7vw, 5.6rem); }
.act .beat--final.t-xl { font-size: clamp(2.6rem, 5.3vw, 8.2rem); }
.act .manifesto { font-size: clamp(1.1rem, 1.35vw, 1.8rem); max-width: 42ch; }
.act__copy { max-width: min(760px, 58vw); }
.act__grid { min-height: 72svh; }

.glass { position: relative; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.14)); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); border: 1px solid rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.18), 0 30px 80px rgba(19,18,19,.16); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at var(--gx, 18%) 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%); }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 40px rgba(255,255,255,.18); }
.dark .glass, .ink .glass { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 80px rgba(0,0,0,.4); }
.sweep--glass { padding: clamp(12px, 1.1vw, 20px); aspect-ratio: auto; background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.14)); border-radius: 22px; overflow: visible; }
.sweep--glass .sweep__img { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; isolation: isolate; background: var(--plaster-3); }
.sweep--glass .sweep__cap { position: static; display: inline-block; margin-top: 14px; color: var(--act-fg); text-shadow: none; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--act-fg) 22%, transparent); background: color-mix(in srgb, var(--act-fg) 6%, transparent); }

.texband { position: relative; overflow: hidden; height: clamp(440px, 76svh, 860px); display: grid; align-items: center; background: var(--plaster-3); }
.texband__img { position: absolute; inset: -14% 0; }
.texband__img img { width: 100%; height: 100%; object-fit: cover; }
.texband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,18,19,.22), rgba(19,18,19,0) 55%); pointer-events: none; }
.texband .wrap { position: relative; z-index: 1; }
.texband__panel { max-width: 640px; padding: clamp(28px, 3vw, 48px); }
.texband__panel .lede { max-width: 34ch; }
.texband__cap { display: inline-block; margin-top: 1.4rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .texband { height: auto; padding: 72px 0; } .texband__panel { padding: 24px 20px; } }

@media (min-width: 1700px) {
  .act > .wrap { width: min(100% - var(--gutter) * 2, 1680px); }
  .act__grid { gap: clamp(60px, 7vw, 170px); min-height: 78svh; }
  .act__copy { max-width: 900px; }
  .act__edge { width: clamp(180px, 12vw, 330px); } .act__edge--b { width: clamp(220px, 14vw, 380px); } .act__edge--c { width: clamp(150px, 10vw, 260px); }
  .texband__panel { max-width: 780px; }
}

/* ---- v7c: services stack vertically. No pinned sideways scroll. ---- */
.hscroll__track { flex-direction: column; padding-inline: 0; will-change: auto; gap: clamp(20px, 2.4vw, 36px); }
.panel { flex: none; width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.panel:nth-child(even) .panel__media { order: -1; }
.panel__media { aspect-ratio: 5 / 4; }
.hprog { display: none; }
@media (max-width: 960px) { .panel:nth-child(even) .panel__media { order: 0; } }

/* v7d: the wall is the real 2560 x 1440 polished plaster (Firefly expand of Rafael's commercial job photo). The wash keeps the copy column legible and stays put. */
@media (max-width: 900px) { .act__tex { background-position: 38% 50%; } } /* phone crop is a quarter of the wall's width: centre it on the left spotlight, not the gap between the two */
.act__tex::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,241,236,.72) 0%, rgba(244,241,236,.35) 38%, rgba(244,241,236,0) 62%), linear-gradient(180deg, rgba(244,241,236,.5), rgba(244,241,236,0) 30%, rgba(244,241,236,0) 75%, rgba(244,241,236,.6)); }

/* ==========================================================================
   v7g: the finish library is a sample board. Ten clean tiles (no stamp, no plate), name and effect under each,
   the photo caption on hover. Replaces the name list + sticky picture (Rafael, 2026-09-13).
   ========================================================================== */
.fingrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(14px, 1.6vw, 26px); }
.fin { display: block; text-decoration: none; color: inherit; }
.fin__img { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--plaster-3); box-shadow: 0 18px 40px rgba(19,18,19,.12); isolation: isolate; }
.fin__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); will-change: transform; }
.fin__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(19,18,19,.08); pointer-events: none; }
.fin__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(180deg, transparent, rgba(19,18,19,.72)); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.fin:hover .fin__img img, .fin:focus-visible .fin__img img { transform: scale(1.05); }
.fin:hover .fin__cap, .fin:focus-visible .fin__cap { opacity: 1; transform: none; }
.fin__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 14px 2px 0; }
.fin__i { font-family: var(--serif); font-style: italic; color: var(--accent-ink); font-size: .95rem; }
.fin__n { font-family: var(--serif); font-size: clamp(1.25rem, 1.5vw, 1.6rem); letter-spacing: -.02em; line-height: 1.05; transition: color .3s; }
.fin:hover .fin__n { color: var(--accent-ink); }
.fin__t { grid-column: 2; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 999px) { .fingrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fin__n { font-size: 1.15rem; } .fin__t { font-size: .62rem; letter-spacing: .1em; } .fin__meta { padding-top: 10px; } }

/* ==========================================================================
   v7h: the home gallery is a bento of nine curated jobs with a finish/room tag on every tile (Rafael, 2026-09-13).
   ========================================================================== */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 21vw, 300px); gap: clamp(14px, 1.8vw, 26px);
  grid-template-areas: "a a b" "a a b" "c d e" "f g g" "f h i"; }
.work__tile { height: 100%; min-height: 0; box-shadow: 0 18px 40px rgba(19,18,19,.10); }
.work__tile--a { grid-area: a; } .work__tile--b { grid-area: b; } .work__tile--c { grid-area: c; } .work__tile--d { grid-area: d; } .work__tile--e { grid-area: e; }
.work__tile--f { grid-area: f; } .work__tile--g { grid-area: g; } .work__tile--h { grid-area: h; } .work__tile--i { grid-area: i; }
.work .tile img { height: 100%; object-fit: cover; }
.work__tag { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 13px; border-radius: 999px; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(19,18,19,.52); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.work__tile--a .work__tag { left: 18px; bottom: 18px; font-size: .7rem; padding: 10px 16px; }
@media (max-width: 999px) {
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 30vw, 260px); grid-template-areas: "a a" "a a" "b c" "b d" "g g" "f e" "f h" "i i"; }
  .work__tag { font-size: .58rem; padding: 7px 11px; letter-spacing: .12em; }
  .work__tile--b .work__tag-r, .work__tile--c .work__tag-r, .work__tile--d .work__tag-r, .work__tile--e .work__tag-r, .work__tile--f .work__tag-r, .work__tile--h .work__tag-r { display: none; } /* half-width tiles keep the finish, drop the room */
}

/* ==========================================================================
   v8 (Sep 24 2026): calm. The hero sits in flow (no sticky curtain), the home page has one visual transition, an
   application-to-finished-wall frame sequence in normal flow with no pin, then quiet sections. Ghost letters gone.
   ========================================================================== */
.hero { position: relative; z-index: auto; }
.hero.is-flow { position: relative; }
.ghost { display: none !important; }
.hero__ctas--text { margin-top: 18px; }
.hero__ctas--text .btn-pill--ghost { border-color: rgba(244,241,236,.42); }
.actionbar.is-off { transform: none; }
@media (max-width: 900px) {
  .actionbar { grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-inline: 10px; }
  .actionbar a { padding: 13px 8px; font-size: .68rem; letter-spacing: .06em; }
  .actionbar__text { color: #fff; border: 1px solid rgba(255,255,255,.35); }
}

/* the wall, made */
.seq { background: var(--ink); color: var(--plaster-2); padding: clamp(72px, 9vw, 150px) 0; }
.seq__head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 64px); }
.seq__head .eyebrow { color: var(--accent); }
.seq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.seq__stage { position: relative; width: min(100%, calc(84svh * var(--seq-ratio, .5625))); aspect-ratio: var(--seq-aspect, 9 / 16); border-radius: var(--r); overflow: hidden; background: var(--dark-2); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.seq__poster, .seq__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.seq__canvas { opacity: 0; transition: opacity .4s var(--ease); }
.seq.is-live .seq__canvas { opacity: 1; }
.seq.is-live .seq__poster { opacity: 0; transition: opacity .4s var(--ease); }
.seq__caps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 40px); }
.seq__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; opacity: .22; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.seq__cap.is-on { opacity: 1; transform: none; }
.seq__cap b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.1rem; }
.seq__cap strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.6rem); letter-spacing: -.02em; line-height: 1.05; }
.seq__cap span { grid-column: 2; display: block; margin-top: 8px; color: rgba(244,241,236,.72); max-width: 40ch; line-height: 1.5; }
@media (max-width: 900px) { .seq__grid { grid-template-columns: 1fr; } .seq__stage { width: min(100%, calc(66svh * var(--seq-ratio, .5625))); margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .seq__cap { opacity: 1; transform: none; } }

/* how it goes */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.step { padding-top: 22px; border-top: 1px solid var(--line); }
.step__n { font-family: var(--serif); font-style: italic; color: var(--accent-ink); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.2rem); letter-spacing: -.02em; margin: 10px 0; }
.step p { color: var(--muted); line-height: 1.55; max-width: 36ch; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---- v8.2 (Sep 24 2026, Codex QA): mobile hero crop, inner pages unstuck, native anchors ---- */
/* v9: no CSS scroll-behavior:smooth. With it, every ScrollTrigger.refresh() made while the page is scrolled (resize, FAQ
   toggle, gallery filter, a late load) measured all triggers off by the scroll position. In-page anchors glide in site.js. */
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
/* no sticky panels on inner pages: the explorer stage, timeline numeral and split rows scroll with the page */
.explorer__stage, .tl__side, .split__sticky, .act__num, .act__tex { position: relative; top: auto; }
.loader { display: none; }
/* phones: the hero photo is a 3:4 portrait of the fireplace column; cover-fitting it to a 1400px-tall hero showed ceiling.
   The photo now fills the first screen only, framed on the column (object-position), and the rest of the hero sits on ink. */
@media (max-width: 900px) {
  .hero--lead { background: var(--ink); }
  .hero--lead .hero__media { inset: auto 0 auto 0; top: -16svh; height: 128svh; }
  .hero--lead .hero__media img { object-position: 42% 50%; }
  .hero--lead .hero__media::after { background: linear-gradient(180deg, rgba(19,18,19,.55) 0%, rgba(19,18,19,.22) 42%, rgba(19,18,19,.62) 74%, var(--ink) 100%); }
}
@media (max-width: 480px) { .hero--lead .hero__media { top: -20svh; height: 132svh; } .hero--lead .hero__media img { object-position: 40% 50%; } }

/* ---- v8.4 (Sep 24 2026): four paths instead of the ten-tile finish grid, on home and services ---- */
.paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.path { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; border-radius: var(--r); overflow: hidden; background: var(--plaster-2); box-shadow: 0 18px 40px rgba(19,18,19,.10); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.path:hover, .path:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(19,18,19,.16); }
.path__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--plaster-3); }
.path__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.path:hover .path__media img { transform: scale(1.04); }
.path__body { padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px) clamp(20px, 1.8vw, 28px); display: grid; gap: 8px; align-content: start; }
.path__n { font-family: var(--serif); font-style: italic; color: var(--accent-ink); font-size: .95rem; }
.path h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.7vw, 1.85rem); letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.path p { color: var(--muted); line-height: 1.5; font-size: .95rem; margin: 0; }
.path .more { margin-top: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.path--more { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.path--more .path__media { opacity: .88; }
.path--more:hover, .path--more:focus-visible { box-shadow: inset 0 0 0 1px var(--line), 0 20px 44px rgba(19,18,19,.10); }
.path--more .more { color: var(--muted); }
@media (max-width: 1100px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .paths { grid-template-columns: 1fr; } .path { grid-template-columns: 38% 1fr; grid-template-rows: none; } .path__media { aspect-ratio: auto; height: 100%; min-height: 150px; } }

/* ---- v8.6: footer has three columns now (brand, the four paths, company) ---- */
.footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   v9 (Sep 25 2026): local draft finish pass. Home stays one story in normal flow; inner pages quieter.
   ========================================================================== */
/* the logos were stuck invisible (GSAP's reveal re-read their opacity mid CSS transition, 0, as the end value) and, once
   visible, were solid squares: the files have no transparency, so brightness(0) invert(1) whitened the whole box. The reveal
   now moves the wrapper, and the wrapper screens onto the ink so a black background drops out; light files invert first. */
.brands .brand { display: inline-flex; mix-blend-mode: screen; }
.brands img { opacity: .75; filter: grayscale(1) contrast(1.15); }
.brands .brand--light img { filter: grayscale(1) invert(1) contrast(1.15); }
.brands img:hover { opacity: 1; }
/* rail label: the section name and its index ran together ("MADE01 / 07"); margin-left does nothing in vertical text */
.rail__label b { margin-left: 0; margin-inline-start: 12px; }
/* a line mask never clips a descender */
.split-line { padding-bottom: .1em; margin-bottom: -.1em; }
/* path cards: no hover lift. GSAP's inline transform from the reveal overrode it anyway; the shadow and photo carry the hover */
.path { transition: box-shadow .5s var(--ease); }
.path:hover, .path:focus-visible { transform: none; }

/* the wall, made: a montage shown as one. A smaller stage plays while most of it is on screen; the bar has one segment per shot */
.seq__stage { width: min(100%, calc(74svh * var(--seq-ratio, .5625))); margin-inline: auto; }
.seq__cap { opacity: .28; }
.seq__cap.is-past { opacity: .5; transform: none; }
.seq__cap.is-on { opacity: 1; transform: none; }
.seq__bar { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .4s var(--ease); }
.seq__bar i { height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.28); }
.seq__bar b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.seq.is-live .seq__bar { opacity: 1; }
.seq__now { display: none; }
@keyframes seqin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .seq__stage { width: min(100%, calc(62svh * var(--seq-ratio, .5625))); }
  /* phones: the caption for the shot on screen sits on the picture (the list below was off screen while the frames played) */
  .seq__now { display: grid; gap: 4px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 56px 16px 30px; background: linear-gradient(180deg, rgba(19,18,19,0), rgba(19,18,19,.8)); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
  .seq.has-seq .seq__now { opacity: 1; }
  .seq__now strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.02em; color: var(--plaster-2); }
  .seq__now span { font-size: .92rem; line-height: 1.4; color: rgba(244,241,236,.82); }
  .seq__now.is-in > * { animation: seqin .5s var(--ease) both; }
  .seq.has-seq .seq__caps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still read by screen readers */
}

/* supplier photos say so, on the picture */
.credit { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); background: rgba(19,18,19,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }

/* service overview: an intro row, then the three spec groups side by side (was one long column beside an empty one) */
.ovw { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.ovw__copy .lede { max-width: 56ch; }
.ovw__copy .mt-1 { color: var(--muted); max-width: 60ch; margin-top: 1.4rem; }
.ovw__copy .mt-1 a { color: var(--accent-ink); }
.ovw__media { aspect-ratio: 4 / 5; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(64px, 8vw, 120px); align-items: start; }
.specs .spec + .spec { margin-top: 0; }
.specs .spec dt { font-size: 1.35rem; }
.specs .spec dd { font-size: 1rem; }
@media (max-width: 1000px) { .specs { grid-template-columns: 1fr; } .specs .spec + .spec { margin-top: clamp(36px, 6vw, 56px); } }
@media (max-width: 900px) { .ovw { grid-template-columns: 1fr; } .ovw__media { aspect-ratio: 4 / 3; } }

/* finish details: the clean 4:5 crop beside the text, alternating sides */
.fdetail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fdetail:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fdetail__media { position: relative; aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .fdetail, .fdetail:nth-child(even) { grid-template-columns: 1fr; } .fdetail__media { aspect-ratio: 1; } }

/* manifesto frames hold a 4:5 crop now */
.note-sec .frame { aspect-ratio: 5 / 4; }
.note-sec .frame > div { height: 100%; }
.manifesto--long { font-size: clamp(1.45rem, 2.3vw, 2.2rem); line-height: 1.3; max-width: 36ch; }

/* page heroes now open on real room photos, some of them bright (a window, white walls): a firmer wash where the copy sits */
.page-hero .hero__media::after { background: linear-gradient(90deg, rgba(19,18,19,.62) 0%, rgba(19,18,19,.2) 62%, rgba(19,18,19,0) 100%), linear-gradient(180deg, rgba(19,18,19,.6) 0%, rgba(19,18,19,.38) 45%, rgba(19,18,19,.9) 100%); }
@media (max-width: 900px) {
  .page-hero.hero--lead .hero__media::after { background: linear-gradient(180deg, rgba(19,18,19,.66) 0%, rgba(19,18,19,.5) 40%, rgba(19,18,19,.72) 72%, var(--ink) 100%); }
}

/* ==========================================================================
   v11 (Sep 29 2026, Claude): "cook harder" pass. Header, footage, finish accordion, steps line, GTA map, closing CTA.
   Motion rules kept: nothing pins, nothing hijacks the scroll, nothing loops at rest, no cursor, no skew or drift.
   ========================================================================== */

/* header: logo left, links centred, call + quote right. The old centred logo collided with the links. */
@media (min-width: 961px) {
  .nav { grid-template-columns: auto 1fr auto; column-gap: clamp(20px, 3vw, 48px); }
  .nav__logo { order: -1; justify-self: start; }
  .nav__links { justify-self: center; }
}
.rail, .booktab { display: none !important; }

/* footage: live timecode + a one-way "media expansion" on the trowel clip */
.seq__tc { position: absolute; z-index: 2; top: 14px; left: 14px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px;
  border-radius: 999px; background: rgba(19,18,19,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(244,241,236,.9);
  font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.seq__tc i { width: 7px; height: 7px; border-radius: 50%; background: #ff5b4f; box-shadow: 0 0 10px rgba(255,91,79,.7); }
.seq__tc b { font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--accent); }
.seq--expand { --x: 1; }
@media (min-width: 901px) {
  .seq--expand .seq__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .seq--expand .seq__stage { width: min(100%, calc(88svh * var(--seq-ratio, .75))); transform: scale(calc(.82 + .18 * var(--x))); transform-origin: 50% 0;
    border-radius: calc(28px - 22px * var(--x)); will-change: transform; }
  .seq--expand .seq__caps { opacity: calc(.35 + .65 * var(--x)); }
}

/* finish paths: expanding accordion on desktop with a real pointer; phones keep the stacked cards */
.path__clip { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .paths--acc { display: flex; gap: 14px; height: clamp(480px, 64vh, 640px); }
  .paths--acc .path { position: relative; display: block; flex: 1 1 0; min-width: 0; background: var(--dark-2); color: var(--plaster-2);
    box-shadow: 0 18px 40px rgba(19,18,19,.14); transition: flex-grow .9s var(--ease), box-shadow .5s var(--ease); transform: none !important; }
  .paths--acc .path.is-open { flex-grow: 2.9; box-shadow: 0 30px 70px rgba(19,18,19,.22); }
  .paths--acc .path:hover, .paths--acc .path:focus-visible { transform: none; }
  .paths--acc .path__media { position: absolute; inset: 0; aspect-ratio: auto; background: var(--dark-2); }
  .paths--acc .path__media img { height: 100%; transform: none !important; transition: filter .8s var(--ease); filter: saturate(.85) brightness(.82); }
  .paths--acc .path.is-open .path__media img { filter: none; }
  .paths--acc .path__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(19,18,19,0) 38%, rgba(19,18,19,.82) 100%); }
  .path__clip { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
  .path.is-playing .path__clip { opacity: 1; }
  .paths--acc .path__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2vw, 32px); }
  .paths--acc .path__n { color: var(--accent); }
  .paths--acc .path h3 { color: var(--plaster-2); font-size: clamp(1.4rem, 1.9vw, 2.3rem); }
  .paths--acc .path p, .paths--acc .path .more { opacity: 0; transform: translateY(10px); max-height: 0; overflow: hidden; margin: 0; max-width: 40ch;
    transition: opacity .35s ease, transform .6s var(--ease), max-height .7s var(--ease); }
  .paths--acc .path.is-open p { max-height: 7em; }
  .paths--acc .path.is-open .more { max-height: 2em; }
  .paths--acc .path p { color: rgba(244,241,236,.82); }
  .paths--acc .path .more { color: var(--accent); }
  .paths--acc .path.is-open p, .paths--acc .path.is-open .more { opacity: 1; transform: none; transition-delay: .28s; }
  .paths--acc .path--more, .paths--acc .path--more:hover { background: var(--dark-2); box-shadow: 0 18px 40px rgba(19,18,19,.14); }
  .paths--acc .path--more .path__media { opacity: 1; }
}

/* steps: one line through three drawn icons; it fills with the scroll */
.steps--line { --g: clamp(22px, 3vw, 48px); --dot: 60px; position: relative; gap: var(--g); }
.steps__line { position: absolute; top: calc(var(--dot) / 2); left: calc(var(--dot) / 2); right: calc((100% - 2 * var(--g)) / 3 - var(--dot) / 2); height: 1px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: var(--accent-ink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.steps--line .step { border-top: 0; padding-top: 0; position: relative; }
.step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; margin-bottom: 24px;
  background: var(--ink); color: var(--accent); border: 1px solid var(--ink); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease); }
.step__icon svg { width: 34px; height: 34px; display: block; }
.steps--line.is-armed .step:not(.is-on) .step__dot { background: var(--plaster-2); color: var(--muted); border-color: var(--line); transform: scale(.9); }
.steps--line.is-armed .step h3, .steps--line.is-armed .step p { transition: opacity .5s var(--ease); }
.steps--line.is-armed .step:not(.is-on) h3, .steps--line.is-armed .step:not(.is-on) p { opacity: .4; }
@media (max-width: 760px) {
  .steps--line .step { padding-left: calc(var(--dot) + 22px); min-height: var(--dot); }
  .step__dot { position: absolute; left: 0; top: 0; margin: 0; }
  .steps__line { left: calc(var(--dot) / 2); right: auto; top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); width: 1px; height: auto; }
  .steps__line i { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
}

/* where we work: a dotted GTA map beside the list */
.areas__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.areas .arealist li { transition: border-color .3s, color .3s, background .3s; cursor: default; }
.areas .arealist li.is-hot { border-color: var(--accent); color: #fff; background: rgba(170,221,248,.08); }
.gtamap { width: 100%; height: auto; display: block; overflow: visible; }
.gtamap__land circle { fill: rgba(244,241,236,.15); }
.gtamap__lake { fill: rgba(170,221,248,.45); font: italic 400 22px var(--serif); letter-spacing: .02em; }
.city__dot { fill: var(--accent); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .7s var(--ease); }
.city.is-on .city__dot { opacity: 1; transform: none; }
.city__ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.city.is-on .city__ring { animation: cityring 1.5s var(--ease) 1 both; }
@keyframes cityring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }
.city text { fill: #f4f1ec; font: 500 12px var(--sans); letter-spacing: .03em; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  paint-order: stroke; stroke: rgba(19,18,19,.9); stroke-width: 4px; }
.city.is-hot text, .gtamap.is-lit .city[data-city="Toronto"] text { opacity: 1; }
.city.is-hot .city__dot { transform: scale(1.6); }
@media (max-width: 900px) { .areas__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .city__dot { opacity: 1; transform: none; } .city.is-on .city__ring { animation: none; } }

/* closing call to action: on Rafael's own spotlit plaster wall, not the flat blue slab */
.cta--wall { background: var(--ink); color: var(--plaster-2); }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%; opacity: .6; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 55%, rgba(19,18,19,.25), rgba(19,18,19,.88)); }
.cta--wall .wrap { position: relative; z-index: 1; }
.cta__eyebrow { justify-content: center; color: var(--accent); }
.cta--wall .display em { color: var(--accent); }
.cta--wall .btn-pill { background: var(--accent); color: var(--ink); }
.cta--wall .cta__ctas .btn-pill + .btn-pill { background: transparent; color: var(--plaster-2); box-shadow: inset 0 0 0 1px rgba(244,241,236,.45); }
.cta--wall .btn-pill:hover { color: var(--ink); }

/* v11b (Sep 29 2026): Rafael rejected the line drawings. Floating marks and ghost letters are off everywhere until Codex
   delivers redrawn files; step dots show their number meanwhile. */
.mark, .ghost { display: none !important; }
.step__num { font: italic 400 1.7rem/1 var(--serif); }

/* v11c (Sep 29 2026, Codex QA pass 2 P1): on phones the hero name field sat behind the fixed action bar (y 783 on 844).
   Phones drop the two repeated reply-time lines and tighten the stack so the first field clears the bar. */
@media (max-width: 600px) {
  .hero--lead .hero__phone em, .hero--lead .herocard__intro { display: none; }
  .hero--lead .hero__sub { margin-bottom: 14px; }
  .hero--lead .hero__phone { margin-top: 4px; }
  .hero--lead .hero__ctas--text { margin-top: 12px; }
  .hero--lead .herocard { margin-top: 16px; padding-top: 18px; }
  .hero--lead .herocard h3 { margin-bottom: 8px; }
}
/* v11c motion contract: the call ring and the scroll cue play once, then rest */
.hero__phone .ring::after { animation-iteration-count: 1; animation-fill-mode: forwards; }
.scrollcue::after { animation-iteration-count: 1; animation-fill-mode: forwards; }
/* reviews: three static excerpts (replaces the ticker) */
.reviews { background: var(--ink); color: var(--plaster-2); padding: clamp(64px, 8vw, 120px) 0; }
.reviews--light { background: var(--plaster-2); color: var(--ink); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 8px; }
.review { margin: 0; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.reviews--light .review { border-top-color: var(--line); }
.review blockquote { margin: 0; font: 400 clamp(1.5rem, 2.2vw, 2.1rem)/1.15 var(--serif); letter-spacing: -.01em; }
.review figcaption { margin-top: 16px; font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.reviews--light .review figcaption { color: var(--accent-ink); }
@media (max-width: 800px) { .reviews__grid { grid-template-columns: 1fr; } }
/* paths: a short, always-visible difference between the finishes */
.path__tag { font: 600 .68rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) { .paths--acc .path__tag { color: var(--accent); display: block; margin-top: 2px; } }
/* steps: copy stays fully readable; only the dots and the line show progress */
.steps--line.is-armed .step:not(.is-on) h3, .steps--line.is-armed .step:not(.is-on) p { opacity: 1; }
/* trowel: plain caption pill, square crop keeps the hand in frame */
.seq__tc { letter-spacing: .12em; }
.seq--expand .seq__poster { object-position: 50% 100%; }

/* v11d (Rafael, Sep 29 2026): the GTA map sits quietly in the page colour. Smaller, low-contrast dots, no pulse rings,
   only Toronto in accent; city names still pair on hover. */
.areas__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.areas__map { max-width: 460px; justify-self: end; width: 100%; opacity: .9; }
.gtamap__land circle { fill: rgba(244,241,236,.07); }
.gtamap__lake { fill: rgba(244,241,236,.22); font-size: 18px; }
.city__dot { fill: rgba(244,241,236,.45); }
.city[data-city="Toronto"] .city__dot { fill: var(--accent); }
.city.is-hot .city__dot { fill: var(--accent); }
.city.is-on .city__ring { animation: none; }
@media (max-width: 900px) { .areas__map { justify-self: start; max-width: 360px; } }

/* ==========================================================================
   v12 prototype hero (home-v12.html only): knockout word over real footage, zoom through a letter.
   ========================================================================== */
.cine { position: relative; height: 100svh; background: #000; color: var(--plaster-2); }
.cine.is-armed { height: 240svh; }
.cine__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.cine__vid, .cine__photo, .cine__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cine__vid { object-position: 50% 80%; filter: contrast(1.08) saturate(.9); }
.cine__photo { opacity: var(--ph, 0); }
.cine__knock { position: absolute; inset: 0; z-index: 1; background: #000; mix-blend-mode: multiply; display: flex; justify-content: center;
  align-items: flex-start; padding-top: clamp(104px, 16vh, 170px); transform: scale(var(--s, 1)); opacity: var(--ko, 1); will-change: transform; pointer-events: none; }
.cine__knock span { color: #fff; font-family: var(--sans); font-weight: 700; font-size: 26vw; line-height: .8; letter-spacing: -.04em; white-space: nowrap; }
.cine__knock i { font-style: normal; }
.cine__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(28px, 7vh, 72px); padding: 0 var(--gutter); opacity: var(--co, 1);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.cine.is-zooming .cine__copy { pointer-events: none; }
.cine__copy .eyebrow { grid-column: 1; color: var(--accent); margin-bottom: 14px; }
.cine__title { grid-column: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 4.8rem); line-height: .98; letter-spacing: -.025em; }
.cine__title em { color: var(--accent); font-style: italic; }
.cine__sub { grid-column: 1; margin: 14px 0 0; max-width: 48ch; color: rgba(244,241,236,.7); }
.cine__ctas { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.cine__ctas > div, .cine__ctas .btn-pill { white-space: nowrap; }
.cine__num { font-family: var(--serif); font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -.01em; text-decoration: none; color: var(--plaster-2); }
.cine__hint { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; font: 600 .62rem/1 var(--sans); letter-spacing: .3em;
  text-transform: uppercase; color: rgba(244,241,236,.45); opacity: var(--co, 1); }
@media (max-width: 800px) {
  .cine__knock { padding-top: 27svh; }
  .cine__knock span { letter-spacing: -.055em; }
  .cine__copy { grid-template-columns: 1fr; bottom: 96px; }
  .cine__ctas { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 18px; }
  .cine__num { flex-basis: 100%; }
  .cine__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cine.is-armed { height: 100svh; } }
/* v12: the page drops the glass look; the quote form right after the hero is plain */
.v12 .header.is-solid { background: rgba(0,0,0,.86); }

/* ==========================================================================
   v12b prototype: parallax hero + coat-by-coat walkthrough (home-v12.html)
   ========================================================================== */
.plx { position: absolute; inset: 0; overflow: hidden; }
.plx img, .plx__bg, .plx__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.plx__fg { z-index: 1; }
.hero--plx .hero__media::after { background: linear-gradient(90deg, rgba(19,18,19,.72) 0%, rgba(19,18,19,.38) 42%, rgba(19,18,19,.12) 70%); }

.coats { background: var(--ink); color: var(--plaster-2); padding: clamp(80px, 10vw, 150px) 0 clamp(40px, 6vw, 90px); }
.coats__head { max-width: 760px; }
.coats__head .lede { color: rgba(244,241,236,.7); margin-top: 18px; }
.coats__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 90px); margin-top: clamp(24px, 4vw, 60px); }
.coats__viz { position: sticky; top: calc(var(--nav-h) + 3vh); height: calc(100svh - var(--nav-h) - 6vh); display: grid; place-items: center; align-self: start; }
.coats__svg { width: 100%; max-width: 640px; max-height: 100%; overflow: visible; }
.coats__note { position: absolute; bottom: 4px; left: 0; margin: 0; font: 600 .62rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,236,.38); }
.coat { transition: opacity .5s ease, transform .8s var(--ease); transform-box: view-box; }
.coats.is-armed .coat:not(.is-on) { opacity: 0; transform: translateY(-34px); }
.coats.is-armed .coat.is-on:not(.is-now) { opacity: .92; }
.coat__badge line { stroke: rgba(244,241,236,.35); }
.coat__badge circle { fill: #1f1e1f; stroke: rgba(244,241,236,.25); }
.coat__badge text { fill: rgba(244,241,236,.8); font: 600 11px var(--sans); text-anchor: middle; }
.coat.is-now .coat__badge circle { fill: var(--accent); stroke: var(--accent); }
.coat.is-now .coat__badge text { fill: var(--ink); }
.coats__step { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line-dark); padding: 28px 0; }
.coats__step:last-child { min-height: 60svh; }
.coats.is-armed .coats__step { opacity: .38; transition: opacity .5s ease; }
.coats.is-armed .coats__step.is-on { opacity: 1; }
.coats__n { font: italic 400 1.3rem/1 var(--serif); color: var(--accent); }
.coats__step h3 { font: 400 clamp(1.9rem, 3vw, 3rem)/1.02 var(--serif); letter-spacing: -.02em; margin: 12px 0 14px; }
.coats__step p { color: rgba(244,241,236,.72); max-width: 38ch; line-height: 1.55; margin: 0; font-size: 1.05rem; }
@media (max-width: 900px) {
  .coats__grid { grid-template-columns: 1fr; gap: 0; }
  .coats__viz { top: 60px; height: 42svh; z-index: 2; background: var(--ink); padding: 8px 0; }
  .coats__step { min-height: 52svh; }
}
@media (prefers-reduced-motion: reduce) { .coat { transition: none; } }
/* v12e: the sealer is a clear film over the decorative coat */
.coats.is-armed .coat--clear.is-on, .coat--clear { opacity: .55; }
.coats.is-armed .coat--clear:not(.is-on) { opacity: 0; }
/* v12f: three registered parallax layers. The stage (room + chair) carries the shared overscan scale and the slow scroll
   move; the images inside are identical boxes with identical object-fit and object-position, so they stay registered. */
.plx--layers .plx__stage { position: absolute; inset: 0; transform: scale(1.08); }
.plx--layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.plx--layers .plx__bg { z-index: 0; }
.plx--layers .plx__fg { z-index: 1; } /* no will-change: it left the moved layer unpainted in a hidden pane */
.plx--layers .plx__occ { z-index: 2; pointer-events: none; }

/* v12j: cover triptych (red and black pillar) */
.tri { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: #0b0a0b; }
.tri__p { position: relative; margin: 0; overflow: hidden; }
.tri__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tri.is-armed .tri__p { clip-path: inset(100% 0 0 0); }
.tri.is-armed.is-in .tri__p { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.tri.is-armed.is-in .tri__p:nth-child(2) { transition-delay: .12s; }
.tri.is-armed.is-in .tri__p:nth-child(3) { transition-delay: .24s; }
.hero--tri .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,11,.78) 0%, rgba(11,10,11,.42) 34%, rgba(11,10,11,.06) 52%, rgba(11,10,11,.1) 70%, rgba(11,10,11,.5) 100%),
              linear-gradient(0deg, rgba(11,10,11,.55) 0%, rgba(11,10,11,0) 30%); }
@media (max-width: 900px) {
  .tri { gap: 4px; }
  .hero--tri .hero__media::after { background: linear-gradient(180deg, rgba(11,10,11,.35) 0%, rgba(11,10,11,.62) 45%, rgba(11,10,11,.85) 100%); }
}
@media (prefers-reduced-motion: reduce) { .tri .tri__p { clip-path: none !important; } }

/* v12j: the layers section is tighter: shorter steps, quicker layer moves */
.coats { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(24px, 4vw, 60px); }
.coats__step { min-height: 40svh; padding: 18px 0; }
.coats__step:last-child { min-height: 48svh; }
.coats__viz { height: calc(78svh - var(--nav-h)); }
.coat { transition: opacity .35s ease, transform .5s var(--ease); }
@media (max-width: 900px) { .coats__step { min-height: 34svh; } .coats__step:last-child { min-height: 40svh; } .coats__viz { height: 38svh; } }
/* v12k: two-panel cover, the far pole and the wall */
.tri--two { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.tri--two .tri__p:first-child img { object-position: 70% 50%; }
@media (max-width: 900px) { .tri--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tri--two .tri__p:first-child img { object-position: 82% 50%; } }
/* v12k: material picker */
.coats__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; padding: 5px; border: 1px solid var(--line-dark); border-radius: 999px; }
.coats__tab { appearance: none; border: 0; background: transparent; color: rgba(244,241,236,.72); font: 600 .74rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; padding: 12px 18px; border-radius: 999px; cursor: pointer; transition: background .3s, color .3s; }
.coats__tab:hover { color: #fff; }
.coats__tab[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.coats__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coats__more { margin: 26px 0 0; }
.coats__h em { color: var(--accent); font-style: italic; }
@media (max-width: 900px) { .coats__tabs { position: relative; z-index: 3; } .coats__tab { padding: 11px 13px; font-size: .68rem; letter-spacing: .08em; } }
@media (max-width: 480px) { .coats__tabs { flex-wrap: nowrap; gap: 2px; padding: 4px; } .coats__tab { padding: 10px 9px; font-size: .6rem; letter-spacing: .04em; white-space: nowrap; } }
/* v12m: one stack + one step list per material; microcement's mesh is a see-through sheet */
.coats__stack[hidden], .coats__list[hidden] { display: none !important; }
.coats__viz { position: sticky; }
.coats__viz .coats__stack { position: relative; }
.coat--mesh image { opacity: .95; }
.coats.is-armed .coat--mesh.is-on { opacity: 1; }

/* ==========================================================================
   v12n: flow (Rafael: "it feels very sectioned off, like my Squarespace site"). home-v12 only (body.v12).
   One continuous dark surface: the cream sections are re-themed by swapping their colour variables, every section is
   transparent over one fixed ambient glow, the hero dissolves into the page, and the per-section chrome goes.
   ========================================================================== */
body.v12 { background: #121112 radial-gradient(1100px 760px at 12% 28%, rgba(168, 72, 34, .13), transparent 62%) fixed,
                        #121112 radial-gradient(1000px 720px at 88% 72%, rgba(170, 221, 248, .07), transparent 60%) fixed;
           background-color: #121112; }
.v12 main > section, .v12 .footer { background: transparent !important; }
.v12 .plaster, .v12 .light {
  --ink: #f1ede6; --dark: #f1ede6; --muted: #a9a3a6; --line: rgba(255,255,255,.12);
  --plaster: #1b1a1b; --plaster-2: #1d1c1d; --plaster-3: #262426; --white: #1d1c1d; --accent-ink: var(--accent);
  color: var(--ink);
}
.v12 .plaster .eyebrow, .v12 .light .eyebrow, .v12 .plaster em, .v12 .light em { color: var(--accent); }
.v12 .head .num, .v12 .head .rule { display: none; }
.v12 .section { padding: clamp(72px, 9vw, 140px) 0; }
.v12 .section--tight { padding: clamp(48px, 6vw, 90px) 0; }
.v12 .coats { padding-top: clamp(56px, 7vw, 110px); }
/* the hero dissolves into the page instead of ending on a hard line */
.v12 .hero--tri::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,17,18,0), #121112); }
.v12 .hero--tri .hero__inner { z-index: 2; }
/* cards and form fields on the dark surface */
.v12 .path, .v12 .leadform { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.v12 .leadform { border: 1px solid rgba(255,255,255,.08); }
.v12 .light input, .v12 .light select, .v12 .light textarea { background: #242224; color: #f1ede6; border-color: rgba(255,255,255,.12); }
.v12 .chip span { border-color: rgba(255,255,255,.18); }
/* v12o: step dots on the dark surface; "What it costs" */
.v12 .steps--line .step.is-on .step__dot, .v12 .steps--line:not(.is-armed) .step__dot { background: #f1ede6; color: #121112; border-color: #f1ede6; }
.prices { color: var(--plaster-2); }
.prices__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.prices .lede { color: rgba(244,241,236,.72); margin-top: 18px; }
.prices .note { color: rgba(244,241,236,.55); margin-top: 16px; max-width: 46ch; }
.prices__list { border-top: 1px solid rgba(255,255,255,.12); }
.price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.price h3 { font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--serif); letter-spacing: -.01em; margin: 0; }
.price p { margin: 6px 0 0; color: rgba(244,241,236,.6); font-size: .95rem; }
.price .price__n { margin: 0; font: 400 clamp(1.8rem, 3vw, 2.8rem)/1 var(--serif); color: var(--plaster-2); white-space: nowrap; }
.price__n small { font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-right: 6px; vertical-align: middle; }
.sample { margin-top: 28px; padding: 24px; border-radius: 12px; background: rgba(170,221,248,.07); border: 1px solid rgba(170,221,248,.22); }
.sample p { margin: 0; color: rgba(244,241,236,.82); line-height: 1.55; }
.sample strong { color: #fff; }
.sample__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) { .prices__grid { grid-template-columns: 1fr; } }
/* v12q: "See prices" on screen one; two-step offer */
.hero__prices { display: inline-flex; align-items: center; margin-left: 18px; font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(170,221,248,.45); padding-bottom: 4px; }
.hero__prices:hover { color: #fff; border-color: #fff; }
.sample .sample__2 { margin-top: 12px; }

/* v13c (Oct 21 2026): two-step hero form. Step 1 = finish buttons only, step 2 = name + phone + send. */
.herocard__q { font-size: .98rem; color: rgba(244,241,236,.86); margin: .2rem 0 1rem; }
.herocard__q span { color: rgba(244,241,236,.5); }
.herocard__q--2 { font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: var(--plaster-2); margin: 0 0 .8rem; }
.herocard .chips--tap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.herocard .chips--tap .chip:last-child { grid-column: 1 / -1; }
.herocard .chips--tap .chip span { text-align: center; padding: 16px 12px; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.herocard__back { background: none; border: 0; padding: 4px 0; color: var(--accent); font: inherit; font-size: .9rem; cursor: pointer; letter-spacing: .02em; }
.herocard__back span { border-bottom: 1px solid currentColor; }
.herocard__steps { display: none; gap: 6px; justify-content: center; margin: 1.1rem 0 0; }
.herocard__steps i { width: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); transition: background .3s var(--ease); }
.herocard__steps i.is-on { background: var(--accent); }
.herocard--steps.is-steps .herocard__steps { display: flex; }
.herocard--steps:not(.is-steps) [data-step-back] { display: none; }
.herocard--steps.is-steps .herostep:not(.is-on) { display: none; }
.herocard--steps.is-steps .herostep { animation: stepIn .45s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .herocard--steps.is-steps .herostep { animation: none; } }
@media (max-width: 600px) {
  .herocard .chips--tap .chip span { padding: 15px 8px; font-size: .78rem; letter-spacing: .03em; white-space: nowrap; }
}

/* v13e (Oct 21 2026): who we have worked with + Spiver certified */
.clients__list { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); font: 400 clamp(1.4rem, 2.2vw, 2.1rem)/1.15 var(--serif); letter-spacing: -.01em; color: var(--plaster-2); }
.clients__list li { display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(18px, 2.4vw, 30px) 14px; border-top: 1px solid rgba(255,255,255,.12); }
.clients__list li:nth-child(3n+2) { border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); }
.spiver__grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
.spiver--pics .spiver__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.spiver__grid > div:first-child { max-width: 46ch; }
.spiver__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spiver__pic { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: rgba(0,0,0,.06); }
.spiver__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.spiver__pic:nth-child(2) { transform: translateY(clamp(18px, 3vw, 44px)); }
@media (max-width: 900px) {
  .spiver--pics .spiver__grid { grid-template-columns: 1fr; }
  .spiver__pic:nth-child(2) { transform: none; }
}
@media (max-width: 700px) {
  .clients__list { grid-template-columns: 1fr; }
  .clients__list li { padding: 14px 10px; }
  .clients__list li:nth-child(3n+2) { border-left: 0; border-right: 0; }
}

/* v13h (Oct 21 2026): Google reviews strip right under the hero form */
.greviews { background: var(--ink); color: var(--plaster-2); padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.greviews__grid { display: grid; grid-template-columns: minmax(220px, .7fr) 2.3fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.greviews__num { font: 400 clamp(3.6rem, 6vw, 5.4rem)/.9 var(--serif); margin: 0; letter-spacing: -.03em; }
.gstars { color: #f5b301; letter-spacing: .12em; font-size: 1.15rem; display: inline-block; }
.greviews__score .gstars { font-size: 1.5rem; margin: .35rem 0 .5rem; }
.greviews__line { margin: 0; font-size: 1rem; color: rgba(244,241,236,.85); }
.greviews__line strong { color: var(--plaster-2); }
.greviews__src { margin: .7rem 0 0; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.greviews__src a { color: rgba(244,241,236,.6); text-decoration: none; border-bottom: 1px solid transparent; width: fit-content; }
.greviews__src a:hover { color: var(--accent); border-bottom-color: currentColor; }
.greviews__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.greview { margin: 0; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 10px; }
.greview blockquote { margin: 0; font-size: .98rem; line-height: 1.55; color: rgba(244,241,236,.92); flex: 1; }
.greview figcaption { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.greview figcaption span { font-weight: 400; color: rgba(244,241,236,.5); }
@media (max-width: 1000px) {
  .greviews__grid { grid-template-columns: 1fr; }
  .greviews__score { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .greviews__num { grid-row: span 3; }
  .greviews__score .gstars { margin: 0; }
  .greviews__src { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-top: .3rem; }
  .greviews__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-right: calc(-1 * var(--gutter, 16px)); padding-right: var(--gutter, 16px); }
  .greview { scroll-snap-align: start; }
}

/* v13j (Oct 21 2026): worked-with tiles with the companies' logos */
.clients__grid { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.client { background: #f4f1ec; border-radius: 12px; min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 18px; text-align: center; }
.client__logo { max-height: 82px; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.client__logo--aburi-hana { max-height: 70px; }
.client__logo--grandma-loves-you { max-height: 96px; }
.client__word { font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.1 var(--serif); color: #1e1a18; letter-spacing: -.01em; }
.client__name { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(30,26,24,.55); }
.client:not(.client--logo) .client__name { display: none; }
@media (max-width: 700px) {
  .clients__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .client { min-height: 128px; padding: 16px 12px; }
  .client__logo { max-height: 60px; }
  .client__logo--grandma-loves-you { max-height: 72px; }
  .client__word { font-size: 1.15rem; }
  .client__name { font-size: .62rem; letter-spacing: .08em; }
}

/* v13k (Oct 21 2026): four tap questions + contact */
.herocard__count { display: flex; justify-content: space-between; align-items: center; min-height: 28px; margin: 0 0 .2rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,236,.5); }
.herocard__count span:only-child { margin-left: auto; }
.herocard__count .herocard__back { text-transform: none; letter-spacing: .02em; font-size: .88rem; }
.herocard__picked { font-size: .82rem; color: var(--accent); margin: 0 0 .6rem; line-height: 1.45; }
.herocard .chips--tap-long { grid-template-columns: 1fr 1fr; }
.herocard .chips--tap-long .chip:last-child { grid-column: auto; }
.herocard .chips--tap-long .chip span { padding: 13px 10px; font-size: .8rem; }
.herocard .field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(244,241,236,.45); }
.herocard--steps:not(.is-steps) .herocard__count, .herocard--steps:not(.is-steps) .herocard__picked { display: none; }
.herocard--steps:not(.is-steps) .herostep + .herostep { margin-top: 1.2rem; }
@media (max-width: 600px) {
  .herocard .chips--tap-long .chip span { white-space: normal; font-size: .74rem; padding: 12px 6px; }
}
@media (max-width: 600px) {
  .herocard .chips--tap .chip span { white-space: normal; line-height: 1.25; min-height: 48px; display: flex; align-items: center; justify-content: center; }
}
.client__logo--olive-tree-builds { max-height: 64px; max-width: 86%; }
.client__logo--milano-painting-contracting { max-height: 92px; }
@media (max-width: 700px) {
  .client__logo--olive-tree-builds { max-height: 44px; max-width: 92%; }
  .client__logo--milano-painting-contracting { max-height: 70px; }
}
.client__logo--zest-communities { max-height: 88px; }
@media (max-width: 700px) { .client__logo--zest-communities { max-height: 66px; } }