:root{
  --black:#0c0c0c; --ink:#1c1c1c; --gray:#6a6a6a; --line:#e3dccd;
  --white:#fff; --creme:#f6f1e6; --creme-2:#ece3d0;
  --gold:#b38b5d; --bronze:#8a6a43; --brown:#4a3523;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--black);line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.7rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.65rem}
.eyebrow{font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);font-weight:500;margin-bottom:14px}
.dark .eyebrow,.eyebrow.light{color:var(--gold)}
.btn{display:inline-block;padding:15px 30px;background:var(--black);color:var(--white);text-decoration:none;font-weight:500;letter-spacing:.08em;font-size:.88rem;text-transform:uppercase;border:2px solid var(--black);transition:.2s;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--bronze);border-color:var(--bronze)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--black)}
.btn.gold:hover{background:var(--white);border-color:var(--white)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.ghost:hover{background:var(--black);color:var(--white)}
.btn.ghost.light{color:var(--white);border-color:var(--white)}
.btn.ghost.light:hover{background:var(--white);color:var(--black)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
section{padding:96px 0}
.tint{background:var(--creme)}
.dark{background:var(--black);color:#d6d6d6}
.dark h2,.dark h3{color:var(--white)}
.head{max-width:660px;margin-bottom:52px}
.head.center{margin-inline:auto;text-align:center}
.head p{margin-top:14px;color:var(--gray)}
.dark .head p{color:#b5b5b5}
.sample{display:inline-block;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--gold);color:var(--bronze);margin-left:10px;vertical-align:middle;font-family:var(--sans);font-weight:500}

/* utility bar + header */
.topbar{background:var(--black);color:#cfcfcf;font-size:.82rem;letter-spacing:.06em}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding-block:9px;flex-wrap:wrap}
.topbar a{text-decoration:none}.topbar a:hover{color:var(--gold)}
.topbar .gold{color:var(--gold)}
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px}
.nav .brand img{height:58px;width:auto}
.nav ul{display:flex;gap:34px;list-style:none;padding:0;align-items:center}
.nav ul a{text-decoration:none;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover{color:var(--bronze)}
.nav ul a.on{border-color:var(--gold)}
.nav ul a.btn{padding:11px 22px;color:var(--white);border:2px solid var(--black)}
.nav ul a.btn:hover{color:var(--white);border-color:var(--bronze)}
.menu-btn{display:none;background:none;border:1px solid var(--line);padding:8px 12px;font-size:1.3rem;cursor:pointer;color:var(--black)}

/* hero */
.hero{background:var(--black);color:#d6d6d6;padding:84px 0 92px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.hero h1{color:var(--white)}
.hero h1 em{color:var(--gold);font-style:italic}
.hero p.lead{font-size:1.2rem;margin:24px 0 34px;max-width:33em;color:#cdcdcd}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .photo{position:relative;margin-right:18px;margin-bottom:18px}
.hero .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;position:relative;z-index:1}
.hero .photo::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold)}
.page-hero{background:var(--black);padding:78px 0 70px;text-align:center}
.page-hero h1{color:var(--white);font-size:clamp(2.5rem,5vw,3.8rem)}
.page-hero p{color:#bdbdbd;max-width:36em;margin:16px auto 0}
.crumbs{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}

/* trust strip */
.strip{background:var(--creme);border-bottom:1px solid var(--line);padding:0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{padding:30px 20px;text-align:center;border-right:1px solid var(--line)}
.strip div:last-child{border:0}
.strip b{display:block;font-family:var(--serif);font-size:2.2rem;color:var(--brown);line-height:1}
.strip span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}

/* service cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc{background:var(--white);border:1px solid var(--line);padding:0;display:flex;flex-direction:column;text-decoration:none;transition:.25s}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(0,0,0,.4)}
.chip{height:92px;display:flex;align-items:flex-end;padding:12px 18px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.svc .body{padding:26px 26px 30px}
.svc p{font-size:.97rem;color:#555;margin-top:10px}
.svc .more{margin-top:16px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-weight:500}
.c1{background:#2f3a4a}.c2{background:#8a6a43}.c3{background:#9aa593}.c4{background:#b9a98d}.c5{background:#6e7480}.c6{background:#7b3f35}.c7{background:#4a3523}

/* split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev>:first-child{order:2}
.split img{width:100%;object-fit:cover}
.frame{position:relative;margin:0 18px 18px 0}
.frame img{position:relative;z-index:1}
.frame::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold)}
.dark .frame::after{border-color:var(--bronze)}
.checks{list-style:none;padding:0;margin-top:22px;display:grid;gap:12px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.split p{margin-top:16px}
.quote{font-family:var(--serif);font-style:italic;font-size:1.55rem;color:var(--brown);line-height:1.35;border-left:3px solid var(--gold);padding-left:22px;margin-top:28px}
.dark .quote{color:var(--gold)}

/* why / values */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #2c2c2c}
.why div{padding:42px 34px;border-right:1px solid #2c2c2c}
.why div:last-child{border:0}
.why h3{margin-bottom:10px}
.why .n{font-family:var(--serif);font-size:1rem;letter-spacing:.2em;color:var(--gold);margin-bottom:12px;display:block}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{padding-top:22px;border-top:3px solid var(--bronze)}
.step b{font-family:var(--serif);font-size:2.2rem;color:var(--bronze);font-weight:600}
.step h3{font-size:1.45rem;margin:4px 0 8px}
.step p{font-size:.96rem;color:#4a4a4a}

/* testimonials */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{background:var(--white);padding:34px 30px;border:1px solid var(--line)}
.stars{color:var(--gold);letter-spacing:.2em;font-size:1rem}
.review p{margin:14px 0 20px;font-family:var(--serif);font-size:1.3rem;line-height:1.35;color:var(--black)}
.review small{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* cta banner */
.banner{background:var(--brown);color:#eadfce;padding:78px 0;text-align:center}
.banner h2{color:var(--white);margin-bottom:14px}
.banner p{max-width:34em;margin:0 auto 30px}
.banner .cta{justify-content:center}

/* service detail rows */
.row{padding:70px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border:0}
.row .chipbox{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:22px;color:rgba(255,255,255,.92);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;position:relative}
.row .chipbox::before{content:"Photo coming soon";position:absolute;top:22px;left:22px;font-size:.68rem;opacity:.75}
.tag{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:500}
.row h2{margin:8px 0 4px;font-size:clamp(1.9rem,3.4vw,2.6rem)}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{cursor:pointer;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--black);list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::after{content:"+";color:var(--gold);font-size:1.6rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:#4a4a4a;max-width:46em}
.faq{max-width:820px;margin:0 auto}

/* projects */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filters button{font:inherit;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 20px;border:1px solid var(--ink);background:transparent;cursor:pointer;color:var(--ink)}
.filters button.on,.filters button:hover{background:var(--black);color:var(--white)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{background:var(--white);border:1px solid var(--line)}
.proj .img{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);position:relative}
.proj .img::before{content:"Photo coming soon";position:absolute;top:16px;left:16px;font-size:.64rem;opacity:.7}
.proj .cap{padding:20px 22px 24px}
.proj h3{font-size:1.4rem}
.proj p{font-size:.9rem;color:var(--gray);margin-top:4px}
.proj[hidden]{display:none}

/* contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.info h2{margin-bottom:16px}
.phone{font-family:var(--serif);font-size:2.7rem;font-weight:600;color:var(--black);text-decoration:none;display:block;margin:22px 0 6px;line-height:1}
.phone:hover{color:var(--bronze)}
.facts{list-style:none;padding:0;margin-top:28px;display:grid;gap:18px}
.facts li{padding-top:16px;border-top:1px solid var(--line)}
.facts b{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-weight:500;margin-bottom:2px}
form{display:grid;gap:18px;background:var(--creme);padding:42px;border-top:4px solid var(--gold)}
label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--brown);display:grid;gap:7px}
input,select,textarea{font:inherit;padding:13px 14px;border:1px solid #cdc3ad;background:var(--white);color:var(--black);width:100%;letter-spacing:normal;text-transform:none;border-radius:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.note{font-size:.84rem;color:var(--gray)}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.areas span{padding:8px 16px;border:1px solid var(--line);font-size:.86rem;background:var(--white)}

/* footer */
footer{background:var(--black);color:#b5b5b5;padding:70px 0 0;font-size:.94rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px}
footer img{height:70px;background:var(--creme);padding:6px 12px}
footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500}
footer ul{list-style:none;padding:0;display:grid;gap:9px}
footer a{text-decoration:none}footer a:hover{color:var(--gold)}
footer p{margin-top:16px;max-width:22em}
.fine{border-top:1px solid #262626;margin-top:54px;padding:22px 0;font-size:.8rem;color:#7b7b7b;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:960px){
  section{padding:68px 0}
  .hero .wrap,.split,.contact{grid-template-columns:1fr;gap:50px}
  .split.rev>:first-child{order:0}
  .hero .photo,.frame{max-width:440px;width:calc(100% - 18px)}
  .grid3,.reviews,.gallery{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .why div{border-right:0;border-bottom:1px solid #2c2c2c}
  .steps{grid-template-columns:repeat(2,1fr)}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(2){border-right:0}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .fgrid{grid-template-columns:1fr 1fr}
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:26px;gap:20px;border-bottom:1px solid var(--line);align-items:flex-start}
  .nav ul.open{display:flex}
}
@media(max-width:600px){
  .grid3,.reviews,.gallery,.steps,.two,.fgrid{grid-template-columns:1fr}
  form{padding:28px 20px}
  .topbar .wrap{justify-content:center;text-align:center}
  .topbar .hide-s{display:none}
  .phone{font-size:2.2rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- layout v2 ---- */
section{background:var(--white)}
.tint{background:var(--creme)}
.dark{background:var(--black)}
.banner{background:var(--brown)}
.edge-wrap{background:var(--white)}
.lefthead{max-width:560px;margin-bottom:46px}
.lefthead p:not(.eyebrow){margin-top:14px;color:var(--gray)}
.dark .lefthead p:not(.eyebrow){color:#b5b5b5}
.tag{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:500}

/* hero: copy left, big photo bleeding off the right edge */
.hero2{background:var(--black);color:#d6d6d6;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:600px;overflow:hidden;padding:0}
.hero2 .copy{padding:84px 56px 96px max(22px,calc((100vw - 1160px)/2 + 22px));align-self:center}
.hero2 h1{color:var(--white);font-size:clamp(2.5rem,4.6vw,4.2rem)}
.hero2 h1 em{color:var(--gold);font-style:italic}
.hero2 .lead{font-size:1.18rem;margin:24px 0 34px;max-width:30em;color:#cdcdcd}
.shot{position:relative;margin:0;min-height:420px;align-self:stretch}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.shot figcaption{position:absolute;left:0;bottom:44px;background:var(--gold);color:var(--black);padding:12px 22px;font-size:.84rem;letter-spacing:.04em;font-weight:500;max-width:80%}

/* pulled quote */
.pull{background:var(--creme);padding:92px 0 84px}
.pull .big{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.12;color:var(--brown);max-width:19em;text-wrap:balance}
.pull .by{margin-top:22px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}

/* services: two big panels + ruled list */
.svcs{padding-top:92px}
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.big-svc{display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:38px;text-decoration:none;color:#e9e1d2;transition:.25s}
.big-svc.a{background:#2f3a4a}
.big-svc.b{background:var(--bronze)}
.big-svc h3{color:var(--white);font-size:2.3rem;margin:8px 0 12px}
.big-svc .tag{color:rgba(255,255,255,.7)}
.big-svc p{max-width:30em}
.big-svc .more{margin-top:20px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--white)}
.big-svc:hover{filter:brightness(1.12)}
.also{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.also .tag{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.also a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.also a b{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--black)}
.also a span{grid-column:1;font-size:.92rem;color:var(--gray)}
.also a i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--gold);font-size:1.3rem}
.also a:hover b{color:var(--bronze)}

/* approach: sticky heading + ruled stack */
.approach .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.approach .lefthead{position:sticky;top:130px;margin:0}
.stack>div{padding:30px 0;border-top:1px solid #333}
.stack>div:last-child{border-bottom:1px solid #333}
.stack h3{font-size:1.7rem;margin-bottom:8px}

/* family: image with an overlapping text card */
.family{padding-bottom:110px}
.family .wrap{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.family img{grid-column:1/8;grid-row:1;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:center 30%}
.family .card{grid-column:7/13;grid-row:1;background:var(--white);padding:50px 46px;position:relative;z-index:2;box-shadow:0 30px 60px -34px rgba(0,0,0,.45);border-top:4px solid var(--gold)}
.family .card p{margin-top:14px}

/* reviews: one big, two small */
.reviews2 .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.reviews2 .lefthead{margin:0}
.rv{display:grid;gap:20px}
.rv blockquote{margin:0;padding:26px 0 0;border-top:1px solid var(--line)}
.rv blockquote p{font-family:var(--serif);font-size:1.45rem;line-height:1.3;color:var(--black)}
.rv blockquote.feat{border:0;padding:0 0 26px;border-bottom:1px solid var(--line)}
.rv blockquote.feat p{font-size:2.2rem;line-height:1.15;color:var(--brown)}
.rv cite{display:block;margin-top:12px;font-style:normal;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}

/* sub-page heroes: left aligned */
.page-hero{text-align:left;padding:84px 0 80px}
.page-hero p{margin-left:0}
.banner{padding:96px 0}

@media(max-width:960px){
  .hero2{grid-template-columns:1fr}
  .hero2 .copy{padding:60px 22px 48px}
  .shot{min-height:0;aspect-ratio:4/3;width:100%}
  .duo,.approach .wrap,.reviews2 .wrap{grid-template-columns:1fr;gap:34px}
  .approach .lefthead{position:static}
  .also{grid-template-columns:1fr}
  .family .wrap{display:block}
  .family .card{margin:-50px 16px 0}
  .family img{aspect-ratio:4/3;object-position:center 25%}
  .rv blockquote.feat p{font-size:1.8rem}
}

/* about principles + contact next steps */
.principles{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.principles .lefthead{margin:0}
.plist>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line);align-items:baseline}
.plist>div:last-child{border-bottom:1px solid var(--line)}
.plist h3{font-size:2rem;color:var(--brown)}
.next{margin-top:34px;padding:26px;background:var(--creme)}
.next ol{margin:12px 0 0 20px;display:grid;gap:8px;font-size:.96rem}
@media(max-width:960px){.principles{grid-template-columns:1fr;gap:34px}.plist>div{grid-template-columns:1fr;gap:6px}}

/* projects: staggered tiles */
.gallery{display:block;columns:3;column-gap:24px}
.gallery .proj{break-inside:avoid;margin-bottom:24px}
.gallery .proj:nth-child(3n+1) .img{aspect-ratio:4/5}
.gallery .proj:nth-child(3n+2) .img{aspect-ratio:1/1}
.gallery .proj:nth-child(3n) .img{aspect-ratio:4/3}
.gallery .proj:nth-child(4) .img{aspect-ratio:4/3}
.gallery .proj:nth-child(5) .img{aspect-ratio:4/5}
@media(max-width:960px){.gallery{columns:2}}
@media(max-width:600px){.gallery{columns:1}}