@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cormorant-600.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500i.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/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:12px;--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}

/* 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,
    footer .fgrid > div {
      animation: sdrise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
    /* siblings cascade instead of arriving together */
    .sec .three > div:nth-child(2), .sec .steps > div:nth-child(2), .sec .cards > .card:nth-child(2),
    footer .fgrid > div:nth-child(2) { animation-range: entry 11% cover 36% }
    .sec .three > div:nth-child(3), .sec .steps > div:nth-child(3), .sec .cards > .card:nth-child(3),
    footer .fgrid > div:nth-child(3) { animation-range: entry 16% cover 42% }

    /* 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(18px) } 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 }
}

/* client overrides */
:root{--amber:#111111;--accent:#111111}