:root{
  /* palette sampled from FD Build's logo: lime green + magenta + yellow */
  --paper:#F7F8F5; --surface:#FFFFFF; --band:#F0F2EA;
  --ink:#1C1E19; --ink-2:#5B6056; --line:#E2E4DC;
  --green:#5DCA00; --green-2:#54B500; --green-deep:#3C820B;  /* deep = text on white */
  --magenta:#CA5E9C; --magenta-deep:#B33F82; --yellow:#F2D00C;
  --maxw:1200px;
  --sans:"Helvetica Neue",-apple-system,system-ui,"Segoe UI",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0; text-wrap:balance;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta-deep);}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700;
  padding:14px 26px; border-radius:2px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;}
.btn-primary{background:var(--green); color:var(--ink);}
.btn-primary:hover{background:var(--green-2); transform:translateY(-2px);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(247,248,245,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(0,0,0,.4);}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.02em;}
.brand .mark{width:auto; height:38px; flex:none; display:block;}
.brand img{height:34px; width:auto; display:block;}
.nav-links{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex; align-items:center; gap:22px;}
.tel{font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.tel svg{color:var(--green-deep);}
@media (max-width:940px){.nav-links{display:none;}}
@media (max-width:560px){.tel span{display:none;} .nav-right .btn{padding:12px 16px;}}

/* hero — photographic, dark gradient */
.hero{position:relative; overflow:hidden; background:#0C0E0B; border-bottom:1px solid var(--line);}
.hero .hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; }
.hero .hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,12,9,.94) 0%, rgba(10,12,9,.8) 42%, rgba(10,12,9,.42) 78%, rgba(10,12,9,.28) 100%),
             linear-gradient(0deg, rgba(10,12,9,.75) 0%, rgba(10,12,9,0) 55%);}
.hero .grid-bg{position:absolute; inset:0; opacity:.12; color:#fff;}
.hero-inner{position:relative; display:grid; grid-template-columns:1.55fr .85fr; gap:48px; align-items:end;
  padding:104px 0 68px; min-height:76vh;}
.hero .eyebrow{color:#A9E27A;}
.hero h1{font-size:clamp(2.9rem,7vw,5.6rem); color:#F7F8F5;}
.hero h1 .g{color:#7CDA2E;}
.hero .sub{font-size:1.2rem; color:rgba(247,248,245,.82); margin-top:26px; max-width:40ch;}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero .btn-ghost{border-color:rgba(255,255,255,.55); color:#F7F8F5;}
.hero .btn-ghost:hover{background:#F7F8F5; color:var(--ink); border-color:#F7F8F5;}
.hero-rail{border-left:2px solid var(--green); padding-left:24px; display:flex; flex-direction:column; gap:26px;}
.hero-rail .stat b{font-family:var(--serif); font-size:2.6rem; font-weight:400; line-height:.9; display:block; color:#F7F8F5;}
.hero-rail .stat span{font-size:13px; color:rgba(247,248,245,.68); letter-spacing:.02em; margin-top:6px; display:block;}
@media (max-width:840px){.hero-inner{grid-template-columns:1fr; gap:34px; padding:72px 0 44px; min-height:0;}
  .hero-rail{flex-direction:row; flex-wrap:wrap; gap:28px; border-left:0; border-top:2px solid var(--green); padding-left:0; padding-top:22px;}}

/* work ribbon */
.ribbon{display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line);
  border-bottom:1px solid var(--line);}
.ribbon .cell{position:relative; aspect-ratio:4/5; background:var(--band); overflow:hidden;
  display:flex; align-items:flex-end; padding:16px; background-size:cover; background-position:center;}
.ribbon .cell .ph{position:absolute; inset:0; color:rgba(28,30,25,.14); display:flex; align-items:center; justify-content:center;}
.ribbon .cell::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(28,30,25,.72),transparent 60%);}
.ribbon .cell .lab{position:relative; z-index:1;}
.ribbon .cell .lab .t{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff;}
.ribbon .cell .lab .n{font-weight:700; font-size:.95rem; margin-top:3px; letter-spacing:-.01em; color:#fff;}
.ribbon .cell.placeholder .lab .t{color:var(--magenta-deep);}
.ribbon .cell.placeholder .lab .n{color:var(--ink);}
.ribbon .cell.placeholder::after{display:none;}
@media (max-width:820px){.ribbon{grid-template-columns:repeat(2,1fr);} .ribbon .cell:last-child{display:none;}}

/* section scaffolding */
.section{padding:96px 0;}
.sec-top{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:52px;}
.sec-top h2{font-size:clamp(2rem,4vw,3.1rem); max-width:16ch;}
.sec-top .lead{color:var(--ink-2); max-width:40ch; margin-top:14px;}

/* services grid */
.svc{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line);}
.svc .item{padding:30px 30px 30px 0; border-bottom:1px solid var(--line); display:flex; gap:22px; align-items:flex-start;
  transition:background .18s ease;}
.svc .item:nth-child(odd){border-right:1px solid var(--line); padding-right:40px;}
.svc .item:nth-child(even){padding-left:40px;}
.svc .item:hover{background:var(--surface);}
.svc .ic{color:var(--green-deep); flex:none; margin-top:2px;}
.svc h3{font-size:1.35rem; letter-spacing:-.02em;}
.svc p{font-size:.96rem; color:var(--ink-2); margin-top:7px;}
@media (max-width:720px){.svc{grid-template-columns:1fr;}
  .svc .item:nth-child(odd){border-right:0; padding-right:0;} .svc .item:nth-child(even){padding-left:0;}}

/* projects */
.work{background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.proj{position:relative; aspect-ratio:3/2.3; background:var(--surface); border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:flex-end; padding:20px; transition:transform .2s ease, box-shadow .2s ease;
  background-size:cover; background-position:center;}
.proj:hover{transform:translateY(-4px); box-shadow:0 30px 50px -34px rgba(28,30,25,.4);}
@media (prefers-reduced-motion:reduce){.proj:hover{transform:none;}}
.proj .ph{position:absolute; inset:0; color:rgba(28,30,25,.12); display:flex; align-items:center; justify-content:center;}
.proj .meta{position:relative; z-index:2;}
.proj .tag{font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#fff;}
.proj .meta b{display:block; font-size:1.15rem; letter-spacing:-.02em; margin-top:4px; color:#fff;}
.proj::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(28,30,25,.78),transparent 55%);}
.proj.placeholder::after{background:linear-gradient(0deg,rgba(247,248,245,.85),transparent 45%);}
.proj.placeholder .tag{color:var(--magenta-deep);}
.proj.placeholder .meta b{color:var(--ink);}
@media (max-width:820px){.proj-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.proj-grid{grid-template-columns:1fr;}}

/* why / spec sheet */
.spec{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.spec-list{display:flex; flex-direction:column;}
.spec-row{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line);}
.spec-row:last-child{border-bottom:1px solid var(--line);}
.spec-row .k{font-family:var(--serif); font-size:1.05rem; color:var(--green-deep); white-space:nowrap;}
.spec-row h3{font-size:1.15rem; letter-spacing:-.01em;}
.spec-row p{font-size:.95rem; color:var(--ink-2); margin-top:6px;}
.spec-aside{position:sticky; top:100px; background:var(--ink); color:var(--paper); padding:38px; border-radius:3px;}
.spec-aside .eyebrow{color:#A9E27A;}
.spec-aside h3{color:#F4F7F3; font-size:1.9rem; margin:14px 0 10px;}
.spec-aside p{color:rgba(244,247,243,.72); font-size:1rem;}
.spec-stats{display:flex; gap:30px; margin-top:26px; flex-wrap:wrap;}
.spec-stats .s b{font-family:var(--serif); font-size:2.2rem; color:#F4F7F3; display:block; line-height:1;}
.spec-stats .s span{font-size:12px; color:rgba(244,247,243,.6); letter-spacing:.03em;}
@media (max-width:840px){.spec{grid-template-columns:1fr; gap:40px;} .spec-aside{position:static;}}

/* process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:s;}
.step{padding-top:22px; border-top:2px solid var(--ink);}
.step .num{counter-increment:s; font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--green-deep);}
.step .num::before{content:"0" counter(s);}
.step h3{font-size:1.2rem; margin:12px 0 8px;}
.step p{font-size:.93rem; color:var(--ink-2);}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:440px){.steps{grid-template-columns:1fr;}}

/* testimonial */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.quote{background:var(--paper); padding:34px;}
.quote .st{color:var(--magenta-deep); letter-spacing:2px; font-size:14px;}
.quote blockquote{font-family:var(--serif); font-size:1.22rem; line-height:1.45; margin:16px 0 20px;}
.quote .who b{display:block; font-size:.95rem;} .quote .who span{font-size:.82rem; color:var(--ink-2);}
@media (max-width:820px){.quotes{grid-template-columns:1fr;}}

/* cta band */
.cta{background:var(--ink); color:#F1F5F1;}
.cta .wrap{padding:74px 32px; display:grid; grid-template-columns:1.3fr .7fr; gap:44px; align-items:center;}
.cta h2{font-size:clamp(2.1rem,4.2vw,3.2rem); color:#F4F7F3;}
.cta p{color:rgba(241,245,241,.82); margin-top:16px; font-size:1.1rem;}
.cta .card{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); border-radius:3px; padding:26px; display:flex; flex-direction:column; gap:14px;}
.cta .card .row{display:flex; gap:12px; align-items:center;}
.cta .card .row svg{flex:none; color:#BFE0CD;}
.cta .card .row b{display:block; font-size:.98rem;} .cta .card .row span{font-size:.82rem; color:rgba(241,245,241,.65);}
.cta .btn-light{background:var(--green); color:var(--ink); margin-top:4px;}
.cta .btn-light:hover{background:var(--green-2); transform:translateY(-2px);}
@media (max-width:780px){.cta .wrap{grid-template-columns:1fr; padding:48px 32px;}}

/* footer */
.site-footer{padding:64px 0 40px;}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:36px; border-bottom:1px solid var(--line);}
.foot h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin:0 0 16px; font-weight:700;}
.foot a, .foot p{display:block; color:var(--ink-2); font-size:.95rem; margin-bottom:9px;}
.foot a:hover{color:var(--green-deep);}
.foot-brand p{max-width:32ch;}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; padding-top:22px; font-size:.84rem; color:var(--ink-2); flex-wrap:wrap;}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.foot{grid-template-columns:1fr;}}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}
:focus-visible{outline:2px solid var(--green-deep); outline-offset:3px;}

/* ============ single project ============ */
.proj-single{padding-bottom:20px;}
.breadcrumb{padding:22px 0; font-size:13px; color:var(--ink-2); display:flex; gap:8px; align-items:center;}
.breadcrumb a:hover{color:var(--green-deep);}
.breadcrumb .sep{opacity:.5;}
.proj-hero{position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/8; background:var(--band) center/cover no-repeat; display:flex; align-items:flex-end; padding:38px;}
.proj-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(28,30,25,.78),transparent 60%);}
.proj-hero.noimg{aspect-ratio:16/6;}
.proj-hero .h{position:relative; z-index:1;}
.proj-hero .tag{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff;}
.proj-hero h1{color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin-top:8px; max-width:20ch;}
.proj-hero.noimg::after{display:none;}
.proj-hero.noimg{background:var(--ink);}
.proj-hero.noimg .tag{color:#A9E27A;}
.proj-hero.noimg h1{color:#F4F7F3;}

.proj-layout{display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; padding:56px 0 20px;}
.proj-body{font-size:1.08rem; color:var(--ink);}
.proj-body .lead{font-size:1.3rem; line-height:1.5; color:var(--ink); margin-bottom:26px;}
.proj-body p{margin-bottom:18px; color:var(--ink-2);}
.proj-aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:14px;}
.facts{border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.facts .f{display:flex; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); font-size:.92rem;}
.facts .f:last-child{border-bottom:0;}
.facts .f span{color:var(--ink-2);} .facts .f b{font-weight:700; text-align:right;}
.aside-cta{background:var(--ink); color:var(--paper); border-radius:4px; padding:24px;}
.aside-cta h3{color:#F4F7F3; font-size:1.25rem;}
.aside-cta p{color:rgba(244,247,243,.72); font-size:.92rem; margin:8px 0 16px;}
.aside-cta .btn{width:100%; justify-content:center;}
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:30px;}
.gallery-grid a{display:block; border-radius:4px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/2;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.gallery-grid a:hover img{transform:scale(1.04);}
.gallery-grid .wide{grid-column:1 / -1; aspect-ratio:16/7;}
@media (max-width:820px){.proj-layout{grid-template-columns:1fr; gap:34px;} .proj-aside{position:static;}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}

.more-work{border-top:1px solid var(--line); margin-top:40px;}

/* ============ contact page ============ */
.contact-hero{border-bottom:1px solid var(--line);}
.contact-hero .wrap{padding:66px 32px 40px;}
.contact-hero.has-hero-img .wrap{padding-top:0; padding-bottom:0;}
.contact-hero h1{font-size:clamp(2.4rem,5vw,4rem);}
.contact-hero h1 .g{color:var(--green-deep);}
.contact-hero p{color:var(--ink-2); font-size:1.2rem; margin-top:18px; max-width:48ch;}
.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:64px 0; align-items:start;}
.contact-info{display:flex; flex-direction:column; gap:2px;}
.ci-row{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--line); align-items:flex-start;}
.ci-row:last-of-type{border-bottom:1px solid var(--line);}
.ci-row .ic{width:44px; height:44px; border-radius:3px; background:var(--band); color:var(--green-deep); display:flex; align-items:center; justify-content:center;}
.ci-row h3{font-size:1.05rem;}
.ci-row a, .ci-row p{color:var(--ink-2); font-size:.98rem; margin-top:3px; display:block;}
.ci-row a:hover{color:var(--green-deep);}
.hours{margin-top:26px; border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.hours .hr{display:flex; justify-content:space-between; padding:12px 18px; font-size:.92rem; border-bottom:1px solid var(--line);}
.hours .hr:last-child{border-bottom:0;} .hours .hr span{color:var(--ink-2);} .hours .hr b{font-weight:700;}
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:34px;}
.form-card h2{font-size:1.7rem; margin-bottom:6px;}
.form-card .fc-sub{color:var(--ink-2); font-size:.96rem; margin-bottom:24px;}
.ff{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.ff label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);}
.ff input, .ff select, .ff textarea{font-family:inherit; font-size:1rem; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:3px; background:var(--paper); color:var(--ink); transition:border-color .15s;}
.ff input:focus, .ff select:focus, .ff textarea:focus{outline:none; border-color:var(--green);}
.ff textarea{resize:vertical; min-height:120px;}
.ff-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-card .btn-primary{width:100%; justify-content:center; margin-top:6px;}
.form-note{font-size:.82rem; color:var(--ink-2); margin-top:14px; text-align:center;}
.map-embed{border-top:1px solid var(--line); border-bottom:1px solid var(--line); line-height:0;}
.map-embed iframe{width:100%; height:420px; border:0; display:block; filter:grayscale(.2);}
@media (max-width:820px){.contact-split{grid-template-columns:1fr; gap:36px; padding:44px 0;}}
@media (max-width:480px){.ff-row{grid-template-columns:1fr;}}

/* ============ about page ============ */
.about-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
/* The grit reads across the whole band as it does on the home page. At .5 it
   was heavier over the photo than the home page equivalent (white at .12 on a
   dark image), so it is dialled back to sit as texture rather than an overlay. */
/* One grid rule for every hero that sits on the light background, so they all
   carry the same texture. The home page keeps its own (white on a dark photo). */
.about-hero .grid-bg,
.svc-hero .grid-bg,
.contact-hero .grid-bg,
.projects-head .grid-bg{
  position:absolute; inset:0; opacity:.34; color:var(--line); z-index:1; pointer-events:none;}
.about-hero.has-hero-img .wrap{padding-top:0; padding-bottom:0;}
.about-hero.has-hero-img h1{max-width:none;}
/* .page-head is shared with blog, search and generic pages, so the split
   treatment is scoped to the archive only and its grey band is dropped so the
   photo fade matches the other heroes. */
.projects-head.has-hero-img{background:var(--paper);}
.projects-head.has-hero-img .wrap{padding-top:0; padding-bottom:0;}
.about-hero .wrap{position:relative; padding:70px 32px 46px;}
.about-hero .eyebrow{color:var(--magenta-deep);}
.about-hero h1{font-size:clamp(2.6rem,6vw,4.6rem); margin-top:16px; max-width:16ch;}
.about-hero h1 .g{color:var(--green-deep);}
.about-hero p{color:var(--ink-2); font-size:1.25rem; margin-top:22px; max-width:46ch;}

.about-figure{position:relative; margin-top:44px; border-radius:4px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/6.4; background:var(--band) center/cover no-repeat;}

.story{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.story .lead{font-size:1.45rem; line-height:1.4; letter-spacing:-.01em;}
.story .lead .g{color:var(--green-deep);}
.story .body p{color:var(--ink-2); font-size:1.05rem; margin-bottom:18px;}
.story .body p:last-child{margin-bottom:0;}
.pull{border-left:3px solid var(--green); padding:6px 0 6px 22px; margin:28px 0; font-family:var(--serif);
  font-size:1.35rem; line-height:1.4; color:var(--ink);}
@media (max-width:820px){.story{grid-template-columns:1fr; gap:30px;}}

.facts-band{background:var(--ink); color:var(--paper);}
.facts-band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:0;}
.facts-band .fb{padding:44px 30px; border-right:1px solid rgba(255,255,255,.12);}
.facts-band .fb:last-child{border-right:0;}
.facts-band .fb b{font-family:var(--serif); font-size:2.6rem; font-weight:400; color:#F4F7F3; display:block; line-height:1;}
.facts-band .fb .g{color:#A9E27A;}
.facts-band .fb span{display:block; margin-top:10px; font-size:.92rem; color:rgba(244,247,243,.7);}
@media (max-width:820px){.facts-band .wrap{grid-template-columns:1fr 1fr;} .facts-band .fb{border-bottom:1px solid rgba(255,255,255,.12);} .facts-band .fb:nth-child(odd){border-right:1px solid rgba(255,255,255,.12);} .facts-band .fb:nth-child(even){border-right:0;}}
@media (max-width:460px){.facts-band .wrap{grid-template-columns:1fr;} .facts-band .fb{border-right:0 !important;}}

.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.tm{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column;}
.tm .photo{aspect-ratio:4/5; background:var(--band) center 20%/cover no-repeat;}
.tm .tm-body{padding:24px 26px 28px;}
.tm .role{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep);}
.tm.two .role{color:var(--magenta-deep);}
.tm h3{font-size:1.5rem; margin:6px 0 12px;}
.tm p{font-size:.98rem; color:var(--ink-2); line-height:1.6;}
@media (max-width:560px){.team-grid{grid-template-columns:1fr;} .tm .photo{aspect-ratio:4/4;}}

.values{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
.val{border-top:2px solid var(--ink); padding-top:22px;}
.val .ic{color:var(--green-deep); margin-bottom:14px;}
.val h3{font-size:1.2rem;}
.val p{color:var(--ink-2); font-size:.96rem; margin-top:8px;}
@media (max-width:720px){.values{grid-template-columns:1fr;}}

.about-band-img{height:420px; background:var(--band) center/cover no-repeat; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ============ page head + generic page/prose ============ */
.page-head{border-bottom:1px solid var(--line); background:var(--band);}
.page-head .wrap{padding:60px 32px 46px;}
.page-head .eyebrow{color:var(--magenta-deep);}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem); margin-top:14px;}
.page-head h1 .g{color:var(--green-deep);}
.page-head p{color:var(--ink-2); font-size:1.15rem; margin-top:16px; max-width:52ch;}

.prose{max-width:72ch; margin:0 auto; padding:64px 0;}
.prose h2{font-size:1.8rem; margin:34px 0 14px;}
.prose h3{font-size:1.35rem; margin:26px 0 10px;}
.prose p{margin-bottom:18px; color:var(--ink); font-size:1.08rem;}
.prose ul,.prose ol{color:var(--ink-2); margin:0 0 18px 1.1em; padding:0;}
.prose li{margin-bottom:8px;}
.prose img{border-radius:4px; margin:20px 0;}
.prose a{color:var(--green-deep); text-decoration:underline; text-underline-offset:3px;}
.prose blockquote{border-left:3px solid var(--green); padding:6px 0 6px 22px; margin:26px 0; font-family:var(--serif); font-size:1.3rem; color:var(--ink);}

/* archive intro + count */
.archive-intro{padding-top:56px;}
.archive-count{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:26px;}

/* pagination */
.pagination{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:44px 0 0;}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:3px; font-weight:700; font-size:.95rem; color:var(--ink); background:var(--surface);}
.pagination .page-numbers.current{background:var(--green); border-color:var(--green); color:var(--ink);}
.pagination a.page-numbers:hover{border-color:var(--green);}

/* 404 / empty */
.center-state{text-align:center; padding:110px 0;}
.center-state h1{font-size:clamp(3rem,8vw,6rem); color:var(--green-deep);}
.center-state h2{font-size:1.6rem; margin:10px 0 14px;}
.center-state p{color:var(--ink-2); max-width:46ch; margin:0 auto 26px;}

/* blog post */
.post-single{padding:20px 0 0;}
.post-single .post-hero{aspect-ratio:16/7; background:var(--band) center/cover no-repeat; border-radius:4px; border:1px solid var(--line); margin-bottom:34px;}
.post-meta{font-size:13px; letter-spacing:.06em; color:var(--ink-2); margin-bottom:8px; text-transform:uppercase;}

/* ---------- services page ---------- */

.svc-page{overflow-x:hidden;}

/* hero: copy left, photo bleeding off the right edge */
.svc-hero,
.contact-hero.has-hero-img,
.about-hero.has-hero-img,
.projects-head.has-hero-img{position:relative; background:var(--paper); border-bottom:1px solid var(--line);}
.svc-hero__media,
.contact-hero__media,
.about-hero__media,
.projects-head__media{position:absolute; inset:0 0 0 auto; width:56%; height:100%;}
.svc-hero__media img,
.contact-hero__media img,
.about-hero__media img,
.projects-head__media img{width:100%; height:100%; object-fit:cover; display:block;}
.svc-hero__media::after,
.contact-hero__media::after,
.about-hero__media::after,
.projects-head__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(247,248,245,.92) 22%,
    rgba(247,248,245,.45) 46%, rgba(247,248,245,0) 72%);}
.svc-hero__inner,
.contact-hero__inner,
.about-hero__inner,
.projects-head__inner{position:relative; z-index:2; padding:70px 0 56px; max-width:620px;}
.svc-hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem); letter-spacing:-.03em; margin-top:16px;}
.svc-hero__lead{color:var(--ink-2); font-size:1.08rem; margin-top:20px; max-width:46ch;}
.svc-hero__rule{display:block; width:56px; height:3px; background:var(--green); margin:28px 0 0;}

.svc-creds{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:34px;}
.svc-creds li{display:flex; align-items:center; gap:12px;}
.svc-creds .ic{width:34px; height:34px; flex:none; color:var(--green-deep);}
.svc-creds .ic svg{width:100%; height:100%; display:block;}
.svc-creds b{display:block; font-size:.95rem; letter-spacing:-.01em;}
.svc-creds span span{display:block; font-size:.8rem; color:var(--ink-2); margin-top:1px;}

/* seven-across strip, dividers drawn with the grid gap */
/* Dividers are drawn on the cells, not with the grid gap. Gap-drawn lines mean
   any empty track in the last row shows up as a grey block. */
.svc-strip{display:grid; grid-template-columns:repeat(7,1fr); gap:0;
  background:var(--surface); border-bottom:1px solid var(--line);}
.svc-cell{background:var(--surface); display:flex; flex-direction:column;
  border-right:1px solid var(--line); transition:background .18s ease;}
.svc-cell:hover{background:var(--paper);}
.svc-cell__body{padding:26px 20px 22px; flex:1;}
.svc-cell__num{font-size:1.15rem; font-weight:700; color:var(--green-deep); letter-spacing:-.02em;}
.svc-cell__ic{display:block; width:34px; height:34px; margin:14px 0 16px; color:var(--ink);}
.svc-cell__ic svg{width:100%; height:100%; display:block;}
.svc-cell h2{font-size:1.06rem; letter-spacing:-.02em; line-height:1.2;}
.svc-cell p{font-size:.88rem; color:var(--ink-2); margin-top:10px; line-height:1.55;}
.svc-cell__media{margin-top:auto;}
.svc-cell__media img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}

.btn-dark{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-dark:hover{background:#000; color:#fff; transform:translateY(-2px);}
.btn-dark svg{margin-left:2px;}

/* 7 across only on genuinely wide screens; at 1280 the cards get so narrow
   the copy wraps to six short lines each. */
@media (max-width:1400px){ .svc-strip{grid-template-columns:repeat(4,1fr);} }
@media (max-width:1080px){
  .svc-strip{grid-template-columns:repeat(3,1fr);}
  .svc-hero__media,
  .contact-hero__media,
  .about-hero__media,
  .projects-head__media{width:46%;}
  .svc-hero__media::after,
  .contact-hero__media::after,
  .about-hero__media::after,
  .projects-head__media::after{background:linear-gradient(90deg, var(--paper) 0%,
    rgba(247,248,245,.9) 30%, rgba(247,248,245,0) 85%);}
}
@media (max-width:860px){
  .svc-strip{grid-template-columns:repeat(2,1fr);}
  .svc-hero__media,
  .contact-hero__media,
  .about-hero__media,
  .projects-head__media{position:relative; width:100%; height:230px;}
  .svc-hero__media::after,
  .contact-hero__media::after,
  .about-hero__media::after,
  .projects-head__media::after{background:linear-gradient(0deg, var(--paper), rgba(247,248,245,0) 60%);}
  .svc-hero__inner,
  .contact-hero__inner,
  .about-hero__inner,
  .projects-head__inner{padding:34px 0 44px; max-width:none;}
  .svc-creds{gap:20px;}
}
@media (max-width:520px){ .svc-strip{grid-template-columns:1fr;} }

/* ---------- gallery lightbox ---------- */

.lb{position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(14,16,13,.975); padding:56px 72px;}
.lb.is-open{display:flex;}

.lb__stage{margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;}
.lb__stage img{max-width:100%; max-height:calc(100vh - 150px);
  width:auto; height:auto; display:block; border-radius:3px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);}
.lb__stage figcaption{color:rgba(247,248,245,.75); font-size:.9rem;
  text-align:center; max-width:70ch;}

.lb__close,.lb__nav{position:absolute; background:transparent; cursor:pointer;
  color:var(--paper); border:1px solid rgba(247,248,245,.28); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .16s ease, background .16s ease, color .16s ease;}
.lb__close:hover,.lb__nav:hover{border-color:var(--green); color:var(--green);
  background:rgba(93,202,0,.1);}

.lb__close{top:18px; right:18px; width:42px; height:42px; font-size:26px; line-height:1;}
.lb__nav{top:50%; transform:translateY(-50%); width:46px; height:64px; font-size:30px; line-height:1;}
.lb__prev{left:16px;}
.lb__next{right:16px;}
.lb__nav[hidden]{display:none;}

.lb__count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(247,248,245,.6); font-size:.82rem; letter-spacing:.08em;}

/* the grid anchors are now buttons in effect */
.gallery-grid a{cursor:zoom-in;}

@media (max-width:640px){
  .lb{padding:52px 12px;}
  .lb__nav{width:38px; height:52px; font-size:24px;}
  .lb__prev{left:6px;} .lb__next{right:6px;}
  .lb__stage img{max-height:calc(100vh - 170px);}
}
@media (prefers-reduced-motion:reduce){ .lb *{transition:none !important;} }

/* ---------- project film + gallery phases ---------- */

.gallery-head{display:flex; align-items:baseline; gap:12px; margin:38px 0 16px;
  padding-top:22px; border-top:1px solid var(--line);
  font-size:1.05rem; letter-spacing:-.01em;}
.gallery-head span{font-size:.78rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);}
.gallery-head + .gallery-grid{margin-top:0;}

/* 16:9 frame that works for an iframe or a self-hosted file alike */
.proj-film{position:relative; width:100%; aspect-ratio:16/9;
  background:#0C0E0B; border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-top:4px;}
.proj-film iframe,.proj-film video{position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;}

/* ---------- social links ---------- */

.socials{display:flex; gap:10px; list-style:none; margin:0; padding:0;}
.socials a{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:4px; color:var(--ink-2);
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;}
.socials a:hover{color:var(--green-deep); border-color:var(--green);
  background:rgba(93,202,0,.08); transform:translateY(-2px);}
.socials svg{display:block;}
@media (prefers-reduced-motion:reduce){ .socials a:hover{transform:none;} }

/* the footer sits on the light band, so the borders need to read against it */
.socials--foot{margin-top:18px;}
.socials--foot a{border-color:var(--line); color:var(--ink-2);}

.contact-social{margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
.contact-social h3{font-size:1.05rem; letter-spacing:-.01em;}
.contact-social p{color:var(--ink-2); font-size:.94rem; margin:8px 0 16px; max-width:44ch;}

/* Service cards are links. The anchor covers the whole cell rather than
   wrapping it, so the existing grid and hover rules are untouched. */
.svc-cell { position: relative; }
.svc-cell__link { position: absolute; inset: 0; z-index: 3; }
.svc-cell:hover .svc-cell__body h2 { text-decoration: underline; text-underline-offset: .18em; }
.svc-cell__link:focus-visible { outline: 3px solid var(--fd-green, #5DCA00); outline-offset: -3px; }

/* Contact Form 7 output.
   The rules above are scoped to .ff, which is the markup of the theme's own
   fallback form. CF7 wraps every control in <p><span class="wpcf7-form-control-wrap">
   instead, so none of them reached it and the real form on the live site rendered
   as unstyled browser defaults. These mirror the .ff rules onto CF7's markup. */
.form-card .wpcf7 form > p { margin: 0 0 16px; }
.form-card .wpcf7-form-control-wrap { display: block; }
.form-card .wpcf7 input[type="text"],
.form-card .wpcf7 input[type="email"],
.form-card .wpcf7 input[type="tel"],
.form-card .wpcf7 textarea {
	width: 100%; font-family: inherit; font-size: 1rem; padding: 13px 14px;
	border: 1.5px solid var(--line); border-radius: 3px;
	background: var(--paper); color: var(--ink); transition: border-color .15s;
}
.form-card .wpcf7 input[type="text"]:focus,
.form-card .wpcf7 input[type="email"]:focus,
.form-card .wpcf7 input[type="tel"]:focus,
.form-card .wpcf7 textarea:focus { outline: none; border-color: var(--green); }
.form-card .wpcf7 textarea { resize: vertical; min-height: 150px; display: block; }

/* Consent checkbox: CF7 nests it in label > span, which floats it away from the
   text without this. */
.form-card .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.form-card .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-card .wpcf7-acceptance input[type="checkbox"] { margin-top: .2em; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--green); }
.form-card .wpcf7-list-item-label { font-size: .92rem; line-height: 1.45; color: var(--ink-2); }

/* Submit, matching .btn .btn-primary */
.form-card .wpcf7-submit {
	display: block; width: 100%; font-family: inherit; font-size: 15px; font-weight: 700;
	padding: 14px 26px; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer;
	background: var(--green); color: var(--ink); margin-top: 6px;
	transition: transform .16s ease, background .16s ease;
}
.form-card .wpcf7-submit:hover { background: var(--green-2); transform: translateY(-2px); }

/* CF7's own status and error messages */
.form-card .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border-radius: 3px; font-size: .92rem; }
.form-card .wpcf7-not-valid-tip { color: #c0392b; font-size: .84rem; margin-top: 5px; }
.form-card .wpcf7 .wpcf7-spinner { margin: 10px auto 0; display: block; }