/* Hallmark · genre: editorial · macrostructure: Marquee Hero (home) + rail/long document (content) · design-system: design.md · designed-as-app
   Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
   Fankaar house DNA (design-refs/fankaar.md) on SAIRA tokens: warm light ground (Sir 2026-09-19), oversized Didone display, gold used
   sparingly (primary button, figures, underline on hover, focus), square uppercase buttons, typographic rows instead
   of icon cards, real photography only, one pausable marquee, nothing scroll-triggered.
   Needs /brand/tokens.css loaded first. Reference tokens only, no raw colours. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--ground);color:var(--text);font:400 17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text);text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--rule);transition:text-decoration-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
a:hover{text-decoration-color:var(--gold-ink)}
:focus-visible{outline:var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--gold);color:var(--text)}

/* Header: edge-aligned. Logo left, quiet links, one gold "Talk to us" right. */
.top{max-width:1320px;margin:0 auto;padding:22px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
.logo{flex:none}
.logo img{height:22px;width:auto}
.top nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:13px;letter-spacing:.08em;text-transform:uppercase;order:3;width:100%}
.top nav a{text-decoration:none;color:var(--text-body);white-space:nowrap}
.top nav a:hover{color:var(--text)}
.top nav a[aria-current="page"]{color:var(--text)}
.top .talk{order:2;margin:0}
@media (min-width:980px){.top nav{order:2;width:auto;margin-left:auto}.top .talk{order:3}}

/* Buttons: square, uppercase, letterspaced. Gold fill is the one primary; .alt is a hairline outline. */
.btn{display:inline-block;font:600 13px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;margin:10px 10px 0 0;background:var(--gold);color:var(--text);text-decoration:none;padding:16px 24px;border-radius:var(--radius);border:1px solid var(--gold);transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.btn:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--text);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.alt{background:transparent;color:var(--text);border-color:var(--text-muted)}
.btn.alt:hover{border-color:var(--text);color:var(--text);background:transparent}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn.sm{padding:12px 18px;font-size:12px}

/* Content pages: narrow fact rail beside one reading column */
.page{max-width:1320px;margin:0 auto;padding:48px clamp(16px,4vw,48px) 88px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:980px){
  .page{grid-template-columns:250px minmax(0,720px);column-gap:96px;padding-top:88px}
  .rail{position:sticky;top:32px;align-self:start}
}
.crumb{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--text)}
.facts{margin:22px 0 0;font-size:14.5px;border-top:1px solid var(--rule)}
.facts dt{color:var(--text-muted);margin-top:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.facts dd{margin:4px 0 0;color:var(--text)}

/* Type: roman Didone display, tight, oversized; Inter body. No italic headings. */
h1,h2,h3{font-family:var(--font-display);font-weight:500;font-style:normal;color:var(--text);overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.02;margin:0 0 22px;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:64px 0 18px;letter-spacing:-.012em}
h3{font-size:24px;line-height:1.2;margin:0 0 8px}
.main > h1:first-child{margin-top:0}
p{margin:0 0 16px;color:var(--text-body)}
p strong,p b,li strong{color:var(--text);font-weight:600}
.stand{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--text-body);max-width:34em}
.main ul,.main ol{color:var(--text-body);padding-left:1.2em}
.main li{margin-bottom:8px}
.note{font-size:14.5px;color:var(--text-muted)}
.related{color:var(--text-body)}

/* Spec list: name left, detail right, hairlines, no cards */
.spec{margin:8px 0 0;border-top:1px solid var(--rule)}
.spec div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.spec div{grid-template-columns:15em minmax(0,1fr);gap:24px}}
.spec dt{color:var(--text);font-weight:600}
.spec dt a{text-decoration:none}
.spec dt a:hover{color:var(--gold-ink)}
.spec dd{margin:0;color:var(--text-body)}

/* Tables */
table{width:100%;border-collapse:collapse;margin:8px 0 10px;background:var(--surface);border:1px solid var(--rule);font-variant-numeric:tabular-nums}
th,td{padding:13px 16px;text-align:left;font-size:16px;border-bottom:1px solid var(--rule);color:var(--text-body)}
th{color:var(--text);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
td:last-child{font-weight:600;color:var(--text)}
tr:last-child td{border-bottom:0}

/* Call to action: a raised block with a gold top rule */
.cta{margin:56px 0;background:var(--surface);border-top:2px solid var(--gold-ink);padding:32px clamp(20px,3vw,36px) 34px}
.cta h3{font-size:clamp(28px,3vw,36px);margin-bottom:10px}
.cta p{max-width:36em}

/* Questions */
.faq{margin:0;border-top:1px solid var(--rule)}
.faq dt{font-weight:600;color:var(--text);padding-top:20px}
.faq dd{color:var(--text-body);margin:6px 0 0;padding-bottom:20px;border-bottom:1px solid var(--rule)}

/* Article index */
.index{list-style:none;padding:0 !important;margin:0;border-top:1px solid var(--rule)}
.index li{margin:0;padding:22px 0;border-bottom:1px solid var(--rule)}
.index a{font-family:var(--font-display);font-size:clamp(24px,2.4vw,30px);line-height:1.2;text-decoration:none}
.index a:hover{color:var(--gold-ink)}
.index p{margin:8px 0 0;font-size:15.5px}

/* Footer: one statement, then contacts */
.foot{max-width:1320px;margin:0 auto;padding:56px clamp(16px,4vw,48px) 48px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--text-muted)}
.foot p{margin:0 0 8px;max-width:52em;color:var(--text-muted)}
.foot p:first-child{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.25;color:var(--text);max-width:24em;margin-bottom:22px}
.foot a{color:var(--text-body)}
.foot a:hover{color:var(--text)}
.linkish{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--rule);cursor:pointer}
.linkish:hover{text-decoration-color:var(--gold-ink)}

/* Real project photos: no border, no radius, caption below, no overlays */
.shot{margin:32px 0}
.shot img{width:100%;height:auto;background:var(--surface)}
.shot figcaption{margin-top:10px;font-size:13.5px;color:var(--text-muted)}
.hero{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.hero .shot{margin:0}
.hero .shot img{aspect-ratio:21/9;object-fit:cover}
@media (max-width:640px){.hero .shot img{aspect-ratio:4/3}}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:32px 0}
@media (min-width:640px){.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pair .shot{margin:0}
.pair .shot img{aspect-ratio:4/3;object-fit:cover}

/* Project list */
.work{list-style:none;padding:0 !important;margin:8px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:640px){.work{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.work li{margin:0}
.work .shot{margin:0}
.work .shot img{aspect-ratio:4/3;object-fit:cover}
.work h3{margin:14px 0 4px;font-size:23px}
.work h3 a{text-decoration:none}
.work h3 a:hover{color:var(--gold-ink)}
.work p{margin:0;font-size:15.5px}

/* Client logo wall: uniform cells on the raised surface, marks shown light, no motion */
.logos{list-style:none;padding:0 !important;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.logos li{margin:0;display:flex;align-items:center;justify-content:center;height:96px;padding:14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface)}
.logos img{max-height:50px;max-width:100%;width:auto;height:auto;filter:grayscale(1);mix-blend-mode:multiply;opacity:.8}  /* white grounds multiply away on the light cell */
.logos img.knock{filter:brightness(0);mix-blend-mode:normal;opacity:.65}  /* white marks, darkened to show on light */
.logos .word{font-size:14px;letter-spacing:.06em;color:var(--text-body);text-align:center}

/* Company figures */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:8px 0 0;border-top:1px solid var(--rule)}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats div{display:flex;flex-direction:column-reverse;padding:22px 0;border-bottom:1px solid var(--rule)}
.stats dt{color:var(--text-muted);font-size:14px}
.stats dd{margin:0 0 4px;color:var(--gold-ink);font-size:clamp(40px,4.4vw,60px);line-height:1;font-family:var(--font-display);font-variant-numeric:tabular-nums lining-nums}

/* Lead form */
.lead{margin:14px 0 0;background:var(--surface);border-top:2px solid var(--gold-ink);padding:28px}
.lead label{display:block;margin:0 0 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-weight:600}
.lead input,.lead select,.lead textarea{display:block;width:100%;margin-top:8px;font:400 16px/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text);background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius);padding:13px 14px}
.lead input:hover,.lead select:hover,.lead textarea:hover{border-color:var(--text-muted)}
.lead input:focus-visible,.lead select:focus-visible,.lead textarea:focus-visible{outline:var(--focus);outline-offset:1px;border-color:var(--gold-ink)}
.lead input[aria-invalid="true"],.lead textarea[aria-invalid="true"]{border-color:var(--danger)}
.lead button[type=submit]{cursor:pointer;margin:6px 0 0}
.lead button:disabled{opacity:.55;cursor:not-allowed}
.lead .fine{font-size:13.5px;margin:14px 0 0;color:var(--text-muted)}
.lead-msg{margin:16px 0 0;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.lead-msg h3{margin:0 0 4px}
.lead-msg.err{border-color:var(--danger)}
.lead-msg.err p{color:var(--danger)}

/* ---------- Home (studied DNA: ERA Residence, Awwwards Site of the Month Aug 2026) ----------
   Full-bleed hero with headline over the photo and a scroll cue; image reveals, light parallax and one pinned
   horizontal gallery, all progressive: without JS or with reduced motion everything is static and readable. */
.home{display:block}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.sec{padding-top:clamp(72px,9vw,136px)}
.sec > h2:first-child{margin-top:0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 64px;align-items:end;margin-bottom:28px}
.sec-head h2{margin:0}
.sec-head p{margin:0;max-width:30em}
@media (min-width:980px){.sec-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}

/* Sticky header on every page: full-width cream bar, content aligned to the page grid */
.top{position:sticky;top:0;z-index:40;max-width:none;padding-inline:max(clamp(16px,4vw,48px),calc((100% - 1320px) / 2 + clamp(16px,4vw,48px)));background:var(--ground);transition:box-shadow var(--dur) var(--ease-out)}
.top.is-scrolled{box-shadow:0 1px 0 var(--rule)}
@media (max-width:979px){.top{position:relative}}  /* the wrapped phone header would eat a third of the screen */

/* Hero: full-bleed photo, headline bottom-left on a soft ink scrim */
.h-hero{position:relative;height:calc(100svh - 70px);min-height:520px;overflow:hidden;background:var(--text);color:var(--surface)}
.h-hero-img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover}
.h-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(44,40,34,.78) 0%,rgba(44,40,34,.28) 42%,rgba(44,40,34,0) 70%);pointer-events:none}
.h-hero-in{position:absolute;z-index:2;left:0;right:0;bottom:clamp(56px,8vh,96px);max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.h-hero h1{color:var(--surface);font-size:clamp(44px,7vw,112px);line-height:1;letter-spacing:-.026em;max-width:14ch;margin:0}
.h-hero-sub{color:var(--ground-2);font-size:clamp(16px,1.4vw,19px);margin:18px 0 0}
.h-hero-cap{position:absolute;z-index:2;right:clamp(16px,4vw,48px);bottom:22px;margin:0;font-size:12.5px;color:var(--ground-2);opacity:.85}
.h-scroll{position:absolute;z-index:2;left:clamp(16px,4vw,48px);bottom:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--surface);text-decoration:none}
.h-scroll::after{content:"";display:inline-block;width:1px;height:18px;margin-left:10px;vertical-align:middle;background:var(--surface)}

.h-intro{padding-top:clamp(64px,8vw,120px)}
.h-lede{font-family:var(--font-display);font-size:clamp(26px,3.2vw,44px);line-height:1.22;color:var(--text);max-width:24em;margin:0}
.h-intro .actions{margin:28px 0 0}

/* Reasons: four columns of text, hairline above each */
.reasons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:760px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.reasons{grid-template-columns:repeat(4,minmax(0,1fr))}}
.reasons li{border-top:1px solid var(--text);padding-top:18px}
.reasons h3{font-size:24px;margin:0 0 10px}
.reasons p{margin:0;font-size:15.5px}

/* Services as typographic rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{margin:0;border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;align-items:baseline;padding:24px 0;text-decoration:none}
.rows .t{font-family:var(--font-display);font-size:clamp(26px,3.2vw,44px);line-height:1.1;color:var(--text);transition:color var(--dur) var(--ease-out)}
.rows .d{grid-column:1/-1;color:var(--text-body);font-size:15.5px;max-width:40em}
.rows .go{grid-row:1;grid-column:2;color:var(--text-muted);font-size:22px;transition:color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.rows a:hover .t{color:var(--gold-ink)}
.rows a:hover .go{color:var(--gold-ink);transform:translateX(4px)}
@media (min-width:980px){.rows a{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto}.rows .d{grid-column:2;grid-row:1}.rows .go{grid-column:3}}

/* Selected work: native swipe row by default; pinned and driven by vertical scroll when JS allows */
.hscroll-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:28px}
.hscroll-head h2{margin:0}
.hscroll-view{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px}
.hscroll-track{list-style:none;margin:0;display:flex;gap:clamp(14px,2vw,28px);padding:0 clamp(16px,4vw,48px);width:max-content}
.hscroll-track li{margin:0;flex:none;width:min(78vw,620px);scroll-snap-align:start}
.hscroll-track li:nth-child(even){width:min(62vw,440px);margin-top:clamp(24px,6vh,80px)}
.hscroll-track .shot{margin:0}
.hscroll-track .shot img{aspect-ratio:4/3;object-fit:cover}
.hscroll.is-pinned{box-sizing:content-box}
.hscroll.is-pinned .hscroll-sticky{position:sticky;top:var(--hdr,70px);height:calc(100svh - var(--hdr,70px));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hscroll.is-pinned .hscroll-view{overflow:visible;scroll-snap-type:none;padding:0}

.more{display:inline-block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--gold-ink);padding-bottom:3px;white-space:nowrap}

/* Named projects */
.names{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);columns:1}
@media (min-width:760px){.names{columns:2;column-gap:64px}}
.names li{break-inside:avoid;margin:0;padding:14px 0;border-bottom:1px solid var(--rule)}
.names a{font-family:var(--font-display);font-size:22px;text-decoration:none}
.names a:hover{color:var(--gold-ink)}
.names span{display:block;font-size:13.5px;color:var(--text-muted)}

/* Closing CTA over a real photo */
.h-cta{position:relative;overflow:hidden;margin-top:clamp(72px,9vw,136px);padding:clamp(96px,14vw,200px) 0;background:var(--text)}
.h-cta-media{position:absolute;inset:0}
.h-cta-media img{width:100%;height:120%;object-fit:cover;opacity:.42}
.h-cta-in{position:relative;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.h-cta h2{color:var(--surface);font-size:clamp(40px,6vw,88px);margin:0 0 18px}
.h-cta p{color:var(--ground-2);max-width:34em;font-size:clamp(16px,1.4vw,19px)}
.h-cta .actions{margin-top:24px}
.btn.alt.light{color:var(--surface);border-color:var(--ground-2)}
.btn.alt.light:hover{border-color:var(--surface);color:var(--surface)}
.home .faq{max-width:860px}
.home .related{margin-top:24px}
.home > section:last-child{padding-bottom:clamp(72px,9vw,136px)}

/* Reveal: only when site.js has confirmed motion is welcome (html.motion) */
.motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.motion [data-reveal].is-in{opacity:1;transform:none}
.motion .hscroll-track .shot img,.motion .mosaic .shot img{clip-path:inset(12% 0 0 0);transition:clip-path 1s var(--ease-out)}
.motion .is-in .shot img,.motion .shot.is-in img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .h-hero-img,.h-cta-media img{transform:none !important}
}

/* Manufacturer pattern (2026-09-19, peers Sir named: Bold, Bond Interiors, Design Infinity): proof strip under
   the hero, sector picker, factory capabilities, numbered process, product feature. */
.h-hero .actions{margin:26px 0 0}
.proof{background:var(--ground-2);border-bottom:1px solid var(--rule)}
.proof .stats{border-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.proof .stats{grid-template-columns:repeat(5,minmax(0,1fr))}}
.proof .stats div{border-bottom:0;padding:26px 0}
.proof .stats dd{font-size:clamp(34px,3.4vw,50px)}

.sectors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
@media (min-width:640px){.sectors{gap:20px}}
@media (min-width:1100px){.sectors{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sectors li{margin:0}
.sectors a{display:block;text-decoration:none}
.sectors .shot{margin:0}
.sectors .shot img{aspect-ratio:3/4;object-fit:cover}
.sectors figcaption{display:none}
.sectors .s-name{display:block;margin-top:10px;font-family:var(--font-display);font-size:clamp(18px,2vw,24px);line-height:1.2;color:var(--text);transition:color var(--dur) var(--ease-out)}
.sectors a:hover .s-name{color:var(--gold-ink)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px 32px;counter-reset:none}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{margin:0;border-top:1px solid var(--rule);padding-top:18px}
.steps .n{display:block;font-family:var(--font-display);font-size:40px;line-height:1;color:var(--gold-ink);font-variant-numeric:lining-nums;margin-bottom:12px}
.steps h3{font-size:22px;margin:0 0 6px}
.steps p{margin:0;font-size:15.5px}

.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media (min-width:900px){.feature{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px}}
.feature .shot{margin:0}
.feature .shot img{aspect-ratio:4/3;object-fit:cover}
.feature h2{margin-top:0}

/* Hero time-lapse (Sir 2026-09-19): shell and core to handover as you scroll. Four stacked frames per space,
   the last one the real finished photo; site.js initTimelapse sets each frame's opacity from scroll progress.
   Without JS or with reduced motion: the real photo only, nothing pins. */
.tl{position:relative;background:var(--text);color:var(--surface)}
.tl-stick{position:relative;height:calc(100svh - 70px);min-height:560px;overflow:hidden}
.tl.is-live{height:320vh}
.tl.is-live .tl-stick{position:sticky;top:70px}
@media (max-width:979px){.tl.is-live .tl-stick{top:0;height:100svh}}
.tl-sets,.tl-set{position:absolute;inset:0}
.tl-set[hidden]{display:none}
.tl-set img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tl-set img:last-of-type{opacity:1}
.tl-stick::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(44,40,34,.82) 0%,rgba(44,40,34,.35) 40%,rgba(44,40,34,0) 62%),linear-gradient(to bottom,rgba(44,40,34,.35),rgba(44,40,34,0) 22%)}
.tl-in{position:absolute;z-index:2;left:0;right:0;bottom:clamp(120px,17vh,170px);max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.tl h1{color:var(--surface);font-size:clamp(40px,6.4vw,100px);line-height:1;letter-spacing:-.026em;max-width:14ch;margin:0}
.tl .h-hero-sub{color:var(--ground-2);font-size:clamp(16px,1.4vw,19px);margin:16px 0 0;max-width:36em}
.tl .actions{margin:22px 0 0}
.tl-bar{position:absolute;z-index:2;left:0;right:0;bottom:22px;max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.tl-tabs{display:flex;gap:6px;flex-wrap:wrap}
.tl-tabs button{font:600 11.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--surface);background:transparent;border:1px solid rgba(251,248,243,.45);border-radius:var(--radius);padding:10px 14px;cursor:pointer;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.tl-tabs button:hover{border-color:var(--surface)}
.tl-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--text)}
.tl-stages{list-style:none;margin:0;padding:0;display:flex;gap:18px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,243,.55)}
.tl-stages li{position:relative;padding-top:10px;transition:color var(--dur) var(--ease-out)}
.tl-stages li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(251,248,243,.25)}
.tl-stages li.is-on{color:var(--surface)}
.tl-stages li.is-on::before{background:var(--gold)}
.tl-cap{position:absolute;right:clamp(16px,4vw,48px);top:18px;margin:0;font-size:12.5px;color:var(--ground-2);z-index:2}
.tl-note{position:absolute;z-index:2;left:clamp(16px,4vw,48px);top:18px;margin:0;font-size:12px;color:rgba(251,248,243,.7);max-width:30em}
@media (max-width:640px){.tl-stages{gap:10px;font-size:10px}.tl-note{display:none}.tl-cap{top:auto;bottom:86px}}

/* Time-lapse as a floating window mid-page (Sir 2026-09-19: "not right at the top, a floating thing in the
   center"). Overrides the earlier full-bleed hero version above. */
.tl{background:transparent;color:var(--text)}
.tl-stick{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 clamp(16px,4vw,48px)}
.tl-stick::after{display:none}
.tl.is-live{height:300vh;padding-top:0}
.tl.is-live .tl-stick{position:sticky;top:0;height:100svh}
@media (min-width:980px){.tl.is-live .tl-stick{top:70px;height:calc(100svh - 70px)}}
.tl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;width:100%;max-width:1040px;margin:0 auto;padding:0}
.tl-head h2{margin:0;font-size:clamp(26px,3vw,40px)}
.tl-head p{margin:0;font-size:15px}
.tl-frame{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:16/10;max-height:62svh;overflow:hidden;background:var(--text);box-shadow:0 30px 70px rgba(44,40,34,.22),0 6px 18px rgba(44,40,34,.12)}
@media (max-width:640px){.tl-frame{aspect-ratio:4/3}}
.tl-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(44,40,34,.55),rgba(44,40,34,0));pointer-events:none}
.tl-cap{top:auto;bottom:14px;right:16px;color:var(--surface)}
.tl-bar{position:static;width:100%;max-width:1040px;margin:0 auto;padding:0}
.tl-tabs button{color:var(--text);border-color:var(--text-muted)}
.tl-tabs button:hover{border-color:var(--text)}
.tl-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--text)}
.tl-stages{color:var(--text-muted)}
.tl-stages li::before{background:var(--rule)}
.tl-stages li.is-on{color:var(--text)}
.tl-stages li.is-on::before{background:var(--gold-ink)}
.tl-note{position:static;width:100%;max-width:1040px;margin:0 auto;color:var(--text-muted);font-size:12px}
@media (max-width:640px){.tl-note{display:block}.tl-cap{bottom:10px}}

/* Framed hero with a real project photo (the time-lapse lives mid-page now) */
.hero2{padding-top:clamp(40px,6vw,88px)}
.hero2-text{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:980px){.hero2-text{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.hero2 h1{font-size:clamp(42px,6.4vw,100px);line-height:1;letter-spacing:-.026em;margin:0;max-width:14ch}
.hero2 .h-hero-sub{color:var(--text-body);font-size:clamp(16px,1.4vw,19px);margin:0}
.hero2 .actions{margin:20px 0 0}
.hero2-shot{margin:0}
.hero2-shot img{aspect-ratio:21/9;object-fit:cover;width:100%}
@media (max-width:640px){.hero2-shot img{aspect-ratio:4/3}}

/* Home enquiry band. The Instagram bio link can only be edited from the phone app, so social
   traffic lands on the homepage; the form is the first thing under the hero rather than a
   button that costs another click. 19-10: 7,840 reach, 98 profile visits, 2 website clicks. */
.home-lead{padding:0 0 8px}
.home-lead-in{max-width:none}
.home-lead h2{margin:0}
.home-lead-sub{margin:6px 0 0;color:var(--text-muted);max-width:60ch}
.lead-row{display:grid;grid-template-columns:1fr;gap:0 18px;align-items:end}
.lead-row label{margin-bottom:14px}
.lead-row .consent-tick{grid-column:1/-1}
.lead-row button[type=submit]{grid-column:1/-1;justify-self:start}
.lead-row .fine,.lead-row .lead-msg{grid-column:1/-1}
@media (min-width:760px){
  .lead-row{grid-template-columns:repeat(3,1fr)}
  .lead-row button[type=submit]{justify-self:end;margin-top:0}
}
/* The consent tick had no styling, so `.lead input{display:block;width:100%}` stretched the
   checkbox to full width and pushed its label underneath, on this form and on /quote. It is
   the control that authorises us to call, so it should read as a normal tick and label. */
.lead .consent-tick{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--text-muted)}
.lead .consent-tick input[type=checkbox]{display:inline-block;flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;padding:0}