/* Kenton Woodwork concept — shared stylesheet.
   Brand: black + gold crest, Poppins. Everything else is the magazine. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2')}
:root{
  --ink:#111111;--paper:#ffffff;--cream:#f5f2ec;--cream-2:#ebe6dc;
  --gold:#c9a227;--gold-deep:#9a7a1c;--gold-soft:rgba(201,162,39,.16);
  --mute:rgba(255,255,255,.74);--mute-ink:#5c5a55;
  --top:64px;
  --gutter:clamp(16px,5vw,72px);
  --display:clamp(50px,13vw,144px);
  --display-2:clamp(40px,9.5vw,112px);
  --display-3:clamp(32px,6vw,72px);
  --lead:clamp(17px,2.2vw,24px);
  --body:clamp(16px,1.35vw,19px);
  --measure:34em;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:300;color:var(--ink);background:var(--paper);line-height:1.45;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:300;letter-spacing:-.025em;line-height:1.0;text-wrap:balance}
strong,b{font-weight:600}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.in{max-width:1400px;margin:0 auto}
.narrow{max-width:900px;margin:0 auto}

/* ── magazine type accents ── */
.kicker{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.kicker::before{content:"";width:34px;height:1.5px;background:var(--gold);flex:0 0 auto}
@media(max-width:480px){.kicker{font-size:11px;letter-spacing:.16em;gap:10px}.kicker::before{width:22px}}
.folio{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold);display:flex;gap:14px;align-items:baseline}
.folio .n{font-size:40px;letter-spacing:-.02em;font-weight:300;line-height:1;color:currentColor}
.caps{font-size:.8em;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.lede{font-size:var(--lead);max-width:var(--measure);line-height:1.5}
.lede.drop::first-letter{float:left;font-size:4.2em;line-height:.82;padding:.08em .12em 0 0;font-weight:300;color:var(--gold)}
.body{font-size:var(--body);max-width:var(--measure);line-height:1.65}
.body p+p{margin-top:1em}
.body b,.lede b{font-weight:600}
.body .caps,.lede .caps{color:var(--gold-deep)}
.pull{position:relative;padding-left:26px;font-size:clamp(22px,3vw,36px);line-height:1.2;letter-spacing:-.02em;max-width:22em;font-weight:300}
.pull::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;background:var(--gold)}
.pull small{display:block;margin-top:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.rule{height:1px;background:rgba(0,0,0,.12);margin:clamp(40px,7vh,80px) 0}
.on-ink .rule{background:rgba(255,255,255,.14)}
.mark{background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}
.on-ink .mark{background:linear-gradient(transparent 62%,rgba(201,162,39,.32) 62%)}

/* ── top bar ── */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 var(--gutter);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
.top>a{align-self:flex-start;flex:0 0 auto;background:#fff;padding:6px 10px 8px;margin-left:-10px;border-radius:0 0 16px 16px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.top .logo{height:74px;width:auto}
@media(min-width:760px){.top .logo{height:96px}.top>a{padding:8px 14px 12px;margin-left:-14px;border-radius:0 0 20px 20px}}
.top nav{display:none;gap:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.top nav a{text-decoration:none;color:#444;padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);border-color:var(--gold)}
@media(min-width:1180px){.top nav{display:flex}}
.top .cta-top{font-weight:600;font-size:13px;text-decoration:none;color:var(--ink);padding:9px 14px;border:1.5px solid var(--ink);border-radius:999px;transition:background .2s,color .2s;white-space:nowrap}
.top .cta-top:hover{background:var(--ink);color:#fff}
@media(min-width:760px){.top .cta-top{font-size:15px;padding:10px 18px}}

/* ── the logo ──
   One fixed logo, centred in the space below the top bar, on top of the page. On the home page it starts at
   full strength over an empty first screen (.splash); the hero glides up under it after a beat and the logo
   fades to a faint watermark as it does (kw.js sets the opacity from the scroll position). Everywhere else,
   and from then on, it is just the watermark. */
.wm{position:fixed;inset:var(--top) 0 0 0;z-index:30;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vh,40px) 16px;pointer-events:none;opacity:.06}
.wm img{display:block;width:auto;height:auto;max-width:min(78vw,660px);max-height:100%;object-fit:contain}
.splash{display:none;height:100vh;height:100svh;background:#fff;cursor:pointer}
.splash-on .splash{display:block}
.splash-on.at-top .wm{opacity:1}
/* while the big logo has the screen, the small one in the bar would be a second logo: it waits */
.top>a{transition:opacity .45s ease}
.splash-on.at-top .top>a{opacity:0;pointer-events:none}

/* ── buttons ── */
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:14px;background:var(--gold);color:var(--ink);font-weight:600;font-size:17px;text-decoration:none;letter-spacing:-.01em;box-shadow:0 6px 24px rgba(201,162,39,.35);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn:hover{box-shadow:0 8px 30px rgba(201,162,39,.5)}
.btn.ghost{background:transparent;box-shadow:none;border:1.5px solid currentColor;color:inherit}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.on-ink .btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{height:44px;font-size:15px;padding:0 18px;border-radius:12px;flex:0 0 auto}

/* ── photo panels (two z-layers, parallax) ── */
.panel{position:relative;min-height:100vh;min-height:100svh;overflow:clip;display:flex;align-items:flex-end;background:#0c0c0c;color:#fff}
.panel.short{min-height:78vh;min-height:78svh}
.panel .bg{position:absolute;left:0;right:0;top:-15%;height:130%;will-change:transform;z-index:0}
.panel .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.panel .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.44) 38%,rgba(0,0,0,.08) 70%,rgba(0,0,0,0) 100%)}
.panel.tl{align-items:flex-start}
.panel.tl .scrim{background:linear-gradient(to bottom,rgba(0,0,0,.74) 0%,rgba(0,0,0,.38) 40%,rgba(0,0,0,.05) 72%,rgba(0,0,0,0) 100%)}
.panel .txt{position:relative;z-index:2;padding:calc(var(--top) + 8vh) var(--gutter) 12vh;width:100%;max-width:1400px;margin:0 auto;will-change:transform,opacity}
.panel .txt h1,.panel .txt h2{font-size:var(--display);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.panel .txt h2{font-size:var(--display-2)}
.panel .txt h1 em,.panel .txt h2 em{font-style:normal;color:var(--gold)}
.panel .txt p{margin-top:clamp(14px,2.5vh,28px);font-size:var(--lead);max-width:var(--measure);color:var(--mute);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.panel .txt p b{color:#fff}
.panel .txt .kicker,.panel .txt .folio{margin-bottom:18px;text-shadow:0 1px 10px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.9)}
.chapter .txt .folio{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.panel .txt .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.panel .cap{position:absolute;z-index:2;right:var(--gutter);bottom:14px;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.6);text-transform:uppercase;text-align:right;max-width:60%}
.hero .trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:400}
.hero .trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}
.hero .scroll{position:absolute;left:50%;bottom:calc(14px + 2vh);z-index:2;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(255,255,255,.6);border-radius:12px}
.hero .scroll::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
/* portrait originals: split on wide screens so 768px photos never stretch to 1440 */
@media(min-width:900px){
  .panel.pt{align-items:center}
  .panel.pt .bg{left:50%}
  .panel.pt .scrim{background:linear-gradient(to right,#0c0c0c 0%,#0c0c0c 46%,rgba(12,12,12,.55) 54%,rgba(12,12,12,0) 72%)}
  .panel.pt .txt{padding-top:var(--top);padding-bottom:0}
  .panel.pt .txt h2{max-width:6.5em}
  .panel.pt .txt h1{font-size:var(--display-2);max-width:6em}
  .panel.pt .txt p{max-width:24em}
}

/* ── type sections ── */
.sec{padding:clamp(72px,13vh,150px) var(--gutter)}
.on-ink{background:var(--ink);color:#fff}
.on-cream{background:var(--cream)}
.sec h2{font-size:var(--display-2)}
.sec h3{font-size:var(--display-3);margin-top:.2em}
.sec .kicker+h2,.sec .folio+h2{margin-top:22px}
.sec h2+.lede,.sec h2+.body{margin-top:26px}
.on-ink .lede,.on-ink .body{color:var(--mute)}
.on-ink .lede b,.on-ink .body b{color:#fff}
.two{display:grid;gap:clamp(28px,5vw,72px);margin-top:clamp(36px,6vh,72px)}
@media(min-width:900px){.two{grid-template-columns:1.1fr .9fr;align-items:start}}

/* editorial: text + photo side by side */
.spread{display:grid;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(48px,8vh,96px)}
@media(min-width:900px){.spread{grid-template-columns:1fr 1fr}.spread.flip>figure{order:-1}}
.spread figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.spread figure.pt img{aspect-ratio:3/4}
.spread figcaption,.grid figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink)}
.spread figcaption b,.grid figcaption b{color:var(--ink);letter-spacing:.14em}
.on-ink .spread figcaption,.on-ink .grid figcaption{color:rgba(255,255,255,.55)}
.on-ink .spread figcaption b,.on-ink .grid figcaption b{color:#fff}

/* the numbers */
.facts{display:grid;gap:clamp(28px,5vh,56px);margin-top:clamp(48px,8vh,96px)}
@media(min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.fact .n{font-size:clamp(56px,10vw,128px);line-height:1;letter-spacing:-.03em;color:var(--gold);font-weight:300}
.fact .l{margin-top:8px;font-size:clamp(17px,2vw,22px);color:#fff;font-weight:400}
.fact .s{margin-top:6px;font-size:15px;color:rgba(255,255,255,.6);max-width:30em;line-height:1.55}
.fact .s b{color:#fff}

/* why us: the same grid, words instead of numbers */
.why .fact{border-top:1.5px solid var(--gold);padding-top:18px}
.why .fact .l{margin-top:0;font-size:clamp(22px,2.6vw,30px);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.why .fact .s{margin-top:10px;font-size:17px;color:rgba(255,255,255,.7)}
.on-cream .fact .l{color:var(--ink)}
.on-cream .fact .s{color:var(--mute-ink)}
.on-cream .fact .s b{color:var(--ink)}
.on-cream .fact .n{color:var(--gold-deep)}
.panel .txt p a,.chapter .txt p a,.act header p a,.fact .s a,.body a,.lede a{text-decoration-color:var(--gold);text-underline-offset:3px}

/* chapters (home) */
.chapters{display:grid;gap:0}
.chapter{position:relative;min-height:88vh;min-height:88svh;overflow:clip;display:flex;align-items:flex-end;color:#fff;background:#0c0c0c}
.chapter .bg{position:absolute;left:0;right:0;top:-15%;height:130%;will-change:transform;z-index:0}
.chapter .bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.chapter:hover .bg img{transform:scale(1.03)}
.chapter .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 80%)}
.chapter .txt{position:relative;z-index:2;padding:12vh var(--gutter) 10vh;width:100%;max-width:1400px;margin:0 auto}
.chapter .txt h2{font-size:var(--display-2);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.chapter .txt p{margin-top:16px;font-size:var(--lead);color:var(--mute);max-width:30em}
.chapter .txt .folio{margin-bottom:16px}
.chapter .go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold);border-bottom:1.5px solid var(--gold);padding-bottom:4px;text-decoration:none}
.chapter .go::after{content:"";position:absolute;inset:0;z-index:1}
.chapter .txt p a{position:relative;z-index:2}
@media(min-width:900px){
  .chapters{grid-template-columns:1fr 1fr}
  .chapter{min-height:70vh}
  .chapter.wide{grid-column:1/-1;min-height:92vh}
}

/* ── narrative gallery ── */
.act{margin-top:clamp(56px,10vh,120px)}
.act:first-of-type{margin-top:clamp(40px,7vh,80px)}
.act header{display:grid;gap:14px;max-width:900px}
.act header h3{font-size:var(--display-3);margin:0}
.act header p{font-size:var(--lead);color:var(--mute-ink);max-width:var(--measure)}
.act header p b{color:var(--ink)}
.grid{margin-top:clamp(22px,4vh,40px);display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;gap:16px 10px;align-items:start}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:24px 16px}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid figure{position:relative;min-width:0}
.grid figure img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#e9e5dd;transition:transform .6s ease}
.grid figure.w{grid-column:span 2}
.grid figure.w img{aspect-ratio:2/1}
.grid figure.big{grid-column:span 2;grid-row:span 2}
.grid figure.big img{aspect-ratio:1/1}
.grid figure.pano{grid-column:1/-1}
.grid figure.pano img{aspect-ratio:2500/571}
.grid figure:hover img{transform:translateY(-2px)}
/* before / after pair: two squares side by side in the slot of one wide figure, a tag on each */
.grid .ba{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;align-items:start}
@media(min-width:760px){.grid .ba{gap:24px 16px}}
.ba .tag{position:absolute;top:10px;left:10px;z-index:1;pointer-events:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:5px 9px 4px;background:rgba(0,0,0,.62);color:#fff}
.ba figure+figure .tag{background:var(--gold);color:#111}
/* an act whose title opens its own page */
.act header h3 a{color:inherit;text-decoration:none}
.act header h3 a .arr{color:var(--gold);margin-left:.35em;display:inline-block;transition:transform .3s ease}
.act header h3 a:hover .arr,.act header h3 a:focus-visible .arr{transform:translateX(6px)}
.act header h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;text-decoration-thickness:1.5px}

/* ── nibbles (constant invitations) ── */
.nibble{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(40px,7vh,80px);padding:22px 0;border-top:1.5px solid var(--gold);border-bottom:1px solid rgba(0,0,0,.12)}
.on-ink .nibble{border-bottom-color:rgba(255,255,255,.14)}
.nibble p{font-size:clamp(18px,2.4vw,26px);letter-spacing:-.01em;max-width:24em}
.nibble p b{font-weight:600}
.nibble .btn{flex:0 0 auto}
.nibble.solo{justify-content:flex-start;border:0;padding:0;margin-top:clamp(32px,5vh,56px)}
.nibble.center{justify-content:center;text-align:center;flex-direction:column;border:0;padding:0}

/* ── share row ── */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:clamp(32px,5vh,56px)}
.share .lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-right:6px}
.share .chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(0,0,0,.16);font-size:14px;font-weight:400;background:transparent;text-decoration:none}
.share .chip svg{width:16px;height:16px}
.share .chip:hover{border-color:var(--ink)}
.on-ink .share .chip{border-color:rgba(255,255,255,.26);color:#fff}
.on-ink .share .chip:hover{border-color:#fff}
.share .chip.copied{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ── FAQ ── */
.faq details{border-bottom:1px solid rgba(0,0,0,.12)}
.faq details:first-of-type{margin-top:clamp(32px,5vh,64px);border-top:1px solid rgba(0,0,0,.12)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:clamp(19px,2.4vw,26px);font-weight:400;letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:30px;font-weight:300;color:var(--gold-deep);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 0 26px;font-size:17px;line-height:1.6;color:#333;max-width:44em}
.faq .a p+p{margin-top:10px}

/* ── final + footer ── */
.final h2{font-size:var(--display)}
.final .lede{margin-top:24px}
.final .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.final .row .btn{flex:0 0 auto;height:60px;padding:0 32px;font-size:18px}
.more{display:grid;gap:10px;margin-top:clamp(40px,7vh,80px)}
@media(min-width:760px){.more{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.more a{display:block;padding:22px 0;border-top:1px solid rgba(255,255,255,.18);text-decoration:none}
.more a .folio{margin-bottom:8px}
.more a span{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em}
.more a:hover span{color:var(--gold)}
footer{background:#fff;padding:56px var(--gutter) 40px;text-align:center;font-size:13px;color:#666;letter-spacing:.04em}
footer .logo{height:120px;width:auto;margin:0 auto 24px}
footer p+p{margin-top:8px}
footer .concept{margin-top:32px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);color:#999;font-size:12px}
footer a{color:#666}

/* ── sheet (tell us about your project) ── */
.sheet{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet[open]{display:flex}
.sheet .card{position:relative;width:100%;max-height:92vh;max-height:92svh;overflow:auto;background:#fff;color:var(--ink);border-radius:22px 22px 0 0;padding:26px var(--gutter) calc(28px + env(safe-area-inset-bottom));animation:up .28s ease}
@media(min-width:760px){.sheet{align-items:center;padding:24px}.sheet .card{max-width:640px;border-radius:22px;padding:36px 40px}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;color:#666}
.sheet .x:hover{background:#f0ede6;color:var(--ink)}
.sheet h3{font-size:clamp(28px,5vw,40px);margin-top:8px;padding-right:44px}
.sheet .sub{margin-top:10px;font-size:15px;color:#555;line-height:1.5}
.sheet .sub b{color:var(--ink)}
.field{display:block;margin-top:14px}
.field span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#666;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-weight:400;font-size:17px;padding:13px 14px;border:1.5px solid rgba(0,0,0,.16);border-radius:12px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:92px;resize:vertical}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;opacity:0}
.sheet .go{margin-top:22px;width:100%;height:56px}
.sheet .fine{margin-top:14px;font-size:12px;color:#888;line-height:1.5;text-align:center}
.sheet .fine a{color:#666}
.sheet .done{text-align:center;padding:24px 0 8px}
.sheet .done .big{font-size:clamp(26px,5vw,36px);letter-spacing:-.02em;line-height:1.1}
.sheet .done .big b{color:var(--gold-deep);font-weight:600}
.sheet .done p{margin-top:14px;color:#555;font-size:15px;line-height:1.5}
.sheet .done .share{justify-content:center}
.sheet .err{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fbeeea;color:#8a2a1a;font-size:14px;line-height:1.45;display:none}
.sheet .err[data-on]{display:block}
.sheet .err a{color:inherit}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:var(--ink);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.sheet .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sheet .meta button{font-size:13px;color:#666;text-decoration:underline;text-underline-offset:3px}

/* share popover (fallback when navigator.share is missing) */
.pop{position:fixed;z-index:70;inset:auto 0 0 0;display:none;justify-content:center;padding:12px}
.pop[open]{display:flex}
.pop .menu{background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:10px;width:min(100%,420px);display:grid;gap:4px}
.pop .menu a,.pop .menu button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;text-decoration:none;font-size:16px;font-weight:400;text-align:left;width:100%}
.pop .menu a:hover,.pop .menu button:hover{background:#f5f2ec}
.pop .menu svg{width:20px;height:20px;flex:0 0 auto}
.pop .menu .cancel{justify-content:center;color:#777;border-top:1px solid rgba(0,0,0,.08);border-radius:0;margin-top:4px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .scroll::after{animation:none}.panel .bg,.chapter .bg{top:0;height:100%}.sheet .card{animation:none}}

/* ── reviews (verbatim Google reviews, reviewer's own photos) ── */
.stars{color:var(--gold);letter-spacing:.12em;font-size:15px;white-space:nowrap}
.reviews .lede{margin-top:26px}
.testi-grid{display:grid;gap:clamp(36px,6vh,72px);margin-top:clamp(40px,7vh,80px)}
@media(min-width:1000px){.testi-grid{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}.testi-grid .with-photos:only-child,.testi-grid .with-photos:nth-child(odd):last-child{grid-column:1/-1}}
.testi{position:relative;padding-left:26px;border-left:3px solid var(--gold)}
.testi .stars{display:block;margin-bottom:14px}
.testi blockquote{font-size:clamp(19px,2.2vw,26px);line-height:1.4;letter-spacing:-.015em;font-weight:300;max-width:26em;text-wrap:pretty}
.testi blockquote p+p{margin-top:.8em}
.testi footer{background:none;padding:0;text-align:left;margin-top:20px;font-size:13px;letter-spacing:.06em;color:var(--mute-ink);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.testi footer b{font-size:15px;letter-spacing:0;color:var(--ink)}
.testi footer a{color:inherit;text-underline-offset:3px}
.on-ink .testi blockquote{color:#fff}
.on-ink .testi footer{color:rgba(255,255,255,.6)}
.on-ink .testi footer b{color:#fff}
.testi .strip{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;gap:14px 10px;align-items:start}
@media(min-width:760px){.testi .strip{grid-template-columns:repeat(4,1fr);gap:18px 14px}}
.testi .strip figure{min-width:0}
.testi .strip figure img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#e9e5dd}
.testi .strip figure.w{grid-column:span 2}
.testi .strip figure.w img{aspect-ratio:2/1}
.testi .strip figcaption{margin-top:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-ink)}
.on-ink .testi .strip figcaption{color:rgba(255,255,255,.55)}
.gsrc{margin-top:clamp(36px,6vh,64px);font-size:15px}
.gsrc a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border-bottom:1.5px solid var(--gold);padding-bottom:4px}
.gsrc a:hover{color:var(--gold-deep)}
.final .proof{margin-top:28px;font-size:15px;line-height:1.5;max-width:40em;color:rgba(255,255,255,.72)}
.final .proof a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;text-decoration:none;color:inherit}
.final .proof a:hover b{color:var(--gold)}
.final .proof b{color:#fff}
.final .proof span{color:rgba(255,255,255,.5)}

/* ── per-photo share + photo pages ── */
.ph{position:relative}
.ph a{display:block}
.pshare{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:opacity .2s,transform .15s}
.pshare svg{width:17px;height:17px}
.pshare:hover{transform:scale(1.06)}
.pshare:active{transform:scale(.95)}
@media(hover:hover){.grid .pshare,.spread .pshare,.strip .pshare{opacity:0}.grid figure:hover .pshare,.spread figure:hover .pshare,.strip figure:hover .pshare,.pshare:focus-visible{opacity:1}}
.photo{padding-top:calc(var(--top) + 24px)}
.photo figure img{width:100%;height:auto;max-height:82vh;max-height:82svh;object-fit:contain;background:var(--cream-2)}
.photo figure.pt img{max-height:88vh;max-height:88svh}
.ptxt{margin-top:26px;max-width:900px}
.ptxt .folio{text-decoration:none;margin-bottom:14px}
.ptxt h1{font-size:var(--display-3);margin-top:8px}
.ptxt .lede{margin-top:16px}
.ptxt .share{margin-top:26px}
.ptxt .share a.chip{color:inherit}
.pnav{display:flex;justify-content:space-between;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(0,0,0,.12);font-size:14px}
.pnav a{text-decoration:none;color:var(--mute-ink);max-width:48%}
.pnav a:hover{color:var(--ink)}
.pnav a[rel=next]{text-align:right;margin-left:auto}

/* ── owner edit mode (signed in by magic link; see kw.js) ── */
html.admin [data-edit]{outline:1px dashed rgba(201,162,39,.55);outline-offset:4px;cursor:text;min-height:1em;-webkit-user-select:text;user-select:text}
html.admin [data-edit]:hover{outline-color:var(--gold);background:rgba(201,162,39,.08)}
html.admin [data-edit]:focus{outline:2px solid var(--gold);background:rgba(201,162,39,.13)}
html.admin [data-edit]:empty{display:block;min-width:6em}
html.admin [data-edit]:empty::before{content:attr(data-ph);opacity:.4}
html.admin [data-edit] i{font-style:normal;color:var(--gold-deep)}
html.admin .panel .txt{opacity:1!important;transform:none!important}
html.admin .chapter .go::after{display:none}
html.admin .wm,html.admin .splash{display:none}
html.admin .top>a{opacity:1!important;pointer-events:auto!important}
/* the editor: one small bar under the top bar. B / I / link act on the selected words of the text you are in. */
.rte{position:fixed;left:50%;top:calc(var(--top) + 10px);transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:2px;width:max-content;max-width:calc(100vw - 16px);padding:5px;border-radius:14px;background:var(--ink);color:#fff;font-size:13px;line-height:1;box-shadow:0 10px 36px rgba(0,0,0,.35)}
@media(max-width:759px){.rte{top:calc(var(--top) + 34px)}.rte .st{max-width:24vw}.rte button{padding:0 8px}}
.rte button{min-width:36px;height:36px;padding:0 10px;white-space:nowrap;border-radius:10px;color:#fff;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.rte button:hover:not([disabled]){background:rgba(255,255,255,.14)}
.rte button[disabled]{opacity:.3;cursor:default}
.rte button.on{background:var(--gold);color:var(--ink)}
.rte .b{font-weight:600}
.rte .i{font-style:italic;font-family:Georgia,serif}
.rte .l svg{width:17px;height:17px}
.rte .t{font-size:12px;font-weight:600;letter-spacing:.04em}
.rte .sep{width:1px;height:20px;background:rgba(255,255,255,.2);margin:0 4px}
.rte .st{padding:0 8px;color:rgba(255,255,255,.72);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.rte .st.bad{color:#ff9d8a}

/* ── where we work (2026-10-07): the neighbourhood list, on the home page, the hub and each area page ── */
.areas{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(36px,6vh,72px)}
@media(min-width:900px){.areas{grid-template-columns:1.6fr 1fr}.areas.one{grid-template-columns:1fr}}
.areas .grp{align-content:start}
.areas .grp .kicker{margin-bottom:10px}
.areas ul{list-style:none;margin:0;padding:0}
.areas li{margin:0;padding:0}
.areas a{display:block;padding:16px 0;border-top:1px solid rgba(0,0,0,.12);text-decoration:none}
.areas li:last-child a{border-bottom:1px solid rgba(0,0,0,.12)}
.areas a b{display:block;font-size:clamp(20px,2.4vw,28px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.areas a span{display:block;margin-top:4px;font-size:14px;color:var(--mute-ink)}
.areas a:hover b{color:var(--gold-deep)}
@media(min-width:760px){.areas.one ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}.areas.one li:last-child a{border-bottom:0}}
/* footer: the register line, the verify line, the page links */
footer .creds a,footer .verify a,footer .links a{text-underline-offset:3px;text-decoration-color:var(--gold)}
footer .verify{margin-top:12px}
footer .sitemap{margin:32px auto 0;max-width:900px;display:grid;gap:22px 32px;text-align:left}
@media(min-width:700px){footer .sitemap{grid-template-columns:repeat(3,1fr)}}
footer .sitemap .kicker::before{display:none}
footer .sitemap .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
footer .sitemap ul{list-style:none;margin:0;padding:0}
footer .sitemap li{margin:0 0 5px;font-size:13px;letter-spacing:.02em;line-height:1.5}
footer .sitemap a{text-decoration-color:rgba(0,0,0,.18);text-underline-offset:3px}
footer .sitemap a:hover{color:var(--ink);text-decoration-color:var(--gold)}
footer .links{margin-top:18px;font-size:13px}
/* for professionals: the direct-email slot (empty until the owner types the address; then it is a link) */
.direct{margin-top:clamp(48px,8vh,96px);padding-top:clamp(28px,4vh,40px);border-top:1.5px solid var(--gold)}
.direct .kicker+.lede{margin-top:18px}
.direct .email{margin-top:12px;font-size:clamp(22px,3vw,36px);letter-spacing:-.02em;font-weight:300;word-break:break-all}
.direct .email:empty{display:none}
html.admin .direct .email:empty{display:block}
.direct .email a{text-decoration-color:var(--gold);text-underline-offset:5px}
.direct .nibble{margin-top:clamp(28px,4vh,40px)}