/* Self-hosted fonts — Geist and Instrument Serif, both SIL Open Font License 1.1 (see assets/fonts/*-OFL.txt). */
@font-face{font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap;src:url(assets/fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap;src:url(assets/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
html,body{margin:0;background:#000}
.bx-skip{position:absolute;left:-9999px}
.bx-skip:focus{left:16px;top:16px;z-index:100;background:#fff;color:#000;padding:8px 12px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
a{color:#F2F2F2;text-decoration:none}a:hover{color:var(--accent)}
.bx-root{--M:max(100vw,177.7vh);overflow-x:clip;background:#000;color:#F2F2F2;font-family:var(--sans);scrollbar-width:none;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
.bx-root *{box-sizing:border-box}
.bx-layer{position:absolute;inset:0;pointer-events:none}
.bx-mask{-webkit-mask-image:radial-gradient(circle 680px at 50% 55%,#000 0%,rgba(0,0,0,.8) 40%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle 680px at 50% 55%,#000 0%,rgba(0,0,0,.8) 40%,rgba(0,0,0,0) 100%)}
.bx-plate{position:absolute;left:50%;top:50%;width:calc(var(--M) * 1.1143);aspect-ratio:2272/1281;transform:translate(-50%,-50%);transform-origin:49.74% 61.51%;will-change:transform}
.bx-x{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-0.005em;line-height:.86}
.bx-lbl{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.bx-stone{color:var(--accent)}
.bx-pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.bx-pill .l{height:56px;padding:0 40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;letter-spacing:-0.01em;background:#F2F2F2;color:#000;white-space:nowrap;font-family:var(--sans)}
.bx-pill .c{width:56px;height:56px;flex:none;border-radius:50%;background:#161616;color:#FFF;display:inline-flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.bx-pill:hover .l{background:#FFF;color:#000}
.bx-pill:hover .c{transform:rotate(45deg)}
.bx-pill-s .l{height:44px;padding:0 24px;font-size:14px}
.bx-pill-s .c{width:44px;height:44px}
/* narrow phones: long CTA labels ("Discuss A Bespoke Solution") pushed the pill past the screen edge */
@media (max-width:400px){.bx-pill:not(.bx-pill-s) .l{padding:0 24px}}

/* ---------- screen content: shared in/out animation ----------
   Every [data-scr] group is "in", "up" (left going forward) or "down" (waiting below / left going back).
   Words sink into their own masks, the sticker and buttons fold into themselves.
   --d is set per item by main.js; --b (base delay), --k (stagger factor) and --td (duration) per group. */
[data-scr]{--b:0ms;--k:1;--td:.95s;--ez:cubic-bezier(.76,0,.24,1)}
.sw{display:inline-block;clip-path:inset(0);padding:.16em .03em;margin:-.16em -.03em}
.si{display:inline-block;will-change:transform;transition:transform var(--td) var(--ez) calc(var(--b) + var(--d,0) * var(--k) * 1ms)}
[data-st=up] .si{transform:translate3d(0,-135%,0)}
[data-st=down] .si{transform:translate3d(0,135%,0)}

[data-pop]{transform:rotate(var(--r,0deg));transition:transform var(--td) cubic-bezier(.7,-.35,.25,1.35) calc(var(--b) + var(--d,0) * var(--k) * 1ms),opacity calc(var(--td) * .6) ease calc(var(--b) + var(--d,0) * var(--k) * 1ms)}
[data-st=up] [data-pop],[data-st=down] [data-pop]{transform:rotate(calc(var(--r,0deg) - 28deg)) scale(0);opacity:0}

.bx-pill .l{clip-path:inset(0 0 0 0 round 999px);transition:background .35s ease,clip-path var(--td) var(--ez) var(--pl,0ms)}
.bx-pill .c{scale:1;transition:transform .45s cubic-bezier(.3,.7,.2,1),scale calc(var(--td) * .7) var(--ez) var(--pc,0ms)}
[data-scr] .bx-pill{--pd:calc(var(--b) + var(--d,0) * var(--k) * 1ms)}
[data-ph=out] .bx-pill{--pl:var(--pd);--pc:calc(var(--pd) + 260ms)}
[data-ph=in] .bx-pill{--pc:var(--pd);--pl:calc(var(--pd) + 220ms)}
[data-st=up] .bx-pill .l,[data-st=down] .bx-pill .l{clip-path:inset(0 0 0 100% round 999px)}
[data-st=up] .bx-pill .c,[data-st=down] .bx-pill .c{scale:0}

.bx-rule{display:block;height:1px;background:rgba(255,255,255,.32);transform-origin:0 50%;transition:transform calc(var(--td) * 1.2) var(--ez) calc(var(--b) + var(--d,0) * var(--k) * 1ms)}
[data-st=up] .bx-rule,[data-st=down] .bx-rule{transform:scaleX(0)}

[data-card]{transition:opacity calc(var(--td) * .8) ease calc(var(--b) + var(--d,0) * var(--k) * 1ms),transform var(--td) var(--ez) calc(var(--b) + var(--d,0) * var(--k) * 1ms)}
[data-st=up] [data-card],[data-st=down] [data-card]{opacity:0;transform:scale(.94)}

.bx-noanim,.bx-noanim *{transition:none!important}

/* ---------- shower layer (screen 03) ---------- */
.bx-shower{opacity:0;visibility:hidden}
/* stage = the visible screen (dvh excludes mobile browser bars) */
@supports (height: 100dvh){.bx-stage,.bx-view{height:100dvh!important}}
/* shower photo: exactly the stage height (whole picture top to bottom), at least full width, centred on the shower */
.bx-shower img{position:absolute;left:50%;top:50%;height:100%;width:auto;min-width:100%;aspect-ratio:1670/941;object-fit:cover;display:block;transform:translate(-50%,-50%);will-change:transform,filter}

.bx-scrim{opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 20%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 62%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.6) 100%)}

/* ---------- screen 02 — around the bath ---------- */
.text{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;font-weight:400;color:#E2E2E2}
.text+.text{margin-top:14px}
.bx-s2a,.bx-s2b,.bx-s2c,.bx-s2d,.bx-s3a,.bx-s3list{position:absolute;margin:0}
.bx-s2a .bx-lbl,.bx-s3a .bx-lbl{margin:0;color:#B3B3B3}
.bx-s2a .bx-rule,.bx-s3a .bx-rule{margin:14px 0 26px}
/* heading sits 24px above the bath (same size as the other section headings) */
.bx-s2a{left:80px;top:auto;transform:none;bottom:calc(50% - 6px + 0.0076 * var(--M));width:min(60vw,1000px)}
.bx-h2{margin:0;line-height:.93;font-size:clamp(46px,min(7.2vw,11.5vh),124px);color:#F2F2F2}
/* copy hugs the bath: right of it, and under the podium (aligned to its left edge unless the CTA needs the room) */
.bx-s2b{left:calc(50% + 0.15 * var(--M));bottom:calc(50% - 30px - 0.032 * var(--M));width:min(360px,calc(50% - 0.15 * var(--M) - 120px))}
.bx-s2c{left:min(calc(50% - 0.218 * var(--M)),calc(50% + 0.2134 * var(--M) - 670px));top:calc(50% + 30px + 0.141 * var(--M) + 36px);width:min(330px,26vw)}
/* CTA under the right corner of the podium, level with the left paragraph */
.bx-s2d{right:calc(50% - 0.2134 * var(--M));top:calc(50% + 30px + 0.141 * var(--M) + 36px)}

/* below 1920 (laptops): CTA centred under the podium, both copy blocks bottom-aligned with it, clear of the podium */
@media (max-width: 1919px){
.bx-s2b{left:calc(50% + 0.2134 * var(--M) + 24px);right:80px;width:auto;top:auto;bottom:calc(50% - 30px - 0.141 * var(--M) - 92px)}
.bx-s2c{left:80px;top:auto;bottom:calc(50% - 30px - 0.141 * var(--M) - 92px);width:min(300px,calc(50% - 0.218 * var(--M) - 100px))}
.bx-s2d{left:50%;right:auto;transform:translateX(-50%)}
}

/* ---------- screen 03 — around the shower ---------- */
.bx-s3a{left:80px;top:50%;transform:translateY(-50%);width:min(42vw,780px)}
.bx-s3a .text{max-width:440px}
.bx-s3a .bx-pill{margin-top:32px}
.bx-h3{margin:0 0 26px;line-height:.93;font-size:clamp(46px,min(7.2vw,11.5vh),124px);color:#F2F2F2}
.bx-s3list{list-style:none;padding:0;left:71vw;top:calc(50% + 40px);transform:translateY(-50%);width:min(21vw,340px);display:flex;flex-direction:column;gap:clamp(6px,1vh,10px)}
/* each service on its own frosted-glass card */
.bx-s3list li{display:grid;grid-template-columns:30px 1fr;column-gap:8px;padding:clamp(10px,1.5vh,14px) 16px;border-radius:16px;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.bx-s3list .n{font-size:12px;font-weight:500;letter-spacing:.12em;color:rgba(242,242,242,.55);padding-top:3px}
.bx-s3list h3{margin:0 0 6px;font-size:clamp(18px,2.4vh,24px);color:#F2F2F2}
.bx-s3list p{margin:0;font-size:13px;line-height:1.45;color:#C4C4C4}

@media (max-width: 760px), (max-aspect-ratio: 5/4){
.bx-nav,.bx-hcta,.bx-rail{display:none!important}
.bx-menu{display:inline-flex!important}
.bx-shower img{aspect-ratio:941/1672}
.bx-scrim{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 62%,rgba(0,0,0,.55) 100%)}
.bx-header{padding:0 16px!important}
/* bath scaled to fit the screen width (16px gutters); hero type tucks behind it like on desktop */
.bx-root{--M:calc((100vw - 32px) * 2.317)}
.bx-hero{left:16px!important;right:16px!important}
[data-bg]{-webkit-mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000);mask-image:linear-gradient(#0000,#000 18%,#000 82%,#0000)}
.bx-hero h1{font-size:68px!important}
.bx-sticker{padding:4px 10px 3px!important;border-radius:4px!important;font-size:10.5px!important;box-shadow:0 5px 15px rgba(0,0,0,.45)!important}
.bx-hbar{left:16px!important;right:16px!important;bottom:24px!important;flex-direction:column;align-items:stretch!important}
.bx-s2a,.bx-s3a{left:16px;right:16px;top:96px;bottom:auto;transform:none;width:auto}
.bx-h2{font-size:44px}
/* screen 02: only the second copy, sitting 24px above the CTA */
.bx-s2b{display:none}
.bx-s2c{left:16px;right:16px;width:auto;top:auto;bottom:104px}
.bx-s2d{left:16px;right:16px;top:auto;bottom:24px;transform:none}
.bx-h3{font-size:40px;margin-bottom:16px}
/* screen 03: services as a sideways-swipe strip of cards (next card peeks in) */
.bx-s3list{left:0;right:0;top:auto;bottom:96px;height:116px;transform:none;width:auto;flex-direction:row;gap:10px;padding:0 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bx-s3list::-webkit-scrollbar{display:none}
.bx-s3list li{flex:0 0 74%;scroll-snap-align:start;padding:14px 16px;border-radius:14px;height:116px}
/* screen 03: CTA pinned to the bottom of the screen, cards just above it */
.bx-s3a{bottom:24px}
.bx-s3a .bx-pill{position:absolute;left:0;bottom:0;margin:0}
/* intro copy sits 16px above the card strip (strip: 96px from bottom, 116px tall; s3a ends 24px from bottom) */
.bx-s3a .text{position:absolute;left:0;right:0;bottom:204px}
.bx-s3list h3{font-size:20px}
}

/* legibility over the LED strips without dimming the photo */
.text,.bx-lbl{filter:drop-shadow(0 0 10px rgba(0,0,0,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* =====================================================================
   BLOCKS 04–11 — premium editorial sections on solid grounds
   ===================================================================== */
:root{
  --ink:#0A0A0A;--graphite:#1A1917;--ivory:#F1ECE3;--stone:#D6D0C4;--stone-l:#E6E1D7;
  --paper:#F2F2F2;--text-d:#151412;--muted-d:#5E5A53;--muted-l:#A9A49B;--sky:var(--accent);
  --line-l:rgba(242,242,242,.14);--line-d:rgba(21,20,18,.16);
  --gut:clamp(16px,5.6vw,80px);--ez2:cubic-bezier(.22,.7,.2,1)
}
.bx-main{position:relative;background:var(--ink)}
/* the hero stays pinned underneath; block 04 rises over it */
.bx-root{position:sticky;top:0;z-index:0}
.bx-dim{background:#000;opacity:0;z-index:40}
.bx-header{transition:background .4s ease}

.sx{position:relative;z-index:1;padding:clamp(96px,15vh,168px) 0;font-family:var(--sans);-webkit-font-smoothing:antialiased}
.sx *,.ft *{box-sizing:border-box}
.sx-in{max-width:1600px;margin:0 auto;padding:0 var(--gut)}
.sx-ink{background:var(--ink);color:var(--paper)}
.sx-graphite{background:var(--graphite);color:var(--paper)}
.sx-ivory{background:var(--ivory);color:var(--text-d)}
.sx-stone{background:var(--stone);color:var(--text-d)}
.sx-stone-l{background:var(--stone-l);color:var(--text-d)}
.sx-ivory a,.sx-stone a,.sx-stone-l a{color:inherit}
.sx-ivory a:hover,.sx-stone a:hover,.sx-stone-l a:hover{color:inherit}

.sx-eyebrow{margin:0 0 28px;display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.sx-eyebrow span{display:inline-flex;align-items:center;gap:14px}
.sx-eyebrow span::after{content:'';width:40px;height:1px;background:currentColor;opacity:.5}
.sx-h{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;line-height:.93;font-size:clamp(46px,7.2vw,124px);max-width:14ch}
.sx-h-m{font-size:clamp(40px,5.2vw,92px);max-width:16ch}
.sx-h-2l{max-width:none}
.sx-h-xl{font-size:clamp(52px,9vw,168px);max-width:13ch}
.sx-lead{margin:0;max-width:440px;font-size:17px;line-height:1.6;opacity:.82}
.sx-lead-under{margin-top:28px}
.sx-body{margin:32px 0 0;max-width:500px;font-size:17px;line-height:1.6}
.sx-body-2{margin-top:16px;opacity:.72}
.sx-note{margin:16px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.08em;opacity:.6}
.sx-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:clamp(56px,8vh,96px)}
.sx-head-cta{justify-self:end}
.sx-foot{margin-top:56px}
.sx-center{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:64px}
.sx-center .sx-h{max-width:18ch}
.sx-center .sx-lead{margin-top:28px;max-width:520px}
.sx-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,128px);align-items:start}
.sx-sticky{position:sticky;top:140px}

/* pill variants for the editorial grounds */
.bx-pill-ink .l{background:var(--text-d);color:var(--ivory)}
.bx-pill-ink:hover .l{background:#000;color:var(--ivory)}
.bx-pill-ink .c{background:var(--text-d);color:var(--ivory)}
.bx-pill-ghost .l{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(242,242,242,.35)}
.bx-pill-ghost:hover .l{background:rgba(242,242,242,.08);color:var(--paper)}
.bx-pill-xl .l{height:72px;padding:0 52px;font-size:19px}
.bx-pill-xl .c{width:72px;height:72px}

/* reveal: headings rise word by word (same mask as the hero), the rest fades up in reading order */
[data-rv]{--b:0ms;--k:1;--td:1.05s;--ez:cubic-bezier(.76,0,.24,1)}
[data-rv] .si{transform:translate3d(0,135%,0)}
[data-rv].in .si{transform:none}
[data-rv] .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s ease calc(var(--rd,0) * 1ms),transform 1.1s var(--ez2) calc(var(--rd,0) * 1ms)}
[data-rv].in .r{opacity:1;transform:none}
[data-rv] .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ez) calc(var(--rd,0) * 1ms)}
[data-rv].in .wipe{clip-path:inset(0 0 0 0)}

/* ---------- 04 services: editorial rows ---------- */
.svc{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line-l)}
.svc-row{display:grid;grid-template-columns:96px minmax(0,1.15fr) minmax(0,1fr) 40px;gap:24px;align-items:baseline;padding:30px 0;border-top:1px solid var(--line-l);color:var(--paper)}
.svc-row:hover{color:var(--paper)}
.svc-n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--paper)}
.svc-t{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.9vw,46px);line-height:1;letter-spacing:.002em}
.svc-d{margin:0;max-width:420px;font-size:15px;line-height:1.6;color:var(--muted-l)}
.svc-a{justify-self:end;align-self:center;display:inline-flex;color:var(--muted-l)}
.svc-row .svc-t,.svc-row .svc-a svg,.svc-row .svc-d{transition:transform .6s var(--ez2),color .4s ease}
.svc-row:hover .svc-t{transform:translateX(10px);color:var(--sky)}
.svc-row:hover .svc-d{color:var(--paper)}
.svc-row:hover .svc-a svg{transform:rotate(45deg);color:var(--paper)}

/* ---------- 05 projects: asymmetric grid ---------- */
.pj-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:clamp(28px,3vw,48px) clamp(24px,2.6vw,40px)}
.pj{display:flex;flex-direction:column;text-decoration:none;color:var(--text-d)}
.pj-lg{grid-row:span 2}
.pj-media{position:relative;overflow:hidden;background:#cfc9bd;aspect-ratio:16/11}
.pj-lg .pj-media{aspect-ratio:auto;flex:1;min-height:420px}
.pj-media img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:var(--op,50% 50%);display:block;transform:translate3d(var(--hx,0px),calc(var(--py,0%) + var(--hy,0px)),0) scale(var(--ps,1));transition:transform 1.2s var(--ez2)}
.pj:hover .pj-media img{--ps:1.035}
.pj-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:20px;border-top:0}
.pj-t{margin:0 0 8px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2vw,32px);line-height:1}
.pj-m{margin:0;font-size:14px;color:var(--muted-d)}
.pj-link{flex:none;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--line-d)}
.pj-link svg{transition:transform .5s var(--ez2)}
.pj:hover .pj-link svg{transform:translateX(6px)}

/* ---------- 06 process: contents page with a progress line ---------- */
.pr{position:relative;padding-left:40px}
.pr-track{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-l)}
.pr-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--paper);transform-origin:0 0;transform:scaleY(var(--pp,0))}
.pr-list{list-style:none;margin:0;padding:0}
.pr-step{display:grid;grid-template-columns:clamp(72px,8vw,120px) minmax(0,1fr);gap:24px;padding:36px 0;border-top:1px solid var(--line-l)}
.pr-step:last-child{border-bottom:1px solid var(--line-l)}
.pr-n{font-family:var(--display);font-size:clamp(40px,4vw,64px);line-height:.9;color:rgba(242,242,242,.22);transition:color .6s ease}
.pr-t{margin:4px 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.3vw,36px);line-height:1}
.pr-d{margin:0;max-width:460px;font-size:16px;line-height:1.6;color:var(--muted-l)}
.pr-step>div{opacity:.38;transition:opacity .6s ease}
.pr-step.is-past>div{opacity:.6}
.pr-step.is-active>div{opacity:1}
.pr-step.is-active .pr-n{color:var(--sky)}
.pr-step.is-active .pr-d{color:#D9D5CE}

/* ---------- 07 estimator: editorial panel ---------- */
.est{max-width:1120px;margin:0 auto;background:var(--ivory);border:1px solid var(--line-d);padding:clamp(24px,4vw,56px)}
.est-top{display:flex;align-items:center;gap:28px;margin-bottom:40px}
.est-label{margin:0;flex:none;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.est-bar{flex:1;height:1px;background:var(--line-d);position:relative}
.est-bar span{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--text-d);transform-origin:0 50%;transform:scaleX(var(--ep,.1667));transition:transform .8s var(--ez2)}
.est-view{overflow:hidden;transition:height .6s var(--ez2)}
.est-track{display:flex;align-items:flex-start;transition:transform .9s var(--ez2)}
.est-step{flex:0 0 100%;min-width:0;margin:0;padding:0;border:0;transition:opacity .6s ease}
.est-step:not(.is-cur){opacity:0;pointer-events:none}
.est-q{display:block;padding:0;margin:0 0 28px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1}
.est-hint{margin:-12px 0 24px;font-size:14px;color:var(--muted-d)}
.est-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.est-opt{appearance:none;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:180px;padding:24px;background:transparent;color:var(--text-d);border:1px solid var(--line-d);border-radius:0;cursor:pointer;font:inherit;transition:background .35s ease,color .35s ease,border-color .35s ease}
.est-opt:hover{border-color:rgba(21,20,18,.45)}
.est-opt.is-on{background:var(--text-d);color:var(--ivory);border-color:var(--text-d)}
.est-opt:focus-visible,.est-next:focus-visible,.est-back:focus-visible,.faq-q:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.est-ot{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1}
.est-od{font-size:14px;line-height:1.5;opacity:.75}
.est-os{margin-top:auto;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.est-opt-s{min-height:120px}
.est-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.est-field{display:flex;flex-direction:column;gap:10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.est-field em{font-style:normal;opacity:.55;letter-spacing:.1em}
.est-field input{appearance:none;border:0;border-bottom:1px solid rgba(21,20,18,.35);background:transparent;padding:10px 0;font:400 18px 'Archivo',sans-serif;color:var(--text-d);letter-spacing:0;text-transform:none;border-radius:0}
.est-field input:focus{outline:none;border-bottom-color:var(--text-d)}
.est-range{margin:0 0 12px;font-family:var(--display);font-size:clamp(48px,7vw,104px);line-height:.95}
.est-sum{margin:0 0 20px;font-size:16px;color:var(--muted-d)}
.est-result-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px}
.est-foot{display:flex;align-items:center;gap:24px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line-d)}
.est-privacy{margin:0 auto 0 0;max-width:460px;font-size:13px;line-height:1.5;color:var(--muted-d)}
.est-back{appearance:none;background:none;border:0;padding:8px 0;cursor:pointer;color:var(--text-d);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--line-d)}
.est-next{appearance:none;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 32px;border:0;border-radius:999px;background:var(--text-d);color:var(--ivory);cursor:pointer;font:600 15px var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s ease,transform .4s var(--ez2)}
.est-next:disabled{opacity:.28;cursor:not-allowed}
.est-next:not(:disabled):hover svg{transform:translateX(4px)}
.est-next svg{transition:transform .4s var(--ez2)}
.est.is-done .est-foot{display:none}

/* ---------- 08 experience: video frame ---------- */
.sx-split-media{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.vid{position:relative;margin:0;aspect-ratio:16/11;overflow:hidden;background:#cfc9bd}
.vid-media{position:absolute;inset:0;overflow:hidden}
.vid-media img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;transform:translate3d(0,var(--py,0%),0)}
.vid-play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border:0;border-radius:50%;background:rgba(241,236,227,.92);color:var(--text-d);display:flex;align-items:center;justify-content:center;padding-left:4px;cursor:pointer;transition:transform .5s var(--ez2),background .3s ease}
.vid-play:hover{transform:scale(1.06);background:var(--ivory)}
.vid-cap{position:absolute;left:24px;bottom:22px;color:var(--ivory);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* ---------- 09 testimonials ---------- */
.tm{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:end;padding:56px 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);position:relative}
.tm-dev{grid-column:1/-1;margin:0;justify-self:start;padding:6px 10px;border:1px dashed rgba(242,242,242,.4);font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l)}
.tm-q{margin:0;font-size:clamp(24px,2.7vw,42px);line-height:1.3;font-weight:300;letter-spacing:-.01em;max-width:30ch}
.tm-who{padding-left:24px;border-left:1px solid var(--line-l)}
.tm-name{margin:0 0 6px;font-family:var(--display);text-transform:uppercase;font-size:22px}
.tm-meta{margin:0;font-size:14px;color:var(--muted-l)}
.tm-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.tm-nav{display:flex;align-items:center;gap:18px}
.tm-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-l);background:transparent;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tm-nav button:disabled{opacity:.35;cursor:default}
.tm-count{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em}
.tm[hidden]{display:none}
.tm.tm-in{animation:tm-in .7s var(--ez2) both}
@keyframes tm-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tm.tm-in{animation:none}}

/* ---------- 10 faq ---------- */
.faq{border-bottom:1px solid var(--line-d)}
.faq-i{border-top:1px solid var(--line-d)}
.faq-i h3{margin:0}
.faq-q{appearance:none;width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--text-d);font:500 clamp(18px,1.6vw,22px)/1.35 'Archivo',sans-serif}
.faq-s{flex:none;width:28px;text-align:center;font:300 28px/1 'Archivo',sans-serif;transition:transform .4s var(--ez2)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ez2)}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 56px 30px 0;max-width:640px;font-size:16px;line-height:1.65;color:var(--muted-d)}
.faq-i.is-open .faq-a{grid-template-rows:1fr}
/* full-height sections centre their content: with an accordion inside, every open/close re-centred the list and left ghost borders */
.sx-tall-md:has([data-faq]){align-items:flex-start}

/* ---------- 11 final CTA ---------- */
.sx-final{padding-top:clamp(120px,20vh,220px);padding-bottom:clamp(120px,18vh,200px)}
.fin-rule{display:flex;justify-content:space-between;padding-bottom:18px;margin-bottom:clamp(56px,10vh,120px);border-bottom:1px solid var(--line-l);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}
.fin-row{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap;margin-top:56px}
.fin-cta{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- footer ---------- */
.ft{position:relative;z-index:1;background:#070707;color:var(--paper);border-top:1px solid var(--line-l);padding:80px 0 32px;font-family:var(--sans)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px;padding-bottom:64px}
.ft-logo{font-family:var(--sans);font-size:22px;color:var(--paper)}
.ft-logo span{opacity:.3}
.ft-brand p{margin:20px 0 0;max-width:280px;font-size:15px;line-height:1.6;color:var(--muted-l)}
.ft-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.ft-col a,.ft-col p{margin:0;color:var(--muted-l)}
.ft-col a:hover{color:var(--paper)}
.ft-h{margin:0 0 8px!important;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--paper)!important}
.ft-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line-l);font-size:13px;color:var(--muted-l)}
.ft-bottom p{margin:0}
.ft-bottom nav{display:flex;gap:28px}
.ft-bottom a{color:var(--muted-l)}

/* ---------- editorial blocks: tablet & phone ---------- */
@media (max-width: 1100px){
.sx-head,.sx-split,.sx-split-media{grid-template-columns:minmax(0,1fr)}
.sx-head-cta{justify-self:start}
.sx-sticky{position:static}
.svc-row{grid-template-columns:56px minmax(0,1fr) 32px;row-gap:10px}
.svc-d{grid-column:2/3}
.svc-a{grid-row:1;grid-column:3}
.tm{grid-template-columns:minmax(0,1fr)}
.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
.sx{padding:88px 0}
.sx-lead{font-size:16px}
.pj-grid{grid-template-columns:minmax(0,1fr)}
.pj-lg{grid-row:auto}
.pj-lg .pj-media{flex:none;aspect-ratio:4/5;min-height:0}
.pj-cap{flex-direction:column;align-items:flex-start}
.pr{padding-left:24px}
.pr-step{grid-template-columns:minmax(0,1fr);gap:8px;padding:28px 0}
.est-opts,.est-opts-6,.est-fields{grid-template-columns:minmax(0,1fr)}
.est-opt{min-height:0;padding:18px}
.est-top{gap:16px;margin-bottom:28px}
.est-foot{flex-wrap:wrap}
.est-privacy{order:3;flex-basis:100%;margin:0}
.est-next{margin-left:auto}
.est{padding:24px 20px}
.est .bx-pill .l{padding:0 26px}
.tm-who{padding-left:16px}
.fin-rule{margin-bottom:56px}
.bx-pill-xl .l{height:56px;padding:0 32px;font-size:16px}
.bx-pill-xl .c{width:56px;height:56px}
.ft-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
[data-rv] .r,[data-rv] .wipe,[data-rv] .si{transition-duration:.01s!important;transition-delay:0s!important}
}

/* =====================================================================
   INNER PAGES — service, contact, projects, project detail
   Heading face is one variable: swap Anton for a serif here to restyle every page.
   ===================================================================== */
:root{--display:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--accent:#CDAA5E}
.sx-h,.svc-t,.pj-t,.pr-t,.pr-n,.est-q,.est-ot,.est-range,.tm-name{font-family:var(--display)}
.sx-h-s{font-size:clamp(36px,3.6vw,60px);max-width:14ch}
.sx-tight{padding:clamp(64px,10vh,112px) 0}
.bx-nav a[aria-current="page"]{color:var(--sky)}

/* mobile menu overlay */
.mnav{position:fixed;inset:0;z-index:45;background:var(--ink);padding:112px 16px 32px;display:flex;flex-direction:column;justify-content:space-between}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{padding:14px 0;border-bottom:1px solid var(--line-l);font-family:var(--display);text-transform:uppercase;font-size:40px;line-height:1;color:var(--paper)}
.mnav-open,.mnav-open body{overflow:hidden}

/* page hero (shared) */
.pg-hero{padding-top:clamp(140px,20vh,200px)}
.hero-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,112px);align-items:end}
.hero-copy .sx-lead{margin-top:32px}
.cta-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:44px}
.tlink{display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid currentColor;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:inherit}
.tlink:hover{color:var(--sky)}
.tlink svg{transition:transform .5s var(--ez2)}
.tlink:hover svg{transform:translateX(5px)}
.hero-media{margin:0;position:relative;aspect-ratio:4/5;max-height:72vh;width:100%;justify-self:end;overflow:hidden;background:#1d1b19}
.hero-media-tall{aspect-ratio:3/4}
.media-in{position:absolute;inset:0;overflow:hidden}
.media-in img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:var(--op,50% 50%);transform-origin:var(--op,50% 50%);transform:translate3d(0,var(--py,0%),0) scale(var(--zs,1))}
.meta-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(56px,9vh,96px);padding-top:20px;border-top:1px solid var(--line-l);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}
.meta-row p{margin:0}
.pg-hero-text .sx-h{max-width:12ch}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-l)}
.hero-count{margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}

/* prose column */
.prose{padding-top:8px}
.prose p{margin:0 0 22px;max-width:560px;font-size:clamp(18px,1.4vw,21px);line-height:1.6}
.prose p:first-child{font-size:clamp(22px,1.9vw,28px);line-height:1.4}
.prose p:last-child{margin-bottom:0}

/* service: what is included (two columns, numbered) */
.inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,112px)}
.inc-i{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:32px 0;border-top:1px solid var(--line-l)}
.inc-n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--sky);padding-top:6px}
.inc-t{margin:0 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,34px);line-height:1}
.inc-i p{margin:0;max-width:440px;font-size:16px;line-height:1.6;color:var(--muted-l)}

/* process list on a light ground */
.pr-light .pr-track,.pr-light .pr-step{border-color:var(--line-d)}
.pr-light .pr-track{background:var(--line-d)}
.pr-light .pr-fill{background:var(--text-d)}
.pr-light .pr-step{border-top-color:var(--line-d)}
.pr-light .pr-step:last-child{border-bottom-color:var(--line-d)}
.pr-light .pr-n{color:rgba(21,20,18,.18)}
.pr-light .pr-d{color:var(--muted-d)}
.pr-light .pr-step.is-active .pr-n{color:var(--accent)}
.pr-light .pr-step.is-active .pr-d{color:var(--text-d)}

/* contact */
.ct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,128px);align-items:start}
.ct-dl{margin:48px 0 0;padding:0}
.ct-dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--line-l)}
.ct-dl dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l);padding-top:4px}
.ct-dl dd{margin:0;font-size:17px;line-height:1.6}
.ct-social{display:flex;gap:20px;flex-wrap:wrap}
.ct-map{margin:32px 0 0;padding:24px;border:1px solid var(--line-l);color:var(--paper)}
.ct-map svg{display:block;width:100%;height:auto}
.cf{background:#fff;color:var(--text-d);padding:clamp(28px,4vw,56px)}
.cf .sx-eyebrow{margin-bottom:18px}
.cf-h{margin:0 0 36px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3vw,48px);line-height:.95}
.cf-f{display:flex;flex-direction:column;gap:8px;margin-bottom:26px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cf-f input,.cf-f textarea{appearance:none;border:0;border-bottom:1px solid rgba(21,20,18,.35);border-radius:0;background:transparent;padding:10px 0;font:400 18px/1.5 'Archivo',sans-serif;color:var(--text-d);letter-spacing:0;text-transform:none;resize:vertical}
.cf-f input:focus,.cf-f textarea:focus{outline:none;border-bottom-color:var(--text-d)}
.cf-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:12px}
.cf-note{margin:0;font-size:13px;color:var(--muted-d)}
.cf-ok{margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--line-d);font-size:18px;line-height:1.5}
.cf-ok:focus{outline:none}
.cf.is-sent .cf-f,.cf.is-sent .cf-foot{opacity:.35;pointer-events:none}

/* contact: what happens next / trust */
.st3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.st3 li{padding-top:24px;border-top:1px solid var(--text-d)}
.st3-n{display:block;margin-bottom:40px;font-family:var(--display);font-size:clamp(48px,5vw,80px);line-height:.9;color:rgba(21,20,18,.2)}
.st3 h3{margin:0 0 14px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.1vw,32px);line-height:1}
.st3 p{margin:0;max-width:360px;font-size:16px;line-height:1.6;color:var(--muted-d)}
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.trust li{padding:8px 32px 8px 0;margin-right:32px;border-right:1px solid var(--line-l)}
.trust li:last-child{border-right:0;margin-right:0}
.trust h3{margin:0 0 14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.trust p{margin:0;font-size:15px;line-height:1.6;color:var(--muted-l)}

/* projects catalogue: 3 columns, one large + two standard, mirrored on repeat */
.cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(40px,5vh,64px) clamp(20px,2.4vw,40px)}
.cat-lg{grid-column:span 2;grid-row:span 2}
.cat-lg.cat-flip{grid-column:2/span 2}
.cat .pj-media{aspect-ratio:4/5}
.cat-lg .pj-media{aspect-ratio:auto;flex:1;min-height:520px}
.cat-more{display:flex;justify-content:center;margin-top:clamp(64px,10vh,112px)}
.cat-btn{font-size:12px;padding:12px 2px}
.cat-btn:disabled{opacity:.45;cursor:default}

/* project detail */
.crumb{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}
.crumb a{color:var(--paper)}
.crumb a:hover{color:var(--sky)}
.pd-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end}
.pd-hero{position:relative;margin:clamp(48px,8vh,88px) 0 0;aspect-ratio:21/10;overflow:hidden;background:#1d1b19}
.pd-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-bottom:1px solid var(--line-l)}
.pd-meta>div{padding:24px 24px 24px 0;border-right:1px solid var(--line-l);margin-right:24px}
.pd-meta>div:last-child{border-right:0}
.pd-meta dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l);margin-bottom:10px}
.pd-meta dd{margin:0;font-size:18px}
.callout{margin:clamp(64px,10vh,112px) 0 0 auto;max-width:880px;padding:8px 0 8px 32px;border-left:2px solid var(--text-d);font-size:clamp(22px,2.2vw,34px);line-height:1.35;font-weight:300}
.ph{position:relative;aspect-ratio:4/5;background:repeating-linear-gradient(135deg,rgba(21,20,18,.06) 0 1px,transparent 1px 14px),#c5beb1;display:flex;align-items:center;justify-content:center}
.ph span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.55}
.ph-d{background:repeating-linear-gradient(135deg,rgba(242,242,242,.05) 0 1px,transparent 1px 14px),#1f1d1a;color:var(--paper)}
.ph-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.ph-f{margin:0}
.ph-f figcaption,.res-row figcaption,.res-full figcaption{margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.brief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,112px);margin-top:clamp(48px,8vh,88px);padding-top:32px;border-top:1px solid var(--line-d)}
.brief-l{margin:0 0 16px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d)}
.brief-t{margin:0;max-width:560px;font-size:clamp(20px,1.7vw,26px);line-height:1.45}
.sw-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:56px}
.sw-x{position:relative;aspect-ratio:1/1;display:block}
.sw-x em,.bd em{position:absolute;left:12px;bottom:10px;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(21,20,18,.7)}
/* material swatches — drawn in CSS until real material photography arrives */
.sw-stone{background:radial-gradient(120% 80% at 20% 30%,rgba(255,255,255,.35),transparent 60%),repeating-linear-gradient(115deg,rgba(90,80,68,.08) 0 2px,transparent 2px 23px),linear-gradient(160deg,#d9d1c4,#bfb4a3)}
.sw-brass{background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(115deg,#7d5f33,#d8b77a 32%,#a7834a 55%,#e8cf9d 78%,#8f6f3d)}
.sw-oak{background:repeating-linear-gradient(92deg,rgba(60,38,18,.12) 0 2px,transparent 2px 11px),linear-gradient(180deg,#a98260,#8a6645)}
.sw-plaster{background:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.5px) 0 0/7px 7px,linear-gradient(135deg,#cbc2b4,#b3a998)}
.sw-porcelain{background:radial-gradient(60% 45% at 50% 55%,#e9e6df 60%,#d8d4cb 61%,#f6f4ef 64%),#f4f2ed}
.sw-light{background:radial-gradient(90% 70% at 50% 0%,#fff1d6,#d6ae73 32%,#4a3f33 70%,#26221d)}
.sw-light em,.sw-brass em,.sw-oak em{color:rgba(255,255,255,.85)}
.plan{border:1px solid var(--line-l)}
.plan-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-l)}
.plan-tabs{display:flex;gap:4px}
.plan-tabs button,.plan-open{appearance:none;background:none;border:0;cursor:pointer;color:var(--muted-l);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px}
.plan-tabs button[aria-selected="true"]{color:var(--ink);background:var(--paper)}
.plan-open{color:var(--paper)}
.plan-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;padding:clamp(20px,3vw,48px);color:var(--paper)}
.plan-view svg{display:block;width:100%;height:auto}
.plan-key{list-style:none;margin:0;padding:0;align-self:center}
.plan-key li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-l);font-size:16px}
.plan-key span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--sans)}
.plan-note{margin:0;padding:12px 20px;border-top:1px solid var(--line-l);font-size:12px;color:var(--muted-l)}
.lb{width:min(1200px,94vw);max-height:92vh;padding:32px;border:0;background:var(--ink);color:var(--paper)}
.lb::backdrop{background:rgba(0,0,0,.8)}
.lb svg{display:block;width:100%;height:auto}
.lb-x{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--paper);font-size:32px;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(70px,8vw,120px);gap:10px}
.bd{position:relative;display:block}
.bd-1{grid-column:1/5;grid-row:1/4}.bd-2{grid-column:5/7;grid-row:1/3}.bd-3{grid-column:5/7;grid-row:3/5}
.bd-4{grid-column:1/3;grid-row:4/6}.bd-5{grid-column:3/5;grid-row:4/6}.bd-6{grid-column:5/7;grid-row:5/6}
.mat{list-style:none;margin:40px 0 0;padding:0;border-bottom:1px solid var(--line-d)}
.mat li{display:flex;gap:24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line-d);font-size:clamp(18px,1.5vw,22px)}
.mat span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted-d)}
.hgal-strip{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 var(--gut);scroll-padding:0 var(--gut);scrollbar-width:none}
.hgal-strip::-webkit-scrollbar{display:none}
/* overflow-y:hidden — a few px of vertical overflow made the strip a vertical scroller too, so a vertical swipe over it stopped scrolling the page on phones */
.hgal-i{flex:0 0 clamp(260px,28vw,420px);margin:0;scroll-snap-align:start}
.hgal-i figcaption{display:flex;gap:14px;margin-top:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.hgal-i figcaption span{color:var(--sky)}
.hgal-nav{display:flex;justify-content:flex-end;gap:12px;margin-top:32px}
.hgal-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-l);background:transparent;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hgal-nav button:hover{border-color:var(--paper)}
.res-full{position:relative;margin:0}
.res-full .media-in{position:relative;aspect-ratio:21/10;overflow:hidden}
.res-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(16px,2vw,32px)}
.res-row figure{margin:0}
.res-crop{position:relative;aspect-ratio:4/5}
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,112px);margin-top:8px}
.sum>div{padding-top:28px;border-top:1px solid var(--line-l)}
.sum h3{margin:0 0 20px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sky)}
.sum p{margin:0;max-width:560px;font-size:clamp(22px,2vw,30px);line-height:1.4;font-weight:300}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.rel .pj-media{aspect-ratio:4/5}

@media (max-width: 1100px){
.hero-split,.pd-top,.ct,.brief,.sum{grid-template-columns:minmax(0,1fr)}
.hero-media{justify-self:start;max-height:none;aspect-ratio:16/11}
.inc{grid-template-columns:minmax(0,1fr)}
.trust{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
.trust li:nth-child(2n){border-right:0;margin-right:0}
.plan-body{grid-template-columns:minmax(0,1fr)}
.cat{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-lg,.cat-lg.cat-flip{grid-column:span 2;grid-row:auto}
.cat-lg .pj-media{flex:none;aspect-ratio:16/11;min-height:0}
.rel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
.pg-hero{padding-top:120px}
.st3,.trust,.ph-row,.res-row,.rel,.cat{grid-template-columns:minmax(0,1fr)}
.cat-lg,.cat-lg.cat-flip{grid-column:auto}
.trust li{border-right:0;margin-right:0;padding:0 0 24px;border-bottom:1px solid var(--line-l)}
.pd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd-meta>div:nth-child(2n){border-right:0;margin-right:0}
.pd-hero,.res-full .media-in{aspect-ratio:4/3}
.ct-dl>div{grid-template-columns:minmax(0,1fr);gap:6px}
.sw-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-bar{flex-wrap:wrap}
.callout{padding-left:20px}
.board{grid-auto-rows:64px}
.bd em{left:8px;bottom:8px;font-size:9px;letter-spacing:.14em}
}

/* =====================================================================
   ABOUT · SERVICES · JOURNAL · ARTICLE
   ===================================================================== */
.sx-flush{padding-top:0}
.sx-tight-b{padding-bottom:clamp(40px,6vh,64px)}
.sx-tight-t{padding-top:clamp(40px,6vh,64px)}
.dev-tag{display:inline-block;margin:0 0 40px;padding:6px 10px;border:1px dashed currentColor;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.prose-d p{color:#D9D5CE}
.callout-d{border-left-color:var(--paper);font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:.95;max-width:none;margin-left:0}
.detail-media{position:relative;margin:56px 0 0;aspect-ratio:16/10;max-width:520px;overflow:hidden;background:#1d1b19}

/* about: six strengths in a 3×2 grid */
.bf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
.bf li{padding:28px 0 44px;border-top:1px solid var(--line-d)}
.bf span{display:block;margin-bottom:28px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.bf h3{margin:0 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.1vw,32px);line-height:1}
.bf p{margin:0;max-width:340px;font-size:16px;line-height:1.6;color:var(--muted-d)}

/* about: numbers */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-l)}
.stats li{padding:32px 28px 8px 0;margin-right:28px;border-right:1px solid var(--line-l)}
.stats li:last-child{border-right:0;margin-right:0}
.stat-n{margin:0 0 18px;font-family:var(--display);text-transform:uppercase;font-size:clamp(64px,8vw,132px);line-height:.88}
.stat-w{font-size:clamp(36px,3.6vw,60px);line-height:.95;min-height:calc(clamp(64px,8vw,132px) * .88);display:flex;align-items:flex-end}
.stats p:last-child{margin:0;max-width:260px;font-size:15px;line-height:1.55;color:var(--muted-l)}

/* about: team */
.team-photo{margin:0}
.ph-portrait{aspect-ratio:4/5}
.team-who{margin:40px 0 0;padding:20px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.team-name{margin:0 0 6px;font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1}
.team-role{margin:0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d)}
.team-contact{margin:32px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d)}
.team-photo + div .dev-tag{margin:32px 0 0}

/* services catalogue */
.hero-split-sm{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.hero-split-sm .sx-h{max-width:13ch}
.hero-detail{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:#1d1b19}
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.sc{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:var(--paper);isolation:isolate}
.sc:hover{color:var(--paper)}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);scale:var(--zs,1);z-index:-2;transition:transform 1.4s var(--ez2)}
.sc::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.05) 30%,rgba(10,10,10,.55) 62%,rgba(10,10,10,.92) 100%)}
.sc-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,36px);transition:transform .7s var(--ez2)}
.sc-n{display:block;margin-bottom:14px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--sky)}
.sc h3{margin:0 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.4vw,38px);line-height:1}
.sc p{margin:0 0 22px;max-width:340px;font-size:15px;line-height:1.55;color:#D9D5CE}
.sc-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(242,242,242,.4)}
.sc:hover img{transform:scale(1.045)}
.sc:hover .sc-txt{transform:translateY(-6px)}
.why{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line-d)}
.why li{padding:32px 0;border-top:1px solid var(--line-d)}
.why h3{margin:0 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,34px);line-height:1}
.why p{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:var(--muted-d)}

/* journal: featured + catalogue cards */
.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center;padding-bottom:clamp(48px,7vh,80px);border-bottom:1px solid var(--line-d)}
.feat-media{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;background:#cfc9bd}
.feat-media img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:var(--op,50% 50%);transform:translate3d(0,var(--py,0%),0);transition:scale 1.2s var(--ez2)}
.feat:hover .feat-media img{scale:1.03}
.feat-t{margin:0 0 20px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,60px);line-height:.95}
.feat-t a,.jc-t a{color:inherit}
.feat-x{margin:0 0 24px;max-width:480px;font-size:17px;line-height:1.6;color:var(--muted-d)}
.jc-meta{display:flex;gap:16px;margin:0 0 28px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)}
.feat .tlink,.jc .tlink{color:var(--text-d)}
.j-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px}
.j-h{margin:0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.j-head .hero-count{color:var(--muted-d)}
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,7vh,72px) clamp(20px,2.4vw,40px)}
.jc{display:flex;flex-direction:column;transition:opacity .8s ease calc(var(--rd,0) * 1ms),transform 1s var(--ez2) calc(var(--rd,0) * 1ms)}
.jc-new{opacity:0;transform:translateY(24px)}
.jc-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:20px;background:#cfc9bd}
.jc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.2s var(--ez2)}
.jc:hover .jc-media img{transform:scale(1.04)}
.jc .jc-meta{margin-bottom:12px}
.jc-t{margin:0 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,1.8vw,28px);line-height:1.02}
.jc-x{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--muted-d)}
.jc-foot{margin:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line-d);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d)}
.rel .jc .tlink{align-self:flex-start;margin-top:auto}

/* article */
.art-hero{padding-bottom:clamp(64px,10vh,112px)}
.art-hero>.sx-in{position:relative;z-index:1}
.art-hero .est-bg img{object-position:50% 60%;transform:none;top:0;height:100%}
.art-hero .est-bg::after{background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.68) 58%,rgba(8,8,8,.52) 100%),linear-gradient(180deg,rgba(8,8,8,.42) 0%,rgba(8,8,8,.76) 100%)}
.art-h{max-width:20ch}
.art-lead{margin:32px 0 28px;max-width:640px;font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:#D9D5CE}
.art-hero .jc-meta{color:var(--muted-l);margin:0}
.art-wrap{padding-top:clamp(64px,10vh,112px)}
.art-grid{display:grid;grid-template-columns:200px minmax(0,680px) 260px;justify-content:space-between;gap:48px;align-items:start}
.toc{position:sticky;top:120px}
.toc-h{margin:0 0 16px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-d)}
.toc a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:1px solid transparent;font-size:14px;line-height:1.4;color:var(--muted-d);transition:color .3s ease,border-color .3s ease}
.toc a:hover,.toc a.is-on{color:var(--text-d);border-left-color:var(--text-d)}
.art-body{font-size:18px;line-height:1.75}
.art-body p{margin:0 0 22px}
.art-intro{font-size:clamp(22px,1.9vw,28px);line-height:1.45}
.art-sec{padding-top:56px;margin-top:56px;border-top:1px solid var(--line-d);scroll-margin-top:110px}
.art-eb{margin:0 0 16px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d)}
.art-body h2{margin:0 0 24px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3vw,48px);line-height:.98}
.art-dl{margin:8px 0 0}
.art-dl>div{padding:22px 0;border-top:1px solid var(--line-d)}
.art-dl dt{margin-bottom:8px;font-family:var(--sans);font-weight:600;letter-spacing:.015em;text-transform:uppercase;font-size:18px;line-height:1.2}
.art-dl dd{margin:0;color:var(--muted-d);font-size:17px;line-height:1.65}
.art-inline-cta{margin-top:36px}
.art-aside{position:sticky;top:120px}
.art-cta{padding:28px;background:var(--text-d);color:var(--ivory)}
.art-cta .art-eb{color:var(--muted-l)}
.art-cta-t{margin:0 0 24px;font-size:17px;line-height:1.5}
.art-cta .bx-pill .l{background:var(--ivory);color:var(--text-d);height:48px;padding:0 22px;font-size:14px}
.art-cta .bx-pill .c{width:48px;height:48px;background:#2a2825;color:var(--ivory)}

@media (max-width: 1100px){
.bf{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats li:nth-child(2n){border-right:0;margin-right:0}
.sc-grid,.jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-split-sm{grid-template-columns:minmax(0,1fr)}
.hero-detail{aspect-ratio:16/9}
.feat{grid-template-columns:minmax(0,1fr)}
.art-grid{grid-template-columns:minmax(0,1fr) 240px}
.toc{display:none}
}
@media (max-width: 760px){
.bf,.stats,.sc-grid,.jgrid{grid-template-columns:minmax(0,1fr)}
.stats li{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line-l);padding-bottom:28px}
.sc{aspect-ratio:4/4.4}
.sc img{scale:var(--zs-m,var(--zs,1))}
.art-grid{grid-template-columns:minmax(0,1fr)}
.art-aside{position:static}
.art-body{font-size:17px}
.j-head{flex-direction:column;gap:8px}
}

/* service landing pages */
.inc-s{grid-template-columns:72px minmax(0,1fr);align-items:baseline;padding:26px 0}
.inc-s .inc-t{margin:0;font-size:clamp(22px,2vw,30px)}
.rel-svc{margin-top:48px}
.rel-svc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 32px}
.rel-svc .tlink{color:var(--text-d)}

/* =====================================================================
   ENQUIRY POPUP — compact, calm, two fields
   ===================================================================== */
.eq{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:clamp(32px,4vw,48px) clamp(24px,3.6vw,44px) clamp(28px,3.4vw,40px);border:0;border-radius:0;background:var(--ivory);color:var(--text-d);font-family:var(--sans);overflow:auto;box-shadow:0 40px 120px rgba(0,0,0,.45)}
.eq[open]{animation:eq-in .55s var(--ez2) both}
.eq::backdrop{background:rgba(5,5,5,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:eq-fade .4s ease both}
@keyframes eq-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes eq-fade{from{opacity:0}to{opacity:1}}
.eq-open,.eq-open body{overflow:hidden}
.eq *{box-sizing:border-box}
.eq-x{position:absolute;right:14px;top:14px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-d);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease}
.eq-x:hover{background:rgba(21,20,18,.07)}
.eq-eb{margin-bottom:18px;opacity:.65}
.eq-h{margin:0 0 14px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3.4vw,44px);line-height:.95}
.eq-lead{margin:0 0 32px;font-size:16px;line-height:1.55;color:var(--muted-d)}
.eq-f{display:block;margin-bottom:18px}
.eq-f input{width:100%;appearance:none;border:0;border-bottom:1px solid rgba(21,20,18,.3);border-radius:0;background:transparent;padding:14px 0;font:400 18px/1.4 'Archivo',sans-serif;color:var(--text-d)}
.eq-f input::placeholder{color:rgba(21,20,18,.45)}
.eq-f input:focus{outline:none;border-bottom-color:var(--text-d)}
.eq-f input[aria-invalid="true"]{border-bottom-color:#8A6A22}
.eq-err{display:block;min-height:0;margin-top:6px;font-size:13px;line-height:1.4;color:#8A6A22}
.eq-err:empty{display:none}
.eq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eq-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.eq-ts:empty{display:none}
.eq-ts{margin:8px 0 4px}
.eq-msg{margin:6px 0 0;padding:12px 14px;background:rgba(155,59,47,.08);color:#7d2f25;font-size:14px;line-height:1.45}
.eq-send{appearance:none;width:100%;height:58px;margin-top:22px;border:0;border-radius:999px;background:var(--text-d);color:var(--ivory);cursor:pointer;font:600 14px var(--sans);letter-spacing:.18em;text-transform:uppercase;transition:opacity .3s ease,background .3s ease}
.eq-send:hover{background:#000}
.eq-send:disabled{opacity:.55;cursor:progress}
.eq-send:focus-visible,.eq-x:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.eq-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted-d)}
.eq-note a{color:var(--text-d);text-decoration:underline;text-underline-offset:3px}
.eq-ok:focus{outline:none}
.eq-ok .eq-h{margin-top:4px}

/* footer: social row above the bottom line, studio credit after the legal links */
.ft-social{display:flex;flex-wrap:wrap;gap:12px 28px;padding-bottom:28px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ft-social a{color:var(--muted-l)}
.ft-social a:hover{color:var(--paper)}
.ft-credit{color:var(--muted-l)}
.ft-credit a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.ft-credit a:hover{color:var(--sky)}

/* process lists: no progress rail; active step number in the brand blue */
.pr{padding-left:0}
.pr-track{display:none}
.pr-step.is-active .pr-n{color:var(--accent)}
.sx-sticky .sx-h + .sx-lead{margin-top:28px}

/* ---------- 07 estimator on a photo: heavy frosted glass ---------- */
.sx-est-photo{background:#0b0a09;color:var(--paper);overflow:hidden}
.est-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.est-bg img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:50% 45%;transform:translate3d(0,var(--py,0%),0)}
.est-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.84) 0%,rgba(8,8,8,.68) 38%,rgba(8,8,8,.8) 100%)}
.sx-est-photo .sx-in{position:relative;z-index:1}
.sx-est-photo .sx-center{margin-bottom:50px}
.sx-est-photo .est{background:rgba(26,24,21,.34);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(44px) saturate(1.15);backdrop-filter:blur(44px) saturate(1.15);color:var(--paper)}
.sx-est-photo .est-bar{background:var(--line-l)}
.sx-est-photo .est-bar span{background:var(--paper)}
.sx-est-photo .est-opt{color:var(--paper);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.02)}
.sx-est-photo .est-opt:hover{border-color:rgba(255,255,255,.5)}
.sx-est-photo .est-opt.is-on{background:var(--ivory);color:var(--text-d);border-color:var(--ivory)}
.sx-est-photo .est-hint,.sx-est-photo .est-sum,.sx-est-photo .est-privacy{color:var(--muted-l)}
.sx-est-photo .est-field input{color:var(--paper);border-bottom-color:rgba(255,255,255,.35)}
.sx-est-photo .est-field input:focus{border-bottom-color:var(--paper)}
.sx-est-photo .est-foot{border-top-color:var(--line-l)}
.sx-est-photo .est-back{color:var(--paper);border-bottom-color:var(--line-l)}
.sx-est-photo .est-next{background:var(--ivory);color:var(--text-d)}
.sx-est-photo .est-next:disabled{opacity:.35}
.sx-est-photo .bx-pill-ink .l{background:var(--ivory);color:var(--text-d)}
.sx-est-photo .bx-pill-ink .c{background:#161616;color:#fff}

/* ---------- 08 experience: white ground, full height on large screens ---------- */
.sx-white{background:#fff;color:var(--text-d)}
.sx-white a{color:inherit}
@media (min-width: 1600px){
.sx-tall{box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.sx-tall>.sx-in{width:100%}
}

/* ---------- 09 testimonial: client line above the quote, photo gallery on the right ---------- */
.tm{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(40px,5vw,96px)}
.tm-main .tm-who{padding-left:0;border-left:0;margin-bottom:28px}
.tm-gal{position:relative}
/* not a native scroller: vertical page scrolling never latches onto it; arrows, horizontal swipe and touch drive it */
.tm-strip{gap:0;padding:0;scroll-padding:0;aspect-ratio:4/3;background:#151412;overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.tm-strip .hgal-i{flex:0 0 100%;height:100%}
.tm-strip img{display:block;width:100%;height:100%;object-fit:cover}
.tm-gal-nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:16px}
.tm-gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-l);background:transparent;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tm-gal-nav button:hover{border-color:var(--paper)}
@media (max-width: 1100px){
.tm{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 06 process: everything readable; hover dims the rest and drops a tilted photo card ---------- */
.ps .pr-step{position:relative}
.ps .pr-step>.pr-n,.ps .pr-step>div{opacity:1;transition:opacity .45s ease}
.ps .pr-n{color:var(--paper);transition:color .35s ease,opacity .45s ease}
.ps .pr-d{color:#D9D5CE}
.ps .sx-sticky{padding-top:58px}
@media (hover: hover) and (min-width: 1100px){
.ps .pr-list:hover .pr-step:not(:hover)>.pr-n,.ps .pr-list:hover .pr-step:not(:hover)>div{opacity:.28}
.ps .pr-step:hover .pr-n{color:var(--accent)}
.ps .pr-img{display:block;position:absolute;z-index:3;top:50%;right:var(--ix,0px);width:clamp(140px,10vw,190px);aspect-ratio:3/4;margin:0;overflow:hidden;pointer-events:none;background:#111;box-shadow:0 30px 60px rgba(0,0,0,.55);opacity:0;transform:translateY(-50%) rotate(var(--rot,0deg)) scale(.86);transition:opacity .4s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ps .pr-img img{width:100%;height:100%;object-fit:cover;display:block}
.ps .pr-step:hover .pr-img{opacity:1;transform:translateY(-50%) rotate(var(--rot,0deg)) scale(1)}
.ps .pr-d{max-width:min(380px,calc(100% - 170px))}
.ps .pr-step:nth-child(1){--rot:-7deg;--ix:-8px}
.ps .pr-step:nth-child(2){--rot:6deg;--ix:14px}
.ps .pr-step:nth-child(3){--rot:-4deg;--ix:-18px}
.ps .pr-step:nth-child(4){--rot:8deg;--ix:6px}
.ps .pr-step:nth-child(5){--rot:-6deg;--ix:-12px}
.ps .pr-step:nth-child(6){--rot:5deg;--ix:10px}
}

/* FAQ: white ground, full viewport height on screens wider than 1000px */
@media (min-width: 1000px){
.sx-tall-md{box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.sx-tall-md>.sx-in{width:100%}
}

/* screen 03 on large screens: copy and stage cards pulled towards the shower */
@media (min-width: 1600px){
.bx-s3a{left:17vw}
.bx-s3list{left:61.5vw;width:min(16vw,340px)}
}

/* final CTA on the vanity photo (same darkening as the estimator) */
.sx-photo{overflow:hidden}
.sx-photo>.sx-in{position:relative;z-index:1}

/* final CTA heading: one step smaller on laptop-size screens (≈1280–1919) */
@media (max-width: 1919px){
.sx-final .sx-h-xl{font-size:clamp(52px,min(7.2vw,11.5vh),124px)}
}

/* why-work-with-us list: same hover treatment as the home process block — dim the rest, drop a tilted photo card */
.why li{position:relative}
.why-img{display:none}
@media (hover: hover) and (min-width: 1100px){
.why li>h3,.why li>p{transition:opacity .45s ease,color .35s ease}
.why:hover li:not(:hover)>h3,.why:hover li:not(:hover)>p{opacity:.28}
.why p{max-width:min(520px,calc(100% - 200px))}
.why-img{display:block;position:absolute;z-index:3;top:50%;right:var(--ix,0px);width:clamp(140px,10vw,190px);aspect-ratio:3/4;margin:0;overflow:hidden;pointer-events:none;background:#d9d3ca;box-shadow:0 30px 60px rgba(30,24,18,.28);opacity:0;transform:translateY(-50%) rotate(var(--rot,0deg)) scale(.86);transition:opacity .4s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.why-img img{width:100%;height:100%;object-fit:cover;display:block}
.why li:hover .why-img{opacity:1;transform:translateY(-50%) rotate(var(--rot,0deg)) scale(1)}
.why li:nth-child(1){--rot:-7deg;--ix:-8px}
.why li:nth-child(2){--rot:6deg;--ix:14px}
.why li:nth-child(3){--rot:-4deg;--ix:-18px}
.why li:nth-child(4){--rot:8deg;--ix:6px}
}

/* service landing hero: copy block centred against the photo */
.sv-split{align-items:center}

/* service positioning block with a photo ground: full viewport height, light wash keeps the dark type readable */
.sv-pos{box-sizing:border-box;min-height:100vh;display:flex;align-items:center}
.sv-pos .est-bg img{object-position:50% 55%}
.sv-pos .est-bg::after{display:none}
/* copy sits on a frosted glass panel in the middle of the screen */
.sv-pos>.sx-in{box-sizing:border-box;width:calc(100% - 2 * var(--gut));max-width:1180px;margin:0 auto;padding:clamp(36px,4.2vw,72px);gap:clamp(36px,4.5vw,80px);align-items:center;background:rgba(246,242,236,.42);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.55);border-radius:4px;box-shadow:0 30px 80px rgba(40,32,24,.16),inset 0 1px 0 rgba(255,255,255,.6)}
.sv-pos .sx-h{margin-bottom:0}
@media (max-width: 760px){
.sv-pos>.sx-in{width:calc(100% - 32px);padding:28px 22px}
}

/* full-viewport sections (service landings) */
.sx-vh{box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.sx-vh>.sx-in{box-sizing:border-box;width:100%}

/* service "What's included": horizontal photo cards, one per item */
.inc-sx{padding-top:clamp(72px,10vh,120px);padding-bottom:clamp(56px,8vh,104px)}
.inc-sx .sx-head{margin-bottom:clamp(36px,5vh,64px)}
.inc-strip{list-style:none;margin:0;gap:clamp(16px,1.6vw,28px);padding:0 max(var(--gut),calc((100vw - 1600px) / 2 + var(--gut)));scroll-padding:0 max(var(--gut),calc((100vw - 1600px) / 2 + var(--gut)))}
.inc-c{flex:0 0 clamp(280px,27vw,480px)}
.inc-c figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:#1a1917}
.inc-c img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.inc-c:hover img{transform:scale(1.04)}
.inc-c-t{display:flex;gap:16px;align-items:baseline;margin-top:20px}
.inc-c .inc-n{padding-top:0}
.inc-c .inc-t{margin:0;font-size:clamp(22px,1.8vw,28px);line-height:1.05}
.inc-nav{margin-top:clamp(24px,3.5vh,40px)}
@media (max-width: 760px){
.inc-c{flex-basis:80vw}
}

/* hover photo cards only exist where a block opts in; never in the flow on small screens */
.pr-img{display:none}


/* related work on service landings: four equal cards, 2 × 2 */
.pj-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pj-grid-4 .pj-media{aspect-ratio:16/10}
@media (max-width: 760px),(max-aspect-ratio: 5/4){
.pj-grid-4{grid-template-columns:minmax(0,1fr)}
}

/* service process: centred heading, four steps underneath, each with its photo */
.ps-c{padding-top:clamp(72px,10vh,120px);padding-bottom:clamp(72px,10vh,120px)}
.ps-c-head{text-align:center;margin:0 auto clamp(40px,6vh,72px)}
.ps-c-head .sx-h{max-width:20ch;margin-left:auto;margin-right:auto}
.ps-c-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2vw,32px)}
.ps-c-i figure{margin:0 0 22px;aspect-ratio:5/4;overflow:hidden;background:#d9d3ca}
.ps-c-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ps-c-i:hover img{transform:scale(1.04)}
.ps-c-n{display:block;margin-bottom:10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.ps-c .pr-t{margin:0 0 10px;color:var(--text-d)}
.ps-c .pr-d{max-width:none;font-size:15px;color:var(--muted-d)}
@media (max-width: 1100px){
.ps-c-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@media (max-width: 560px){
.ps-c-list{grid-template-columns:minmax(0,1fr)}
}

/* glass panel: heading on top, copy underneath, one text size throughout */
.sv-pos>.sx-in{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vh,36px);max-width:980px}
.sv-pos .sx-h{max-width:none}
.sv-pos .prose{padding-top:0;columns:2;column-gap:clamp(24px,3vw,48px)}
.sv-pos .prose p,.sv-pos .prose p:first-child{margin:0 0 16px;max-width:none;font-size:clamp(17px,1.25vw,19px);line-height:1.6;break-inside:avoid}
.sv-pos .prose p:last-child{margin-bottom:0}
@media (max-width: 760px){
.sv-pos .prose{columns:1}
}
.ps-c-head .sx-eyebrow{justify-content:center;text-align:center}
/* panel: solid white, no glass */
.sv-pos>.sx-in{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:0 30px 80px rgba(40,32,24,.14)}

/* hero screen 3: small photo on the right of each step card (desktop only) */
.bx-th{display:none}
@media (min-width: 761px) and (min-aspect-ratio: 5/4){
.bx-s3list{width:min(23vw,400px)}
.bx-s3list li{grid-template-columns:30px minmax(0,1fr) auto;align-items:center}
.bx-s3list li>.n{align-self:start}
.bx-th{display:block;grid-column:3;margin:0 0 0 12px;width:clamp(44px,6.2vh,64px);aspect-ratio:1;border-radius:10px;overflow:hidden;background:#1a1917}
.bx-th img{display:block;width:100%;height:100%;object-fit:cover}
}
@media (min-width: 1600px){
.bx-s3list{width:min(19vw,420px)}
}

/* projects catalogue: two equal cards per row on every screen */
.cat,.cat.cat{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat .pj-media{aspect-ratio:16/11}
@media (max-width: 560px){
.cat{column-gap:12px;row-gap:28px}
.cat .pj-t{font-size:18px}
.cat .pj-cap{flex-direction:column;align-items:flex-start;gap:8px;padding-top:14px}
.cat .pj-m{font-size:13px;line-height:1.4}
.cat .pj-link{font-size:10px}
}

/* case study introduction: one viewport tall, every paragraph and the callout in one text size */
.pd-intro .prose p,.pd-intro .prose p:first-child,.pd-intro .callout{font-size:clamp(17px,1.25vw,19px);line-height:1.6;font-weight:400}
.pd-intro .prose p{margin-bottom:16px}
.pd-intro .callout{margin-top:clamp(40px,6vh,72px);max-width:560px;margin-left:calc(5 / 12 * 100% + clamp(48px,7vw,128px) * 7 / 12);padding:4px 0 4px 24px}
@media (max-width: 1100px){
.pd-intro .callout{margin-left:0}
}

/* placeholder frames now carry temporary photos */
.ph{overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* case study summary: full height, proper heading, three fuller columns */
.sum-h{margin-bottom:clamp(40px,6vh,72px)}
.sum-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,64px)}
.sum-3 p{font-size:clamp(17px,1.25vw,19px);line-height:1.6;font-weight:400;color:#D9D5CE}
.sum-3 p+p{margin-top:14px}
.sum-3 p:first-of-type{font-size:clamp(20px,1.6vw,24px);line-height:1.4;color:var(--paper)}
@media (max-width: 1100px){
.sum-3{grid-template-columns:minmax(0,1fr)}
}
/* intro flows straight into "Before" on the same white ground: tighter gap, no rule beside the callout */
.pd-intro{padding-bottom:clamp(40px,6vh,72px)}
.pd-before{padding-top:clamp(40px,6vh,72px)}
.pd-intro .callout{border-left:0;padding-left:0}
.pd-brief{padding-bottom:clamp(140px,18vh,200px)}
.pd-intro .prose{padding-top:0}

/* case study plan: single technical drawing, no tabs */
.plan-title{margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.plan-view svg text{font-feature-settings:"tnum"}

/* case study concept: one live photo, the material list switches it */
.cx-sx .sx-split{align-items:center}
.cx-media{position:relative;width:100%;height:min(66vh,720px);overflow:hidden;background:#e9e4dc}
.cx-i{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.cx-i.is-on{opacity:1;transform:scale(1)}
.cx-i img{display:block;width:100%;height:100%;object-fit:cover}
.cx-i figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.cx-list li{display:block;padding:0}
.cx-list button{position:relative;display:flex;gap:24px;align-items:baseline;width:100%;padding:16px 0;border:0;background:none;color:var(--text-d);font:inherit;font-size:clamp(18px,1.5vw,22px);text-align:left;cursor:pointer;opacity:.4;transition:opacity .35s ease}
.cx-list button:hover,.cx-list button.is-on{opacity:1}
.cx-list button.is-on span{color:var(--accent)}
.cx-bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--text-d)}
.cx-list button.is-on .cx-bar{animation:cxbar var(--cx-t,6s) linear forwards}
.cx-list.is-paused button.is-on .cx-bar{animation-play-state:paused}
@keyframes cxbar{to{width:100%}}
@media (max-width: 1100px){
.cx-media{height:auto;aspect-ratio:4/3}
}
.cx-sx{padding-top:clamp(64px,9vh,112px);padding-bottom:clamp(64px,9vh,112px)}

/* journal: plain hero foot, card footer is just the link on the left */
.hero-foot.hf-plain{border-top:0;padding-top:0;margin-top:clamp(20px,3vh,32px)}
.jc-foot{justify-content:flex-start;border-top:0;padding-top:4px}
.feat{border-bottom:0}

/* "Load More" (projects, journal): a proper rounded button on a light grey plate */
.cat-btn{border:0;border-radius:999px;background:rgba(21,20,18,.07);padding:18px 36px;font-size:12px;color:var(--text-d);transition:background .3s ease}
.cat-btn:hover{background:rgba(21,20,18,.12)}

/* journal hero: dark shower render behind the heading, darker on the text side */
.j-hero .est-bg img{object-position:60% 50%}
.j-hero .est-bg::after{background:linear-gradient(90deg,rgba(8,8,8,.86) 0%,rgba(8,8,8,.62) 55%,rgba(8,8,8,.45) 100%)}

/* ---------- article: no rules, numbered lists, takeaways, table, closing banner ---------- */
.art-hero .art-h{margin-bottom:0}
.art-sec{border-top:0;padding-top:0;margin-top:clamp(56px,8vh,80px)}
.art-ol{list-style:none;counter-reset:ao;margin:28px 0 28px;padding:0;display:grid;gap:26px}
.art-ol>li{counter-increment:ao;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px}
.art-ol>li::before{content:counter(ao,decimal-leading-zero);grid-row:span 2;padding-top:7px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent)}
.art-ol h3{margin:0 0 6px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;line-height:1.1}
.art-ol p{margin:0;font-size:17px;line-height:1.65;color:var(--muted-d)}
.art-ol-s{gap:14px;margin:0}
.art-ol-s p{color:var(--text-d)}
.art-key{margin-top:48px;padding:clamp(24px,3vw,40px);background:#F4F1EC}
.art-key h2{font-size:clamp(26px,2.2vw,34px);margin-bottom:22px}
.art-table-wrap{overflow-x:auto;margin:28px 0}
.art-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.art-table caption{caption-side:bottom;padding-top:12px;text-align:left;font-size:13px;color:var(--muted-d)}
.art-table th,.art-table td{padding:14px 16px;text-align:left;vertical-align:top}
.art-table thead th{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--text-d);color:var(--ivory)}
.art-table tbody tr:nth-child(odd){background:#F4F1EC}
.art-table tbody th{font-weight:600}
.art-body a:not(.bx-pill){color:inherit;text-decoration:none}
.art-body a:not(.bx-pill):hover{color:var(--accent)}
.art-faq,.art-faq .faq-i{border:0}
.art-faq .faq-i{margin-bottom:8px;padding:0 20px;background:#F4F1EC}
.art-byline{margin:40px 0 0;font-size:14px;color:var(--muted-d)}
.art-banner{position:relative;overflow:hidden;margin-top:40px;background:#0b0b0b;color:var(--paper);min-height:380px;display:flex;align-items:flex-end}
.art-banner .est-bg::after{background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.62) 60%,rgba(8,8,8,.35) 100%)}
.art-banner .est-bg img{object-position:60% 50%;transform:none;top:0;height:100%}
.art-banner-in{position:relative;z-index:1;padding:clamp(32px,4.5vw,56px)}
.art-banner-eb{margin:0 0 18px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-l)}
.art-banner-h{margin:0 0 18px;font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,4.4vw,64px);line-height:.95;max-width:12ch}
.art-banner-t{margin:0 0 30px;max-width:440px;font-size:17px;line-height:1.6;color:#D9D5CE}
/* sticky side card: wide enough for its button */
.art-grid{grid-template-columns:200px minmax(0,680px) 300px;gap:40px}
.art-cta .bx-pill{display:inline-flex;max-width:100%}
.art-cta .bx-pill .l{padding:0 20px;font-size:13px;white-space:nowrap}
@media (max-width: 1280px){
.art-grid{grid-template-columns:minmax(0,1fr) 290px}
}
@media (max-width: 1100px),(max-aspect-ratio: 5/4){
.art-grid{grid-template-columns:minmax(0,1fr)}
}
/* article: no background plates, numbers in the text colour */
.art-key{padding:0;background:none}
.art-ol>li::before{color:var(--text-d)}
.art-faq .faq-i{padding:0;background:none;margin-bottom:4px}
/* side card: pure white text and button */
.art-cta{color:#fff}
.art-cta .art-cta-t{color:#fff}
.art-cta .bx-pill .l{background:#fff;color:var(--text-d)}
/* article lists: no numbers at all, items separated by space only */
.art-ol>li{display:block}
.art-ol>li::before{content:none}
/* closing banner: strong brand-blue block, softly rounded, all copy in white */
.art-banner{background:linear-gradient(135deg,var(--accent) 0%,#315BD7 100%);border-radius:18px;color:#fff;min-height:0;align-items:stretch;isolation:isolate}
.art-banner::before{content:'';position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.art-banner-in{width:100%;padding:clamp(36px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start}
.art-banner-eb{color:rgba(255,255,255,.75)}
.art-banner-h{color:#fff;font-size:clamp(40px,4.4vw,64px);line-height:.95;letter-spacing:-.005em;max-width:none;margin:0 0 28px}
.art-banner-t{color:#fff;align-self:flex-start;margin:0 0 30px;max-width:560px}
.art-banner .bx-pill{align-self:flex-start}
.art-banner .bx-pill .l{background:#fff;color:var(--text-d)}
.art-banner .bx-pill .c{background:#2C55D0;color:#fff}
/* article FAQ: same accordion as the home page */
.art-faq{border-bottom:1px solid var(--line-d);margin:8px 0 40px}
.art-faq .faq-i{border-top:1px solid var(--line-d);background:none;padding:0;margin:0}

/* article typography: two text styles only — body (18px) and small (15px) */
.art-body{--art-t:18px;--art-s:15px}
.art-body p,.art-intro,.art-ol p,.art-ol-s p,.art-faq .faq-a p,.art-banner-t{font-size:var(--art-t);line-height:1.7;font-weight:400;color:var(--text-d)}
.art-intro{margin-bottom:22px}
.art-banner-t{color:#fff}
.art-faq .faq-q span:first-child{font-size:var(--art-t)}
.art-table,.art-table th,.art-table td,.art-table caption,.art-byline{font-size:var(--art-s);line-height:1.6}
.art-table tbody th{font-weight:400}
.art-table caption,.art-byline{color:var(--muted-d)}
@media (max-width: 760px){
.art-body{--art-t:17px;--art-s:14px}
}
.art-body .art-banner-t,.art-body .art-banner-h{color:#fff}
@media (max-width: 760px){
.art-banner-h{font-size:clamp(38px,10vw,56px)}
}

/* ---------- contact page ---------- */
.ct-hero .sx-h-xl{max-width:14ch}
.ct-main{padding-top:clamp(40px,6vh,72px)}
.ct-dl>div{border-top:0;padding:14px 0}
.ct-dl{margin-top:40px}
.ct-map-sx{padding-top:0}
.ct-gmap{position:relative;width:100%;aspect-ratio:21/9;min-height:320px;max-height:560px;overflow:hidden;background:#1a1917}
.ct-gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15)}
.ct-next>.sx-in{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(56px,9vh,96px)}
.ct-next .st3 li{border-top:0;padding-top:0}
.ct-next .st3-n{margin-bottom:24px;color:var(--accent)}
.ct-next .trust li{border-right:0;border-bottom:0;margin-right:0;padding:0 24px 0 0}
.ct-next .trust p{color:var(--muted-d)}
@media (max-width: 760px){
.ct-gmap{aspect-ratio:4/3;min-height:0}
}

/* ---------- about page ---------- */
.ab-hero .sx-in{text-align:center}
.ab-hero .sx-eyebrow{justify-content:center}
.ab-hero .sx-h{max-width:15ch;margin-left:auto;margin-right:auto}
.ab-hero .sx-lead{max-width:560px;margin:28px auto 0}
.ab-hero-cta{margin-top:36px;display:flex;justify-content:center}
.ab-hero .meta-row{text-align:left}
.ab-prose p,.ab-prose p:first-child{font-size:clamp(17px,1.25vw,19px);line-height:1.65;font-weight:400}
.ab-story .sx-split{align-items:center}
.ab-img{position:relative;margin:32px 0 0;aspect-ratio:16/10;overflow:hidden;background:#e9e4dc}
.ab-appr-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);align-items:stretch}
.ab-appr .ab-prose{margin-top:clamp(28px,4vh,48px)}
.ab-stack{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:560px}
.ab-stack figure{position:relative;margin:0;overflow:hidden;background:#1d1b19}
.ab-quote{padding-top:clamp(96px,16vh,180px);padding-bottom:clamp(96px,16vh,180px)}
.ab-quote .sx-in{text-align:center}
.ab-quote-t{margin:0 auto;max-width:16ch}
.ab-bf .sx-head{margin-bottom:clamp(36px,5vh,64px)}
.bf-c{flex:0 0 clamp(280px,27vw,460px)}
.bf-c figure{margin:0 0 20px;aspect-ratio:4/3;overflow:hidden;background:#e9e4dc}
.bf-c img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bf-c:hover img{transform:scale(1.04)}
.bf-n{display:block;margin-bottom:10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--accent)}
.bf-c h3{margin:0 0 10px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,1.8vw,28px);line-height:1.05}
.bf-c p{margin:0;font-size:16px;line-height:1.6;color:var(--muted-d)}
.ab-bf .tm-gal-nav button{border-color:var(--line-d);color:var(--text-d)}
.ab-bf .tm-gal-nav button:hover{border-color:var(--text-d)}
.ab-stats .stats{border-top:0;gap:clamp(24px,3vw,56px)}
.ab-stats .stats li{border-right:0;margin-right:0;padding:0}
.ab-stats .stat-n,.ab-stats .stat-w{font-size:clamp(48px,5vw,88px);line-height:.9;min-height:0;display:block;margin-bottom:16px}
.ab-stats .stats p:last-child{color:var(--muted-d)}
.ab-team .sx-split{align-items:center}
.ab-team .team-who{border:0;padding:0;margin:28px 0 24px}
@media (max-width: 1100px){
.ab-appr-in{grid-template-columns:minmax(0,1fr)}
.ab-stack{min-height:0;grid-template-rows:none}
.ab-stack figure{aspect-ratio:4/3}
}
.ab-stats .stats,.ab-stats .stats li{border:0}
/* Цифры идут сразу после тёмного экрана, и на стыке им не хватало воздуха:
   белое начиналось и тут же упиралось в крупные числа. Верхнее поле в полтора
   раза больше обычного секционного, нижнее не трогаем. */
.ab-stats{padding-top:clamp(144px,22vh,252px)}
.ab-story{padding-top:clamp(64px,9vh,112px);padding-bottom:clamp(64px,9vh,112px)}
.ab-story .ab-img{aspect-ratio:2/1}
.ab-story .ab-img{margin:0 0 32px}
.ab-story .ab-img{aspect-ratio:16/9}
.ab-quote{padding-top:clamp(64px,9vh,112px);padding-bottom:clamp(64px,9vh,112px)}
.ab-team{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.ab-team .team-photo .ph{max-height:calc(100vh - 2 * clamp(56px,8vh,96px) - 40px);aspect-ratio:4/5;margin:0 auto}
.ab-appr{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.ab-appr-in{align-items:center}
.ab-appr .ab-stack{min-height:0;height:min(68vh,640px)}
/* contact "what happens next": one compact group centred on the screen, a hairline between steps and trust points */
.ct-next>.sx-in{flex:none;justify-content:center;gap:0}
.ct-next .trust{margin-top:clamp(40px,6vh,64px);padding-top:clamp(32px,5vh,48px);border-top:1px solid rgba(21,20,18,.1)}

/* case palettes: extra material swatches */
.sw-marble{background:linear-gradient(118deg,transparent 40%,rgba(120,120,125,.35) 41%,transparent 43%),linear-gradient(160deg,transparent 62%,rgba(120,120,125,.25) 63%,transparent 65%),linear-gradient(140deg,#f3f2ef,#dedcd8)}
.sw-black{background:linear-gradient(135deg,#2a2a2a,#0f0f0f)}
.sw-charcoal{background:linear-gradient(135deg,#4a4a4c,#2c2c2e)}
.sw-slate{background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(135deg,#3b3d40,#26282a)}
.sw-grey{background:linear-gradient(135deg,#b9b7b2,#9a9893)}
.sw-concrete{background:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.6px) 0 0/6px 6px,linear-gradient(135deg,#a9a6a0,#7f7c77)}
.sw-chrome{background:linear-gradient(115deg,#8d9196,#eef0f2 35%,#9da2a7 55%,#f7f8f9 78%,#7e8388)}
.sw-green{background:linear-gradient(135deg,#1f4a43,#0f2e2a)}
.sw-sage{background:linear-gradient(135deg,#c7cbc0,#a9ae9f)}
.sw-terrazzo{background:radial-gradient(circle at 20% 30%,#8a8178 3px,transparent 4px),radial-gradient(circle at 70% 60%,#5e5853 2px,transparent 3px),radial-gradient(circle at 45% 80%,#b5a99b 3px,transparent 4px),radial-gradient(circle at 80% 20%,#6f6a64 2px,transparent 3px) 0 0/34px 34px,#d9d3ca}
.sw-bronze{background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),linear-gradient(120deg,#3a2a1e,#6b4a2e 45%,#2e2118)}
.sw-rose{background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.4) 46%,transparent 49%),linear-gradient(135deg,#d7a48a,#b7745c)}
.sw-gold{background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 12px),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 12px),linear-gradient(135deg,#e2c25a,#b8922e)}
.sw-chequer{background:conic-gradient(#111 25%,#f2f0ec 0 50%,#111 0 75%,#f2f0ec 0) 0 0/50% 50%}
.sw-star{background:radial-gradient(circle,#2b2b2b 18%,transparent 19%) 0 0/25% 25%,#ecebe7}
.sw-black em,.sw-charcoal em,.sw-slate em,.sw-green em,.sw-bronze em,.sw-concrete em{color:rgba(255,255,255,.85)}

/* ===================================================================
   TYPE SCALE — every running text on the site uses one of four roles.
   lead 18 · body 16 · small 14 · label 11 caps. Display headings are separate.
   =================================================================== */
:root{--t-lead:18px;--t-body:16px;--t-small:14px}
@media (max-width: 760px){:root{--t-lead:17px;--t-body:15px;--t-small:13px}}
/* lead */
.sx-lead,.sx-body,.prose p,.prose p:first-child,.ab-prose p,.ab-prose p:first-child,.pd-intro .prose p,.brief-t,
.sum-3 p,.sum-3 p:first-of-type,.feat-x,.art-cta-t,.cf-ok,.ct-dl dd,.pd-meta dd,.art-body p,.art-intro,.art-ol p,.art-faq .faq-a p,.art-banner-t,
.cx-list button,.mat li,.sv-pos .prose p{font-size:var(--t-lead);line-height:1.6;font-weight:400;letter-spacing:0}
/* body */
.pr-d,.ps-c .pr-d,.svc-d,.sc-txt p,.bf-c p,.bf p,.jc-x,.st3 p,.trust p,.why p,.inc-i p,.stats p:last-child,.faq-a p,.est-opt span,
.hgal-i p,.tm-who p:not(.tm-name),.ct-next .trust p,.ab-stats .stats p:last-child,.team-photo + div p.sx-body{font-size:var(--t-body);line-height:1.6;font-weight:400;letter-spacing:0}
/* small */
.pj-m,.tm-meta,.est-hint,.cf-note,.est-privacy,.sx-note,.art-byline,.art-table,.art-table th,.art-table td,.art-table caption{font-size:var(--t-small);line-height:1.5;letter-spacing:0}
/* label */
.sx-eyebrow,.tlink,.sc-link,.pj-link,.jc-meta,.brief-l,.art-eb,.toc-h,.sw-x em,.cx-i figcaption,.team-role,.est-label,.hero-count,.meta-row p,
.ph-f figcaption,.res-row figcaption,.res-full figcaption,.hgal-i figcaption,.ct-dl dt,.pd-meta dt,.trust h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1.5}
.art-body .art-eb{font-size:11px;line-height:1.5;margin-bottom:16px}
.art-body p.art-eb{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1.5}
.art-body p.art-byline{font-size:var(--t-small);line-height:1.5;color:var(--muted-d)}
.tm-who p.tm-meta{font-size:var(--t-small);line-height:1.5}
.art-table th{font-family:inherit;font-weight:600;letter-spacing:0}
.art-table thead th{font-family:var(--sans);font-size:11px;letter-spacing:.22em}

/* lead forms: real send states */
.cf-msg{margin:0 0 20px;font-size:var(--t-small);line-height:1.5;color:#b3261e}
.cf-ts:empty,.est-ts:empty{display:none}
.cf-ts,.est-ts{margin:0 0 16px}
.est-sent{margin:12px 0 0;font-size:var(--t-small);line-height:1.5;opacity:.85}
.est-sent.is-ok{color:#2e7d32;opacity:1}
.est-sent.is-err{color:#CDAA5E;opacity:1}
.sx-est-photo .est-sent.is-ok{color:#8fd19e}
/* legal placeholder pages */
.legal{max-width:760px}
.legal h2{margin:48px 0 12px;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);line-height:1}
.legal p{margin:0 0 16px;font-size:var(--t-body);line-height:1.7}
.legal-note{padding:14px 18px;background:#f4f1ec;font-size:var(--t-small)!important}
.legal a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.art-tip{padding:14px 18px;background:#f4f1ec;font-size:var(--t-body)!important}
.art-ul{margin:20px 0 24px;padding-left:20px}
.art-ul li{margin-bottom:10px;font-size:var(--t-lead);line-height:1.6}
.art-src .art-ul li{font-size:var(--t-body)}
@media (max-width: 760px){
.art-banner-in{padding:28px 20px}
.art-banner .bx-pill{max-width:100%}
.art-banner .bx-pill .l{padding:0 16px;font-size:13px;white-space:nowrap}
}
.cat-more[hidden],[hidden].cat-more{display:none!important}

/* case build stages: gallery starts on the grid line; short stories are a plain row */
.hgal-strip{padding-left:max(var(--gut),calc((100vw - 1600px) / 2 + var(--gut)));padding-right:max(var(--gut),calc((100vw - 1600px) / 2 + var(--gut)));scroll-padding:0 max(var(--gut),calc((100vw - 1600px) / 2 + var(--gut)))}
.tm-strip{padding:0;scroll-padding:0}
.build-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.build-row .hgal-i{flex:none;width:auto}
@media (max-width: 760px){.build-row{grid-template-columns:minmax(0,1fr)}}
/* header mark: roll-top bath silhouette before the wordmark */
.lg-w{font-weight:600}
/* included card with several views of one design: slow crossfade */
.inc-c .xf{position:relative}
.inc-c .xf img{position:absolute;inset:0;opacity:0;animation:xf3 12s infinite}
.inc-c .xf img:nth-child(1){position:relative;animation-delay:0s}
.inc-c .xf img:nth-child(2){animation-delay:4s}
.inc-c .xf img:nth-child(3){animation-delay:8s}
@keyframes xf3{0%{opacity:0}6%{opacity:1}33%{opacity:1}40%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.inc-c .xf img{animation:none}.inc-c .xf img:nth-child(1){opacity:1}}

/* ===================================================================
   MOBILE PASS — phones keep the photography the desktop shows on hover,
   long card runs become sideways strips, one type scale.
   =================================================================== */

/* hover photo lists (home process, "why work with us"): on touch screens and narrow layouts the photo
   sits as a small thumbnail on the right of each row, inside the row's own height */
@media (max-width: 1099px), (hover: none){
.pr-step,.why li{display:grid;grid-template-columns:minmax(0,1fr) minmax(88px,30%);column-gap:16px;align-items:stretch}
.pr-step>.pr-n,.pr-step>div,.why li>h3,.why li>p{grid-column:1}
.pr-step>.pr-n{grid-row:1}
.pr-step>div{grid-row:2}
.why li>h3{grid-row:1}
.why li>p{grid-row:2}
.pr-img,.why-img{display:block!important;position:relative!important;grid-column:2;grid-row:1/3;align-self:stretch;width:auto!important;min-height:88px;aspect-ratio:auto!important;margin:0;overflow:hidden;opacity:1!important;transform:none!important;box-shadow:none!important;pointer-events:none;background:#1a1917}
.why-img{background:#d9d3ca}
.pr-img img,.why-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.why p{max-width:none}
/* row rules: no frame above the first / below the last row, the dividers only whisper */
.why{border-bottom:0}
.why li{border-top-color:rgba(21,20,18,.08)}
.why li:first-child{border-top:0;padding-top:8px}
.pr-step{border-top-color:rgba(242,242,242,.07)}
.pr-step:first-child{border-top:0;padding-top:8px}
.pr-step:last-child{border-bottom:0}
.pr-light .pr-step{border-top-color:rgba(21,20,18,.08)}
}

@media (max-width: 760px){
/* type: one scale on phones */
.sx-h,.sx-h-m{font-size:42px}
.sx-h-s{font-size:34px}
.sx-h-xl{font-size:52px}
.bx-h2,.bx-h3{font-size:42px}
.faq-q,.art-faq .faq-q span:first-child{font-size:17px}
.pj-t,.cat .pj-t{font-size:22px}
.pj-link,.cat .pj-link{font-size:11px}
.pj-m{line-height:1.5}
.plan-note{font-size:var(--t-small)}
.bx-pill .l,.bx-pill-s .l{font-size:15px}

/* sideways strips: related projects and related articles — one card in full, the next one peeking in */
.pj-grid-4,.rel{display:flex;grid-template-columns:none;gap:12px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
.pj-grid-4::-webkit-scrollbar,.rel::-webkit-scrollbar{display:none}
.pj-grid-4>*,.rel>*{flex:0 0 62vw;min-width:0;scroll-snap-align:start}
.pj-grid-4 .pj-media,.rel .pj-media{aspect-ratio:4/5}
.rel .jc-media{aspect-ratio:4/5}

/* hero screens 02–03: deeper wash from the bottom so the copy above the cards reads on the photo */
.bx-scrim{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 56%,rgba(0,0,0,.86) 78%,rgba(0,0,0,.92) 100%)}
/* hero screen 03 cards: small photo on the right, like on desktop */
.bx-s3list li{grid-template-columns:26px minmax(0,1fr) 64px;align-items:start}
.bx-th{display:block;grid-column:3;grid-row:1;margin:0 0 0 10px;width:64px;height:84px;border-radius:10px;overflow:hidden;background:#1a1917}
.bx-th img{display:block;width:100%;height:100%;object-fit:cover}

/* estimator: the final submit spans the panel */
.est.is-last .est-next{flex:1 1 100%;justify-content:center;margin-left:0}

/* services catalogue, Bathroom Design: the bath sits above the copy, lighter wash */
.sc[href$="bathroom-design/"] img{inset:auto;top:-2%;left:-30%;width:160%;height:auto;aspect-ratio:2272/1281;object-fit:cover;scale:1;-webkit-mask-image:linear-gradient(#000 72%,#0000 98%);mask-image:linear-gradient(#000 72%,#0000 98%)}
.sc[href$="bathroom-design/"]::after{background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.5) 66%,rgba(10,10,10,.9) 100%)}
}

/* ==========================================================================
   MOBILE REVIEW — одна шкала текста, свайп-галереи, ни одно фото не теряется
   Только ≤760px. Десктоп этот блок не трогает.
   ========================================================================== */
.svc-img{display:none}

@media (max-width: 760px){
/* ---- шкала: 6 ступеней дисплея + метка; текст идёт токенами --t-* ---- */
:root{--m-h1:52px;--m-h2:40px;--m-h3:32px;--m-h4:26px;--m-h5:20px;--m-label:11px;--m-ls:.2em}
.sx-h-xl,.sx-final .sx-h-xl,.est-range,.st3-n,.stat-n{font-size:var(--m-h1);line-height:.92}
.sx-h,.sx-h-m,.bx-h2,.bx-h3,.art-banner-h,.feat-t,.callout-d,.ab-stats .stat-n,.ab-stats .stat-w{font-size:var(--m-h2);line-height:.94}
.sx-h-s,.art-body h2,.eq-h,.cf-h,.est-q,.team-name,.pr-n{font-size:var(--m-h3);line-height:.96}
.svc-t,.sc h3,.art-key h2,.tm-q,.pr-t,.inc-t,.st3 h3,.legal h2,.callout,.inc-s .inc-t{font-size:var(--m-h4);line-height:1.05}
.pj-t,.cat .pj-t,.jc-t,.bf-c h3,.inc-c .inc-t,.est-ot,.tm-name,.mat li,.brief-t,.sum-3 p:first-of-type,.bx-s3list h3,.cx-list button{font-size:var(--m-h5);line-height:1.1}
.tm-q{line-height:1.3;font-weight:300}
.sx-eyebrow,.bx-lbl,.svc-n,.pd-meta dt,.brief-l,.crumb,.ph-f figcaption,.res-row figcaption,.res-full figcaption,.hgal-i figcaption,.cx-i figcaption,.trust h3,.sum h3,.ft-h,.est-label,.est-field,.cf-f,.tm-count,.pj-link,.inc-n,.bf-n,.plan-tabs button,.plan-open,.vid-cap,.fin-rule,.ph span,.est-os,.est-back,.bx-s3list .n,.cat .pj-link{font-size:var(--m-label);letter-spacing:var(--m-ls)}
.svc-d,.pr-d,.inc-i p,.bf-c p,.st3 p,.trust p,.pj-m,.cat .pj-m,.tm-meta,.est-od,.cf-note{font-size:var(--t-body);line-height:1.6}
.art-body{font-size:var(--t-lead)}

/* ---- общий рецепт полосы: край в край, прилипание, без скроллбара ---- */
.ph-row,.res-row,.sw-row,.cx-media,.ps .pr-list,.svc{display:flex;grid-template-columns:none;gap:12px;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);padding-bottom:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ph-row::-webkit-scrollbar,.res-row::-webkit-scrollbar,.sw-row::-webkit-scrollbar,.cx-media::-webkit-scrollbar,.ps .pr-list::-webkit-scrollbar,.svc::-webkit-scrollbar{display:none}

/* до/после и результаты: вместо столбика во всю ширину — карточки 78vw, следующая выглядывает */
.ph-row>*,.res-row>*{flex:0 0 78vw;min-width:0;scroll-snap-align:start;margin:0}
.res-row{margin-top:16px}

/* палитра: пять квадратов в ряд вместо сетки 3+2 */
.sw-row{margin-top:32px}
.sw-x{flex:0 0 132px;scroll-snap-align:start}

/* материалы проекта: все фото сразу, а не по одному за вкладками */
.cx-media{height:auto;aspect-ratio:auto;background:transparent;overflow-y:hidden}
.cx-i{position:relative;inset:auto;opacity:1;transform:none;flex:0 0 78vw;aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start;background:#e9e4dc}
.cx-list{display:none}

/* процесс на главной: шесть карточек с фото вместо столбика с миниатюрами */
.ps .pr{padding-left:0}
.ps .pr-track,.ps .pr-fill{display:none}
.ps .pr-step{flex:0 0 78vw;min-width:0;display:flex;flex-direction:column;gap:10px;padding:0;border:0;scroll-snap-align:start}
.ps .pr-step>div{opacity:1}
.ps .pr-img{display:block;position:relative;top:auto;right:auto;order:-1;width:100%!important;min-height:0;aspect-ratio:4/3!important;opacity:1;transform:none;box-shadow:none;background:#1a1917;margin:0 0 6px}
.ps .pr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ps .pr-n{font-size:var(--m-label);letter-spacing:var(--m-ls);font-family:var(--sans);font-weight:600;color:var(--sky)}
.ps .pr-t{margin:0}
.ps .pr-d{max-width:none}

/* услуги на главной: карточки с фото в полосу, а не километр текста */
.svc{border:0}
.svc>li{flex:0 0 78vw;min-width:0;scroll-snap-align:start}
.svc-row{display:flex;flex-direction:column;gap:8px;height:100%;padding:0;border:0}
.svc-img{display:block;order:-1;margin:0 0 8px;aspect-ratio:16/10;overflow:hidden;background:#1a1917}
.svc-img img{display:block;width:100%;height:100%;object-fit:cover}
.svc-d{max-width:none}
.svc-a{align-self:flex-start;margin-top:auto;padding-top:10px}
.svc-row:hover .svc-t{transform:none}

/* шаги на третьем экране кино-блока: миниатюра крупнее, карточка выше */
.bx-s3list{height:132px}
.bx-s3list li{height:132px;padding:14px 14px}
.bx-th{width:72px;height:96px}
.bx-s3a .text{bottom:220px}
}


/* ============================================================================
   STUDIO EDITION — grotesque display (Geist, tight tracking), white / black
   grounds, hairlines, {01} numbering, arrow text links. Instrument Serif is kept
   only for the rare italic accent word. Block logic and markup stay the same.
   ============================================================================ */
:root{--ink:#0D0D0D;--graphite:#161616;--ivory:#FFFFFF;--stone:#F2F2F2;--stone-l:#F6F6F6;--paper:#F4F4F4;--text-d:#0D0D0D;--muted-d:rgba(12,12,12,.6);--muted-l:rgba(244,244,244,.62);--line-l:rgba(244,244,244,.16);--line-d:rgba(12,12,12,.14)}
.sx-white{background:#FFFFFF}
body{font-family:var(--sans)}
::selection{background:var(--accent);color:#fff}

/* display: one grotesque, sentence case, tight */
.bx-x,.sx-h,.svc-t,.pj-t,.pr-t,.est-q,.est-ot,.est-range,.tm-name,.inc-t,.cf-h,.callout-d,.stat-n,.stat-w,.team-name,.sc h3,.feat-t,.art-body h2,.eq-h,.art-banner-h,.bf-c h3,.bx-h2,.bx-h3,.pr-n,.legal h2,.st3 h3,.jc-t,.art-key h2,.st3-n,.bx-s3list h3{font-family:var(--display);font-weight:600;text-transform:none;letter-spacing:-.04em}
.bx-stone{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:inherit;font-size:1.06em}
.tm-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.8vw,44px);line-height:1.22;letter-spacing:-.01em}
.brief-t{font-weight:500;letter-spacing:-.02em;font-size:clamp(20px,1.8vw,28px);line-height:1.3}
.sum-3 p:first-of-type{font-weight:500;letter-spacing:-.02em;font-size:clamp(20px,1.6vw,24px);line-height:1.3}
.pr-n{font-weight:500;color:rgba(244,244,244,.3)}
.sx-lead,.sx-body,.svc-d,.pj-m,.tm-meta,.cf-note,.est-od,.ft-brand p,.ft-col p,.sum-3 p,.art-body{letter-spacing:-.005em}

@media (min-width:761px){
.sx-h{font-size:clamp(40px,5.6vw,92px);line-height:1.02;max-width:14ch}
.sx-h-m{font-size:clamp(34px,4.2vw,68px);max-width:16ch}
.sx-h-xl{font-size:clamp(44px,6.8vw,120px);max-width:13ch}
.bx-h2,.bx-h3{font-size:clamp(40px,min(5.4vw,9.4vh),92px);line-height:1.02}
.svc-t{font-size:clamp(26px,2.6vw,44px);line-height:1.04;letter-spacing:-.035em}
.pj-t{font-size:clamp(20px,1.6vw,26px);line-height:1.15;letter-spacing:-.03em}
.pr-t{font-size:clamp(22px,1.8vw,28px);line-height:1.15;letter-spacing:-.03em}
.pr-n{font-size:clamp(32px,3vw,48px);line-height:1}
.est-q{font-size:clamp(26px,2.6vw,38px);line-height:1.08}
.est-ot{font-size:clamp(20px,1.6vw,24px);line-height:1.1;letter-spacing:-.03em}
.est-range{font-size:clamp(44px,6vw,88px);line-height:1}
.tm-name{font-size:20px;line-height:1.15;letter-spacing:-.02em}
.inc-t{font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.03em}
.cf-h{font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.callout-d{font-size:clamp(30px,3.6vw,56px);line-height:1.05}
.stat-n{font-size:clamp(56px,6.8vw,112px);line-height:.95;letter-spacing:-.05em}
.stat-w{font-size:clamp(32px,3vw,50px);line-height:1}
.team-name{font-size:clamp(24px,2.1vw,32px);line-height:1.1}
.sc h3{font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.03em}
.feat-t{font-size:clamp(30px,3vw,48px);line-height:1.05}
.art-body h2{font-size:clamp(28px,2.6vw,40px);line-height:1.08}
.eq-h{font-size:clamp(28px,2.8vw,36px);line-height:1.05}
.art-banner-h{font-size:clamp(34px,3.6vw,52px);line-height:1.05}
.bf-c h3{font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:-.03em}
.bx-s3list h3{font-size:clamp(17px,2.2vh,21px);line-height:1.15;letter-spacing:-.02em}
}

/* labels: 11px, medium, accent mark; numbering in braces */
.sx-eyebrow,.bx-lbl,.svc-n,.inc-n,.crumb,.pd-meta dt,.sum h3,.ft-h,.pj-link,.est-label,.cf-f,.hgal-i figcaption,.tm-count,.sx-note,.est-back,.cat .pj-link,.res-row figcaption,.ph-f figcaption,.ft-social{font-weight:500;letter-spacing:.14em}
.sx-eyebrow{opacity:1;color:inherit}
.sx-eyebrow::before{content:'';flex:none;width:12px;height:12px;border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent);transform:translateY(3px)}
.sx-eyebrow span::after{display:none}
.svc-n,.inc-n,.bx-s3list .n,.sum h3{color:var(--accent)}
.svc-n::before,.inc-n::before,.bx-s3list .n::before{content:'{'}
.svc-n::after,.inc-n::after,.bx-s3list .n::after{content:'}'}
.svc-n{font-size:11px;letter-spacing:.08em}

/* header */
.bx-logo{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font-family:var(--sans);font-size:20px;line-height:1;font-weight:700;letter-spacing:-.03em}
.bx-logo .lg-w{font-weight:700}
.bx-logo span{font-weight:400;opacity:.35!important;letter-spacing:-.02em}

/* controls: filled capsules for the lead CTAs, arrow text links everywhere else */
.bx-pill{gap:0}
.bx-pill .c{display:none}
.bx-pill .l{height:auto;padding:0!important;border:0;background:transparent!important;color:inherit;font:500 17px/1.2 var(--sans);letter-spacing:-.02em;text-transform:none;transition:color .3s ease,clip-path var(--td) var(--ez) var(--pl,0ms)}
.bx-pill .l::before{content:'\21B3';margin-right:10px;color:var(--accent);font-size:15px;transition:transform .3s ease}
.bx-pill:hover .l::before{transform:translate(2px,1px)}
.bx-pill:hover .l{color:inherit;opacity:.72}
.bx-hcta .l,.bx-hbar .bx-pill .l,.sx-final .bx-pill .l,.mnav .bx-pill .l{height:48px;padding:0 24px!important;border-radius:999px;background:#F4F4F4!important;color:#0D0D0D;font-size:14px;letter-spacing:-.01em}
.bx-hcta .l::before,.bx-hbar .bx-pill .l::before,.sx-final .bx-pill .l::before,.mnav .bx-pill .l::before{content:none}
.bx-hcta .l::after,.bx-hbar .bx-pill .l::after,.sx-final .bx-pill .l::after,.mnav .bx-pill .l::after{content:'\2197';margin-left:10px;font-size:13px}
.bx-hcta:hover .l,.bx-hbar .bx-pill:hover .l,.sx-final .bx-pill:hover .l{background:#fff!important;opacity:1}
.bx-hcta .l{height:40px;padding:0 18px!important;font-size:13px}
.sx-ivory .bx-pill .l,.sx-white .bx-pill .l,.sx-stone .bx-pill .l,.sx-stone-l .bx-pill .l{color:#0D0D0D}
.est-next{height:48px;padding:0 24px;border:0;border-radius:999px;background:#F4F4F4;color:#0D0D0D;font:500 14px/1 var(--sans);letter-spacing:-.01em;text-transform:none}
.est-next:hover{background:#fff}
.est-opt{border-radius:0}
.pj-link{gap:8px;padding:7px 12px;border:1px solid var(--line-d);border-radius:999px;font-size:10px;letter-spacing:.12em}
.pj-link svg{display:none}
.bx-sticker{display:none!important}
.tm-nav button{border-color:var(--line-l)}

/* hero: quieter glass cards */
.bx-s3list li{border-radius:6px;background:rgba(13,13,13,.46);border:1px solid rgba(244,244,244,.12)}

/* footer: light, like a colophon */
.ft{background:#F2F2F2;color:#0D0D0D;border-top:0}
.ft-logo{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.03em;color:#0D0D0D}
.ft-logo span{font-family:var(--sans);font-size:inherit;font-weight:400;letter-spacing:-.02em;text-transform:none;opacity:.35;margin:0;vertical-align:baseline}
.ft-h{color:#0D0D0D!important}
.ft-brand p,.ft-col p,.ft-col a,.ft-social a,.ft-bottom,.ft-bottom a,.ft-credit{color:rgba(12,12,12,.6)}
.ft-col a:hover,.ft-social a:hover,.ft-bottom a:hover{color:#0D0D0D}
.ft-bottom{border-top-color:rgba(12,12,12,.12)}
.ft-credit a{color:#0D0D0D}
.ft-credit a:hover{color:var(--accent)}

/* mobile */
@media (max-width:760px){
:root{--m-h1:44px;--m-h2:36px;--m-h3:28px;--m-h4:24px;--m-h5:19px;--m-label:11px;--m-ls:.14em}
.sx-h-xl,.sx-final .sx-h-xl,.est-range,.st3-n,.stat-n{line-height:1}
.sx-h,.sx-h-m,.bx-h2,.bx-h3,.art-banner-h,.feat-t,.callout-d,.ab-stats .stat-n,.ab-stats .stat-w{line-height:1.04}
.sx-h-s,.art-body h2,.eq-h,.cf-h,.est-q,.team-name,.pr-n{line-height:1.08}
.svc-t,.sc h3,.art-key h2,.pr-t,.inc-t,.st3 h3,.legal h2,.callout,.inc-s .inc-t{line-height:1.12}
.pj-t,.cat .pj-t,.jc-t,.bf-c h3,.inc-c .inc-t,.est-ot,.tm-name,.mat li,.brief-t,.sum-3 p:first-of-type,.bx-s3list h3,.cx-list button{line-height:1.2}
.tm-q{font-size:26px;line-height:1.3}
.bx-hero h1{font-size:54px!important;line-height:1!important;letter-spacing:-.045em!important}
.bx-pill .l{font-size:16px}
}


/* ---- Studio edition, pass 2: gold accent, DB-style galleries, FAQ, process, stats ---- */
.sx-ivory,.sx-white,.sx-stone,.sx-stone-l,.ft,.art-body,.legal,.ab-stats{--accent:#8A6A22}
::selection{background:#0D0D0D;color:#fff}

/* projects on the home page: one large, two small, one wide */
@media (min-width:761px){
.pj-grid-4{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pj-grid-4 .pj:nth-child(1){grid-row:1/3;grid-column:1}
.pj-grid-4 .pj:nth-child(1) .pj-media{aspect-ratio:auto;flex:1;min-height:0}
.pj-grid-4 .pj:nth-child(2),.pj-grid-4 .pj:nth-child(3){grid-column:2}
.pj-grid-4 .pj:nth-child(2) .pj-media,.pj-grid-4 .pj:nth-child(3) .pj-media{aspect-ratio:16/11}
.pj-grid-4 .pj:nth-child(4){grid-column:1/-1}
.pj-grid-4 .pj:nth-child(4) .pj-media{aspect-ratio:21/9}
}
.pj-cap{padding-top:18px}
.pj-m{font-size:14px}

/* FAQ rows */
.faq .faq-q{padding:26px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.faq .faq-q span:first-child{max-width:36ch}
.faq .faq-s{color:var(--accent);font:300 26px/1 var(--sans);width:24px}
.faq .faq-a p{font-size:15px;line-height:1.6;color:var(--muted-d)}

/* process: small numbered rows, hover photo stays */
.pr-step{grid-template-columns:52px minmax(0,1fr);gap:20px;padding:30px 0}
.pr-n,.ps .pr-n{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1;padding-top:7px;color:var(--accent)}
.pr-n::before{content:'{'}
.pr-n::after{content:'}'}
.pr-t{margin:0 0 10px;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.pr-d,.ps .pr-d{font-size:15px;line-height:1.6;max-width:440px;color:var(--muted-l)}
.pr-step>div,.pr-step.is-past>div{opacity:1}
.pr-step.is-active .pr-n,.ps .pr-step:hover .pr-n{color:var(--accent)}
.ps .pr-list:hover .pr-step:not(:hover)>div{opacity:.4}

/* stats: numbers print themselves, hairline above the caption */
.stat-n{font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.ab-stats .stats{gap:0 clamp(24px,3vw,56px)}
.ab-stats .stat-n,.ab-stats .stat-w{margin:0 0 20px;font-size:clamp(52px,6vw,96px);line-height:.95}
.stats li>p:last-child{position:relative;margin:0;padding-top:18px;font-size:14px;line-height:1.5;max-width:260px}
.stats li>p:last-child::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.18}

/* quieter lead copy, as on the reference */
.sx-lead{font-size:16px;line-height:1.6;opacity:.72}

@media (max-width:760px){
.ab-stats .stats{gap:32px 0}
.ab-stats .stat-n,.ab-stats .stat-w{font-size:var(--m-h1);margin-bottom:14px}
.faq .faq-q{font-size:16px;padding:22px 0}
}


/* ---- legal pages: lists, tables, update note ---- */
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin:0 0 10px;font-size:var(--t-body);line-height:1.7}
.legal-note{background:#F4F4F4;color:var(--muted-d)}
.legal-t{width:100%;margin:8px 0 20px;border-collapse:collapse;font-size:14px;line-height:1.5}
.legal-t th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 16px 12px 0;border-bottom:1px solid var(--line-d)}
.legal-t td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line-d)}
@media (max-width:760px){.legal-t thead{display:none}.legal-t tr{display:block;padding:14px 0;border-bottom:1px solid var(--line-d)}.legal-t td{display:block;padding:2px 0;border:0}.legal-t td:first-child{font-weight:500}}

/* ---- footer: company details line ---- */
.ft-bottom{align-items:flex-start}
.ft-bottom>p{max-width:640px;line-height:1.6}

/* ---- 404 ---- */
.nf{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:140px 0 96px;background:var(--ink);color:var(--paper)}
.nf .sx-in{width:100%}
.nf-code{margin:0 0 28px;font-family:var(--display);font-weight:600;letter-spacing:-.06em;line-height:.85;font-size:clamp(120px,22vw,320px);color:var(--paper)}
.nf-code .bx-stone{color:var(--accent);font-size:1em}
.nf .sx-h{max-width:16ch}
.nf .sx-lead{margin-top:24px;max-width:460px}
.nf-links{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line-l)}

/* ---- Studio edition, pass 3: gold accents, logo, real buttons, readable sizes ---- */
/* the italic serif part of every heading is gold */
.bx-stone{color:var(--accent)}

/* logo: abstract mark (a sun over still water) + Luma + italic Bathroom */
.bx-logo{display:inline-flex;align-items:center;gap:8px}
.lg-mark{flex:none;display:block;width:22px;height:22px;color:currentColor}
.lg-mark .lg-fill{fill:var(--accent)}
.bx-logo .lg-b,.ft-logo .lg-b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em;color:var(--accent);opacity:1!important;margin:0;transform:none;vertical-align:baseline;text-transform:none}
.ft-logo .lg-b{font-size:1.12em}

/* buttons: filled capsules everywhere, so they read as buttons */
.bx-pill .l{height:50px;padding:0 26px!important;border:0;border-radius:999px;background:#F4F4F4!important;color:#0D0D0D!important;font:500 15px/1 var(--sans);letter-spacing:-.01em;text-transform:none;white-space:nowrap;
  transition:background .25s ease,color .25s ease,clip-path var(--td) var(--ez) var(--pl,0ms)}
.bx-pill .l::before{content:none}
.bx-pill .l::after{content:'\2197';margin-left:10px;font-size:14px;transition:transform .25s ease}
.bx-pill:hover .l{background:#fff!important;opacity:1}
.bx-pill:hover .l::after{transform:translate(2px,-2px)}
.sx-ivory .bx-pill .l,.sx-white .bx-pill .l,.sx-stone .bx-pill .l,.sx-stone-l .bx-pill .l,.cf .bx-pill .l{background:#0D0D0D!important;color:#fff!important}
.sx-ivory .bx-pill:hover .l,.sx-white .bx-pill:hover .l,.sx-stone .bx-pill:hover .l,.sx-stone-l .bx-pill:hover .l,.cf .bx-pill:hover .l{background:#2A2A2A!important}
.bx-hcta .l{height:40px;padding:0 18px!important;font-size:13px}
.pj-link{font-size:11px}

/* hero step cards: the {01} number never wraps */
.bx-s3list li{grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px}
.bx-s3list .n{white-space:nowrap;font-size:12px;letter-spacing:.06em}
.bx-s3list p{font-size:14px;line-height:1.5;color:#D8D8D8}

/* small print stays readable */
.ft-bottom,.ft-bottom a,.ft-credit{font-size:14px}
.plan-note,.tm-count{font-size:13px}
@media (max-width:760px){
.est-hint,.est-privacy,.tm-who p.tm-meta,.sx-note,.plan-note,.art-byline,.legal-note,.art-body caption,.art-body th,.art-body td,.art-body time,.legal-t{font-size:14px!important}
.tm-count{font-size:12px}
.bx-pill .l{height:52px;font-size:15px}
}

/* large screens: the whole text scale steps up so nothing reads small at 1920 */
@media (min-width:1600px){
:root{--t-lead:19px;--t-body:17px;--t-small:15px}
.text{font-size:17px}
.bx-s3list p{font-size:15.5px}
.bx-s3list h3{font-size:clamp(19px,2.3vh,24px)}
.bx-s3list .n{font-size:13px}
.sx-lead,.sx-body{font-size:18px}
.svc-d,.pr-d,.ps .pr-d,.faq .faq-a p,.est-od{font-size:16.5px}
.pj-m,.tm-who p.tm-meta,.ft-col,.ft-brand p{font-size:16px}
.faq .faq-q{font-size:19px}
.sx-eyebrow,.svc-n,.inc-n,.pd-meta dt,.crumb,.sum h3,.ft-h,.est-label,.cf-f,.pj-link,.hgal-i figcaption{font-size:12px}
.bx-nav{font-size:12px!important}
.bx-pill .l{height:54px;font-size:16px;padding:0 30px!important}
.bx-hcta .l{height:44px;font-size:14px}
}
/* hero step cards on desktop: a wider column anchored to the right edge, thumbnails only where there is room */
@media (min-width:761px) and (min-aspect-ratio:5/4){
.bx-s3list{left:auto;right:max(28px,3.2vw);width:clamp(300px,26vw,440px)}
.bx-s3list h3{margin-bottom:4px}
}
@media (min-width:761px) and (max-width:1279px) and (min-aspect-ratio:5/4){
.bx-th{display:none}
}
@media (min-width:761px) and (min-aspect-ratio:5/4) and (max-height:860px){
.bx-s3list{gap:6px}
.bx-s3list li{padding-top:9px;padding-bottom:9px}
.bx-s3list p{line-height:1.4}
}


/* ============================================================================
   BUTTON SYSTEM — one shape (the header capsule), three roles.
   primary  .bx-pill            filled: light on dark grounds, ink on light grounds
   gold     .bx-pill-gold       the main action of a block
   ghost    .bx-pill-ghost      secondary: outline only, takes the text colour of its ground
   The same roles cover form buttons (.est-next primary, .est-back/.cat-btn ghost).
   ============================================================================ */
.bx-pill .l,.est-next,.est-back,.cat-btn{
  display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px!important;border-radius:999px;
  font:500 15px/1 var(--sans)!important;letter-spacing:-.01em!important;text-transform:none!important;white-space:nowrap;cursor:pointer;
  border:1px solid transparent!important;box-sizing:border-box}
.bx-pill .l::before{content:none!important}
.bx-pill .l::after{content:'\2197';margin-left:10px;font-size:14px;transition:transform .25s ease}
.bx-pill:hover .l::after{transform:translate(2px,-2px)}
.bx-pill:hover .l{opacity:1}

/* primary */
.bx-pill .l,.est-next{background:#F4F4F4!important;color:#0D0D0D!important}
.bx-pill:hover .l,.est-next:hover{background:#FFFFFF!important}
:is(.sx-ivory,.sx-white,.sx-stone,.sx-stone-l,.cf) .bx-pill .l,.bx-pill-ink .l,.cf .est-next{background:#0D0D0D!important;color:#FFFFFF!important}
:is(.sx-ivory,.sx-white,.sx-stone,.sx-stone-l,.cf) .bx-pill:hover .l,.bx-pill-ink:hover .l,.cf .est-next:hover{background:#2A2A2A!important}
.est-next:disabled{opacity:.35;cursor:not-allowed}

/* gold */
.bx-pill.bx-pill-gold .l{background:#CDAA5E!important;color:#0D0D0D!important}
.bx-pill.bx-pill-gold:hover .l{background:#DABB7A!important}

/* ghost */
.bx-pill.bx-pill-ghost{color:inherit}
.bx-pill.bx-pill-ghost .l,.est-back,.cat-btn{background:transparent!important;color:inherit!important;
  border-color:color-mix(in srgb,currentColor 38%,transparent)!important}
.bx-pill.bx-pill-ghost:hover .l,.est-back:hover,.cat-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent)!important;border-color:currentColor!important}
.est-back{height:46px;padding:0 22px!important;font-size:14px!important}
.est-back::after{content:none}
.cat-btn:disabled{opacity:.4;cursor:default}

/* sizes */
.bx-pill-xl .l{height:56px;padding:0 32px!important;font-size:16px!important}
.bx-hcta .l{height:40px;padding:0 18px!important;font-size:13px!important}
.art-cta .bx-pill .l{height:48px;font-size:14px!important}
@media (max-width:760px){
.bx-pill .l,.est-next,.cat-btn{height:52px}
.bx-pill-xl .l{height:56px}
}
@media (min-width:1600px){
.bx-pill .l,.est-next,.cat-btn{height:54px;padding:0 30px!important;font-size:16px!important}
.bx-pill-xl .l{height:60px;font-size:17px!important}
.bx-hcta .l{height:44px;font-size:14px!important}
}
.bx-pill:focus-visible{outline:none}
.bx-pill:focus-visible .l,.est-next:focus-visible,.est-back:focus-visible,.cat-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* article side card is dark: its button is the gold main action */
.art-cta .bx-pill .l{background:#CDAA5E!important;color:#0D0D0D!important}
.art-cta .bx-pill:hover .l{background:#DABB7A!important}
/* testimonials: the longer client quotes keep the block height (at most one line more than before) */
@media (min-width:761px){#testimonials .tm-q,.tm .tm-q{max-width:34ch}}
@media (max-width:760px){.tm .tm-q{font-size:24px}}
/* logo: wordmark only — Luma in the display weight, Bathroom light and translucent */
.lg-mark{display:none}
.bx-logo{gap:7px;align-items:baseline}
.bx-logo .lg-b,.ft-logo .lg-b{font-family:var(--sans);font-style:normal;font-weight:300;font-size:1em;letter-spacing:-.02em;color:inherit;opacity:.5!important}
/* testimonials: quotes in the regular text face, not the italic serif */
.tm .tm-q{font-family:var(--sans);font-style:normal;font-weight:400;letter-spacing:-.015em;line-height:1.4;font-size:clamp(20px,1.75vw,28px);max-width:38ch}
@media (min-width:1600px){.tm .tm-q{font-size:30px}}
@media (max-width:760px){.tm .tm-q{font-size:19px;line-height:1.45;max-width:none}}