/* Concept "Atelier" · light, architectural, gallery-forward (Wilson-style).
   Display: Jost (light/airy). Body: Inter. Cream canvas, one sage accent, hairlines not boxes. */
:root{
  --cream:#FAF8F4; --paper:#FDFCFB; --greige:#EFEAE0; --line:#E2DCCE;
  --ink:#262320; --text:#55504A; --muted:#756F60;
  --sage:#3C4A32; --sage-soft:#6F7D5A;
}
*{box-sizing:border-box}
body{background:var(--cream);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Jost,"Helvetica Neue",Arial,sans-serif;color:var(--ink);font-weight:400;line-height:1.1;letter-spacing:.01em}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.section{padding-block:clamp(60px,9vw,128px)}
.eyebrow{font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--sage)}
.eyebrow.light{color:rgba(255,255,255,.85)}
.section-head{max-width:46ch}
.section-head.center{max-width:56ch;margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{font-size:clamp(1.9rem,1.2rem+2.4vw,3rem);font-weight:300}
.section-note{color:var(--muted);font-size:.95rem;margin-top:16px}
.link-underline{display:inline-block;color:var(--sage);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--sage-soft);padding-bottom:3px;transition:color .3s ease,border-color .3s ease}
.link-underline:hover{color:var(--ink);border-color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:16px 30px;border-radius:0;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .3s ease;cursor:pointer;min-height:52px;line-height:1}
.btn-solid{background:var(--ink);color:var(--cream)}
.btn-solid:hover{background:var(--sage)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-line-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65)}
.btn-line-light:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* top bar */
.topbar{background:var(--greige);color:var(--text);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.topbar-in{display:flex;justify-content:space-between;align-items:center;padding-block:9px}
.topbar-lic b{color:var(--sage)}
@media(max-width:620px){.topbar-in span:first-child{display:none}.topbar-in{justify-content:center}}

/* header — centered logo, nav split either side (Wilson-style) */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--cream);
  border-bottom:1px solid transparent;transition:border-color .4s ease,box-shadow .4s ease,padding .3s ease}
.header-in{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:clamp(14px,3vw,32px);padding-block:20px}
.mainnav{display:flex;gap:clamp(16px,2.2vw,34px)}
.mainnav-left{justify-content:flex-end}
.mainnav-right{justify-content:flex-start}
.mainnav a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);position:relative;padding-block:4px;transition:color .3s}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--sage);transition:right .35s ease}
.mainnav a:hover::after{right:0}
.brand{display:block;line-height:0;justify-self:center}
.brand img{width:clamp(136px,13vw,164px);height:auto}
.header-cta{padding:12px 22px;min-height:44px;white-space:nowrap}
.navtoggle{display:none}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(38,35,32,.05)}
.site-header.is-scrolled .header-in{padding-block:14px}

/* hero */
.hero{padding-top:clamp(56px,9vw,100px);padding-bottom:0;text-align:center}
.hero-in{max-width:52rem;margin-inline:auto}
.hero-in .eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(2.6rem,1.5rem+5vw,5.4rem);font-weight:300;margin-bottom:22px}
.hero-lead{margin:0 auto;max-width:48ch;font-size:1.15rem;color:var(--text)}
.hero-cta{display:flex;gap:clamp(16px,3vw,30px);justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px}
.hero-frame{margin:clamp(44px,7vw,84px) auto 0;max-width:1220px}
.hero-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:1px solid var(--line)}
.hero-frame figcaption{margin-top:14px;text-align:center;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-stats{display:flex;gap:clamp(24px,6vw,80px);justify-content:center;flex-wrap:wrap;
  padding-block:30px;margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.hero-stats div{text-align:center}
.hero-stats b{display:block;font-family:Jost,sans-serif;font-size:1.9rem;color:var(--ink);font-weight:400}
.hero-stats span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.hero-stats{gap:20px}.hero-stats b{font-size:1.4rem}}

/* split sections */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.split-copy h2{font-size:clamp(1.8rem,1.2rem+2vw,2.7rem);margin:16px 0 20px;font-weight:300}
.split-copy p{margin-bottom:16px}
.split-photo{margin:0;overflow:hidden}
.split-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}.approach .split-photo{order:-1}.split-photo img{aspect-ratio:16/10}}

/* services — editorial list, hairlines not boxes */
.services{background:var(--paper)}
.services .section-head{margin-bottom:clamp(20px,4vw,40px)}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:72px 1fr 1.3fr;align-items:baseline;gap:clamp(16px,3vw,40px);
  padding-block:clamp(22px,3vw,32px);border-bottom:1px solid var(--line)}
.svc-no{font-family:Jost,sans-serif;font-size:1rem;color:var(--sage-soft);font-weight:400}
.svc h3{font-size:1.4rem;font-weight:400;margin:0}
.svc p{color:var(--text);font-size:.98rem;line-height:1.65;margin:0}
@media(max-width:700px){.svc{grid-template-columns:40px 1fr;grid-template-areas:"no title" ". body"}
  .svc-no{grid-area:no}.svc h3{grid-area:title}.svc p{grid-area:body;margin-top:8px}}

/* portfolio gallery — the centerpiece */
.work .section-head{margin-bottom:clamp(32px,5vw,56px)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,36px);grid-auto-flow:dense}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:opacity .5s ease}
.gallery figure:hover img{opacity:.92}
.gallery figcaption{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cap-rule{width:18px;height:1px;background:var(--sage-soft);display:inline-block;flex:none}
.gallery .g-lg{grid-column:span 2}
.gallery .g-lg img{aspect-ratio:16/9}
.gallery .g-wide{grid-column:span 2}
.gallery .g-wide img{aspect-ratio:16/9}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery .g-lg,.gallery .g-wide{grid-column:span 2}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.gallery .g-lg,.gallery .g-wide{grid-column:span 1}.gallery .g-lg img,.gallery .g-wide img{aspect-ratio:4/3}}

/* feature full-bleed band */
.feature{position:relative;color:#fff;padding-block:clamp(72px,12vw,150px);overflow:hidden}
.feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(24,22,18,.78),rgba(24,22,18,.4))}
.feature-in{position:relative;max-width:42rem}
.feature-in h2{color:#fff;font-size:clamp(1.9rem,1.2rem+2.4vw,3rem);margin:16px 0 18px;font-weight:300}
.feature-in p{color:rgba(255,255,255,.9);margin-bottom:26px}

/* process — vertical hairlines, roman numerals */
.process .section-head{margin-bottom:clamp(36px,5vw,60px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.steps li{padding:0 clamp(14px,1.8vw,24px);border-left:1px solid var(--line)}
.step-no{font-family:Jost,sans-serif;font-size:1.5rem;color:var(--sage);display:block;margin-bottom:14px;font-weight:300}
.steps h3{font-size:1.1rem;font-weight:500;margin-bottom:8px;line-height:1.25;color:var(--ink)}
.steps p{font-size:.9rem;color:var(--muted);line-height:1.55}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:28px}}
@media(max-width:540px){.steps{grid-template-columns:1fr;row-gap:24px}.steps li{border-left:none;border-top:1px solid var(--line);padding:20px 0 0}}

/* reviews */
.reviews{background:var(--paper)}
.reviews .section-head{margin-bottom:clamp(32px,5vw,56px)}
.reviews .section-head h2{font-size:clamp(1.8rem,1.2rem+2vw,2.6rem);font-weight:300}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.rev-grid blockquote{margin:0;text-align:center;padding:0 clamp(8px,2vw,20px)}
.rev-grid p{font-family:Jost,sans-serif;font-size:1.35rem;line-height:1.45;color:var(--ink);font-weight:300}
.rev-grid footer{margin-top:16px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rev-grid blockquote::before{content:"";display:block;width:28px;height:1px;background:var(--sage-soft);margin:0 auto 22px}
@media(max-width:800px){.rev-grid{grid-template-columns:1fr;gap:40px}}

/* about */
.about .split-photo img{aspect-ratio:4/5}
.about-lic{margin-top:18px;color:var(--ink);font-weight:500}
.about-lic b{color:var(--sage)}

/* service area */
.area{background:var(--greige)}
.area .section-head{margin-bottom:clamp(30px,4vw,48px)}
.area-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.area-cols>div{padding-top:22px;border-top:1px solid var(--sage-soft)}
.area-cols h3{font-size:1.3rem;margin-bottom:10px;font-weight:400}
.area-cols p{color:var(--text);font-size:.96rem;line-height:1.8}
@media(max-width:760px){.area-cols{grid-template-columns:1fr;gap:28px}}

/* consultation */
.consult-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:start}
.consult-photo{margin:0 0 28px;overflow:hidden}
.consult-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.consult-copy h2{font-size:clamp(2rem,1.3rem+2vw,2.9rem);margin:14px 0 14px;font-weight:300}
.consult-promise{color:var(--text)}
.consult-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.consult-list a{color:var(--ink);font-size:1.05rem;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s,color .3s}
.consult-list a:hover{border-color:var(--sage);color:var(--sage)}
.consult-form{background:var(--paper);padding:clamp(28px,3.4vw,44px);border:1px solid var(--line)}
@media(max-width:860px){.consult-in{grid-template-columns:1fr;gap:32px}}

/* shared estimate form — refined skin */
.consult-form .jsform-field label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.consult-form .jsform-input,.consult-form .jsform-select,.consult-form .jsform-textarea{
  border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;padding:10px 2px;font-size:1rem;color:var(--ink)}
.consult-form .jsform-input:focus,.consult-form .jsform-select:focus,.consult-form .jsform-textarea:focus{
  border-bottom-color:var(--sage);box-shadow:none}
.consult-form .jsform-submit{background:var(--ink);color:var(--cream);border-radius:0;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;min-height:54px;font-weight:600}
.consult-form .jsform-submit:hover{background:var(--sage)}
.consult-form .req{color:var(--sage-soft)}

/* footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.68);padding-block:clamp(44px,6vw,72px)}
.footer-in{display:grid;grid-template-columns:1.3fr 1fr auto;gap:36px;align-items:start}
.footer-brand img{width:176px;margin-bottom:14px}
.footer-brand p,.footer-meta p{font-size:.92rem;margin-top:6px}
.footer-meta b{color:#8FA17B}
.footer-meta a{color:#fff}.footer-meta a:hover{color:#8FA17B}
.footer-legal{text-align:right;font-size:.86rem}
.footer-legal a{display:inline-block;margin-top:8px;text-decoration:underline}
@media(max-width:760px){.footer-in{grid-template-columns:1fr}.footer-legal{text-align:left}}

/* mobile nav */
@media(max-width:900px){
  .mainnav,.header-cta{display:none}
  .header-in{grid-template-columns:auto 1fr auto}
  .navtoggle{display:flex;flex-direction:column;gap:5px;padding:10px;background:transparent;order:-1}
  .navtoggle span{width:24px;height:1.5px;background:var(--ink);transition:.3s}
  .site-header.nav-open .mainnav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin:0;justify-content:flex-start}
  .site-header.nav-open .mainnav a{padding:14px clamp(20px,5vw,56px)}
  .site-header.nav-open .header-cta{display:inline-flex;margin:12px clamp(20px,5vw,56px);background:var(--ink);color:var(--cream)}
}

/* refine the auto-injected sticky mobile bar + back pill to match */
.js-stickybar{background:var(--ink)}
.js-stickybar a{background:#332F29}
.js-stickybar a.is-cta{background:var(--sage)}
.js-backpill{background:rgba(38,35,32,.9);border-color:rgba(255,255,255,.2)}
.js-backpill:hover{background:var(--sage)}

@media (prefers-reduced-motion: reduce){.gallery img,.btn{transition:none}}