/* ==========================================================================
   Boxhill Joinery — NEW (2026) homepage. Scoped to body.bxn.
   Cormorant Garamond (serif display) + Jost (sans/UI). Values transcribed
   verbatim from the approved design (Boxhill-Joinery-Homepage.dc.html).
   ========================================================================== */
.bxn{
	--bg:#F4EFE8; --ink:#241F1A; --dark:#26221D; --foot:#1C1813; --alt:#EBE3D7;
	--brown:#7A5E42; --brown2:#9A7B58; --gold:#C9A87C; --cream:#FBF9F5;
	--line:#C9BCA9; --line2:#CFC5B6; --muted:#5C5346; --muted2:#8A8072; --ink2:#3A342B;
	--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
	--sans:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
	--wrap:1320px; --gut:clamp(22px,5vw,64px);
}

/* ---- Hide Salient's own chrome on the new design; use ours ---------------- */
body.bxn #header-outer,
body.bxn #header-space,
body.bxn #search-outer,
body.bxn #slide-out-widget-area,
body.bxn .slide-out-widget-area-toggle,
body.bxn #footer-outer,
body.bxn #footer-widgets,
body.bxn #to-top,
body.bxn .page-header-no-bg,
body.bxn #page-header-bg{ display:none !important; }

body.bxn{ overflow-x:hidden; background:var(--bg); }
body.bxn #ajax-content-wrap,
body.bxn .container-wrap{ margin:0 !important; padding:0 !important; background:var(--bg); border:0 !important; }
body.bxn #content{ margin:0 !important; padding:0 !important; }
body.bxn .container-wrap{ overflow:visible; }

/* ---- Base typography ----------------------------------------------------- */
.bxn, body.bxn{
	font-family:var(--sans); color:var(--ink); line-height:1.7; font-weight:300;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.bxn img{ display:block; max-width:100%; height:auto; }
.bxn ::selection{ background:var(--ink); color:var(--bg); }
.bxn a:focus-visible, .bxn button:focus-visible{ outline:2px solid var(--brown2); outline-offset:3px; }
html{ scroll-behavior:smooth; }

/* WPBakery element resets so spacing is ours, not the theme's */
.bxn .vc_custom_heading,
.bxn .wpb_text_column,
.bxn .wpb_text_column .wpb_wrapper > *:last-child,
.bxn .wpb_text_column p{ margin:0; }
.bxn .wpb_text_column p + p{ margin-top:1em; }

/* Section anchors clear the fixed header */
.bxn .bxn-section, .bxn #top, .bxn [id]{ scroll-margin-top:clamp(74px,8vw,96px); }

/* ==========================================================================
   Container system — full-bleed band + centred 1320 content.
   Background colour paints the padding area, so bands stay full width.
   ========================================================================== */
.bxn .bxn-section,
.bxn .bxn-band{
	position:relative;
	/* Full-bleed regardless of Salient's container.
	   The +2px / -1px is not decoration: `50%` resolves against the parent and `50vw`
	   against the viewport, so at window widths where those land on a half pixel the row
	   starts at x=0.5 and a hairline of the cream .container-wrap shows down the left and
	   right edges. Overshooting a pixel each side makes that impossible. Safe because
	   body.bxn already clips overflow-x. */
	width:calc(100vw + 2px); margin-left:calc(50% - 50vw - 1px);
	margin-bottom:0 !important;                            /* Salient's default 25px row margin = white gaps */
	/* content strip aligns exactly with the 1320 header/footer/hero container:
	   edge gutter = inner padding (gut) + the amount needed to centre a 1320 box. */
	padding-left:calc(var(--gut) + max(0px, 50vw - (var(--wrap) / 2)));
	padding-right:calc(var(--gut) + max(0px, 50vw - (var(--wrap) / 2)));
}
.bxn .bxn-herorow{ padding:0 !important; width:calc(100vw + 2px); margin-left:calc(50% - 50vw - 1px); margin-bottom:0 !important; }
.bxn .bxn-herorow .vc_column-inner,
.bxn .bxn-herorow .wpb_wrapper{ padding:0 !important; margin:0 !important; }

/* Keep Salient row backgrounds full-bleed under any padding */
.bxn .bxn-section > .row-bg-wrap{ left:0 !important; right:0 !important; width:100% !important; }

/* ==========================================================================
   Shared inline text pieces
   ========================================================================== */
.bxn .bxn-eyebrow{
	font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.32em;
	text-transform:uppercase; color:var(--brown2); line-height:1.5;
}
.bxn .bxn-eyebrow--gold{ color:var(--gold); }
.bxn .bxn-h{ font-family:var(--serif); font-weight:400; color:var(--ink); line-height:1.05; letter-spacing:0; }
.bxn .bxn-h2{ font-size:clamp(2rem,4.2vw,3.3rem); margin-top:18px; }
.bxn .bxn-h2--light{ color:var(--cream); }
.bxn .bxn-lead{ font-family:var(--sans); font-weight:300; font-size:1.05rem; color:var(--muted); margin-top:20px; max-width:52ch; }
.bxn .bxn-lead p{ font:inherit; color:inherit; }
.bxn .bxn-lead--light p, .bxn .bxn-lead--light{ color:rgba(251,249,245,.7); max-width:46ch; }

/* Text link (nectar_btn reset to a clean underline link).
   Hover = quiet luxury: ink text, an underline that draws itself in brown,
   and the arrow gliding right. No background, no shadow — Salient's accent
   hover box is explicitly killed on every state below. */
.bxn a.bxn-txtlink,
.bxn a.bxn-txtlink.nectar-button{
	position:relative; display:inline-flex; align-items:center; gap:11px; padding:0 0 6px; margin:0;
	background:none !important; background-color:transparent !important; border:0;
	border-bottom:1px solid var(--line) !important;
	border-radius:0 !important; box-shadow:none !important; min-width:0; line-height:1.2;
	font-family:var(--sans); font-weight:400; font-size:.8rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--brown) !important;
	transition:color .45s cubic-bezier(.2,.7,.2,1);
}
.bxn a.bxn-txtlink > span{ color:inherit !important; padding:0 !important; margin:0 !important; font:inherit !important; letter-spacing:inherit !important; background:none !important; }
.bxn a.bxn-txtlink::before{
	content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
	background:var(--brown); transform:scaleX(0); transform-origin:left;
	transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.bxn a.bxn-txtlink::after{ content:"\2192"; font-size:1.05em; line-height:1; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
body.bxn a.bxn-txtlink:hover,
body.bxn a.bxn-txtlink.nectar-button:hover,
body.bxn a.bxn-txtlink:focus,
body.bxn a.bxn-txtlink:active{
	background:none !important; background-color:transparent !important;
	box-shadow:none !important; color:var(--ink) !important; opacity:1 !important;
}
.bxn a.bxn-txtlink:hover::before{ transform:scaleX(1); }
.bxn a.bxn-txtlink:hover::after{ transform:translateX(5px); }

/* ==========================================================================
   HEADER (fixed, always solid)
   ========================================================================== */
/* Client request, Aug 2026: the header used to start transparent over the hero and turn
   cream on scroll (driven by bx-new.js). It is now solid at every scroll position, so the
   state vars below are set once here and bx-new.js no longer touches them. Because the bar
   is always opaque the old legibility scrim is gone too — nothing shows through it. */
.bxn-header{
	--hbg:rgba(244,239,232,.96); --hbc:#E4DBCE; --hbf:saturate(1.2) blur(12px);
	--navc:#241F1A; --navsub:#8A8072; --navb:#CBBEAB;
	--logofil:brightness(0);   /* the logo artwork is white — flip it dark on the cream bar */
	position:fixed; top:0; left:0; width:100%; z-index:1000;
	background:var(--hbg);
	border-bottom:1px solid var(--hbc);
	-webkit-backdrop-filter:var(--hbf); backdrop-filter:var(--hbf);
}
.bxn-header__in{
	position:relative;
	max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
	height:clamp(74px,8vw,96px); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.bxn-logo{ display:block; line-height:1; text-decoration:none; }
/* Site logo comes from Salient > Theme Options > Logo (one place to change it).
   The supplied logo is white artwork, so it sits as-is over the transparent header and the
   dark footer, and is flipped dark by --logofil once the header turns cream on scroll. */
.bxn-logo--img{ display:flex; align-items:center; }
.bxn .bxn-logo__img{ display:block; width:auto; height:clamp(46px,4.2vw,58px); filter:var(--logofil,none); }
.bxn .bxn-footer__logo{ display:block; width:auto; height:46px; }
.bxn-footer__brandlink{ display:inline-block; line-height:0; }
.bxn-logo__word{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.2vw,1.95rem); letter-spacing:.02em; color:var(--navc,#FBF9F5); transition:color .4s; }
.bxn-logo__sub{ display:block; font-family:var(--sans); font-weight:400; font-size:.6rem; letter-spacing:.46em; text-transform:uppercase; color:var(--navsub,rgba(251,249,245,.72)); margin-top:3px; padding-left:.46em; transition:color .4s; }
/* Nav is an editable WordPress menu: <nav.bxn-nav-wrap> > <ul.bxn-nav> > <li> > <a> (+ .sub-menu) */
.bxn-nav{ list-style:none !important; margin:0; padding:0; display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.bxn-nav li{ position:relative; margin:0; list-style:none !important; }
.bxn-nav li::before, .bxn-nav li::marker{ content:none !important; display:none !important; }
.bxn-nav a{
	font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
	color:var(--navc,#FBF9F5); opacity:.9; text-decoration:none; white-space:nowrap; transition:color .4s,opacity .3s,border-color .4s,background .3s;
}
.bxn-nav > li > a:hover{ opacity:1; }
.bxn-nav .menu-item-has-children > a::after{ content:"\25BE"; font-size:.62em; margin-left:7px; vertical-align:middle; opacity:.65; }
/* Services dropdown */
.bxn-nav .sub-menu{ list-style:none; margin:0; padding:9px 0; position:absolute; top:100%; left:-20px; min-width:214px; background:rgba(244,239,232,.98); -webkit-backdrop-filter:saturate(1.2) blur(12px); backdrop-filter:saturate(1.2) blur(12px); border:1px solid #E4DBCE; opacity:0; visibility:hidden; transform:translateY(9px); transition:opacity .3s,transform .3s,visibility .3s; z-index:20; }
.bxn-nav .menu-item-has-children:hover > .sub-menu,
.bxn-nav .menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.bxn-nav .sub-menu a{ display:block; padding:9px 24px; color:var(--ink) !important; opacity:.82; font-size:.72rem; }
.bxn-nav .sub-menu a:hover{ opacity:1; color:var(--brown) !important; background:rgba(154,123,88,.08); }
/* "Contact Us" CTA button */
.bxn-nav > li.bxn-nav__cta > a{ display:inline-flex; align-items:center; font-size:.75rem; border:1px solid var(--navb,rgba(255,255,255,.5)); padding:.72em 1.5em; opacity:1; }
.bxn-nav > li.bxn-nav__cta > a:hover{ background:rgba(154,123,88,.16); }
.bxn-burger{ display:none; }

/* ==========================================================================
   HERO (bx_hero_slider)
   ========================================================================== */
.bxn-hero{ position:relative; height:100vh; min-height:620px; width:100%; overflow:hidden; background:var(--dark); }
.bxn-hero__deck{ position:absolute; inset:0; }
.bxn-hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; }
.bxn-hero__slide.is-on{ opacity:1; }
.bxn-hero__img{ width:100%; height:100%; object-fit:cover; animation:bxzoom 16s ease-in-out infinite alternate; }
.bxn-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,19,14,.55),rgba(24,19,14,.1) 28%,rgba(24,19,14,.14) 52%,rgba(24,19,14,.8)); }
.bxn-hero__inner{ position:absolute; inset:0; display:flex; align-items:flex-end; }
.bxn-hero__grid.bxn-in{
	max-width:var(--wrap); width:100%; margin:0 auto; padding:0 var(--gut) clamp(46px,7vh,84px);
	display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.bxn-hero__lead{ animation:bxrise 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
/* .bxn prefix: must outrank the base .bxn .bxn-eyebrow (brown) — this sits on photography */
.bxn .bxn-eyebrow--hero{
	font-family:var(--sans); font-weight:400; font-size:clamp(.72rem,1.1vw,.82rem);
	letter-spacing:.34em; text-transform:uppercase; color:#E7D9C4;
	text-shadow:0 1px 2px rgba(15,10,5,.55), 0 2px 24px rgba(15,10,5,.5);
}
.bxn-hero__title{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,7.6vw,6.6rem); line-height:.95; letter-spacing:.005em; color:var(--cream); margin:clamp(12px,1.6vw,20px) 0 0; max-width:13ch; text-wrap:balance; text-shadow:0 2px 34px rgba(15,10,5,.35); }
.bxn-hero__side{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:236px; animation:bxrise 1.1s cubic-bezier(.2,.7,.2,1) .34s both; }
.bxn-hero__caption{ font-family:var(--sans); font-weight:400; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(251,249,245,.92); text-shadow:0 1px 12px rgba(15,10,5,.45); }
.bxn .bxn-hero__caplink{ color:inherit !important; text-decoration:none; border-bottom:1px solid rgba(251,249,245,.4); padding-bottom:1px; transition:border-color .35s; }
.bxn .bxn-hero__caplink:hover{ border-bottom-color:var(--gold); color:var(--cream) !important; }

/* Optional hero buttons (off by default; rendered only when enabled in the element) */
.bxn-hero__buttons{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3vw,40px); }
.bxn a.bxn-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
	padding:1.05em 2.1em; border:1px solid transparent; border-radius:0; text-decoration:none;
	transition:background .4s cubic-bezier(.2,.7,.2,1), color .4s, border-color .4s;
}
.bxn a.bxn-btn--solid{ background:var(--cream); color:var(--ink) !important; }
.bxn a.bxn-btn--solid:hover{ background:var(--gold); color:var(--ink) !important; }
.bxn a.bxn-btn--ghost{ background:transparent; color:var(--cream) !important; border-color:rgba(251,249,245,.5); }
.bxn a.bxn-btn--ghost:hover{ background:rgba(251,249,245,.12); border-color:var(--cream); color:var(--cream) !important; }
.bxn-hero__idx{ color:var(--gold); margin-right:10px; }
.bxn-hero__ctl{ display:flex; align-items:center; gap:22px; }
.bxn-hero__dots{ display:flex; align-items:center; gap:8px; }
.bxn-hero__dot{ width:10px; height:2px; background:#F4EFE8; opacity:.45; transition:width .4s ease,opacity .4s ease; }
.bxn-hero__dot.is-on{ width:28px; opacity:1; }
.bxn-hero__arrows{ display:flex; gap:8px; }
.bxn-hero__arrow{ width:46px; height:46px; border:1px solid rgba(251,249,245,.4); background:transparent; color:#F4EFE8; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:1.1rem; transition:background .3s,border-color .3s; }
.bxn-hero__arrow:hover{ background:rgba(251,249,245,.15); border-color:rgba(251,249,245,.7); }
.bxn-hero__cue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:1px; height:40px; background:linear-gradient(rgba(251,249,245,.7),rgba(251,249,245,0)); animation:bxcue 2.4s ease-in-out infinite; }

/* ==========================================================================
   INTRO
   ========================================================================== */
.bxn-intro{
	background:var(--bg); text-align:center;
	padding-top:clamp(120px,16vw,210px) !important; padding-bottom:clamp(120px,16vw,210px) !important;
	padding-left:calc(var(--gut) + max(0px, 50vw - 500px)); padding-right:calc(var(--gut) + max(0px, 50vw - 500px));
}
.bxn-intro .bxn-eyebrow{ margin:0 auto; }
.bxn .bxn-statement{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.28; letter-spacing:.005em; color:#2A241D; margin-top:26px; text-wrap:balance; }
.bxn-statement p{ font:inherit; color:inherit; }
.bxn-intro a.bxn-txtlink{ margin-top:38px; }
.bxn-txtlink--center{ justify-content:center; }

/* ==========================================================================
   HOW WE WORK (#work)
   ========================================================================== */
.bxn-work{ background:var(--alt); }
.bxn-work--head{ padding-top:clamp(70px,10vw,130px) !important; padding-bottom:0 !important; }
.bxn-work--head .bxn-eyebrow,
.bxn-work--head .bxn-h2,
.bxn-work--head .bxn-lead{ max-width:640px; }
.bxn-work--head .bxn-lead{ margin-top:20px; }
.bxn-cards-3{ padding-top:clamp(44px,5vw,68px) !important; padding-bottom:clamp(70px,10vw,130px) !important; }
.bxn-cards-3 .wpb_wrapper{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.2vw,34px); }

/* Work card */
.bxn-card{ display:flex; flex-direction:column; background:var(--bg); text-decoration:none; color:inherit; }
.bxn-card__media{ position:relative; overflow:hidden; }
/* aspect-ratio box → fill it with an absolutely-positioned cover image.
   NB the `.bxn ` prefix lifts specificity above the base `.bxn img{height:auto}`
   reset — without it, a replaced element keeps its intrinsic (short) height. */
.bxn .bxn-card__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.bxn .bxn-hero__img{ width:100% !important; height:100% !important; object-fit:cover; }
.bxn-card:hover .bxn-card__img{ transform:scale(1.05); }
.bxn-card__badge{ position:absolute; top:0; left:0; padding:14px 18px; font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); background:var(--gold); }
.bxn-card__body{ padding:26px 26px 30px; }
.bxn-card__body > *:first-child{ margin-top:0; }
.bxn-card__label{ font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brown2); }
.bxn-card__title{ font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--ink); margin:10px 0 0; line-height:1.1; }
.bxn-card__text{ font-family:var(--sans); font-weight:300; font-size:.98rem; color:var(--muted); margin:12px 0 0; line-height:1.65; }
.bxn-card__more{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-family:var(--sans); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown); }
.bxn-card__more span{ transition:transform .3s; }
.bxn-card:hover .bxn-card__more span{ transform:translateX(4px); }
.bxn-card--dark{ background:var(--dark); color:var(--cream); }
.bxn-card--dark .bxn-card__label{ color:var(--gold); }
.bxn-card--dark .bxn-card__title{ color:var(--cream); }
.bxn-card--dark .bxn-card__text{ color:rgba(251,249,245,.72); }
.bxn-card--dark .bxn-card__more{ color:#E7D9C4; }

/* ==========================================================================
   SELECTED WORK (#projects)
   ========================================================================== */
.bxn-projects{ background:var(--bg); }
.bxn-projects--head{ padding-top:clamp(80px,11vw,150px) !important; padding-bottom:0 !important; }
/* Centred since the "View all projects" link moved out of this row and below the grid.
   Two things pin it left and BOTH have to go: the row is a space-between flex line, and
   vc_custom_heading writes style="text-align:left" INLINE from its font_container setting —
   inline beats any selector, hence !important. */
.bxn-projects--head .wpb_wrapper{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:8px 20px; text-align:center; }
.bxn-projects--head .bxn-eyebrow{ flex:0 0 100%; }
.bxn .bxn-projects--head .bxn-eyebrow,
.bxn .bxn-projects--head .bxn-h2{ text-align:center !important; }
.bxn-projects--head .bxn-h2{ margin-top:18px; }
.bxn-projects--head a.bxn-txtlink{ margin-bottom:6px; }

.bxn-tile{ display:block; text-decoration:none; color:inherit; }
.bxn-tile__media{ position:relative; overflow:hidden; background:var(--alt); }
.bxn-tile__media .bxn-card__img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.bxn-tile:hover .bxn-card__img{ transform:scale(1.04); }
.bxn-tile__cap{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 10px; margin-top:18px; }
.bxn-tile__title{ font-family:var(--serif); font-weight:400; font-size:1.75rem; color:var(--ink); line-height:1.1; }
.bxn-tile__meta{ font-family:var(--sans); font-weight:400; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); }
.bxn-tile--feature .bxn-tile__cap{ margin-top:20px; }
.bxn-tile--feature .bxn-tile__title{ font-size:clamp(1.6rem,2.8vw,2.3rem); }
.bxn-tile--feature .bxn-tile__meta{ font-size:.82rem; }

.bxn-projects--feature{ padding-top:clamp(40px,5vw,64px) !important; }
.bxn-cards-2{ padding-top:clamp(40px,5vw,72px) !important; }
.bxn-cards-2 .wpb_wrapper{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3vw,48px); }
.bxn-projects--wide{ padding-top:clamp(40px,5vw,72px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }

/* Overlay tile */
.bxn-tile--overlay .bxn-tile__scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(24,19,14,.62),rgba(24,19,14,0) 55%); }
.bxn-tile__ovcap{ position:absolute; left:0; bottom:0; padding:clamp(24px,3vw,44px); }
.bxn-tile__eyebrow{ font-family:var(--sans); font-weight:400; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#E7D9C4; }
.bxn-tile--overlay .bxn-tile__title{ color:var(--cream); font-size:clamp(1.7rem,3vw,2.4rem); margin-top:8px; }

/* ==========================================================================
   OUR CRAFT (#craft) — dark, 2-col
   ========================================================================== */
.bxn-craft{ background:var(--dark); color:var(--bg); align-items:center; padding-top:clamp(80px,11vw,150px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn-craft__text .vc_column-inner{ padding-right:clamp(20px,3vw,45px); }
.bxn-craft__media .vc_column-inner{ padding-left:clamp(20px,3vw,45px); }
.bxn-craft .bxn-h2{ margin-top:18px; }
.bxn-craft .bxn-lead{ margin-top:20px; }
/* Simple, static bullet list (no numbers / borders / hover — those read as an accordion) */
.bxn .bxn-craft__list{ margin-top:34px; list-style:none !important; padding:0; margin-left:0; display:grid; grid-template-columns:1fr; gap:16px; }
.bxn .bxn-craft__item{ position:relative; list-style:none !important; padding-left:24px; margin:0; font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.35; color:var(--bg); }
.bxn .bxn-craft__item::marker{ content:""; }
.bxn-craft__item::before{ content:""; position:absolute; left:0; top:.66em; width:12px; height:1px; background:var(--gold); }
@media (max-width:600px){ .bxn-craft__list{ grid-template-columns:1fr; gap:15px; } }
.bxn-figure{ position:relative; overflow:hidden; background:#1d1a15; }

/* ==========================================================================
   TESTIMONIAL band
   ========================================================================== */
/* Immersive full-bleed quote band. The bg is darkened with a filter ON .row-bg —
   a ::after overlay does NOT reliably composite above Salient's row background. */
.bxn-testimonial{ position:relative; overflow:hidden; padding-top:clamp(72px,9vw,116px) !important; padding-bottom:clamp(72px,9vw,116px) !important; text-align:center; background:#1C1711; }
/* Overlay pseudos never composite above Salient's .row-bg (verified empirically,
   3rd time this project) — darken with a filter ON the bg itself. brightness(.3)
   ≈ the design's rgba(28,23,17,.78) overlay (white lands at ~78). */
.bxn-testimonial .row-bg{ background-position:center center !important; background-size:cover !important; filter:brightness(.3) saturate(.7); }
.bxn-testimonial > .col, .bxn-testimonial .vc_col-sm-12{ position:relative; z-index:2; }
.bxn-testimonial .wpb_wrapper{ max-width:900px; margin:0 auto; }
.bxn .bxn-quote{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(1.55rem,3vw,2.35rem); line-height:1.36; color:#FDFBF7; margin-top:22px; text-wrap:balance; text-shadow:0 1px 18px rgba(0,0,0,.35); }
.bxn-quote p{ font:inherit; color:inherit; }
.bxn .bxn-quote__by{ margin-top:34px; color:rgba(251,249,245,.85) !important; letter-spacing:.22em; font-weight:400; font-size:.8rem; }
.bxn .bxn-testimonial .bxn-eyebrow--gold{ color:#D3B384; text-shadow:0 1px 10px rgba(0,0,0,.4); }

/* ==========================================================================
   CONTACT (#contact) — 2-col
   ========================================================================== */
.bxn-contact{ background:var(--bg); padding-top:clamp(80px,11vw,150px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn-contact__left .vc_column-inner{ padding-right:clamp(20px,3vw,48px); }
.bxn-contact__right .vc_column-inner{ padding-left:clamp(20px,3vw,48px); }
.bxn-contact .bxn-h2{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.03; margin-top:18px; }
.bxn-contact .bxn-lead{ font-size:1.08rem; margin-top:22px; max-width:44ch; }

.bxn-details{ margin-top:40px; display:grid; gap:26px; }
.bxn-detail__label{ font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brown2); margin-bottom:8px; }
.bxn-detail__val{ font-family:var(--sans); font-weight:300; font-size:1rem; color:var(--ink2); line-height:1.7; text-decoration:none; }
a.bxn-detail__val{ transition:color .3s; }
a.bxn-detail__val:hover{ color:var(--brown); }
.bxn-detail--split{ display:flex; flex-wrap:wrap; gap:36px; }

/* Contact form (Contact Form 7) */
.bxn-form .wpcf7-form{ display:grid; gap:30px; }
.bxn-form label{ display:block; margin:0; }
.bxn-field__label{ display:block; font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brown2); }
.bxn-form .wpcf7-form-control-wrap{ display:block; }
.bxn-form input[type=text],
.bxn-form input[type=email],
.bxn-form textarea{
	width:100%; margin-top:12px; padding:10px 0; background:transparent; border:0; border-bottom:1px solid var(--line2);
	font-family:var(--sans); font-size:1.05rem; font-weight:300; color:var(--ink); outline:none; border-radius:0;
	transition:border-color .3s; box-shadow:none;
}
.bxn-form textarea{ resize:vertical; min-height:120px; }
.bxn-form input:focus, .bxn-form textarea:focus{ border-bottom-color:var(--brown); }
.bxn-form input::placeholder, .bxn-form textarea::placeholder{ color:#A79C8B; opacity:1; }
.bxn-form .wpcf7-submit{
	justify-self:start; margin-top:8px; font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--bg); background:var(--dark); border:0; padding:1.15em 2.4em; cursor:pointer;
	border-radius:0; box-shadow:none; transition:background .3s; width:auto;
}
.bxn-form .wpcf7-submit:hover{ background:var(--ink2); }
.bxn-form .wpcf7-spinner{ margin:1em auto 0 8px; }
.bxn-form .wpcf7-response-output{ font-family:var(--sans); font-weight:300; margin:6px 0 0 !important; padding:14px 18px !important; border-color:var(--line2) !important; background:#EFE8DD; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bxn-footer{ background:var(--foot); color:#B4A895; padding:clamp(64px,8vw,104px) 0 40px; }
.bxn-footer__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.bxn-footer__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:44px; }
.bxn-footer__brand{ min-width:220px; }
.bxn-footer__word{ font-family:var(--serif); font-weight:500; font-size:2rem; color:var(--bg); line-height:1; }
.bxn-footer__sub{ font-family:var(--sans); font-weight:400; font-size:.62rem; letter-spacing:.46em; text-transform:uppercase; color:var(--brown2); margin-top:6px; padding-left:.46em; }
.bxn-footer__blurb{ font-family:var(--sans); font-weight:300; font-size:.96rem; color:#8A7E6E; margin-top:22px; max-width:30ch; line-height:1.7; }
.bxn-footer__h{ font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bg); margin-bottom:20px; }
.bxn-footer__links{ display:flex; flex-direction:column; gap:13px; }
.bxn-footer__links a,
.bxn-footer__tel{ font-family:var(--sans); font-weight:300; font-size:.98rem; color:#B4A895; text-decoration:none; transition:color .3s; }
.bxn-footer__links a:hover, .bxn-footer__tel:hover{ color:var(--bg); }
.bxn-footer__addr{ font-family:var(--sans); font-weight:300; font-size:.98rem; color:#B4A895; line-height:1.8; }
.bxn-footer__tel{ display:block; margin-top:14px; }
.bxn-footer__bar{ margin-top:clamp(48px,6vw,72px); padding-top:26px; border-top:1px solid rgba(180,168,149,.2); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.bxn-footer__copy{ font-family:var(--sans); font-weight:300; font-size:.82rem; color:#7A6F60; }
.bxn-footer__social{ display:flex; gap:26px; }
.bxn-footer__social a{ font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#8A7E6E; text-decoration:none; transition:color .3s; }
.bxn-footer__social a:hover{ color:var(--bg); }

/* ==========================================================================
   PORTFOLIO SLIDER (bx_portfolio_slider) — one large project per view
   ========================================================================== */
.bxn-projects--slider{ padding-top:clamp(40px,5vw,64px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn-pf{ position:relative; }
.bxn-pf__viewport{ overflow:hidden; }
.bxn-pf__track{ display:flex; gap:clamp(20px,2.4vw,40px); transition:transform .8s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.bxn-pf__slide{ flex:0 0 100%; display:block; text-decoration:none; color:inherit; }
/* Sized so the section heading above and the caption + counter below are all visible in one
   screen (client request). Measured against a 900px viewport: header 97 + heading ~100 +
   gaps + caption 48 + nav 52 leaves roughly 480px for the image. Override the element's
   inline aspect-ratio and keep full width. */
.bxn-pf__media{ position:relative; overflow:hidden; background:var(--alt); width:100%; }
/* Slider only — the grid keeps the ratio the element was given, so the fixed height and the
   aspect-ratio override below must not reach it. */
.bxn-pf:not(.bxn-pf--grid) .bxn-pf__media{ aspect-ratio:auto !important; height:clamp(380px,54vh,660px); }
@media (max-width:700px){ .bxn-pf:not(.bxn-pf--grid) .bxn-pf__media{ height:52vh; min-height:320px; } }
.bxn .bxn-pf__slide .bxn-card__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bxn-pf__slide:hover .bxn-card__img{ transform:scale(1.03); }
.bxn-pf__cap{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:22px; }
.bxn-pf__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.8vw,2.3rem); color:var(--ink); line-height:1.1; }
.bxn-pf__meta{ font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); }
.bxn-pf__nav{ display:flex; align-items:center; justify-content:space-between; margin-top:clamp(26px,3vw,40px); }
.bxn-pf__count{ font-family:var(--serif); font-size:1.15rem; color:var(--muted); letter-spacing:.04em; }
.bxn-pf__count [data-bxn-pf-cur]{ color:var(--ink); }
.bxn-pf__count-sep{ margin:0 7px; color:var(--line); }
.bxn-pf__arrows{ display:flex; gap:10px; }
.bxn-pf__arrow{ width:52px; height:52px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:1.2rem; transition:background .35s,border-color .35s,color .35s; }
.bxn-pf__arrow:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

/* ==========================================================================
   REVIEWS SLIDER (bx_reviews_slider) — crossfading quotes in the dark band
   ========================================================================== */
.bxn-rev{ max-width:900px; margin:0 auto; }
.bxn-rev > .bxn-eyebrow{ margin:0 auto; }
.bxn-rev__deck{ display:grid; margin-top:6px; }
.bxn-rev__q{ grid-area:1 / 1; margin:0; opacity:0; transform:translateY(8px); transition:opacity .8s ease, transform .8s ease; pointer-events:none; }
.bxn-rev__q.is-on{ opacity:1; transform:none; pointer-events:auto; }
.bxn .bxn-rev__q .bxn-quote{ margin-top:0; }
/* Salient decorates <blockquote> with a left accent bar + quote glyphs — remove them. */
.bxn blockquote.bxn-quote{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; }
.bxn blockquote.bxn-quote::before, .bxn blockquote.bxn-quote::after{ content:none !important; display:none !important; }
.bxn-rev__by{ margin-top:30px; font-family:var(--sans); font-weight:400; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(251,249,245,.85); }
.bxn-rev__nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:clamp(30px,3.4vw,44px); }
.bxn-rev__arrow{ width:46px; height:46px; border:1px solid rgba(251,249,245,.4); background:transparent; color:var(--cream); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:1.1rem; transition:background .3s,border-color .3s; }
.bxn-rev__arrow:hover{ background:rgba(251,249,245,.15); border-color:rgba(251,249,245,.7); }
.bxn-rev__dots{ display:flex; align-items:center; gap:10px; }
.bxn-rev__dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(251,249,245,.35); cursor:pointer; transition:background .3s,transform .3s; }
.bxn-rev__dot.is-on{ background:var(--gold); transform:scale(1.25); }

/* ==========================================================================
   HERO-SUB intro (the "Working closely with…" lede)
   ========================================================================== */
.bxn-herosub{ background:var(--bg); text-align:center; padding-top:clamp(78px,10vw,132px) !important; padding-bottom:clamp(78px,10vw,132px) !important; }
.bxn .bxn-lede{ max-width:920px; margin:0 auto; }
.bxn .bxn-lede p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.32rem,2.2vw,1.9rem); line-height:1.45; color:#4A4034; margin:0; }

/* ==========================================================================
   ABOUT (short text + prominent image)
   ========================================================================== */
.bxn-about{ background:var(--bg); align-items:center; padding-top:clamp(80px,11vw,150px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn-about__text .vc_column-inner{ padding-right:clamp(24px,4vw,60px); }
.bxn-about .bxn-h2{ margin-top:16px; }
.bxn-about .bxn-lead{ margin-top:22px; max-width:none; }
.bxn-about__media .bxn-figure{ position:relative; overflow:hidden; }

/* ==========================================================================
   SERVICES SLIDESHOW (bx_services_slideshow) — names ↔ crossfading images
   ========================================================================== */
.bxn-services{ background:var(--dark); color:var(--bg); padding-top:clamp(80px,11vw,150px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn-serv{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.bxn-serv__heading{ margin-top:18px; }
.bxn-serv__lead{ font-family:var(--sans); font-weight:300; font-size:1.05rem; color:rgba(251,249,245,.7); margin:20px 0 0; max-width:46ch; }
.bxn-serv__nav{ margin-top:34px; border-top:1px solid rgba(251,249,245,.16); }
.bxn-serv__item{ display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid rgba(251,249,245,.16); padding:16px 0; cursor:pointer; font-family:var(--serif); font-size:clamp(1.2rem,1.7vw,1.45rem); color:rgba(244,239,232,.5); position:relative; transition:color .45s cubic-bezier(.2,.7,.2,1),padding-left .45s cubic-bezier(.2,.7,.2,1); }
.bxn-serv__item:hover{ color:rgba(244,239,232,.82); }
.bxn-serv__item.is-on{ color:var(--cream); padding-left:24px; }
.bxn-serv__item.is-on::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:14px; height:1px; background:var(--gold); }
.bxn-serv__media{ position:relative; overflow:hidden; height:clamp(440px,60vh,660px); background:#1d1a15; }
.bxn-serv__slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.bxn-serv__slide.is-on{ opacity:1; }
.bxn .bxn-serv__slide .bxn-card__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }
@media (max-width:860px){
	.bxn-serv{ grid-template-columns:1fr; gap:26px; }
	.bxn-serv__media{ height:56vh; min-height:320px; }
}
/* About: stack (full-width text, then image) below ~1100 so the 1/3 text is never cramped */
@media (max-width:1100px){
	.bxn-about .vc_col-sm-4, .bxn-about .vc_col-sm-8{ width:100% !important; }
	.bxn-about__text .vc_column-inner{ padding-right:0; }
	.bxn-about__media{ margin-top:34px; }
}

/* ==========================================================================
   SERVICES GRID — [bx_services_slideshow layout="grid"]
   Every service on screen at once instead of one at a time. Sits in the same dark
   .bxn-services band as the slideshow, so the section rhythm is unchanged.
   ========================================================================== */
.bxn-svcg__head{ max-width:720px; }
.bxn-svcg__head .bxn-h2{ margin-top:18px; }
.bxn-svcg__lead{ font-family:var(--sans); font-weight:300; font-size:1.05rem; color:rgba(251,249,245,.7); margin:20px 0 0; max-width:56ch; }
/* Flex rather than grid, on purpose: the client edits this service list, so the last row is
   usually short (seven services in four columns leaves three). Grid would strand those three
   against the left edge; flex + justify-content:center sets them half a column in, centred
   under the row above. The 0.05px trim stops a FULL row rounding up past 100% and wrapping
   its last tile — a wrap happens before shrink in a multi-line flex container. */
/* Breaks out past the 1320 content strip to the same wider cap as the projects grid, so the
   service photographs read at a similar scale instead of sitting small in a wide dark band. */
.bxn-services{
	padding-left:calc(var(--gut) + max(0px, 50vw - (var(--svcwrap) / 2))) !important;
	padding-right:calc(var(--gut) + max(0px, 50vw - (var(--svcwrap) / 2))) !important;
	--svcwrap:1680px;
}
.bxn-svcg__grid{
	--bxn-svcg-gap:clamp(16px,1.8vw,28px);
	margin-top:clamp(40px,5vw,68px);
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:clamp(28px,3vw,44px) var(--bxn-svcg-gap);
}
.bxn-svcg__item{
	flex:0 1 calc((100% - (var(--bxn-svcg-cols,4) - 1) * var(--bxn-svcg-gap)) / var(--bxn-svcg-cols,4) - 0.05px);
	min-width:0;
}
.bxn-svcg__media{ position:relative; overflow:hidden; background:#1d1a15; }
/* .bxn prefix beats the base `.bxn img{height:auto}` reset — see the card note above. */
.bxn .bxn-svcg__media .bxn-card__img{
	position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover;
	transition:transform 1.05s cubic-bezier(.2,.7,.2,1);
}
/* inline-block so the rule below hugs the name rather than the whole column.
   Must be h3.bxn-svcg__name (element + class, not a descendant selector) and !important on
   the family: Salient's Redux h3 typography sets Marcellus and otherwise wins, so the names
   came out in the OLD design's font instead of Cormorant. Same trap as h4.bxn-fact__k below. */
.bxn h3.bxn-svcg__name{
	position:relative; display:inline-block; padding-bottom:7px;
	font-family:var(--serif) !important; font-weight:400;
	font-size:clamp(1.32rem,1.85vw,1.72rem) !important;
	line-height:1.25; color:var(--cream) !important; margin:20px 0 0;
}

/* Hover — the same slow zoom the work cards and project tiles use, plus the gold rule that
   draws itself in from the left, borrowed from .bxn-txtlink. These tiles are not links, so
   it brings the photograph forward without implying anything is clickable. */
.bxn .bxn-svcg__name::after{
	content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
	background:var(--gold); transform:scaleX(0); transform-origin:left;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.bxn .bxn-svcg__item:hover .bxn-card__img{ transform:scale(1.06); }
.bxn .bxn-svcg__item:hover .bxn-svcg__name::after{ transform:scaleX(1); }
/* Declared on the grid itself, so it beats the inline --bxn-svcg-cols inherited from
   .bxn-svcg (inheritance loses to a declaration on the element — no !important needed). */
@media (max-width:900px){ .bxn-svcg__grid{ --bxn-svcg-cols:2; } }
@media (max-width:560px){ .bxn-svcg__grid{ --bxn-svcg-cols:1; } }

/* ==========================================================================
   PORTFOLIO GRID — [bx_portfolio_slider layout="grid"]
   ========================================================================== */
/* The heading row above ends flush with its own text box, and .bxn-h2 runs at line-height
   1.05 — so Cormorant's descenders sit below it. Without a top pad here the first row of
   tiles crosses them. */
.bxn-projects--grid{ padding-top:clamp(46px,5.6vw,78px) !important; padding-bottom:0 !important; }
/* Client asked for noticeably larger tiles ("they look a bit mean"), referencing a layout
   whose images run nearly edge to edge. Break the grid out past the 1320 content strip to a
   wider cap, keeping only the page gutter — the heading above is centred, so it still reads
   as one composition. */
.bxn-projects--grid{
	padding-left:calc(var(--gut) + max(0px, 50vw - (var(--pfwrap) / 2))) !important;
	padding-right:calc(var(--gut) + max(0px, 50vw - (var(--pfwrap) / 2))) !important;
	--pfwrap:1680px;
}
.bxn-pf__grid{ display:grid; grid-template-columns:repeat(var(--bxn-pf-cols,3),1fr); gap:clamp(20px,2.4vw,36px); }
.bxn-pf--grid .bxn-pf__slide{ display:block; }
@media (max-width:900px){ .bxn-pf__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bxn-pf__grid{ grid-template-columns:1fr; } }

/* "View all projects" as a real button under the grid rather than a text link above it */
.bxn-projects--more{ background:var(--bg); text-align:center; padding-top:clamp(38px,4.5vw,64px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
.bxn a.bxn-btn--dark,
.bxn a.bxn-btn--dark.nectar-button{
	display:inline-flex; align-items:center; justify-content:center; gap:11px; line-height:1.2;
	padding:1.15em 2.6em; margin:0; min-width:0;
	font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
	background:var(--dark) !important; background-color:var(--dark) !important;
	color:var(--cream) !important; opacity:1 !important;
	border:0 !important; border-radius:0 !important; box-shadow:none !important;
	transition:background .35s cubic-bezier(.2,.7,.2,1);
}
.bxn a.bxn-btn--dark > span{ color:inherit !important; font:inherit !important; letter-spacing:inherit !important; padding:0 !important; margin:0 !important; background:none !important; }
.bxn a.bxn-btn--dark::after{ content:"\2192"; font-size:1.05em; line-height:1; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
body.bxn a.bxn-btn--dark:hover,
body.bxn a.bxn-btn--dark.nectar-button:hover,
body.bxn a.bxn-btn--dark:focus,
body.bxn a.bxn-btn--dark:active{ background:var(--brown) !important; background-color:var(--brown) !important; color:var(--cream) !important; }
.bxn a.bxn-btn--dark:hover::after{ transform:translateX(5px); }

/* ==========================================================================
   PROCESS (#process) — how a commission runs, as numbered steps
   ========================================================================== */
.bxn-process{ background:var(--alt); }
.bxn-process--head{ padding-top:clamp(80px,11vw,150px) !important; padding-bottom:0 !important; }
.bxn-process--head .bxn-h2{ margin-top:16px; }
.bxn-process--head .bxn-lead{ margin-top:20px; max-width:56ch; }
.bxn-process--steps{ padding-top:clamp(40px,4.8vw,66px) !important; padding-bottom:clamp(80px,11vw,150px) !important; }
/* Salient floats its columns; the same flex treatment as the projects landing grid keeps
   four equal steps that wrap cleanly. See .bxn-projects__grid for the reasoning. */
/* Salient already puts ~12px of padding on each column, and that padding is what lines the
   outer steps up with the heading above — so keep it and add only a small extra gap here,
   exactly as .bxn-projects__grid does. A big gap on top of it reads as four stranded blocks. */
.bxn-process--steps .row_col_wrap_12{ --sgap:clamp(4px,1vw,20px); display:flex; flex-wrap:wrap; gap:var(--sgap); }
.bxn-process--steps .row_col_wrap_12 > .wpb_column{ flex:0 1 calc(25% - (var(--sgap) * 3 / 4)); min-width:0; width:auto !important; float:none; margin:0; }
.bxn-process--steps .row_col_wrap_12 > .wpb_column > .vc_column-inner{ padding:0 !important; }
.bxn-process--steps .row_col_wrap_12::before,
.bxn-process--steps .row_col_wrap_12::after{ display:none !important; }
/* vc_custom_heading puts el_class on the heading tag itself, so these are tag-qualified
   and !important — they have to out-specify Salient's Redux heading typography. */
.bxn div.bxn-step__n{
	font-family:var(--serif) !important; font-weight:400;
	font-size:clamp(2.2rem,3.4vw,3rem) !important; line-height:1; color:var(--brown2) !important;
	margin:0 0 18px !important; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.bxn h3.bxn-step__t{
	font-family:var(--serif) !important; font-weight:400;
	font-size:clamp(1.3rem,1.8vw,1.62rem) !important; line-height:1.2; color:var(--ink) !important;
	margin:0 0 10px !important;
}
.bxn .bxn-step__d p{ font-family:var(--sans); font-weight:300; font-size:.97rem; line-height:1.7; color:var(--muted); margin:0; }
@media (max-width:900px){
	.bxn-process--steps .row_col_wrap_12 > .wpb_column{ flex:0 1 calc(50% - (var(--sgap) / 2)); }
}
@media (max-width:560px){
	.bxn-process--steps .row_col_wrap_12 > .wpb_column{ flex:1 1 100%; }
}

/* ==========================================================================
   SINGLE PROJECT PAGE (e.g. /parkview/)
   ========================================================================== */
/* hero runs edge to edge; the caption keeps the page container alignment */
.bxn-proj__hero{ padding:0 !important; }
.bxn-proj__hero .bxn-tile__ovcap{ padding-left:calc(var(--gut) + max(0px, 50vw - (var(--wrap) / 2))); padding-right:calc(var(--gut) + max(0px, 50vw - (var(--wrap) / 2))); padding-bottom:clamp(30px,4vw,56px); }
.bxn-proj__hero .bxn-tile__media{ height:clamp(360px,62vh,720px); aspect-ratio:auto !important; }
.bxn-proj__hero .bxn-tile__title{ font-size:clamp(2.4rem,5.6vw,4.6rem); }
.bxn-proj__hero .bxn-tile{ cursor:default; }

.bxn-proj__intro{ background:var(--bg); padding-top:clamp(70px,9vw,120px) !important; padding-bottom:clamp(56px,7vw,90px) !important; align-items:flex-start; }
.bxn-proj__story .vc_column-inner{ padding-right:clamp(24px,5vw,80px); }
.bxn-proj__story .bxn-h2{ margin-top:16px; }
.bxn-proj__story .bxn-lead{ margin-top:22px; max-width:60ch; }
/* Details card — a real panel so it reads as a distinct object beside the story,
   with the label set as a prominent serif line above quiet body copy. */
.bxn-proj__facts > .vc_column-inner{
	background:var(--alt);
	border:1px solid var(--line);
	border-radius:3px;
	padding:clamp(26px,2.4vw,38px) clamp(24px,2vw,32px) clamp(28px,2.4vw,36px) !important;
}
.bxn-proj__facts .bxn-eyebrow{ margin-bottom:6px; }
/* vc_custom_heading puts el_class on the heading tag ITSELF, so this must be h4.bxn-fact__k
   (not a descendant selector) — and it has to out-specify Salient's Redux h4 typography. */
.bxn h4.bxn-fact__k{
	font-family:var(--serif) !important; font-weight:400;
	font-size:clamp(1.18rem,1.5vw,1.4rem) !important; line-height:1.2; letter-spacing:.005em;
	color:var(--ink) !important;
	margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
}
.bxn h4.bxn-fact__k:first-of-type{ border-top:0; padding-top:0; margin-top:14px; }
.bxn .bxn-fact__v{ margin-top:7px !important; }
.bxn .bxn-fact__v p{
	font-family:var(--sans); font-weight:300; font-size:.95rem; line-height:1.7;
	color:var(--muted); margin:0;
}
.bxn-proj__facts a.bxn-txtlink{ margin-top:26px; }

/* photographs — the grid and the slider are BOTH placed on a project page so the
   client can keep whichever reads better and delete the other in WPBakery. */
.bxn-proj__gallery{ background:var(--bg); padding-top:clamp(20px,2.6vw,40px) !important; padding-bottom:clamp(70px,9vw,120px) !important; }
.bxn-proj__gallery .bxn-h2{ margin-top:14px; margin-bottom:clamp(30px,3.6vw,52px); }
.bxn-proj__gallery .bxn-projgal--slider{ margin-top:clamp(34px,4vw,60px); }

/* closing CTA */
/* ==========================================================================
   PROJECTS LANDING PAGE (/projects/)
   ========================================================================== */
/* Sub-banner. The fixed header is transparent with a white logo at the top of a page,
   so an inner page needs something dark behind it or the branding disappears. */
.bxn-pagehero{
	position:relative; overflow:hidden; background:#1C1711;
	display:flex; align-items:flex-end;
	min-height:clamp(380px,50vh,560px);
	padding-top:clamp(150px,17vh,210px) !important;
	padding-bottom:clamp(46px,5.5vw,78px) !important;
}
/* Overlay pseudos never composite above Salient's .row-bg — darken the bg itself. */
.bxn-pagehero .row-bg{ background-position:center center !important; background-size:cover !important; filter:brightness(.45) saturate(.85); }
.bxn-pagehero > .col, .bxn-pagehero .vc_col-sm-12{ position:relative; z-index:2; }
.bxn-pagehero .wpb_wrapper{ max-width:760px; }
.bxn .bxn-pagehero .bxn-h2{ color:var(--cream) !important; margin-top:14px; text-shadow:0 2px 26px rgba(15,10,5,.45); }
.bxn .bxn-pagehero .bxn-lead{ margin-top:20px; }
.bxn .bxn-pagehero .bxn-lead p{ color:rgba(251,249,245,.86); text-shadow:0 1px 16px rgba(15,10,5,.5); }

.bxn-projects__grid{ background:var(--bg); padding-top:clamp(56px,6.5vw,90px) !important; padding-bottom:clamp(80px,10vw,130px) !important; }
/* Salient floats its columns; a flex row with a real gap keeps the three tiles even
   and lets them wrap cleanly instead of clearing at odd points. */
/* Salient already puts its own gutter on each COLUMN, and that gutter is what lines the
   outer tiles up with the heading above. So keep it and add only a small extra gap —
   zeroing the column padding pulls the whole grid 10px left of everything else. */
.bxn-projects__grid .row_col_wrap_12{ --pgap:clamp(2px,0.55vw,12px); display:flex; flex-wrap:wrap; gap:var(--pgap); }
/* Fixed basis, no grow: a row that isn't full (4 projects, 7 projects…) leaves the odd
   tile at its proper column width instead of stretching it across the whole row. */
.bxn-projects__grid .row_col_wrap_12 > .wpb_column{
	flex:0 1 calc(33.3333% - (var(--pgap) * 2 / 3));
	min-width:0; width:auto !important; float:none; margin:0;
}
.bxn-projects__grid .row_col_wrap_12 > .wpb_column > .vc_column-inner{ padding:0 !important; height:100%; }
/* Salient's clearfix pseudos become flex items and eat a gap at each end */
.bxn-projects__grid .row_col_wrap_12::before,
.bxn-projects__grid .row_col_wrap_12::after{ display:none !important; }

@media (max-width:900px){
	.bxn-projects__grid .row_col_wrap_12 > .wpb_column{ flex:0 1 calc(50% - (var(--pgap) / 2)); }
}
@media (max-width:600px){
	.bxn-projects__grid .row_col_wrap_12 > .wpb_column{ flex:1 1 100%; }
}

/* sits flush against the section above — a cream margin here read as a stray gap */
.bxn-proj__cta{ background:var(--dark); text-align:center; padding-top:clamp(80px,10vw,130px) !important; padding-bottom:clamp(80px,10vw,130px) !important; margin-top:0; }
.bxn-proj__cta .bxn-eyebrow{ margin:0 auto; }
.bxn-proj__cta .bxn-h2{ margin-top:16px; }
/* This CTA sits on --dark, so the link has to opt out of the default brown/ink treatment.
   It must out-specify the BASE rules, which carry an extra .nectar-button class — and these
   buttons really are nectar-buttons, so `.bxn-proj__cta a.bxn-txtlink` (0,2,1) lost to
   `.bxn a.bxn-txtlink.nectar-button` (0,3,1). The link was therefore brown at rest and went
   to --ink on hover: the same colour as the background, so it vanished. Leading `body.bxn`
   plus the .nectar-button variant puts these above both. */
.bxn-proj__cta a.bxn-txtlink{ margin-top:30px; }
body.bxn .bxn-proj__cta a.bxn-txtlink,
body.bxn .bxn-proj__cta a.bxn-txtlink.nectar-button{
	color:#E7D9C4 !important;
	border-bottom-color:rgba(251,249,245,.35) !important;
}
body.bxn .bxn-proj__cta a.bxn-txtlink::before{ background:var(--gold); }
body.bxn .bxn-proj__cta a.bxn-txtlink:hover,
body.bxn .bxn-proj__cta a.bxn-txtlink.nectar-button:hover,
body.bxn .bxn-proj__cta a.bxn-txtlink:focus,
body.bxn .bxn-proj__cta a.bxn-txtlink:active{ color:var(--cream) !important; }
body.bxn .bxn-proj__cta a.bxn-txtlink:hover > span,
body.bxn .bxn-proj__cta a.bxn-txtlink > span{ color:inherit !important; }

@media (max-width:1000px){
	.bxn-proj__intro .vc_col-sm-8, .bxn-proj__intro .vc_col-sm-4{ width:100% !important; }
	.bxn-proj__story .vc_column-inner{ padding-right:0; }
	.bxn-proj__facts{ margin-top:34px; }
}
@media (max-width:700px){
	.bxn-proj__pair .row_col_wrap_12{ flex-direction:column; }
}

/* ==========================================================================
   Scroll reveals — native scroll-driven where supported (no JS, no FOUC).
   Elsewhere content simply shows.
   ========================================================================== */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		.bxn-intro .vc_custom_heading,
		.bxn-intro .wpb_text_column,
		.bxn-intro a.bxn-txtlink,
		.bxn-work--head .wpb_wrapper,
		.bxn-card, .bxn-tile, .bxn-figure,
		.bxn-craft__text .vc_column-inner,
		.bxn-craft__media,
		.bxn-testimonial .wpb_wrapper,
		.bxn-contact__left .vc_column-inner,
		.bxn-contact__right .vc_column-inner{
			animation:bxreveal .95s cubic-bezier(.2,.7,.2,1) both;
			animation-timeline:view();
			animation-range:entry 0% cover 24%;
		}
	}
}

/* ==========================================================================
   Keyframes (from design)
   ========================================================================== */
@keyframes bxrise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes bxcue{ 0%,100%{transform:translateX(-50%) translateY(0);opacity:.55} 50%{transform:translateX(-50%) translateY(7px);opacity:1} }
@keyframes bxreveal{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes bxzoom{ from{transform:scale(1)} to{transform:scale(1.07)} }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Laptop */
@media (max-width:1300px){
	.bxn{ --wrap:1140px; }
}
/* Tablet */
@media (max-width:1000px){
	.bxn-burger{
		display:flex; flex-direction:column; justify-content:center; gap:5px;
		width:44px; height:44px; padding:0; margin:0; background:none; border:0; cursor:pointer;
	}
	.bxn-burger span{ display:block; width:22px; height:1.5px; background:var(--navc,#FBF9F5); transition:transform .35s,opacity .25s; margin-left:auto; }
	.bxn-header.is-open .bxn-burger span:first-child{ transform:translateY(3.25px) rotate(45deg); }
	.bxn-header.is-open .bxn-burger span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
	.bxn-nav-wrap{
		position:fixed; top:clamp(74px,8vw,96px); left:0; width:100%;
		background:rgba(244,239,232,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
		border-bottom:1px solid #E4DBCE; padding:8px var(--gut) 22px;
		max-height:calc(100vh - clamp(74px,8vw,96px)); overflow-y:auto;
		transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s,transform .3s;
	}
	.bxn-header.is-open .bxn-nav-wrap{ transform:none; opacity:1; pointer-events:auto; }
	.bxn-nav{ flex-direction:column; align-items:stretch; gap:0; }
	.bxn-nav li{ width:100%; }
	.bxn-nav > li > a{ color:var(--ink) !important; opacity:1; display:block; padding:14px 0; border-bottom:1px solid rgba(201,188,169,.4); }
	.bxn-nav .menu-item-has-children > a::after{ display:none; }
	/* submenu shown inline (indented) on mobile */
	.bxn-nav .sub-menu{ position:static; opacity:1 !important; visibility:visible !important; transform:none !important; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; padding:2px 0 8px 16px; min-width:0; }
	.bxn-nav .sub-menu a{ color:var(--ink) !important; opacity:.75; padding:9px 0; border-bottom:1px solid rgba(201,188,169,.25); }
	.bxn-nav > li.bxn-nav__cta > a{ border:0; padding:14px 0; color:var(--brown) !important; }
	.bxn-nav > li.bxn-nav__cta > a:hover{ background:none; }
}
/* Craft & contact stack a little earlier than Salient's 690 for breathing room */
@media (max-width:860px){
	.bxn-craft__text .vc_column-inner,
	.bxn-craft__media .vc_column-inner,
	.bxn-contact__left .vc_column-inner,
	.bxn-contact__right .vc_column-inner{ padding-left:0; padding-right:0; }
	.bxn-craft__media{ margin-top:36px; }
	.bxn-contact__right{ margin-top:44px; }
}
/* Mobile */
@media (max-width:700px){
	.bxn-cards-2 .wpb_wrapper{ grid-template-columns:1fr; }
	.bxn-hero__grid.bxn-in{ align-items:flex-start; flex-direction:column; justify-content:flex-end; }
	.bxn-hero__side{ width:100%; }
	.bxn-hero{ min-height:560px; }
}
/* Small */
@media (max-width:500px){
	.bxn-card__body{ padding:22px 22px 26px; }
	.bxn-detail--split{ gap:24px; }
}

/* ==========================================================================
   PROJECT GALLERY  [bx_project_gallery]  — grid or slider, both open a lightbox
   ========================================================================== */
.bxn .bxn-gal{ --bxn-gal-cols:3; }

/* shared media box (a <span>, so it needs display:block) */
.bxn .bxn-gal__media{
	display:block; position:relative; overflow:hidden;
	width:100%; background:var(--alt); border-radius:2px;
}
.bxn .bxn-gal__media .bxn-gal__img{
	position:absolute; inset:0;
	width:100% !important; height:100% !important; max-width:none;
	object-fit:cover; display:block;
	transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.bxn .bxn-gal__item,
.bxn .bxn-gal__slide{
	display:block; position:relative; text-decoration:none; cursor:zoom-in;
	-webkit-tap-highlight-color:transparent;
}
.bxn .bxn-gal__item::after,
.bxn .bxn-gal__slide::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:rgba(20,15,10,0); transition:background .45s ease;
}
.bxn .bxn-gal__item:hover .bxn-gal__img,
.bxn .bxn-gal__slide:hover .bxn-gal__img{ transform:scale(1.045); }
.bxn .bxn-gal__item:hover::after,
.bxn .bxn-gal__slide:hover::after{ background:rgba(20,15,10,.1); }
.bxn .bxn-gal__item:focus-visible,
.bxn .bxn-gal__slide:focus-visible{ outline:2px solid var(--gold,#B08D57); outline-offset:3px; }

/* --- grid ---------------------------------------------------------------- */
.bxn .bxn-gal--grid{
	display:grid;
	grid-template-columns:repeat(var(--bxn-gal-cols),1fr);
	gap:clamp(10px,1.5vw,22px);
}

/* --- slider -------------------------------------------------------------- */
.bxn .bxn-gal--slider{ position:relative; }
.bxn .bxn-gal__viewport{ overflow:hidden; width:100%; }
.bxn .bxn-gal__track{
	display:flex; width:100%;
	transition:transform .85s cubic-bezier(.16,1,.3,1);
	will-change:transform;
}
.bxn .bxn-gal__track > .bxn-gal__slide{ flex:0 0 100%; min-width:0; }
/* one photo at full container width gets very tall on big screens — cap it so a
   slide plus its controls still read as one comfortable block. The chosen ratio
   still drives the shape until it hits this ceiling. */
.bxn .bxn-gal--slider .bxn-gal__media{ max-height:min(72vh,760px); }
.bxn .bxn-gal__nav{
	display:flex; align-items:center; justify-content:space-between; gap:18px;
	margin-top:clamp(16px,1.8vw,24px);
}
.bxn .bxn-gal__count{
	font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
	color:var(--muted,#8A7F70);
}
.bxn .bxn-gal__count [data-bxn-gal-cur]{ color:var(--ink); }
.bxn .bxn-gal__sep{ opacity:.45; margin:0 2px; }
.bxn .bxn-gal__arrows{ display:flex; gap:10px; }
.bxn .bxn-gal__arrow{
	width:46px; height:46px; padding:0; border-radius:50%;
	border:1px solid rgba(138,127,112,.4); background:none; color:var(--ink);
	font-size:22px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.bxn .bxn-gal__arrow:hover{ background:var(--brown,#4A3728); border-color:var(--brown,#4A3728); color:#FBF9F5; }

/* --- lightbox (built by bx-new.js) --------------------------------------- */
.bxn-lb{
	position:fixed; inset:0; z-index:100000;
	display:flex; align-items:center; justify-content:center;
	background:rgba(16,12,8,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	opacity:0; visibility:hidden; transition:opacity .35s ease,visibility .35s ease;
}
.bxn-lb.is-open{ opacity:1; visibility:visible; }
.bxn-lb__stage{
	position:relative; width:100%; height:100%;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(52px,7vh,84px) clamp(16px,6vw,96px);
}
.bxn-lb__img{
	display:block; max-width:100%; max-height:100%;
	width:auto !important; height:auto !important;
	object-fit:contain; border-radius:2px;
	opacity:0; transform:scale(.985); transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.bxn-lb__img.is-in{ opacity:1; transform:none; }
.bxn-lb__btn{
	position:absolute; z-index:2; padding:0; border:0; cursor:pointer;
	background:rgba(251,249,245,.1); color:#FBF9F5;
	display:flex; align-items:center; justify-content:center;
	transition:background .3s ease,transform .3s ease;
	-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.bxn-lb__btn:hover{ background:rgba(251,249,245,.22); }
.bxn-lb__btn:focus-visible{ outline:2px solid #FBF9F5; outline-offset:2px; }
.bxn-lb__close{ top:clamp(14px,2.2vh,26px); right:clamp(14px,2.4vw,30px); width:46px; height:46px; border-radius:50%; font-size:20px; line-height:1; }
.bxn-lb__nav{ top:50%; margin-top:-27px; width:54px; height:54px; border-radius:50%; font-size:26px; line-height:1; }
.bxn-lb__nav--prev{ left:clamp(10px,2vw,28px); }
.bxn-lb__nav--next{ right:clamp(10px,2vw,28px); }
.bxn-lb__nav:hover{ transform:scale(1.06); }
.bxn-lb__count{
	position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(16px,2.6vh,30px); z-index:2;
	font-family:var(--sans,inherit); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
	color:rgba(251,249,245,.72);
}
body.bxn-lb-open{ overflow:hidden; }

/* gallery responsive */
/* Cap the column count as the screen narrows so tiles never get too small to read.
   A 4-column choice becomes 3 on a laptop, 2 on a tablet, 1 on a phone. */
@media (max-width:1100px){
	.bxn .bxn-gal--grid{ grid-template-columns:repeat(min(var(--bxn-gal-cols),3),1fr); }
}
@media (max-width:900px){
	.bxn .bxn-gal--grid{ grid-template-columns:repeat(min(var(--bxn-gal-cols),2),1fr); }
}
@media (max-width:760px){
	.bxn .bxn-gal--grid{ grid-template-columns:repeat(min(var(--bxn-gal-cols),2),1fr); gap:10px; }
	.bxn .bxn-gal__arrow{ width:42px; height:42px; }
	.bxn-lb__nav{ width:44px; height:44px; margin-top:-22px; font-size:22px; }
	.bxn-lb__stage{ padding:64px 12px 60px; }
}
@media (max-width:460px){
	.bxn .bxn-gal--grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
	.bxn .bxn-gal__track{ transition:none; }
	.bxn .bxn-gal__media .bxn-gal__img{ transition:none; }
	.bxn-lb__img{ transition:opacity .2s ease; transform:none; }
}