:root{
--ink:#16191C;--bone:#F5F1EA;--sand:#DCCFB9;--drift:#8B7B66;--brass:#8A6A36;--brass-light:#C9A96E;--slate:#3E4C55;--line:#E4DBCC;--muted:#4A4A48;
--wrap:1440px;--gutter:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.7;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brass)}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;margin:0;line-height:1.1}
h1{font-size:clamp(40px,6vw,84px)}
h2{font-size:clamp(32px,4.4vw,52px)}
h3{font-size:clamp(24px,2.4vw,30px)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);font-weight:500}
.rule{width:56px;height:1px;background:var(--brass);margin:14px 0}
.btn{display:inline-block;background:var(--brass);color:#fff;padding:18px 32px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border:1px solid var(--brass);transition:.25s}
.btn:hover{background:#6F5429;border-color:#6F5429;color:#fff}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid rgba(245,241,234,.8)}
.btn-ghost:hover{background:var(--bone);color:var(--ink)}
.link-underline{font-size:13px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--brass);padding-bottom:6px}
.section{padding:clamp(72px,10vw,160px) 0}
.section-tight{padding:clamp(56px,7vw,110px) 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,96px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
/* image slots */
.slot{position:relative;width:100%;background:var(--sand);display:flex;align-items:flex-end;padding:20px;color:#5E5343;font-size:11px;letter-spacing:.18em;text-transform:uppercase;overflow:hidden}
.slot--dark{background:var(--slate);color:#D6D2CA}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio-wide{aspect-ratio:16/9}
.ratio-tall{aspect-ratio:4/5}
.ratio-portrait{aspect-ratio:3/4}
/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;color:var(--bone)}
.site-header.solid{position:sticky;background:var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--gutter);border-bottom:1px solid rgba(245,241,234,.18);max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:16px;color:var(--bone)}
.brand svg{height:46px;width:auto;fill:currentColor}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:26px;letter-spacing:.2em;line-height:1;display:block}
.brand-sub{font-size:9px;letter-spacing:.42em;color:var(--sand);display:block;margin-top:4px}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.header-right{display:flex;align-items:center;gap:22px;font-size:14px;letter-spacing:.06em}
.nav-toggle{display:none;background:none;border:1px solid rgba(245,241,234,.5);color:var(--bone);padding:10px 14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
/* hero */
.hero{position:relative;min-height:min(860px,92vh);display:flex;flex-direction:column;justify-content:flex-end;background:#2B3339;color:var(--bone);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:rgba(12,16,20,.62)}
.hero-inner{position:relative;padding:0 var(--gutter) clamp(56px,8vw,120px);max-width:var(--wrap);margin:0 auto;width:100%}
.hero h1{margin:22px 0 20px;max-width:16ch}
.hero p.lede{font-size:clamp(17px,1.4vw,19px);max-width:600px;color:#E8E1D5}
.hero .eyebrow{color:var(--sand)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.hero-note{position:absolute;right:var(--gutter);bottom:36px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#B8B0A2}
/* trust */
.trust{background:var(--bone);padding:34px var(--gutter)}
.trust ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0 auto;padding:0;max-width:var(--wrap);text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#5E5343}
/* cards */
.card-project{display:flex;flex-direction:column;gap:16px}
.card-project .meta{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#6E6252}
.card-project h3{font-size:clamp(22px,2vw,30px)}
.card-project .specs{font-size:15px;color:var(--muted)}
.services{background:var(--ink);color:var(--bone)}
.service{border-top:1px solid var(--brass-light);padding:32px 32px 32px 0;display:flex;flex-direction:column;gap:14px;color:var(--bone)}
.service .num{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--brass-light)}
.service p{color:#C8C1B5;font-size:15px;line-height:1.65;margin:0}
.process{background:var(--bone)}
.step .n{font-family:'Cormorant Garamond',serif;font-size:56px;color:var(--brass);line-height:1;display:block;margin-bottom:10px}
.quote{text-align:center;max-width:960px;margin:0 auto}
.quote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(26px,3.4vw,42px);line-height:1.3}
.towns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:8px}
.towns a{border-bottom:1px solid var(--line);padding:16px 0;font-family:'Cormorant Garamond',serif;font-size:24px}
/* spec bar */
.specbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;margin:40px 0}
.specbar div span{display:block}
.specbar .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--drift);margin-bottom:6px}
.specbar .v{font-family:'Cormorant Garamond',serif;font-size:24px}
.prose{max-width:720px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gallery-grid figure{margin:0}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* cta + form */
.cta{background:var(--ink);color:var(--bone)}
.cta h2{margin-bottom:18px}
.cta p{color:#C8C1B5}
.cta .phone{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--bone);display:inline-block;margin-top:12px}
.form-embed{min-height:520px}
/* footer */
.site-footer{background:#0F1113;color:#B8B0A2;padding:72px var(--gutter) 36px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;max-width:var(--wrap);margin:0 auto}
.footer-grid h4{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-light);font-family:'Manrope',sans-serif;font-weight:600;margin-bottom:12px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-bottom{max-width:var(--wrap);margin:36px auto 0;border-top:1px solid #2A2E32;padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:12px;flex-wrap:wrap}
.site-footer a:hover{color:var(--brass-light)}
/* posts */
.post-body{max-width:760px;margin:0 auto}
.post-body h2{margin:1.6em 0 .4em}
.post-body h3{margin:1.4em 0 .3em}
.archive-head{padding:clamp(120px,16vw,220px) 0 clamp(40px,5vw,70px);background:var(--ink);color:var(--bone)}
.archive-head .eyebrow{color:var(--brass-light)}

/* ============================================ mobile (rewritten v1.2) */
html, body { overflow-x: hidden; max-width: 100%; }
.mobile-bar { display: none; }

@media (max-width: 1100px){
	.header-inner{ padding: 18px var(--gutter); gap: 16px; flex-wrap: nowrap; }
	.brand svg{ height: 38px; }
	.brand-name{ font-size: 20px; letter-spacing: .16em; white-space: nowrap; }
	.brand-sub{ font-size: 8px; letter-spacing: .3em; white-space: nowrap; }
	.header-right .btn{ padding: 13px 18px; font-size: 11px; letter-spacing: .14em; }
	.header-right{ gap: 14px; }
}

@media (max-width: 860px){
	.header-inner{ padding: 14px var(--gutter); }
	.brand{ gap: 10px; }
	.brand svg{ height: 32px; }
	.brand-name{ font-size: 17px; }
	.brand-sub{ display: none; }
	/* phone + big CTA move to the sticky bar at the bottom */
	.header-right > a{ display: none; }
	.nav-toggle{ display: block; padding: 9px 13px; font-size: 11px; }

	.hero{ min-height: 0; padding-top: 88px; }
	.hero-inner{ padding-bottom: 56px; }
	.hero h1{ font-size: clamp(30px, 8.6vw, 44px); max-width: 100%; }
	.hero p.lede{ font-size: 16px; }
	.hero-actions{ gap: 12px; margin-top: 24px; }
	.hero-actions .btn{ width: 100%; text-align: center; padding: 16px 20px; }
	.hero-note{ display: none; }

	.trust{ padding: 24px var(--gutter); }
	.trust ul{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 12px; font-size: 10px; letter-spacing: .14em; }

	.eyebrow{ font-size: 10px; letter-spacing: .26em; }
	.specbar{ gap: 18px; }
	.specbar .v{ font-size: 20px; }
	.site-footer{ padding: 48px var(--gutter) 90px; }
	.footer-bottom{ flex-direction: column; gap: 10px; }

	/* sticky call bar */
	.mobile-bar{
		display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		background: rgba(22,25,28,.92); backdrop-filter: blur(8px);
		border-top: 1px solid rgba(201,169,110,.35);
	}
	.mobile-bar a{
		display: flex; align-items: center; justify-content: center; gap: 8px;
		padding: 16px 10px; min-height: 56px; color: var(--bone);
		font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	}
	.mobile-bar a + a{ background: var(--brass); color: #fff; }
	body{ padding-bottom: 0; }
}

@media (max-width: 420px){
	.brand-name{ font-size: 15px; letter-spacing: .12em; }
	.brand svg{ height: 28px; }
	.nav-toggle{ padding: 8px 11px; letter-spacing: .12em; }
	.hero h1{ font-size: clamp(28px, 8.4vw, 36px); }
}

/* layout collapse (restored) */
@media (max-width: 1100px){
	.grid-3, .grid-4, .grid-5, .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.specbar{ grid-template-columns: repeat(3, minmax(0,1fr)); }
	.footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.nav{ display: none; }
	.nav.open{ display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); padding: 22px var(--gutter); }
	.nav.open ul{ flex-direction: column; gap: 18px; }
	.site-header.solid .nav.open{ border-top: 1px solid rgba(245,241,234,.18); }
}
@media (max-width: 860px){
	body{ font-size: 16px; }
	.grid-2, .grid-3, .grid-4, .grid-5, .gallery-grid, .towns{ grid-template-columns: 1fr; }
	.specbar{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.footer-grid{ grid-template-columns: 1fr; }
	.service{ padding-right: 0; }
	.section{ padding: 64px 0; }
	.section-tight{ padding: 52px 0; }
	.slot.ratio-portrait, .slot.ratio-tall{ aspect-ratio: 4/3; }
	.quote p{ font-size: 24px; }
	.step .n{ font-size: 44px; }
	.cta .phone{ font-size: 30px; }
}

/* ============================================ typography + header (v1.7)
   page.php and single.php put BOTH .wrap and .post-body on one element; the
   max-width override killed the container's centring, so headings sat at the
   1440 gutter and body copy at the viewport gutter — 144px apart. Keep
   .post-body as the container and constrain its children instead. */
.post-body{ max-width:var(--wrap); margin-left:auto; margin-right:auto }
.post-body > *{ max-width:70ch }
.prose{ max-width:70ch }

/* nav hard right, tight to the CTA */
.nav{ flex:1 1 auto; justify-content:flex-end }
.nav ul{ gap:28px; margin-right:10px }

/* the serif display face carries left side-bearing, so a flush-left H1 reads
   a few px right of the uppercase eyebrow above it */
.archive-head h1, .hero h1,
.single-vh_project .wrap > h1, .single-vh_community .wrap > h1,
.post-type-archive .wrap > h1{ margin-left:-.035em !important }
.archive-head .eyebrow{ margin-bottom:14px }

/* a real middle to the scale — 84px title to 17px body had nothing between */
.post-body p, .prose p{ font-size:18px; line-height:1.78; font-weight:400; color:#2A2E32; margin:0 0 1.15em }
.post-body > p:first-of-type, .prose > p:first-of-type{
	font-size:21px; line-height:1.62; font-weight:300; color:#16191C; margin-bottom:1.5em }
.post-body h2, .prose h2{
	font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(28px,2.6vw,36px);
	line-height:1.2; color:var(--ink); margin:2.4em 0 .5em; padding:0; border:0 }
.post-body h2:first-child, .prose h2:first-child{ margin-top:0 }
.post-body h3, .prose h3{
	font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; letter-spacing:.16em;
	text-transform:uppercase; color:var(--brass); margin:2em 0 .5em }
.post-body strong{ font-weight:600; color:var(--ink) }
.post-body ul, .post-body ol{ margin:0 0 1.25em 1.15em }
.post-body li{ margin-bottom:.45em; line-height:1.72 }
.post-body a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--sand) }
.post-body a:hover{ text-decoration-color:var(--brass) }

/* header geometry locked so nav length can never reflow the logo */
.site-header .header-inner{ min-height:104px; align-items:center }
.brand{ flex:0 0 auto; white-space:nowrap }
.brand-name, .brand-sub, .nav a{ white-space:nowrap }
.header-right{ flex:0 0 auto }
.archive-head{ padding-top:clamp(150px,13vw,190px); padding-bottom:clamp(48px,5vw,68px) }

@media (max-width:1240px){
	.site-header .header-inner{ min-height:92px }
	.nav a{ font-size:12px }
	.nav ul{ gap:20px; margin-right:8px }
}
@media (max-width:860px){
	.site-header .header-inner{ min-height:0 }
	.nav ul{ flex-wrap:wrap; margin-right:0 }
	.post-body > *, .prose{ max-width:100% }
	.post-body > p:first-of-type{ font-size:19px }
	.post-body h2{ margin:1.8em 0 .45em }
}

/* ============================================ project hero flush (v1.8) */
.project-hero{ padding-top:0 }
.single-vh_project article > section:first-child{ padding-top:0 !important }
.single-vh_project article > section:first-child .slot{ padding:0 }

/* ============================================ spacing + nav alignment (v1.9) */
/* .nav is a block element, so justify-content never applied. Make it a flex
   container above the mobile breakpoint only — below 1100px .nav is display:none
   and .nav.open is display:block, and both must keep winning. */
@media (min-width:1101px){
	.nav{ display:flex; align-items:center; justify-content:flex-end; flex:1 1 auto }
	.nav ul{ margin-left:auto; margin-right:10px; gap:30px }
}
/* vertical rhythm: the old values resolved to 160px top AND bottom on every
   section at desktop width, which read as dead space rather than breathing room */
.section{ padding:clamp(56px,5.5vw,88px) 0 }
.section-tight{ padding:clamp(44px,4vw,64px) 0 }
.archive-head{ padding-top:clamp(64px,6vw,92px); padding-bottom:clamp(36px,3.5vw,52px) }
@media (max-width:860px){
	.section{ padding:52px 0 }
	.section-tight{ padding:40px 0 }
	.archive-head{ padding-top:56px; padding-bottom:32px }
}

/* ============================================ condensed sticky header (v2.0)
 * The header is fixed on every page so the nav and CTA stay reachable while
 * scrolling a long gallery. It condenses past 80px. Because it is fixed it is
 * out of flow, so the first block of each template starts at y=0 and sits
 * behind it: .archive-head absorbs the height in its top padding (its dark
 * background matches the header, so the two read as one band), while .hero and
 * .project-hero are full-bleed images the header is meant to overlay.
 * --header-h is measured by JS on load and resize; these are the fallbacks. */
:root{ --header-h:117px }
@media (max-width:1240px){ :root{ --header-h:105px } }
@media (max-width:860px){ :root{ --header-h:72px } }

.site-header{ position:fixed; z-index:45 }
/* background switches instantly, not faded: on the home page the block below
   the hero is light, and a half-faded dark bar puts white nav text on a pale
   background for the length of the transition */
.site-header.solid{ position:fixed }
.site-header .header-inner{ transition:min-height .28s ease, padding-top .28s ease, padding-bottom .28s ease }

.site-header.is-condensed{ background:var(--ink) }
.site-header.is-condensed .header-inner{ min-height:64px; padding-top:10px; padding-bottom:10px }
.site-header.is-condensed .brand-sub{ opacity:0 }
.brand-sub{ transition:opacity .2s ease }
@media (max-width:860px){
	.site-header.is-condensed .header-inner{ min-height:0; padding-top:10px; padding-bottom:10px }
}

/* first block clears the fixed header */
.archive-head{ padding-top:calc(var(--header-h) + clamp(36px,4vw,56px)) }
/* the admin bar is itself fixed, so a fixed header must be offset by it —
   WordPress's html{margin-top} handles static/sticky headers but not fixed ones */
body.admin-bar .site-header{ top:32px }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px } }

/* ============================================ About page layout (v2.0)
 * .post-body clamps its children to 70ch for readability; .vh-wide opts a
 * block out of that so it can use the full column width. */
.post-body > .vh-wide{ max-width:none }

.vh-facts{
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
	padding:26px 0; margin:44px 0;
}
.vh-facts span{ display:block }
.vh-facts .k{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--drift); margin-bottom:8px }
.vh-facts .v{ font-family:'Cormorant Garamond',serif; font-size:clamp(20px,2vw,26px); color:var(--ink) }

.post-body .vh-split{
	display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
	gap:clamp(28px,4.5vw,72px); align-items:center; margin:clamp(48px,6vw,84px) 0;
}
.post-body .vh-split--text{ grid-template-columns:minmax(0,.7fr) minmax(0,1fr); align-items:start }
.post-body .vh-split .wp-block-column{ min-width:0 }
.post-body .vh-split p{ max-width:60ch }
.post-body .vh-split h2{ margin-top:12px }
.post-body .vh-split .wp-block-column > *:first-child{ margin-top:0 }

.vh-figure{ margin:0 }
.vh-figure img{ display:block; width:100%; height:auto }

.vh-quote{
	background:var(--ink); color:var(--bone); text-align:center;
	padding:clamp(40px,5vw,72px) clamp(28px,5vw,80px);
	margin:clamp(48px,6vw,84px) 0;
}
.vh-quote blockquote{ margin:0; padding:0; border:0 }
.vh-quote blockquote p{
	font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
	font-size:clamp(23px,2.7vw,34px); line-height:1.34; color:var(--bone);
	max-width:900px; margin:0 auto;
}
.vh-quote figcaption{
	margin-top:26px; font-size:11px; letter-spacing:.24em;
	text-transform:uppercase; color:var(--brass-light);
}

@media (max-width:860px){
	.vh-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px }
	.post-body .vh-split, .post-body .vh-split--text{ grid-template-columns:1fr; gap:26px }
}

/* ============================================ Process page (v2.0) */
/* "You bring / We carry" — the split the intro paragraph already describes */
.vh-duo{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	border:1px solid var(--line); margin:clamp(44px,5vw,72px) 0;
}
.vh-duo__col{ padding:clamp(26px,3vw,44px) }
.vh-duo__col + .vh-duo__col{ border-left:1px solid var(--line) }
.vh-duo__col--ink{ background:var(--ink); color:var(--bone); border-left-color:var(--ink) }
.vh-duo__col--ink .eyebrow{ color:var(--brass-light) }
.vh-duo ul{ list-style:none; margin:18px 0 0; padding:0 }
.vh-duo li{ position:relative; padding-left:24px; margin:0 0 13px; font-size:16px; line-height:1.6 }
.vh-duo li:last-child{ margin-bottom:0 }
.vh-duo li::before{ content:""; position:absolute; left:0; top:.68em; width:10px; height:1px; background:var(--brass) }
.vh-duo__col--ink li::before{ background:var(--brass-light) }

/* Numbered rail. The numerals are CSS counters, so the step headings stay
   plain editable text and renumber themselves if a step is added or moved.
   The connecting line runs behind the numerals and is masked by their
   background, which is what gives the ticked-timeline look. */
.vh-steps{ counter-reset:vhstep; position:relative; margin:clamp(48px,6vw,84px) 0 }
.vh-steps::before{ content:""; position:absolute; left:22px; top:12px; bottom:16px; width:1px; background:var(--line) }
.vh-steps h2{
	counter-increment:vhstep; position:relative;
	padding-left:86px; margin:0 0 .4em; font-size:clamp(25px,2.3vw,31px);
}
.vh-steps h2::before{
	content:counter(vhstep,decimal-leading-zero);
	position:absolute; left:0; top:-.12em; width:44px; text-align:center;
	font-family:'Cormorant Garamond',serif; font-size:40px; line-height:1.1;
	color:var(--brass); background:#fff; padding:4px 0 8px;
}
.vh-steps p{ padding-left:86px; margin:0 0 clamp(34px,4vw,54px); max-width:66ch }
.vh-steps > *:last-child{ margin-bottom:0 }

.vh-figure--wide img{ width:100%; height:auto }

@media (max-width:860px){
	.vh-duo{ grid-template-columns:1fr }
	.vh-duo__col + .vh-duo__col{ border-left:0; border-top:1px solid var(--line) }
	.vh-steps::before{ left:16px }
	.vh-steps h2{ padding-left:56px; font-size:23px }
	.vh-steps h2::before{ font-size:30px; width:32px }
	.vh-steps p{ padding-left:56px }
}

/* ============================================ FAQ page (v2.1) */
.vh-faq{ margin:clamp(40px,5vw,64px) 0 }
.vh-faq__item{ border-top:1px solid var(--line); padding:clamp(24px,3vw,34px) 0 }
.vh-faq__item:last-child{ border-bottom:1px solid var(--line) }
.post-body .vh-faq h2{
	font-family:'Cormorant Garamond',serif; font-weight:400;
	font-size:clamp(22px,2.1vw,28px); line-height:1.25; color:var(--ink);
	margin:0 0 .5em; padding:0; border:0;
}
.post-body .vh-faq p{ margin:0; max-width:74ch; color:var(--muted) }

/* ============================================ service pages (v2.2) */
.vh-links{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:clamp(26px,3.2vw,40px) 0 }
.vh-links a{
	display:block; border:1px solid var(--line); padding:18px 20px;
	font-family:'Cormorant Garamond',serif; font-size:20px; line-height:1.25;
	color:var(--ink); transition:border-color .2s ease, color .2s ease;
}
.vh-links a:hover{ border-color:var(--brass); color:var(--brass) }
.vh-links a span{
	display:block; font-family:'Manrope',sans-serif; font-size:10px;
	letter-spacing:.22em; text-transform:uppercase; color:var(--drift); margin-bottom:8px;
}
.vh-links--towns{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.vh-links--towns a{ font-size:18px }
@media (max-width:1100px){ .vh-links--towns{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:860px){ .vh-links, .vh-links--towns{ grid-template-columns:1fr } }

/* ============================================ nav dropdown (v2.2) */
@media (min-width:1101px){
	.nav li{ position:relative }
	.nav .sub-menu{
		display:block; position:absolute; top:100%; left:-18px; min-width:236px;
		background:var(--ink); border:1px solid rgba(245,241,234,.14);
		list-style:none; margin:0; padding:10px 0; z-index:60;
		opacity:0; visibility:hidden; transform:translateY(6px);
		transition:opacity .18s ease, transform .18s ease, visibility .18s;
	}
	.nav li:hover > .sub-menu,
	.nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none }
	.nav .sub-menu li{ display:block }
	.nav .sub-menu a{ display:block; padding:11px 18px; font-size:11px; letter-spacing:.14em; white-space:nowrap }
	.nav .sub-menu a:hover{ color:var(--brass-light) }
	.nav .menu-item-has-children > a::after{
		content:""; display:inline-block; width:4px; height:4px; margin-left:9px;
		border-right:1px solid currentColor; border-bottom:1px solid currentColor;
		transform:translateY(-2px) rotate(45deg);
	}
}
/* The caret button is created by the header script; it exists only to collapse
 * submenus on mobile, so it stays out of the way at desktop widths. */
.nav-sub-toggle{ display:none }

@media (max-width:1100px){
	/* link and caret share the first row, the submenu wraps onto the next */
	.nav.open li.menu-item-has-children{
		display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between }
	.nav.open li.menu-item-has-children > a{ flex:1 1 auto }

	.nav-sub-toggle{
		display:inline-flex; align-items:center; justify-content:center;
		flex:0 0 auto; width:44px; height:44px; margin:-11px -10px -11px 0;
		padding:0; border:0; background:none; color:inherit; cursor:pointer;
		-webkit-tap-highlight-color:transparent }
	.nav-sub-caret{
		display:block; width:8px; height:8px;
		border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
		transform:translateY(-3px) rotate(45deg); transition:transform .2s ease }
	.nav-sub-toggle:focus-visible{ outline:1px solid var(--brass-light); outline-offset:2px }
	.is-open > .nav-sub-toggle{ color:var(--brass-light) }
	.is-open > .nav-sub-toggle .nav-sub-caret{ transform:translateY(1px) rotate(-135deg) }

	.nav.open .sub-menu{
		display:none; flex:0 0 100%;
		list-style:none; margin:14px 0 2px 16px; padding:0 }
	.nav.open li.menu-item-has-children.is-open > .sub-menu{ display:block }
	.nav.open .sub-menu li{ margin-bottom:10px }
	.nav.open .sub-menu a{ font-size:12px; opacity:.85 }
}
.varga-form .varga-opt{ color:var(--drift); font-weight:400; text-transform:none; letter-spacing:0 }

/* ============================================ enquiry form (v2.6)
 * The form had no CSS at all: browser defaults put the labels inline with
 * white boxes and left the honeypot visible on the page. It only ever renders
 * inside the dark .cta band, so the fields are drawn as hairline underlines
 * rather than filled boxes — white input chrome on near-black reads as broken.
 * The autofill rule matters: without it Chrome repaints the field white.
 */
.varga-hp{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }

.varga-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 28px }
.varga-span{ grid-column:1 / -1 }

.varga-form label{ display:block;
	font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1.2 }
.varga-form .varga-opt{ font-size:12px; font-weight:400; letter-spacing:.01em; text-transform:none }

.varga-form input,
.varga-form select,
.varga-form textarea{
	display:block; width:100%; box-sizing:border-box;
	font:inherit; font-size:16px; line-height:1.45; letter-spacing:0; text-transform:none;
	padding:9px 0 11px; margin:9px 0 0;
	border:0; border-bottom:1px solid; border-radius:0; background:transparent;
	appearance:none; -webkit-appearance:none;
	transition:border-color .2s ease }
.varga-form textarea{ min-height:92px; resize:vertical }
.varga-form select{ padding-right:26px; background-repeat:no-repeat;
	background-position:right 2px center; background-size:10px 6px; cursor:pointer }
.varga-form input:focus,
.varga-form select:focus,
.varga-form textarea:focus{ outline:none; border-bottom-width:2px; padding-bottom:10px }

.varga-form button[type="submit"]{ margin-top:34px }
.varga-form-note{ margin:16px 0 0; font-size:13px; line-height:1.6 }
.varga-form-error{ margin:0 0 20px; padding:12px 16px; font-size:14px }
.varga-form-done{ padding:28px 30px }
.varga-form-done p{ margin:0 }

/* colour — the form lives in the dark CTA band */
.cta .varga-form label{ color:var(--brass-light) }
.cta .varga-form .varga-opt{ color:var(--drift) }
.cta .varga-form input,
.cta .varga-form select,
.cta .varga-form textarea{ color:var(--bone); border-bottom-color:rgba(245,241,234,.28) }
.cta .varga-form input::placeholder,
.cta .varga-form textarea::placeholder{ color:rgba(245,241,234,.38) }
.cta .varga-form input:hover,
.cta .varga-form select:hover,
.cta .varga-form textarea:hover{ border-bottom-color:rgba(245,241,234,.5) }
.cta .varga-form input:focus,
.cta .varga-form select:focus,
.cta .varga-form textarea:focus{ border-bottom-color:var(--brass-light) }
.cta .varga-form select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23C9A96E' stroke-width='1.3' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") }
/* the dropdown list itself is painted by the OS, so it needs readable colours */
.cta .varga-form select option{ color:var(--ink); background:var(--bone) }
/* Chrome paints autofilled fields white unless the inset shadow overrides it */
.cta .varga-form input:-webkit-autofill,
.cta .varga-form input:-webkit-autofill:hover,
.cta .varga-form input:-webkit-autofill:focus{
	-webkit-text-fill-color:var(--bone);
	-webkit-box-shadow:0 0 0 60px var(--ink) inset;
	caret-color:var(--bone) }
.cta .varga-form-note{ color:var(--drift) }
.cta .varga-form-error{ color:var(--bone); border:1px solid var(--brass-light); background:rgba(201,169,110,.14) }
.cta .varga-form-done{ color:var(--bone); border:1px solid rgba(245,241,234,.24); background:rgba(245,241,234,.05) }

@media (max-width:900px){
	.varga-grid{ grid-template-columns:1fr; gap:22px }
	.varga-form button[type="submit"]{ width:100%; margin-top:28px }
}

/* ============================================ page gutter (v2.6.3)
 * --gutter was a fixed 80px at every width, so on a 390px phone the content
 * column was only ~230px wide — about 60% of the screen, with 20% wasted on
 * each side. It now steps down with the viewport.
 */
@media (max-width:1240px){ :root{ --gutter:56px } }
@media (max-width:1024px){ :root{ --gutter:40px } }
@media (max-width:860px){  :root{ --gutter:32px } }
@media (max-width:560px){  :root{ --gutter:24px } }
@media (max-width:420px){  :root{ --gutter:20px } }

/* ============================================ team + build stages (v2.8)
 * .vh-team is the About page line-up; .vh-stages is the construction-phase
 * track on Process. Both opt out of the 70ch .post-body clamp with .vh-wide.
 */
.vh-team{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 36px; margin:14px 0 8px }
.vh-team__photo{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
	/* headshots are shot portrait with the face in the upper third, so a
	   centred square crop cuts the chin off — bias the crop upward */
	object-position:50% 22%;
	background:var(--line); margin:0 0 20px }
.vh-team h3{ margin:0; font-size:clamp(21px,2vw,25px); line-height:1.2 }
.vh-team__role{ margin:7px 0 14px; font-size:11px; font-weight:500;
	letter-spacing:.18em; text-transform:uppercase; color:var(--brass) }
.vh-team p:last-child{ margin:0; color:var(--muted); font-size:15px; line-height:1.65 }
@media (max-width:900px){
	.vh-team{ grid-template-columns:1fr; gap:34px; max-width:420px }
	.vh-team__photo{ margin-bottom:16px }
}

.vh-stages{ counter-reset:vhstage; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1px; background:var(--line); border:1px solid var(--line); margin:10px 0 4px }
.vh-stages > div{ counter-increment:vhstage; background:var(--bone); padding:28px 26px 30px }
.vh-stages h3{ margin:0 0 10px; font-size:17px; line-height:1.25; display:flex; align-items:baseline; gap:12px }
.vh-stages h3::before{ content:counter(vhstage,decimal-leading-zero);
	font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--brass); flex:0 0 auto }
.vh-stages p{ margin:0; color:var(--muted); font-size:14px; line-height:1.65 }
@media (max-width:1024px){ .vh-stages{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .vh-stages{ grid-template-columns:1fr } }