/* =========================================================
   Al Matin Real Estate Consultant · real-estate template
   Limestone, charcoal ink and one marigold accent.
   Fraunces (display) + Onest (text)
   ========================================================= */
:root{
  --bg:#F4EFE7;          /* limestone */
  --bone:#FBF8F2;
  --sand:#EAE1D2;
  --ink:#201E1B;
  --ink-2:#4A453E;
  --mute:#7A7268;
  --line:rgba(32,30,27,.14);
  --line-2:rgba(32,30,27,.24);
  --marigold:#EBA21E;
  --marigold-deep:#A66A06;
  --night:#1C1A17;
  --night-2:#2A2722;
  --bone-dim:rgba(251,248,242,.62);
  --bone-line:rgba(251,248,242,.12);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --navh:72px;
  --g:40px;
  --sec:128px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* paper grain over the whole page (4%); dark sections add their own light grain */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.05}
.areas,.cta,.foot{position:relative;isolation:isolate}
.areas::before,.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain-l);background-size:180px;opacity:.06}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:380;font-variation-settings:"SOFT" 50,"opsz" 96;letter-spacing:-.018em;line-height:1.04;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:340;color:var(--marigold-deep)}
p{margin:0}
:focus-visible{outline:2px solid var(--marigold-deep);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bone);padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--g)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--marigold-deep);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.lead-in{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.sec-head{margin-bottom:72px}
.sec-head h2{font-size:clamp(40px,4.6vw,68px);max-width:15ch}
.sec-head:has(.sec-aside){display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:80px;align-items:end}
.sec-head:has(.sec-aside) .eyebrow{grid-column:1/-1}
.sec-aside{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--ink-2);padding:0 0 10px 22px;border-left:1px solid var(--line-2);text-wrap:pretty}
/* photos get a fine inner hairline */
.st-photo img,.area img,.svc-frame img,.hero-img img,.msg.pic img{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}

/* ornament: hairline with the house mark */
.orn{position:relative;height:28px;margin:0 0 64px;display:flex;justify-content:center;color:var(--ink)}
.orn::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}
.orn svg{position:relative;width:28px;height:28px;padding:0 10px;box-sizing:content-box;background:inherit}
.svc .orn svg{background:var(--bone)}
.stories .orn svg,.visit .orn svg{background:var(--bg)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background-color .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:var(--marigold);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 12px 26px -14px rgba(166,106,6,.85)}
.btn-gold:hover{background:#F2B23A;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 30px -14px rgba(166,106,6,.9)}
.btn-ink,.btn-wa{background:var(--ink);color:var(--bone);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 24px -16px rgba(32,30,27,.8)}
.btn-ink:hover,.btn-wa:hover{background:#000}
.btn-wa .wa-ico{color:#3DDC84}
.btn-ghost{border-color:rgba(251,248,242,.5);color:var(--bone);background:rgba(28,26,23,.2)}
.btn-ghost:hover{background:rgba(251,248,242,.12);border-color:var(--bone)}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}
.btn-lg{min-height:60px;padding:0 32px;font-size:16.5px}
.btn-wide{width:100%}
.wa-ico{width:20px;height:20px;flex:none}
.btn-sm .wa-ico{width:17px;height:17px;color:#3DDC84}
.btn-text{background:none;border:0;padding:8px 0;cursor:pointer;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(32,30,27,.35);transition:text-decoration-color .25s}
.btn-text:hover{text-decoration-color:var(--marigold)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--navh);isolation:isolate;color:var(--ink);transition:color .3s}
.nav::before,.nav::after{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .3s var(--ease)}
.nav::before{background:rgba(244,239,231,.94);-webkit-backdrop-filter:saturate(1.2) blur(20px);backdrop-filter:saturate(1.2) blur(20px);border-bottom:1px solid transparent}
.nav.scrolled::before{border-bottom-color:var(--line)}
.nav::after{background:rgba(28,26,23,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);opacity:0}
.nav.nav--dark{color:var(--bone)}
.nav.nav--dark::before{opacity:0}
.nav.nav--dark::after{opacity:1}
.nav-in{height:100%;max-width:1440px;margin:0 auto;padding:0 var(--g);display:flex;align-items:center;gap:40px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-mark{width:30px;height:30px}
.logo-word{font-family:var(--serif);font-size:24px;font-weight:450;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:7px}
.logo-word small{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.nav-links{display:flex;gap:32px;margin-left:auto}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;opacity:.82;position:relative;padding:6px 0;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--marigold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-act{display:flex;align-items:center;gap:22px}
.nav-tel{font-size:14.5px;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.nav--dark .btn-ink{background:var(--bone);color:var(--ink)}
.menu-btn{display:none}

/* ---------- 1 · hero / lead form ---------- */
.hero{position:relative;background:var(--bg);margin-top:calc(var(--navh) * -1)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:100vh;min-height:100svh;padding-top:var(--navh);background:var(--bg)}
.hero-copy{grid-column:1;grid-row:1;padding:28px 56px 36px max(var(--g),calc((100vw - 1240px)/2 + var(--g)));display:flex;flex-direction:column;justify-content:center}
.hero-photo{grid-column:2;grid-row:1;margin:0;display:flex;flex-direction:column;min-height:0}
.hero-img{position:relative;flex:1;overflow:hidden;background:var(--sand);min-height:0}
.hero-kb{position:absolute;inset:0;animation:kb 32s ease-in-out infinite alternate;transform-origin:62% 55%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translate3d(-1.2%,-.8%,0)}}
.hero-img img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:40% 50%;will-change:transform}
.hero-img::after{content:"";position:absolute;inset:16px;border:1px solid rgba(251,248,242,.42);pointer-events:none;z-index:2}
.hero-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(28,22,14,.34),transparent 32%)}
.hero-photo{position:relative}
/* engraved brass plaque on the photo (desktop) */
.hero-photo figcaption{position:absolute;z-index:3;left:40px;bottom:40px;display:flex;align-items:baseline;gap:8px;padding:10px 26px 11px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#4a3712;border-radius:3px;
  background:linear-gradient(135deg,#E9CF8F 0%,#C9A256 38%,#B58B3E 55%,#D9B970 78%,#BC9447 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(80,55,15,.35) inset,0 0 0 1px rgba(90,62,18,.45),0 14px 26px -12px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,240,205,.55)}
.hero-photo figcaption::before,.hero-photo figcaption::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4e2b4,#7a5a22 75%);box-shadow:0 1px 0 rgba(255,255,255,.4)}
.hero-photo figcaption::before{left:9px}.hero-photo figcaption::after{right:9px}
.hero-photo figcaption span{font-family:var(--serif);font-style:italic;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:#3a2a0c}
.kicker{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:18px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 4px rgba(235,162,30,.22);animation:pulse 2.8s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.7);opacity:.7}}
.hero h1{font-size:clamp(48px,5.4vw,78px);line-height:.98;letter-spacing:-.028em;max-width:12.4ch;position:relative;z-index:0}
.hero h1 em{color:var(--ink);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:2%;right:4%;bottom:.04em;height:.12em;background:var(--marigold);border-radius:2px;z-index:-1;opacity:.85;transform-origin:left;transition:transform .6s var(--ease)}
.hero-lede{margin-top:20px;font-size:17px;color:var(--ink-2);max-width:31em;text-wrap:pretty}

/* the form: an enquiry slip */
.lead{position:relative;margin-top:26px;max-width:600px;padding:20px 28px 24px;background:var(--bone);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 48px -36px rgba(60,45,20,.5),0 2px 4px -2px rgba(60,45,20,.12)}
.lead::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.035}
.lead-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 12px 0;margin-bottom:16px;border-bottom:1px dashed var(--line-2)}
.lead-no{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-2)}
.lead-no b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold-deep);margin-left:6px;font-variant-numeric:tabular-nums}
.lead-steps{display:flex;align-items:center;gap:5px}
.lead-steps span{width:22px;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.lead-steps span.on{background:var(--ink)}
.lead-steps em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px;font-weight:600}
.fs{border:0;margin:0 0 14px;padding:0;min-width:0}
.fs legend{padding:0;margin-bottom:7px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chips span{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(32,30,27,.14);background:var(--bone);font-size:14.5px;font-weight:500;transition:background-color .2s,color .2s,border-color .2s;user-select:none;-webkit-user-select:none}
.chips span::before{content:"";position:absolute;left:50%;bottom:5px;width:12px;height:2px;margin-left:-6px;border-radius:2px;background:var(--marigold);transform:scaleX(0);transition:transform .3s var(--ease)}
.chips label:hover span{border-color:var(--ink)}
.chips label:hover span::before{transform:scaleX(1)}
.chips label:active span{transform:scale(.97)}
.chips span::after{content:"";position:absolute;top:-6px;right:-5px;width:17px;height:17px;border-radius:50%;background:var(--marigold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%23201E1B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 2px var(--bone);transform:scale(0);transition:transform .35s var(--spring)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chips input:checked+span::before{transform:scaleX(0)}
.chips input:checked+span::after{transform:scale(1)}
.chips input:focus-visible+span{outline:2px solid var(--marigold-deep);outline-offset:2px}
/* segmented Buy/Rent/Sell with a sliding ink thumb */
.chips-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--bg);border:1px solid rgba(32,30,27,.14);border-radius:999px;padding:4px}
.chips-seg::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:999px;background:var(--ink);box-shadow:0 6px 14px -8px rgba(32,30,27,.7);transition:transform .45s var(--ease)}
.chips-seg:has(input[value="rent"]:checked)::before{transform:translateX(100%)}
.chips-seg:has(input[value="sell"]:checked)::before{transform:translateX(200%)}
.chips-seg span{width:100%;justify-content:center;border:0;background:none;min-height:40px;font-size:15px;font-weight:600;z-index:1}
.chips-seg label:hover span{border-color:transparent}
.chips-seg span::after,.chips-seg span::before{display:none}
.chips-seg input:checked+span{background:none;color:var(--bone)}
.lead [data-next]{margin-top:6px}
.lead-promise{margin-top:10px;text-align:center;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mute)}
.lead-sum{font-family:var(--serif);font-size:20px;line-height:1.35;margin-bottom:20px;color:var(--ink);text-wrap:pretty}
.lead-sum b{font-weight:500;color:var(--marigold-deep);font-style:italic}
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.field input{width:100%;height:54px;border:1px solid rgba(32,30,27,.18);border-radius:12px;background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:hover{border-color:rgba(32,30,27,.4)}
.field input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(235,162,30,.25)}
.field input[aria-invalid="true"]{border-color:#B4441E}
.tel-wrap{display:flex;align-items:center;position:relative}
.tel-wrap span{position:absolute;left:16px;font-weight:600;color:var(--ink-2);pointer-events:none;padding-right:10px;border-right:1px solid var(--line)}
.tel-wrap input{padding-left:66px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.err{display:flex;align-items:center;gap:7px;color:#A63A16;font-size:13px;font-weight:500;margin-top:7px}
.err::before{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8 15 14H1Z' fill='none' stroke='%23A63A16' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6' stroke='%23A63A16' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.9' r='.95' fill='%23A63A16'/%3E%3C/svg%3E") center/contain no-repeat}
.shake{animation:shake .38s var(--ease)}
@keyframes shake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}
.err:empty{display:none}
.lead-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.lead-row .btn{flex:1;max-width:320px}
.lead-note{margin-top:14px;font-size:13.5px;color:var(--mute)}
.lead-step{animation:stepIn .45s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lead-done{animation:stepIn .5s var(--ease);outline:0}
.done-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;margin-bottom:22px}
.done-h{font-size:clamp(32px,3vw,42px);margin:8px 0 10px}
.done-p{color:var(--ink-2);font-size:16px;max-width:26em;text-wrap:pretty}
.done-p b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.done-line{list-style:none;margin:0 0 24px;padding:0;position:relative}
.done-line::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;border-left:1.5px dotted var(--ink-2);opacity:.5}
.done-line li{position:relative;display:flex;justify-content:space-between;gap:16px;padding:9px 0 9px 28px;font-size:15px;border-bottom:1px solid var(--line)}
.done-line li:last-child{border-bottom:0}
.done-line li::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:var(--bone);border:1.5px solid var(--ink-2)}
.done-line li.ok::before{background:var(--marigold);border-color:var(--ink)}
.done-line b{font-weight:600}
.done-line span{color:var(--mute);font-size:14px}
.lead-done .btn-text{margin-top:12px}

/* ---------- key tag (shared: stories + thank-you) ---------- */
.keytag{position:absolute;z-index:3;top:-8px;right:-24px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 4px;pointer-events:none;color:#8C8578}
.kt-nail{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9d2c4,#6f685c 70%);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.kt-string{width:1px;height:22px;background:rgba(32,30,27,.55);margin-top:-2px}
.kt-ring{width:22px;height:22px;border-radius:50%;border:2.5px solid currentColor;margin-top:-2px;position:relative;z-index:1}
.kt-key{position:absolute;top:38px;left:calc(50% - 30px);width:14px;height:36px;color:#B49559;transform:rotate(14deg);transform-origin:50% 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.kt-tag{position:relative;margin-top:-7px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:120px;padding:24px 16px 12px;background:var(--marigold);color:var(--ink);clip-path:polygon(50% 0,100% 16px,100% 100%,0 100%,0 16px);line-height:1.15;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.kt-tag::before{content:"";position:absolute;left:50%;top:9px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--night);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.st .kt-key,.st .kt-ring{display:none}
.st .kt-string{height:30px}
.st.in:hover .keytag{animation:tagSwing 1.1s var(--ease)}
@keyframes tagSwing{0%{transform:rotate(0)}30%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}82%{transform:rotate(1deg)}100%{transform:rotate(0)}}
.kt-tag::after{content:"";position:absolute;left:8px;right:8px;top:20px;bottom:6px;border:1px dashed rgba(32,30,27,.28);border-top:0;pointer-events:none}
.kt-tag b{font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.kt-tag em{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.8;margin-top:4px;white-space:nowrap}
.js .st .keytag{opacity:0;transform:rotate(-24deg)}
.js .st.in .keytag{animation:keySwing 1.7s var(--ease) .15s forwards}
@keyframes keySwing{0%{opacity:0;transform:rotate(-24deg)}12%{opacity:1}38%{transform:rotate(11deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}100%{opacity:1;transform:rotate(0)}}
.keytag-lg{position:relative;top:auto;right:auto;margin-top:-6px}
.keytag-lg .kt-tag{min-width:132px;padding:26px 16px 14px}
.keytag-lg .kt-tag b{font-size:20px}
.lead-done .keytag-lg{animation:keySwing 1.7s var(--ease) .1s both}

/* ---------- 2 · WhatsApp ---------- */
.wa{background:var(--sand);padding:var(--sec) 0 112px;position:relative;overflow:hidden}
.wa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:96px;align-items:center;justify-content:space-between}
.wa h2{font-size:clamp(40px,3.8vw,54px);max-width:none;margin-bottom:24px}
.wa h2 em{display:block}
@media (min-width:1101px){.wa h2 em{white-space:nowrap}}
.wa-list{list-style:none;padding:0;margin:36px 0 40px;max-width:540px}
.wa-list li{position:relative;display:grid;grid-template-columns:22px 104px 1fr;gap:0 16px;align-items:baseline;padding:17px 0;border-top:1px solid var(--line)}
.wa-list li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.wa-list li:hover::before{transform:scaleX(1)}
.wa-list li:last-child{border-bottom:1px solid var(--line)}
.wa-li-ico{width:19px;height:19px;align-self:center;fill:none;stroke:var(--marigold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--spring)}
.wa-list li:hover .wa-li-ico{transform:rotate(-8deg) scale(1.1)}
.wa-list b{font-family:var(--serif);font-weight:450;font-size:19px;font-style:italic}
.wa-list span{color:var(--ink-2);font-size:15.5px}
.wa-hint{margin-top:14px;font-size:13.5px;color:var(--mute)}

.chat-col{position:relative}
.chat{position:relative;background:#EFE7DA;border:8px solid var(--ink);border-radius:36px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(32,30,27,.35),0 2px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(32,30,27,.2);
  background-image:radial-gradient(rgba(32,30,27,.07) 1px,transparent 1.4px);background-size:18px 18px}
.chat-top{display:flex;align-items:center;gap:12px;padding:22px 18px 14px;background:var(--ink);color:var(--bone);position:relative}
.chat-top::before{content:"";position:absolute;left:50%;top:6px;width:64px;height:5px;margin-left:-32px;border-radius:4px;background:rgba(251,248,242,.14)}
.chat-top img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.chat-top b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.chat-top span{font-size:12.5px;color:var(--bone-dim);display:flex;align-items:center;gap:6px}
.online{width:7px;height:7px;border-radius:50%;background:#3DDC84}
.chat-win{position:relative}
.chat-win::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:46px;background:linear-gradient(#EFE7DA 30%,rgba(239,231,218,0));pointer-events:none}
.chat-day{position:absolute;z-index:3;left:50%;top:10px;transform:translateX(-50%);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(251,248,242,.95);padding:4px 11px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.chat-body{list-style:none;margin:0;padding:44px 14px 10px;display:flex;flex-direction:column;gap:8px;height:430px;overflow:hidden;scrollbar-width:none}
.chat-body .day{align-self:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:rgba(251,248,242,.8);padding:4px 10px;border-radius:8px;margin-bottom:4px}
.msg{flex:none;max-width:84%;padding:9px 12px 20px;border-radius:14px;font-size:14.5px;line-height:1.45;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.06);text-wrap:pretty}
.msg time{position:absolute;right:10px;bottom:4px;font-size:10.5px;color:var(--mute)}
.msg.me{align-self:flex-end;background:#DCE8CC;border-top-right-radius:4px}
.msg.me time::after{content:" ✓✓";color:#3E9BD6;letter-spacing:-.15em}
.msg.them{align-self:flex-start;background:var(--bone);border-top-left-radius:4px}
.msg.pic{padding:4px 4px 20px;width:74%}
.msg.pic img{border-radius:11px;aspect-ratio:3/2;object-fit:cover;width:100%}
.msg.pic span{display:block;padding:8px 8px 0;font-size:13px;color:var(--ink-2)}
.msg.pic span b{display:block;color:var(--ink);font-size:14px}
.msg.pic strong{display:block;font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);margin-top:2px}
.typing{flex:none;align-self:flex-start;background:var(--bone);border-radius:14px;padding:12px 14px;display:none;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-compose{display:flex;align-items:center;gap:10px;padding:10px 12px 14px;border-top:1px solid rgba(32,30,27,.06)}
.compose-txt{flex:1;min-height:46px;background:var(--bone);border-radius:24px;padding:12px 16px;font-size:14px;line-height:1.4;color:var(--ink-2);box-shadow:0 1px 1px rgba(0,0,0,.06)}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--marigold-deep);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.compose-send{width:46px;height:46px;flex:none;border-radius:50%;background:var(--marigold);display:grid;place-items:center;color:var(--ink)}
.compose-send svg{width:20px;height:20px}
.chat-cap{margin-top:16px;text-align:center;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mute)}
/* chat: last two messages arrive live (JS adds .js on <html>) */
.js .chat .late{display:none}
.js .chat .late.show{display:block;animation:msgIn .45s var(--ease) both}
.js .chat .typing.on{display:flex;animation:msgIn .3s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.msg.me.late{transform-origin:100% 0}.msg.them.late{transform-origin:0 0}
.compose-msg{transition:opacity .3s}
.compose-msg.swap{opacity:.2}

/* ---------- 3 · services ---------- */
.svc{background:var(--bone);padding:calc(var(--sec) - 28px - 64px + 28px) 0 var(--sec)}
.svc .sec-head{margin-bottom:56px}
.svc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
.svc-media{position:sticky;top:calc(var(--navh) + 40px)}
.svc-corners{position:relative;padding:0}
.svc-corners::before,.svc-corners::after{content:"";position:absolute;width:24px;height:24px;border:1px solid var(--ink);pointer-events:none}
.svc-corners::before{left:-12px;top:-12px;border-right:0;border-bottom:0}
.svc-corners::after{right:-12px;bottom:-12px;border-left:0;border-top:0}
.svc-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand);box-shadow:0 30px 60px -40px rgba(32,30,27,.5)}
.svc-par{position:absolute;left:0;right:0;top:-5%;height:110%;will-change:transform}
.svc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.svc-frame img.on{opacity:1;transform:none}
.svc-cap{margin-top:22px;display:flex;gap:14px;align-items:baseline;padding-top:12px;border-top:1px solid var(--line)}
.svc-cap-n{font-size:11.5px;font-weight:600;letter-spacing:.18em;color:var(--marigold-deep);font-variant-numeric:tabular-nums}
.svc-cap-t{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);transition:opacity .35s}
.svc-cap.swap .svc-cap-t,.svc-cap.swap .svc-cap-n{opacity:0}
.svc-cap-n{transition:opacity .35s}
.route{list-style:none;margin:0;padding:0 0 0 76px;position:relative}
.route-track{position:absolute;left:22px;top:14px;bottom:60px;width:0;border-left:2px dashed rgba(32,30,27,.2)}
.route-fill{position:absolute;left:-2px;top:0;width:2px;height:100%;background:linear-gradient(var(--ink),var(--ink) 92%,var(--marigold));transform-origin:top;transform:scaleY(var(--fy,0));transition:transform .18s linear;will-change:transform}
.route-pin{position:absolute;z-index:2;left:-14px;top:-18px;width:26px;height:34px;transform:translateY(var(--py,0px));transition:transform .55s var(--spring);will-change:transform;filter:drop-shadow(0 4px 3px rgba(32,30,27,.28))}
.route-pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:5px;margin-left:-7px;border-radius:50%;background:rgba(32,30,27,.28);filter:blur(1.5px)}
.route-pin svg{width:100%;height:100%}
.step{position:relative;padding:34px 0 38px;border-top:1px solid var(--line)}
.route-track + .step{border-top:0;padding-top:0}
.step::before{content:"";position:absolute;left:-61px;top:44px;width:14px;height:14px;border-radius:50%;background:var(--bone);border:2px solid rgba(32,30,27,.3);transition:background-color .35s,border-color .35s,transform .35s var(--spring),opacity .25s}
.route-track + .step::before{top:10px}
.step.passed::before{background:var(--marigold);border-color:var(--ink)}
.step.active::before{transform:scale(.3);opacity:0}
.step-n{display:block;font-size:12.5px;font-weight:600;letter-spacing:.18em;color:var(--marigold-deep);margin-bottom:8px}
.step h3{font-size:clamp(28px,2.5vw,36px);margin-bottom:12px}
.step p{color:var(--ink-2);max-width:36em;text-wrap:pretty}
.tags{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(32,30,27,.66)}
.tags li{display:flex;align-items:center;gap:9px;line-height:1.2;transition:color .3s}
.tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 2px rgba(235,162,30,.18);transition:transform .35s var(--spring)}
.step:hover .tags li,.step.active .tags li{color:var(--ink)}
.step:hover .tags li::before{transform:scale(1.4)}

/* ---------- 4 · stories ---------- */
.stories{padding:calc(var(--sec) - 92px + 28px) 0 var(--sec);background:var(--bg);overflow:hidden}
.st-list{display:grid;grid-template-columns:1fr 1fr;gap:120px 72px}
.st{display:flex;flex-direction:column}
.st-media{position:relative}
.st-photo{margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--sand)}
.st-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.st.in .st-photo img{transform:none}
.st-body{position:relative;padding-top:44px}
.st blockquote{margin:0 0 18px}
.st blockquote p{font-family:var(--serif);font-weight:360;font-size:24px;line-height:1.32;letter-spacing:-.01em;text-wrap:pretty}
.st-who{font-size:14px;color:var(--mute);font-weight:500;display:flex;align-items:center;gap:12px}
.st-who::before{content:"";width:22px;height:1px;background:var(--line-2)}
.st-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:stretch}
.st-feature .st-photo{aspect-ratio:4/5}
.st-feature .st-body{padding-top:0;display:flex;flex-direction:column}
.st-q{display:block;height:84px;margin:-18px 0 8px -6px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:150px;line-height:1;color:var(--marigold);opacity:.9}
.st-feature blockquote{margin:-.12em 0 26px}
.st-feature blockquote p{font-size:clamp(34px,3.3vw,47px);line-height:1.14;font-variation-settings:"SOFT" 50,"opsz" 144;letter-spacing:-.01em}
.st-ledger{margin:10px 0 0;padding-top:22px}
.st-ledger div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.st-ledger div:last-child{border-bottom:1px solid var(--line)}
.st-ledger dt{color:var(--mute)}
.st-ledger dd{margin:0;font-family:var(--serif);font-size:17px}
.st-adv{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--ink-2)}
.st-adv img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line-2)}
.st-adv small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.st-adv b{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink)}
/* stamp: inked onto the photo's bottom edge */
.stamp{position:absolute;z-index:4;right:28px;bottom:0;font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--marigold-deep);background:var(--bg);padding:6px 10px 6px 14px;border:2.5px solid currentColor;border-radius:6px;box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 3.5px currentColor;transform:translateY(62%) rotate(-8deg);opacity:.92}
.st-feature .stamp{right:-30px}
.js .st .stamp{opacity:0;transform:translateY(62%) rotate(-8deg) scale(1.3)}
.js .st.in .stamp{animation:thunk .55s cubic-bezier(.3,1.5,.5,1) .9s forwards}
@keyframes thunk{0%{opacity:0;transform:translateY(62%) rotate(-11deg) scale(1.3)}55%{opacity:.95;transform:translateY(62%) rotate(-8deg) scale(.97)}100%{opacity:.92;transform:translateY(62%) rotate(-8deg) scale(1)}}
.stamp::after{content:"";position:absolute;inset:-3px;border-radius:7px;box-shadow:0 4px 0 rgba(32,30,27,.14);opacity:0;transform:translateY(-4px);pointer-events:none}
.st.in .stamp::after{opacity:1;transform:none;transition:opacity .4s 1.25s,transform .4s var(--ease) 1.25s}

/* ---------- 5 · areas (signature) ---------- */
.areas{background:var(--night);color:var(--bone);padding:var(--sec) 0}
.areas .eyebrow{color:var(--marigold)}
.areas h2 em{color:var(--marigold)}
.areas .lead-in{color:var(--bone-dim)}
.areas-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:end;margin-bottom:72px}
.areas-head h2{font-size:clamp(40px,4.4vw,64px);max-width:none}
@media (min-width:1101px){.areas-head h2 em,.areas-head h2 .h-a{white-space:nowrap}}
.areas-head h2 em{display:block}
.areas-head .lead-in{padding-bottom:8px}
.areas-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.areas-side{position:sticky;top:calc(var(--navh) + 28px)}

/* the map */
.mapz-wrap{position:relative}
.mapz{display:block;width:100%;height:auto;max-height:min(380px,calc(100vh - var(--navh) - 450px));min-height:250px;color:rgba(251,248,242,.16);overflow:visible}
.mz-land{fill:#24211C}
.mz-coast{fill:none;stroke:rgba(251,248,242,.5);stroke-width:1.2}
.mz-coast2{fill:none;stroke:rgba(251,248,242,.14);stroke-width:.8}
.mz-sea{color:rgba(251,248,242,.11)}
.mz-detail{fill:none;stroke:rgba(251,248,242,.2);stroke-width:1}
.mz-lake{stroke:rgba(169,198,207,.55);stroke-width:.9}
.mz-river{stroke:rgba(160,195,205,.35);stroke-width:1.4}
.mz-rail{stroke-dasharray:5 3;stroke:rgba(251,248,242,.18)}
.mz-road{stroke:rgba(251,248,242,.1);stroke-width:2.2}
.mz-run{stroke:rgba(251,248,242,.22);stroke-width:3}
.mz-hill{stroke:rgba(251,248,242,.16)}
.mz-link{stroke:rgba(251,248,242,.55);stroke-width:1.3}
.mz-pylon{stroke:rgba(251,248,242,.55);stroke-width:1.3}
.mz-note{fill:rgba(251,248,242,.34);stroke:none;font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.06em}
.mz-sm{font-size:8.5px}
.mz-compass circle{stroke:rgba(251,248,242,.25)}
.mz-compass path{fill:rgba(251,248,242,.25);stroke:none}
.mz-compass .n{fill:var(--marigold)}
.mz-compass text,.mz-scale text{fill:rgba(251,248,242,.45);stroke:none;font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.12em;text-anchor:middle}
.mz-scale text{text-anchor:start}
.mz-scale path{stroke:rgba(251,248,242,.4)}
.mz{cursor:pointer;outline:0}
.mz-edge{fill:transparent;stroke:rgba(251,248,242,.5);stroke-width:1;stroke-dasharray:2.5 2.5;transition:stroke .4s}
.mz-lit{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.86);transition:opacity .7s var(--ease) var(--md,0s),transform .7s var(--ease) var(--md,0s)}
.mz-glow{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .9s var(--ease) var(--md,0s),transform .9s var(--ease) var(--md,0s)}
.mz-dot{fill:rgba(251,248,242,.4);transition:fill .5s var(--ease) var(--md,0s)}
.mz.on .mz-dot{fill:#FFE3A3}
.mz-arc{fill:none;stroke:rgba(235,162,30,.22);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round}
.mz-wash{pointer-events:none;mix-blend-mode:screen}
.mz-sun{pointer-events:none}
.mz-disc{fill:#F6C25A;stroke:#FFE3A3;stroke-width:1}
.mz-rays path{stroke:#F2B23A;stroke-width:1.4;stroke-linecap:round}
.mz-rays{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mz-glints{opacity:var(--gl,.3);transition:opacity .4s}
.mz-glints path{stroke:#F2B23A;stroke-width:1;stroke-linecap:round;animation:glint 5s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
.mz-lbl{fill:rgba(251,248,242,.55);font-family:var(--serif);font-style:italic;font-size:13.5px;transition:fill .4s}
.mz.on .mz-lit{opacity:1;transform:none}
.mz.on .mz-glow{opacity:var(--sun,1);transform:none}
.mz.on .mz-edge{stroke:var(--marigold);stroke-width:1.2;stroke-dasharray:none}
.mz.on .mz-lbl{fill:var(--bone)}
.mz:hover .mz-edge,.mz:focus-visible .mz-edge,.mz.sel .mz-edge{stroke:var(--bone);stroke-width:1.6;stroke-dasharray:none}
.mz:hover .mz-lbl,.mz:focus-visible .mz-lbl,.mz.sel .mz-lbl{fill:var(--marigold)}
.mz-office path{fill:var(--bone);stroke:var(--night);stroke-width:1.4}
.mapz-cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bone-line);font-family:var(--serif);font-style:italic;font-size:15px;color:var(--bone-dim);min-height:44px}
.mapz-cap b{font-style:normal;font-weight:500;color:var(--bone)}
.mapz-cap .fitl{color:var(--marigold)}
.mapz-cap-a{flex:none;font-family:var(--sans);font-style:normal;font-size:13.5px;font-weight:600;color:var(--bone);text-decoration:none;border-bottom:1px solid var(--marigold);padding-bottom:1px}

/* the meter: an instrument, hairlines only */
.meter{margin-top:14px;padding:14px 0 12px;border-top:1px solid var(--bone-line);border-bottom:1px solid var(--bone-line)}
.meter-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.meter-mode{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;border:1px solid rgba(251,248,242,.16)}
.meter-mode::before{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:999px;background:var(--bone);transition:transform .4s var(--ease)}
.meter-mode.is-rent::before{transform:translateX(100%)}
.meter-mode button{position:relative;border:0;background:none;color:var(--bone-dim);min-height:36px;min-width:70px;border-radius:999px;font-weight:600;font-size:14.5px;cursor:pointer;transition:color .25s}
.meter-mode button.on{color:var(--ink)}
.meter-val{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.meter-lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);font-weight:600}
.meter-out{font-family:var(--serif);font-size:44px;line-height:1.05;font-weight:400;color:var(--marigold);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.meter-out small{font-size:.4em;color:var(--bone-dim);letter-spacing:0;margin-left:6px;font-family:var(--sans);font-weight:500}
.meter-rail{position:relative;margin-top:46px}
.meter-marks{position:absolute;left:17px;right:17px;top:0;height:44px;z-index:1;pointer-events:none}
.meter-marks span{position:absolute;top:50%;width:14px;height:22px;margin:-15px 0 0 -7px;pointer-events:auto;cursor:help}
.meter-marks span::before{content:"";position:absolute;left:50%;top:0;width:1px;height:8px;background:rgba(251,248,242,.35);transition:background-color .35s}
.meter-marks span::after{content:"";position:absolute;left:50%;top:12px;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--night);box-shadow:inset 0 0 0 1.2px rgba(251,248,242,.55);transition:background-color .35s,box-shadow .35s,transform .35s var(--spring)}
.meter-marks span.f::before{background:rgba(235,162,30,.7)}
.meter-marks span.f::after{background:var(--marigold);box-shadow:0 0 0 3px rgba(235,162,30,.2),0 0 8px rgba(235,162,30,.8)}
.meter-marks span:hover::after{transform:scale(1.5)}
.meter-tip{position:absolute;left:17px;right:17px;top:-20px;height:0;pointer-events:none}
.meter-tip b{position:absolute;bottom:0;left:var(--tx,0%);transform:translate(-50%,4px);opacity:0;white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;line-height:1;color:var(--ink);background:var(--marigold);padding:5px 10px 6px;border-radius:4px;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.meter-tip b::after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--marigold)}
.meter-tip b.on{opacity:1;transform:translate(-50%,0)}
.meter-tip b.ghost{background:var(--bone);color:var(--ink)}
.meter-tip b.ghost::after{border-top-color:var(--bone)}
.meter-ticks{position:absolute;left:17px;right:17px;top:50%;height:10px;margin-top:7px}
.meter-ticks i{position:absolute;top:0;width:1px;height:6px;background:rgba(251,248,242,.25)}
.meter-ticks i.maj{height:9px;background:rgba(251,248,242,.45)}
.meter-range{position:relative;display:block;-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;touch-action:pan-y;--p:30%}
.meter-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--marigold) var(--p),rgba(251,248,242,.18) var(--p))}
.meter-range::-moz-range-track{height:3px;border-radius:2px;background:rgba(251,248,242,.18)}
.meter-range::-moz-range-progress{height:3px;border-radius:2px;background:var(--marigold)}
.meter-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-15.5px;border-radius:50%;border:0;background:var(--marigold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 15.5 16 8.5l8 7M10.5 14v9h11v-9' fill='none' stroke='%23201E1B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 0 0 6px rgba(235,162,30,.18),0 6px 14px rgba(0,0,0,.35);transition:box-shadow .2s}
.meter-range:active::-webkit-slider-thumb{box-shadow:0 0 0 12px rgba(235,162,30,.22),0 6px 14px rgba(0,0,0,.35)}
.meter-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;border:0;background:var(--marigold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 15.5 16 8.5l8 7M10.5 14v9h11v-9' fill='none' stroke='%23201E1B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat}
.meter-range:focus-visible{outline:0}
.meter-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--night),0 0 0 6px var(--bone)}
.meter-scale{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.06em;color:var(--bone-dim);margin-top:4px;font-variant-numeric:tabular-nums}
.meter-count{margin-top:10px;font-size:14.5px;color:var(--bone-dim);display:flex;align-items:baseline;gap:6px}
.cnt{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25;vertical-align:bottom}
.cnt b{display:inline-block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1;color:var(--bone);font-variant-numeric:tabular-nums}
.cnt b.roll{animation:roll .45s var(--ease)}
@keyframes roll{from{transform:translateY(-90%);opacity:0}to{transform:none;opacity:1}}
.meter-nudge{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--marigold);animation:stepIn .4s var(--ease)}

/* the list */
.area-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,1fr);grid-auto-rows:auto;column-gap:40px;row-gap:72px}
/* a deliberate rhythm: right column dropped by exactly half a card */
.area-list > .area:not(.area-wide){grid-row:span 2}
.area-list > .area:nth-of-type(odd):not(.area-wide){grid-column:1}
.area-list > .area:nth-of-type(even){grid-column:2}
.areas-legend{grid-column:2;grid-row:1;align-self:end;padding-bottom:6px}
.areas-more{grid-column:1;grid-row:7;align-self:start;padding-top:4px}
.area-list > .area:nth-of-type(1){grid-row:1/3}.area-list > .area:nth-of-type(2){grid-row:2/4}
.area-list > .area:nth-of-type(3){grid-row:3/5}.area-list > .area:nth-of-type(4){grid-row:4/6}
.area-list > .area:nth-of-type(5){grid-row:5/7}.area-list > .area:nth-of-type(6){grid-row:6/8}
.areas-legend p,.areas-more p{font-size:14px;color:var(--bone-dim);display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--bone-line)}
.areas-legend p:last-child{border-bottom:1px solid var(--bone-line)}
.areas-legend .areas-legend-h,.areas-more .areas-more-h{border:0;padding:0 0 10px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--bone)}
.areas-more p{display:block;max-width:24em;line-height:1.55}
.areas-more a{display:inline-flex;gap:8px;margin-top:10px;font-size:14px;font-weight:600;color:var(--marigold);text-decoration:none;border-bottom:1px solid rgba(235,162,30,.4);padding-bottom:2px}
.areas-more a span{transition:transform .35s var(--ease)}.areas-more a:hover span{transform:translateX(4px)}
.lg{flex:none;width:26px;height:16px;border-radius:2px}
.lg-fit{background:linear-gradient(135deg,#F2B23A,#8a5a12);box-shadow:0 0 12px rgba(235,162,30,.6)}
.lg-no{background:linear-gradient(135deg,#6b6862,#2b2925)}
.area figure{margin:0;aspect-ratio:4/5;overflow:hidden;position:relative;background:#000;isolation:isolate}
.area img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* out-of-budget: a saturation + dusk layer fades in (opacity only, photo stays readable) */
.area figure::before{content:"";position:absolute;inset:0;z-index:1;background:#7f7f7f;mix-blend-mode:saturation;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.area .area-dim{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(16,15,13,.72),rgba(16,15,13,.5));opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
/* in-budget: late sun falls across the photo */
.area .area-sun{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 0% 0%,rgba(255,196,92,.42),rgba(235,162,30,.12) 45%,transparent 70%);mix-blend-mode:soft-light;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.area.fits .area-sun{opacity:1}
.area.no figure::before{opacity:1}
.area.no .area-dim{opacity:1}
.area figure::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:var(--marigold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.area.fits figure::after,.area:hover figure::after{transform:scaleX(1)}
.area:hover img{transform:scale(1.04)}
.area-txt{padding-top:18px}
.fit{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--bone-dim);min-height:22px}
.fit i{width:9px;height:9px;border-radius:50%;background:rgba(251,248,242,.3);transition:background-color .3s,box-shadow .3s}
.area.fits .fit{color:var(--marigold)}
.area.fits .fit i{background:var(--marigold);box-shadow:0 0 0 4px rgba(235,162,30,.2),0 0 14px rgba(235,162,30,.8)}
.fit-p{color:var(--bone-dim);font-weight:500}
.area.no .fit-l{color:var(--bone)}
.area h3,.known{transition:opacity .6s var(--ease)}
.area.no h3{opacity:.55}
.area h3{font-size:clamp(34px,3vw,46px);margin:6px 0 10px;letter-spacing:-.025em}
.known{color:var(--bone-dim);font-size:15.5px;max-width:28em;text-wrap:pretty}
.range{margin-top:14px;padding-top:12px;border-top:1px solid var(--bone-line);font-size:13.5px;color:var(--bone-dim);display:flex;flex-wrap:wrap;gap:4px 22px}
.range b{color:var(--bone);font-weight:500}
.area-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--bone-dim);text-decoration:none;border-bottom:1px solid rgba(251,248,242,.18);padding-bottom:2px;transition:color .3s,border-color .3s}
.area.fits .area-go{color:var(--marigold);border-color:rgba(235,162,30,.4)}
.area-go span{transition:transform .35s var(--ease)}
.area:hover .area-go,.area-go:focus-visible{color:var(--bone);border-color:var(--marigold)}
.area-go:hover span{transform:translateX(4px)}
/* Worli: a wide panorama closing the list */
.area-list > .area-wide{grid-column:1/-1;grid-row:auto;margin-top:16px}
.area-wide figure{aspect-ratio:16/7}
.area-wide img{object-position:50% 60%}
.area-wide .area-txt{padding-top:22px;max-width:36em}
.area-wide h3{font-size:64px;margin:8px 0 12px}
.area-wide .area-go{margin-top:14px}
.areas-note{grid-column:1/-1;margin-top:8px;padding-top:16px;border-top:1px solid var(--bone-line);font-family:var(--serif);font-style:italic;font-size:14px;color:rgba(251,248,242,.5);max-width:none}

/* ---------- 6 · visit / map ---------- */
.visit{padding:calc(var(--sec) - 92px + 28px) 0 var(--sec);background:var(--bg)}
.visit-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;align-items:stretch}
.map{position:relative;min-height:500px;padding:12px;background:var(--bone);border:1px solid var(--ink);box-shadow:0 30px 60px -40px rgba(32,30,27,.45)}
.map-mat{position:relative;height:100%;overflow:hidden;background:var(--sand);outline:1px solid var(--line);isolation:isolate}
.map iframe{position:absolute;left:-90px;top:-130px;width:calc(100% + 180px);height:calc(100% + 260px);border:0;filter:grayscale(1) sepia(.25) contrast(.95)}
.map-mat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(32,30,27,.18),inset 0 2px 10px rgba(32,30,27,.12)}
.map-pin{position:absolute;z-index:2;left:50%;top:50%;width:40px;height:52px;margin:-52px 0 0 -20px;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(32,30,27,.35))}
.map-pin svg{width:100%;height:100%}
.js .map-pin{opacity:0;transform:translateY(-24px)}
.js .map.in .map-pin{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .6s var(--spring) .1s}
.map-route{position:absolute;z-index:2;left:calc(50% + 10px);top:calc(50% - 168px);display:flex;flex-direction:column-reverse;width:160px;pointer-events:none;color:var(--ink)}
.map-route svg{display:block;width:160px;height:90px;transform:scaleY(-1)}
.map-route em{display:block;margin:2px 0 0 70px;width:max-content;font-family:var(--serif);font-size:15px;font-style:italic;background:var(--bone);padding:5px 12px 6px;border:1px solid var(--line-2);border-radius:4px;box-shadow:0 8px 18px -6px rgba(32,30,27,.35)}
.visit-txt{display:flex;flex-direction:column;justify-content:center}
.visit h2{font-size:clamp(38px,3.6vw,54px);margin-bottom:28px}
.visit address{font-style:normal;font-family:var(--serif);font-size:22px;line-height:1.45;margin-bottom:26px}
.hours{margin:0 0 30px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.hours div:last-child{border-bottom:1px solid var(--line)}
.hours dt{color:var(--mute);font-weight:500}
.hours dd{margin:0;text-align:right;font-weight:500}
.visit-act{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ---------- 7 · CTA ---------- */
.cta{min-height:86vh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden;background:var(--night)}
.cta-photo{position:absolute;inset:0;overflow:hidden}
.cta-img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:60% 50%;will-change:transform}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--night) 0,rgba(28,26,23,0) 140px),linear-gradient(90deg,rgba(24,21,17,.85) 0%,rgba(24,21,17,.62) 30%,rgba(24,21,17,0) 60%),linear-gradient(0deg,rgba(24,21,17,.5),transparent 45%)}
.cta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain-l);background-size:180px;opacity:.06}
.cta-in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:96px}
.eyebrow-light{color:var(--marigold)}
.cta h2{font-size:clamp(46px,5.4vw,84px);max-width:11ch;line-height:1}
.cta h2 em{color:var(--marigold);display:block}
.cta-p{margin-top:22px;font-size:18px;max-width:30em;color:rgba(251,248,242,.82);text-wrap:pretty}
.ticket{position:relative;display:inline-flex;align-items:stretch;margin-top:30px;color:var(--ink);filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));transform:rotate(-2deg);transition:transform .5s var(--spring)}
.ticket:hover{transform:rotate(0) translateY(-2px)}
.ticket-l,.ticket-r{position:relative;background:linear-gradient(170deg,#F4B43C,#E39A16);display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 4px var(--marigold),inset 0 0 0 5px rgba(120,72,4,.45)}
.ticket-l{padding:10px 18px 10px 22px;border-radius:6px 0 0 6px;border-right:2px dashed rgba(32,30,27,.35);-webkit-mask:radial-gradient(circle 6px at 0 100%,transparent 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle 6px at 100% 0,transparent 97%,#000) right top/51% 51% no-repeat,radial-gradient(circle 6px at 0 0,transparent 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle 6px at 100% 100%,transparent 97%,#000) right bottom/51% 51% no-repeat;mask:radial-gradient(circle 6px at 0 100%,transparent 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle 6px at 100% 0,transparent 97%,#000) right top/51% 51% no-repeat,radial-gradient(circle 6px at 0 0,transparent 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle 6px at 100% 100%,transparent 97%,#000) right bottom/51% 51% no-repeat}
.ticket-r{padding:10px 22px 10px 18px;border-radius:0 6px 6px 0;-webkit-mask:radial-gradient(circle 6px at 0 0,transparent 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle 6px at 100% 100%,transparent 97%,#000) right top/51% 51% no-repeat,radial-gradient(circle 6px at 0 100%,transparent 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle 6px at 100% 0,transparent 97%,#000) right bottom/51% 51% no-repeat;mask:radial-gradient(circle 6px at 0 0,transparent 97%,#000) left top/51% 51% no-repeat,radial-gradient(circle 6px at 100% 100%,transparent 97%,#000) right top/51% 51% no-repeat,radial-gradient(circle 6px at 0 100%,transparent 97%,#000) left bottom/51% 51% no-repeat,radial-gradient(circle 6px at 100% 0,transparent 97%,#000) right bottom/51% 51% no-repeat}
.ticket-l::after,.ticket-r::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:140px;opacity:.12;pointer-events:none}
.ticket small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.75}
.ticket b{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.05;font-variant-numeric:lining-nums}
.ticket-dots{display:flex;gap:5px;margin-bottom:6px}
.ticket-dots i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.ticket-dots i.o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.cta-act{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.cta-tel{display:inline-block;margin-top:20px;font-weight:600;font-size:15px;text-decoration:none;color:rgba(251,248,242,.85);border-bottom:1px solid rgba(251,248,242,.35);padding-bottom:2px;transition:border-color .25s,color .25s}
.cta-tel:hover{color:var(--bone);border-color:var(--marigold)}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--bone);padding:112px 0 0;border-top:1px solid rgba(251,248,242,.08)}
.foot-sign{font-family:var(--serif);font-weight:360;font-size:clamp(40px,4.4vw,60px);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"SOFT" 50,"opsz" 144}
.foot-sign em{font-style:italic;font-weight:320;color:var(--marigold)}
.foot-orn{position:relative;height:26px;margin:44px 0 64px;color:var(--bone)}
.foot-orn::before{content:"";position:absolute;left:44px;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(251,248,242,.22),rgba(251,248,242,.1) 70%,transparent)}
.foot-orn svg{width:26px;height:26px;opacity:.75}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:48px}
.logo-foot{color:var(--bone)}
.foot-brand p{margin-top:18px;color:var(--bone-dim);max-width:24em;font-size:15px}
.foot-lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,248,242,.45);font-weight:600;line-height:30px;margin-bottom:4px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{line-height:30px;font-size:15px;color:var(--bone-dim)}
.foot li a{text-decoration:none;color:var(--bone);opacity:.85;transition:opacity .2s,color .2s}
.foot li a:hover{opacity:1;color:var(--marigold)}
.foot-legal{position:relative;display:flex;gap:28px;align-items:center;font-size:12.5px;color:rgba(251,248,242,.42);margin-top:80px;padding-top:26px;padding-bottom:30px}
.foot-legal::after{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:rgba(251,248,242,.1)}
.foot-legal > p:first-child{margin-right:auto}
.foot-hours{margin:24px 0 0;max-width:300px;font-size:13.5px}
.foot-hours div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--bone-line)}
.foot-hours div:last-child{border-bottom:1px solid var(--bone-line)}
.foot-hours dt{color:rgba(251,248,242,.45);font-weight:500}
.foot-hours dd{margin:0;color:var(--bone-dim)}
.urvasoul-credit{margin:0;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-variant:small-caps;padding-left:28px;border-left:1px solid rgba(251,248,242,.16)}
.urvasoul-credit span{opacity:.7}
.urvasoul-credit a{color:inherit;text-decoration:none;transition:color .2s}
.urvasoul-credit a:hover{color:var(--marigold)}

/* ---------- phone dock & sheet (hidden on desktop) ---------- */
.dock,.sheet{display:none}

/* ---------- reveal ---------- */
/* headings: each word rises out of a mask, line by line */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.js .hw > span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease) var(--ld,0s)}
.js .hw-in .hw > span{transform:none}
/* photos: a panel of the section colour lifts away, bottom to top */
.wipe{position:absolute;inset:0;z-index:5;background:var(--wipe,var(--bg));transform-origin:50% 0;transition:transform 1.15s cubic-bezier(.7,0,.2,1) .1s;pointer-events:none}
.in > .wipe,.in .wipe,.wipe.in{transform:scaleY(0)}
.areas .wipe{--wipe:var(--night)}
.svc .wipe{--wipe:var(--bone)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* =========================================================
   TABLET (≤1100)
   ========================================================= */
@media (max-width:1100px){
  :root{--g:32px}
  .nav-links{gap:22px}
  .nav-tel{display:none}
  .hero-copy{padding:40px 40px 44px var(--g)}
  .wa-grid{gap:56px}
  .svc-grid{gap:64px}
  .areas-grid{gap:48px}
  .area-list{column-gap:28px}
  .st-list{gap:100px 48px}
  .st:nth-child(3) .keytag{right:-24px}
  .st-feature{gap:56px}
  .visit-grid{gap:56px}
}
@media (max-width:900px){
  :root{--sec:104px}
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .sheet{display:block}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-photo{grid-column:1;grid-row:1}
  .hero-img{flex:none;aspect-ratio:16/9}
  .hero-photo figcaption{position:static;display:flex;align-items:center;gap:12px;padding:12px var(--g) 0;background:none;box-shadow:none;border-radius:0;text-shadow:none;font-size:12.5px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--mute)}
  .hero-photo figcaption::before{content:"";position:static;width:28px;height:1px;margin:0;border-radius:0;background:var(--line-2);box-shadow:none}
  .hero-photo figcaption::after{display:none}
  .hero-photo figcaption span{font-size:14px;color:var(--ink-2)}
  .hero-img::after{inset:10px}
  .meter-tip{display:none}
  .area-list{grid-template-rows:none}
  .area-list > .area:nth-of-type(n){grid-row:auto}
  .areas-legend,.areas-more{grid-row:auto}
  .hero-copy{grid-column:1;grid-row:2;padding:28px var(--g) 64px}
  .hero h1{max-width:14ch}
  .wa-grid{grid-template-columns:1fr;gap:72px}
  .chat-col{max-width:460px}
  .svc-grid{grid-template-columns:1fr}
  .svc-media{position:relative;top:auto;max-width:520px;margin-bottom:56px}
  .svc-frame{aspect-ratio:4/3}
  .areas-head{grid-template-columns:1fr;gap:20px;margin-bottom:48px}
  .areas-grid{grid-template-columns:1fr}
  .areas-side{position:static}
  .mapz{max-height:none}
  .mapz-wrap{max-width:520px}
  .st-feature{grid-template-columns:1fr}
  .st-feature .stamp{right:28px}
  .st .keytag,.st:nth-child(3) .keytag{right:24px}
  .visit-grid{grid-template-columns:1fr;gap:44px}
  .map{min-height:420px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
  .foot-brand{grid-column:1/-1}
  .sec-head:has(.sec-aside){display:block}
  .sec-aside{margin-top:24px;max-width:30em}
}

/* menu button + sheet (≤900) */
.menu-btn{align-items:center;gap:10px;height:44px;padding:0 4px 0 2px;background:none;border:0;cursor:pointer;font-weight:600;font-size:14.5px;color:inherit}
.menu-lines{position:relative;width:22px;height:10px}
.menu-lines i{position:absolute;left:0;right:0;height:1.8px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-lines i:first-child{top:0}.menu-lines i:last-child{top:8px}
.menu-open .menu-lines i:first-child{top:4px;transform:rotate(45deg)}
.menu-open .menu-lines i:last-child{top:4px;transform:rotate(-45deg)}
.menu-open .nav{color:var(--ink)}
.menu-open .nav::before{opacity:1}
.menu-open .nav::after{opacity:0}
.sheet{position:fixed;inset:var(--navh) 0 0 0;z-index:49;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.menu-open .sheet{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s}
.sheet-in{min-height:100%;display:flex;flex-direction:column;padding:26px var(--g) calc(28px + env(safe-area-inset-bottom))}
.sheet-lbl{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:6px}
.sheet-links{display:flex;flex-direction:column;margin-bottom:30px}
.sheet-links a{font-family:var(--serif);font-size:32px;font-weight:380;letter-spacing:-.02em;line-height:1.2;padding:9px 0;text-decoration:none;display:flex;align-items:center;justify-content:space-between}
.sheet-links a::after{content:"";width:8px;height:8px;border-top:1.6px solid var(--ink);border-right:1.6px solid var(--ink);transform:rotate(45deg);opacity:.35}
.sheet-areas{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;margin-top:4px}
.sheet-areas a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px;font-weight:500}
.sheet-foot{margin-top:auto;padding-top:32px}
.sheet-tel{display:block;font-family:var(--serif);font-size:26px;text-decoration:none;font-variant-numeric:lining-nums;margin-top:20px}
.sheet-wa{display:inline-flex;margin-top:8px;font-weight:600;color:var(--marigold-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sheet-foot p{margin-top:12px;font-size:13.5px;color:var(--mute)}
.menu-open{overflow:hidden}

/* =========================================================
   PHONE (≤600) · designed for the hand
   ========================================================= */
@media (max-width:600px){
  :root{--g:21px;--navh:62px;--sec:80px}
  body{font-size:16px}
  .nav-in{gap:12px}
  .logo-mark{width:27px;height:27px}
  .logo-word{font-size:22px}
  .logo-word{flex-direction:column;align-items:flex-start;gap:3px}
  .logo-word small{font-size:9px;letter-spacing:.34em;opacity:.62;margin-left:1px}
  .nav-act{margin-left:auto;gap:10px}
  .nav-act .btn-sm{display:none}
  .menu-btn{display:inline-flex;font-size:15px}

  .eyebrow{font-size:11.5px;margin-bottom:14px}
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:clamp(34px,10vw,42px);max-width:none}
  .lead-in{font-size:16.5px}
  .orn{margin-bottom:44px}
  .sec-aside{border-left:0;padding:16px 0 0;border-top:1px solid var(--line);font-size:17px;margin-top:22px}

  /* hero: photo strip, caption, headline, slip */
  .hero-img{aspect-ratio:auto;height:34svh;min-height:220px;max-height:300px}
  .hero-img img{object-position:30% 55%}
  .hero-photo figcaption{padding:10px var(--g) 0;font-size:11.5px}
  .hero-kb{animation-duration:40s}
  .hero-photo figcaption::before{width:18px}
  .hero-photo figcaption span{font-size:13px}
  .hero-copy{padding:22px var(--g) 48px}
  .kicker{font-size:11px;letter-spacing:.16em;margin-bottom:12px}
  .hero h1{font-size:clamp(34px,9.6vw,41px);line-height:1.04;max-width:none}
  .hero-lede{display:none}
  .lead{margin:26px calc(var(--g) * -1) 0;padding:18px var(--g) 24px;border-width:1px 0;border-radius:0;max-width:none;box-shadow:0 20px 40px -34px rgba(60,45,20,.5)}
  .lead-head{padding-right:0}
  .fs{margin-bottom:16px}
  .chips{gap:8px}
  .chips span{min-height:44px;padding:0 15px;font-size:15px}
  .chips-seg{max-width:none}
  .chips-seg span{min-height:44px;font-size:16px}
  #budget-chips{display:grid;grid-template-columns:1fr 1fr}
  #budget-chips span{width:100%;justify-content:center}
  .lead [data-next]{margin-top:6px;min-height:56px;font-size:16px}
  .lead-row .btn{max-width:none;min-height:56px}
  .lead-sum{font-size:19px}
  .done-top{grid-template-columns:1fr;gap:6px}
  .keytag-lg{align-self:flex-start;align-items:center}
  .done-top{justify-items:start}
  .done-h{font-size:34px}

  /* whatsapp: heading, chat, list, button */
  .wa{padding:var(--sec) 0}
  .wa-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .wa-copy{display:contents}
  .wa .eyebrow{order:1}
  .wa h2{order:2;font-size:clamp(34px,9.8vw,41px);margin-bottom:18px;max-width:none}
  .wa .lead-in{order:3}
  .chat-col{order:4;margin:36px 0 44px;max-width:none;width:100%}
  .chat{border-width:6px;border-radius:30px}
  .wa-list{order:5;margin:0 0 32px}
  .wa .btn-wa{order:6;width:100%;min-height:60px}
  .wa-hint{order:7}
  .wa-list li{grid-template-columns:20px 1fr;gap:6px 12px;padding:16px 0;align-items:center}
  .wa-list li span{grid-column:1/-1}
  .wa-li-ico{align-self:center;transform:translateY(-1px)}
  .wa-list b{font-size:18px}
  .wa-list span{font-size:15px}
  .chat-body{height:380px;padding:42px 10px 8px}
  .msg{font-size:14.5px;max-width:86%}
  .msg.pic{width:78%}
  .chat-cap{text-align:left;margin-top:12px}

  /* services: one 4:3 image under the heading, then the route */
  .svc{padding:var(--sec) 0}
  .svc .orn{display:none}
  .svc-grid{display:flex;flex-direction:column;gap:0}
  .svc-media{order:0;max-width:none;margin:0 0 48px}
  .svc-corners::before{left:-8px;top:-8px;width:18px;height:18px}
  .svc-corners::after{right:-8px;bottom:-8px;width:18px;height:18px}
  .svc-frame{aspect-ratio:4/3}
  .svc-cap{margin-top:16px}
  .svc-cap-t{font-size:15px}
  .route{order:1;padding-left:52px}
  .route-track{left:12px;bottom:auto;height:calc(100% - 20px)}
  .route-pin{left:-13px}
  .step{padding:26px 0 30px}
  .step::before{left:-46px;top:34px}
  .step:first-of-type::before{top:6px}
  .step h3{font-size:clamp(27px,7.6vw,31px);margin-bottom:10px}
  .step p{font-size:15.5px}
  .tags{font-size:10.5px;letter-spacing:.1em;flex-direction:column;gap:9px}

  /* stories */
  .stories{padding:var(--sec) 0}
  .stories .orn{display:none}
  .st-list{display:flex;flex-direction:column;gap:80px}
  .st-feature{display:flex;flex-direction:column;gap:0}
  .st-photo img{object-position:50% 30%}
  .st-body,.st-feature .st-body{padding-top:40px}
  .st blockquote,.st-feature blockquote{margin:0 0 14px}
  .st blockquote p,.st-feature blockquote p{font-size:clamp(22px,6.3vw,25px);line-height:1.3}
  .st-ledger{padding-top:22px}
  .st-ledger div{font-size:14px;padding:10px 0}
  .st-ledger dd{font-size:15.5px}
  .st-photo,.st-feature .st-photo{width:100%;aspect-ratio:4/5}
  .st .keytag,.st:nth-child(3) .keytag{right:16px}
  .st-q{height:56px;font-size:110px;margin:-6px 0 6px -4px}
  .st-adv{padding-top:22px}
  .st .keytag{top:-30px}
  .st .kt-string{height:14px}
  .st .kt-tag{min-width:0;padding:21px 11px 9px}
  .st .kt-tag b{font-size:14.5px}
  .st .kt-tag em{font-size:9px;letter-spacing:.1em}
  .stamp,.st-feature .stamp{right:22px;font-size:13px;padding:4px 7px 4px 10px;border-width:2px;letter-spacing:.2em}

  /* areas: head, map, sticky budget bar, tall chapters */
  .areas{padding:var(--sec) 0 64px}
  .areas-head{margin-bottom:28px}
  .areas-head h2{font-size:clamp(34px,9.8vw,41px)}
  .areas-grid{display:block}
  .areas-side{display:contents}
  .mapz-wrap{max-width:none;margin:0 -4px}
  .mapz{min-height:0}
  .mapz-cap{font-size:14.5px;min-height:0;margin:10px 4px 0}
  .meter{position:sticky;top:var(--navh);z-index:5;margin:22px calc(var(--g) * -1) 0;padding:10px var(--g) 8px;background:rgba(28,26,23,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .meter-mode button{min-height:34px;min-width:56px;font-size:14px}
  .meter-lbl{font-size:9.5px;letter-spacing:.14em}
  .meter-out{font-size:27px;line-height:1.1}
  .meter-rail{margin-top:2px}
  .meter-marks{display:none}
  .meter-range{height:40px}
  .meter-scale{display:none}
  .meter-count{margin:0;font-size:13px}
  .cnt b{font-size:16px}
  .meter-nudge{font-size:13.5px;margin-top:2px}
  .area-list{display:flex;flex-direction:column;gap:56px;padding:36px 0 0}
  .area:nth-child(even),.js .area:nth-child(even).rv,.js .area:nth-child(even).rv.in{transform:none}
  .js .area:nth-child(even).rv:not(.in){transform:translateY(26px)}
  .area figure,.area-wide figure{margin:0 calc(var(--g) * -1);aspect-ratio:4/4.3}
  .area-wide{margin-top:0}
  .area-wide .area-txt{display:block;padding-top:18px}
  .area-txt{padding-top:18px}
  .area h3{font-size:clamp(48px,14.5vw,60px);line-height:.95;margin:10px 0 12px;letter-spacing:-.035em}
  .area-wide h3{margin-bottom:12px}
  .known{font-size:15.5px}
  .range{font-size:13.5px}
  .areas-note{margin-top:0;font-size:13.5px}
  .areas-legend{padding-bottom:0;align-self:stretch}
  .areas-more{padding-top:0;align-self:stretch}
  .area-wide .area-txt{max-width:none}

  /* visit */
  .visit{padding:0 0 var(--sec)}
  .visit > .wrap:first-child{display:none}
  .visit-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .map{order:2;min-height:0;height:380px;padding:8px;border-radius:16px}
  .map-mat{border-radius:10px}
  .map-route{display:none}
  .visit-txt{display:contents}
  .visit .eyebrow{order:0;margin-top:var(--sec)}
  .visit h2{order:1;font-size:clamp(34px,9.8vw,41px);margin-bottom:28px}
  .visit address{order:3;margin:28px 0 22px;font-size:21px}
  .visit address::after{content:"8 min walk from Khar Road station";display:block;margin-top:6px;font-family:var(--sans);font-size:13.5px;color:var(--mute)}
  .hours{order:4;margin-bottom:28px}
  .hours div{font-size:14.5px}
  .visit-act{order:5;flex-direction:column;align-items:stretch;gap:10px}
  .visit-act .btn{min-height:56px}
  .visit-act .btn-text{text-align:center}

  /* cta: photo, then every word on flat night below */
  .cta{min-height:0;display:block}
  .cta::before{display:none}
  .cta-photo{position:relative;inset:auto;aspect-ratio:4/5;max-height:72svh}
  .cta-img{object-position:62% 50%}
  .cta-in{padding-top:28px;padding-bottom:72px}
  .cta h2{font-size:clamp(40px,11.6vw,50px);max-width:none}
  .cta-p{font-size:16.5px}
  .ticket{margin-top:26px}
  .cta-act{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .cta-act .btn{min-height:58px}

  /* footer */
  .foot{padding:72px 0 0}
  .foot-sign{font-size:clamp(36px,10.6vw,44px)}
  .foot-sign em{display:block}
  .foot-orn{margin:30px 0 44px}
  .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 18px}
  .foot-brand p{font-size:14.5px;margin-top:14px}
  .foot-col:nth-child(3){grid-column:1/-1;grid-row:3}
  .foot-col:nth-child(3) ul{columns:2;column-gap:18px}
  .foot li{font-size:14.5px}
  .foot-legal{flex-direction:column;align-items:flex-start;gap:6px;margin-top:60px;font-size:11.5px;line-height:1.6;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .urvasoul-credit{margin-top:14px;padding:14px 0 0;border-left:0;border-top:1px solid rgba(251,248,242,.12);font-size:10.5px}
  .foot-hours{max-width:none}

  /* bottom dock: Call | WhatsApp */
  .dock{display:grid;grid-template-columns:1fr 1.25fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bone);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);transform:translateY(105%);transition:transform .45s var(--ease);box-shadow:0 -12px 30px -18px rgba(32,30,27,.35)}
  .dock.show{transform:none}
  .dock a{display:flex;align-items:center;justify-content:center;gap:9px;height:58px;text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.01em}
  .dock a:active{opacity:.8}
  .dock svg{width:18px;height:18px}
  .dock-wa{background:var(--ink);color:var(--bone)}
  .dock-wa svg{color:#3DDC84;width:20px;height:20px}
  .menu-open .dock{transform:translateY(105%)}
}
@media (max-width:374px){
  :root{--g:18px}
  .chips span{padding:0 13px;font-size:14.5px}
  .wa-list li{grid-template-columns:18px 76px 1fr}
  .sheet-links a{font-size:29px}
  .lead-no b{display:none}
}
@media (max-width:600px) and (min-width:410px){
  .hero h1{font-size:clamp(38px,9.8vw,42px)}
}

/* tablet: the budget bar also sticks while the chapters scroll */
@media (min-width:601px) and (max-width:900px){
  .areas-side{display:contents}
  .meter{position:sticky;top:var(--navh);z-index:5;margin:28px calc(var(--g) * -1) 40px;padding:12px var(--g) 10px;background:rgba(28,26,23,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .meter-out{font-size:30px}
  .meter-marks{display:none}
  .meter-rail{margin-top:4px}
  .meter-scale{display:none}
  .meter-count{margin-top:2px}
  .area-list{row-gap:56px}
  .area-wide{margin-top:120px}
}

/* =========================================================
   ROUND 3 · finishing pass
   ========================================================= */
/* warm ink buttons, never pure black */
.btn-ink,.btn-wa{background:#2A251F}
.btn-ink:hover,.btn-wa:hover{background:#3A3229}
.nav--dark .btn-ink:hover{background:#fff}

/* the enquiry slip: paper, inner highlight, perforated top edge */
.lead{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(0,0,0,.04),0 24px 48px -24px rgba(60,40,10,.18);border-top-color:transparent}
.lead::before{opacity:.05}
.lead::after{content:"";position:absolute;left:0;right:0;top:-4px;height:9px;pointer-events:none;
  background:radial-gradient(circle at 7px 4px,var(--bg) 3.2px,transparent 3.8px) 0 0/14px 9px repeat-x,linear-gradient(var(--line),var(--line)) 0 4px/100% 1px no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}

/* chat: the date pill lives in the thread and slides out under a soft fade */
.chat-win::before{display:none}
.chat-day{display:none}
.chat-body{padding-top:16px;-webkit-mask-image:linear-gradient(transparent 0,#000 30px);mask-image:linear-gradient(transparent 0,#000 30px)}
.chat-body .day{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);background:rgba(251,248,242,.95);box-shadow:0 1px 1px rgba(0,0,0,.06);margin:0 0 4px}
.wa{padding-bottom:88px}

/* key tags: one unit swings in from the tack, quick, single overshoot */
.st .keytag{z-index:6}
.js .st .keytag{opacity:0;transform:rotate(-14deg)}
.js .st.in .keytag{animation:tagIn .5s cubic-bezier(.3,1.35,.5,1) .2s forwards}
.lead-done .keytag-lg{animation:tagIn .55s cubic-bezier(.3,1.35,.5,1) .1s both}
@keyframes tagIn{0%{opacity:0;transform:rotate(-14deg)}30%{opacity:1}100%{opacity:1;transform:rotate(0)}}
.st .kt-string{width:1.2px;background:rgba(32,30,27,.6)}
.st:nth-child(2) .keytag{right:auto;left:22px}

/* photos develop instead of being wiped (no frame ever shows) */
.wipe{display:none}
.js .ph-rv{opacity:0;transition:opacity .9s var(--ease)}
.js .ph-rv.in{opacity:1}

/* stories ledger: three rows, no empty slot */
.st-adv{margin-top:26px;border-top:0;padding-top:0}

/* services to stories: one divider (the band change), less dead air */
.svc{padding-bottom:84px}
.stories .orn{display:none}
.stories{padding-top:112px}
.step-ph{display:none}

/* ---------- areas: the golden-hour map ---------- */
@media (min-width:1101px){
  .areas-grid{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:64px}
}
@media (min-width:901px){
  .mapz{width:auto;max-width:100%;aspect-ratio:400/440;max-height:none;height:clamp(360px,calc(100vh - 404px),520px);min-height:0}
  .areas-side{top:calc(var(--navh) + 20px)}
}
.mapz{--t:.4;border-radius:6px;box-shadow:0 0 0 1px rgba(251,248,242,.08)}
.mz-note{font-size:13px;fill:rgba(251,248,242,.42)}
.mz-sm{font-size:11px;fill:rgba(251,248,242,.6)}
.mz-compass text,.mz-scale text{font-size:10px}
.mz-lbl{font-size:14.5px}
.mz-sea-lbl{transition:opacity .4s}
.mz-seawarm{opacity:var(--t);transition:opacity .5s var(--ease)}
.mz-sky{pointer-events:none;transition:opacity .5s var(--ease)}
.mz-sky-noon{opacity:calc(1 - var(--t))}
.mz-sky-dusk{opacity:var(--t)}
.mz-glitter{opacity:var(--gl2,0);transition:opacity .5s}
.mz-glitter path{stroke:#FFD18A;stroke-width:1.2;stroke-linecap:round;animation:glint 3.2s ease-in-out infinite}
.mz-glitter path:nth-child(2n){animation-delay:-1.1s}.mz-glitter path:nth-child(3n){animation-delay:-2s}
.mz-disc{fill:#F8CB62;stroke:#FFE7AE;stroke-width:1.2;opacity:calc(1 - var(--t) * .85);transition:opacity .5s}
.mz-disc-dusk{fill:#EE6F38;stroke:#FFB27A;stroke-width:1.2}
.mz-rays path{stroke-width:1.8}
.mz-rays{opacity:calc(1 - var(--t) * .6)}
.mz-halo{opacity:calc(.8 + var(--t) * .2)}
.mz-arc{stroke:rgba(235,162,30,.32)}
.mz-shd{fill:#060504;opacity:0;filter:url(#soft);transition:opacity .6s var(--ease)}
.mz.on .mz-shd{opacity:calc(.25 + var(--t) * .45)}
.mz-bld{fill:#2B2721;stroke:rgba(251,248,242,.38);stroke-width:.7;transition:fill .6s,stroke .6s}
.mz.on .mz-bld{fill:#4A3A22;stroke:rgba(255,214,140,.9)}
.mz-win{fill:#FFD27A;opacity:0;transition:opacity .45s var(--ease) var(--wd,0s)}
.mz.on .mz-win{opacity:calc(.2 + var(--t) * .8)}
.mz-ping{fill:none;stroke:var(--marigold);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.mz.ping .mz-ping{animation:ping 1.1s var(--ease)}
@keyframes ping{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.meter-dial{display:none}

/* slider rail: one quiet layer, diamonds for neighbourhoods */
.meter-marks span::before{display:none}
.meter-marks span::after{top:11px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:1px;background:var(--night);box-shadow:inset 0 0 0 1.2px rgba(251,248,242,.5);transform:rotate(45deg)}
.meter-marks span.f::after{background:var(--marigold);box-shadow:0 0 8px rgba(235,162,30,.7)}
.meter-marks span:hover::after{transform:rotate(45deg) scale(1.5)}
.meter-ticks i,.meter-ticks i.maj{height:7px;background:rgba(251,248,242,.4)}

/* the list: no grey wall. Over budget = dusk-toned, still in colour */
.area figure{background:var(--night-2)}
.area.no figure::before{opacity:.6}
.area .area-dim{background:linear-gradient(0deg,rgba(34,20,8,.5),rgba(40,24,10,.32))}
.area.no h3{opacity:.82}
.area-seal{position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px;background:rgba(28,24,19,.72);border:1px solid rgba(251,248,242,.28);color:var(--bone);font-size:11.5px;font-weight:600;letter-spacing:.04em;line-height:1.2;opacity:0;transform:translateY(-4px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;font-variant-numeric:tabular-nums}
.area-seal::before{content:"";width:6px;height:6px;border-radius:50%;background:#E9823A;box-shadow:0 0 0 3px rgba(233,130,58,.25)}
.area.no .area-seal{opacity:1;transform:none}
.area.no:hover figure::before,.area.no:hover .area-dim,.area.peek figure::before,.area.peek .area-dim{opacity:0}
.area.no:hover h3,.area.peek h3{opacity:1}
.area:hover img,.area.peek img{transform:scale(1.03)}

/* Worli continues the staggered rhythm, "Not on the list?" closes the right column */
@media (min-width:901px){
  .area-list{grid-template-rows:repeat(8,1fr)}
  .area-list > .area:nth-of-type(7){grid-column:1;grid-row:7/9}
  .areas-more{grid-column:2;grid-row:8;align-self:end;padding:0 0 4px}
  .area-worli img{object-position:58% 50%}
}

/* ---------- visit ---------- */
.map{min-height:560px}
.map-sketch{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.map iframe{z-index:0;opacity:0;transition:opacity .8s var(--ease)}
.map.loaded iframe{opacity:1}
.map-route{--rs:260px;position:absolute;z-index:2;left:50%;top:50%;width:var(--rs);height:var(--rs);margin:0;transform:translateY(-100%);display:block;pointer-events:none}
.map-route svg{width:100%;height:100%;transform:none;overflow:visible}
.map-route em,.map-route b{position:absolute;margin:0;width:max-content;font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;background:var(--bone);padding:4px 11px 5px;border:1px solid var(--line-2);border-radius:4px;box-shadow:0 8px 18px -8px rgba(32,30,27,.35)}
.map-route .mr-lbl{left:30%;top:52%}
.map-route .mr-stn-lbl{right:12%;top:0;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;transform:translateY(-2px)}
.js .map-route{opacity:0}
.js .map.in .map-route{opacity:1;transition:opacity .6s var(--ease) .5s}

/* ---------- footer ---------- */
.foot-orn{margin:84px 0 64px}
.foot-orn svg:first-child{position:relative;z-index:1}
.foot-orn .foot-sky{position:absolute;left:44px;bottom:13px;width:calc(100% - 44px);height:70px;color:var(--bone);opacity:.16;pointer-events:none}
.foot-adv{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--bone-line);max-width:320px}
.foot-adv img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 2px var(--night),0 0 0 3px rgba(235,162,30,.6)}
.foot-adv p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;font-size:13.5px;color:var(--bone-dim);line-height:1.4}
.foot-adv em{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--bone-dim)}
.foot-adv b{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--bone)}
.foot-open{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;letter-spacing:.02em}
.foot-open i{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.18);animation:pulse 2.6s var(--ease) infinite}
.foot-open.shut i{background:rgba(251,248,242,.4);box-shadow:none;animation:none}

/* CTA: calmer ground under the headline */
.cta::before{background:linear-gradient(0deg,var(--night) 0,rgba(28,26,23,0) 140px),linear-gradient(90deg,rgba(24,21,17,.86) 0%,rgba(24,21,17,.7) 32%,rgba(24,21,17,.3) 55%,rgba(24,21,17,0) 75%),linear-gradient(0deg,rgba(24,21,17,.5),transparent 45%)}

@media (max-width:900px){
  .meter{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;align-items:center}
  .meter > :not(.meter-dial){grid-column:2}
  .meter-dial{display:block;grid-column:1;grid-row:1/span 4;width:56px;height:56px;align-self:center}
  .md-bg{fill:#2A2621;stroke:rgba(251,248,242,.14)}
  .md-dusk{fill:#6A3421;opacity:var(--t,.4);transition:opacity .4s}
  .md-sea{stroke:rgba(169,198,207,.35);stroke-width:1;fill:none;stroke-linecap:round}
  .md-arc{fill:none;stroke:rgba(235,162,30,.4);stroke-dasharray:1 3;stroke-linecap:round}
  .md-arm{transform:translate(28px,36px) rotate(var(--ang,0deg));transition:transform .25s var(--ease)}
  .md-sun{fill:#F8CB62}
  .md-halo{fill:rgba(246,194,90,.3)}
  .md-n{fill:var(--bone);font-family:var(--serif);font-size:15px;text-anchor:middle;font-weight:500}
  .meter-dial{transform-origin:center}
  .meter-dial.pulse{animation:dialPulse .45s var(--ease)}
  .map-route{--rs:170px}
  .map-route .mr-lbl{font-size:13px;left:26%;top:44%}
  .map-route .mr-stn-lbl{font-size:10.5px;right:14%;top:-2px}
}
@keyframes dialPulse{40%{transform:scale(1.12)}}
@media (max-width:600px){
  .hero-copy{padding-bottom:0}
  .lead{border-bottom:1px solid var(--line)}
  .step-ph{display:block;margin:0 0 18px;height:160px;overflow:hidden;background:var(--sand)}
  .step-ph img{width:100%;height:100%;object-fit:cover}
  .mz-sm{font-size:12.5px}
  .mz-lbl{font-size:16px}
  .mz-note{font-size:14px}
  .mz-compass text,.mz-scale text{font-size:11.5px}
  .meter-out{font-size:25px}
  .area-list{gap:38px;padding-top:28px}
  .area figure,.area-worli figure{aspect-ratio:16/9;max-height:206px}
  .area-txt{padding-top:14px}
  .area h3{font-size:clamp(38px,11vw,46px);margin:6px 0 8px}
  .range{margin-top:12px;padding-top:10px}
  .area-go{margin-top:10px}
  .areas-legend p{padding:7px 0}
  .areas-legend .areas-legend-h{padding-bottom:6px}
  .area-seal{left:var(--g);top:12px}
  .areas-more{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--bone-line);border-bottom:1px solid var(--bone-line)}
  .areas-more p:not(.areas-more-h){display:none}
  .areas-more .areas-more-h{padding:0;font-size:17px}
  .areas-more a{margin:0;flex:none}
  .areas-note{border-top:0;padding-top:0;font-size:12.5px}
  .visit address::after{content:none}
  .visit-act .btn-text{text-align:left;align-self:flex-start}
  .foot-legal{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  .foot-orn{margin:56px 0 44px}
  .foot-orn .foot-sky{height:46px}
  .foot-adv{max-width:none}
  .st:nth-child(2) .keytag{left:16px}
  .map-route{--rs:150px}
}
.mz-dot{display:none}

/* =========================================================
   ROUND 4 · "Your front door" opening scene
   The hero pins for one scroll run; JS writes --p (0..1) and
   door geometry (--dx --dy --dw --dh --fy) onto .stage.
   ========================================================= */
.hero-pin{position:relative;min-height:100vh;min-height:100svh}
.enq-anchor{position:absolute;left:0;top:calc(var(--navh) + 12px);width:1px;height:1px;pointer-events:none}
.scene-run{height:0}
.stage{display:none}
.hero-toran{display:none}
.hero{overflow-x:clip}
.hero-photo .toran{position:absolute;z-index:4;left:-12px;right:0;top:-6px;height:64px;pointer-events:none}
.toran svg{display:block;width:100%;height:100%;overflow:visible}

@media (prefers-reduced-motion:no-preference){
  .js .scene-run{height:115vh;height:115svh}
  .js .hero-pin{position:sticky;top:0}
  .js .stage{display:block}
}
.hero-toran{display:block}

.stage{position:absolute;left:0;top:0;width:100%;height:100vh;height:100svh;z-index:20;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;
  --p:0;--key:0;--open:0;--light:0;--dolly:1;--fade:1;--dw:300px;--dh:640px;--dx:500px;--dy:100px;--fy:740px;--mx:0;--my:0;--vw:100vw;--vh:100vh}
.stage.done{visibility:hidden}
/* the room behind the door: a full-bleed photo that later settles into the hero panel */
/* JS moves/scales this box (transform only) to shrink the room into the hero panel; the photo is counter-scaled */
.stg-room{position:absolute;inset:0;overflow:hidden;background:#120E0A;transform-origin:0 0;will-change:transform}
.stg-room img{position:absolute;left:0;top:0;width:1800px;height:1200px;max-width:none;transform-origin:0 0;will-change:transform}
.stg-room-dim{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 55%,rgba(40,24,8,.4),rgba(14,9,4,.92));opacity:calc(1 - var(--light));pointer-events:none}
.stg-motes{position:absolute;inset:0;opacity:calc(var(--light) * (1 - var(--settle,0)));pointer-events:none}
.stg-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE2A6;box-shadow:0 0 6px 1px rgba(255,214,140,.8);opacity:0;animation:mote 9s linear infinite}
.stg-motes i:nth-child(1){left:calc(var(--dx) + var(--dw) * .2);top:calc(var(--dy) + var(--dh) * .3);animation-delay:-1s}
.stg-motes i:nth-child(2){left:calc(var(--dx) + var(--dw) * .55);top:calc(var(--dy) + var(--dh) * .5);animation-delay:-3s;animation-duration:11s}
.stg-motes i:nth-child(3){left:calc(var(--dx) + var(--dw) * .8);top:calc(var(--dy) + var(--dh) * .2);animation-delay:-5s}
.stg-motes i:nth-child(4){left:calc(var(--dx) + var(--dw) * .35);top:calc(var(--dy) + var(--dh) * .7);animation-delay:-7s;animation-duration:13s}
.stg-motes i:nth-child(5){left:calc(var(--dx) + var(--dw) * .65);top:calc(var(--dy) + var(--dh) * .8);animation-delay:-2s;width:2px;height:2px}
.stg-motes i:nth-child(6){left:calc(var(--dx) + var(--dw) * .1);top:calc(var(--dy) + var(--dh) * .6);animation-delay:-4s;width:2px;height:2px}
.stg-motes i:nth-child(7){left:calc(var(--dx) + var(--dw) * .9);top:calc(var(--dy) + var(--dh) * .45);animation-delay:-6s;animation-duration:12s}
.stg-motes i:nth-child(8){left:calc(var(--dx) + var(--dw) * .45);top:calc(var(--dy) + var(--dh) * .15);animation-delay:-8s;width:2px;height:2px}
.stg-motes i:nth-child(9){left:calc(var(--dx) + var(--dw) * 1.2);top:calc(var(--dy) + var(--dh) * .55);animation-delay:-2.5s}
.stg-motes i:nth-child(10){left:calc(var(--dx) - var(--dw) * .2);top:calc(var(--dy) + var(--dh) * .4);animation-delay:-5.5s;width:2px;height:2px}
.stg-motes i:nth-child(11){left:calc(var(--dx) + var(--dw) * .7);top:calc(var(--dy) + var(--dh) * .62);animation-delay:-.5s;animation-duration:10s}
.stg-motes i:nth-child(12){left:calc(var(--dx) + var(--dw) * .28);top:calc(var(--dy) + var(--dh) * .9);animation-delay:-9s;animation-duration:14s}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.85}50%{transform:translate(14px,-36px)}85%{opacity:.6}100%{opacity:0;transform:translate(-6px,-80px)}}

/* the landing: everything the camera walks past */
.stg-front{position:absolute;inset:0;transform-origin:calc(var(--dx) + var(--dw) / 2) calc(var(--dy) + var(--dh) * .55);
  transform:scale(var(--dolly));opacity:var(--fade);will-change:opacity}
/* no will-change:transform here on purpose: this layer zooms ~7x for the walk-through, and a transform-hinted
   layer keeps a huge raster scale that ran out of tile memory in Chrome (whole wall missing / tiles
   dropping out after scrolling back up). Re-rastering at the true scale each frame is cheap and solid. */
/* the wall is three plain opaque pieces around the doorway (left, lintel, right) rather than one
   full-screen element with a mask-composite hole: no mask layer to re-raster while the scene zooms.
   Each piece paints the same stage-sized gradients, offset by its own position, and they abut on whole pixels (no overlap: the translucent glow would double up), so the seams are invisible. */
.stg-wall{position:absolute;inset:0}
.stg-wall .wp{position:absolute;top:0;overflow:hidden;
  background:radial-gradient(130% 95% at 50% 42%,transparent 38%,rgba(0,0,0,.6)),linear-gradient(180deg,#3B2F25 0%,#34291F 60%,#2A2119 100%);
  background-size:var(--vw) var(--vh);background-repeat:no-repeat;background-position:calc(var(--l) * -1) 0}
.stg-wall .wl{--l:0px;left:0;width:var(--dx);height:calc(var(--fy) + 2px)}
.stg-wall .wr{--l:calc(var(--dx) + var(--dw));left:var(--l);right:0;height:calc(var(--fy) + 2px)}
.stg-wall .wt{--l:var(--dx);left:var(--l);width:var(--dw);height:var(--dy)}
.stg-wall .wp::before{content:"";position:absolute;inset:0;background-image:var(--grain-l);background-size:220px;background-position:calc(var(--l) * -1) 0;opacity:.08}
.stg-wall .wp::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at calc(var(--dx) + var(--dw) / 2) calc(var(--dy) + var(--dh) * .5),rgba(255,190,100,.5),rgba(235,162,30,.16) 24%,transparent 48%) no-repeat;background-size:var(--vw) var(--vh);background-position:calc(var(--l) * -1) 0;opacity:var(--light)}
/* the sconce's warm pool on the wall; leans toward the cursor */
.stg-wall .wp b{position:absolute;width:calc(var(--dh) * 1.5);height:calc(var(--dh) * 1.5);border-radius:50%;
  left:calc(var(--dx) + var(--dw) * 1.62 - var(--l) - var(--dh) * .75);top:calc(var(--dy) + var(--dh) * .16 - var(--dh) * .75);
  background:radial-gradient(closest-side,rgba(255,196,120,.36),rgba(255,170,90,.13) 40%,rgba(255,170,90,0));
  transform:translate3d(calc(var(--mx) * 40px),calc(var(--my) * 26px),0);pointer-events:none}
/* skirting + floor */
.stg-floor{position:absolute;left:0;right:0;top:var(--fy);bottom:0;overflow:hidden;background:linear-gradient(180deg,#221B15 0%,#120E09 100%);perspective:520px;perspective-origin:calc(var(--dx) + var(--dw) / 2) -60%}
.stg-floor::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:7px;background:linear-gradient(#4A3A2C,#2A2018);box-shadow:0 1px 0 rgba(255,220,170,.12)}
.stg-tiles{position:absolute;left:-150%;width:400%;top:0;height:1200px;transform-origin:50% 0;transform:rotateX(78deg);
  background:linear-gradient(90deg,rgba(255,230,190,.08) 1px,transparent 1px) 0 0/140px 140px,linear-gradient(0deg,rgba(255,230,190,.07) 1px,transparent 1px) 0 0/140px 140px}
.stg-spill{position:absolute;left:0;right:0;top:var(--fy);bottom:0;opacity:var(--light);pointer-events:none;
  background:radial-gradient(70% 130% at calc(var(--dx) + var(--dw) * .5) 0,rgba(255,206,130,.6),rgba(235,162,30,.2) 45%,transparent 80%);
  clip-path:polygon(calc(var(--dx) + 2px) 0,calc(var(--dx) + var(--dw) - 2px) 0,calc(var(--dx) + var(--dw) * 2.4) 100%,calc(var(--dx) - var(--dw) * .6) 100%)}
.stg-bloom{position:absolute;inset:0;pointer-events:none;opacity:calc(var(--light) * .9);
  background:radial-gradient(calc(var(--dw) * 1.5) calc(var(--dh) * .95) at calc(var(--dx) + var(--dw) / 2) calc(var(--dy) + var(--dh) * .5),rgba(255,214,150,.22),transparent 70%)}
/* brass sconce on the wall, right of the door */
.stg-sconce{position:absolute;left:calc(var(--dx) + var(--dw) * 1.62 - 9px);top:calc(var(--dy) + var(--dh) * .16 - 14px);width:18px;height:44px}
.stg-sconce::before{content:"";position:absolute;left:5px;top:22px;width:8px;height:20px;border-radius:2px;background:linear-gradient(90deg,#7A5A22,#D9B866 50%,#7A5A22);box-shadow:0 4px 6px rgba(0,0,0,.5)}
.stg-sconce i{position:absolute;left:0;top:0;width:18px;height:24px;border-radius:9px 9px 4px 4px;background:radial-gradient(circle at 50% 70%,#FFF4D6,#FFD58A 45%,#E8A040);box-shadow:0 0 22px 8px rgba(255,190,100,.45),0 0 70px 30px rgba(255,170,80,.16)}
/* the door */
.door{position:absolute;left:var(--dx);top:var(--dy);width:var(--dw);height:var(--dh)}
.door-jamb{position:absolute;inset:0;perspective:calc(var(--dh) * 2.2);perspective-origin:50% 55%}
.door-leaf{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(calc(var(--open) * 100deg));transform-style:preserve-3d;will-change:transform}
.leaf-face{position:absolute;inset:0;overflow:hidden;background:url(img/door-teak.jpg) center/cover #6B3D1C;box-shadow:inset 0 0 0 1px rgba(30,15,5,.6)}
.leaf-face::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,10,4,.6),rgba(20,10,4,.22) 45%,rgba(255,200,130,.12) 82%,rgba(20,10,4,.3)),linear-gradient(180deg,rgba(255,210,150,.12),rgba(10,5,2,.45))}
.leaf-panel{position:absolute;left:13%;right:13%;border-radius:2px;box-shadow:inset 3px 3px 0 rgba(20,8,2,.55),inset -2px -2px 0 rgba(255,210,150,.22),inset 12px 12px 0 -3px rgba(255,210,150,.07),inset -12px -12px 0 -3px rgba(20,8,2,.32)}
.lp1{top:7%;height:38%}.lp2{top:53%;height:40%}
.leaf-eye{position:absolute;left:50%;top:15%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#0B0805 32%,#E7C77E 38%,#8E6A27 72%,#D9B866);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.leaf-plate{position:absolute;left:21%;right:21%;top:24%;padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;border-radius:2px;
  background:linear-gradient(135deg,#F0D99A 0%,#C9A256 38%,#B0863A 55%,#DDBD72 78%,#BC9447 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 0 rgba(80,55,15,.4) inset,0 0 0 1px rgba(70,45,10,.6),0 6px 10px -4px rgba(0,0,0,.7)}
.leaf-plate::before,.leaf-plate::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f4e2b4,#7a5a22 75%)}
.leaf-plate::before{left:6px}.leaf-plate::after{right:6px}
.leaf-plate b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:calc(var(--dw) * .085);line-height:1;color:#3A2709;text-shadow:0 1px 0 rgba(255,240,205,.6)}
.leaf-plate small{margin-top:4px;font-size:max(7px,calc(var(--dw) * .028));font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#4A3712;opacity:.8}
.leaf-handle{position:absolute;right:15%;top:52%;width:calc(var(--dw) * .16);height:7px;border-radius:4px;background:linear-gradient(180deg,#F4DC9C,#B08A3E 55%,#6E5018);box-shadow:0 4px 6px rgba(0,0,0,.55)}
.leaf-handle::after{content:"";position:absolute;right:-3px;top:-6px;width:12px;height:19px;border-radius:6px;background:linear-gradient(90deg,#8E6A27,#E7C77E 50%,#8E6A27);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.leaf-lock{position:absolute;right:15%;top:58%;width:calc(var(--dw) * .058);height:calc(var(--dw) * .12);margin-right:-2px;border-radius:8px;background:linear-gradient(90deg,#8E6A27,#E7C77E 50%,#8E6A27);box-shadow:0 2px 5px rgba(0,0,0,.6)}
.leaf-key{position:absolute;left:50%;top:50%;width:calc(var(--dw) * .2);height:calc(var(--dw) * .2);margin:calc(var(--dw) * -.155) 0 0 calc(var(--dw) * -.1);transform:rotate(calc(var(--key) * 90deg));transform-origin:50% 77%;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.55));z-index:2;animation:keyJig 3.6s var(--ease) 1.2s infinite}
.stage.moved .leaf-key{animation:none}
@keyframes keyJig{0%,78%,100%{rotate:0deg}84%{rotate:14deg}90%{rotate:-5deg}95%{rotate:2deg}}
.leaf-tag{position:absolute;left:50%;top:60%;transform-origin:50% 0;transform:translateX(-50%) rotate(calc(var(--swing,0) * 1deg));display:flex;flex-direction:column;align-items:center;z-index:1}
.leaf-tag i{display:block;width:1px;height:calc(var(--dh) * .05);background:rgba(250,230,190,.7)}
.leaf-tag b{display:block;padding:15px 10px 8px;text-align:center;font-family:var(--serif);font-weight:500;font-size:max(11px,calc(var(--dw) * .052));line-height:1;color:var(--ink);background:var(--marigold);clip-path:polygon(50% 0,100% 9px,100% 100%,0 100%,0 9px);white-space:nowrap;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.leaf-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.75));opacity:calc(var(--open) * .95);pointer-events:none}
.leaf-edge{position:absolute;top:0;bottom:0;right:0;width:14px;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#3B2112,#5A341A)}
.door-gap{position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,#FFE7B0,#FFC86A);box-shadow:0 0 12px 3px rgba(255,200,110,.8),0 0 40px 10px rgba(255,180,80,.35);opacity:var(--crack,0)}
.door-frame{position:absolute;left:calc(var(--dw) * -.11);right:calc(var(--dw) * -.11);top:calc(var(--dw) * -.11);bottom:0;border:calc(var(--dw) * .11) solid #3A2214;border-bottom:0;pointer-events:none;
  border-image:linear-gradient(90deg,#2A170B,#4A2C17 30%,#3A2212 70%,#24140A) 1;box-shadow:0 18px 40px rgba(0,0,0,.5),-1px 0 0 rgba(255,214,160,.08)}
.door-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 5px 5px 12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,214,160,.1)}
.door-sill{position:absolute;left:calc(var(--dw) * -.14);right:calc(var(--dw) * -.14);top:100%;height:8px;background:linear-gradient(180deg,#D8CCB6,#9C907C);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.stg-toran{position:absolute;left:calc(var(--dw) * -.22);right:calc(var(--dw) * -.22);top:calc(var(--dw) * -.13);height:calc(var(--dw) * .34)}
/* rangoli + diya on the floor, in front of the door */
.stg-rangoli{position:absolute;left:calc(var(--dx) + var(--dw) / 2 - var(--dw) * .55);top:calc(var(--fy) + var(--dw) * .07);width:calc(var(--dw) * 1.1);height:calc(var(--dw) * 1.1);transform:scaleY(.27);transform-origin:50% 0;overflow:visible;opacity:.78;filter:saturate(.85) brightness(.85)}
.rg-o ellipse{fill:#E8781A}
.rg-o ellipse:nth-child(even){fill:#F4B41C}
.rg-dots{fill:none;stroke:#F6EEDC;stroke-width:3.5;stroke-dasharray:.1 9;stroke-linecap:round}
.rg-m path{fill:#B42A4A}
.rg-w circle{fill:#F6EEDC}
.rg-c{fill:#F4B41C}
.rg-c2{fill:#E8781A;stroke:#F6EEDC;stroke-width:2;stroke-dasharray:.1 5;stroke-linecap:round}
.stg-diya{position:absolute;left:calc(var(--dx) + var(--dw) / 2 - 11px);top:calc(var(--fy) + var(--dw) * .2);width:22px;height:9px;border-radius:0 0 11px 11px;background:linear-gradient(180deg,#B66A2A,#7A3E14)}
.stg-diya i{position:absolute;left:8px;top:-13px;width:6px;height:13px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:radial-gradient(circle at 50% 75%,#FFFBEA,#FFD27A 45%,#F08A12);box-shadow:0 0 14px 6px rgba(255,190,90,.55),0 0 40px 16px rgba(255,160,60,.2);transform-origin:50% 100%;animation:flame 1.8s ease-in-out infinite}
@keyframes flame{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(.92,1.08) rotate(3deg)}60%{transform:scale(1.04,.95) rotate(-1deg)}}
/* labels */
.stg-ui{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 max(var(--g),calc((100vw - 1240px)/2 + var(--g))) 30px;color:var(--bone);opacity:calc(1 - var(--p) * 7);pointer-events:none}
.stg-addr{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.35;color:rgba(251,248,242,.72)}
.stg-addr span{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,242,.45);margin-top:3px}
.stg-cue{position:absolute;left:max(var(--g),calc((100vw - 1240px)/2 + var(--g)));top:calc(var(--dy) + var(--dh) * .3);max-width:calc(var(--dx) - 80px);display:flex;flex-direction:column;gap:18px}
.cue-t{font-family:var(--serif);font-style:italic;font-weight:320;font-size:clamp(52px,6vw,92px);line-height:.95;letter-spacing:-.03em;color:var(--bone);font-variation-settings:"SOFT" 50,"opsz" 144}
.cue-s{display:flex;align-items:center;gap:14px}
.cue-s em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,242,.62)}
.cue-touch{display:none!important}
@media (hover:none){.cue-touch{display:block!important}.cue-desk{display:none!important}}
.cue-line{position:relative;width:46px;height:1px;background:rgba(251,248,242,.3);overflow:hidden;flex:none}
.cue-line::after{content:"";position:absolute;left:-16px;top:0;width:16px;height:1px;background:var(--marigold);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{transform:translateX(62px)}}
.stg-skip{pointer-events:auto;border:0;background:none;color:var(--bone);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 0;border-bottom:1px solid rgba(235,162,30,.6)}
.stg-skip span{display:inline-block;margin-left:4px;transition:transform .3s var(--ease)}
.stg-skip:hover span{transform:translateY(3px)}
/* nav over the landing */
.nav.nav--scene{color:var(--bone)}
.nav.nav--scene::before,.nav.nav--scene::after{opacity:0}
.nav.nav--scene .nav-links a,.nav.nav--scene .nav-tel,.nav.nav--scene .logo{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.nav.nav--scene .nav-links a{opacity:.92}
.nav.nav-snap,.nav.nav-snap::before,.nav.nav-snap::after,.nav.nav-snap *{transition:none!important}
/* a dark scrim behind the nav while it floats over the scene (the room photo is bright); JS fades it */
.stg-scrim{position:absolute;left:0;right:0;top:0;height:calc(var(--navh) + 70px);pointer-events:none;
  background:linear-gradient(180deg,rgba(14,9,4,.62),rgba(14,9,4,.34) 55%,rgba(14,9,4,0))}
.nav.nav--scene .btn-ink{background:rgba(251,248,242,.1);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(251,248,242,.3)}
.nav{transition:color .4s}

/* hero copy: held back until the door has opened, then choreographed */
.js .hero .kicker,.js .hero .hero-lede,.js .hero-photo figcaption{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .hero .lead{opacity:0;transform:translateY(56px) rotate(-1.8deg);transform-origin:20% 100%;transition:opacity .8s var(--ease) .4s,transform 1.25s cubic-bezier(.2,.9,.25,1.06) .4s}
.js .hero .hero-lede{transition-delay:.3s}
.js .hero-photo figcaption{transition-delay:.7s}
.js .hero.open .kicker,.js .hero.open .hero-lede,.js .hero.open .lead,.js .hero.open .hero-photo figcaption{opacity:1;transform:none}
.js .hero h1:not(.hw-in) .hw > span{transform:translateY(110%)}
.js .hero h1 em::after{transform:scaleX(0);transition:transform .7s var(--ease) .95s}
.js .hero.open h1 em::after{transform:none}
.hero-toran svg{transform-origin:50% 0}
.js .hero-photo .hero-toran svg{transform:translateY(-110%);opacity:0;transition:transform 1.1s cubic-bezier(.3,1.35,.5,1) .5s,opacity .3s .5s}
.js .hero.open .hero-photo .hero-toran svg{transform:none;opacity:1}
/* toran: marigold strings and mango leaves */
.tr-str{fill:none;stroke:#6B4410;stroke-width:1.1}
.tr-leaf{fill:#3E6A28}
.tr-leaf2{fill:#5B8A3A}

@media (max-width:900px){
  .stg-addr{display:none}
  .stg-ui{padding:0 var(--g) 22px;justify-content:flex-end}
  .stg-cue{left:var(--g);right:var(--g);top:calc(var(--navh) + 22px);max-width:none;gap:12px}
  .cue-t{font-size:clamp(44px,12vw,60px)}
  .hero-photo .toran{left:0;right:0;top:-4px;height:48px}
}
@media (max-width:600px){
  .js .scene-run{height:100vh;height:100svh}
  .hero-photo .toran{height:40px}
}

/* =========================================================
   ROUND 4 · editorial craft, section by section
   ========================================================= */
/* depth layers move a little against the scroll (JS sets --dy) */
[data-depth]{translate:0 var(--dy,0px)}

/* ---------- WhatsApp: a layered desk ---------- */
.chat-col{isolation:isolate}
.chat{z-index:2}
.wa-big{position:absolute;z-index:0;right:-190px;top:90px;font-family:var(--serif);font-weight:300;font-size:420px;line-height:.8;letter-spacing:-.06em;color:rgba(166,106,6,.11);font-variation-settings:"SOFT" 50,"opsz" 144;pointer-events:none;white-space:nowrap}
.wa-big em{position:absolute;left:62%;top:100%;margin-top:14px;font-size:15px;font-style:italic;letter-spacing:0;color:var(--marigold-deep);white-space:nowrap}
.wa-big em::before{content:"";display:inline-block;width:26px;height:1px;margin:0 8px 4px 0;background:currentColor;vertical-align:middle}
.wa .lead-in{max-width:31em}
.wa-print{position:absolute;z-index:1;left:-150px;top:150px;width:200px;margin:0;padding:8px 8px 0;background:var(--bone);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 50px -24px rgba(32,30,27,.55),0 2px 6px rgba(32,30,27,.12);transform:rotate(-5deg)}
.wa-print img{width:100%;aspect-ratio:4/5;object-fit:cover}
.wa-print figcaption{padding:9px 2px 11px;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.3;color:var(--ink-2)}
.chat-cap{position:absolute;right:calc(100% + 64px);bottom:34px;width:150px;margin:0;text-align:right;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.chat-cap::after{content:"";position:absolute;left:calc(100% + 10px);top:50%;width:62px;height:1px;background:var(--ink-2);opacity:.55}
.chat-cap::before{content:"";position:absolute;left:calc(100% + 70px);top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--marigold-deep)}

/* ---------- Services: chapter numeral + the next stop, layered ---------- */
.svc-media{isolation:isolate}
.svc-num{position:absolute;z-index:0;left:-74px;top:-128px;font-family:var(--serif);font-weight:300;font-style:italic;font-size:250px;line-height:1;letter-spacing:-.06em;color:rgba(166,106,6,.16);font-variation-settings:"SOFT" 50,"opsz" 144;pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.svc-num.swap{opacity:0;transform:translateY(14px)}
.svc-corners{position:relative;z-index:1}
.svc-inset{position:absolute;z-index:3;right:-64px;bottom:86px;width:40%;margin:0;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.svc-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;border:7px solid var(--bone);box-shadow:0 34px 50px -22px rgba(32,30,27,.6),0 2px 6px rgba(32,30,27,.15);transition:opacity .45s var(--ease)}
.svc-inset img.swap{opacity:0}
.svc-inset figcaption{position:absolute;left:-2px;top:calc(100% + 8px);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.svc-inset figcaption::before{content:"";display:inline-block;width:18px;height:1px;margin:0 8px 3px 0;background:currentColor;vertical-align:middle}
.svc-inset.gone{opacity:0;transform:translateY(16px)}

/* ---------- Stories: layered spreads, big pull quotes ---------- */
.stories{padding-bottom:180px}
.st-list{display:flex;flex-direction:column;gap:170px}
.st,.st-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:center}
.st:nth-child(2){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.st:nth-child(2) .st-media{order:2}
.st-media{position:relative}
.st-photo,.st-feature .st-photo{width:82%;aspect-ratio:4/5}
.st:nth-child(2) .st-photo{margin-left:auto}
.st-inset{position:absolute;z-index:5;right:0;bottom:-64px;width:44%;margin:0}
.st:nth-child(2) .st-inset{right:auto;left:0}
.st-inset img{width:100%;aspect-ratio:4/5;object-fit:cover;border:8px solid var(--bg);box-shadow:0 40px 60px -26px rgba(32,30,27,.6),0 2px 6px rgba(32,30,27,.14)}
.st-inset figcaption{margin-top:6px;padding-left:8px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mute)}
.st .keytag{right:calc(18% + 22px)}
.st:nth-child(2) .keytag{left:calc(18% + 22px);right:auto}
.stamp,.st-feature .stamp{right:auto;left:26px}
.st:nth-child(2) .stamp{left:calc(18% + 26px)}
.st-body,.st-feature .st-body{padding-top:0}
.st-no{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.st-no b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:0;color:var(--marigold-deep)}
.st-no::after{content:"";flex:0 0 48px;height:1px;background:var(--line-2)}
.st .st-q{display:block;height:84px;margin:-18px 0 8px -6px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:150px;line-height:1;color:var(--marigold)}
.st blockquote p{font-size:clamp(30px,2.9vw,42px);line-height:1.16;font-variation-settings:"SOFT" 50,"opsz" 144}
.st-feature blockquote p{font-size:clamp(34px,3.3vw,48px)}

/* ---------- Areas: night skyline rises out of the page ---------- */
.areas{overflow:visible;overflow-x:clip}
.visit,.stories,.svc{overflow-x:clip}
.areas-sky{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:120px;pointer-events:none;display:block}
.sky-b{fill:var(--night)}
.sky-w rect{fill:var(--marigold);opacity:.75}
.areas-sky .sky-w rect:nth-child(3n){opacity:.35}

/* chapters: huge names standing behind skyline-cut photos */
.area-list,.area-list[class]{display:flex;flex-direction:column;gap:120px;grid-template-rows:none}
.area-list > .area:nth-of-type(n),.areas-legend,.areas-more{grid-row:auto;grid-column:auto;align-self:stretch}
.areas-legend{padding-bottom:0}
.area-stage{position:relative;--nf:clamp(72px,8.6vw,128px)}
.area-stage h3,.area h3{position:relative;z-index:0;margin:0;font-size:var(--nf);line-height:1;letter-spacing:-.04em;white-space:nowrap;font-weight:340;font-variation-settings:"SOFT" 50,"opsz" 144;color:var(--bone);transition:opacity .6s var(--ease),color .6s var(--ease)}
.area.fits h3{color:#FFF3DA}
.area.no h3{opacity:.5}
.area-no{position:absolute;right:0;top:calc(var(--nf) * .18);font-family:var(--serif);font-size:15px;color:var(--marigold);font-variant-numeric:lining-nums}
.area-no i{font-style:normal;color:rgba(251,248,242,.4);margin-left:5px}
.area figure,.area-wide figure,.area-worli figure{position:relative;z-index:1;margin-top:calc(var(--nf) * -.46);aspect-ratio:2/1;max-height:none;
  -webkit-mask:var(--sky) 0 0/100% 64px no-repeat,linear-gradient(#000 0 0) 0 63px/100% calc(100% - 63px) no-repeat;
  mask:var(--sky) 0 0/100% 64px no-repeat,linear-gradient(#000 0 0) 0 63px/100% calc(100% - 63px) no-repeat}
.area{--sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V40h30V26h18v14h40V52h46V18h10V6h6v12h12v34h60V36h24V20h30v16h36v28h50V44h22V12h8V2h4v10h10v32h58V30h34v34h40V48h24V26h22v38Z'/%3E%3C/svg%3E")}
.area:nth-of-type(3n+2){--sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V46h52V30h26v16h30V22h8V8h6v14h14v42h70V40h40V26h20v14h22v24h48V34h30V16h12V4h4v12h10v48h42V50h40V28h20v-6h14v6h20v42Z'/%3E%3C/svg%3E")}
.area:nth-of-type(3n){--sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V24h20V10h10v14h24v40h44V44h36V30h30v34h56V20h12V6h8v14h16v44h44V48h28V36h26v28h42V16h20v48h40V40h30V28h20v36Z'/%3E%3C/svg%3E")}
.area-seal{top:auto;bottom:14px}
.area-wide h3{margin:0}
.area-txt,.area-wide .area-txt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:40px;align-items:start;padding-top:22px;max-width:none}
.area-txt .fit{grid-column:1/-1;margin-bottom:6px}
.area-txt .known{grid-column:1;grid-row:2}
.area-txt .range{grid-column:2;grid-row:2;margin-top:0;padding-top:0;border-top:0;flex-direction:column;gap:2px}
.area-txt .area-go{grid-column:2;grid-row:3;justify-self:start;margin-top:12px}
.area:hover img,.area.peek img{transform:scale(1.03)}

/* ---------- Visit: a postmark over the address ---------- */
.addr-wrap{position:relative;margin-bottom:26px}
.addr-wrap address{margin-bottom:0}
.postmark{position:absolute;right:-6px;top:-34px;width:118px;height:118px;transform:rotate(-14deg);color:var(--marigold-deep);opacity:.72;mix-blend-mode:multiply;pointer-events:none;overflow:visible}
.postmark circle{fill:none;stroke:currentColor;stroke-width:2}
.postmark circle + circle{stroke-width:1.2}
.postmark text{fill:currentColor;font-family:var(--sans);font-size:9.6px;font-weight:600;letter-spacing:.13em}
.postmark .pm-mid{font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.02em;text-anchor:middle;font-weight:400}
.postmark .pm-yr{font-family:var(--serif);font-size:21px;letter-spacing:.02em;text-anchor:middle;font-weight:500}
.postmark .pm-w{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.8;transform:translate(70px,-6px)}
.js .addr-wrap.rv .postmark{opacity:0;transform:rotate(-24deg) scale(1.35)}
.js .addr-wrap.rv.in .postmark{animation:pmark .55s cubic-bezier(.3,1.5,.5,1) .5s forwards}
@keyframes pmark{0%{opacity:0;transform:rotate(-24deg) scale(1.35)}60%{opacity:.8;transform:rotate(-13deg) scale(.96)}100%{opacity:.72;transform:rotate(-14deg) scale(1)}}

/* ---------- CTA: the viewing-slot ticket tears off ---------- */
a.ticket{text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ticket{--tear:0}
.ticket-l{position:relative;z-index:1}
.ticket-r{transform-origin:0 100%;transform:translate(calc(var(--tear) * 9px),calc(var(--tear) * -3px)) rotate(calc(var(--tear) * 8deg));transition:transform .25s linear;
  clip-path:polygon(4px 0,100% 0,100% 100%,4px 100%,0 94%,4px 88%,0 82%,4px 76%,0 70%,4px 64%,0 58%,4px 52%,0 46%,4px 40%,0 34%,4px 28%,0 22%,4px 16%,0 10%,4px 4%)}
.ticket-tear{position:absolute;left:-2px;top:-22px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--bone);white-space:nowrap;opacity:calc(.35 + var(--tear));transform:rotate(calc(var(--tear) * -8deg));transform-origin:0 100%}
.ticket-tear::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23FBF8F2' stroke-width='1.4'%3E%3Ccircle cx='4' cy='4' r='2.4'/%3E%3Ccircle cx='4' cy='12' r='2.4'/%3E%3Cpath d='M6 5.2 15 12M6 10.8 15 4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.ticket-mine{display:none;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.2;margin-top:2px}
.ticket.torn .ticket-mine{display:block}
.ticket.torn .ticket-r{animation:tearOff .9s cubic-bezier(.5,0,.75,.4) forwards}
@keyframes tearOff{0%{transform:translate(9px,-3px) rotate(8deg)}25%{transform:translate(20px,-10px) rotate(16deg)}100%{transform:translate(70px,180px) rotate(48deg);opacity:0}}
.ticket:hover{transform:rotate(-1deg) translateY(-2px)}
.ticket:hover .ticket-r{--tear:1}
.ticket:focus-visible{outline:2px solid var(--marigold);outline-offset:6px;border-radius:6px}

/* ---------- desktop widths ---------- */
@media (max-width:1100px){
  .wa-print{left:-120px;width:170px}
  .chat-cap{display:none}
  .st,.st-feature,.st:nth-child(2){gap:56px}
  .area-txt{grid-template-columns:1fr}
  .area-txt .known,.area-txt .range,.area-txt .area-go{grid-column:1;grid-row:auto}
  .area-txt .range{margin-top:12px;flex-direction:row;gap:4px 22px}
}
@media (max-width:900px){
  .wa-print{left:auto;right:-20px;top:-40px;width:150px;transform:rotate(5deg)}
  .wa-big{top:-70px;right:-20px;font-size:220px}
  .wa-big em{display:none}
  .chat-col{margin-top:40px}
  .chat-cap{display:block;position:static;width:auto;text-align:left;margin-top:14px}
  .chat-cap::before,.chat-cap::after{display:none}
  .st,.st-feature,.st:nth-child(2){display:flex;flex-direction:column;align-items:stretch;gap:0}
  .st:nth-child(2) .st-media{order:0}
  .st-body,.st-feature .st-body{padding-top:96px}
  .svc-num{left:-8px;top:-70px;font-size:150px}
  .svc-inset{right:-16px;width:34%}
  .areas-sky{height:84px}
}

/* ---------- phone ---------- */
@media (max-width:600px){
  .wa-big{font-size:170px;top:-46px;right:auto;left:-6px}
  .wa-print{width:116px;right:-8px;top:-34px;padding:5px 5px 0}
  .wa-print figcaption{font-size:10.5px;padding:6px 1px 7px}
  .chat-col{margin:64px 0 44px}
  .svc-num{left:10px;right:auto;top:auto;bottom:58px;z-index:2;font-size:104px;-webkit-text-stroke:1px rgba(251,248,242,.85);text-shadow:0 2px 20px rgba(0,0,0,.15)}
  .svc-inset{right:-10px;bottom:-26px;width:31%}
  .svc-inset img{border-width:5px}
  .svc-inset figcaption{display:none}
  .svc-cap{padding-right:36%}
  .stories{padding-bottom:120px}
  .st-list{gap:110px}
  .st-photo,.st-feature .st-photo{width:84%}
  .st-inset{width:46%;bottom:-48px;right:0}
  .st-inset img{border-width:6px}
  .st-inset figcaption{font-size:12.5px}
  .st .keytag,.st:nth-child(3) .keytag{right:calc(16% + 14px)}
  .st:nth-child(2) .keytag{left:calc(16% + 14px)}
  .stamp,.st-feature .stamp{left:16px}
  .st:nth-child(2) .stamp{left:calc(16% + 16px)}
  .st-body,.st-feature .st-body{padding-top:84px}
  .st-no{margin-bottom:16px}
  .st .st-q{height:56px;font-size:110px;margin:-6px 0 6px -4px}
  .st blockquote p,.st-feature blockquote p{font-size:clamp(25px,7.2vw,30px);line-height:1.2}
  .areas-sky{height:56px}
  .area-list,.area-list[class]{gap:64px}
  .area-stage{--nf:clamp(56px,17vw,76px)}
  .area-no{top:calc(var(--nf) * .1);font-size:13.5px}
  .area figure,.area-wide figure,.area-worli figure{margin:calc(var(--nf) * -.44) calc(var(--g) * -1) 0;aspect-ratio:16/10;max-height:none;
    -webkit-mask-size:100% 40px,100% calc(100% - 39px);-webkit-mask-position:0 0,0 39px;mask-size:100% 40px,100% calc(100% - 39px);mask-position:0 0,0 39px}
  .area-seal{left:var(--g);bottom:12px}
  .area-txt{display:block;padding-top:16px}
  .area-txt .range{margin-top:12px;padding-top:10px;border-top:1px solid var(--bone-line);flex-direction:row}
  .postmark{width:96px;height:96px;right:-4px;top:-26px}
  .visit .addr-wrap{order:3;margin:28px 0 22px}
  .visit address{margin:0}
}

/* =========================================================
   reduced motion: static but still designed
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .rv,.js .rv.in{opacity:1;transform:none}
  .js .st .keytag,.js .st.in .keytag{opacity:1;transform:none;animation:none}
  .js .ph-rv{opacity:1}
  .js .map-route{opacity:1}
  .map iframe{opacity:1}
  .js .st .stamp{opacity:.92;transform:translateY(62%) rotate(-8deg)}
  .st-photo img{transform:none}
  .js .hero h1 em::after{transform:none}
  .js .map-pin{opacity:1;transform:none}
  [data-par]{transform:none!important}
  .caret{display:none}
  .hero-kb,.mz-rays,.mz-glints path,.kicker .dot{animation:none!important}
  .wipe{display:none}
  .js .hw > span{transform:none!important}
  [data-depth]{translate:none!important}
  .js .hero .kicker,.js .hero .hero-lede,.js .hero .lead,.js .hero-photo figcaption{opacity:1;transform:none}
  .js .hero-photo .hero-toran svg{transform:none;opacity:1}
  .js .addr-wrap.rv .postmark{opacity:.72;transform:rotate(-14deg);animation:none}
  .ticket-r{transition:none}
}


/* =========================================================
   CLEAN PASS · calm hero, quiet selects, sections that fit the viewport
   ========================================================= */
/* ---------- hero ---------- */
.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-copy{padding:40px clamp(48px,5.5vw,112px) 44px max(var(--g),calc((100vw - 1440px)/2 + var(--g)))}
.hero-img{background:#d9cdb9}
.hero-img::after{display:none}
.hero-img::before{background:linear-gradient(0deg,rgba(20,15,9,.42),rgba(20,15,9,0) 26%)}
.hero-photo figcaption{left:36px;bottom:30px;padding:0;gap:10px;align-items:center;background:none;box-shadow:none;border-radius:0;text-shadow:0 1px 8px rgba(0,0,0,.35);
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.82)}
.hero-photo figcaption::before{position:static;width:22px;height:1px;margin:0;border-radius:0;background:rgba(251,248,242,.7);box-shadow:none}
.hero-photo figcaption::after{display:none}
.hero-photo figcaption span{font-size:15px;color:#FBF8F2;letter-spacing:0;text-transform:none}
.kicker{font-size:11.5px;letter-spacing:.2em;margin-bottom:22px;gap:12px}
.kicker .dot{width:6px;height:6px;box-shadow:none;animation:none}
.hero h1{font-size:clamp(46px,4.3vw,74px);line-height:1.03;letter-spacing:-.024em;max-width:12.2ch;font-weight:380}
.hero h1 em{font-weight:350}
.hero h1 em::after{left:3%;right:7%;bottom:.05em;height:.065em;opacity:.75;border-radius:1px}
.hero-lede{margin-top:20px;font-size:17.5px;line-height:1.55;max-width:30em}

/* the enquiry: one quiet card */
.lead{margin-top:34px;max-width:540px;padding:22px 26px 26px;background:var(--bone);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 30px 60px -46px rgba(60,40,10,.38)}
.lead::before,.lead::after{display:none}
.lead-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.lead-lbl,.pick-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lead .lead-steps{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lead .lead-steps b{font-weight:600;color:var(--ink)}
.lead .chips-seg{padding:3px;background:transparent;border:1px solid var(--line-2)}
.lead .chips-seg::before{left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/3);box-shadow:none}
.lead .chips-seg span{min-height:42px;font-size:15px;font-weight:500}
.picks{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:22px 0 26px}
.pick-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:42px;margin-top:2px;padding:0 2px 0 0;background:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  font:inherit;font-size:16px;font-weight:500;color:var(--ink-2);text-align:left;cursor:pointer;transition:border-color .2s}
.pick.set .pick-btn{color:var(--ink)}
.pick-btn:hover{border-bottom-color:var(--ink)}
.pick.open .pick-btn{border-bottom-color:var(--marigold-deep)}
.pick-btn:focus-visible{outline:2px solid var(--marigold-deep);outline-offset:3px}
.pick-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-chev{flex:none;width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .3s var(--ease)}
.pick.open .pick-chev{transform:rotate(180deg)}
.pick-menu{position:absolute;z-index:12;left:-14px;right:-14px;top:calc(100% + 8px);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;background:var(--bone);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 28px 50px -22px rgba(40,28,10,.32),0 2px 6px rgba(40,28,10,.06);animation:pmIn .22s var(--ease)}
.pick-menu.up{top:auto;bottom:calc(100% + 8px)}
@keyframes pmIn{from{opacity:0;transform:translateY(-4px)}}
.pick-menu label{position:relative;display:block;cursor:pointer}
.pick-menu input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick-menu span{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:4px;font-size:15px;color:var(--ink-2);transition:background-color .15s,color .15s}
.pick-menu span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--marigold);transform:scale(0);transition:transform .25s var(--ease)}
.pick-menu label:hover span{background:rgba(32,30,27,.05);color:var(--ink)}
.pick-menu input:checked+span{color:var(--ink);font-weight:600}
.pick-menu input:checked+span::before{transform:none}
.pick-menu input:focus-visible+span{outline:2px solid var(--marigold-deep);outline-offset:-2px}
.lead [data-next]{margin-top:0;min-height:52px;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px -16px rgba(166,106,6,.8)}
/* step 2 + done, compact */
.lead-sum{font-size:18px;margin-bottom:16px}
.lead .field{margin-bottom:12px}
.lead .field label{font-size:11px;margin-bottom:6px}
.lead .field input{height:48px;border-radius:6px;border-color:var(--line-2)}
.lead-note{margin-top:12px;font-size:12.5px}
.done-top{gap:22px;margin-bottom:16px}
.done-h{font-size:clamp(28px,2.4vw,36px);margin:6px 0 8px}
.done-line{margin-bottom:18px}
.done-line li{padding:7px 0 7px 28px;font-size:14.5px}

/* ---------- WhatsApp: copy + one phone, both calm ---------- */
.wa{padding:var(--sec) 0}
.wa-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(56px,8vw,128px)}
.wa-list{margin:32px 0 36px;max-width:520px}
.wa-list li{grid-template-columns:120px 1fr;gap:0 20px;padding:15px 0}
.wa-list li::before{display:none}
.wa-list b{font-size:18px}
.wa-list span{font-size:15.5px}
.chat{box-shadow:0 36px 70px -36px rgba(32,30,27,.4),0 0 0 1px rgba(32,30,27,.2)}
.chat-body{height:clamp(250px,calc(100vh - 470px),400px);height:clamp(250px,calc(100svh - 470px),400px)}
.chat-cap{position:static;width:auto;margin:16px 0 0;text-align:center;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.04em;color:var(--mute)}
.chat-cap::before,.chat-cap::after{display:none}

/* ---------- Services: the sticky frame always fits under the nav ---------- */
@media (min-width:901px){.svc-media{top:calc(var(--navh) + 40px)}}
.svc-media{max-width:max(300px,calc((100vh - var(--navh) - 160px) * .8));max-width:max(300px,calc((100svh - var(--navh) - 160px) * .8))}

@media (max-width:1100px){
  .hero-copy{padding:40px 40px 44px var(--g)}
}
@media (max-width:900px){
  .hero-copy{padding:30px var(--g) 64px}
  .hero-photo figcaption{position:absolute;left:var(--g);bottom:18px;padding:0;color:rgba(251,248,242,.82)}
  .hero-photo figcaption::before{background:rgba(251,248,242,.7)}
  .hero-photo figcaption span{color:#FBF8F2}
  .wa-grid{grid-template-columns:1fr;gap:56px}
  .chat-col{max-width:420px}
  .chat-cap{text-align:left}
  .svc-media{max-width:520px}
}
@media (max-width:600px){
  .hero-img{height:30svh;min-height:200px;max-height:270px}
  .hero-photo figcaption{left:var(--g);bottom:14px;font-size:10px}
  .hero-photo figcaption span{font-size:13.5px}
  .hero-copy{padding:26px var(--g) 0}
  .kicker{font-size:10.5px;letter-spacing:.18em;margin-bottom:14px}
  .hero h1{font-size:clamp(34px,9.4vw,40px);line-height:1.06;max-width:11ch}
  .lead{margin:26px 0 0;padding:0 0 32px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;max-width:none}
  .lead .chips-seg span{min-height:44px;font-size:15.5px}
  .picks{gap:20px;margin:20px 0 24px}
  .pick-btn{height:46px;font-size:16px}
  .pick-menu{left:-6px;right:-6px}
  .lead [data-next]{min-height:54px;font-size:15.5px}
  .done-h{font-size:30px}
  .wa{padding:var(--sec) 0}
  .wa-list li{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .chat-col{margin:36px 0 40px}
  .chat-body{height:360px}
  .chat-cap{text-align:center}
}

/* ---------- section headings: refined, never shouting ---------- */
.sec-head h2{font-size:clamp(36px,3.5vw,54px);line-height:1.06}
.areas-head h2{font-size:clamp(36px,3.5vw,54px)}
.sec-aside{font-size:17px}

/* ---------- Stories: photo and words on one top line ---------- */
.st-list{gap:140px}
.st,.st-feature,.st:nth-child(2){grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(56px,7vw,112px);align-items:start}
.st:nth-child(2){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.st-photo,.st-feature .st-photo{width:100%;aspect-ratio:4/5;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px)}
.st:nth-child(2) .st-photo{margin-left:0}
.st-body,.st-feature .st-body{padding-top:6px}
.st-no{margin-bottom:26px}
.st .st-q{display:none}
.st blockquote{margin:0 0 22px}
.st blockquote p,.st-feature blockquote p{font-size:clamp(26px,2.3vw,38px);line-height:1.24;font-weight:360;max-width:20em;text-indent:-.42em}
.st blockquote p::before{content:"\201C";color:var(--marigold-deep)}
.st-ledger{margin-top:30px;padding-top:0}
.st-adv{margin-top:30px}
/* key tag: small, tidy, pinned to the photo's top edge */
.st .keytag,.st:nth-child(2) .keytag,.st:nth-child(3) .keytag{left:auto;right:28px;top:-6px}
.st .kt-string{height:18px}
.st .kt-tag{min-width:0;padding:19px 13px 9px}
.st .kt-tag::after{display:none}
.st .kt-tag b{font-size:14.5px}
.st .kt-tag em{font-size:9px;letter-spacing:.12em}
/* stamp: small, inked on the bottom-left corner */
.stamp,.st-feature .stamp,.st:nth-child(2) .stamp{left:22px;right:auto;bottom:22px;font-size:12px;letter-spacing:.22em;padding:4px 8px 4px 11px;border-width:1.5px;border-radius:3px;box-shadow:none;background:rgba(251,248,242,.94)}
.js .st .stamp{transform:scale(1.25)}
.stamp::after{display:none}

/* ---------- Areas: clean names, clean photos ---------- */
.areas-sky{display:none}
.area-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:20px;--nf:clamp(48px,4.6vw,76px)}
.area-stage h3,.area h3{grid-column:1;grid-row:1;font-weight:360;letter-spacing:-.03em}
.area-no{position:static;grid-column:2;grid-row:1;font-size:14px}
.area figure,.area-wide figure,.area-worli figure{grid-column:1/-1;grid-row:2;margin-top:18px;aspect-ratio:16/9;-webkit-mask:none;mask:none;box-shadow:0 0 0 1px rgba(251,248,242,.08)}
.area figure::after{height:2px}
.area-seal{left:16px;bottom:14px;top:auto;padding:0;gap:8px;background:none;border:0;border-radius:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,242,.9);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.area-seal::before{width:5px;height:5px;box-shadow:none}
.area .area-dim{background:linear-gradient(0deg,rgba(20,14,8,.62),rgba(20,14,8,.18) 45%,rgba(20,14,8,.12))}
.area-list,.area-list[class]{gap:104px}
@media (min-width:901px){
  .areas-side{top:calc(var(--navh) + 28px)}
  .mapz{height:clamp(220px,calc(100vh - 440px),480px);height:clamp(220px,calc(100svh - 440px),480px)}
}

/* ---------- CTA: restraint ---------- */
.cta{min-height:78vh;min-height:78svh}
.cta-img{filter:saturate(.8)}
.cta::before,.cta::before{background:linear-gradient(90deg,rgba(20,18,15,.94) 0%,rgba(20,18,15,.82) 34%,rgba(20,18,15,.35) 62%,rgba(20,18,15,.12) 100%),linear-gradient(0deg,var(--night) 0,rgba(28,26,23,0) 160px)}
.cta-in{padding-top:128px;padding-bottom:120px}
.cta h2{font-size:clamp(40px,4vw,64px);line-height:1.05;max-width:none;letter-spacing:-.022em}
.cta-p{margin-top:20px;font-size:17px;color:rgba(251,248,242,.76)}
.cta-slots{display:flex;align-items:center;gap:12px;margin-top:34px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,242,.72)}
.cta-slots i{width:6px;height:6px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 4px rgba(235,162,30,.18)}
.cta-act{gap:32px;margin-top:22px}
.cta-link{font-size:15px;font-weight:500;color:rgba(251,248,242,.86);text-decoration:none;border-bottom:1px solid rgba(251,248,242,.3);padding-bottom:3px;transition:border-color .25s,color .25s}
.cta-link:hover{color:var(--bone);border-color:var(--marigold)}

@media (max-width:900px){
  .st,.st-feature,.st:nth-child(2){display:flex;flex-direction:column;gap:0}
  .st-photo,.st-feature .st-photo{max-height:none}
  .st-body,.st-feature .st-body{padding-top:40px}
}
@media (max-width:600px){
  .sec-head h2,.areas-head h2{font-size:clamp(32px,8.6vw,38px)}
  .st-list{gap:88px}
  .st-photo,.st-feature .st-photo{width:100%}
  .st-body,.st-feature .st-body{padding-top:30px}
  .st-no{margin-bottom:16px}
  .st blockquote p,.st-feature blockquote p{font-size:clamp(23px,6.2vw,26px);line-height:1.28}
  .st .keytag,.st:nth-child(2) .keytag,.st:nth-child(3) .keytag{right:18px;top:-6px}
  .stamp,.st-feature .stamp,.st:nth-child(2) .stamp{left:16px;bottom:16px;font-size:11px}
  .area-stage{--nf:clamp(36px,10.4vw,46px)}
  .area figure,.area-wide figure,.area-worli figure{margin-top:12px;aspect-ratio:3/2}
  .area-list,.area-list[class]{gap:64px}
  .cta{min-height:0}
  .cta-in{padding-top:96px;padding-bottom:88px}
  .cta h2{font-size:clamp(34px,9vw,40px)}
  .cta h2 em{display:inline}
  .cta-act{flex-direction:column;align-items:flex-start;gap:18px}
  .cta-act .btn{width:100%}
}
.js .st.in .stamp{animation:stampIn .5s var(--ease) .8s forwards}
@keyframes stampIn{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .st .stamp,.js .st.in .stamp{opacity:1;transform:none;animation:none}}
@media (max-width:600px){.svc-cap{padding-right:0}.cta-slots{letter-spacing:.12em;font-size:11px}}
@media (max-width:600px){.wa-grid{gap:0}}
.pick-menu.pm-budget{grid-template-columns:1fr;left:calc(50% - 2px)}

/* =========================================================
   HERO V3 · full-bleed photograph, enquiry docked as a search bar
   ========================================================= */
.hero{--hx:max(var(--g),calc((100vw - 1440px)/2 + var(--g)));--barh:84px;--below:118px;
  --grade:linear-gradient(90deg,rgba(26,17,8,.62) 0%,rgba(26,17,8,.38) 28%,rgba(26,17,8,.08) 54%,rgba(26,17,8,0) 68%),linear-gradient(0deg,rgba(26,17,8,.5) 0%,rgba(26,17,8,.1) 36%,rgba(26,17,8,0) 54%)}
.hero-grid,.hero-grid[class]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;padding-top:var(--navh);background:var(--bg)}
.hero-photo,.hero-photo[class]{grid-column:1;grid-row:1;position:relative;margin:0;display:block;height:max(460px,calc(100vh - var(--navh) - var(--below)));height:max(460px,calc(100svh - var(--navh) - var(--below)))}
.hero-img,.hero-img[class]{position:absolute;inset:0;height:auto;max-height:none;min-height:0;aspect-ratio:auto;flex:none;overflow:hidden;background:#3a2c1c}
.hero-img img,.hero-img[class] img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;outline:0;transform-origin:62% 48%}
.hero-img::before,.hero-img[class]::before{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grade)}
.hero-img::after{display:none}
.hero.landed .hero-img img{animation:heroDrift 38s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:none}to{transform:scale(1.055) translate3d(-.8%,-.4%,0)}}
/* caption: quiet, bottom-right, just above the bar */
.hero-photo figcaption,.hero-photo[class] figcaption{position:absolute;z-index:3;left:auto;right:var(--hx);bottom:calc(var(--barh) / 2 + 26px);top:auto;display:flex;align-items:center;gap:10px;padding:0;background:none;box-shadow:none;border-radius:0;
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,242,.78);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero-photo figcaption::before{content:"";position:static;width:22px;height:1px;margin:0;background:rgba(251,248,242,.6);box-shadow:none;border-radius:0}
.hero-photo figcaption::after{display:none}
.hero-photo figcaption span{font-family:var(--serif);font-style:italic;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:#FBF8F2}
/* the words, over the light */
.hero-copy,.hero-copy[class]{grid-column:1;grid-row:1;align-self:end;position:relative;z-index:2;display:block;padding:0 var(--hx) calc(var(--barh) / 2 + clamp(36px,6.5vh,72px));pointer-events:none;color:#FBF8F2}
.hero-copy > *{pointer-events:auto}
.hero .kicker{color:rgba(251,248,242,.86);font-size:11.5px;letter-spacing:.22em;margin-bottom:20px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero .kicker .dot{background:var(--marigold);width:6px;height:6px;box-shadow:none;animation:none}
.hero h1,.hero h1[id]{font-size:clamp(46px,4.3vw,80px);line-height:1.02;letter-spacing:-.026em;font-weight:340;max-width:12.4ch;color:#FBF8F2;text-shadow:0 2px 30px rgba(20,12,4,.28)}
.hero h1 em{color:#F2B23A;font-weight:320}
.hero h1 em::after{display:none}
.hero-lede,.hero .hero-lede{display:block;margin-top:18px;font-size:17px;line-height:1.55;color:rgba(251,248,242,.84);max-width:30em;text-shadow:0 1px 12px rgba(0,0,0,.3)}

/* the dock: the bar straddles the photo's bottom edge */
.hero-dock{grid-column:1;grid-row:2;position:relative;z-index:4;margin-top:calc(var(--barh) / -2);padding:0 var(--hx) 30px}
.hero .lead,.hero .lead[class]{position:relative;margin:0;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.lead::before,.lead::after{display:none}
.lead-bar,.lead-done{position:relative;background:var(--bone);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 28px 60px -30px rgba(30,20,8,.45),0 4px 14px -6px rgba(30,20,8,.18)}
.lead-bar{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch;min-height:var(--barh);padding:0 14px 0 0}
.seg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;padding:14px 30px;transition:background-color .2s}
.seg + .seg{border-left:1px solid var(--line)}
.seg-go{padding:0 0 0 14px;border-left:0!important;justify-content:center}
.lead-lbl,.pick-lbl,.lead .field label{display:block;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
/* Buy · Rent · Sell as quiet text tabs with a marigold rule */
.lead .chips-seg{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 26px;padding:0;margin:0;background:none;border:0;border-radius:0}
.lead .chips-seg::before{display:none}
.lead .chips-seg label{position:relative}
.lead .chips-seg span{display:inline-flex;min-height:28px;padding:0;font-size:17px;font-weight:500;color:var(--mute);background:none;border:0;border-radius:0;transition:color .2s}
.lead .chips-seg span::before{display:block;content:"";position:absolute;left:0;right:0;bottom:-3px;width:auto;margin:0;height:2px;border-radius:1px;background:var(--marigold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lead .chips-seg span::after{display:none}
.lead .chips-seg label:hover span{color:var(--ink)}
.lead .chips-seg input:checked+span{color:var(--ink);background:none}
.lead .chips-seg input:checked+span::before{transform:none}
/* Area, Budget: the whole segment is the control */
.lead .pick{cursor:pointer}
.lead .pick:hover,.lead .pick.open,.lead .field:focus-within{background:rgba(32,30,27,.035)}
.lead .pick-btn{position:static;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:28px;margin:0;padding:0;border:0;background:none;font-size:17px;font-weight:500;color:var(--ink-2)}
.lead .pick-btn::before{content:"";position:absolute;inset:0;z-index:1}
.lead .pick.set .pick-btn{color:var(--ink)}
.lead .pick-btn:focus-visible{outline:0}
.lead .pick-btn:focus-visible::before{outline:2px solid var(--marigold-deep);outline-offset:-4px;border-radius:4px}
.lead .pick-chev{width:11px;height:7px;opacity:.55}
.lead .pick-menu,.lead .pick-menu.pm-budget{left:8px;right:8px;top:calc(100% + 10px);z-index:12}
.lead .pick-menu.pm-area{left:8px;right:auto;width:max(calc(100% - 16px),340px)}
.lead .pick-menu.pm-budget{grid-template-columns:1fr}
.lead .pick-menu.up{top:auto;bottom:calc(100% + 10px)}
.lead [data-next],.lead .seg-go .btn{min-height:56px;margin:0;padding:0 30px;font-size:15.5px;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 22px -14px rgba(166,106,6,.75)}
/* step 2 in the same bar */
.seg-sum{flex-direction:row;align-items:center;gap:18px}
.seg-sum .btn-text{flex:none;padding:6px 0;font-size:13.5px;color:var(--ink-2)}
.lead .lead-sum{margin:0;font-family:var(--serif);font-size:16px;line-height:1.35;color:var(--ink);text-wrap:balance}
.lead .field{margin:0}
.lead .field input{height:28px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:17px;font-weight:500}
.lead .field input:focus{box-shadow:none}
.lead .field input::placeholder{color:rgba(74,69,62,.5);font-weight:400}
.lead .field:has(input[aria-invalid="true"]){box-shadow:inset 0 -2px 0 #B4441E}
.lead .tel-wrap span{position:static;flex:none;padding:0 10px 0 0;margin-right:10px;font-size:17px}
.lead .tel-wrap input{padding-left:0}
.lead .field .err{position:absolute;left:30px;top:calc(100% + 10px);margin:0;white-space:nowrap}
.lead .lead-note{position:absolute;left:0;top:calc(100% + 14px);max-width:min(440px,34%);margin:0;font-size:12.5px;line-height:1.5;color:var(--mute)}
/* done: the thank-you takes the bar, the key tag hangs off its top edge */
.lead-done{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:14px 18px 14px 30px}
.lead-done .done-top{display:flex;align-items:center;gap:22px;margin:0}
.lead-done .keytag-lg{flex:none;margin:-52px 0 -20px;transform-origin:50% 4px}
.lead-done .keytag-lg .kt-tag{min-width:104px;padding:20px 12px 10px}
.lead-done .keytag-lg .kt-tag b{font-size:16px}
.lead-done .kt-key{top:30px}
.lead-done .done-h{margin:0 0 2px;font-size:26px;line-height:1.1}
.lead-done .done-p{font-size:14.5px;max-width:none}
.lead-done .done-line{display:none}
.done-act{display:flex;align-items:center;gap:22px}
.done-act .btn{min-height:52px}
.lead-done .btn-text{margin:0;font-size:14px}
/* facts on the cream, under the bar */
.hero-facts{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 2px 0 2px}
.hero-facts ul{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none}
.hero-facts li{display:flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.hero-facts li + li::before{content:"";width:3px;height:3px;margin:0 18px;border-radius:50%;background:var(--marigold)}
.hero-facts b{margin-right:7px;font-weight:600;color:var(--ink)}
.hero-alt{flex:none;font-size:14px;color:var(--mute);text-decoration:none}
.hero-alt span{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(235,162,30,.7);padding-bottom:2px;transition:border-color .2s}
.hero-alt:hover span{border-bottom-color:var(--ink)}
.hero-dock:has(.lead-bar2:not([hidden])) .hero-facts,.hero-dock:has(.lead-done:not([hidden])) .hero-facts ul{visibility:hidden}

/* choreography after the door: words rise, the bar docks */
.js .hero .lead{opacity:1;transform:none;transition:none}
.js .hero .hero-dock{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease) .35s,transform 1s var(--ease) .35s}
.js .hero.open .hero-dock{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .hero .hero-dock{opacity:1;transform:none}.hero.landed .hero-img img{animation:none}}

@media (max-width:1280px){
  .lead-bar{grid-template-columns:minmax(250px,1.1fr) minmax(0,1fr) minmax(0,1fr) auto}
  .seg{padding:14px 24px}
  .lead .chips-seg{gap:0 20px}
  .hero-facts li:nth-child(3){display:none}
}
@media (max-width:1100px){
  .hero-facts{display:none}
  .hero{--below:64px}
}

/* tablet + phone: photo first with the words on it, then the enquiry on the cream below */
@media (max-width:900px){
  .hero{--grade:linear-gradient(0deg,rgba(24,15,7,.8) 0%,rgba(24,15,7,.5) 30%,rgba(24,15,7,.08) 58%,rgba(24,15,7,0) 72%),linear-gradient(180deg,rgba(24,15,7,.55) 0%,rgba(24,15,7,.2) 14%,rgba(24,15,7,0) 26%)}
  .hero-photo,.hero-photo[class]{height:max(400px,62vh);height:max(400px,62svh)}
  .hero-img img,.hero-img[class] img{object-position:34% 50%}
  .hero-photo figcaption,.hero-photo[class] figcaption{left:auto;right:var(--g);top:16px;bottom:auto;font-size:9.5px;letter-spacing:.16em}
  .hero-photo figcaption span{font-size:13px}
  .hero-photo figcaption::before{width:14px}
  .hero-copy,.hero-copy[class]{padding:0 var(--g) 26px}
  .hero .kicker{font-size:10.5px;letter-spacing:.2em;margin-bottom:14px}
  .hero h1,.hero h1[id]{font-size:clamp(36px,9.6vw,54px);line-height:1.04;max-width:11ch}
  .hero-lede,.hero .hero-lede{display:none}
  .hero-dock{margin:0;padding:22px var(--g) 36px;border-bottom:1px solid var(--line)}
  .lead-bar,.lead-done{background:none;box-shadow:none;border-radius:0}
  .lead-bar{grid-template-columns:1fr 1fr;padding:0;min-height:0}
  .seg{padding:0;gap:8px}
  .seg + .seg{border-left:0}
  .lead .pick:hover,.lead .pick.open,.lead .field:focus-within{background:none}
  .seg-intent{grid-column:1/-1;margin-bottom:22px}
  .lead .chips-seg{grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--line-2)}
  .lead .chips-seg span{min-height:46px;width:100%;justify-content:center;font-size:16.5px}
  .lead .chips-seg span::before{bottom:-1px;left:18%;right:18%}
  .lead .chips-seg label:first-child span{justify-content:flex-start}
  .lead .chips-seg label:first-child span::before{left:0;right:36%}
  .lead .chips-seg label:last-child span{justify-content:flex-end}
  .lead .chips-seg label:last-child span::before{left:36%;right:0}
  .lead .pick{padding-bottom:10px;border-bottom:1px solid var(--line-2)}
  .lead .pick + .pick{margin-left:10px;padding-left:10px}
  .lead .pick-btn{height:32px;font-size:16.5px}
  .lead .pick-menu.pm-area{left:0;right:auto;width:calc(200% + 10px)}
  .lead .pick-menu.pm-budget{left:auto;right:0;width:calc(100% + 10px)}
  .seg-go{grid-column:1/-1;padding:0;margin-top:24px}
  .lead [data-next],.lead .seg-go .btn{width:100%;min-height:56px;font-size:16px}
  /* step 2 */
  .seg-sum{grid-column:1/-1;flex-direction:column-reverse;align-items:flex-start;gap:8px;margin-bottom:20px}
  .lead .lead-sum{font-size:19px;line-height:1.35;text-wrap:pretty}
  .lead-bar2 .field{grid-column:1/-1;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
  .lead .field input{height:34px;font-size:17px}
  .lead .field .err{position:static;white-space:normal}
  .lead .lead-note{position:static;grid-column:1/-1;max-width:none;margin-top:14px;font-size:13px}
  .lead-bar2 .seg-go{margin-top:6px}
  /* done */
  .lead-done{display:block;padding:0}
  .lead-done .done-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:20px;margin-bottom:18px}
  .lead-done .keytag-lg{margin:-4px 0 0}
  .lead-done .done-h{font-size:28px;margin-top:6px}
  .lead-done .done-line{display:block;margin-bottom:18px}
  .done-act{flex-direction:column;align-items:stretch;gap:10px}
  .done-act .btn{width:100%;min-height:54px}
  .done-act .btn-text{align-self:flex-start}
}
@media (max-width:600px){
  .hero-photo,.hero-photo[class]{height:max(380px,62vh);height:max(380px,62svh)}
  .hero-copy,.hero-copy[class]{padding:0 var(--g) 24px}
  .hero h1,.hero h1[id]{font-size:clamp(35px,9.7vw,42px);max-width:10.5ch}
  .hero-dock{padding:20px var(--g) 34px}
}
/* the door scene lands on the same graded photo */
.stg-room-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grade);opacity:var(--settle,0)}
.lead-bar.lead-bar2{grid-template-columns:minmax(330px,1.25fr) minmax(0,1fr) minmax(0,1fr) auto}
.lead-bar2 .sum-q{display:none}
@media (max-width:900px){.lead-bar.lead-bar2{grid-template-columns:1fr}.lead-bar2 .sum-q{display:inline}}
/* the words and the bar sit above the door scene, so they arrive while the room settles (never cut by it) */
.hero.above .hero-copy,.hero.above .hero-copy[class]{z-index:22}
.hero.above .hero-dock{z-index:23}
.js .hero:not(.above) .hero-copy,.js .hero:not(.above) .hero-dock{transition:none}

/* =========================================================
   WHATSAPP V3 · the phone stands on a warm photograph; the thread is always whole
   ========================================================= */
.wa{padding:clamp(96px,11vh,136px) 0;background:var(--sand)}
.wa-grid,.wa-grid[class]{grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:clamp(56px,7vw,120px);align-items:center}
.wa h2{font-size:clamp(40px,3.6vw,58px);margin-bottom:22px}
.wa .lead-in{max-width:30em}
/* three rows with numerals */
.wa-list,.wa-list[class]{list-style:none;margin:34px 0 38px;padding:0;max-width:540px;counter-reset:none}
.wa-list li,.wa-list[class] li{display:grid;grid-template-columns:44px 112px minmax(0,1fr);gap:0 14px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line-2)}
.wa-list li:last-child{border-bottom:1px solid var(--line-2)}
.wa-list li::before{display:none}
.wa-no{font-style:normal;font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--marigold-deep);font-variant-numeric:lining-nums tabular-nums}
.wa-list b{font-family:var(--serif);font-style:italic;font-weight:420;font-size:20px;color:var(--ink)}
.wa-list span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.wa-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.wa-act .btn{min-height:58px;padding:0 30px}
.wa-act .btn .wa-ico{color:var(--ink);width:19px;height:19px}
.wa-hint{margin:0;max-width:17em;font-size:13.5px;line-height:1.45;color:var(--mute)}

/* the photograph behind the phone: bleeds to the right edge, the phone straddles its left edge */
.chat-col{position:relative;isolation:isolate}
.wa-scene{position:absolute;z-index:0;margin:0;left:34%;top:-100vh;bottom:-100vh;right:calc(-1 * max(var(--g),(100vw - 1240px) / 2 + var(--g)));overflow:hidden;background:#cdb894}
.wa-scene img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;filter:saturate(.85) sepia(.18) blur(1.5px);transform:scale(1.03)}
.wa-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(234,225,210,.35),rgba(234,225,210,0) 30%),rgba(120,80,20,.12)}
/* the phone */
.chat{z-index:2;border-width:9px;border-radius:40px;box-shadow:0 50px 90px -40px rgba(32,22,8,.55),0 18px 36px -24px rgba(32,22,8,.35),0 0 0 1px rgba(32,30,27,.25)}
.chat-body,.chat-body[class]{height:auto;overflow:visible;padding:16px 14px 12px;gap:8px;position:relative;-webkit-mask-image:none;mask-image:none}
.msg{font-size:14.5px}
.msg.pic{width:76%}
.msg.pic img{aspect-ratio:16/10}
/* late messages keep their space from the start: nothing in the thread ever moves or scrolls */
.js .chat .late{display:block;visibility:hidden}
.js .chat .late.show{visibility:visible;animation:msgIn .45s var(--ease) both}
.typing{position:absolute;left:14px;top:0}
.js .chat .typing.on{display:flex}
.chat-cap,.chat-cap[class]{position:static;width:auto;margin:0;padding:6px 16px 0;border-top:1px solid rgba(32,30,27,.06);text-align:left;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.chat-cap::before,.chat-cap::after{display:none}
.chat-compose{border-top:0;padding-top:6px}

@media (max-width:1100px){
  .wa-list li,.wa-list[class] li{grid-template-columns:36px minmax(0,1fr);gap:4px 10px}
  .wa-list li span{grid-column:2}
}
@media (max-width:900px){
  .wa-grid,.wa-grid[class]{grid-template-columns:1fr;gap:64px}
  .chat-col{max-width:410px;margin:0 auto 0 0;padding:56px 0}
  .wa-scene{left:22%;top:0;bottom:0;right:calc(-1 * var(--g))}
}
@media (max-width:600px){
  .wa{padding:var(--sec) 0}
  .wa .wa-act{order:6;flex-direction:column;align-items:stretch;gap:12px}
  .wa-act .btn{width:100%;min-height:58px}
  .wa-hint{max-width:none;text-align:center}
  .chat-col,.chat-col[class]{order:4;margin:34px calc(var(--g) * -1) 36px;padding:44px var(--g);max-width:none;width:auto}
  .wa-scene{left:0;right:0;top:0;bottom:0}
  .wa-scene::after{background:rgba(120,80,20,.1)}
  .chat{max-width:390px;margin:0 auto;border-width:7px;border-radius:34px}
  .wa-list,.wa-list[class]{order:5;margin:0 0 30px}
  .wa-list li,.wa-list[class] li{grid-template-columns:34px minmax(0,1fr);padding:16px 0}
  .wa-list b{font-size:19px}
  .wa-list span{font-size:15px}
}
/* compact the phone so the whole thread stands inside one screen */
.wa-grid,.wa-grid[class]{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.chat-top{padding:18px 16px 12px}
.chat-top img{width:38px;height:38px}
.chat-body,.chat-body[class]{padding:14px 12px 10px;gap:7px}
.msg{font-size:14px;padding:8px 11px 19px}
.msg.pic{width:78%}
.msg.pic img{aspect-ratio:16/9}
.msg.pic span{padding:7px 7px 0;font-size:12.5px}
.msg.pic strong{font-size:18px}
.compose-txt{font-size:13.5px;padding:10px 14px;min-height:42px}
.compose-send{width:42px;height:42px}
.wa-scene{left:22%}
.wa-scene img{filter:saturate(.9) sepia(.15) blur(.6px)}
@media (max-width:600px){
  .chat-col,.chat-col[class]{padding:40px var(--g)}
  .chat{max-width:330px}
}
@media (max-width:600px){.wa-scene{left:0}}
@media (max-width:900px){.wa-grid,.wa-grid[class]{align-items:stretch}}
@media (max-width:600px){.chat-col,.chat-col[class]{width:auto;margin-left:calc(-1 * var(--g));margin-right:calc(-1 * var(--g))}}

/* =========================================================
   AREAS V3 · the name stands behind the photograph's top edge; skyline divider returns
   ========================================================= */
.areas-sky{display:block;position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(100px,10.6vw,178px);pointer-events:none}
.sky-b{fill:var(--night)}
.sky-c{fill:none;stroke:var(--night);stroke-width:.7;opacity:.9}
.sky-w rect{fill:#F2B23A}
.areas-sky .sky-w rect:nth-child(3n){opacity:.35}
.stories{padding-bottom:calc(var(--sec) + clamp(60px,7vw,120px))}

.area-stage{display:block;position:relative;--nf:clamp(64px,6.6vw,120px)}
.area-no{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:var(--serif);font-size:14px;color:var(--marigold);font-variant-numeric:lining-nums tabular-nums;top:auto;right:auto}
.area-no i{font-style:normal;color:rgba(251,248,242,.4);margin-left:0}
.area-no::after{content:"";flex:1;height:1px;background:rgba(251,248,242,.14)}
.area-stage h3,.area h3{display:block;position:relative;z-index:0;margin:0;font-size:var(--nf);line-height:.92;letter-spacing:-.038em;font-weight:340;font-variation-settings:"SOFT" 50,"opsz" 144;color:rgba(251,248,242,.94);white-space:nowrap;transition:color .6s var(--ease),text-shadow .6s var(--ease),opacity .6s var(--ease)}
.area.no h3{color:rgba(251,248,242,.74)}
.area.fits h3{color:#FFF1D4;text-shadow:0 0 42px rgba(235,162,30,.32)}
/* the photograph rises over the lower third of the letters: one clean straight edge, a soft shadow on the type */
.area figure,.area-wide figure,.area-worli figure{position:relative;z-index:1;margin:calc(var(--nf) * -.2) 0 0;aspect-ratio:16/10;max-height:none;-webkit-mask:none;mask:none;
  box-shadow:0 -14px 30px -18px rgba(0,0,0,.75),0 0 0 1px rgba(251,248,242,.06)}
.area figure::after{height:2px}
/* the grades */
.area .area-dim{background:linear-gradient(0deg,rgba(34,18,6,.62),rgba(46,26,10,.3) 55%,rgba(60,34,12,.22))}
.area.fits .area-sun{opacity:1}
.area.fits figure{box-shadow:0 -14px 30px -18px rgba(0,0,0,.75),0 0 0 1px rgba(235,162,30,.35),0 30px 60px -40px rgba(235,162,30,.45)}
.area-seal{left:16px;bottom:14px;top:auto}

@media (max-width:600px){
  .areas-sky{height:76px}
  .area-stage{--nf:clamp(46px,13.4vw,58px)}
  .area-no{font-size:13px;margin-bottom:4px}
  .area figure,.area-wide figure,.area-worli figure{margin:calc(var(--nf) * -.19) calc(var(--g) * -1) 0;aspect-ratio:3/2}
  .area-seal{left:var(--g)}
}

/* =========================================================
   RESTORED DETAILS · refined, aligned, never cut
   ========================================================= */
/* services: the next stop waits as a small framed print in the photo's corner */
.svc-inset{position:absolute;z-index:3;top:16px;right:16px;bottom:auto;left:auto;width:30%;margin:0;padding:5px 5px 0;background:var(--bone);box-shadow:0 22px 40px -22px rgba(32,30,27,.6),0 1px 3px rgba(32,30,27,.15);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.svc-inset img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:0;box-shadow:none;transition:opacity .45s var(--ease)}
.svc-inset img.swap{opacity:0}
.svc-inset figcaption{position:static;display:flex;align-items:center;gap:7px;padding:6px 2px 7px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.svc-inset figcaption::before{content:"";width:12px;height:1px;margin:0;background:var(--marigold-deep)}
.svc-inset.gone{opacity:0;transform:translateY(-8px)}

/* stories: the second photograph sits in the corner of the first, framed, edges aligned */
.st-inset{position:absolute;z-index:4;right:18px;bottom:18px;left:auto;width:34%;margin:0;padding:6px 6px 0;background:var(--bg);box-shadow:0 26px 44px -24px rgba(32,30,27,.6),0 1px 3px rgba(32,30,27,.14)}
.st-inset img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:0;box-shadow:none}
.st-inset figcaption{margin:0;padding:6px 2px 8px;font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.25;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* visit: the postmark, small and whole, beside the address */
.addr-wrap{position:relative;padding-right:120px}
.postmark,.js .addr-wrap.rv.in .postmark{position:absolute;right:0;top:50%;width:96px;height:96px;margin-top:-48px;color:var(--marigold-deep);opacity:.75;mix-blend-mode:multiply;pointer-events:none;overflow:visible;transform:rotate(-8deg);animation:none}
.postmark circle{fill:none;stroke:currentColor;stroke-width:2}
.postmark circle + circle{stroke-width:1.2}
.postmark text{fill:currentColor;font-family:var(--sans);font-size:9.6px;font-weight:600;letter-spacing:.13em}
.postmark .pm-mid{font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.02em;text-anchor:middle;font-weight:400}
.postmark .pm-yr{font-family:var(--serif);font-size:21px;letter-spacing:.02em;text-anchor:middle;font-weight:500}
.js .addr-wrap.rv:not(.in) .postmark{opacity:0;transform:rotate(-8deg) scale(1.2)}
.postmark{transition:opacity .5s var(--ease) .4s,transform .6s var(--ease) .4s}

/* CTA: the availability as nine small slots */
.cta-slots{display:flex;align-items:center;gap:16px;margin-top:34px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,242,.72)}
.cta-slots i{box-shadow:none}
.slot-dots{display:flex;gap:5px}
.slot-dots i{width:8px;height:8px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.3px rgba(235,162,30,.85)}
.slot-dots i.b{background:rgba(251,248,242,.3);box-shadow:none}
.cta-slots b{color:var(--marigold);font-weight:600}

@media (max-width:600px){
  .svc-inset{width:32%;top:12px;right:12px}
  .st-inset{width:36%;right:12px;bottom:12px}
  .st-inset figcaption{font-size:11.5px}
  .addr-wrap{padding-right:96px}
  .postmark,.js .addr-wrap.rv.in .postmark{width:78px;height:78px;margin-top:-39px}
  .cta-slots{flex-direction:column;align-items:flex-start;gap:10px}
}

/* =========================================================
   PHONE PASS · calm rhythm, one left edge, refined dock
   ========================================================= */
.st:nth-child(n) .st-inset{left:auto;right:18px}
@media (max-width:600px){
  .wa-grid,.wa-grid[class]{gap:0}
  .st:nth-child(n) .st-inset{right:12px}
  .st-inset figcaption{white-space:normal;overflow:visible;font-size:11.5px;line-height:1.25}
  /* visit: the address keeps its lines; the postmark sits small at its top right */
  .addr-wrap{padding-right:0}
  .visit address{font-size:19px;line-height:1.45}
  .postmark,.js .addr-wrap.rv.in .postmark{width:66px;height:66px;top:0;margin-top:0}
  /* the dock: a quiet ink bar with two pills */
  .dock{grid-template-columns:1fr 1.35fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(28,26,23,.94);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-top:1px solid rgba(251,248,242,.08)}
  .dock a{height:48px;border-radius:999px;font-size:15px}
  .dock a:not(.dock-wa){color:var(--bone);box-shadow:inset 0 0 0 1px rgba(251,248,242,.26)}
  .dock-wa{background:var(--marigold);color:var(--ink)}
  .dock-wa svg{color:var(--ink)}
}
.wa-list span,.lead-in,.known,.st-body p{text-wrap:pretty}

/* ######## PHONE RULES FIX ######## */
@media (max-width:600px){
  /* services: no framed print over the photograph; crop marks off so the photo holds the left edge */
  .svc-inset,.svc-inset.gone{display:none}
  .svc-corners::before,.svc-corners::after{display:none}
  /* stories: one photograph per story, no inset print; key-tag small and tidy at the top edge */
  .st-inset,.st:nth-child(n) .st-inset{display:none}
  .st .keytag,.st:nth-child(2) .keytag,.st:nth-child(3) .keytag{left:auto;right:16px;top:-6px;transform-origin:50% 4px}
  .st .keytag .kt-tag{min-width:0;padding:15px 10px 7px}
  .st .keytag .kt-tag b{font-size:13px}
  .st .keytag .kt-tag em{font-size:8.5px}
  .stamp,.st-feature .stamp,.st:nth-child(2) .stamp{left:14px;right:auto;bottom:14px}
  /* whatsapp: the phone sits on a calm warm panel, not over a photograph */
  .wa-scene{background:#E7DCC8}
  .wa-scene img{display:none}
  .wa-scene::after{background:none}
  /* areas: the name stands whole above the photograph, index aligned on the rule above it */
  .area-stage{--nf:clamp(40px,11.6vw,50px)}
  .area-no{margin:0 0 8px}
  .area-stage h3,.area h3{line-height:1.02;padding-bottom:2px}
  .area figure,.area-wide figure,.area-worli figure{margin:14px calc(var(--g) * -1) 0;overflow:visible;box-shadow:none}
  .area img{transform:none!important}
  /* the over-budget line moves below the photograph as a small caps note */
  .area-seal{left:var(--g);right:var(--g);top:calc(100% + 14px);bottom:auto;padding:0;background:none;border:0;border-radius:0;text-shadow:none;color:#E9A27A;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transform:none}
  .area.no .area-seal{transform:none}
  .area.no .area-txt{padding-top:42px}
}

/* ######## DESKTOP FIT PASS ######## */
@media (min-width:601px){
  /* areas: the chapter name stands whole, its baseline resting on the photograph's top edge (no straight edge through the letters) */
  .area figure,.area-wide figure,.area-worli figure{margin-top:calc(var(--nf) * -.02)}
  /* stories: a short quote sits in the middle of its tall photograph, not marooned at the top over a half-screen of nothing */
  .st:not(.st-feature){align-items:center}
  .st:not(.st-feature) .st-body{padding-top:0}
  /* stories: the print's caption wraps rather than ending in an ellipsis on narrower desktops */
  .st-inset figcaption{white-space:normal;overflow:visible;text-overflow:clip}
}