/* New Living V2 "The Journal": light editorial layout on top of base.css (shared structure: buttons, header, areas, form, footer).
   Signature: the ARCH (from the Miranda duplex doors) as image mask, numbered chapters, generous whitespace, serif-led type. */
.v2{--paper:#FBF8F3;--bg:#FBF8F3;background:var(--paper)}
.v2 .section{padding-top:64px;padding-bottom:64px}
.arch{border-radius:999px 999px 6px 6px;overflow:hidden;position:relative;background:var(--stone-2);margin:0;isolation:isolate}
.arch img,.arch video{width:100%;height:100%;object-fit:cover;display:block}
.ch{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.ch-n{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:0;color:var(--gold-deep);line-height:1}
.ch-l::before{content:"";display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}
.v2 h2 em,.v2 h1 em{color:var(--gold-ink)}
.j-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid var(--gold-deep)}
.j-link svg{width:16px;height:16px;transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.j-link:hover svg{transform:translateX(5px)}.j-link:hover{color:var(--gold-ink)}}

/* ---------- header: over the paper, ink type (dark bar only once scrolled) ---------- */
.v2 .site-header{background:rgba(251,248,243,.94);color:var(--text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.v2 .logo-full{filter:invert(1) brightness(.12) sepia(.2)}   /* the gold "NEW" turns warm ink on paper; the mark stays drawn */
.v2 .logo-mark{filter:invert(1) brightness(.12)}
.v2 .menu-btn{color:var(--text);border-color:var(--line)}
.v2 .pills{background:var(--paper);border-top:1px solid var(--line)}
.v2 .pills a{color:var(--text);border-color:var(--line)}
.v2 .pills a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.v2 .m-menu{background:var(--paper);color:var(--text)}
.v2 .m-menu a:not(.btn){border-color:var(--line)}
.v2 .m-label{color:var(--gold-ink)}
.v2 .hdr .btn-quote{--b-bg:var(--ink);--b-ink:#fff}
@media (min-width:1300px){.v2 .main-nav>a,.v2 .nav-drop-btn{color:var(--text)}.v2 .nav-menu{background:var(--paper);border-color:var(--line)}.v2 .nav-menu a{color:var(--text)}}

/* ---------- hero: arch-masked film + editorial headline (overrides the shared .hero from home.css) ---------- */
.v2 .j-hero{min-height:0;color:var(--text);overflow:visible;justify-content:flex-start;isolation:auto}
.j-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:18px 16px 30px;background:var(--paper)}
.j-hero-media{position:relative}
.arch-hero{aspect-ratio:4/4.3;max-height:52svh;width:100%}
.j-hero-tag{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:30px;background:rgba(14,14,13,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;backdrop-filter:blur(6px)}
.live{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(216,200,159,.7);animation:livePulse 2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(216,200,159,0)}100%{box-shadow:0 0 0 0 rgba(216,200,159,0)}}
.j-hero-copy .kicker{margin-bottom:10px}
.v2 .hero-title{font-weight:500;font-size:clamp(46px,13.6vw,64px);line-height:.95;color:var(--text);text-wrap:balance}
.v2 .hero-title .ht-1{display:block;font-style:italic;font-size:.5em;color:var(--gold-ink);margin-bottom:.12em}
.v2 .hero-title .ht-2{display:block}
.v2 .hero-title.ht-long .ht-2{font-size:.8em}
.v2 .hero-sub{margin-top:12px;color:var(--muted);font-size:15.5px;max-width:520px}
.v2 .hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:16px}
.v2 .hero-chips li{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--text)}
.v2 .hero-chips svg{width:18px;height:18px;color:var(--gold-deep);flex:none}
.v2 .hero-pill{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;padding:6px 14px 6px 8px;border-radius:40px;background:#fff;color:#202124;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;border:1px solid var(--line)}
.v2 .hero-pill .g-logo{width:24px;height:24px}.v2 .hero-pill .hp-n{color:#5f6368;font-weight:600}
.v2 .hero-ctas{display:grid;gap:10px;margin-top:18px}
.v2 .hero-ctas .btn{width:100%}
.v2 .hero-route{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:14px;padding:12px 14px;border-radius:var(--r);background:#fff;border:1px solid var(--gold-deep);text-decoration:none;font-size:14px}
.v2 .hero-route b{display:inline-flex;align-items:center;gap:6px;color:var(--gold-ink)}
.v2 .hero-route svg{width:16px;height:16px}
@media (max-width:359px){.v2 .hero-pill .hp-g{display:none}.v2 .hero-chips{grid-template-columns:1fr}}

/* ---------- facts strip ---------- */
.j-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.j-facts dl{display:grid;grid-template-columns:1fr 1fr;margin:0}
.j-facts dl>div{padding:18px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.j-facts dl>div:nth-child(2n){border-right:0}
.j-facts dl>div:nth-child(n+3){border-bottom:0}
.j-facts dt{font-family:var(--display);font-size:42px;font-weight:500;line-height:1}
.j-facts dd{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- statement (Lucas) ---------- */
.j-state-grid{display:grid;gap:28px}
.j-state-img{aspect-ratio:3/4;max-width:420px}
.j-quote{margin:0}
.j-quote p{font-family:var(--display);font-size:clamp(28px,8vw,40px);line-height:1.15;font-weight:500}
.j-quote footer{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.j-quote-sm{margin-top:18px;padding-left:16px;border-left:1px solid var(--gold-deep)}
.j-quote-sm p{font-size:clamp(21px,5.6vw,26px);font-style:italic}
.j-lead{margin-top:22px;font-size:16px}
.j-about p{margin-top:12px;color:var(--muted)}
.v2 .ck{margin-top:22px;background:var(--ink);color:#fff;border-radius:6px;padding:20px 18px}
.v2 .ck h3{font-size:24px;font-weight:500;line-height:1.15}
.v2 .ck-list{display:grid;margin-top:12px}
.v2 .ck-list li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid rgba(216,200,159,.18)}
.v2 .ck-q{font-weight:600;font-size:14.5px}
.v2 .ck-a{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--gold)}
.v2 .ck-a svg{flex:none;width:18px;height:18px;margin-top:1px;padding:3px;border-radius:50%;background:var(--gold);color:var(--ink)}

/* ---------- projects: editorial story + drag strip + lightbox ---------- */
.j-proj{padding-top:40px;margin-top:40px;border-top:1px solid var(--line)}
.j-proj:first-of-type{margin-top:0;padding-top:0;border-top:0}
.j-kind{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.j-sub{padding:4px 10px;border-radius:30px;background:var(--ink);color:var(--gold);letter-spacing:.12em}
.j-proj h3{font-size:clamp(34px,10vw,52px);font-weight:500;margin-top:10px}
.j-proj-lead{margin-top:10px;font-family:var(--display);font-style:italic;font-size:21px;line-height:1.35;color:var(--muted);max-width:620px}
.j-spec{display:grid;grid-template-columns:1fr;gap:0;margin:18px 0 0;border-top:1px solid var(--line)}
.j-spec>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.j-spec dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.j-spec dd{margin:0;font-weight:600;text-align:right}
.j-proj-ctas{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.j-link-2{border-bottom-color:var(--line)}
.j-film{margin:22px 0 0;border-radius:6px;overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--ink)}
.j-film video{width:100%;height:100%;object-fit:cover}
.j-film figcaption{position:absolute;left:12px;bottom:12px;right:12px;color:#fff;font-size:12.5px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.j-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:22px -16px 0;padding:0 16px 6px;cursor:grab}
.j-strip::-webkit-scrollbar{display:none}
.j-strip.dragging{cursor:grabbing;scroll-snap-type:none}
.j-shot{flex:none;margin:0;scroll-snap-align:start;width:min(80vw,340px)}
.j-shot:nth-child(3n+1){width:min(86vw,460px)}
.j-zoom{display:block;width:100%;padding:0;border:0;background:var(--stone-2);cursor:zoom-in;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.j-shot:nth-child(3n+1) .j-zoom{aspect-ratio:5/4}
.j-zoom img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.j-shot figcaption{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.j-zoom:hover img{transform:scale(1.04)}}
.j-lb{position:fixed;inset:0;z-index:200;background:rgba(14,14,13,.96);display:flex;align-items:center;justify-content:center;padding:56px 12px}
.j-lb[hidden]{display:none}
.j-lb figure{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center}
.j-lb img{max-width:100%;max-height:calc(100svh - 140px);object-fit:contain;border-radius:3px}
.j-lb figcaption{margin-top:12px;color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.j-lb-x,.j-lb-prev,.j-lb-next{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(216,200,159,.45);background:rgba(14,14,13,.6);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.j-lb-x{top:12px;right:12px}
.j-lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.j-lb-next{right:10px;top:50%;transform:translateY(-50%)}
@media (hover:hover) and (pointer:fine){.j-lb-x:hover,.j-lb-prev:hover,.j-lb-next:hover{background:var(--gold);color:var(--ink)}}
html.lb-open{overflow:hidden}

/* ---------- the detail index ---------- */
.j-detail{background:#fff}
.j-det-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.j-det{margin:0}
.j-det .j-zoom{aspect-ratio:3/4}
.j-det figcaption{display:grid;gap:2px;margin-top:10px;font-size:13px;line-height:1.4}
.j-det-n{font-family:var(--display);font-size:20px;color:var(--gold-deep)}
.j-det b{font-weight:600;font-size:14px}
.j-det figcaption span:not(.j-det-n){color:var(--muted)}
.j-det small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.j-det.big{grid-column:1/-1}
.j-det.big .j-zoom{aspect-ratio:4/3}

/* ---------- services: arches ---------- */
.j-svc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px 6px}
.j-svc-grid::-webkit-scrollbar{display:none}
.j-svc{position:relative;flex:none;width:min(76vw,320px);scroll-snap-align:start}
.j-svc-link{display:block;text-decoration:none;color:inherit}
.j-svc-img{display:block;aspect-ratio:3/4}
.j-svc-img img{transition:transform 1.2s var(--ease)}
.j-svc-no{display:block;margin-top:14px;font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold-deep)}
.j-svc h3{font-size:30px;font-weight:500;margin-top:2px}
.j-svc p{margin-top:6px;color:var(--muted);font-size:14px}
.j-svc .j-link{margin-top:8px}
.j-svc-q{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:30px;background:rgba(251,248,243,.92);color:var(--text);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
@media (hover:hover) and (pointer:fine){.j-svc-link:hover .j-svc-img img{transform:scale(1.05)}.j-svc-q:hover{background:var(--ink);color:var(--gold)}}
.j-also{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.j-also li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600}
.j-also svg{width:20px;height:20px;color:var(--gold-deep)}

/* ---------- process with build film ---------- */
.j-process{background:var(--ink);color:#fff}
.j-process .lead,.j-process .j-quote-sm p{color:var(--on-dark-muted)}
.j-process .ch{color:var(--gold)}
.j-process h2{color:#fff}
.j-process h2 em{color:var(--gold)}
.j-process-grid{display:grid;gap:30px}
.j-build{aspect-ratio:4/5;max-width:440px;background:#000}
.j-build figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:center}

/* ---------- reels ---------- */
.j-reel-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px 6px}
.j-reel-rail::-webkit-scrollbar{display:none}
.j-reel{flex:none;width:min(62vw,250px);margin:0;scroll-snap-align:start}
.j-reel-screen{position:relative;aspect-ratio:9/16;border-radius:999px 999px 8px 8px;overflow:hidden;background:#000}
.j-reel video{width:100%;height:100%;object-fit:cover}
.j-reel-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;border:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%);cursor:pointer;color:var(--ink)}
.j-reel-play span{display:flex;width:58px;height:58px;border-radius:50%;background:var(--gold);align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(216,200,159,.25);transition:transform .3s var(--ease)}
.j-reel-play svg{width:24px;height:24px;margin-left:3px}
.j-reel-stop{position:absolute;top:44px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,13,.6);color:#fff;font-size:26px;cursor:pointer}
.j-reel.is-on .j-reel-play{opacity:0;pointer-events:none}
.j-reel.is-dim{opacity:.55}
.j-reel figcaption{margin-top:12px;display:grid;gap:3px}
.j-reel figcaption b{font-family:var(--display);font-size:21px;font-weight:500;line-height:1.15}
.j-reel figcaption span{font-size:12.5px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.j-reel-play:hover span{transform:scale(1.08)}}

/* ---------- featured review, reviews, enquire, areas, faq (shared markup restyled) ---------- */
.j-feat{background:var(--stone);padding:56px 0}
.j-feat .feat-inner{max-width:980px}
.j-feat .feat-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.j-feat blockquote{margin:16px 0 0;font-family:var(--display);font-size:clamp(23px,6.4vw,32px);line-height:1.3;font-weight:500}
.j-feat blockquote p+p{margin-top:.6em}
.j-feat .feat-by{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.v2 .rw{background:#fff}
.v2 .enquire .qw{box-shadow:0 30px 70px rgba(0,0,0,.45)}
.v2 .areas{background:var(--paper)}
.v2 .area-card{background:#fff}
.v2 .faq{background:#fff}

/* ---------- service-page intro + types ---------- */
.j-intro-grid{display:grid;gap:26px}
.j-lead-p{margin-top:14px;color:var(--muted)}
.j-intro-img{aspect-ratio:3/4;max-width:460px}
.j-types{background:#fff}
.j-ty-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.j-ty-grid .ty{display:flex;flex-direction:column;gap:8px;padding:18px 14px;background:#fff;border:0;border-radius:0}
.j-ty-grid .ty svg{width:28px;height:28px;color:var(--gold-deep)}
.j-ty-grid .ty b{font-weight:600;font-size:14px}
.j-ty-grid .ty small{font-size:13px;color:var(--muted)}
.j-phase-head{margin-top:clamp(48px,7vw,90px)}
.j-phases{display:grid;counter-reset:p}
.j-phases li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 0;border-top:1px solid var(--line)}
.j-phases i{grid-row:1/3;font-family:var(--display);font-style:italic;font-size:30px;color:var(--gold-deep);line-height:1}
.j-phases b{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.j-phases span{color:var(--muted);font-size:14.5px}

/* ================= wider screens ================= */
@media (min-width:701px){
  .v2 .section{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}
  .j-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px);padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px) clamp(40px,5vw,72px);max-width:1440px;margin:0 auto;min-height:calc(100svh - var(--hdr-h))}
  .j-hero-media{order:2}
  .arch-hero{aspect-ratio:4/5;max-height:min(78svh,820px)}
  .v2 .hero-title{font-size:clamp(62px,min(6.8vw,11.5vh),112px)}
  .v2 .hero-sub{font-size:17.5px;margin-top:18px}
  .v2 .hero-chips{gap:10px 26px;margin-top:22px}
  .v2 .hero-ctas{display:flex;gap:12px;margin-top:26px}
  .v2 .hero-ctas .btn{width:auto}
  .v2 .hero-route{display:inline-flex}
  .j-facts dl{grid-template-columns:repeat(4,1fr)}
  .j-facts dl>div{border-bottom:0;padding:28px 24px}
  .j-facts dl>div:nth-child(2n){border-right:1px solid var(--line)}
  .j-facts dl>div:last-child{border-right:0}
  .j-facts dt{font-size:56px}
  .j-state-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,110px);align-items:start}
  .j-state-img{position:sticky;top:calc(var(--hdr-h) + 28px)}
  .j-proj{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:0 clamp(28px,4vw,64px);align-items:start;padding-top:clamp(56px,7vw,96px);margin-top:clamp(56px,7vw,96px)}
  .j-proj-head{grid-column:1;grid-row:1/5;position:sticky;top:calc(var(--hdr-h) + 28px)}
  .j-proj.rev .j-proj-head{grid-column:2}
  .j-proj.rev .j-strip,.j-proj.rev .j-film{grid-column:1}
  .j-film{grid-column:2;margin-top:0;aspect-ratio:16/9}
  .j-strip{grid-column:2;margin:0;padding:0 0 8px}
  .j-film+.j-strip{margin-top:14px}
  .j-shot{width:clamp(260px,24vw,360px)}
  .j-shot:nth-child(3n+1){width:clamp(380px,36vw,560px)}
  .j-det-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .j-det.big{grid-column:span 2}
  .j-det.big .j-zoom{aspect-ratio:3/2}
  .j-det:not(.big) .j-zoom{aspect-ratio:3/4}
  .j-detail-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
  .j-detail-head .j-quote-sm{margin-top:0}
  .j-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);overflow:visible;margin:0;padding:0}
  .j-svc-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
  .j-svc{width:auto}
  .j-process-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(36px,6vw,100px);align-items:center}
  .j-steps{grid-template-columns:1fr 1fr;gap:0 28px}
  .j-reel-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);overflow:visible;margin:0;padding:0}
  .j-reel{width:auto}
  .j-feat{padding:clamp(80px,10vw,140px) 0}
  .j-feat blockquote{font-size:clamp(28px,2.8vw,40px)}
  .j-intro-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,100px);align-items:center}
  .j-ty-grid{grid-template-columns:repeat(3,1fr)}
  .j-ty-grid .ty{padding:26px}
  .j-phases{grid-template-columns:repeat(4,1fr);gap:0 24px}
  .j-phases li{grid-template-columns:1fr;padding-top:22px}
  .j-phases i{grid-row:auto}
}
@media (min-width:701px) and (max-width:1099px){
  .j-hero{grid-template-columns:1fr;min-height:0}
  .j-hero-media{order:0}
  .arch-hero{aspect-ratio:16/10;border-radius:280px 280px 6px 6px}
  .j-proj{grid-template-columns:1fr}
  .j-proj-head{position:static;grid-row:auto}
  .j-proj.rev .j-proj-head,.j-proj.rev .j-strip,.j-proj.rev .j-film,.j-film,.j-strip{grid-column:1}
  .j-film,.j-strip{margin-top:22px}
  .j-reel-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .j-process-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.live{animation:none}}

/* ---------- motion: rise + wipe (in-view by scroll position, v2.js) ---------- */
.js .j-rise{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s var(--ease)}
.js .j-rise.in-view{opacity:1;transform:none}
.js .v2 .wipe img{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease)}
.js .v2 .wipe.in-view img{clip-path:inset(0 0 0 0)}
.js .arch-hero video,.js .arch-hero img{animation:archIn 1.4s var(--ease) both}
@keyframes archIn{from{transform:scale(1.12)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.js .j-rise{opacity:1;transform:none}.js .v2 .wipe img{clip-path:none}.js .arch-hero video,.js .arch-hero img{animation:none}}

/* ---------- hero loupe + tagline (research: keyword line + italic line; a macro crop overlapping the hero) ---------- */
.j-tagline{margin-top:10px;font-family:var(--display);font-style:italic;font-size:clamp(22px,6vw,30px);color:var(--gold-ink);line-height:1.1}
.j-loupe{position:absolute;right:10px;bottom:-22px;z-index:3;width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid var(--paper);box-shadow:0 14px 34px rgba(14,14,13,.28);display:block;text-decoration:none}
.j-loupe img{width:100%;height:100%;object-fit:cover;object-position:30% 55%;transform:scale(1.5);transition:transform 1s var(--ease)}
.j-loupe span{position:absolute;left:0;right:0;bottom:0;padding:12px 0 9px;background:linear-gradient(0deg,rgba(14,14,13,.8),transparent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-align:center}
@media (hover:hover) and (pointer:fine){.j-loupe:hover img{transform:scale(1.75)}}
.j-film-wide{aspect-ratio:16/10}

/* ---------- hotspots (Miranda open plan): dots on the photo + numbered notes (the list is the phone fallback) ---------- */
.j-hot{margin:22px 0 0}
.j-hot-img{position:relative;border-radius:4px;overflow:hidden}
.j-hot-img img{width:100%;display:block}
.j-dot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;cursor:pointer;z-index:2}
.j-dot span{position:absolute;inset:9px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(251,248,243,.94);color:var(--ink);font-size:12px;font-weight:700;box-shadow:0 0 0 0 rgba(216,200,159,.8);animation:dotPulse 2.4s infinite;transition:background-color .25s,color .25s,transform .25s}
.j-dot[aria-expanded="true"] span{background:var(--ink);color:var(--gold);transform:scale(1.15);animation:none}
@keyframes dotPulse{70%{box-shadow:0 0 0 12px rgba(216,200,159,0)}100%{box-shadow:0 0 0 0 rgba(216,200,159,0)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.j-hot-hint{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:30px;background:rgba(14,14,13,.7);color:#fff;font-size:12px;font-weight:600}
.j-hot-notes{display:grid;gap:0;margin-top:10px}
.j-hot-notes li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);transition:color .25s}
.j-hot-notes b{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600}
.j-hot-notes b span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--gold-deep);font-size:12px}
.j-hot-notes li.on{color:var(--text)}
.j-hot-notes li.on b span{background:var(--ink);border-color:var(--ink);color:var(--gold)}
@media (min-width:701px){
  .j-hot{grid-column:2;margin:0 0 14px}
  .j-proj.rev .j-hot{grid-column:1}
  .j-hot-notes{grid-template-columns:repeat(5,1fr);gap:14px}
  .j-hot-notes li{border-bottom:0;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
  .j-loupe{width:150px;height:150px;right:-24px;bottom:40px}
}
@media (min-width:701px) and (max-width:1099px){.j-hot{grid-column:1;margin-top:22px}.j-hot-notes{grid-template-columns:1fr 1fr}.j-loupe{right:16px;bottom:-30px}}
@media (prefers-reduced-motion:reduce){.j-dot span{animation:none}}
.v2 .hero .btn-quote,.v2 .j-hero .btn-quote{--b-bg:var(--ink);--b-ink:#fff;--wipe:var(--gold)}   /* light hero: the quote button is ink, not white */
.v2 .hero .btn-quote svg{color:var(--gold)}
.v2 .cta-band .btn-quote{--b-bg:#fff;--b-ink:var(--ink)}

/* ======================================================================================================================
   V4 additions (15 Oct): v3's loved pieces re-skinned for the light design, v1's picker, a new "Where we build".
   ====================================================================================================================== */
.v4 .j-hero-tag{gap:0}
/* ---------- Meet Lucas (v3) on paper ---------- */
.a-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.a-hero-row .hero-pill{margin-top:0}
.a-meet{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:4px 14px 4px 4px;border-radius:40px;border:1px solid var(--gold-deep);background:#fff;color:var(--text);font:inherit;cursor:pointer;transition:background-color .25s,color .25s}
.a-meet img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.a-meet span{display:flex;flex-direction:column;line-height:1.15;font-size:12px;color:var(--muted);text-align:left}
.a-meet b{color:var(--text);font-size:13.5px;font-weight:600}
.a-meet svg{width:18px;height:18px;color:var(--gold-deep)}
@media (hover:hover) and (pointer:fine){.a-meet:hover{background:var(--ink);color:#fff}.a-meet:hover b{color:#fff}.a-meet:hover span{color:var(--on-dark-muted)}.a-meet:hover svg{color:var(--gold)}}
.a-rm{position:fixed;inset:0;z-index:210;background:rgba(14,14,13,.94);display:flex;align-items:center;justify-content:center;padding:16px}
.a-rm[hidden]{display:none}
.a-rm-box{position:relative;height:min(88svh,820px);aspect-ratio:9/16;max-width:100%}
.a-rm video{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 14px 14px;background:#000}
.a-rm-x{position:absolute;top:30px;right:-6px;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:var(--ink);color:#fff;font-size:28px;cursor:pointer}
html.sheet-open{overflow:hidden}

/* ---------- v1 picker, editorial ---------- */
.v4-pick{padding:30px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v4-pick h2{font-size:clamp(28px,8vw,36px);font-weight:500}
.v4 .sym-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.v4 .sym-grid>li{display:flex}.v4 .sym-grid .sym{flex:1}
.v4 .sym{display:flex;flex-direction:column;gap:12px;min-height:100px;padding:14px;border-radius:999px 999px 6px 6px;text-decoration:none;position:relative;background:var(--paper);border:1px solid var(--line);color:var(--text);transition:transform .25s var(--ease),border-color .25s,background-color .25s;align-items:center;text-align:center;justify-content:center}
.v4 .sym-ic svg{width:28px;height:28px;color:var(--gold-deep)}
.v4 .sym-t{font-weight:600;font-size:13.5px;line-height:1.3;padding:0}
.v4 .sym-go{display:none}
@media (hover:hover) and (pointer:fine){.v4 .sym:hover{transform:translateY(-3px);border-color:var(--gold-deep);background:#fff}}

/* ---------- manifesto: words light up with the scroll (v3), ink on paper ---------- */
.v4-man .a-man p{font-family:var(--display);font-weight:500;font-size:clamp(32px,9vw,46px);line-height:1.15;color:var(--text)}
.js .v4 .a-man .w{opacity:.16;transition:opacity .35s,color .35s}
.js .v4 .a-man .w.lit{opacity:1}
.v4 .a-man .w.lit:nth-last-child(-n+3){color:var(--gold-ink)}
.v4 .a-man footer{display:flex;align-items:center;gap:12px;margin-top:22px}
.v4 .a-man footer img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-deep)}
.v4 .a-man footer span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.v4 .a-man footer b{color:var(--text);font-size:14px}
.v4-facts{display:grid;grid-template-columns:1fr 1fr;margin:36px 0 0;border-top:1px solid var(--line)}
.v4-facts>div{padding:16px 0 4px;border-bottom:1px solid var(--line)}
.v4-facts>div:nth-child(odd){padding-right:12px;border-right:1px solid var(--line)}
.v4-facts>div:nth-child(even){padding-left:16px}
.v4-facts dt{font-family:var(--display);font-size:44px;line-height:1;color:var(--text)}
.v4-facts dd{margin:6px 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Our work: stacking cards (v3), bugs fixed (15 Oct):
   1. the header no longer slides away while the stack is on screen (v4/js/core.js), so cards never leave a gap at the top;
   2. card content clears the sticky call bar (padding = bar height) so "View the project" is always reachable;
   3. the reviews pill steps aside over the stack (core.js zones);
   4. a card that's being covered recedes a little (v4.js sets --cover 0..1). ---------- */
.v4-work{padding-bottom:0!important;background:var(--paper)}
.a-stack{position:relative}
.a-card{position:sticky;top:calc(var(--hdr-h) + var(--pills-h));height:calc(100svh - var(--hdr-h) - var(--pills-h));min-height:500px;max-height:900px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate;background:var(--ink);color:#fff;
  transform:scale(calc(1 - var(--cover,0) * .06));filter:brightness(calc(1 - var(--cover,0) * .45));transform-origin:50% 0;border-radius:calc(var(--cover,0) * 18px)}
.a-card picture,.a-card picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.a-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,14,13,.94) 0%,rgba(14,14,13,.6) 40%,rgba(14,14,13,.1) 72%)}
.a-card-body{width:100%;max-width:1280px;margin:0 auto;padding:0 16px calc(var(--bar-h,0px) + 22px)}
.a-card-k{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.a-card h3{font-size:clamp(36px,10.5vw,76px);font-weight:500;color:#fff;margin-top:8px}
.a-card-lead{margin-top:10px;max-width:560px;color:#EAE5DA;font-size:15px;font-family:var(--display);font-style:italic;font-size:19px;line-height:1.35}
.a-card-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.a-card-facts li{font-size:13px;color:#EAE5DA}
.a-card-facts b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.a-card .a-open{margin-top:16px;--b-bg:#fff;--b-ink:var(--ink)}
.a-count{font-size:12px;font-weight:600;opacity:.65;letter-spacing:.06em}
.a-card-n{position:absolute;top:16px;right:16px;font-family:var(--display);font-size:20px;color:var(--gold)}
@media (max-width:700px){.a-card-facts li:nth-child(n+3){display:none}.a-card-lead{font-size:17px}}
@media (max-height:640px) and (max-width:700px){.a-card-lead{display:none}}
.v4-more{padding-top:28px;padding-bottom:10px}
.v4-more-h{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.v4-more ul{display:grid;gap:10px;margin-top:12px}
.v4-more-b{display:flex;align-items:center;gap:14px;width:100%;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .25s}
.v4-more-b img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.v4-more-b span{display:flex;flex-direction:column;flex:1;font-size:13px;color:var(--muted)}
.v4-more-b b{font-family:var(--display);font-size:21px;font-weight:500;color:var(--text)}
.v4-more-b svg{width:18px;height:18px;color:var(--gold-deep)}
@media (hover:hover) and (pointer:fine){.v4-more-b:hover{border-color:var(--gold-deep)}}
/* project sheets (full-screen stories), light */
.a-sheet{position:fixed;inset:0;z-index:150;background:var(--paper);overflow:auto;overscroll-behavior:contain;animation:shIn .5s var(--ease)}
.a-sheet[hidden]{display:none}
@keyframes shIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.a-sh-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(251,248,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.a-sh-top .a-card-k{color:var(--gold-ink)}
.a-sh-x{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);font-size:28px;cursor:pointer}
.a-sh-body{max-width:1280px;margin:0 auto;padding:24px 16px 60px;display:grid;gap:16px}
.a-sh-head h3{font-size:clamp(38px,10vw,72px);font-weight:500}
.a-sh-head p{margin-top:10px;font-family:var(--display);font-style:italic;font-size:21px;color:var(--muted);max-width:640px}
.a-sh-head .a-card-facts li{color:var(--text)}
.a-sh-head .a-card-facts b{color:var(--muted)}
.a-sh-film,.a-sh-shot{margin:0}
.a-sh-film video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--ink)}
.a-sh-shot .j-zoom{aspect-ratio:auto}
.a-sh-shot img{width:100%}
.a-sh-shot figcaption,.a-sh-film figcaption{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.a-sh-cta{display:grid;gap:10px;margin-top:20px;padding:24px 18px;background:var(--ink);border-radius:6px}
.a-sh-cta p{font-family:var(--display);font-size:28px;color:#fff}
.a-sh-cta .btn-quote{--b-bg:#fff;--b-ink:var(--ink)}
@media (hover:hover) and (pointer:fine){.a-sh-x:hover{background:var(--ink);color:var(--gold)}}
.j-lb{z-index:220}

/* ---------- detail: the tap-the-dot photo leads the section ---------- */
.v4-hot{margin-bottom:28px}
.v4-hot .j-hot{margin:0}

/* ---------- builder ---------- */
.v4-builder h2{font-size:clamp(34px,9.6vw,44px)}

/* ---------- Where we build: paper map in an arch, sentence check, editorial index ---------- */
.v4-areas{background:#fff}
.v4-areas .cov{display:grid;gap:22px}
.v4-areas .cov-map{background:radial-gradient(80% 60% at 55% 45%,#F7F2E9 0%,#EFE8DA 100%);box-shadow:none;border:1px solid var(--line);aspect-ratio:auto;max-width:520px;width:100%;margin:0 auto;padding:60px 6px 6px}
.v4-areas .cov-svg{max-height:min(60svh,560px)}
.v4-areas .cov-dots circle{fill:#2A2722}
.v4-areas .cov-glow{display:none}
.v4-areas .cov[data-f] .cov-dots circle{opacity:.12}
.v4-areas .cov[data-f="r1"] .cov-dots .r1,.v4-areas .cov[data-f="r2"] .cov-dots .r2,.v4-areas .cov[data-f="r3"] .cov-dots .r3,.v4-areas .cov[data-f="r4"] .cov-dots .r4,.v4-areas .cov[data-f="r5"] .cov-dots .r5,.v4-areas .cov[data-f="r6"] .cov-dots .r6{opacity:1;fill:var(--gold-deep)}
.v4-areas .cov-dots circle.is-hit{fill:var(--gold-deep)}
.v4-areas .cov-labels text{fill:var(--text);stroke:#F3EDE2;font-family:var(--display);font-style:italic;font-weight:600}
.v4-areas .cov-hitlabel{fill:var(--ink);stroke:#F3EDE2;font-family:var(--display);font-weight:600}
.v4-areas .cov-ring{stroke:var(--gold-deep)}
.v4-areas .cov-sea{fill:var(--gold-deep);font-family:var(--body)}
.v4-areas .cov-reset{background:var(--ink);border-color:var(--ink)}
.v4-areas .cov-tip{background:var(--ink);color:#fff}
.v4-areas .cov-tip small{color:var(--on-dark-muted)}
.v4-areas .cov-hint{padding:4px 18px 14px;text-align:center}
.v4-areas .cov-credit{color:var(--muted)}
.v4-count{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v4-count b{display:block;font-family:var(--display);font-size:64px;font-weight:500;letter-spacing:0;line-height:1;color:var(--text);text-transform:none}
.v4-ask{margin-top:18px;background:none;color:var(--text);padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.v4-ask label{font-family:var(--display);font-size:clamp(32px,9vw,46px);font-weight:500;margin:0;line-height:1.1}
.v4-ask-row{display:inline-flex;align-items:baseline;flex:1 1 220px;min-width:0}
.v4-ask input{flex:1;min-width:0;min-height:52px;border:0;border-bottom:2px solid var(--gold-deep);border-radius:0;background:transparent;font-family:var(--display);font-style:italic;font-size:clamp(30px,8.6vw,44px);color:var(--gold-ink);padding:0 4px}
.v4-ask input::placeholder{color:#C9BFA9}
.v4-ask input:focus{outline:none;border-bottom-color:var(--ink);box-shadow:none}
.v4-q{font-family:var(--display);font-size:clamp(32px,9vw,46px);color:var(--text)}
.v4-ask .cov-go{margin-top:10px;--b-bg:var(--ink);--b-ink:#fff}
.v4-ask .cov-res{flex-basis:100%;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.v4-ask .cov-res b{color:var(--text)}
.v4-ask .cov-res .yes{color:var(--gold-ink)}
.v4-areas .cov-legend{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin-top:22px}
.v4-areas .cov-key{min-height:40px;padding:0 12px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:12.5px}
.v4-areas .cov-key[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.v4-areas .areas-note{margin-top:16px}
/* the index */
.v4-index{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--text)}
.v4-index .area-card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}
.v4-index .area-card h3{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:0;text-transform:none;gap:12px;padding:14px 0}
.v4-ix{font-family:var(--body);font-size:12px;font-weight:700;color:var(--gold-deep);letter-spacing:.1em}
.v4-index .area-n{font-family:var(--body);font-size:12px;color:var(--muted)}
.v4-index .area-list{gap:0 0;padding:0 0 16px;font-size:14px;line-height:1.9;color:var(--muted)}
.v4-index .area-list li{display:inline;padding:0;border:0;background:none;border-radius:0;font-size:14px;font-weight:400}
.v4-index .area-list li:not(:last-child)::after{content:", "}
.v4-index .area-list .is-here{color:var(--text);font-weight:700;background:linear-gradient(transparent 62%,rgba(216,200,159,.6) 62%);padding:0 2px}
.v4-index .area-card.is-match h3{color:var(--gold-ink)}
.v4-index .area-card.is-match{box-shadow:none}

/* ---------- wider screens ---------- */
@media (min-width:701px){
  .v4-pick{padding:34px 0}
  .v4-pick-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:32px;align-items:center}
  .v4 .sym-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:0}
  .v4 .sym{min-height:150px}
  .v4-man .a-man p{font-size:clamp(46px,4.6vw,74px)}
  .v4-man .wrap{max-width:1180px}
  .v4-facts{grid-template-columns:repeat(4,1fr);margin-top:56px}
  .v4-facts>div,.v4-facts>div:nth-child(odd),.v4-facts>div:nth-child(even){padding:22px 20px 8px;border-right:1px solid var(--line);border-bottom:0}
  .v4-facts>div:first-child{padding-left:0}
  .v4-facts>div:last-child{border-right:0}
  .v4-facts dt{font-size:60px}
  .a-card{border-radius:calc(var(--cover,0) * 22px)}
  .a-card-body{padding:0 clamp(20px,4vw,48px) clamp(44px,6vw,80px)}
  .a-card-facts{gap:10px 36px;margin-top:18px}
  .a-card-n{top:24px;right:clamp(20px,4vw,48px);font-size:26px}
  .v4-more ul{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
  .a-sh-top{padding:12px clamp(20px,4vw,48px)}
  .a-sh-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:40px clamp(20px,4vw,48px) 90px}
  .a-sh-head,.a-sh-cta,.a-sh-shot.wide,.a-sh-film{grid-column:1/-1}
  .a-sh-film video{aspect-ratio:16/9}
  .a-sh-shot:not(.wide) img{aspect-ratio:4/5;object-fit:cover}
  .a-sh-shot.wide img{aspect-ratio:16/9;object-fit:cover}
  .a-sh-cta{grid-template-columns:1fr auto auto;align-items:center;gap:16px}
  .v4-builder h2{font-size:clamp(44px,5vw,70px)}
  .v4-areas .cov{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:center}
  .v4-areas .cov-map{margin:0}
  .v4-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:0}
  .v4-index .area-card{border-top:1px solid var(--text);border-bottom:0;padding-top:4px}
}
@media (prefers-reduced-motion:reduce){.a-card{transform:none;filter:none}.a-sheet{animation:none}.js .v4 .a-man .w{opacity:1}}
.v4-index .area-list{display:none}
.v4-index .area-card.open .area-list{display:block}
/* stack dwell (15 Oct test): each card stays fully readable for ~half a screen of scroll before the next one slides over it.
   Without this, the next card started covering the text + button (at the card's bottom) the moment the card stuck. */
.a-card+.a-card{margin-top:48svh}
.a-stack{padding-bottom:20svh}
@media (prefers-reduced-motion:reduce){.a-card+.a-card{margin-top:0}.a-stack{padding-bottom:0}}
.a-stack{background:var(--ink)}   /* what shows behind a receding card is ink, not paper */
@media (min-width:1100px){
  .v4-hot .j-hot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;align-items:center}
  .v4-hot .j-hot-notes{grid-template-columns:1fr;gap:0;margin:0}
  .v4-hot .j-hot-notes li{border-top:0;border-bottom:1px solid var(--line);padding:14px 0;font-size:14px}
}
.v4-areas .cov-map{padding:96px 26px 10px}
/* phones: call + quote above the fold (v1's first-screen rule): shorter arch, buttons right under the headline */
@media (max-width:700px){
  .v4 .arch-hero{aspect-ratio:4/3;max-height:min(30svh,260px);border-radius:200px 200px 6px 6px}
  .v4 .j-hero{gap:16px;padding-top:14px}
  .v4 .j-hero-copy{display:flex;flex-direction:column}
  .v4 .j-hero-copy .kicker{order:1;margin-bottom:6px}
  .v4 .hero-title{order:2;font-size:clamp(40px,12vw,54px)}
  .v4 .j-tagline{order:3;font-size:22px;margin-top:6px}
  .v4 .hero-ctas{order:4;margin-top:14px}
  .v4 .a-hero-row{order:5}
  .v4 .hero-chips{order:6}
  .v4 .hero-route{order:7}
  .v4 .hero-sub{display:none}
  .v4 .j-loupe{width:84px;height:84px;bottom:-16px}
  .v4 .j-loupe span{font-size:12px;padding:10px 0 7px}
}
.v4-count b{margin-bottom:10px}
/* phones (16 Oct, Edoardo): one swipe = one project. No dwell gap: each card is a full-screen stop and the next slides over it.
   v4.js turns on snapping (html.stack-snap) only while the stack fills the screen; the stops are .a-snap markers it places
   at each card's arrival point, plus the section heading (way back up) and "More projects" (way out), so it never traps. */
@media (max-width:700px){
  .a-card+.a-card{margin-top:0}
  .a-stack{padding-bottom:0}
  .a-card{min-height:0}   /* a stop is exactly one screen under the header; 500px min pushed the button under the call bar at 320x568 */
  html.stack-snap{scroll-snap-type:y mandatory}
  .a-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--hdr-h) + var(--pills-h))}
  html.stack-snap .v4-work>.wrap,html.stack-snap .v4-more{scroll-snap-align:start;scroll-margin-top:calc(var(--hdr-h) + var(--pills-h))}
}
/* Services strip on phones: cards snapped flush to the screen edge; keep the page's 16px gutter at both ends */
.j-svc-grid{scroll-padding-inline:16px}

/* ================= Buttons (Edoardo 16 Oct, picked in /v4/lab/) =================
   Call  = lab 07 Joinery: champagne; two ink halves slide in and meet on hover/push, text turns champagne;
           at rest the handset rings every 4s (the 07 centre seam was dropped: it read as a cursor through the number).
   Quote = lab 03 Blueprint style: no fill, a hairline that draws itself when it comes on screen (v4.js .q-draw),
           with the 07 halves on hover/push (ink on light sections, white on dark ones); arrow nudges 2s after the ring.
   Navigation = lab 01: a gold light runs along the underline on hover/tap, over lab 07's faint rest line.
   Small = S1 Hairline phone pill; S4 frosted glass for the Services "Free quote" pill.
   Halves sit at z-index:-1 inside an isolated button: above its background, under its text. Hover = mouse only. */
@keyframes nlRing{0%,78%,100%{transform:none}81%{transform:rotate(-16deg)}84%{transform:rotate(13deg)}87%{transform:rotate(-10deg)}90%{transform:rotate(6deg)}93%{transform:none}}
@keyframes nlDraw{0%{background-size:0 2px,2px 0,0 2px,2px 0,0 1px,1px 0,0 1px,1px 0}25%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 0,0 1px,1px 0}50%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,0 1px,1px 0}75%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 0}100%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}}
@keyframes nlTrace{0%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}7%{background-size:100% 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}14%{background-size:100% 2px,2px 100%,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}21%{background-size:100% 2px,2px 100%,100% 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}28%,45%{background-size:100% 2px,2px 100%,100% 2px,2px 100%,100% 1px,1px 100%,100% 1px,1px 100%}51%{background-size:0 2px,2px 100%,100% 2px,2px 100%,100% 1px,1px 100%,100% 1px,1px 100%}57%{background-size:0 2px,2px 0,100% 2px,2px 100%,100% 1px,1px 100%,100% 1px,1px 100%}63%{background-size:0 2px,2px 0,0 2px,2px 100%,100% 1px,1px 100%,100% 1px,1px 100%}69%,100%{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}}   /* rest: a gold line draws itself round the outline, holds, undraws */
.v4 .btn[href^="tel:"],.v4 .btn-quote,.v4 .btn[href$="#enquire"]{overflow:hidden;isolation:isolate;border:0;border-radius:2px;box-shadow:none;transition:transform .2s var(--ease),color .3s}
.v4 .btn[href^="tel:"]::before,.v4 .btn[href^="tel:"]::after,.v4 .btn-quote::before,.v4 .btn-quote::after,.v4 .btn[href$="#enquire"]::before,.v4 .btn[href$="#enquire"]::after{
  content:"";position:absolute;top:0;bottom:0;width:60%;z-index:-1;background:var(--half);pointer-events:none;transition:transform .5s var(--ease)}
.v4 .btn[href^="tel:"]::before,.v4 .btn-quote::before,.v4 .btn[href$="#enquire"]::before{left:-9%;transform:translateX(-104%) skewX(-24deg)}
.v4 .btn[href^="tel:"]::after,.v4 .btn-quote::after,.v4 .btn[href$="#enquire"]::after{right:-9%;transform:translateX(104%) skewX(-24deg)}
/* call */
.v4 .btn[href^="tel:"]{--half:var(--ink);--c-hov:var(--gold);color:var(--ink);background:var(--gold)}
.v4 .btn[href^="tel:"] svg{color:currentColor;animation:nlRing 4s infinite}
/* quote: light sections */
.v4 .btn-quote,.v4 .btn[href$="#enquire"]{--half:var(--ink);--q-line:var(--ink);--q-tr:var(--gold-deep);--q-hov:#fff;color:var(--text);
  background:linear-gradient(var(--q-tr),var(--q-tr)) 0 0/0 2px no-repeat,linear-gradient(var(--q-tr),var(--q-tr)) 100% 0/2px 0 no-repeat,linear-gradient(var(--q-tr),var(--q-tr)) 100% 100%/0 2px no-repeat,linear-gradient(var(--q-tr),var(--q-tr)) 0 100%/2px 0 no-repeat,
  linear-gradient(var(--q-line),var(--q-line)) 0 0/100% 1px no-repeat,linear-gradient(var(--q-line),var(--q-line)) 100% 0/1px 100% no-repeat,linear-gradient(var(--q-line),var(--q-line)) 100% 100%/100% 1px no-repeat,linear-gradient(var(--q-line),var(--q-line)) 0 100%/1px 100% no-repeat,transparent;
  animation:nlTrace 6s 3s infinite}
.v4 .btn-quote svg,.v4 .btn[href$="#enquire"] svg{color:currentColor;animation:none}
/* quote: dark sections */
.v4 .rw-sum .btn-quote,.v4 .cta-band .btn-quote,.v4 .a-sh-cta .btn-quote,.v4 .m-bar .btn-quote,.v4 .on-dark .btn-quote,.v4 .site-footer .btn-quote{--half:#fff;--q-line:#fff;--q-tr:var(--gold);--q-hov:var(--ink);color:#fff}
.v4 .btn.q-draw{background-size:0 2px,2px 0,0 2px,2px 0,0 1px,1px 0,0 1px,1px 0;animation:none}
.v4 .btn.q-draw.in-view{animation:nlDraw 1.4s .15s var(--ease) both,nlTrace 6s 4.5s infinite}   /* first scroll: the outline draws itself; then the gold trace is its rest */
/* hover (mouse), focus and push (touch: core.js .tap for 600ms) */
.v4 .btn[href^="tel:"].tap::before,.v4 .btn[href^="tel:"]:active::before,.v4 .btn[href^="tel:"].tap::after,.v4 .btn[href^="tel:"]:active::after,
.v4 .btn-quote.tap::before,.v4 .btn-quote:active::before,.v4 .btn-quote.tap::after,.v4 .btn-quote:active::after,
.v4 .btn[href$="#enquire"].tap::before,.v4 .btn[href$="#enquire"]:active::before,.v4 .btn[href$="#enquire"].tap::after,.v4 .btn[href$="#enquire"]:active::after{transform:translateX(0) skewX(-24deg);transition-duration:.18s}
.v4 .btn[href^="tel:"].tap,.v4 .btn[href^="tel:"]:active,.v4 .btn-quote.tap,.v4 .btn-quote:active,.v4 .btn[href$="#enquire"].tap,.v4 .btn[href$="#enquire"]:active{transform:scaleX(.985)}
.v4 .btn[href^="tel:"].tap,.v4 .btn[href^="tel:"]:active,.v4 .btn[href^="tel:"]:focus-visible{color:var(--c-hov)}
.v4 .btn-quote.tap,.v4 .btn-quote:active,.v4 .btn-quote:focus-visible,.v4 .btn[href$="#enquire"].tap,.v4 .btn[href$="#enquire"]:active,.v4 .btn[href$="#enquire"]:focus-visible{color:var(--q-hov)}
.v4 .btn[href^="tel:"]:focus-visible::before,.v4 .btn[href^="tel:"]:focus-visible::after,.v4 .btn-quote:focus-visible::before,.v4 .btn-quote:focus-visible::after,.v4 .btn[href$="#enquire"]:focus-visible::before,.v4 .btn[href$="#enquire"]:focus-visible::after{transform:translateX(0) skewX(-24deg)}
@media (hover:hover) and (pointer:fine){
  .v4 .btn[href^="tel:"]:hover::before,.v4 .btn[href^="tel:"]:hover::after,.v4 .btn-quote:hover::before,.v4 .btn-quote:hover::after,.v4 .btn[href$="#enquire"]:hover::before,.v4 .btn[href$="#enquire"]:hover::after{transform:translateX(0) skewX(-24deg)}
  .v4 .btn[href^="tel:"]:hover{color:var(--c-hov);box-shadow:none}
  .v4 .btn[href^="tel:"]:hover svg{transform:none}
  .v4 .btn-quote:hover,.v4 .btn[href$="#enquire"]:hover{color:var(--q-hov);box-shadow:none}
  .v4 .btn-quote:hover svg,.v4 .btn[href$="#enquire"]:hover svg{animation:none;transform:translateX(4px);color:currentColor}
  .v4 .btn-quote:not(.q-draw):hover,.v4 .btn[href$="#enquire"]:not(.q-draw):hover,.v4 .q-draw.in-view:hover{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}
}
.v4 .btn-quote:not(.q-draw).tap,.v4 .btn-quote:not(.q-draw):active,.v4 .btn[href$="#enquire"]:not(.q-draw).tap,.v4 .btn[href$="#enquire"]:not(.q-draw):active,.v4 .btn-quote:not(.q-draw):focus-visible{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}

/* navigation: "View the project" (cards) and the Services "View ..." links */
.v4 .j-link{position:relative;border-bottom:0;padding-bottom:0;background:none;color:inherit;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.v4 .j-link::before,.v4 .j-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;pointer-events:none}
.v4 .j-link::before{background:currentColor;opacity:.32}
.v4 .j-link::after{background:linear-gradient(90deg,var(--nl-l) 0%,var(--nl-l) 40%,var(--nl-hi) 50%,var(--nl-l) 60%,var(--nl-l) 100%) 100% 0/250% 100% no-repeat;opacity:0;transition:opacity .3s,background-position .9s var(--ease)}
.v4 .j-link{--nl-l:var(--gold-deep);--nl-hi:#F4EBD3}
.v4 .j-svc .j-link{color:var(--text)}
.v4 .a-card .j-link{--nl-l:var(--gold);--nl-hi:#fff;color:#fff;margin-top:14px;padding:0;border:0;min-height:48px;gap:10px;font-size:13px}
.v4 .a-card .j-link .a-count{font-weight:600;letter-spacing:.1em;color:var(--on-dark-muted)}
.v4 .j-link svg{transition:transform .35s var(--ease)}
.v4 .j-svc-link.tap .j-link::after,.v4 .j-link.tap::after,.v4 .j-link:focus-visible::after{opacity:1;background-position:0 0}
@media (hover:hover) and (pointer:fine){
  .v4 .j-svc-link:hover .j-link::after,.v4 .j-link:hover::after{opacity:1;background-position:0 0}
  .v4 .j-svc-link:hover .j-link svg,.v4 .j-link:hover svg{transform:translateX(5px)}
  .v4 .j-svc-link:hover .j-link,.v4 .j-link:hover{color:inherit}
  .v4 .a-card .j-link:hover{color:#fff}
}

/* small: S1 Hairline phone pill (footer, FAQ intro, areas) */
@keyframes nlRingSm{0%,84%,100%{transform:none}87%{transform:rotate(-16deg)}90%{transform:rotate(12deg)}93%{transform:rotate(-8deg)}96%{transform:none}}
.v4 .tel-pill{padding:2px 11px;border-radius:30px;color:var(--ink);border:1px solid var(--gold-deep);background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 0/0% 100%;transition:background-size .4s var(--ease),color .25s,border-color .25s,transform .15s}
.v4 .site-footer .tel-pill{color:#fff;border-color:var(--gold)}
.v4 .tel-pill svg{animation:nlRingSm 6s infinite}
.v4 .tel-pill.tap,.v4 .tel-pill:active{background-size:100% 100%;color:var(--ink);border-color:var(--gold);transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.v4 .tel-pill:hover{background-color:transparent;background-size:100% 100%;color:var(--ink);border-color:var(--gold)}}
/* small: S4 frosted glass "Free quote" on the Services photos */
.v4 .j-svc-q{gap:8px;border-radius:30px;color:#fff;background:rgba(14,14,13,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 6px 18px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);transition:background-color .25s,color .25s,transform .15s}
.v4 .j-svc-q svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.v4 .j-svc-q.tap,.v4 .j-svc-q:active{background:var(--paper);color:var(--ink);transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.v4 .j-svc-q:hover{background:var(--paper);color:var(--ink)}.v4 .j-svc-q:hover svg{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){
  .v4 .btn svg,.v4 .btn-quote,.v4 .btn[href$="#enquire"],.v4 .q-draw.in-view,.v4 .tel-pill svg{animation:none!important}
  .v4 .q-draw{background-size:0 2px,2px 0,0 2px,2px 0,100% 1px,1px 100%,100% 1px,1px 100%}
}

/* call rest (Edoardo 16 Oct: "the number writes itself and then rings"): the first time a call button comes on screen (and only
   after the GHL pool has swapped, so it writes the TRACKED number) its digits write in one by one, then the handset rings.
   After that, every 6s a wave runs through the digits and it rings again. The moving digits are an aria-hidden copy (.nl-dial,
   v4.js) laid over the real number, which stays plain text for the pool and screen readers; the copy rebuilds on every swap.
   Without JS or under reduced motion: the plain number and the old 4s ring. */
@keyframes nlWrite{from{opacity:0;transform:translateY(60%);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes nlHop{0%,9%,100%{transform:none}3.5%{transform:translateY(-42%)}}
@keyframes nlRing6{0%,13%,100%{transform:none}15%{transform:rotate(-20deg) scale(1.18)}17%{transform:rotate(16deg) scale(1.18)}19%{transform:rotate(-12deg) scale(1.1)}21%{transform:rotate(8deg)}23%{transform:rotate(-4deg)}25%{transform:none}}
@keyframes nlRing1{0%,100%{transform:none}14%{transform:rotate(-20deg) scale(1.18)}28%{transform:rotate(16deg) scale(1.18)}42%{transform:rotate(-12deg) scale(1.1)}57%{transform:rotate(8deg)}71%{transform:rotate(-4deg)}}
.nl-numw{position:relative;display:inline-block}
.nl-dial{position:absolute;left:0;top:0;white-space:nowrap;letter-spacing:.06em;-webkit-text-fill-color:currentColor;pointer-events:none;visibility:hidden}
.nl-dial i{display:inline-block;font-style:normal;white-space:pre}
html:not(.tel-pending) .nl-on:not(.nl-wait) .nl-dial,html:not(.tel-pending) .nl-on.nl-go .nl-dial{visibility:visible}
html:not(.tel-pending) .nl-on:not(.nl-wait) .tel-inline,html:not(.tel-pending) .nl-on.nl-go .tel-inline{-webkit-text-fill-color:transparent}
.v4 .btn.nl-on svg{animation:nlRing6 6s 1.2s infinite}
.nl-on .nl-dial i{animation:nlHop 6s calc(1.2s + var(--i) * 45ms) infinite}
.v4 .btn.nl-go svg{animation:nlRing1 .8s 1.15s,nlRing6 6s 4.5s infinite}
.nl-go .nl-dial i{animation:nlWrite .5s calc(var(--i) * 55ms) both,nlHop 6s calc(4.5s + var(--i) * 45ms) infinite}

/* team (16 Oct): section 05 shows the crew in its arch and a strip of the nine faces from the client's About page.
   Phones: a swipe strip with the page gutter; desktop (1100+): one row of nine. Lift on hover (mouse) / tap. */
.v4-team{margin-top:40px}
.v4-team-head h3{font-size:clamp(28px,7.6vw,40px);font-weight:500}
.v4-team-head p{margin-top:8px;color:var(--muted);max-width:620px}
.v4-team-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;margin:20px -16px 0;padding:6px 16px 4px}
.v4-team-list::-webkit-scrollbar{display:none}
.v4-team-list li{flex:none;width:min(40vw,170px);scroll-snap-align:start}
.v4-team-list .arch{aspect-ratio:2/3;background:#8e8a83;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.v4-team-list .arch img{transition:transform .9s var(--ease)}
.v4-team-list b{display:block;margin-top:10px;font-family:var(--display);font-size:20px;font-weight:500;line-height:1.15}
.v4-team-list span{display:block;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.v4-team-list li.tap .arch{transform:translateY(-6px);box-shadow:0 14px 26px rgba(14,14,13,.18)}
@media (hover:hover) and (pointer:fine){.v4-team-list li:hover .arch{transform:translateY(-6px);box-shadow:0 14px 26px rgba(14,14,13,.18)}.v4-team-list li:hover .arch img{transform:scale(1.04)}}
@media (min-width:701px){.v4-team{margin-top:64px}.v4-team-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}.v4-team-head p{margin-top:0}}
@media (min-width:1100px){.v4-team-list{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:14px;overflow:visible;margin:26px 0 0;padding:6px 0 0}.v4-team-list li{width:auto}.v4-team-list b{font-size:18px}}
/* "Lucas & Anastasia call you back": both faces, overlapping */
.enq-faces{display:flex;flex:none}
.enq-faces img+img{margin-left:-16px}
.enq-faces img{box-shadow:0 0 0 2px var(--ink)}

/* dark sections (16 Oct, Edoardo: "the phone button disappears on hover", "free consultation is not visible"):
   the call's ink halves vanished into the black, so there they are cream with ink text; heading accents use the light champagne. */
.v4 .enquire .btn[href^="tel:"],.v4 .cta-band .btn[href^="tel:"],.v4 .a-sh-cta .btn[href^="tel:"],.v4 .m-bar .btn[href^="tel:"],.v4 .rw-sum .btn[href^="tel:"],.v4 .on-dark .btn[href^="tel:"]{--half:var(--paper);--c-hov:var(--ink)}
.v4 .enquire h2 em,.v4 .cta-band h2 em{color:var(--gold)}
/* featured Google review (16 Oct): words light up with the scroll like section 01 (v4.js wraps them; text unchanged) */
.js .v4 .rv-feat .w{opacity:.18;transition:opacity .35s}
.js .v4 .rv-feat .w.lit{opacity:1}
/* Where we build (16 Oct): every region closed at every width; a click opens it. A picked suburb (typed, map dot or the ad's
   suburb) opens its region and highlights the region and the suburb (core.js light()). */
.v4 .v4-index .area-card h3{cursor:pointer}
.v4 .v4-index .area-n{padding-right:22px}
.v4 .v4-index .area-n::after{display:block}
.v4 .v4-index .area-list{display:none}
.v4 .v4-index .area-card.open .area-list{display:block}
.v4 .v4-index .area-card.is-match{background:rgba(216,200,159,.2);box-shadow:-10px 0 0 rgba(216,200,159,.2),10px 0 0 rgba(216,200,159,.2)}
.v4 .v4-index .area-card.is-match h3,.v4 .v4-index .area-card.is-match .v4-ix{color:var(--gold-ink)}
.v4 .v4-index .area-list .is-pick{color:var(--text);font-weight:700;background:linear-gradient(transparent 58%,var(--gold) 58%);padding:0 3px}
@media (hover:hover) and (pointer:fine){.v4 .v4-index .area-card h3:hover{color:var(--gold-ink)}}
@media (min-width:701px){.v4 .v4-index .area-card h3{font-size:26px}}   /* 3 columns at every desktop width: names + count + arrow fit on one line */
/* the suburb answer (16 Oct): its two buttons stack on phones (the quote label was clipped at 150px), and its text is readable on cream */
.v4 .cov-res .cta-row .btn{flex:1 1 200px}
.v4 .v4-ask .cov-res p{color:var(--muted)}
/* privacy hero is dark: its gold accent uses the light champagne (same fix as the quote section, 16 Oct) */
.v4 .legal-hero h1 em{color:var(--gold)}
/* "Lucas & Anastasia call you back": balanced lines, never "back" alone (16 Oct phone pass) */
.v4 .enq-who-tag{text-wrap:balance}
/* privacy "Planning a build?" box is dark too (16 Oct pre-launch check: its quote button was ink on ink) */
.v4 .legal-cta .btn-quote,.v4 .legal-cta .btn[href$="#enquire"]{--half:#fff;--q-line:#fff;--q-tr:var(--gold);--q-hov:var(--ink);color:#fff}
.v4 .legal-cta .btn[href^="tel:"]{--half:var(--paper);--c-hov:var(--ink)}
/* process section is dark: the quote attribution uses the light champagne (16 Oct contrast check: 2.9:1 before) */
.v4 .j-process .j-quote footer{color:var(--gold)}
/* 16 Oct contrast (Edoardo: "go with your suggestions"): champagne numbers on light sections were 2.4:1.
   Large numbers (30px) -> #9A7F45 (3.6:1 on cream), 20px numbers -> #7D6636 (5.2:1). Dark sections keep the original gold. */
.v4 .ch-n,.v4 .j-phases i{color:#9A7F45}
.v4 .j-process .ch-n{color:var(--gold-deep)}
.v4 .j-det-n,.v4 .j-svc-no{color:#7D6636}
/* project card counter "01 / 03": a soft dark pill so it reads over pale sky and foliage */
.v4 .a-card-n{padding:3px 12px;border-radius:30px;line-height:1.3;background:rgba(14,14,13,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* same dark pill as the hero tag: reads over any photo */

/* ---- films (16 Oct): Lucas's reels. Card = the reel's silent preview in a small arch + title + play; tap = the reel with sound (#aRm) ---- */
.v4-film{display:flex;align-items:center;gap:14px;width:100%;max-width:460px;margin-top:22px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.v4-film-th{flex:0 0 auto;width:66px;aspect-ratio:3/4;background:var(--ink)}
.v4-film-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.v4-film-t small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.v4-film-t b{font-family:var(--display);font-size:21px;font-weight:500;line-height:1.12;color:var(--text)}
.v4-film-go{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-deep);color:var(--gold-ink);transition:background .25s,color .25s,border-color .25s}
.v4-film-go svg{width:16px;height:16px;margin-left:2px}
.v4-film.tap{transform:scale(.98);border-color:var(--gold-deep)}
.v4-film:focus-visible,.v4-fa:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.v4-film:hover{border-color:var(--gold-deep);box-shadow:0 12px 30px rgba(14,14,13,.08)}.v4-film:hover .v4-film-go{background:var(--ink);border-color:var(--ink);color:var(--gold)}}
.j-quote-wrap .v4-film{margin-top:20px}
.j-phase-head .v4-film{margin-top:18px}
.j-svcs .sec-head .v4-film{margin-top:18px}
/* arch that already plays a silent loop: the whole arch opens the reel; a frosted pill says so */
.v4-fa{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 22px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}
.v4-fa.v4-fa-cap{padding-bottom:58px}
.v4-fa-pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 6px;border-radius:40px;background:rgba(14,14,13,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(216,200,159,.55);transition:background .25s,transform .25s var(--ease)}
.v4-fa-pill i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink)}
.v4-fa-pill i svg{width:15px;height:15px;margin-left:2px}
.v4-fa-pill>span{display:flex;flex-direction:column;line-height:1.15;font-size:12px;text-align:left;color:rgba(255,255,255,.82)}
.v4-fa-pill b{font-size:14px;font-weight:600;color:#fff}
.v4-fa.tap .v4-fa-pill{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.v4-fa:hover .v4-fa-pill{background:var(--ink);transform:translateY(-2px)}}
.j-intro-film{background:var(--ink)}
.j-intro-film video{position:absolute;inset:0}
/* the rear extension walkthrough in its project sheet: portrait phone footage, one column on desktop */
.a-sh-film.tall video{aspect-ratio:4/5}
@media (min-width:701px){.a-sh-body:has(.a-sh-film.tall){grid-auto-flow:row dense}.a-sh-film.tall{grid-column:auto}.a-sh-film.tall video{aspect-ratio:4/5}}
@media (prefers-reduced-motion:reduce){.v4-film,.v4-fa-pill{transition:none}}

/* ---- home hero slides (16 Oct): one project photo per slide, 1.2s cross-fade every 6s; the first keeps the arch's load-in zoom ---- */
.j-slides .j-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
.j-slides .j-slide.is-on{opacity:1}
.j-slides .j-slide img{width:100%;height:100%;object-fit:cover;display:block}
.js .j-slides .j-slide:not(:first-child) img{animation:none}
.js .j-slides .j-slide.drift img{animation:slideDrift 7.2s linear both}
@keyframes slideDrift{from{transform:scale(1.07)}to{transform:scale(1)}}
.j-hero-tag{transition:opacity .35s}
.j-hero-tag.swap{opacity:0}
@media (prefers-reduced-motion:reduce){.j-slides .j-slide{transition:none}.js .j-slides .j-slide.drift img{animation:none}}