/* HPA Construction (HPAC) website, 23 Oct 2026.
   The brand's own system only: plum #563D40, deep plum #45292B, mauve #7A7180, cream #F3EEE7, ice #F5FBFE.
   Kumbh Sans for headlines and body, Oxygen Mono for uppercase labels and data, the hpac mark. */

@font-face { font-family: "Kumbh Sans"; src: url(../assets/fonts/kumbh-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Oxygen Mono"; src: url(../assets/fonts/oxygen-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --plum: #563D40; --deep: #45292B; --mauve: #7A7180; --cream: #F3EEE7; --ice: #F5FBFE;
  --ink: var(--plum);
  --ink-2: rgba(86, 61, 64, .76);
  --line: rgba(86, 61, 64, .18);
  --tint: rgba(86, 61, 64, .07);
  --on-dark-2: rgba(243, 238, 231, .76);
  --line-dark: rgba(243, 238, 231, .2);

  --mono: "Oxygen Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 4.4vw, 72px);
  --hd-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --fs-display: clamp(2.6rem, 1rem + 5vw, 6.9rem);
  --fs-h2: clamp(2rem, 1rem + 3vw, 4.5rem);
  --fs-h3: clamp(1.3rem, 1rem + .9vw, 2rem);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.16rem);
  --fs-label: .72rem;
  --pad-y: clamp(96px, 15vh, 176px);
  --snd-gap: 0px;
}
/* the HPAD site adds a small sound switch in the bottom-left corner; keep everything that sits there clear of it */
html:has(.hpa-snd) { --snd-gap: 40px; }
@media (max-width: 699px) { :root { --hd-h: 64px; --fs-label: .68rem; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); color: var(--ink); }
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: var(--fs-body); line-height: 1.55; background: var(--cream); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
p, h1, h2, h3, figure, ol, ul, fieldset { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--plum); color: var(--cream); }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gut); }
.label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.kicker { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--plum); color: var(--cream); padding: 10px 14px; }
.skip:focus { left: 8px; }

.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; font-weight: 380; }
.h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; font-weight: 400; }
.lede { font-size: clamp(1.06rem, .98rem + .42vw, 1.32rem); line-height: 1.5; max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
.body { max-width: 34em; color: var(--ink-2); text-wrap: pretty; }

/* dark chapters */
.build, .promise, .ft { color: var(--cream); }
.build .kicker, .promise .kicker, .build .body { color: var(--on-dark-2); }

/* headings that rise line by line */
.js:not(.static):not(.reduce) [data-lines]:not(.is-split) { visibility: hidden; }
.js [data-lines] .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.js [data-lines] .line > span { display: inline-block; }
.js:not(.static):not(.reduce) [data-lines] .line > span { transform: translateY(108%); transition: transform 1.15s var(--ease); }
.js:not(.static):not(.reduce) [data-lines].is-in .line > span { transform: none; }
.js [data-lines] .line:nth-child(2) > span { transition-delay: .08s; }
.js [data-lines] .line:nth-child(3) > span { transition-delay: .16s; }
.js [data-lines] .line:nth-child(n+4) > span { transition-delay: .22s; }

/* blocks that rise, photographs that are uncovered from the ground up */
.js:not(.static):not(.reduce) [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js:not(.static):not(.reduce) [data-rise].is-in { opacity: 1; transform: none; }
.js:not(.static):not(.reduce) [data-reveal] .photo-box { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-io); }
.js:not(.static):not(.reduce) [data-reveal] .photo-box img { transform: scale(1.12); transition: transform 2.2s var(--ease); }
.js:not(.static):not(.reduce) [data-reveal].is-in .photo-box { clip-path: inset(0 0 0 0); }
.js:not(.static):not(.reduce) [data-reveal].is-in .photo-box img { transform: none; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; line-height: 1.2; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-fill { background: var(--btn-bg, var(--plum)); color: var(--btn-ink, var(--cream)); border: 1px solid var(--btn-bg, var(--plum)); }
.btn-fill:hover { background: var(--btn-hover, var(--deep)); border-color: var(--btn-hover, var(--deep)); }
.btn-line { border: 1px solid currentColor; }
.btn-line:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ------------------------------------------------------------------ registration corners, from the HPAC book */
.corners { position: absolute; inset: -14px; pointer-events: none; }
.corners i { position: absolute; width: 18px; height: 18px; border: 0 solid currentColor; opacity: .55; }
.corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ------------------------------------------------------------------ header: the mark, three chapters, back to HPAD, Enquire */
.hd { --hd-ink: var(--plum); --hd-paper: var(--cream); --hd-bg: rgba(243, 238, 231, .95); position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: var(--gut); color: var(--hd-ink); transition: color .5s var(--ease); }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hd-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .45s var(--ease), background-color .45s var(--ease); }
html.scrolled .hd::before { opacity: 1; }
html[data-hd="ice"] .hd { --hd-bg: rgba(245, 251, 254, .95); }
html[data-hd="deep"] .hd, html[data-hd="plum"] .hd, html[data-hd="photo"] .hd { --hd-ink: var(--cream); --hd-paper: var(--deep); }
html[data-hd="deep"] .hd { --hd-bg: rgba(69, 41, 43, .95); }
html[data-hd="plum"] .hd { --hd-bg: rgba(86, 61, 64, .95); }
html[data-hd="photo"] .hd::before { opacity: 0; }
html.sheet-open .hd { visibility: hidden; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.hd-mark { display: block; width: 96px; flex: none; }
.hd-mark svg { width: 100%; height: auto; }
.hd-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.hd-link { position: relative; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: 8px 0; line-height: 1.5; }
.hd-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.hd-link:hover::after { transform: scaleX(1); transform-origin: left; }
.hd-back { display: inline-flex; align-items: center; gap: 9px; padding-left: clamp(18px, 2.2vw, 34px); border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.hd-back svg { width: 20px; height: 10px; transition: transform .45s var(--ease); }
.hd-back:hover svg { transform: translateX(-3px); }
.hd-back::after { left: calc(clamp(18px, 2.2vw, 34px) + 29px); }
.hd-cta { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; min-height: 38px; padding: 0 18px; border: 1px solid currentColor; border-radius: 999px; transition: background-color .35s var(--ease), color .35s var(--ease); }
.hd-cta:hover { background: var(--hd-ink); color: var(--hd-paper); }
@media (max-width: 899px) { .hd-sec { display: none; } .hd-back { border-left: 0; padding-left: 0; } .hd-back::after { left: 29px; } }

/* ------------------------------------------------------------------ hero: on site, then handed over */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--cream); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 5vw, 96px); padding: calc(var(--hd-h) + 10px) var(--gut) clamp(18px, 3vh, 32px); }
.hero-copy { display: grid; justify-items: start; gap: clamp(18px, 2.6vh, 28px); padding-bottom: 6vh; }
.hero-copy .display { max-width: 9.2em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink-2); }
.hero-stats span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 22px; border-radius: 50%; background: currentColor; vertical-align: .18em; opacity: .7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.js:not(.static):not(.reduce):not(.hero-done) .hero-fade { opacity: 0; transform: translateY(16px); }

.hero-art { --fh: calc(100svh - var(--hd-h) - 10px - clamp(18px, 3vh, 32px) - 58px); }
.ba { position: relative; display: grid; gap: 16px; justify-items: center; }
.ba-box { position: relative; width: min(calc(var(--fh) * .8), 44vw); aspect-ratio: 4 / 5; }
.ba-frame { position: absolute; inset: 0; overflow: hidden; background: var(--tint); }
.ba-site, .ba-home { position: absolute; inset: 0; }
.ba-site img, .ba-home img { width: 100%; height: 100%; object-fit: cover; }
.ba-site img { object-position: 50% 42%; }
.ba-home img { object-position: 50% 62%; }
.ba-edge { position: absolute; left: 0; right: 0; top: 100%; height: 2px; margin-top: -1px; background: var(--cream); box-shadow: 0 0 18px rgba(43, 26, 28, .45); opacity: 0; z-index: 3; pointer-events: none; }
.js:not(.static):not(.reduce):not(.hero-done) .ba-frame, .js:not(.static):not(.reduce):not(.hero-done) .ba-home { clip-path: inset(100% 0% 0% 0%); }
.ba .corners { color: var(--plum); }
.ba-toggle { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.ba-toggle button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 8px 2px; opacity: .42; transition: opacity .4s var(--ease); }
.ba-toggle button[aria-pressed="true"] { opacity: 1; }
.ba-toggle button:hover { opacity: .85; }
.ba-toggle > i { width: 34px; height: 1px; background: currentColor; opacity: .35; }

.hero-down { position: absolute; left: var(--gut); bottom: calc(clamp(18px, 3vh, 32px) + var(--snd-gap)); display: flex; align-items: center; gap: 14px; color: var(--ink-2); }
.hero-down i { position: relative; width: 46px; height: 1px; background: color-mix(in srgb, currentColor 30%, transparent); overflow: hidden; }
.hero-down i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateX(-100%); animation: run 2.4s var(--ease-io) infinite; }
@keyframes run { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 20px; padding-top: calc(var(--hd-h) + 18px); padding-bottom: 44px; }
  .hero-copy { display: contents; }
  .hero-copy > .kicker { order: 1; }
  .hero-copy > .display { order: 2; }
  .hero-art { order: 3; --fh: 64svh; }
  .hero-copy > .lede { order: 4; margin-top: 8px; }
  .hero-copy > .hero-stats { order: 5; }
  .hero-copy > .hero-cta { order: 6; }
  .ba-box { width: min(100%, calc(var(--fh) * .8)); }
  .hero-down { display: none; }
}
@media (max-width: 899px) and (min-width: 600px) { .ba-box { width: min(100%, 520px); } }

/* ------------------------------------------------------------------ 01 one roof */
.roof { background: var(--ice); padding: var(--pad-y) 0; }
.roof-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; }
.roof-text { position: sticky; top: calc(var(--hd-h) + 8vh); display: grid; gap: 28px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 12px; }
.stats b { display: block; font-weight: 300; font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.5rem); letter-spacing: -.045em; line-height: 1; }
.stats .label { display: block; margin-top: 12px; color: var(--ink-2); }
.roof-photos { display: grid; gap: clamp(48px, 9vh, 110px); padding-top: 6vh; }
.photo { position: relative; }
.photo-box { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint); }
.photo-box img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { margin-top: 14px; color: var(--ink-2); }
.roof-a { width: 76%; }
.roof-b { width: 76%; justify-self: end; }
.roof-a img { object-position: 50% 60%; }
.roof-b img { object-position: 50% 50%; }
@media (max-width: 899px) {
  .roof-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .roof-text { position: static; }
  .roof-photos { padding-top: 0; gap: 36px; }
  .roof-a, .roof-b { width: 88%; }
}
@media (max-width: 599px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .stats li { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .stats b { font-size: 2.1rem; }
  .stats .label { margin-top: 0; }
}

/* ------------------------------------------------------------------ 02 the build */
.build { background: var(--deep); }
.build-intro { display: grid; gap: 26px; padding-top: var(--pad-y); padding-bottom: clamp(56px, 9vh, 104px); }
.build-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--deep); }
.stage { position: absolute; inset: 0; }
.stage-img { position: absolute; inset: 0; overflow: hidden; }
.stage-img img { width: 100%; height: 100%; object-fit: cover; }
.stage-img[data-i="0"] img { object-position: 62% 60%; }
.stage-img[data-i="1"] img { object-position: 42% 55%; }
.stage-img[data-i="2"] img { object-position: 48% 62%; }
.stage-img[data-i="3"] img { object-position: 50% 55%; }
.stage-img[data-i="4"] img { object-position: 50% 45%; }
.js:not(.static):not(.reduce) .stage-img:not([data-i="0"]) { clip-path: inset(100% 0% 0% 0%); }
.stage-edge { position: absolute; left: 0; right: 0; top: 100%; height: 2px; margin-top: -1px; background: var(--cream); box-shadow: 0 0 18px rgba(43, 26, 28, .5); opacity: 0; z-index: 8; pointer-events: none; }
.stage-shade { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(64% 52% at 0% 100%, rgba(43, 26, 28, .5) 0%, rgba(43, 26, 28, 0) 72%), linear-gradient(to top, rgba(43, 26, 28, .84) 0%, rgba(43, 26, 28, .42) 30%, rgba(43, 26, 28, 0) 56%), linear-gradient(to bottom, rgba(43, 26, 28, .58) 0%, rgba(43, 26, 28, 0) 24%); }
.stage-top { position: absolute; z-index: 10; top: calc(var(--hd-h) + 6px); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; gap: 20px; color: var(--on-dark-2); }
.stage-count b { font-weight: 400; color: var(--cream); }
.stage-text { position: absolute; z-index: 10; left: var(--gut); right: var(--gut); bottom: calc(clamp(22px, 4vh, 40px) + var(--snd-gap) + 34px + clamp(22px, 4vh, 44px)); height: 0; }
.stage-copy { position: absolute; left: 0; bottom: 0; width: min(100%, 40rem); display: grid; gap: 10px; pointer-events: none; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.stage-copy.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stage-copy .label { color: var(--on-dark-2); }
.stage-title { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.03em; }
.stage-line { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); line-height: 1.45; color: var(--on-dark-2); max-width: 26em; text-wrap: balance; }
.rail { position: absolute; z-index: 10; left: var(--gut); right: var(--gut); bottom: calc(clamp(22px, 4vh, 40px) + var(--snd-gap)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rail li { position: relative; height: 34px; border: 1px solid var(--line-dark); overflow: hidden; }
.rail li span { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-dark-2); white-space: nowrap; transition: color .4s var(--ease); }
.rail li i { position: absolute; inset: 0; background: rgba(243, 238, 231, .24); transform: scaleX(var(--f, 0)); transform-origin: left center; }
.rail li.is-on span, .rail li.is-done span { color: var(--cream); }
@media (max-width: 699px) {
  .rail li { height: 30px; }
  .rail li span { left: 8px; font-size: .58rem; letter-spacing: .1em; }
  .stage-img[data-i="0"] img { object-position: 74% 60%; }
  .stage-img[data-i="1"] img { object-position: 30% 55%; }
  .stage-img[data-i="2"] img { object-position: 42% 62%; }
}
@media (max-width: 420px) { .rail li span { font-size: 0; } .rail li span::before { content: attr(data-n); font-size: .62rem; letter-spacing: .12em; } }

/* the build without a pin: reduced motion, or no GSAP */
.no-pin.build-pin { height: auto; overflow: visible; padding: 0 var(--gut) var(--pad-y); }
.no-pin .stage { position: static; display: grid; gap: 18px; }
.no-pin .stage-img { position: relative; inset: auto; aspect-ratio: 16 / 10; clip-path: none !important; }
.no-pin .stage-text { display: contents; }
.no-pin .stage-copy { position: static; opacity: 1; transform: none; margin-bottom: 48px; pointer-events: auto; }
.no-pin .stage-edge, .no-pin .stage-shade, .no-pin .stage-top, .no-pin .rail { display: none; }
.no-pin .stage-img[data-i="0"] { order: 0; } .no-pin .stage-copy[data-i="0"] { order: 1; }
.no-pin .stage-img[data-i="1"] { order: 2; } .no-pin .stage-copy[data-i="1"] { order: 3; }
.no-pin .stage-img[data-i="2"] { order: 4; } .no-pin .stage-copy[data-i="2"] { order: 5; }
.no-pin .stage-img[data-i="3"] { order: 6; } .no-pin .stage-copy[data-i="3"] { order: 7; }
.no-pin .stage-img[data-i="4"] { order: 8; } .no-pin .stage-copy[data-i="4"] { order: 9; }

/* ------------------------------------------------------------------ 03 the promise */
.promise { background: var(--plum); padding: var(--pad-y) 0; }
.promise .wrap { display: grid; gap: 26px; }
.fifteen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(28px, 5vw, 104px); row-gap: 28px; margin-top: clamp(36px, 7vh, 84px); padding-top: clamp(28px, 5vh, 56px); border-top: 1px solid var(--line-dark); }
.fifteen-num { display: flex; align-items: flex-start; font-weight: 200; font-size: clamp(8rem, 3.6rem + 15vw, 19.5rem); line-height: .8; letter-spacing: -.065em; margin-left: -.04em; }
.fifteen-num i { font-style: normal; font-size: .34em; line-height: 1; margin: .1em 0 0 .08em; color: var(--on-dark-2); letter-spacing: 0; }
.fifteen-side { display: grid; gap: 22px; padding-bottom: .5em; max-width: 46rem; }
.split { display: flex; height: 56px; }
.split span { display: block; height: 100%; transform-origin: left center; }
.split-a { flex: 0 0 85%; background: var(--cream); }
.split-b { flex: 0 0 15%; background: var(--mauve); border-left: 2px solid var(--plum); }
.js:not(.static):not(.reduce) .split span { transform: scaleX(0); transition: transform 1.5s var(--ease-io); }
.js:not(.static):not(.reduce) .split .split-b { transition-delay: 1.2s; transition-duration: .8s; }
.js:not(.static):not(.reduce) .split.is-in span { transform: none; }
.split-legend { display: flex; justify-content: space-between; gap: 24px; color: var(--on-dark-2); }
.split-legend p:last-child { text-align: right; }
.split-legend b { font-weight: 400; color: var(--cream); margin-right: .5em; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 9vh, 110px); }
.promises li { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.promises .label { color: var(--on-dark-2); }
.promise-line { font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
@media (max-width: 899px) {
  .fifteen { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 599px) { .split { height: 44px; } .split-legend { flex-direction: column; gap: 8px; } .split-legend p:last-child { text-align: left; } }

/* ------------------------------------------------------------------ 04 handed over */
.homes { background: var(--cream); padding: var(--pad-y) 0 clamp(72px, 12vh, 140px); }
.homes-head { display: grid; gap: 26px; margin-bottom: clamp(36px, 7vh, 80px); }
.home + .home { margin-top: clamp(56px, 10vh, 120px); }
.home-pin { position: relative; }
.home-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 18px; color: var(--ink-2); }
.home-meta b { font-weight: 400; color: var(--ink); }
.strip { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -3px; }
.strip-track { display: flex; gap: clamp(12px, 1.4vw, 22px); width: max-content; padding-inline: var(--gut); }
.shot { position: relative; flex: none; height: clamp(420px, 68vh, 780px); aspect-ratio: 9 / 16; overflow: hidden; background: var(--tint); scroll-snap-align: center; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-n { position: absolute; left: 12px; bottom: 10px; color: var(--cream); text-shadow: 0 1px 10px rgba(43, 26, 28, .55); }
.home.is-pinned .home-pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.home.is-pinned .strip { overflow: hidden; scroll-snap-type: none; }
.home.is-pinned .shot { height: min(68vh, 760px); }
@media (max-width: 699px) { .shot { height: min(64svh, 560px); } .strip-track { padding-inline: var(--gut); } }
.home-slot .slot-box { position: relative; display: grid; gap: 14px; place-content: center; justify-items: center; text-align: center; min-height: 52vh; border: 1px dashed var(--line); background: var(--tint); padding: 40px 24px; }
.home-slot .slot-text { font-size: var(--fs-h3); max-width: 22em; text-wrap: balance; }

/* ------------------------------------------------------------------ 05 begin */
.begin { background: var(--ice); padding: var(--pad-y) 0; }
.begin .wrap { display: grid; gap: 26px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 6vh, 72px); }
.steps li { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--line); padding-top: 26px; }
.step-art { width: clamp(78px, 7vw, 108px); margin-bottom: 10px; }
.steps .label { color: var(--ink-2); }
.step-title { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.015em; }
.step-line { color: var(--ink-2); max-width: 20em; text-wrap: pretty; }
.begin-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(36px, 7vh, 80px); }
.begin-mail { margin-left: 12px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (max-width: 899px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 599px) { .begin-mail { margin-left: 0; width: 100%; padding-top: 8px; } .begin-cta .btn { flex: 1 1 auto; } }

/* the pictograms: plates and strokes are drawn by the script; visible as they are when it cannot run */
.hk { width: 100%; height: auto; overflow: visible; }
.static .hk-pl, .reduce .hk-pl, html:not(.js) .hk-pl { opacity: 1 !important; }
.static .hk mask path, .reduce .hk mask path, html:not(.js) .hk mask path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ footer */
.ft { background: var(--deep); padding: clamp(72px, 12vh, 128px) 0 calc(max(30px, env(safe-area-inset-bottom)) + var(--snd-gap)); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lockup links" "words fine"; gap: 40px 48px; align-items: end; }
.ft-lockup { grid-area: lockup; display: flex; align-items: center; gap: 26px; }
.ft-hpac { width: 136px; flex: none; }
.ft-lockup i { width: 1px; height: 54px; background: var(--line-dark); }
.ft-hpad { display: block; opacity: .9; transition: opacity .3s var(--ease); }
.ft-hpad:hover { opacity: 1; }
.ft-hpad svg { width: 134px; height: auto; }
.ft-words { grid-area: words; display: grid; gap: 8px; }
.ft-tag { color: var(--on-dark-2); }
.ft-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: flex-end; }
.ft-links a, .ft-links button { padding: 6px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .3s var(--ease); }
.ft-links a:hover, .ft-links button:hover { text-decoration-color: currentColor; }
.ft-end { grid-area: fine; display: grid; gap: 8px; justify-items: end; text-align: right; }
.ft-fine { color: var(--on-dark-2); }
.ft-credit { color: var(--cream); opacity: .7; }
@media (max-width: 799px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lockup" "words" "links" "fine"; gap: 30px; }
  .ft-links { justify-content: flex-start; }
  .ft-end { justify-items: start; text-align: left; }
  .ft-hpac { width: 112px; } .ft-hpad svg { width: 110px; }
}

/* ------------------------------------------------------------------ the enquiry sheet */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(43, 26, 28, .5); opacity: 0; transition: opacity .5s var(--ease); }
.sheet-panel { --btn-bg: var(--cream); --btn-ink: var(--plum); --btn-hover: var(--ice); position: relative; width: min(520px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--plum); color: var(--cream); padding: 26px clamp(22px, 3vw, 38px) 30px; display: flex; flex-direction: column; gap: 26px; transform: translateX(100%); transition: transform .65s var(--ease); }
.sheet-panel .btn-fill:hover { color: var(--plum); }
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sheet-top .label { color: var(--on-dark-2); }
.sheet-close { padding: 8px 0; opacity: .85; }
.sheet-close:hover { opacity: 1; }
.form { display: grid; gap: 26px; }
.chips { border: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 12px; color: var(--on-dark-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row label { position: relative; }
.chip-row input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-row span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(243, 238, 231, .42); border-radius: 999px; font-size: .92rem; line-height: 1.2; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.chip-row label:hover span { border-color: var(--cream); }
.chip-row input:checked + span { background: var(--cream); color: var(--plum); border-color: var(--cream); }
.chip-row input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field .label { color: var(--on-dark-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(243, 238, 231, .45); border-radius: 0; padding: 8px 0 10px; outline: none; resize: vertical; transition: border-color .3s var(--ease); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--cream); }
.field.is-bad input { border-bottom: 1px dashed var(--cream); }
.err { font-size: .82rem; line-height: 1.35; color: var(--cream); }
.form-send { display: flex; flex-wrap: wrap; gap: 12px; }
.sent { display: grid; gap: 16px; justify-items: start; }
.sent:focus { outline: none; }
.sent-text { color: var(--on-dark-2); max-width: 26em; }
.sent-again { padding: 8px 0; text-decoration: underline; text-underline-offset: 5px; }
.sheet-foot { margin-top: auto; color: var(--on-dark-2); }
@media (max-width: 699px) {
  .sheet { align-items: flex-end; }
  .sheet-panel { width: 100%; height: auto; max-height: 92svh; border-radius: 18px 18px 0 0; transform: translateY(100%); padding-bottom: calc(max(26px, env(safe-area-inset-bottom)) + var(--snd-gap)); }
}
@media (max-width: 479px) { .fields { grid-template-columns: minmax(0, 1fr); } .form-send .btn { flex: 1 1 auto; } }

/* ------------------------------------------------------------------ toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; transform: translate(-50%, 16px); opacity: 0; background: var(--deep); color: var(--cream); padding: 12px 18px; border-radius: 999px; transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================== the playful layer (js/play.js)
   Karan's standing rule of 23 Oct 2026: wherever the cursor goes, something answers. Small, quiet, brand colours only. */

/* a soft ring wherever you tap */
.tap-ring { position: fixed; z-index: 190; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid var(--plum); pointer-events: none; animation: hpac-ring .7s var(--ease) forwards; }
.tap-ring.on-dark { border-color: var(--cream); }
@keyframes hpac-ring { from { transform: scale(.25); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
.btn:active, .hd-cta:active, .ba-toggle button:active { scale: .97; }

/* labels roll: the word slides up and its twin rises from below, letter by letter */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll-a, .roll-b { display: block; white-space: nowrap; }
.roll-b { position: absolute; left: 0; top: 0; }
.roll i { display: inline-block; font-style: normal; transition: transform .5s var(--ease); transition-delay: calc(var(--i) * 13ms); }
.roll-b i { transform: translateY(112%); }
a:hover .roll-a i, button:hover .roll-a i, a:focus-visible .roll-a i, button:focus-visible .roll-a i { transform: translateY(-112%); }
a:hover .roll-b i, button:hover .roll-b i, a:focus-visible .roll-b i, button:focus-visible .roll-b i { transform: none; }

/* big letters hop away from the cursor; a heading lets its letters out of the rise mask once it has risen */
.hop-w { display: inline-block; white-space: nowrap; }
.hop { display: inline-block; transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); }
.js [data-lines].is-settled .line { overflow: visible; }

/* the cursor: a dot, and a ring that follows a beat behind and reads what it is over */
html.has-cur, html.has-cur * { cursor: none !important; }
html.has-cur input, html.has-cur textarea { cursor: text !important; }
.cur { position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none; color: var(--plum); opacity: 0; transition: opacity .3s, color .3s; }
.cur.is-on { opacity: 1; }
.cur.on-dark { color: var(--cream); }
.cur[data-mode="text"] { opacity: 0; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; will-change: transform; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; transition: opacity .25s, background-color .3s; }
.cur-ring-in { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; transition: transform .5s var(--ease), background-color .3s, border-color .3s, opacity .3s; }
.cur-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .4s var(--ease); }
.cur[data-mode="link"] .cur-ring-in { transform: scale(1.55); background: color-mix(in srgb, currentColor 9%, transparent); }
.cur[data-mode="view"] .cur-ring-in { transform: scale(2.5); background: currentColor; border-color: transparent; }
.cur[data-mode="view"] .cur-dot { opacity: 0; }
.cur[data-mode="view"] .cur-label { opacity: 1; color: var(--cream); }
.cur.on-dark[data-mode="view"] .cur-label { color: var(--plum); }
.cur[data-mode="lens"] { color: var(--cream); }
.cur[data-mode="lens"] .cur-ring-in { transform: scale(.3); opacity: 0; }
.cur[data-mode="lens"] .cur-label { opacity: 1; color: var(--cream); transform: translate(-50%, 126px); padding: 6px 11px; border-radius: 999px; background: rgba(43, 26, 28, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cur.is-down .cur-ring-in { transform: scale(.75); }

/* the opening photograph breathes, and a lens shows the other room under the cursor */
@keyframes hpac-breathe { from { transform: scale(1); } to { transform: scale(1.045) translate(-.5%, -.4%); } }
html.hero-done:not(.reduce) .ba-home img, html.hero-done:not(.reduce) .ba-site img { animation: hpac-breathe 16s ease-in-out infinite alternate; }
.ba-frame { cursor: pointer; }
.ba-lens { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: circle(0px at 50% 50%); }
.ba-lens img { width: 100%; height: 100%; object-fit: cover; }
.ba-lens-ring { position: absolute; left: 0; top: 0; z-index: 4; width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 1.5px solid var(--cream); border-radius: 50%; box-shadow: 0 10px 34px rgba(43, 26, 28, .32); pointer-events: none; opacity: 0; transition: opacity .3s; }

/* photographs tilt to the cursor, with a little light following it */
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease); }
.tilt.is-tilt { transition: transform .18s linear; }
.shot.tilt::before, .photo.tilt .photo-box::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(243, 238, 231, .24), rgba(243, 238, 231, 0) 46%); opacity: 0; transition: opacity .45s; }
.shot.tilt.is-tilt::before, .photo.tilt.is-tilt .photo-box::after { opacity: 1; }
.shot-n { z-index: 3; }

/* the stage counter rolls to its new number */
.stage-count b { display: inline-block; }
.stage-count b.tick { animation: hpac-tick .55s var(--ease); }
@keyframes hpac-tick { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* rules draw themselves across as their block arrives */
.stats, .promises li, .steps li, .fifteen { position: relative; }
.js:not(.static):not(.reduce) .stats, .js:not(.static):not(.reduce) .promises li, .js:not(.static):not(.reduce) .steps li, .js:not(.static):not(.reduce) .fifteen { border-top-color: transparent; }
.js:not(.static):not(.reduce) .stats::before, .js:not(.static):not(.reduce) .promises li::before, .js:not(.static):not(.reduce) .steps li::before, .js:not(.static):not(.reduce) .fifteen::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease-io) .15s; }
.js:not(.static):not(.reduce) .promises li::before, .js:not(.static):not(.reduce) .fifteen::before { background: var(--line-dark); }
.stats.is-in::before, .promises li.is-in::before, .steps li.is-in::before, .fifteen.is-in::before { transform: none !important; }

/* small answers on the details */
.hd-mark svg { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.hd-mark:hover svg { transform: rotate(-4deg) scale(1.06); }
.ft-hpac, .ft-hpad svg { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.ft-lockup:hover .ft-hpac { transform: translateX(8px) rotate(-3deg); }
.ft-lockup:hover .ft-hpad svg { transform: translateX(-8px) rotate(3deg); }
.stats b { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.stats li:hover b { transform: translateY(-5px); }
.promises .promise-line { transition: transform .6s var(--ease); }
.promises li:hover .promise-line { transform: translateX(8px); }
.promises .label { transition: color .4s var(--ease); }
.promises li:hover .label { color: var(--cream); }
.split span:hover { box-shadow: inset 0 0 0 2px rgba(69, 41, 43, .28); }
.split-legend p { transition: opacity .35s var(--ease); }
.fifteen-side:has(.split-a:hover) .split-legend p:last-child, .fifteen-side:has(.split-b:hover) .split-legend p:first-child { opacity: .32; }
.step-art { transition: transform .7s var(--ease); }

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