/* Parea Maintenance design system.
   Layout: charcoal frame (header, problem finder, CTA, footer) around warm concrete content; terracotta reserved for actions and the roof mark. */
:root{
  /* colour */
  --bg:#E6DDD4; --bg-alt:#DCD1C5; --surface:#F4EFEA; --ink:#2B2B2B; --ink-2:#57514B; --line:#CBBFB2; --line-strong:#2B2B2B;
  --accent:#FF5B35; --accent-ink:#2B2B2B; --dark:#2B2B2B; --dark-2:#363534; --on-dark:#E6DDD4; --on-dark-2:#B9AEA2;
  --success:#1F6B45; --error:#A3260B;
  /* type */
  --font:'Parabolica','Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; /* brand body: Parabolica Light */
  --display:'Arpona','Newsreader',Georgia,'Times New Roman',serif; /* brand headline: Arpona ExtraLight; subheading: Arpona Thin */
  --t-hero:clamp(2.5rem,5.2vw,4.2rem); --t-h1:clamp(2.2rem,4.2vw,3.4rem); --t-h2:clamp(1.5rem,2.4vw,2rem); --t-h3:1.4rem; --t-body:1.0625rem; --t-small:.9rem; --t-label:.78rem;
  /* spacing (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:6.5rem;
  --radius:3px; --wrap:1180px; color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 var(--t-body)/1.6 var(--font)}
small,.note,.hint,.muted,.crumbs,.legal{font-weight:400}
h1,h2,h3,.step>legend{margin:0;font-family:var(--display);font-weight:300;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h1{font-weight:200}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2);margin-bottom:var(--s5)} h3,.h3{font-size:var(--t-h3);font-weight:400;letter-spacing:-.005em;line-height:1.2;margin-bottom:var(--s3)}
p{margin:0 0 var(--s4);max-width:64ch} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .narrow{max-width:780px}
.muted{color:var(--ink-2)} .mt{margin-top:var(--s6)} .note{font-size:var(--t-small);color:var(--ink-2);margin-top:var(--s5)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:var(--s3) var(--s4);z-index:20;font-weight:600}.skip:focus{left:var(--s4);top:var(--s4)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.band-dark :focus-visible,header.site :focus-visible,footer.site :focus-visible,.cta-band :focus-visible{outline-color:var(--on-dark)}
.tbc{border:1px dashed currentColor;padding:0 .4em;font-size:.92em;opacity:.85;border-radius:2px}
.preview-note{background:#1b1b1b;color:var(--on-dark-2);font-size:.78rem;text-align:center;padding:6px 16px}
.eyebrow{display:flex;align-items:center;gap:var(--s3);font-size:1.05rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s6)}
.roof{width:36px;height:11px;fill:var(--accent);flex:none}
.lede{font-size:1.2rem;line-height:1.5;color:var(--ink-2);margin-top:var(--s5);max-width:56ch}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent);border-radius:var(--radius);font:600 1rem/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.small{min-height:42px;padding:0 var(--s4);font-size:.94rem}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.link,.more{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;font-weight:600}
/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--dark);color:var(--on-dark)}
.bar{display:flex;align-items:center;gap:var(--s5);min-height:72px}
.brand img{display:block;height:44px;width:auto}
nav.main{margin-left:auto}nav.main ul{display:flex;gap:var(--s5)}
nav.main a{display:block;padding:var(--s2) 0;font-size:.95rem;text-decoration:none;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--accent)}
header.site .btn:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;width:48px;height:48px;display:grid;place-items:center;cursor:pointer;border:1px solid var(--dark-2);border-radius:var(--radius)}.menu summary::-webkit-details-marker{display:none}
.menu summary span,.menu summary span::before,.menu summary span::after{content:"";display:block;width:20px;height:2px;background:var(--on-dark);position:relative}
.menu summary span::before{position:absolute;top:-6px}.menu summary span::after{position:absolute;top:6px}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--dark);padding:var(--s4) 20px var(--s6);border-top:1px solid var(--dark-2);display:grid;gap:var(--s5)}
.menu nav a:not(.btn){display:block;padding:var(--s3) 0;text-decoration:none;font-size:1.1rem;border-bottom:1px solid var(--dark-2)}
/* hero and page heads */
.hero{padding-block:var(--s8)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s7);align-items:center}
.hero h1{font-size:var(--t-hero);max-width:16ch}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--t-small);font-weight:500}
.hero-trust li{display:flex;align-items:center;gap:var(--s2)}.hero-trust li::before{content:"";width:7px;height:7px;background:var(--accent)}
.phead{padding-block:var(--s6) var(--s7);border-bottom:1px solid var(--line)}.phead h1{max-width:22ch}
.crumbs{font-size:var(--t-small);color:var(--ink-2);margin-bottom:var(--s6)}.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2)}
.crumbs li+li::before{content:"/";margin-right:var(--s2);color:var(--line)}.crumbs a{text-underline-offset:3px}
/* sections */
.sec{padding-block:var(--s8)}.sec.alt{background:var(--bg-alt)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:var(--s5) var(--s7);flex-wrap:wrap;margin-bottom:var(--s6)}.sec-h h2{margin-bottom:0}.sec-h>p{color:var(--ink-2);max-width:44ch;margin:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:start}.two>*{min-width:0}
.stack{display:grid;gap:var(--s5)}.sticky{position:sticky;top:104px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5)}
.band-dark{background:var(--dark);color:var(--on-dark);padding-block:var(--s7)}
.band-dark .eyebrow,.cta-band .eyebrow{color:var(--on-dark-2)}
/* problem finder */
.chips{display:flex;flex-wrap:wrap;gap:var(--s3)}
.chips a{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s4);border:1px solid #5a5651;border-radius:var(--radius);text-decoration:none;font-weight:500}
.chips a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* image placeholders */
.img{margin:0;max-width:100%;position:relative;display:flex;align-items:flex-end;background:linear-gradient(160deg,#cfc3b6,#bfb2a4);border-radius:var(--radius);overflow:hidden}
.img::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(43,43,43,.045) 22px 23px)}
.img.after{background:linear-gradient(160deg,#d9cfc4,#cbbfb2)}
.r4x3{aspect-ratio:4/3}.r5x4{aspect-ratio:5/4}.r4x5{aspect-ratio:4/5}
.img figcaption{position:relative;margin:var(--s3);padding:var(--s2) var(--s3);background:rgba(244,239,234,.92);font-size:.76rem;line-height:1.35;color:var(--ink);max-width:34ch;border-radius:2px}
.img figcaption b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:3px}
/* service cards */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.svc{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s5) var(--s6);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:var(--radius);text-decoration:none}
.svc.wide{margin-top:var(--s4)}
.svc-plain{font-size:var(--t-small);color:var(--ink-2)}.svc h3{margin:0;font-size:1.55rem;font-weight:300}.svc p{margin:0;color:var(--ink-2);font-size:.98rem;max-width:40ch}
.svc .arrow{position:absolute;right:var(--s5);bottom:var(--s4);font-size:1.25rem}
.svc:hover{border-top-color:var(--accent);background:#fff}.svc:hover .arrow{transform:translateX(4px)}
/* who */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s5)}
.who a{display:flex;flex-direction:column;text-decoration:none;border-top:1px solid var(--line-strong);padding-top:var(--s4)}
.who p{color:var(--ink-2);font-size:.98rem}.who span{margin-top:auto;font-size:var(--t-small);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
/* steps */
.steps{counter-reset:s;display:grid;gap:0;margin-top:var(--s5)}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:var(--s4);padding-block:var(--s4);border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font-size:.85rem;font-weight:600;letter-spacing:.08em;color:var(--ink-2);padding-top:.2rem}
.steps h3{margin:0}.steps p{margin:var(--s1) 0 0;color:var(--ink-2);font-size:.98rem}
.sec>.wrap>.steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5)}
.sec>.wrap>.steps li{display:block;border-top:1px solid var(--line-strong)}.sec>.wrap>.steps li::before{display:block;margin-bottom:var(--s3)}
/* why */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s6) var(--s7)}
.why>div{border-top:1px solid var(--line-strong);padding-top:var(--s4)}.why p{color:var(--ink-2);font-size:.98rem;margin:0}
/* lists */
.ticks li,.problems li{position:relative;padding:var(--s3) 0 var(--s3) 2rem;border-bottom:1px solid var(--line)}.ticks,.problems{border-top:1px solid var(--line-strong)}
.ticks li::before{content:"";position:absolute;left:.2rem;top:1.15rem;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.problems li{font-family:var(--display);font-size:1.45rem;line-height:1.25;padding-left:0;padding-block:var(--s4)}
.links li{border-bottom:1px solid var(--line)}.links{border-top:1px solid var(--line-strong)}
.links a{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;text-decoration:none}.links a::after{content:"\2192"}.links a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.pills{display:flex;flex-wrap:wrap;gap:var(--s2)}.pills li{border:1px solid var(--ink);border-radius:var(--radius);padding:var(--s1) var(--s3);font-size:.94rem}
.towns{border-top:1px solid var(--line-strong)}.towns li{border-bottom:1px solid var(--line)}
.towns a{display:flex;flex-direction:column;padding:var(--s4) 0;text-decoration:none}.towns b{font-family:var(--display);font-weight:300;font-size:1.4rem}.towns span{font-size:var(--t-small);color:var(--ink-2)}
.towns a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
/* reviews and cases */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s5)}
.review{margin:0;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:var(--s4)}
.review blockquote{margin:0;font-family:var(--display);font-size:1.35rem;font-weight:300;line-height:1.3}.review figcaption{display:flex;flex-direction:column;font-size:var(--t-small);margin-top:auto}.review figcaption span{color:var(--ink-2)}
.placeholder{border-style:dashed!important;border-color:var(--ink-2)!important}.review.placeholder blockquote{color:var(--ink-2)}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6)}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.case-body{padding:var(--s5)}
.tag{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.case dl{margin:0;font-size:.95rem}.case dt{font-weight:600;margin-top:var(--s3)}.case dd{margin:0;color:var(--ink-2)}
/* faqs */
.faqs details{border-bottom:1px solid var(--line)}.faqs details:first-child{border-top:1px solid var(--line-strong)}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;font-weight:600}.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1;color:var(--ink-2)}.faqs details[open] summary::after{content:"\2212"}
.faq-a p{color:var(--ink-2)}
.prose h2{margin-top:var(--s7)}.prose h2:first-child{margin-top:0}
/* CTA band */
.cta-band{background:var(--dark);color:var(--on-dark)}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:var(--s6);flex-wrap:wrap;padding-block:var(--s8)}
.cta-band h2{margin-bottom:var(--s3)}.cta-band p{color:var(--on-dark-2);margin:0}.cta-band .eyebrow{margin-bottom:var(--s6)}
.cta-actions{display:grid;gap:var(--s3);justify-items:start}.cta-actions .btns{margin-top:0}.cta-band .btn.ghost:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}.cta-alt{font-size:var(--t-small)}
.cta-band .btn:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
/* footer */
footer.site{background:var(--dark);color:var(--on-dark);border-top:1px solid var(--dark-2);padding-block:var(--s8) var(--s7);font-size:.94rem}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6)}
.fabout img{height:48px;width:auto;margin-bottom:var(--s4)}.fabout p{color:var(--on-dark-2);max-width:32ch}
footer.site h2{font-family:var(--font);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s4)}
footer.site li a{display:block;padding:var(--s1) 0;text-decoration:none;color:var(--on-dark-2)}footer.site li a:hover{color:var(--on-dark);text-decoration:underline}
.legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--dark-2);color:var(--on-dark-2);font-size:.8rem}.legal p{max-width:none;margin:0}
.dock{display:none}
/* forms */
form{min-width:0}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s6);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.progress li{border-top:3px solid var(--line);padding-top:var(--s2)}.progress li.on{border-color:var(--accent);color:var(--ink)}.progress li.done{border-color:var(--ink);color:var(--ink)}
.step{border:0;padding:0;margin:0;min-width:0}.step>legend{font-size:var(--t-h2);padding:0;margin-bottom:var(--s5)}
.step-n{display:block;font-family:var(--font);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.field{margin-bottom:var(--s4)}label,.slot legend{display:block;font-weight:600;font-size:.94rem;margin-bottom:var(--s1)}label small,legend small{font-weight:400;color:var(--ink-2)}
.hint{font-size:var(--t-small);color:var(--ink-2);margin:0 0 var(--s2)}
input,select,textarea{width:100%;min-height:48px;font:inherit;padding:.65rem .8rem;border:1px solid var(--ink-2);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
input[type=file]{padding:.55rem}textarea{min-height:120px;resize:vertical}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--ink);margin:.15rem 0 0}
.invalid{border:2px solid var(--error)!important}.err{color:var(--error);font-size:var(--t-small);font-weight:600;margin:var(--s1) 0 0}
.form-err{color:var(--error);font-weight:600;border-left:3px solid var(--error);padding-left:var(--s3)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 var(--s4)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s2);margin-bottom:var(--s5)}
.opt{display:flex;gap:var(--s3);align-items:flex-start;margin:0;padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:400}
.opt b{display:block;font-weight:600}.opt small{color:var(--ink-2)}.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opts.invalid{border:0!important;outline:2px solid var(--error);outline-offset:4px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.slot{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4) 0;margin:0;min-width:0;background:var(--bg-alt)}.slot legend{padding-inline:var(--s2)}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;margin-block:var(--s4)}
.form-nav{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.done{align-self:start;padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--success);border-radius:var(--radius)}.done .roof{width:40px;height:12px;margin-bottom:var(--s4)}
.aside{border-left:1px solid var(--line);padding-left:var(--s7)}
.contact dt{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:var(--s5)}.contact dd{margin:var(--s1) 0 0;font-size:1.2rem}
/* responsive */
@media (max-width:1040px){nav.main,.bar-actions{display:none}.menu{display:block}}
@media (max-width:860px){
  :root{--s8:3.25rem;--s7:2.25rem}
  .hero-in,.two{grid-template-columns:1fr}.sticky{position:static}.fgrid{grid-template-columns:1fr 1fr}
  .aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s6)}
  /* mobile hero: photo becomes the background, text over it, fading into the dark problem finder */
  .hero{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);padding-block:0 var(--s6)}
  .hero-in{display:block;position:static}
  .hero-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:0;align-items:flex-start;justify-content:flex-end}
  .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,43,43,.25) 0%,rgba(43,43,43,.55) 40%,rgba(43,43,43,.88) 72%,var(--dark) 100%)}
  .hero-img figcaption{z-index:1;max-width:24ch;font-size:.7rem}
  .hero-copy{position:relative;z-index:1;padding-top:13rem}
  .hero .eyebrow,.hero .lede{color:var(--on-dark-2)}
  .hero .btn.ghost{color:var(--on-dark);border-color:var(--on-dark)}
  .hero .btn:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
  .hero+.band-dark{padding-top:var(--s5)}
  body{padding-bottom:76px}
  .dock{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:9;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--dark);color:var(--on-dark)}
  .dock .btn:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}.progress{font-size:.62rem}.btns .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:no-preference){.btn,.svc,.chips a,nav.main a,.svc .arrow{transition:background-color .16s,color .16s,border-color .16s,transform .16s}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---------- before/after pair ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.shot{background:linear-gradient(160deg,#a99d91,#8e8378)}
.shot.after{background:linear-gradient(160deg,#d9cfc4,#c4b8ab)}
.shot-tag{position:absolute;top:var(--s4);left:var(--s4);z-index:1;padding:var(--s1) var(--s3);background:var(--dark);color:var(--on-dark);font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:2px}
.shot-tag.accent{background:var(--accent);color:var(--accent-ink)}
.shot figcaption{max-width:min(30ch,80%)}
.single .shot{aspect-ratio:16/7}
/* ---------- work band + slideshow ---------- */
.work-band{background:var(--dark);color:var(--on-dark);padding-block:var(--s8)}
.work-band .eyebrow{color:var(--on-dark-2)}.work-band .more{color:var(--on-dark)}
.work-band :focus-visible{outline-color:var(--on-dark)}
.slide-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s5) var(--s7);margin-top:var(--s6)}
.slide[hidden]{display:none!important}
.slide-info .tag{color:var(--on-dark-2)}
.slide-info h3{font-size:var(--t-h2);font-weight:300;margin-bottom:var(--s4)}
.slide-info p:not(.tag){color:var(--on-dark-2)}
.slide-info dl,.project-body dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.slide-info dl>div{border-top:1px solid var(--dark-2);padding-top:var(--s3)}
.slide-info dt,.project-body dt{font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.slide-info dt{color:var(--on-dark-2)}.slide-info dd,.project-body dd{margin:var(--s1) 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.slides-stage{position:relative;touch-action:pan-y}
.arrow-btn{width:52px;height:52px;display:grid;place-items:center;background:var(--dark);border:1px solid #5a5651;border-radius:var(--radius);color:var(--on-dark);cursor:pointer}
.arrow-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.arrow-btn.over{position:absolute;z-index:2;top:var(--arrow-top,38%);transform:translateY(-50%)}
.arrow-btn.prev{left:var(--s4)}.arrow-btn.next{right:var(--s4)}
.slides.simple .slide-info.simple{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3) var(--s7);margin-top:var(--s5);align-items:end}
.slides.simple .slide-info.simple h3{margin:0}.slides.simple .slide-info.simple>p{margin:0}
@media (prefers-reduced-motion:no-preference){.slide:not([hidden]){animation:slide-in .35s ease}@keyframes slide-in{from{opacity:0}to{opacity:1}}}
/* ---------- project grid (Our work page) ---------- */
.projects{display:grid;gap:var(--s8)}
.project-body{padding-top:var(--s5);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s5) var(--s7)}.project-body .tag{margin-bottom:var(--s2)}.project-body h3{font-size:1.6rem;font-weight:300}
.project-body dl>div{border-top:1px solid var(--line);padding-top:var(--s3)}.project-body dt{color:var(--ink-2)}.project-body dd{color:var(--ink-2)}
@media (max-width:860px){
  .slide-info{grid-template-columns:1fr}
  .slides.simple .slide-info.simple{grid-template-columns:1fr}
  .arrow-btn{width:44px;height:44px}.arrow-btn.prev{left:var(--s2)}.arrow-btn.next{right:var(--s2)}
  .pair{grid-template-columns:1fr}
  .single .shot{aspect-ratio:4/3}
  .slide-info dl,.project-body dl{grid-template-columns:1fr;gap:var(--s3)}
  .project-body{grid-template-columns:1fr}
}

/* Google rating */
.g-wrap{display:flex;align-items:center;gap:var(--s3) var(--s6);flex-wrap:wrap}
.g-rating{display:inline-flex;align-items:center;gap:var(--s3);flex-wrap:wrap;font-size:.95rem}
.g-rating .stars{display:inline-flex;gap:2px;color:var(--accent)}.g-rating .stars svg{fill:currentColor}
.g-rating b{font-weight:600}
.g-wrap .more{white-space:nowrap}

.check.optout{padding:var(--s4);background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius)}.check.optout b{font-weight:600}
.prose .ticks{margin-bottom:var(--s5)}

.when{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4) var(--s4) var(--s2);background:var(--bg-alt)}
.when-range{font-weight:600;margin:0 0 var(--s3);min-height:1.4em}

.img.photo{background:none;display:block}.img.photo img{width:100%;height:100%;object-fit:cover;display:block}
.small-print{margin-top:var(--s6);font-size:.75rem;line-height:1.5;color:var(--ink-2);max-width:46ch}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}