/* =====================================================================
   TriCore Construction Group — homepage (Roofing_6 design)
   © TriCore Construction Group. All rights reserved.
   Instrument Serif (display) · Pinyon Script (accent) · Archivo Expanded (labels)
   clay-umber · pale sage · warm cream · ink navy · terracotta
   ===================================================================== */
:root {
  --umber: #160c0a;
  --umber-2: #3a201a;
  --sage: #ffffff;   /* arch, Why Choose Us and the reasons (was #cfdcd7) */
  --sage-2: #bfd0ca;
  --cream: #f4f0e8;
  --ink: #1d2a38;
  --ink-60: rgba(29, 42, 56, .62);
  --ink-30: rgba(29, 42, 56, .3);
  --ink-12: rgba(29, 42, 56, .12);
  --clay: #b5583a;
  --white: #fbf8f2;
  --pad: clamp(18px, 3vw, 44px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --script: "Pinyon Script", cursive;
  --wide: "Archivo", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--wide); font-stretch: 100%; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--clay); color: var(--white); }
:focus-visible { outline: 1px solid var(--clay); outline-offset: 4px; }

.wide { font-family: var(--wide); font-stretch: 125%; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; }
.label { color: var(--ink-60); }
.sec-title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8vw, 140px); line-height: .86; letter-spacing: -.01em; text-transform: uppercase; }
.sec-title em { font-style: normal; text-transform: none; font-size: .78em; color: var(--clay); line-height: 0; }
.lm { display: block; overflow: hidden; padding-bottom: .06em; }
.li { display: inline-block; will-change: transform; }

/* ---------- roll links ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; }
.roll span { display: block; transition: transform .7s var(--ease); }
.roll span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.roll:hover span { transform: translateY(-100%); }

/* ---------- PRELOADER ---------- */
.pre { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--umber); color: var(--cream); pointer-events: none; }
.no-anim .pre { display: none; }
.pre__count { position: absolute; top: 28px; right: var(--pad); font-variant-numeric: tabular-nums; }
.pre__mark { text-align: center; }
.pre__title { font-family: var(--serif); font-size: clamp(54px, 7.4vw, 120px); line-height: .84; text-transform: uppercase; }
.pre__title .pl { display: block; overflow: hidden; }
.pre__title .pl > span { display: inline-block; }
.pre__script { margin-top: -.2em; font-size: clamp(34px, 3.6vw, 60px); color: #d9a48f; clip-path: inset(0 100% 0 0); }
.pre__side { position: absolute; top: 50%; transform: translateY(-50%); letter-spacing: .6em; }
.pre__side--l { left: 16%; } .pre__side--r { right: 16%; }
.pre__line { position: absolute; left: 50%; bottom: 14%; width: 1px; height: 13vh; background: rgba(244, 240, 232, .5); transform-origin: top; transform: scaleY(0); }
.pre__foot { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); text-align: center; color: rgba(244, 240, 232, .6); }

/* ---------- fixed chrome ---------- */
.badge { position: fixed; left: var(--pad); top: 22px; z-index: 60; width: 92px; height: 92px; color: var(--white); mix-blend-mode: difference; }
.badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.badge text { fill: currentColor; font-family: var(--wide); font-stretch: 125%; font-size: 8.6px; letter-spacing: .2em; text-transform: uppercase; }
.badge__core { position: absolute; inset: 30px; display: grid; place-items: center; }
.badge__core svg { width: 28px; height: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }
.links { position: fixed; right: var(--pad); top: 26px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; mix-blend-mode: difference; color: var(--white); font-family: var(--wide); font-stretch: 125%; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.links a:first-child { font-size: 13px; }
.menu-btn { display: none; position: fixed; right: var(--pad); top: 26px; z-index: 70; padding: 10px 16px; border: 1px solid currentColor; border-radius: 999px; background: none; color: var(--white); mix-blend-mode: difference; cursor: pointer; }
.sheet { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 110px var(--pad) 36px; background: var(--umber); color: var(--cream); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--ease), visibility 0s .9s; }
.is-menu .sheet { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease), visibility 0s; }
.sheet nav { display: flex; flex-direction: column; }
.sheet nav a { font-family: var(--serif); font-size: clamp(40px, 11vw, 70px); line-height: 1.05; text-transform: uppercase; border-bottom: 1px solid rgba(244,240,232,.15); padding: 6px 0; }
.sheet .wide { color: rgba(244,240,232,.6); }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; color: var(--white); background: var(--umber); }
.hero__win { position: absolute; inset: 0; overflow: hidden; will-change: clip-path, transform; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; will-change: transform; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(29,22,18,.45), rgba(29,22,18,0) 42%), linear-gradient(to top, rgba(29,22,18,.35), rgba(29,22,18,0) 30%); }
.hero__head { position: absolute; left: 0; right: 0; top: 9vh; text-align: center; pointer-events: none; will-change: transform, opacity; }
/* the corner furniture fades as one layer on scroll, so the intro can animate each piece without the two fighting */
.hero__ui { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.hero__ui .hero__cta { pointer-events: auto; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9.4vw, 168px); line-height: .82; text-transform: uppercase; text-shadow: 0 2px 40px rgba(29,22,18,.25); }
.hl { display: block; overflow: hidden; padding-top: .04em; }
.hl > span { display: inline-block; will-change: transform; }
.hero__script { margin-top: -.42em; font-size: clamp(40px, 4.6vw, 82px); color: #fff; text-shadow: 0 2px 30px rgba(29,22,18,.35); }
.hero__side { position: absolute; top: 46vh; letter-spacing: .5em; }
.hero__side--l { left: 15%; } .hero__side--r { right: 15%; }
.hero__scroll { position: absolute; left: var(--pad); bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; writing-mode: vertical-rl; }
.hero__scroll span { transform: rotate(180deg); }
.hero__scroll i { width: 1px; height: 64px; background: rgba(255,255,255,.4); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #fff; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.hero__cta { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 14px 22px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; overflow: hidden; isolation: isolate; transition: color .6s var(--ease); }
.hero__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: translateY(101%); border-radius: inherit; transition: transform .7s var(--ease); }
.hero__cta:hover { color: var(--ink); }
.hero__cta:hover::before { transform: translateY(0); }

/* the rising arch */
.arch { position: absolute; left: 50%; top: 100%; z-index: 3; width: max(150vw, 1400px); aspect-ratio: 1; margin-left: calc(max(150vw, 1400px) / -2); border-radius: 50%; background: var(--sage); color: var(--ink); will-change: transform; }
.arch__text { position: absolute; left: 10%; right: 10%; top: -1.5%; width: 80%; height: auto; overflow: visible; }
.arch__text text { fill: var(--ink); font-family: var(--serif); font-size: 46px; letter-spacing: .14em; text-transform: uppercase; }
.arch__core { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.arch__emblem svg { width: 36px; height: 36px; }
.arch__line { width: 1px; height: 90px; background: var(--ink-30); }
.arch__core .wide { max-width: 22ch; color: var(--ink-60); }

/* ---------- GROW / CLIMATE ---------- */
/* Laid course by course: the stage pins for 220vh while the coast photograph is assembled from eight horizontal
   courses, eaves first, each hinging down over the one below like a tile course; stats count with the laying. */
.grow { position: relative; height: 320vh; background: var(--sage); }
.grow__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 5vw, 96px); padding: clamp(120px, 16vh, 156px) var(--pad) clamp(28px, 6vh, 60px); }
.grow__copy { display: flex; flex-direction: column; min-height: 0; }
.grow__label { color: var(--ink-60); letter-spacing: .3em; }
.grow__label .cu, .cu { color: var(--clay); }
.grow__title { margin-top: clamp(14px, 2.4vh, 28px); font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 7.6vw, 150px); line-height: .84; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.gl { display: block; overflow: hidden; padding-bottom: .04em; }
.gl > span { display: block; will-change: transform; }
.gl:nth-child(2) { padding-left: .9em; }
.grow__script { margin: -.2em 0 0 3.2em; font-size: clamp(38px, 3.6vw, 64px); line-height: 1; color: var(--clay); }
.grow__text { margin-top: auto; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.grow__stats { display: flex; gap: clamp(22px, 3vw, 52px); margin-top: clamp(20px, 3.4vh, 34px); padding-top: clamp(16px, 2.4vh, 22px); border-top: 1px solid var(--ink-12); }
.grow__stats dt { color: var(--ink-60); }
.grow__stats dd { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.3vw, 40px); line-height: 1; text-transform: uppercase; color: var(--head); white-space: nowrap; }
.grow__stats b { font-weight: 400; font-variant-numeric: tabular-nums; }
.grow__stage { position: relative; display: flex; flex-direction: column; min-height: 0; }
.grow__meta { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--ink-60); }
.grow__meta b { font-weight: 600; color: var(--clay); font-variant-numeric: tabular-nums; }
.grow__frame { position: relative; flex: 1; min-height: 0; perspective: 1600px; overflow: hidden; background: rgba(30, 55, 48, .06); }
.grow__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grow__frame.is-coursed > img { visibility: hidden; }
.gc { position: absolute; left: 0; right: 0; overflow: hidden; transform-origin: 50% 0; backface-visibility: hidden; will-change: transform, opacity; }
.gc img { position: absolute; left: 0; width: 100%; object-fit: cover; will-change: transform; pointer-events: auto; }
.gc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 28, 24, .55), rgba(18, 28, 24, 0) 70%); opacity: var(--sh, 0); pointer-events: none; }
.gc__shadow { position: absolute; left: 0; right: 0; height: 22px; background: linear-gradient(to bottom, rgba(18, 28, 24, .32), rgba(18, 28, 24, 0)); opacity: 0; pointer-events: none; z-index: 20; }
.grow__rule { height: 1px; margin-top: 12px; background: var(--ink-12); }
.grow__rule i { display: block; height: 100%; background: var(--clay); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- REASONS ---------- */
.reasons { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--sage); }
.reasons__media { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.reasons__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); will-change: clip-path, transform; }
.reasons__media img.is-on:first-child { clip-path: inset(0 0 0 0); }
.reasons__list { padding: 0 clamp(24px, 6vw, 110px); }
.rs { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--ink-12); }
.rs:last-child { border-bottom: 0; }
.rs__n { color: var(--clay); }
.rs__t { margin-top: 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5.6vw, 100px); line-height: .88; text-transform: uppercase; }
.rs__d { margin-top: 28px; max-width: 40ch; color: var(--ink-60); font-size: 16px; }

/* ---------- PRACTICE ---------- */
.practice { position: relative; padding: clamp(110px, 12vw, 190px) 0 0; background: var(--cream); overflow: hidden; }
.practice__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding: 0 var(--pad); align-items: start; }
.pr-main { grid-column: 1 / span 5; margin: 0; }
.pr-main__img { position: relative; aspect-ratio: 4 / 5.2; overflow: hidden; background: var(--sage-2); }
.pr-main__img img, .pr-inset img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.pr-main figcaption { margin-top: 14px; color: var(--ink-60); }
.pr-copy { grid-column: 7 / span 6; padding-top: clamp(30px, 6vw, 100px); }
.statement { margin-top: 28px; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 80px); line-height: .94; text-transform: uppercase; }
.statement em { font-style: normal; text-transform: none; color: var(--clay); font-size: .9em; }
.pr-p { margin-top: 34px; max-width: 46ch; color: var(--ink-60); font-size: 16px; }
.pr-sig { display: flex; align-items: baseline; gap: 14px; margin-top: 30px; }
.pr-sig .script { font-size: clamp(30px, 2.6vw, 44px); color: var(--ink); line-height: 1; }
.pr-sig .wide { color: var(--ink-60); }
.pr-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 70px); border-top: 1px solid var(--ink-12); }
.pr-nums div { padding-top: 18px; }
.pr-nums dt { color: var(--ink-60); }
.pr-nums dd { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(44px, 4.4vw, 76px); line-height: .9; }
.pr-inset { grid-column: 9 / span 3; position: relative; margin: clamp(40px, 6vw, 90px) 0 0; aspect-ratio: 1 / 1.1; overflow: hidden; background: var(--sage-2); }
.materials { margin-top: clamp(90px, 10vw, 150px); border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); overflow: hidden; }
.materials__track { display: flex; align-items: center; gap: .5em; width: max-content; padding: .18em 0; font-family: var(--serif); font-size: clamp(60px, 9vw, 160px); line-height: 1; text-transform: uppercase; will-change: transform; }
.materials__track i { font-style: normal; font-size: .3em; color: var(--clay); }
.materials__track span:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px var(--ink); }

/* ---------- CRAFTED BY HAND ---------- */
.stagger { position: relative; padding: clamp(110px, 12vw, 190px) var(--pad); background: var(--cream); overflow: hidden; }
.stagger__label { margin-bottom: clamp(30px, 4vw, 60px); }
.st-row { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 40px); }
.st-row + .st-row { margin-top: clamp(10px, 1.4vw, 24px); }
.st-w { display: block; overflow: hidden; padding-top: .05em; font-family: var(--serif); font-weight: 400; font-size: clamp(76px, 13.4vw, 250px); line-height: .8; text-transform: uppercase; }
.st-w > span { display: inline-block; will-change: transform; }
.st-w--cu { color: var(--clay); }
.st-img { position: relative; flex: none; margin: 0; overflow: hidden; height: clamp(70px, 11vw, 200px); width: clamp(120px, 20vw, 360px); background: var(--sage-2); will-change: width; }
.st-img img { position: absolute; left: 50%; top: 0; height: 100%; width: clamp(120px, 20vw, 360px); max-width: none; object-fit: cover; transform: translateX(-50%) scale(1.15); will-change: transform; }
.st-img--b { width: clamp(90px, 14vw, 250px); } .st-img--b img { width: clamp(90px, 14vw, 250px); }
.st-img--c { width: clamp(110px, 17vw, 300px); } .st-img--c img { width: clamp(110px, 17vw, 300px); }
.st-row--1 { padding-left: 2vw; }
.st-row--2 { padding-left: 10vw; }
.st-row--3 { justify-content: flex-end; padding-right: 2vw; }
.st-note { max-width: 34ch; margin-left: clamp(10px, 2vw, 40px); align-self: flex-end; color: var(--ink-60); font-size: 15px; }
.circle-btn { position: relative; flex: none; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--ink-30); text-align: center; overflow: hidden; isolation: isolate; transition: color .6s var(--ease), border-color .6s; }
.circle-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--clay); transform: scale(0); transition: transform .8s var(--ease); }
.circle-btn:hover { color: var(--white); border-color: var(--clay); }
.circle-btn:hover::before { transform: scale(1); }
.circle-btn--light { border-color: rgba(255,255,255,.6); color: var(--white); }

/* ---------- SERVICES ---------- */
.services { position: relative; padding: clamp(110px, 12vw, 190px) var(--pad); background: var(--white); }
.services__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px; padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--ink-12); }
.services__head .sec-title { margin-top: 22px; }
.services__intro { justify-self: end; max-width: 36ch; color: var(--ink-60); font-size: 16px; }
.sv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); margin-top: clamp(40px, 5vw, 70px); align-items: start; }
.sv__stage { position: sticky; top: 9vh; }
.sv__frame { position: relative; aspect-ratio: 4 / 4.6; max-height: 78vh; overflow: hidden; background: var(--sage-2); }
.sv__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); will-change: clip-path, transform; }
.sv__frame img.is-on { clip-path: inset(0 0 0 0); }
.sv__cap { margin-top: 16px; color: var(--ink-60); }
.sv__cap span { color: var(--ink); }
.sv__item { border-bottom: 1px solid var(--ink-12); }
.sv__item a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; grid-template-rows: auto 0fr; align-items: center; column-gap: 14px; padding: clamp(22px, 2.6vw, 38px) 0; transition: grid-template-rows .8s var(--ease); }
.sv__n { color: var(--ink-60); transition: color .5s; }
.sv__t { font-family: var(--serif); font-size: clamp(36px, 4.2vw, 74px); line-height: .9; text-transform: uppercase; color: var(--ink-30); transition: color .6s var(--ease), transform .8s var(--ease); }
.sv__arrow { justify-self: end; font-size: 22px; color: var(--ink-30); transition: transform .7s var(--ease), color .5s; }
.sv__d { grid-column: 2 / span 2; min-height: 0; overflow: hidden; }
.sv__di { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.sv__di > span:first-child { max-width: 46ch; color: var(--ink-60); font-size: 16px; }
.sv__di .wide { color: var(--clay); }
.sv__item.is-on a { grid-template-rows: auto 1fr; }
.sv__item.is-on .sv__n { color: var(--clay); }
.sv__item.is-on .sv__t { color: var(--ink); transform: translateX(12px); }
.sv__item.is-on .sv__arrow { color: var(--clay); transform: rotate(45deg); }
.sv__item.is-on .sv__di { opacity: 1; transform: none; }

/* ---------- WORK — 4 × 100vh stream ----------
   Frame boxes are measured from the reference composition (1872 × 847) and expressed as % of the stage,
   so at rest every slide reproduces it exactly. Photos flow upward between slides at different speeds. */
.work { position: relative; height: 400vh; background: #e7e0d4; }
.wf { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wf__titles { position: absolute; left: 0; right: 0; top: calc(50% + (385 - 423.5) * var(--u)); z-index: 1; transform: translateY(-50%); display: grid; text-align: center; pointer-events: none; }
.wf__t { grid-area: 1 / 1; overflow: hidden; padding: .06em 0 .1em; font-family: var(--serif); font-weight: 400; font-size: 7.6vw; line-height: .9; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.wf__t > span { display: inline-block; will-change: transform; }
.js:not(.no-anim) .wf__t:not(:first-child) > span { visibility: hidden; }
.wf__t sup { font-family: var(--wide); font-size: .16em; vertical-align: .2em; margin-left: .06em; letter-spacing: 0; }
.wf__track { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.wf { --pitch: max(1320 * var(--u), 100vh); } /* compositions sit at least one screen apart */
.wf__set { position: absolute; inset: 0; transform: translateY(calc(var(--s) * var(--pitch))); }
.wf__img { position: absolute; z-index: 2; margin: 0; overflow: hidden; background: none; border: 0; outline: 0; box-shadow: none; }
.wf__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; outline: 0; will-change: transform; }
/* exact reference boxes — measured on the reference at 1920 px wide (it scales its whole layout by width / 1920).
   x/y/w/h are those px values; one unit --u scales them together, anchored on the frame centre (y 423.5 at 1920 × 847). */
.wf { --u: calc(100vw / 1920); }
.wf__img { left: calc(var(--x) * var(--u)); top: calc(50% + (var(--y) - 423.5) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.wf__img--a { --x: 700;  --y: -72;  --w: 520; --h: 280; }
.wf__img--e { --x: 1600; --y: -233; --w: 240; --h: 240; }
.wf__img--b { --x: 80;   --y: 287;  --w: 360; --h: 240; }
.wf__img--f { --x: 1600; --y: 327;  --w: 240; --h: 360; }
.wf__img--d { --x: 560;  --y: 567;  --w: 800; --h: 440; }
.wf__img--c { --x: 80;   --y: 687;  --w: 200; --h: 200; }
.wf__bar { position: absolute; left: 0; right: 0; bottom: 3.2%; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--pad); font-size: 12px; letter-spacing: .1em; color: var(--ink); mix-blend-mode: multiply; }
.wf__grp { display: flex; gap: 2.4em; }
.wf__dim { color: var(--ink-30); transform: translateY(.7em); }
.wf__cur, .wf__nm { font-weight: 600; }
.wf__link { position: relative; transition: color .4s; }
.wf__link:hover { color: var(--clay); }

/* ---------- JOURNEY ---------- */
.journey { position: relative; padding: clamp(120px, 14vw, 220px) var(--pad); background: var(--sage); text-align: center; overflow: hidden; }
.journey__title { display: flex; flex-direction: column; align-items: center; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 124px); line-height: .9; text-transform: uppercase; }
.jl { display: block; overflow: hidden; padding-top: .04em; }
.jl > span { display: inline-block; }
.journey__script { font-size: .9em; line-height: .6; color: var(--clay); text-transform: none; margin: -.06em 0 .08em; }
.route { position: relative; max-width: 1400px; height: clamp(220px, 22vw, 320px); margin: clamp(60px, 7vw, 110px) auto 0; }
.route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__path { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.route__stops li { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -100%); padding-bottom: 18px; }
.route__stops li::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 6px rgba(181, 88, 58, .18); }
.route__stops b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 32px); text-transform: uppercase; line-height: 1; }
.route__stops span { color: var(--ink-60); }

/* ---------- VOICE ---------- */
.voice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: var(--umber); color: var(--cream); overflow: hidden; }
.voice__img { position: relative; margin: 0; overflow: hidden; min-height: 70vh; }
.voice__img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.voice__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 7vw, 120px) clamp(28px, 5vw, 90px); }
.voice__panel .label { color: rgba(244,240,232,.6); }
.voice__mark { display: block; height: .5em; margin-top: 26px; font-family: var(--serif); font-size: clamp(120px, 12vw, 220px); line-height: .9; color: var(--clay); }
.voice__q { margin-top: 10px; font-family: var(--serif); font-size: clamp(32px, 3.4vw, 58px); line-height: 1.02; text-transform: uppercase; }
.voice__q .w { display: inline-block; opacity: .16; }
.voice__who { display: flex; flex-direction: column; gap: 4px; margin-top: 38px; }
.voice__who .script { font-size: clamp(36px, 3vw, 52px); line-height: 1; color: #e3b39c; }
.voice__who .wide { color: rgba(244,240,232,.65); }
.voice__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 70px); border-top: 1px solid rgba(244,240,232,.18); }
.voice__stats div { padding-top: 18px; }
.voice__stats dt { color: rgba(244,240,232,.55); }
.voice__stats dd { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(34px, 3vw, 54px); line-height: 1; }
.voice__stats small { font-size: .5em; color: rgba(244,240,232,.6); }

/* ---------- FINALE — rise above the weather ----------
   A 500vh scene pinned for 400vh (the findrealestate.com hero, retold for a roof): the timber gable rises and
   swells out of a cloud bank while side clouds part, the heading drifts back and fades, the Glorry wordmark draws
   itself in outline, the roof crossfades into the letters, and a second bank of cloud rolls up into the footer. */
.fw { --ink: #1b2b45; --head: #0e1d36; --hw: max(124vw, 170vh); --sw: max(100vw, 170vh); --mist: #f3f5f8; position: relative; height: 500vh; background: #8fb3e6; color: var(--ink); }
.fw, .fw * { --ink-60: color-mix(in srgb, var(--ink) 66%, transparent); --ink-30: color-mix(in srgb, var(--ink) 30%, transparent); }
.fw__top { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.fw__bg, .fw__back, .fw__comp, .fw__clouds, .fw__logo { position: absolute; inset: 0; }
.fw__bg img { display: block; width: 100%; pointer-events: none; user-select: none; }
.fw__back img { height: 100%; object-fit: cover; }
.fw__back::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 12% 92%, rgba(255, 196, 160, .62), rgba(255, 196, 160, 0) 70%), radial-gradient(55% 45% at 92% 80%, rgba(255, 214, 190, .35), rgba(255, 214, 190, 0) 70%), linear-gradient(to bottom, rgba(244, 242, 238, .62), rgba(244, 242, 238, .18) 46%, rgba(244, 242, 238, 0) 70%); }
.fw__house { position: absolute; left: calc(50% - var(--hw) / 2); top: 57%; width: var(--hw); aspect-ratio: 2400 / 1000; z-index: 1; will-change: transform, opacity; }
.fw__house img { height: 100%; -webkit-mask-image: linear-gradient(#000 70%, transparent 98%); mask-image: linear-gradient(#000 70%, transparent 98%); }
.fw__comp { z-index: 1; opacity: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; will-change: opacity; }
.fw__clouds { z-index: 2; }
.fw__cloud { position: absolute; will-change: transform; filter: brightness(1.07) saturate(.92); }
.fw__cloud--l { left: -24vw; top: 37%; width: max(58.6vw, 70vh); }
.fw__cloud--r { left: 74vw; top: 31%; width: max(48.8vw, 58vh); }
.fw__cloud--r img { transform: scaleX(-1); }
.fw__logo { z-index: 1; opacity: 0; }
.fw__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fw__svg text { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.1; text-anchor: middle; }
.fw__t1 { font-family: var(--serif); text-transform: uppercase; }
.fw__t2 { font-family: var(--script); }
.fw__smoke { position: absolute; left: calc(50% - var(--sw) / 2); bottom: 0; width: var(--sw); z-index: 3; will-change: transform; }
.fw__content { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; padding: max(96px, 15vh) var(--pad) 0; text-align: center; transform-origin: 50% 0; will-change: transform, opacity; }
.fw__pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--ink-30); border-radius: 999px; background: rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 10px; color: var(--ink); transition: background .5s var(--ease); }
.fw__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.fw__pill:hover { background: rgba(255, 255, 255, .6); }
.fw__title { margin-top: clamp(16px, 2vw, 26px); font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 8.2vw, 168px); line-height: .92; letter-spacing: -.015em; color: var(--head); }
.fw__w { display: inline-block; overflow: hidden; padding: 0 .02em .1em; margin-bottom: -.1em; vertical-align: top; }
.fw__w > span { display: inline-block; }
.fw__text { margin-top: clamp(12px, 1.4vw, 20px); max-width: 34ch; font-size: clamp(15px, 1.2vw, 21px); line-height: 1.45; color: var(--ink-60); }
.fw__text b { font-weight: 500; color: var(--ink); }
.fw__actions { margin-top: clamp(22px, 2.6vw, 38px); }
.fw__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; background: var(--umber); color: var(--cream); transition: background .6s var(--ease), gap .6s var(--ease); }
.fw__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .6s var(--ease); }
.fw__btn:hover { background: var(--clay); }
.fw__btn:hover svg { transform: translateX(4px); }
.fw__tail { position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; z-index: 2; overflow: hidden; pointer-events: none; }
.fw__smoke--tail { bottom: 26vh; }
.fw__smoke--tail img { transform: scaleX(-1); }
.fw__top .fw__smoke { bottom: -13vh; }
.fw__tail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40vh; z-index: 4; background: linear-gradient(to bottom, rgba(243, 245, 248, 0), var(--mist) 42%); }
@media (max-width: 700px) {
  .fw { --sw: 230vh; }
  .fw__top .fw__smoke { bottom: -4vh; }
  .fw__cloud--l { left: -72vw; top: 58%; width: 125vw; }
  .fw__cloud--r { left: 60vw; top: 46%; width: 100vw; }
}

/* ---------- FOOTER ---------- */
.foot { position: relative; padding: clamp(70px, 8vw, 110px) var(--pad) 26px; background: var(--umber); color: var(--cream); overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.foot .label { color: rgba(244,240,232,.5); margin-bottom: 10px; }
.foot a { transition: color .4s; } .foot a:hover { color: #e3b39c; }
.foot__word { position: relative; margin-top: clamp(60px, 8vw, 120px); padding-bottom: .26em; text-align: center; font-family: var(--serif); font-size: clamp(90px, 21vw, 380px); line-height: .8; text-transform: uppercase; }
.foot__word .script { position: absolute; left: 52%; bottom: -.02em; transform: translateX(-50%); font-size: .38em; color: #d9a48f; white-space: nowrap; text-transform: none; }
.foot__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: clamp(60px, 7vw, 100px); color: rgba(244,240,232,.55); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
.js:not(.no-anim) .hero__head, .js:not(.no-anim) .hero__side, .js:not(.no-anim) .hero__scroll, .js:not(.no-anim) .hero__cta { opacity: 0; }

/* ===================================================================== RESPONSIVE */
@media (max-width: 1000px) {
  .grow { height: 300vh; }
  .grow__pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 3vh, 28px); padding-top: 84px; }
  .grow__title { font-size: clamp(46px, 10vw, 96px); }
  .gl:nth-child(2) { padding-left: .6em; }
  .grow__script { display: none; }
  .grow__text { margin-top: 14px; max-width: 52ch; }
  .grow__stats { margin-top: 14px; padding-top: 12px; }
  .links { display: none; }
  .menu-btn { display: block; }
  .reasons { grid-template-columns: 1fr; }
  .reasons__media { z-index: 1; height: 62vh; }
  .reasons__list { position: relative; z-index: 2; background: var(--sage); }
  .rs { min-height: 0; padding: 70px 0; }
  .practice__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pr-main { grid-column: 1 / span 4; }
  .pr-copy { grid-column: 1 / -1; padding-top: 50px; }
  .pr-inset { grid-column: 4 / span 3; margin-top: 40px; }
  .services__head { grid-template-columns: 1fr; }
  .services__intro { justify-self: start; }
  .sv { grid-template-columns: 1fr; }
  .sv__stage { position: relative; top: 0; }
  .sv__frame { aspect-ratio: 16 / 11; }
  .voice { grid-template-columns: 1fr; }
  .voice__img { min-height: 60vh; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .badge { width: 72px; height: 72px; }
  .badge__core { inset: 23px; }
  .hero__side { display: none; }
  .hero__head { top: 15vh; width: 100%; }
  .pre__side { display: none; }
  .arch__text text { font-size: 60px; }
  .grow__title { font-size: clamp(46px, 13vw, 80px); }
  .grow__text { font-size: 14px; line-height: 1.5; }
  .grow__stats { gap: 18px; }
  .grow__stats dd { font-size: 22px; }
  .pr-main { grid-column: 1 / -1; }
  .pr-inset { grid-column: 3 / -1; }
  .pr-nums dd { font-size: 38px; }
  .st-row { flex-wrap: wrap; }
  .st-row--1, .st-row--2, .st-row--3 { padding: 0; justify-content: flex-start; }
  .st-w { font-size: clamp(64px, 21vw, 120px); }
  .st-note { margin: 16px 0 0; flex-basis: 100%; }
  .st-row--3 .circle-btn { order: 3; margin-top: 20px; }
  .sv__item a { grid-template-columns: 40px minmax(0, 1fr) 28px; }
  .voice__stats dd { font-size: 30px; }
  .route { height: auto; }
  .route__svg { display: none; }
  .route__stops { display: flex; flex-direction: column; gap: 26px; border-left: 1px solid var(--ink-30); margin-left: 12px; padding-left: 26px; text-align: left; }
  .route__stops li { position: relative; left: auto; top: auto; transform: none; align-items: flex-start; padding: 0; }
  .route__stops li::after { left: -32px; top: 6px; bottom: auto; margin: 0; }
  .foot__grid { grid-template-columns: 1fr; }
}

/* every image on the site has square corners */
img, figure, .wk__img, .sv__frame, .pr-main__img, .pr-inset, .st-img, .grow__frame, .reasons__media, .fw__house, .fw__cloud, .hero__win, .voice__img { border-radius: 0 !important; }
@media (max-width: 760px) {
  .wf__bar { flex-wrap: wrap; row-gap: 8px; font-size: 10px; }
  .wf__dim { display: none; }
}
.wf__set[data-set="2"] .wf__img--d img { object-position: 50% 92%; } /* keep the house in frame */

/* ---------- tonal typography: each light section's text is a deep, rich version of its own background ---------- */
/* the three tints are re-declared on the sections themselves so they follow that section's ink */
.arch, .grow, .reasons, .journey, .practice, .stagger, .services, .work {
  --ink-60: color-mix(in srgb, var(--ink) 66%, transparent);
  --ink-30: color-mix(in srgb, var(--ink) 32%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
}
.arch, .grow, .reasons, .journey { --ink: #1e3730; }   /* sage  #cfdcd7 → deep sage-green  */
.practice, .stagger { --ink: #3a2a1d; }                 /* cream #f4f0e8 → deep warm umber  */
.services { --ink: #3b2d22; }                           /* warm white #fbf8f2 → deep walnut */
.work { --ink: #3d3022; }                               /* follows each slide's tone (set by script) */

/* ---------- Selected roofs: hover (gentle zoom + tilt) ---------- */
.wf__img { cursor: zoom-in; }
.wf__img img { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.wf__img:hover img, .wf__img:focus-visible img { transform: scale(1.09) rotate(1.2deg); } /* 1.09 keeps the tilted corners covered */
.wf__img:focus-visible { outline: 1px solid var(--clay); outline-offset: 4px; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(20px, 5vw, 80px); background: rgba(24, 18, 14, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; cursor: zoom-out; }
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; cursor: default; }
.lb__img { display: block; max-width: min(1500px, 100%); max-height: calc(100vh - 2 * clamp(20px, 5vw, 80px) - 40px); width: auto; height: auto; object-fit: contain; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
.lb__cap { color: rgba(244, 240, 232, .75); text-align: center; }
.lb__close { position: absolute; top: 24px; right: var(--pad); padding: 10px 16px; border: 1px solid rgba(244, 240, 232, .4); border-radius: 999px; background: none; color: var(--cream); cursor: pointer; transition: background-color .4s, color .4s; }
.lb__close:hover { background: var(--cream); color: var(--ink); }

/* ---------- headings: a richer, slightly more saturated version of each section's ink, so they lift off the
   background without going harsh (body text keeps the softer ink) ---------- */
.arch, .grow, .reasons, .journey { --head: #12402f; }   /* sage  → rich forest green  */
.practice, .stagger { --head: #50290f; }                /* cream → rich burnt umber   */
.services { --head: #4f2b12; }                          /* warm white → rich walnut   */
.work { --head: #50300f; }                              /* per slide, set by script   */
.grow__title, .rs__t, .statement, .st-w:not(.st-w--cu), .sec-title, .sv__item.is-on .sv__t, .journey__title, .route__stops b, .wf__t { color: var(--head); }
.arch__text text { fill: var(--head); }
.sv__t { color: color-mix(in srgb, var(--head) 55%, transparent); } /* inactive service names: readable, still secondary */
.sv__item a:hover .sv__t { color: var(--head); }

/* ---------- every content photo opens in the lightbox — show it ---------- */
main img, .is-zoomable { cursor: pointer; }
.wf__img { cursor: pointer; }
.hero__shade, .fw__bg, .fw__tail, .voice__bg::after { pointer-events: none; }

/* ---------- Selected roofs: in-frame parallax ----------
   the photo is 134% of its frame’s height (17% spare above and below) and drifts at most ±15% of the frame
   with scroll, so it always covers the frame; the frame's own size and position never change. */
.wf__img img { inset: auto; left: 0; top: -17%; width: 100%; height: 134%; translate: 0 var(--py, 0px); }

/* ---------- TriCore: original logo in the badge position (keeps the difference blend) ---------- */
.badge--logo { width: auto; height: auto; top: 26px; }
.badge--logo img { display: block; width: 150px; height: auto; }
@media (max-width: 640px) { .badge--logo { width: auto; height: auto; } .badge--logo img { width: 120px; } }
/* contact scene runs straight into the footer: no mist band between them */
.fw__tail::after { display: none; }
/* journey: 120px between the title and the route */
@media (min-width: 641px) { .route { margin-top: 120px; } }
/* phones: the original "Quality Professionals" pair is longer than the reference stat, so the row may wrap */
@media (max-width: 640px) { .grow__stats { flex-wrap: wrap; row-gap: 10px; } }

/* ---------- In The News: slider with two circle arrows (same fill-on-hover as .circle-btn) ---------- */
.voice__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.voice__nav { display: flex; gap: 10px; }
.voice__btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 1px solid rgba(244, 240, 232, .4); background: none; color: var(--cream); cursor: pointer; overflow: hidden; isolation: isolate; transition: border-color .6s var(--ease); }
.voice__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--clay); transform: scale(0); transition: transform .8s var(--ease); }
.voice__btn:hover { border-color: var(--clay); }
.voice__btn:hover::before { transform: scale(1); }
.voice__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .6s var(--ease); }
.voice__btn[data-dir="1"]:hover svg { transform: translateX(3px); }
.voice__btn[data-dir="-1"]:hover svg { transform: translateX(-3px); }
.voice__slides { display: grid; }
.voice__slide { grid-area: 1 / 1; }
.voice__slide:not(.is-on) { opacity: 0; visibility: hidden; }
@media (max-width: 640px) { .voice__btn { width: 46px; height: 46px; } }
/* hero: overall dark overlay on the banner photo (keeps the reference's top/bottom gradients on top of it) */
.hero__shade { background: linear-gradient(to bottom, rgba(29,22,18,.45), rgba(29,22,18,0) 42%), linear-gradient(to top, rgba(29,22,18,.35), rgba(29,22,18,0) 30%), rgba(20, 14, 11, .42); }
/* hero: title block sits lower on the banner (phones keep their own 15vh from the 640px rule) */
@media (min-width: 641px) { .hero__head { top: 29vh; } }

/* ---------- HERO slider: three stacked banner photos, cross-zoom between them ---------- */
.hero__win .hero__img { position: absolute; inset: 0; opacity: 0; }
.hero__win .hero__img.is-on { opacity: 1; }
.hero__img:not(.is-on) { pointer-events: none; }
.hero__shade { z-index: 3; }

/* journey: background follows the Projects stream's last tone so the two sections flow into each other */
.journey { background: #d5dde3; }

/* =====================================================================
   CONTACT — "site drawing": warm-white sheet on a faint 12-column site grid, charcoal type,
   burnt-orange dimension lines, layered black-and-white site photography and material chips.
   Palette: warm white · charcoal · concrete grey · burnt orange (no blue anywhere).
   ===================================================================== */
.ct { --ink: #1b1a18; --ink-60: rgba(27, 26, 24, .62); --ink-30: rgba(27, 26, 24, .3); --ink-12: rgba(27, 26, 24, .12); --concrete: #8b867e; --paper: #efebe4;
  position: relative; overflow: hidden; padding: clamp(110px, 12vw, 190px) var(--pad) clamp(90px, 10vw, 160px); background: var(--paper); color: var(--ink); }
.ct__grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(27, 26, 24, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(27, 26, 24, .04) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--pad)) / 12) 100%, 100% 120px; background-position: var(--pad) 0, 0 0; }
.ct__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 5vw, 80px); }
.ct__head { grid-column: 1 / span 6; grid-row: 1; align-self: start; }
.ct__label { color: var(--ink-60); }
.ct__title { margin-top: 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 7.6vw, 150px); line-height: .86; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.ct__title em { font-style: normal; text-transform: none; color: var(--clay); font-size: .9em; line-height: .7; }
/* architectural dimension line: tick — label — tick */
.ct__dim { display: flex; align-items: center; gap: 14px; max-width: 520px; margin-top: clamp(28px, 3vw, 44px); color: var(--clay); }
.ct__dim i { position: relative; flex: 1; height: 1px; background: currentColor; transform-origin: 0 50%; }
.ct__dim i:last-child { transform-origin: 100% 50%; }
.ct__dim i::before, .ct__dim i::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor; }
.ct__dim i::before { left: 0; } .ct__dim i::after { right: 0; }
.ct__dim span { white-space: nowrap; color: var(--ink-60); }

.ct__media { position: relative; grid-column: 7 / -1; grid-row: 1 / span 2; min-height: clamp(520px, 52vw, 860px); }
.ct__img { position: absolute; margin: 0; overflow: hidden; background: #d8d3ca; }
.ct__img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.97); scale: 1; transition: scale 1.2s var(--ease), filter 1.2s var(--ease); will-change: transform; }
.ct__img:hover img { scale: 1.06; filter: grayscale(1) contrast(1.12) brightness(1); }
.ct__img--main { right: 0; top: 0; width: 78%; aspect-ratio: 4 / 5; }
.ct__img--detail { left: 0; bottom: 6%; width: 44%; aspect-ratio: 3 / 4; z-index: 2; box-shadow: 0 30px 60px -30px rgba(27, 26, 24, .55); outline: 10px solid var(--paper); }
.ct__chips { position: absolute; left: 4%; top: 6%; z-index: 2; display: flex; gap: 8px; }
.ct__chip { position: relative; width: clamp(54px, 5vw, 84px); aspect-ratio: 1; }
.ct__chip img { filter: grayscale(.2) sepia(.35) saturate(.8) contrast(1.05); }   /* materials keep a hint of their earth tone */
.ct__chip:hover img { filter: grayscale(.1) sepia(.3) saturate(.9) contrast(1.08); }
/* survey crosshair where the two photographs meet */
.ct__mark { position: absolute; left: 41%; top: 54%; z-index: 3; width: 34px; height: 34px; border: 1px solid var(--clay); border-radius: 50%; }
.ct__mark::before, .ct__mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--clay); }
.ct__mark::before { width: 56px; height: 1px; margin: 0 0 0 -28px; }
.ct__mark::after { width: 1px; height: 56px; margin: -28px 0 0 0; }
.ct__fig { position: absolute; right: 0; bottom: 0; color: var(--concrete); }

.ct__info { grid-column: 1 / span 6; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 50px); padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--ink-12); }
.ct__row .label { color: var(--concrete); margin-bottom: 10px; }
.ct__row p:last-child { font-size: 16px; line-height: 1.6; }
.ct__row a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .7s var(--ease), color .4s; }
.ct__row a:hover { color: var(--clay); background-size: 100% 1px; }
.ct__btn { grid-column: 1 / -1; justify-self: start; position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; border-radius: 999px; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; transition: gap .6s var(--ease); }
.ct__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--clay); transform: translateY(101%); transition: transform .7s var(--ease); }
.ct__btn:hover { gap: 18px; } .ct__btn:hover::before { transform: translateY(0); }
.ct__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 1000px) {
  .ct__head, .ct__info { grid-column: 1 / -1; }
  .ct__media { grid-column: 1 / -1; grid-row: 2; min-height: clamp(460px, 90vw, 720px); }
  .ct__info { grid-row: 3; }
  .ct__grid { background-size: calc((100% - 2 * var(--pad)) / 6) 100%, 100% 120px; }
}
@media (max-width: 640px) {
  .ct__img--main { width: 86%; }
  .ct__img--detail { width: 52%; bottom: 4%; outline-width: 6px; }
  .ct__chips { left: 0; top: auto; bottom: -2%; transform: translateY(100%); }
  .ct__media { margin-bottom: 70px; }
  .ct__mark { left: 46%; }
  .ct__fig { bottom: auto; top: -26px; }
  .ct__info { grid-template-columns: 1fr; }
  .ct__dim span { white-space: normal; }
}
/* contact: the script word's swash needs room inside its line mask; chips are warm-toned monochrome (no teal/blue) */
.ct__title em { line-height: 1.1; }
.ct__title .lm:last-child { padding: .04em 0 .16em .14em; margin-left: -.14em; }
.ct__chip img, .ct__chip:hover img { filter: grayscale(1) sepia(.55) saturate(1.1) contrast(1.05); }

/* ---------- HERO: 100px outline cursor — PREV on the left half, NEXT on the right (fine pointers only) ---------- */
.hero__cursor { position: fixed; left: 0; top: 0; z-index: 80; display: grid; place-items: center; width: 100px; height: 100px; margin: -50px 0 0 -50px; color: #fff; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
/* the ring lives on a pseudo-element so its pop-in never mixes with the follow transform GSAP writes on the box */
.hero__cursor::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: transparent; transform: scale(calc(var(--cs) * var(--pop))); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
/* ring size: 60px at rest (--cs .6 of the 100px box), easing up to 100px while the page scrolls down and back
   on the way up; --pop is the small grow-in when the cursor appears */
.hero__cursor { --cs: .6; --pop: .82; }
.hero__cursor.is-on { opacity: 1; --pop: 1; }
.hero__cursor.is-big { --cs: 1; }
.hero__cursor-t { font-size: 10px; letter-spacing: .18em; margin-right: -.18em; }
@media (hover: hover) and (pointer: fine) { .hero.is-nav, .hero.is-nav .hero__img { cursor: none; } }
/* header is not sticky: logo, links and the Menu button sit at the top of the page and scroll away with it
   (the open menu sheet itself stays a fixed full-screen overlay) */
.badge, .links, .menu-btn { position: absolute; }

/* header: logo and links in solid white (no difference blend — the header now only ever sits on the dark banner) */
.badge, .links, .menu-btn { mix-blend-mode: normal; color: #fff; }
/* banner side labels sit out towards the edges */
.hero__side--l { left: 5.7%; } .hero__side--r { right: 4.2%; }
/* 15px (visible) between CONSTRUCTION and the script line */
.hero__script { margin-top: 7px; line-height: 1; }   /* 7px box margin = 15px of visible space between the ink of the two lines */
/* Why Choose Us slides up over the pinned banner photo during the second half of the hero pin (150vh × .5) */
.grow { margin-top: -75vh; }

/* ---------- ABOUT: "How we work" — three numbered steps fill the band beside the tile inset ---------- */
.pr-steps { grid-column: 1 / span 7; grid-row: 2; align-self: center; margin-top: clamp(40px, 6vw, 90px); }
.pr-steps > .label { color: var(--ink-60); }
.pr-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); margin-top: clamp(22px, 2.4vw, 34px); }
.pr-step { position: relative; padding-top: 22px; }
.pr-step__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-12); transform-origin: 0 50%; }
.pr-step__rule::after { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--clay); }
.pr-step__n { display: block; font-family: var(--wide); font-stretch: 125%; font-size: 11px; letter-spacing: .12em; color: var(--clay); }
.pr-step__t { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.2vw, 56px); line-height: .9; text-transform: uppercase; color: var(--head); }
.pr-step__d { margin-top: 14px; max-width: 30ch; color: var(--ink-60); font-size: 15px; line-height: 1.6; }
.pr-inset { grid-row: 2; }
@media (max-width: 1000px) {
  .pr-steps { grid-column: 1 / -1; grid-row: auto; }
  .pr-inset { grid-row: auto; }
}
@media (max-width: 640px) { .pr-steps__list { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Projects stream: the bracket bar sits on a solid strip in the stage's own tone so it never runs over the photos ---------- */
.wf { background: inherit; }
.wf__bar { bottom: 0; padding-top: 14px; padding-bottom: calc(14px + 2.2%); background: inherit; mix-blend-mode: normal; }

/* ---------- Journey: labels sit on a knock-out panel in the section tone — 16px clear of the route line ---------- */
.route__stops li { align-items: stretch; gap: 0; text-align: center; }
.route__stops b, .route__stops span { display: block; background: #d5dde3; padding-left: 16px; padding-right: 16px; }
.route__stops b { padding-top: 16px; }
.route__stops span { padding-top: 6px; padding-bottom: 16px; }
@media (max-width: 640px) { .route__stops b, .route__stops span { padding-left: 0; padding-right: 0; background: none; } .route__stops b { padding-top: 0; } .route__stops span { padding-bottom: 0; } }

/* ---------- Contact: no background grid lines ---------- */
.ct__grid { display: none; }
@media (max-width: 640px) { .route__stops li { text-align: left; align-items: flex-start; } }

/* contact photos in full colour (no grayscale / sepia); the site photo is framed on its walls and treeline */
.ct__img img, .ct__img:hover img, .ct__chip img, .ct__chip:hover img { filter: none; }
.ct__img--main img { object-position: 100% 50%; }   /* right edge of the site photo, away from the blue tarps */

/* ---------- image copy deterrents: photos can't be dragged out or long-press saved on iOS (clicks still work) ---------- */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* footer bar: the credit sits on the exact centre of the page (equal side columns), copyright left, Home right */
.foot__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; column-gap: 24px; }
.foot__bar > :nth-child(1) { justify-self: start; }
.foot__bar > :nth-child(2) { justify-self: center; text-align: center; }
.foot__bar > :nth-child(3) { justify-self: end; }
@media (max-width: 640px) {
  .foot__bar { grid-template-columns: 1fr; row-gap: 10px; text-align: center; }
  .foot__bar > * { justify-self: center !important; }
}

/* =====================================================================
   SECTION RHYTHM — one spacing token for every gap between sections:
   150px on screens ≥ 1364px, scaling down to 80px on phones (journey top: 200px → 100px)
   ===================================================================== */
:root { --sec: clamp(80px, 11vw, 150px); --sec-xl: clamp(100px, 14.6vw, 200px); }
.grow__pin { padding-top: var(--sec); }                 /* banner edge → (01) Why Choose Us */
.practice { padding-top: var(--sec); }                  /* reasons → About Us photo */
.materials { margin-top: var(--sec); }                  /* tile inset → scrolling band */
.stagger { padding-top: var(--sec); padding-bottom: var(--sec); }   /* band → (03) label; BUILD row → end */
.services { padding-top: var(--sec); padding-bottom: var(--sec); }  /* section top → first photo; caption → end */
.sv { margin-top: 0; }
.journey { padding-top: var(--sec-xl); }                /* Projects bar → journey title */
/* journey bottom is measured from the lowest route dot (--jlow = share of the route below it, set by main.js) */
.journey { --jlow: .28; padding-bottom: calc(var(--sec) - (var(--jlow) * clamp(220px, 22vw, 320px) - 6px)); }
.ct { padding-top: var(--sec); }                        /* In The News → (08) Contact Us */
@media (max-width: 1000px) { .grow__pin { padding-top: var(--sec); } }
@media (max-width: 640px) { .journey { padding-bottom: var(--sec); } }

/* =====================================================================
   RESPONSIVE REFINEMENTS (tablet + phone)
   ===================================================================== */
/* banner side labels collide with the title below 1100px */
@media (max-width: 1100px) { .hero__side { display: none; } }

/* route labels never wrap; portrait tablets and phones use the vertical list (same as the reference's phone layout) */
.route__stops b { white-space: nowrap; }
@media (max-width: 860px) {
  .route { height: auto; margin-top: clamp(60px, 9vw, 100px); }
  .route__svg { display: none; }
  .route__stops { display: flex; flex-direction: column; gap: 26px; border-left: 1px solid var(--ink-30); margin-left: 12px; padding-left: 26px; text-align: left; }
  .route__stops li { position: relative; left: auto; top: auto; transform: none; align-items: flex-start; text-align: left; padding: 0; }
  .route__stops li::after { left: -32px; top: 6px; bottom: auto; margin: 0; }
  .route__stops b, .route__stops span { padding-left: 0; padding-right: 0; background: none; }
  .route__stops b { padding-top: 0; } .route__stops span { padding-bottom: 0; }
  .journey { padding-bottom: var(--sec); }
  .journey .route { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* About numbers: labels stay on one line on phones so the three figures align */
@media (max-width: 640px) {
  .pr-nums dt { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
}

/* Projects stream on portrait screens: the 1920-wide composition shrinks to thumbnails on a tall screen, so
   portrait gets its own arrangement of the same six frames, sized to the screen around a larger title */
@media (max-aspect-ratio: 4/5) {
  .wf__t { font-size: 10vw; }
  .wf__img { left: var(--mx); top: calc(50% + var(--my)); width: var(--mw); height: var(--mh); }
  /* two bands, never crossing the title (±7vh) or the bracket bar (below +43vh): widths in vw, heights in vh */
  .wf__img--a { --mx: 28vw; --my: -40vh; --mw: 44vw; --mh: 14vh; }
  .wf__img--e { --mx: 78vw; --my: -36vh; --mw: 18vw; --mh: 12vh; }
  .wf__img--b { --mx: 4vw;  --my: -22vh; --mw: 32vw; --mh: 12vh; }
  .wf__img--f { --mx: 72vw; --my: 10vh;  --mw: 22vw; --mh: 18vh; }
  .wf__img--d { --mx: 14vw; --my: 14vh;  --mw: 52vw; --mh: 16vh; }
  .wf__img--c { --mx: 4vw;  --my: 32vh;  --mw: 16vw; --mh: 8vh; }
  .wf__titles { top: 50%; }
}
/* the bracket bar under the Projects stream uses its compact wrapped form on tablets too */
@media (max-width: 1000px) {
  .wf__bar { flex-wrap: wrap; row-gap: 8px; font-size: 10px; }
  .wf__dim { display: none; }
  .wf__bar span, .wf__bar a { white-space: nowrap; }
}

/* Why Choose Us: no progress line under the photo; 120px from the stats row to the next section (scales on smaller screens) */
.grow__rule { display: none; }
.grow__stats { margin-bottom: 0; }   /* no default list margin: the stats row and the photo end on one line */
.grow__pin { padding-bottom: clamp(64px, 8.8vw, 120px); }   /* 120px from that line to the next section */

/* Contact on phones: the figure caption stays on one line and sits exactly 20px above the photos */
@media (max-width: 640px) {
  .ct__media { margin-top: 24px; }
  .ct__fig { top: calc(-20px - 1.5em); bottom: auto; font-size: 8.5px; letter-spacing: .06em; line-height: 1.5; white-space: nowrap; }
}

/* Banner title on phones: sized to the screen so CONSTRUCTION never clips, and set lower on the photo (as on desktop) */
@media (max-width: 640px) {
  .hero__head { top: 30vh; padding: 0 12px; }
  .hero__title { font-size: 13.6vw; }
  .hero__script { font-size: 9.6vw; }
}

/* phones held sideways (short landscape screens): the pinned Why Choose Us panel goes side by side, as on desktop,
   with type sized to the screen height so the title, text, stats and photo all fit in one view */
@media (orientation: landscape) and (max-height: 520px) {
  .grow__pin { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: none; gap: 28px; padding-top: 64px; padding-bottom: 22px; }
  .grow__title { font-size: clamp(30px, 10.5vh, 56px); margin-top: 8px; }
  .grow__script { display: none; }
  .grow__text { margin-top: auto; font-size: 12px; line-height: 1.45; }
  .grow__stats { margin-top: 10px; padding-top: 8px; gap: 16px; }
  .grow__stats dd { font-size: clamp(16px, 5vh, 22px); }
  .grow__meta { margin-bottom: 6px; }
}
/* phones: tighter spacing between the four reasons (was 70px each side of the divider) */
@media (max-width: 640px) { .rs { padding: 36px 0; } .rs__t { margin-top: 18px; } .rs__d { margin-top: 18px; } }
/* reason titles: room inside each line's reveal mask for the Q's tail */
.rs__t .lm { padding-bottom: .14em; margin-bottom: -.08em; }

/* mobile menu: calmer link size; the phone / email line wraps instead of running to the edge */
.sheet nav a { font-size: clamp(28px, 7.6vw, 44px); padding: 10px 0; }
.sheet .wide { line-height: 1.8; }
.sheet__mail { text-transform: none; letter-spacing: .04em; font-size: 12px; white-space: nowrap; }   /* lowercase email fits a 320px phone on one line */

/* =====================================================================
   PROJECTS on phones — editorial cards instead of the floating composition.
   The section keeps its scroll-driven tone (set by main.js), so the background still
   shifts clay → sage → heather → mist as you move through the four cards.
   ===================================================================== */
.wfm { display: none; }
@media (max-width: 640px) {
  .work { height: auto !important; padding: var(--sec) var(--pad); }
  .wf { display: none; }
  .wfm { display: block; }
  .wfm__label { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-60); font-size: 10px; }
  .wfm__label span { color: var(--ink-30); }
  .wfm__card { margin-top: 48px; }
  .wfm__card + .wfm__card { margin-top: 72px; }
  .wfm__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--ink-12); }
  .wfm__n { color: var(--clay); font-size: 10px; }
  .wfm__t { overflow: hidden; padding-bottom: .06em; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 11vw, 48px); line-height: .95; letter-spacing: -.01em; color: var(--head); }
  .wfm__t > span { display: inline-block; }
  .wfm__img { position: relative; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .wfm__img img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }
  .wfm__img--lead { aspect-ratio: 4 / 3; }
  .wfm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .wfm__grid .wfm__img { aspect-ratio: 1; }
  .wfm__grid .wfm__img--tall { grid-row: span 2; aspect-ratio: auto; }
  .wfm__cta { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--ink-12); font-size: 11px; }
}
/* phones: the Contact Us circle sits on the page centre under the BUILD row */
@media (max-width: 640px) { .st-row--3 .circle-btn { margin-left: auto; margin-right: auto; } }

/* phones: the journey becomes a centred timeline — one line down the middle, each stop's dot centred on it with
   its label beneath (the label panels knock the line out so text never sits on it) */
@media (max-width: 860px) {
  .route__stops { position: relative; align-items: center; gap: 0; border-left: 0; margin-left: 0; padding-left: 0; text-align: center; }
  .route__stops::before { content: ""; position: absolute; left: 50%; top: 22px; bottom: 22px; width: 1px; margin-left: -.5px; background: var(--ink-30); }
  .route__stops li { align-items: center; text-align: center; padding: 18px 0; }
  .route__stops li::after { position: relative; left: auto; top: auto; bottom: auto; order: -1; margin: 0 0 14px; }
  .route__stops b, .route__stops span { background: #d5dde3; padding-left: 14px; padding-right: 14px; }
  .route__stops b { padding-top: 4px; }
  .route__stops span { padding-top: 6px; padding-bottom: 4px; }
}

/* ≤1100px: the preloader's side words move out to the screen edges, clear of the title */
@media (max-width: 1100px) { .pre__side--l { left: var(--pad); } .pre__side--r { right: var(--pad); } }
/* ≤1000px: the About photo and the tile inset run the full content width */
@media (max-width: 1000px) {
  .pr-main, .pr-inset { grid-column: 1 / -1; }
  .pr-inset { aspect-ratio: 16 / 10; }
}

/* ≤1000px: the four reasons are centred, with a tighter gap around each divider (phones keep 36px from above) */
@media (max-width: 1000px) {
  .rs { align-items: center; text-align: center; }
  .rs__d { margin-left: auto; margin-right: auto; }
}
@media (min-width: 641px) and (max-width: 1000px) { .rs { padding: 40px 0; } }

/* tablets: the banner title block sits on the vertical middle of the photo — top is offset by half the block's
   height (two title lines at line-height .86 + the script line), since GSAP owns the element's transforms */
@media (min-width: 641px) and (max-width: 1000px) { .hero__head { top: calc(50% - (1.72 * clamp(64px, 9.4vw, 168px) + 7px + clamp(40px, 4.6vw, 82px)) / 2); } }

/* mobile menu: the logo stays on screen inside the open menu, where the page logo sits */
.sheet__logo { position: absolute; left: var(--pad); top: 26px; display: block; }
.sheet__logo img { width: 150px; height: auto; }
@media (max-width: 640px) { .sheet__logo img { width: 120px; } }

/* phones: "How we work" is centred — label, numbers, titles, text and the orange accent on each rule */
@media (max-width: 640px) {
  .pr-steps { text-align: center; }
  .pr-step__rule::after { left: 50%; margin-left: -17px; }
  .pr-step__d { margin-left: auto; margin-right: auto; }
}

/* phones: smaller reason titles; Why Choose Us copy centred; banner title on the photo's vertical middle */
@media (max-width: 640px) {
  .rs__t { font-size: clamp(34px, 10vw, 44px); }
  .grow__copy { align-items: center; text-align: center; }
  .grow__title .gl, .gl:nth-child(2) { padding-left: 0; }
  .grow__text { margin-left: auto; margin-right: auto; }
  .grow__stats { justify-content: center; }
  .grow__stats > div { text-align: center; }
  .hero__head { top: calc(50% - (1.72 * 13.6vw + 7px + 9.6vw) / 2); }
}
/* ≤1000px: the reasons photo stack sits inside the page margins, like the Why Choose Us photo above it */
@media (max-width: 1000px) { .reasons__media { margin: 0 var(--pad); } }
/* centred timeline on tablets: the list itself spans the column */
@media (max-width: 860px) { .journey .route { max-width: none; } }
/* ≤1000px: the In The News photo sits inside the page margins on the section's dark ground */
@media (max-width: 1000px) { .voice__img { margin: 0 var(--pad); } }
/* Contact Us button in the footer's colour */
.ct__btn { background: var(--umber); }
/* tablets: the contact figure caption would sit over the photos, so it is hidden */
@media (min-width: 641px) and (max-width: 1000px) { .ct__fig { display: none; } }
/* tablets (641–860px): the five stops as a centred 3 + 2 grid, dot above each label, no connecting line */
@media (min-width: 641px) and (max-width: 860px) {
  .route__stops { flex-direction: row; flex-wrap: wrap; justify-content: center; row-gap: 48px; column-gap: 0; }
  .route__stops::before { display: none; }
  .route__stops li { flex: 0 0 33.333%; padding: 0; }
  .route__stops b, .route__stops span { background: none; }
}
/* phones: About Us copy centred; Why Choose Us back to left-aligned (with its original indent on "Choose") */
@media (max-width: 640px) {
  .pr-copy { text-align: center; }
  .pr-p { margin-left: auto; margin-right: auto; }
  .pr-sig { justify-content: center; }
  .grow__copy { align-items: stretch; text-align: left; }
  .grow__title .gl:nth-child(2) { padding-left: .6em; }
  .grow__text { margin-left: 0; margin-right: 0; }
  .grow__stats { justify-content: flex-start; }
  .grow__stats > div { text-align: left; }
}
/* banner button label always on one line */
.hero__cta { white-space: nowrap; }
/* phone project cards: titles in capitals, like the site's other serif headings */
.wfm__t { text-transform: uppercase; }
/* ≤1000px: 20px of the dark ground above the In The News photo */
@media (max-width: 1000px) { .voice__img { margin-top: 20px; } }
/* footer: three columns now that In The News is gone */
.foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .foot__grid { grid-template-columns: 1fr; } }
/* phones: 80px from the Projects links to the journey title, and 80px from the last stop to the section end */
@media (max-width: 640px) {
  .work { padding-bottom: 0; }
  .journey { padding-top: 88px; padding-bottom: 55px; }   /* measured: = 80px of visible space above the title and below the last label */
}
/* tablets (stacked Why Choose Us): the title scales with the screen height so the photo always keeps a real share of it */
@media (min-width: 641px) and (max-width: 1000px) {
  .grow__title { font-size: min(clamp(46px, 10vw, 96px), 7.6vh); }
  .grow__frame { min-height: 35vh; }
}
@media (min-width: 641px) and (max-width: 1000px) { .grow__pin { padding-top: min(var(--sec), 11vh); } }
/* tablets: 25px from the Why Choose Us photo to the reasons photo below */
@media (min-width: 641px) and (max-width: 1000px) { .grow__pin { padding-bottom: 25px; } }
/* curved journey route: the line is drawn unbroken (no knock-out panels behind the labels) */
@media (min-width: 861px) { .route__stops b, .route__stops span { background: none; } }
/* curved route: a thin stem from each lifted label down to its dot */
@media (min-width: 861px) {
  .route__stops li::before { content: ""; position: absolute; left: 50%; bottom: 6px; width: 1px; height: max(0px, calc(var(--stem, 0px))); background: var(--ink-30); }
}
/* gallery titles in capitals, like the site's other serif headings */
.wf__t { text-transform: uppercase; }
/* capitals run wider than title case: sized so the longest title fits between the side photos */
.wf__t { font-size: 6vw; letter-spacing: -.01em; }
@media (max-aspect-ratio: 4/5) { .wf__t { font-size: 8.4vw; } }
/* mobile menu: links start just under the logo bar; the phone / email line sits at the bottom */
.sheet { justify-content: flex-start; padding-top: 120px; }
.sheet__contact { margin-top: auto; }
/* mobile menu on tablets (641–1000px): smaller link size; phones keep theirs */
@media (min-width: 641px) and (max-width: 1000px) { .sheet nav a { font-size: clamp(26px, 4vw, 34px); padding: 9px 0; } }
/* mobile menu on tablets: links centred vertically between the logo bar and the contact line */
@media (min-width: 641px) and (max-width: 1000px) { .sheet { padding-top: 160px; } .sheet nav { margin: 0; } .sheet nav a { padding: 18px 0; } .sheet__contact { margin-top: auto; } }
/* open menu: a divider under the logo bar, the same tone as the lines between the links */
.sheet::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 96px; height: 1px; background: rgba(244,240,232,.15); }
/* open menu on phones: links a little lower, with roomier rows */
@media (max-width: 640px) { .sheet { padding-top: 136px; } .sheet nav a { padding: 16px 0; } }