@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(cormorant-600.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(cormorant-500i.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(inter-var.woff2) format("woff2")}

/* themelint-waive: preview-bar */
:root{--bg:#0E0E0E;--bg2:#161616;--card:#1B1B1B;--card2:#242424;--ink:#F4F4F4;--ink2:#C4C4C4;--ink3:#A3A3A3;--line:#2E2E2E;--line2:#454545;--act:#F4F4F4;--act-ink:#0E0E0E;--field:#0A0A0A;--glow:rgba(244,244,244,.07);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --w:1180px;--pad:22px;--r-btn:999px;--r-card:16px;--r-img:16px;--r-field:0px;--al:left;
  --paper:#0E0E0E;--amber:#F4F4F4;--accent:#F4F4F4;color-scheme:dark}
.lt,.sec.alt{--bg:#FFFFFF;--bg2:#F6F6F6;--card:#F3F3F3;--card2:#EAEAEA;--ink:#111111;--ink2:#474747;--ink3:#5E5E5E;--line:#E0E0E0;--line2:#CCCCCC;--act:#111111;--act-ink:#FFFFFF;--field:#FFFFFF;--glow:rgba(17,17,17,.06);background:var(--bg);color:var(--ink);color-scheme:light}
.dk{--bg:#0E0E0E;--bg2:#161616;--card:#1B1B1B;--card2:#242424;--ink:#F4F4F4;--ink2:#C4C4C4;--ink3:#A3A3A3;--line:#2E2E2E;--line2:#454545;--act:#F4F4F4;--act-ink:#0E0E0E;--field:#0A0A0A;--glow:rgba(244,244,244,.07);background:var(--bg);color:var(--ink);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.06;color:var(--ink)}
h1{font-size:44px}
h2{font-size:36px;line-height:1.1}
h3{font-size:26px;line-height:1.15}
@media(min-width:880px){h1{font-size:72px}h2{font-size:52px}h3{font-size:28px}}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:780px}
.center{text-align:center}
.mut{color:var(--ink2)}
.sub{font-size:18px;line-height:1.55;color:var(--ink2)}
@media(min-width:880px){.sub{font-size:19px}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.eyebrow{max-width:100%;flex-wrap:wrap;justify-content:inherit}
.post-hero .eyebrow::before,.post-hero .eyebrow::after,.card .eyebrow::before,.card .eyebrow::after{display:none}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;background:var(--act);color:var(--act-ink);padding:10px 16px;border-radius:999px;z-index:999}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:var(--r-btn);font:600 16px/1.1 var(--sans);letter-spacing:.005em;
  background:var(--act);color:var(--act-ink);border:1px solid var(--act);cursor:pointer;text-align:center;transition:transform .18s ease,opacity .18s ease}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-lg{padding:18px 32px;font-size:16px}
.link{font-weight:600;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--line2);padding-bottom:2px}
.link:hover{border-color:var(--ink)}
.link svg,.btn svg,.inline-links svg,.cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* header */
#hdr{position:sticky;top:0;z-index:60;background:rgba(14,14,14,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:12px;font:600 19px/1 var(--serif);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.brand>svg{width:44px;height:44px;color:var(--ink);flex:none;margin-left:-2px}
@media (max-width:420px){.brand{font-size:16px;letter-spacing:.08em}.brand>svg{width:38px;height:38px}}
.brand i{font-style:normal;color:var(--ink3);font-weight:500}
nav.main{display:none;gap:24px;margin-left:auto;font-size:15px;font-weight:500;color:var(--ink2)}
nav.main a:hover{color:var(--ink)}
nav.main a,.hd-tel,.hd .btn{white-space:nowrap}
.hd-tel{display:none;font-weight:600;font-size:15px;padding:10px 16px;border:1px solid var(--line2);border-radius:999px}
.hd .btn{display:none;padding:11px 18px;font-size:14px}
.burger{margin-left:auto;width:44px;height:44px;border:1px solid var(--line2);border-radius:999px;background:transparent;display:grid;place-items:center;align-content:center;cursor:pointer;padding:0}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;transition:.2s}
.burger i+i{margin-top:5px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1040px){nav.main{display:flex}.hd-tel{display:block}.hd .btn{display:inline-flex}.burger{display:none}}
.drawer{display:none;position:fixed;inset:68px 0 0;background:var(--bg);z-index:59;padding:20px 0 40px;overflow:auto}
.drawer.open{display:block}
.drawer a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font:500 30px/1.1 var(--serif)}
.drawer a.small{font:500 16px/1.4 var(--sans);color:var(--ink2);border:0;padding:18px 0 0}

/* heroes */
.hero{padding:64px 0 40px;text-align:var(--al)}
.hero h1{max-width:15ch}
.hero .sub{max-width:44ch;margin-top:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero .proof{font-size:14px;color:var(--ink3);margin-top:22px}
.hero .tagline{font:italic 500 23px/1.3 var(--serif);color:var(--ink2);margin-top:14px}
.hero-mono{width:150px;height:112px;margin:0 0 18px;color:var(--ink)}
.hero-mono svg{width:100%;height:100%}
.hero-img{margin:48px auto 0;max-width:1240px;padding:0 var(--pad)}
.hero-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-img)}
.hero.inner{padding:64px 0 56px;text-align:var(--al)}
.hero.inner h1{font-size:42px;max-width:18ch}
@media(min-width:880px){.hero{padding:96px 0 60px}.hero.inner{padding:90px 0 72px}.hero.inner h1{font-size:64px}.hero .tagline{font-size:28px}}
.hero.inner .sub{margin-top:18px;max-width:52ch}
.hero.inner .cta{margin-top:26px}
.hero.post-hero>.wrap{display:block}

/* sections */
.sec{padding:80px 0;position:relative}
.sec.tight{padding:48px 0}
@media(min-width:880px){.sec{padding:112px 0}.sec.tight{padding:64px 0}}
.head{max-width:760px;margin-bottom:44px}
.head .sub{margin-top:16px}
.body{font-size:18px;line-height:1.7;color:var(--ink2);max-width:62ch}
.body+.tbl{margin-top:36px}

/* trust block */
.price-hero{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.price-hero{grid-template-columns:1fr 1.2fr;gap:64px}}
.big{font:300 120px/.9 var(--sans);letter-spacing:-.05em;color:var(--ink)}
.big small{font-size:.3em;margin-left:.1em}
.perft{font:500 30px/1.15 var(--serif);margin-top:10px;color:var(--ink)}
.facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);font-weight:500}
.facts li span:last-child{color:var(--ink2);text-align:right}
.page-home .est{display:none}
.est{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;background:var(--card)}
.est .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;padding:8px 0}
.est .lbl{color:var(--ink2)}
.est .val{font:500 26px/1 var(--serif)}
.est output{font:500 44px/1 var(--serif);display:block;margin-top:6px}
.est .note{color:var(--ink2);font-size:15px;margin-top:14px}
.est .ends{display:flex;justify-content:space-between;font-size:13px;color:var(--ink3)}
.est .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
input[type=range]{width:100%;accent-color:var(--ink)}

/* photo band */
.band{display:grid;gap:14px}
@media(min-width:760px){.band{grid-template-columns:1.35fr 1fr}}
.band figure{margin:0}
.band img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-img);aspect-ratio:4/3}
.band .tall img{aspect-ratio:3/4}
figcaption{font-size:14px;color:var(--ink3);margin-top:10px}

/* list table */
.tbl{border-top:1px solid var(--line)}
.tbl .r{display:grid;grid-template-columns:1fr auto;gap:12px 28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tbl .r b{font:500 25px/1.2 var(--serif);display:block}
.tbl .r p{color:var(--ink2);margin-top:4px;font-size:16px;max-width:54ch}
.tbl .r .p{font-weight:600;white-space:nowrap}
.tbl .r .p small{font-size:13px;color:var(--ink3);margin-left:4px}

/* three-up, steps */
.three{display:grid;gap:16px}
@media(min-width:760px){.three{grid-template-columns:repeat(3,1fr)}.three.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.three.four{grid-template-columns:repeat(4,1fr)}}
.three>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px}
.three h3{margin-bottom:10px}
.three p{color:var(--ink2)}
.steps{display:grid;gap:14px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px}
.steps .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);font:500 17px/1 var(--sans);color:var(--ink)}
.steps h3{margin-top:16px}
.steps p{margin-top:8px;color:var(--ink2)}

/* about */
.about{display:grid;gap:34px;align-items:center}
@media(min-width:860px){.about{grid-template-columns:340px 1fr;gap:70px}}
.about img{width:100%;border-radius:var(--r-img);aspect-ratio:4/5;object-fit:cover}
.about .quote{font:italic 500 34px/1.2 var(--serif);color:var(--ink)}
@media(min-width:880px){.about .quote{font-size:46px}}
.about .who{margin-top:20px;color:var(--ink2)}
.about .who b{color:var(--ink);font-weight:600}

/* split */
.split{display:grid;gap:36px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1.1fr 1fr;gap:70px}}
.split .head{margin-bottom:20px}
.ph{margin:0}
.ph img{width:100%;border-radius:var(--r-img);aspect-ratio:4/3;object-fit:cover}

/* neighbourhoods, areas, cities */
.nb{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
@media(min-width:760px){.nb{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}}
.nb li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.nb b{font-weight:600}
.nb span{color:var(--ink2);font-size:15px}
.areas{display:grid;gap:12px}
@media(min-width:600px){.areas{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{display:grid;gap:4px;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);transition:border-color .15s}
.area:hover{border-color:var(--ink)}
.area b{font:500 26px/1.15 var(--serif)}
.area span{color:var(--ink2);font-size:15px}
.cities{display:flex;flex-wrap:wrap;gap:10px}
.cities a{border:1px solid var(--line2);border-radius:999px;padding:10px 18px;font-size:15px}
.inline-links{color:var(--ink2);line-height:1.9}
.inline-links a{border-bottom:1px solid var(--line2);color:var(--ink);font-weight:500}
.inline-links a:hover{border-color:var(--ink)}

/* cards (guides + service cards) */
.cards{display:grid;gap:18px}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:grid;grid-template-rows:auto 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 14px 22px;overflow:hidden}
.card figure{margin:0}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(var(--r-card) - 8px)}
.card>div{padding:0 8px}
.card .eyebrow{margin-bottom:6px;font-size:11px}
.card h3{font-size:24px;line-height:1.2}
.card p{color:var(--ink2);margin-top:8px;font-size:15px}
.svc-card .btn{margin-top:18px}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(4,1fr);gap:16px}}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-img)}
.work-gallery{grid-template-columns:1fr}
@media(min-width:620px){.work-gallery{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.work-gallery{grid-template-columns:repeat(3,1fr);gap:22px}}
.work-gallery figcaption{font-size:15px;color:var(--ink2);margin-top:12px;line-height:1.5}
.work-more{margin-top:26px}

/* before/after pairs */
.pairs{display:grid;gap:26px}
.pair{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair-b,.pair-a{position:relative}
.pair img{width:100%;border-radius:var(--r-img);aspect-ratio:3/4;object-fit:cover}
.pair-tag{position:absolute;left:50%;top:12px;transform:translateX(-50%);font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(14,14,14,.85);color:#F4F4F4}
.pair figcaption{grid-column:1/-1}

/* form */
.qgrid{display:grid;gap:34px}
@media(min-width:900px){.qgrid{grid-template-columns:1fr 1.25fr;gap:70px;align-items:start}}
form{display:grid;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 20px}
@media(min-width:640px){form{padding:36px}}
.fld{display:grid;gap:7px}
.fld label{font-weight:500;font-size:14px;color:var(--ink2)}
.two{display:grid;gap:16px}
@media(min-width:600px){.two{grid-template-columns:1fr 1fr}}
input[type=text],input[type=tel],textarea,select{width:100%;font:inherit;font-size:17px;padding:15px 16px;border:1px solid var(--line2);border-radius:var(--r-field);background:var(--field);color:var(--ink);-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#7A7A7A 50%),linear-gradient(135deg,#7A7A7A 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
select option{background:#FFFFFF;color:#111111}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.ffoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.ffoot small{color:var(--ink3);font-size:13px}
.ffoot small a{border-bottom:1px solid var(--line2)}
.msg{display:none;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--line2)}
.msg.ok,.msg.err{display:block}
.msg.err{border-color:var(--ink)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font:500 23px/1.25 var(--serif);position:relative}
@media(min-width:880px){.faq summary{font-size:26px}}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;font:300 18px/1 var(--sans);color:var(--ink2);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--ink2);max-width:66ch;line-height:1.7}

/* big cta */
.cta-big{padding:96px 0;text-align:center;border-top:1px solid var(--line)}
.cta-big h2{max-width:18ch;margin:0 auto}
.cta-big .sub{margin:18px auto 0;max-width:44ch}
.cta-big .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* breadcrumbs */
.crumbs{margin-bottom:20px;font-size:13px;color:var(--ink3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px}
.crumbs a{color:var(--ink2)}
.crumbs [aria-current]{color:var(--ink)}

/* posts */
.post-hero .sub{max-width:62ch}
.post-img{margin:0 auto 8px;max-width:1120px;padding:0 var(--pad)}
.post-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-img)}
.post{font-size:18px;line-height:1.75;color:var(--ink2)}
.post h2{font-size:34px;margin:52px 0 16px;color:var(--ink)}
@media(min-width:880px){.post h2{font-size:42px}}
.post h3{margin:34px 0 10px}
.post p{margin:0 0 22px}
.post strong{color:var(--ink);font-weight:600}
.post p a,.post li a{border-bottom:1px solid var(--line2);color:var(--ink);font-weight:500}
.post ul,.post ol{margin:0 0 24px;padding-left:22px}
.post li{margin:0 0 8px}
.post blockquote{margin:0 0 24px;padding:6px 0 6px 22px;border-left:2px solid var(--ink);font:italic 500 24px/1.4 var(--serif);color:var(--ink)}
.post address{font-style:normal}
.toc{margin:0 0 40px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);font-size:16px}
.toc b{display:block;margin-bottom:10px;color:var(--ink);font-weight:600}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:5px 0}
.toc a{color:var(--ink2)}
.author{display:flex;gap:18px;align-items:center;margin-top:52px;padding-top:26px;border-top:1px solid var(--line);font-size:16px}
.author img{width:72px;height:90px;object-fit:cover;border-radius:var(--r-field);flex:none}
.author b{display:block;color:var(--ink)}
.author a{border-bottom:1px solid var(--line2)}

/* plate (no photo on file) */
.plate{position:relative;display:flex;align-items:flex-end;aspect-ratio:3/2;width:100%;border-radius:var(--r-img);overflow:hidden;background:linear-gradient(135deg,#2A2A2A,#161616)}
.plate>span{position:relative;padding:20px 22px;font:500 22px/1.2 var(--serif);color:#F4F4F4}
.tall .plate,.plate.tall{aspect-ratio:2/3}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 110px;color:var(--ink2);font-size:15px;background:var(--bg)}
.fgrid{display:grid;gap:28px}
@media(min-width:800px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.fgrid b{color:var(--ink);display:block;margin-bottom:10px;font:500 22px/1.2 var(--serif)}
.fgrid a{display:block;padding:4px 0}
.fgrid a:hover{color:var(--ink)}
footer address{font-style:normal;margin-bottom:6px}
footer .hrs{display:block;margin-top:10px}
.fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* phone bar */
.bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:rgba(14,14,14,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:var(--r-bar,999px)}
.bar .btn{padding:14px 8px;font-size:15px;white-space:nowrap}
.bar .btn-o{color:#F4F4F4;border-color:#454545}
@media(min-width:900px){.bar{display:none}footer{padding-bottom:56px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* SUITE — left-aligned, subtly rounded, numbered rows, a timeline, underlined fields.
   Alternates full-width black and white like Homestead, with the calm of a spec sheet. */
.hero-copy{min-width:0;max-width:40rem}
.eyebrow::after{content:"";width:40px;height:1px;background:currentColor;opacity:.6}
.head{text-align:left}
.hero{border-bottom:1px solid var(--line)}
.hero-split .wrap{display:grid;gap:36px;align-items:end}
@media(min-width:900px){.hero-split .wrap{grid-template-columns:1.35fr 1fr;gap:60px}}
.hero-split .hero-img{margin:0;padding:0;justify-self:end;width:62%;max-width:430px;position:relative}
@media(min-width:900px){.hero-split .hero-img{width:100%}}
.hero-split .hero-img::before{content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid var(--line2);border-radius:20px;z-index:-1}
.hero-split .hero-img img{aspect-ratio:3/4;border-radius:16px}
.hero .cta{display:grid;gap:10px}
@media(min-width:640px){.hero .cta{display:flex}}
.hero .cta .btn,.hero .cta .link{justify-content:center}
.btn span{font-weight:400}
.page-home #pricing{--bg:#FFFFFF;--bg2:#F6F6F6;--card:#F3F3F3;--card2:#EAEAEA;--ink:#111111;--ink2:#474747;--ink3:#5E5E5E;--line:#E0E0E0;--line2:#CCCCCC;--act:#111111;--act-ink:#FFFFFF;--field:#FFFFFF;--glow:rgba(17,17,17,.06);background:var(--bg);color:var(--ink)}
/* services as numbered rows */
.svc-cards{display:block;counter-reset:svc;border-top:1px solid var(--line)}
.svc-card{counter-increment:svc;display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto;gap:18px;align-items:start;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:26px 0}
.svc-card figure{grid-column:1;grid-row:1}
.svc-card img{width:118px;height:118px;aspect-ratio:1/1;border-radius:14px}
.svc-card>div{grid-column:2;padding:0}
.svc-card h3::before{content:counter(svc,lower-roman) ".";font:italic 500 22px/1 var(--serif);color:var(--ink3);display:block;margin-bottom:6px}
.svc-card .btn{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:12px 0 10px;min-height:44px;font-size:15px;margin-top:8px}
@media(min-width:900px){.svc-card{grid-template-columns:1fr 220px;padding:36px 0}.svc-card figure{grid-column:2}.svc-card>div{grid-column:1;grid-row:1}.svc-card img{width:220px;height:220px}}
.three>div{background:transparent;border:0;border-top:1px solid var(--line2);border-radius:0;padding:22px 0 0}
/* steps as a timeline */
.steps{display:block;position:relative;padding-left:40px;counter-reset:st}
.steps::before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:1px;background:var(--line2)}
.steps>div{counter-increment:st;position:relative;background:transparent;border:0;border-radius:0;padding:0 0 34px}
.steps .n{position:absolute;left:-40px;top:2px;width:25px;height:25px;border-radius:50%;background:var(--bg);border:1px solid var(--ink);font-size:0}
.steps h3::before{content:"Step " counter(st);display:block;font:600 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.steps h3{margin-top:0}
@media(min-width:900px){.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-left:0}.steps::before{left:0;right:0;top:12px;bottom:auto;width:auto;height:1px}.steps .n{position:static;margin-bottom:22px}}
.about .quote{border-left:1px solid var(--ink);padding-left:22px}
.about{grid-template-columns:1fr}
@media(min-width:860px){.about{grid-template-columns:300px 1fr}}
/* underlined fields */
form{background:transparent;border:0;padding:0;gap:24px}
input[type=text],input[type=tel],textarea,select{border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;padding:12px 0}
select{background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%}
.ffoot .btn{width:100%}
@media(min-width:640px){.ffoot .btn{width:auto}}
.cards .card{background:transparent;border:0;border-radius:0;padding:0}
.card img{border-radius:14px}
.gallery img{border-radius:14px}
.bar{left:10px;right:10px;border-radius:16px}
.bar .btn{border-radius:10px}
footer .fgrid b{font-size:24px}

/* The service-card photo fills its whole grid row, and a later `.cards .card` rule zeroes the
   card padding, so the seven photographs butted together into one unbroken vertical ribbon
   instead of reading as seven cards. Measured, not guessed: card height 220px, image height
   220px, consecutive images exactly 220px apart. (23 Sep 2026) */
.svc-cards .svc-card{padding-bottom:26px;margin-bottom:26px}
@media(min-width:900px){.svc-cards .svc-card{padding-bottom:34px;margin-bottom:34px}}

/* ================================================== motion + brand, 26 Sep 2026
   Restrained on purpose. Four moves, all slow, none looping. Nothing is hidden
   unless app.js has confirmed IntersectionObserver AND the element starts below
   the fold, so the page is always complete at rest. */

/* the hero settles rather than snapping in */
.hero-img{overflow:hidden;border-radius:var(--r-img)}
.hero-img img{animation:mcsettle 1.7s cubic-bezier(.22,.61,.36,1) both}
@keyframes mcsettle{from{transform:scale(1.045)}to{transform:scale(1)}}

/* photographs lift slightly under the cursor */
.band figure,.svc-card figure,.svc-card picture{overflow:hidden;border-radius:var(--r-img)}
.band img,.svc-card img{transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.band figure:hover img,.svc-card:hover img{transform:scale(1.035)}

/* the header gains a hairline once you leave the top */
.hd{transition:box-shadow .35s ease}
.scrolled .hd{box-shadow:0 1px 0 var(--line)}

/* his mark, in the footer */
.fmark{display:block;width:54px;margin:0 0 16px}
.fmark svg{width:100%;height:auto;display:block}

/* ============================================ scroll-driven motion, 26 Sep 2026
   Replaces the JavaScript reveal that shipped earlier today. Zero JS: the
   browser drives every one of these off scroll position, so they run both ways
   and hold wherever you stop.

   The page is complete at rest. Every hidden start state lives inside
   @supports (animation-timeline: view()), so a browser without scroll-driven
   timelines — Firefox, today — paints the finished page and animates nothing.
   Nothing here can blank a section the way an IntersectionObserver can.

   Only SHORT elements are animated. A container taller than the viewport can
   sit part-way through a view() range for thousands of pixels of scrolling, so
   .svc-cards, .gallery and .faq animate their rows, never themselves. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 1 — headings and short blocks rise as they arrive */
    .sec > .wrap > .head,
    .sec > .wrap > p.body,
    .sec > .wrap > .cta,
    .sec .three > div,
    .sec .steps > div,
    .sec .cards > .card,
    .svc-cards > .svc-card {
      animation: sdrise linear both;
      animation-timeline: view();
      animation-range: entry 14% cover 46%;
    }
    /* siblings cascade instead of arriving together */
    .sec .three > div:nth-child(2), .sec .steps > div:nth-child(2), .sec .cards > .card:nth-child(2) { animation-range: entry 20% cover 54% }
    .sec .three > div:nth-child(3), .sec .steps > div:nth-child(3), .sec .cards > .card:nth-child(3) { animation-range: entry 26% cover 62% }
    /* The footer is NOT animated. It is the last thing on the page, so the page ends before the
       footer can scroll to `cover 46%` — its columns sat frozen part-way, dimmed and offset, on
       every page. Caught in a bottom-of-page screenshot, 26 Sep 2026. */

    /* Two effects were tried here on 26 Sep 2026 and BOTH were cut after testing
       them on the live URL. Written down so nobody spends the afternoon again:

       - Tile wipe (clip-path on .gallery figure). A scroll-driven animation with
         `both` fill shows its `from` keyframe whenever its timeline is inactive.
         `from` was inset(0 0 100%) — nothing — so every gallery frame rendered
         shut. An effect that can hide photographs does not belong on a site that
         sells photographs.
       - Parallax drift on .gallery figure img. Never attached: not with view(),
         not with a named view-timeline on the frame, not with timeline-scope on
         the grid, with or without overflow on the frame. Computed style read back
         correct every time and transform stayed `none`. Three of the six gallery
         slots are type plates anyway until work-2, work-5 and work-6 arrive.

       What survives is the reveal above and the view transitions below, both of
       which were verified on the live page rather than in a demo. */
  }
}
@keyframes sdrise { from { opacity:0; transform:translateY(38px) scale(.985) } to { opacity:1; transform:none } }

/* ---- cross-document view transitions. STAGED, NOT VERIFIED (26 Sep 2026).
   The opt-in has to be on BOTH the page you leave and the page you land on;
   site.css is on all 35 pages, and the rule was read back parsed from the live
   stylesheet on both. Chromium and Safari 18.2+; everything else navigates
   normally. object-fit stops photographs stretching mid-morph. Fonts are all
   font-display:swap and nothing render-blocks, so the 4-second silent timeout
   should not be in play.

   BUT: on a real click in Chrome 153 against the live site, the `pageswap`
   event reported e.viewTransition == null, i.e. the browser started no
   transition. Not isolated. Ruled out so far: reduced motion (off), the rule
   missing or unparsed (present on both pages), stylesheet position (same result
   with the rule injected first), a redirect (200, no Location). Still open:
   the `cross-origin-opener-policy: same-origin` header Vercel serves.

   Left in place because the failure mode is nothing happening — an unfired
   opt-in navigates normally and cannot blank, break or slow a page. Do not
   describe this to a client as working until somebody has watched two pages
   cross-fade. If it never fires, delete these three rules. */
@view-transition { navigation: auto }
::view-transition-old(root), ::view-transition-new(root) {
  object-fit: cover;
  animation-duration: .4s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
/* the global reduce rule uses `*`, which never matches a pseudo-element */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important }
}

/* ---- the hero arrives. Time-based, not scroll-driven: it is above the fold, so there is no
   scrolling left to drive it. Staggered so the eye lands on the headline first and the buttons
   last. The hidden state lives ONLY inside the keyframes — if animation is disabled the element
   renders at its natural state, visible. Joe, 26 Sep: "theres like zero animation going on". */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero-mono { animation: heroin 1s cubic-bezier(.22,.61,.36,1) both }
  .hero h1                   { animation: heroin 1.1s cubic-bezier(.22,.61,.36,1) .08s both }
  .hero .tagline             { animation: heroin 1.1s cubic-bezier(.22,.61,.36,1) .16s both }
  .hero .sub                 { animation: heroin 1.1s cubic-bezier(.22,.61,.36,1) .22s both }
  .hero .cta                 { animation: heroin 1.1s cubic-bezier(.22,.61,.36,1) .34s both }
  .hero .proof               { animation: heroin 1.1s cubic-bezier(.22,.61,.36,1) .46s both }
  .hero-img, .hero-split .hero-img { animation: heroimg 1.5s cubic-bezier(.22,.61,.36,1) .1s both }
  /* the header settles in over the top of it */
  .hd                        { animation: heroin .8s cubic-bezier(.22,.61,.36,1) both }
}
/* NO OPACITY IN THESE TWO. A time-based animation runs on the document timeline, and that
   timeline is FROZEN while the tab is in the background — verified live on mcrenokc.com, 26 Sep:
   visibilityState "hidden", playState "running", currentTime stuck at 0, headline stuck at
   opacity 0. Anyone opening the site in a background tab (cmd-click, a link from Facebook)
   would land on a hero with no words in it. Transform-only can't hide anything: the worst case
   is a headline sitting 26px low, fully readable, which then slides into place. */
@keyframes heroin  { from { transform:translateY(26px) } to { transform:none } }
@keyframes heroimg { from { transform:translateY(34px) scale(.975) } to { transform:none } }

/* ---- the gallery fits the number of photographs it actually has. The grid is four columns
   from 760px up, so a client with three real photos got three images and a column of dead
   black. Now three photos make three columns and two make two. Wrapped in @supports so a
   browser without :has() simply keeps the four-column grid. (26 Sep 2026) */
@supports selector(:has(*)) {
  @media (min-width: 760px) {
    .gallery:has(> figure:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr) }
    .gallery:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr) }
  }
}


/* ---- 26 Sep 2026, fresh-eyes pass --------------------------------------------------------
   Inner pages open on the work (client.yml inner_hero_photo / hub_hero_photos): the inner hero
   reuses the home hero's split layout, a little shorter, centred instead of bottom-aligned. */
.hero.inner.hero-split .wrap{align-items:center}
.hero.inner.hero-split .hero-img img{aspect-ratio:4/5}
@media(min-width:900px){.hero.inner.hero-split .hero-img{max-width:400px}}
/* On a phone the split hero image was a 62% column pushed to the right edge, which read as a
   layout mistake. Full width, wide crop, so the headline and the photo both land. */
@media(max-width:899px){
  .hero-split .hero-img{width:100%;max-width:none;justify-self:stretch}
  .hero-split .hero-img::before{display:none}
  .hero-split .hero-img img,.hero.inner.hero-split .hero-img img{aspect-ratio:4/3}
}
/* a service row or guide card with no photograph (seven services, five photographs) */
.svc-card.no-img>div{grid-column:2}
@media(min-width:900px){.svc-card.no-img>div{grid-column:1}}
a.card.no-img>div{border-top:1px solid var(--line2);padding-top:22px}
/* The lead of the trust block is words now ("Father & son"), not a figure. A 120px light sans
   was drawn for a digit; set in the brand serif it reads as a statement instead of a stat. */
.price-hero .big{font:italic 500 64px/.98 var(--serif);letter-spacing:-.01em}
@media(min-width:900px){.price-hero .big{font-size:92px}}
.price-hero .perft{color:var(--ink2);margin-top:16px}
/* service rows: the type was 24px against a 220px photograph and 300px of row, so each row read
   as empty. Bigger names, a readable line, a little less air. */
@media(min-width:900px){
  .svc-cards .svc-card h3{font-size:34px}
  .svc-cards .svc-card p{font-size:17px;max-width:46ch}
  .svc-cards .svc-card{padding-bottom:28px;margin-bottom:28px}
}
/* bigger hit areas on a phone without moving anything: breadcrumbs, the logo, the call link,
   and links inside running text (make audit notes, 26 Sep 2026) */
.crumbs a{display:inline-block;padding:14px 0;margin:-14px 0}
a.brand{padding-top:3px;padding-bottom:3px}
.hero .cta .link{min-height:44px;display:inline-flex;align-items:center}
.inline-links a,.post p a,.post li a{padding:8px 0;margin:-8px 0}

/* ===================== classic: Brian's original preview look, made production-ready (18 Oct 2026) =====================
   The original was the machine's suite theme with a brick red accent and the subtle brick background.
   Changes from the preview, all on purpose:
   - no preview bar, no sign-up pill: one header only
   - no small labels over headings: the roman numerals on the service rows and "Step 1" over the steps are gone
   - the step number now sits inside its own circle, so the order still reads without a second heading
   - no stat counter block ("4 services")
   - the wordmark wraps to two lines on a phone instead of pushing the menu button off the screen */
:root{--amber:#8C3B2A;--accent:#8C3B2A}
.dk,body{background-image:url(brick-dk.svg);background-size:128px 48px}
.lt,.sec.alt{background-image:url(brick-lt.svg);background-size:128px 48px}

.svc-card h3::before,.steps h3::before{content:none;display:none}
.steps .n{font:600 13px/1 var(--sans)!important;color:var(--ink);display:grid;place-items:center}
@media(min-width:900px){.steps .n{width:34px;height:34px}}

/* wordmark: one line on desktop, two calm lines on a phone */
.brand{flex-direction:column;align-items:flex-start;gap:5px;letter-spacing:.12em}
.brand b{font-weight:600}
.brand i{font-size:.72em;letter-spacing:.2em}
@media(min-width:1040px){.brand{flex-direction:row;align-items:center;gap:.42em}.brand i{font-size:1em;letter-spacing:.1em}}
@media(max-width:420px){.brand{font-size:17px}}
.hd{gap:18px}

/* photo slots while Brian's photos are on the way: a quiet stone plate, never a fake photo */
.plate{background:linear-gradient(150deg,#26231F,#141311);aspect-ratio:3/4}
.plate::before{content:"";position:absolute;inset:0;background:url(brick-dk.svg) 0 0/96px 36px;opacity:.9}
.plate>span{font:500 20px/1.25 var(--serif);letter-spacing:.06em;color:#E9E3D7}
.hero-split .hero-img .plate{border-radius:16px}

/* service rows without a photo yet */
.svc-card.no-img{grid-template-columns:1fr}
.svc-card.no-img>div{grid-column:1}
.svc-card .btn{color:var(--ink)}

/* inner page hero: crumbs, one h1, one paragraph, buttons */
.crumbs{margin-bottom:26px;font-size:14px;color:var(--ink3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin:0 10px;opacity:.6}
.crumbs a:hover{color:var(--ink)}
.hero.inner .sub{color:var(--ink2)}

/* article sections on inner pages */
.post ul.dots{margin:18px 0 0;padding:0;list-style:none}
.post ul.dots li{position:relative;padding-left:22px;margin:.5em 0}
.post ul.dots li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sec.alt .post ul.dots li::before{background:#8C3B2A}
.lm{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lm li{padding:18px 0;border-bottom:1px solid var(--line)}
.lm b{display:block;font:500 23px/1.25 var(--serif);color:var(--ink)}
.lm span{display:block;margin-top:6px;color:var(--ink2);font-size:16px}
.byline{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink2);font-size:15px}
.byline b{color:var(--ink)}

/* contact block */
.bignum{display:inline-block;font:500 clamp(38px,5vw,60px)/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.cside .link{margin-top:18px}
.cside p{margin-top:16px}
.qok{display:none;margin-top:6px;font-size:15px;color:var(--ink)}
.qok.on{display:block}

/* the phone bar: Call and Text, only once the hero buttons have scrolled away */
.bar{transform:translateY(140%);transition:transform .3s ease;visibility:hidden}
.bar.on{transform:none;visibility:visible}
@media(prefers-reduced-motion:reduce){.bar{transition:none}}
.qerr{display:none;margin-top:4px}
.qerr.on{display:block}
/* header fits at every width: phone + button from 760px, the full menu only from 1200px */
@media(min-width:760px){.hd-tel{display:block}.hd .btn{display:inline-flex}}
@media(max-width:1199px){nav.main{display:none!important}.burger{display:grid!important}.brand{flex-direction:column!important;align-items:flex-start!important;gap:5px!important}.brand i{font-size:.72em!important;letter-spacing:.2em!important}.hd .hd-tel{margin-left:auto}.hd .hd-tel~.burger{margin-left:0}}
@media(min-width:760px) and (max-width:1199px){.burger{margin-left:0}}
@media(max-width:759px){.burger{margin-left:auto}}
.qerr{color:#E8A08F;font-size:15px}
.sec.alt .qerr{color:#8C3B2A}
/* while there are no photos, the service rows sit in two columns on a wide screen instead of leaving half the page empty */
@media(min-width:900px){.svc-cards:has(.no-img){display:grid;grid-template-columns:1fr 1fr;column-gap:64px;border-top:0}.svc-cards:has(.no-img) .svc-card{border-top:1px solid var(--line);border-bottom:0;margin-bottom:0}}
@media(max-width:759px){.hd .burger{margin-left:auto!important}}
/* no photo yet: on a phone the empty plate would be a full screen of nothing, so it waits for the photo */
@media(max-width:899px){.hero-split .hero-img:has(.plate){display:none}}
/* inner pages: one long calm read. Heading on the left, text on the right on a wide screen; stacked on a phone.
   Consecutive sections share one ground and are split by a hairline instead of a full section of padding. */
.art{padding:0}
.art .ag{padding:56px 0;border-top:1px solid var(--line)}
.hero.inner+.art .ag,.sec.alt:not(.art)+.art .ag{border-top:0}
.art:first-of-type .ag{padding-top:72px}
.art:last-of-type .ag{padding-bottom:88px}
.ag h2{max-width:20ch}
.ag .txt{margin-top:20px;max-width:66ch}
.ag .txt p{color:var(--ink2);font-size:17.5px;line-height:1.72}
.ag .txt p+p{margin-top:1.05em}
.ag .txt.faq{margin-top:20px}
.post.ag h2{font-size:32px;margin:0}
@media(min-width:900px){
  .ag{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .ag .txt{margin-top:0}
  .ag .txt.faq{margin-top:0}
  .post.ag h2,.ag h2{font-size:40px;line-height:1.08}
  .art .ag{padding:80px 0}
  .art:last-of-type .ag{padding-bottom:112px}
}
.art .cards{padding-bottom:16px}
.art>.wrap>.head{padding-top:72px}
.ag .txt p{margin:0}
.rel{border-top:1px solid var(--line)}
.hero.inner+.rel{border-top:0}
.art+.rel{padding-top:72px}
@media(min-width:900px){.art+.rel{padding-top:96px}}
.hd .btn{min-height:44px}