/* Direct Gallery homepage (direct-noir). Loads after site.css. */
:root{--hdr:64px;--pad:clamp(20px,3.4vw,52px);--ink:#0b0b0b;--body:#2a2a2a;--mute:#5f5f5f;--line:#d6d6d6;--bg:#f9f9f9;--ease:cubic-bezier(.22,.61,.36,1);--bad:#9e1b1b}
body.dg{background:var(--bg);color:var(--body);font:400 17px/1.6 "Barlow",system-ui,sans-serif;padding-bottom:0}
:where(.dg) :is(h1,h2,p,ul,ol,figure,blockquote){margin:0}
:where(.dg) :is(ul,ol){list-style:none;padding:0}
.dg a{color:inherit}
.dg :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* header */
.nh{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:none}
.nh.scrolled{box-shadow:none}
.nh-in{display:flex;align-items:center;gap:40px;height:var(--hdr);padding:0 var(--pad)}
.nh .logo img{width:140px;height:auto}
.nh-nav{display:flex;gap:30px;margin-left:auto;white-space:nowrap}
.nh-nav a,.nh-tel{font:400 15px/1 "Barlow",sans-serif;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.nh-nav a{padding:6px 0;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.nh-nav a:hover{background-size:100% 1px}
.nh-tel{font-weight:500;padding-left:28px;border-left:1px solid var(--line);line-height:24px}
.nh .burger{display:none!important}

/* two-column page */
.dg-grid{display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr)}
.dg-main{min-width:0;overflow-x:clip}
.rail{border-left:1px solid var(--line)}
.rail-in{position:sticky;top:calc(var(--hdr) + 24px);max-height:calc(100vh - var(--hdr) - 48px);overflow:auto;padding:28px clamp(24px,3vw,48px) 24px}
.rail-x{display:none}
.rail-k{font:400 15px/1.4 "Barlow",sans-serif;color:var(--mute);min-height:1.4em;transition:opacity .3s}
.rail-k.sw{opacity:0}
.rail-h{font:300 clamp(34px,2.9vw,46px)/1.05 "Barlow",sans-serif;color:var(--ink);letter-spacing:-.015em;margin:6px 0 22px}
.rail-tel{margin-top:16px;font-size:15px;color:var(--mute)}
.rail-tel a{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink)}

/* form */
.qf{display:grid;gap:12px}
.qf .fs{border:0;margin:0;padding:0;min-width:0}
.qf .lab{display:block;padding:0;font:500 14px/1.3 "Barlow",sans-serif;color:var(--ink);margin-bottom:6px}
.chs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chip{height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:400 15px/1 "Barlow",sans-serif;cursor:pointer;transition:background .2s,color .2s;border-radius:0}
.chip:hover{background:#ececec}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.qf input:not([type=hidden]){width:100%;height:46px;border:1px solid #767676;border-radius:0;background:#fff;color:var(--ink);font:400 16px/1 "Barlow",sans-serif;padding:0 12px}
.qf input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.qf [aria-invalid=true]{border-color:var(--bad)!important}
.qf .fe{font:500 13px/1.3 "Barlow",sans-serif;color:var(--bad);min-height:0;margin-top:4px}
.qf .fe:empty{margin:0}
.qf .sub{height:54px;border:0;border-radius:0;background:var(--ink);color:#fff;font:500 16px/1 "Barlow",sans-serif;letter-spacing:.02em;cursor:pointer;margin-top:6px;transition:background .2s,transform .15s}
.qf .sub:hover{background:#2b2b2b}
.qf .sub:active{transform:translateY(1px)}
.qf .ok{display:none;border-top:1px solid var(--ink);padding-top:16px}
.qf .ok-h{font:300 26px/1.2 "Barlow",sans-serif;color:var(--ink);margin-bottom:8px}
.qf .ok p:not(.ok-h){font-size:15px}
.qf.sent>*:not(.ok){display:none}
.qf.sent .ok{display:block}

/* photos */
.ph{position:relative;overflow:hidden;background:#e4e4e4}
.ph picture,.ph img{display:block;width:100%;height:100%}
.ph img{object-fit:cover}
.illus-n{position:absolute;left:10px;top:10px;background:rgba(11,11,11,.78);color:#fff;font:500 11px/1 "Barlow",sans-serif;letter-spacing:.06em;padding:5px 7px}
@media (hover:hover) and (min-width:961px){
  .ph img{filter:grayscale(1);transition:filter .8s var(--ease),transform 1.4s var(--ease)}
  .ph:hover img{filter:grayscale(0);transform:scale(1.015)}
}

/* hero */
.dh{display:block;min-height:0;overflow:visible}
.hero-ph{height:max(380px,calc(100svh - var(--hdr) - 228px))}
.hero-tx{padding:26px var(--pad) 0}
.dh h1{font:300 clamp(40px,4.3vw,66px)/1.02 "Barlow",sans-serif;color:var(--ink);letter-spacing:-.025em}
.hero-sub{margin-top:14px;max-width:52ch;font-size:18px;color:var(--body)}
.inline-q{display:none}

/* service sections: one grid, four arrangements */
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding:clamp(72px,7vw,110px) var(--pad) 0;align-items:start}
.gl{display:contents}
.svc .bleed,.l-a .big,.l-c .big,.l-b .big{margin-inline:calc(var(--pad) * -1)}
.svc-tx{padding-top:8px}
.svc-h{font:300 clamp(34px,3.3vw,50px)/1.04 "Barlow",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.svc-h a{text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.svc-h a:hover{background-size:100% 1px}
.svc-l{margin-top:12px;font-size:18px;max-width:40ch}
.types{display:flex;flex-wrap:wrap;margin-top:14px;font-size:15px;color:var(--mute)}
.types li+li:before{content:"/";padding:0 .55em;color:#9a9a9a}

/* Gallery arrangements. Rule: images that share a row share a height; text owns its own cell. */
/* A railings: bleed photo, then text beside two equal portraits */
.l-a .big{grid-column:1/-1;grid-row:1;aspect-ratio:16/9}
.l-a .svc-tx{grid-column:1/5;grid-row:2;padding-top:20px}
.l-a .s1{grid-column:5/9;grid-row:2;aspect-ratio:4/5}
.l-a .s2{grid-column:9/13;grid-row:2;aspect-ratio:4/5}
/* B showers: two portraits and text first, wide bleed after */
.l-b .s1{grid-column:1/5;grid-row:1;aspect-ratio:4/5}
.l-b .s2{grid-column:5/9;grid-row:1;aspect-ratio:4/5}
.l-b .svc-tx{grid-column:9/13;grid-row:1;align-self:end}
.l-b .big{grid-column:1/-1;grid-row:2;aspect-ratio:16/9}
/* C partitions: panorama, then a landscape and a portrait of equal height, text below */
.l-c .big{grid-column:1/-1;grid-row:1;aspect-ratio:1241/405}
.l-c .s1{grid-column:1/9;grid-row:2;aspect-ratio:8/5}
.l-c .s2{grid-column:9/13;grid-row:2;aspect-ratio:4/5}
.l-c .svc-tx{grid-column:1/9;grid-row:3;padding-top:8px}
/* D mirrors: three equal-height frames, centre one wider, text below */
.l-d .s1{grid-column:1/4;grid-row:1;aspect-ratio:3/4}
.l-d .big{grid-column:4/10;grid-row:1;aspect-ratio:3/2}
.l-d .s2{grid-column:10/13;grid-row:1;aspect-ratio:3/4}
.l-d .svc-tx{grid-column:1/7;grid-row:2;padding-top:8px}
.l-d .svc-h{font-size:clamp(30px,2.6vw,42px)}

/* why */
.dw{padding:clamp(90px,9vw,140px) var(--pad) 0}
.why-l li{border-top:1px solid var(--ink);padding:26px 0 52px}
.why-s{font:300 clamp(36px,4.4vw,68px)/1.04 "Barlow",sans-serif;letter-spacing:-.025em;color:var(--ink)}
.why-d{margin-top:12px;font-size:18px;max-width:50ch;color:var(--body)}

/* reviews */
.rev{padding:clamp(100px,10vw,150px) var(--pad) 0}
.rev-h{font:400 18px/1.3 "Barlow",sans-serif;color:var(--ink);padding-bottom:20px}
.rev-l li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px;border-top:1px solid var(--line);padding:30px 0 38px}
.rev-l blockquote{grid-column:2;grid-row:1;margin:0}
.rev-l blockquote p{font:300 clamp(23px,2.1vw,31px)/1.32 "Barlow",sans-serif;color:var(--ink);letter-spacing:-.01em}
.rev-l .who{grid-column:1;grid-row:1;font-weight:500;font-size:15px;color:var(--mute);padding-top:8px}

/* area */
.area{padding:clamp(100px,10vw,150px) var(--pad) clamp(110px,11vw,170px)}
.area-h{font:400 18px/1.3 "Barlow",sans-serif;color:var(--ink);margin-bottom:22px}
.cities{display:flex;flex-wrap:wrap;font:300 clamp(30px,3.5vw,54px)/1.2 "Barlow",sans-serif;color:var(--ink);letter-spacing:-.02em}
.cities li:not(:last-child):after{content:",";margin-right:.35em}
.area-a{margin-top:26px;font-size:16px;color:var(--mute)}

/* reveal */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* pill and sheet: hidden on desktop */
.pill{display:none!important}
.sheet-bg{position:fixed;inset:0;z-index:135;background:rgba(0,0,0,.5);opacity:0;transition:opacity .4s var(--ease)}
.sheet-bg.on{opacity:1}

@media (max-width:1100px) and (min-width:961px){.nh-nav{gap:20px}.nh-in{gap:24px}}

@media (max-width:960px){
  :root{--pad:20px}
  .nh-nav{display:none}
  .nh-tel{margin-left:auto;border:0;padding:0}
  .dg-grid{display:block}
  body.dg{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero-ph{height:auto;aspect-ratio:4/5}
  .hero-ph img{object-position:60% 50%}
  .hero-tx{padding-top:20px}
  .dh h1{font-size:clamp(32px,8.6vw,44px)}.dh h1 br{display:none}
  .hero-sub{font-size:17px}
  .inline-q{display:block;margin:28px var(--pad) 0;padding:24px 20px;background:#fff;border:1px solid var(--line)}
  .iq-h{font:300 32px/1.05 "Barlow",sans-serif;color:var(--ink);margin-bottom:18px;letter-spacing:-.015em}
  .svc{grid-template-columns:1fr 1fr;gap:10px;padding-top:88px}
  .svc>.gl>*,.svc .svc-tx{grid-column:auto!important;grid-row:auto!important;margin-top:0!important;outline:0!important;align-self:start!important}
  .svc .big{grid-column:1/-1!important;order:1}
  .svc .s1{order:2}.svc .s2{order:3}
  .svc .svc-tx{grid-column:1/-1!important;order:4;padding-top:14px}
  .l-b .big{margin-inline:calc(var(--pad) * -1)}
  .l-d .big{margin-inline:0;aspect-ratio:4/5}
  .l-d .svc-h,.svc-h{font-size:34px}
  .svc .s1,.svc .s2{aspect-ratio:4/5!important}
  .rev-l li{grid-template-columns:1fr;gap:10px}
  .rev-l blockquote,.rev-l .who{grid-column:1;grid-row:auto}
  .why-l li{padding-bottom:40px}

  .pill{display:flex!important}
  .pill .pq{border:0;border-radius:0;cursor:pointer;height:40px}
  .pill{transition:transform .5s var(--ease)}
  .pill.away{transform:translate(-50%,100px)}

  .rail{position:fixed;left:0;right:0;bottom:0;z-index:140;border:0;background:var(--bg);max-height:90svh;overflow:auto;transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 40px rgba(0,0,0,.18)}
  .rail.open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
  .rail-in{position:static;max-height:none;overflow:visible;padding:22px 20px 24px}
  .rail-x{display:grid;place-items:center;position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer}
  .rail-x svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none}
  .rail-h{font-size:32px;margin-bottom:16px}
  html.sheet-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .rail,.rail.open,.sheet-bg,.pill,.ph img,.nh-nav a,.svc-h a,.rail-k{transition:none!important}
  .ph:hover img{transform:none}
}

.trustline{margin-top:10px;font-size:12.5px;line-height:1.4;opacity:.78;letter-spacing:.01em}