/* ==========================================================================
Revival Construction — revivalclt.com
Design system per "Revival Design Guide 08-31-26"
Two fields alternating (deep emerald / cream). Brass is a highlight,
never a surface. Hairlines instead of boxes. One idea per section.
========================================================================== */
:root{
/* fields (rolex green, approved 2026-09-01) */
--deep:#0C3625; --emerald:#12503A; --panel:#1A6449;
--cream:#F4EFE3; --cream-panel:#FBF7EC;
/* accent */
--brass:#D6BA8A; --brass-hi:#E4C694; --brass-dark:#AD8130;
/* text */
--ink:#20302A; --body-dark:#E8E0CE; --head-dark:#F3EDDF;
--muted-dark:#8FA695; --body-cream:#3A3E31; --muted-cream:#5A6152;
--eyebrow-cream:#9A8552; --caption-dark:#CBD4C6; --secondary-dark:#DFD7C5;
/* derived */
--hair-dark:rgba(214,186,138,.28);
--hair-dark-lo:rgba(214,186,138,.18);
--hair-cream:rgba(173,129,48,.28);
--hair-cream-lo:rgba(173,129,48,.18);
--tint-dark:rgba(214,186,138,.06);
--tint-cream:rgba(255,255,255,.55);
/* type (Cinzel system, approved 2026-09-01) */
--display:"Cinzel",Georgia,serif;
--body:"EB Garamond",Georgia,serif;
--label:"Jost","Helvetica Neue",Arial,sans-serif;
/* layout */
--wrap:1140px;
--pad:clamp(22px,5vw,48px);
}
/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;height:auto;display:block}
body{
background:var(--deep);
color:var(--body-dark);
font-family:var(--body);
font-size:19px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--brass);color:var(--deep)}
a{color:var(--brass-dark);text-decoration:none;transition:color .25s ease}
a:hover{color:#8A6A2E}
.band--dark a:not(.btn):not(.card-link):not(.plate-link){color:var(--brass)}
.band--dark a:not(.btn):not(.card-link):not(.plate-link):hover{color:var(--brass-hi)}
/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;line-height:1.22;letter-spacing:.05em;text-wrap:balance}
h1{font-size:clamp(29px,4.1vw,50px);color:var(--head-dark);text-transform:uppercase}
h2{font-size:clamp(22px,2.7vw,34px);font-weight:400;color:var(--head-dark);text-transform:uppercase;line-height:1.3}
h3{font-size:clamp(17px,1.6vw,19px);font-weight:500;color:var(--head-dark);letter-spacing:.04em}
/* visually hidden, still read by screen readers and counted in the heading outline */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.band--cream h1,.band--cream h2,.band--cream h3{color:var(--ink)}
h1 em,h2 em,h3 em{font-family:var(--body);font-style:italic;font-weight:500;color:var(--brass);text-transform:none;letter-spacing:.01em;font-size:1.06em}
.band--cream h1 em,.band--cream h2 em,.band--cream h3 em{color:var(--brass-dark)}
.eyebrow{
font-family:var(--label);font-size:11px;font-weight:600;
letter-spacing:.3em;text-transform:uppercase;
color:var(--brass);margin-bottom:22px;
}
.band--cream .eyebrow{color:var(--eyebrow-cream)}
.rule{
border:none;width:70px;height:1px;background:var(--brass);
opacity:.85;margin:26px 0 28px;
}
.rule--center{margin-left:auto;margin-right:auto}
.band--cream .rule{background:var(--brass-dark)}
.lede{
font-size:clamp(19px,1.9vw,21px);line-height:1.56;max-width:64ch;
color:var(--secondary-dark);
}
.band--cream .lede{color:var(--body-cream)}
p{max-width:70ch}
p+p{margin-top:1em}
.caption{font-size:15px;font-style:italic;color:var(--caption-dark)}
.band--cream .caption{color:var(--muted-cream)}
/* ---------- bands ---------- */
.band{position:relative;padding:clamp(76px,9vw,116px) 0}
.band--dark{
background:var(--deep) radial-gradient(120% 85% at 50% 6%, rgba(46,138,98,.40), rgba(12,54,37,0) 62%);
color:var(--body-dark);
}
.band--dark::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(90% 50% at 50% 108%, rgba(214,186,138,.10), rgba(214,186,138,0) 60%);
}
.band--dark>*{position:relative;z-index:1}
.band--emerald{background:var(--emerald) radial-gradient(120% 80% at 50% 8%, rgba(46,138,98,.34), rgba(18,80,58,0) 62%);color:var(--body-dark)}
.band--cream{
background:var(--cream) radial-gradient(140% 60% at 50% 0%, rgba(214,186,138,.11), rgba(214,186,138,0) 55%);
color:var(--body-cream);
}
.band--tight{padding:clamp(56px,7vw,84px) 0}
.band+.band--dark{border-top:1px solid rgba(214,186,138,.10)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:860px}
.section-head{max-width:760px}
.section-head--center{margin:0 auto;text-align:center}
.section-head--center .rule{margin-left:auto;margin-right:auto}
/* ---------- buttons ---------- */
.btn{
display:inline-block;
font-family:var(--label);font-size:11px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;
padding:17px 32px;border:1px solid var(--hair-dark);
color:var(--brass);background:transparent;
transition:background .3s ease,border-color .3s ease,color .3s ease;
cursor:pointer;
}
.btn:hover{background:rgba(214,186,138,.08);border-color:rgba(214,186,138,.5);color:var(--brass-hi)}
.btn--solid{background:var(--brass);border-color:var(--brass);color:var(--deep)}
.btn--solid:hover{background:var(--brass-hi);border-color:var(--brass-hi);color:var(--deep)}
.band--cream .btn{border-color:var(--hair-cream);color:var(--brass-dark)}
.band--cream .btn:hover{background:rgba(173,129,48,.07);border-color:rgba(173,129,48,.5);color:#8A6A2E}
.band--cream .btn--solid{background:var(--brass-dark);border-color:var(--brass-dark);color:var(--cream-panel)}
.band--cream .btn--solid:hover{background:#8A6A2E;border-color:#8A6A2E;color:var(--cream-panel)}
.btn-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:38px}
.text-link{
font-family:var(--label);font-size:11px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;
border-bottom:1px solid var(--hair-dark);padding-bottom:6px;
}
.band--cream .text-link{border-bottom-color:var(--hair-cream)}
/* ---------- header ---------- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:100;
transition:background .35s ease,border-color .35s ease,padding .35s ease;
border-bottom:1px solid transparent;
padding:22px 0;
}
.site-header.is-solid{
background:rgba(9,42,28,.94);
border-bottom-color:rgba(214,186,138,.16);
backdrop-filter:blur(10px);
padding:14px 0;
}
.header-inner{
max-width:1240px;margin:0 auto;padding:0 var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.brand img{height:62px;width:auto;transition:height .35s ease}
.site-header.is-solid .brand img{height:48px}
.nav-desktop{display:flex;align-items:center;gap:34px}
.nav-desktop>li{list-style:none;position:relative;display:flex;align-items:center}
.nav-link{
font-family:var(--label);font-size:10.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;
color:var(--body-dark);padding:10px 0;
display:inline-flex;align-items:center;line-height:1;
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--brass)}
.nav-link[aria-current="page"]{border-bottom:1px solid var(--hair-dark)}
.nav-cta{margin-left:6px;padding:13px 24px}
/* dropdown */
/* identical box for anchor + button nav items so nothing sits high or low */
.nav-desktop .nav-link{display:inline-flex;align-items:center;height:38px;padding:0;margin:0;line-height:1;vertical-align:middle;font:600 10.5px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:0;color:var(--body-dark);cursor:pointer}
.has-drop>.nav-link{gap:8px}
.has-drop .caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.drop{
position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);
min-width:270px;background:#0A2F20;
border:1px solid rgba(214,186,138,.22);
padding:14px 0;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.drop::before{content:"";position:absolute;top:-17px;left:0;right:0;height:17px}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.has-drop:hover .caret,.has-drop.open .caret{transform:rotate(225deg) translateY(-2px)}
.drop li{list-style:none}
.drop a{
display:block;padding:11px 26px;
font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--secondary-dark);
}
.drop a:hover{color:var(--brass);background:rgba(214,186,138,.05)}
.drop .drop-sep{height:1px;background:rgba(214,186,138,.14);margin:10px 26px}
/* mobile nav */
.nav-toggle{
display:none;background:none;border:1px solid var(--hair-dark);
padding:12px 14px;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:1px;background:var(--brass);transition:transform .3s ease,opacity .3s ease}
.nav-toggle span+span{margin-top:6px}
.mobile-nav{
position:fixed;inset:0;z-index:99;background:var(--deep);
display:none;overflow-y:auto;padding:110px var(--pad) 60px;
}
.mobile-nav.open{display:block}
body.nav-open{overflow:hidden}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav .m-group{padding:26px 0;border-bottom:1px solid rgba(214,186,138,.14)}
.mobile-nav .m-label{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:14px}
.mobile-nav a{display:block;font-family:var(--display);font-size:26px;color:var(--head-dark);padding:8px 0}
.mobile-nav a:hover{color:var(--brass)}
.mobile-nav .m-small a{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:10px 0;color:var(--secondary-dark)}
.mobile-nav .btn{margin-top:30px}
/* ---------- hero ---------- */
.hero{
min-height:88vh;display:flex;align-items:center;
padding:clamp(150px,18vh,210px) 0 clamp(80px,10vh,120px);
position:relative;
}
.hero--page{min-height:0;padding:clamp(150px,16vh,190px) 0 clamp(64px,8vh,96px)}
.frame{
position:absolute;inset:22px;border:1px solid var(--hair-dark-lo);
pointer-events:none;
}
.frame::before,.frame::after,
.frame .tick::before,.frame .tick::after{
content:"";position:absolute;width:26px;height:26px;border:0 solid var(--hair-dark);
}
.frame::before{top:-9px;left:-9px;border-top-width:1px;border-left-width:1px}
.frame::after{top:-9px;right:-9px;border-top-width:1px;border-right-width:1px}
.frame .tick::before{bottom:-9px;left:-9px;border-bottom-width:1px;border-left-width:1px}
.frame .tick::after{bottom:-9px;right:-9px;border-bottom-width:1px;border-right-width:1px}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:28ch}
.hero .tagline{
font-style:italic;font-size:clamp(19px,2vw,23px);color:var(--brass);
margin-top:26px;
}
.hero .lede{margin-top:22px}
.hero--center{text-align:center}
.hero--center h1,.hero--center .lede{margin-left:auto;margin-right:auto}
.hero--center .btn-row{justify-content:center}
.breadcrumbs{
font-family:var(--label);font-size:9.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);
margin-bottom:30px;
}
.breadcrumbs a{color:var(--muted-dark)}
.breadcrumbs a:hover{color:var(--brass)}
.breadcrumbs .sep{color:var(--brass);opacity:.55;margin:0 10px}
/* ---------- trust bar ---------- */
.trustbar{
display:flex;align-items:center;justify-content:space-between;gap:26px;
border:1px solid var(--hair-dark);background:var(--tint-dark);
padding:22px 30px;
}
a.trustbar{color:inherit}
a.trustbar:hover{background:rgba(214,186,138,.09);border-color:rgba(214,186,138,.45)}
.trustbar-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trustbar .g-mark{width:30px;height:30px;flex:none}
.stars{display:flex;gap:4px}
.stars svg{width:14px;height:14px;fill:var(--brass)}
.trustbar-title{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--head-dark)}
.trustbar-sub{font-style:italic;font-size:15px;color:var(--caption-dark);margin-top:4px}
.trustbar-go{font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.band--cream .trustbar{border-color:var(--hair-cream);background:var(--tint-cream)}
a.trustbar.band--cream:hover{background:rgba(255,255,255,.75)}
.band--cream .trustbar:hover{background:rgba(255,255,255,.75);border-color:rgba(173,129,48,.45)}
.band--cream .trustbar-title{color:var(--ink)}
.band--cream .trustbar-sub{color:var(--muted-cream)}
.band--cream .trustbar-go{color:var(--brass-dark)}
.band--cream .stars svg{fill:var(--brass-dark)}
/* stat strip (editorial) */
.stat-strip{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);
}
.stat-strip>div{
padding:30px 24px;text-align:center;
display:flex;flex-direction:column-reverse;gap:12px;justify-content:center;
}
.stat-strip>div+div{border-left:1px solid var(--hair-dark-lo)}
.stat-strip .s-val{font-family:var(--display);font-weight:600;font-size:23px;color:var(--brass);letter-spacing:.02em}
.stat-strip .s-cap{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);line-height:1.6}
.stat-strip--6{grid-template-columns:repeat(6,1fr)}
.stat-strip--6 .s-val{font-size:19px}
.stat-strip .count{font-variant-numeric:tabular-nums}
@media (max-width:1180px){
.stat-strip--6{grid-template-columns:repeat(3,1fr)}
.stat-strip--6>div:nth-child(3n+1){border-left:none}
.stat-strip--6>div:nth-child(n+4){border-top:1px solid var(--hair-dark-lo)}
}
@media (max-width:640px){
.stat-strip--6{grid-template-columns:repeat(2,1fr)}
.stat-strip--6>div{border-left:none !important}
.stat-strip--6>div:nth-child(2n){border-left:1px solid var(--hair-dark-lo) !important}
.stat-strip--6>div:nth-child(n+3){border-top:1px solid var(--hair-dark-lo)}
}
/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{
border:1px solid var(--hair-dark);background:var(--tint-dark);
padding:30px 28px;display:flex;flex-direction:column;
transition:border-color .35s ease,background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.card:hover{border-color:rgba(214,186,138,.5);background:rgba(214,186,138,.09);transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.band--cream .card{border-color:var(--hair-cream);background:var(--tint-cream)}
.band--cream .card:hover{border-color:rgba(173,129,48,.5);background:rgba(255,255,255,.8);box-shadow:0 18px 44px rgba(90,70,30,.14)}
.card h3{font-family:var(--body);font-style:italic;font-weight:600;font-size:21px;letter-spacing:.01em;color:var(--brass);margin-bottom:14px}
.band--cream .card h3{color:var(--brass-dark)}
.card p{font-size:16.5px;line-height:1.55;color:var(--secondary-dark)}
.band--cream .card p{color:var(--body-cream)}
.card .card-go{margin-top:auto;padding-top:22px;font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);transition:transform .3s ease,color .3s ease;display:inline-block;align-self:flex-start}
.band--cream .card .card-go{color:var(--brass-dark)}
.card:hover .card-go{transform:translateX(5px);color:var(--brass-hi)}
.band--cream .card:hover .card-go{color:#8A6A2E}
.card{position:relative;overflow:hidden}
.card .ghost{position:absolute;top:-14px;right:6px;font-family:var(--display);font-size:96px;line-height:1;color:rgba(214,186,138,.08);pointer-events:none;transition:color .4s ease,transform .5s ease}
.band--cream .card .ghost{color:rgba(173,129,48,.09)}
.card:hover .ghost{color:rgba(214,186,138,.15);transform:translateY(-4px)}
.band--cream .card:hover .ghost{color:rgba(173,129,48,.16)}
.card svg.ghost{top:10px;right:12px;width:112px;height:112px;fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;color:rgba(173,129,48,.13)}
.band--cream .card svg.ghost{color:rgba(173,129,48,.13)}
.band--cream .card:hover svg.ghost{color:rgba(173,129,48,.22)}
a.card-link{display:flex;color:inherit}
/* numbered steps */
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.step .num{
font-family:var(--display);font-weight:600;font-size:28px;
color:var(--brass);letter-spacing:-.01em;line-height:1;padding-top:2px;
}
.band--cream .step .num{color:var(--brass-dark)}
.step h3{margin-bottom:10px}
/* ---------- pull quote ---------- */
.quote{
border-left:2px solid var(--brass);padding-left:26px;
font-family:var(--body);font-style:italic;
font-size:clamp(21px,2.3vw,26px);line-height:1.42;
color:var(--head-dark);max-width:34ch;
}
.band--cream .quote{color:var(--ink);border-left-color:var(--brass-dark)}
.quote-attr{
font-family:var(--label);font-size:10.5px;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
margin-top:22px;
}
.band--cream .quote-attr{color:var(--brass-dark)}
/* ---------- data rows ---------- */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:40px}
.data-row{
display:flex;justify-content:space-between;align-items:baseline;gap:24px;
padding:15px 2px;border-bottom:1px solid rgba(214,186,138,.20);
}
.band--cream .data-row{border-bottom-color:rgba(173,129,48,.20)}
.data-row .d-label{font-size:17px;color:var(--secondary-dark)}
.band--cream .data-row .d-label{color:var(--body-cream)}
.data-row .d-val{font-family:var(--display);font-weight:600;font-size:18px;color:var(--brass);text-align:right;white-space:nowrap}
.band--cream .data-row .d-val{color:var(--brass-dark)}
/* Phones: the nowrap value cannot shrink, so a long value forces the row
(and with it the whole page) wider than the screen. Stack label over
value instead, which also reads better on a phone. */
@media (max-width:600px){
.data-row{flex-direction:column;align-items:flex-start;gap:3px}
.data-row .d-val{text-align:left;white-space:normal}
}
/* the one big number */
.bignum{text-align:center}
.bignum .n{
font-family:var(--display);font-weight:700;
font-size:clamp(46px,6vw,62px);letter-spacing:-.022em;
color:var(--brass-hi);line-height:1;
}
.bignum .n-cap{
font-family:var(--label);font-size:10.5px;font-weight:600;
letter-spacing:.3em;text-transform:uppercase;color:var(--muted-dark);
margin-top:18px;
}
/* ---------- photo plates (placeholder-ready) ---------- */
.plate{
position:relative;overflow:hidden;
background:var(--emerald) radial-gradient(110% 90% at 50% 10%, rgba(46,138,98,.5), rgba(12,54,37,0) 65%);
border:1px solid var(--hair-dark);
aspect-ratio:4/3;
}
.plate--wide{aspect-ratio:16/9}
.plate--cinema{aspect-ratio:21/9}
.plate--43{aspect-ratio:4/3}
.plate--tall{aspect-ratio:3/4}
.plate--square{aspect-ratio:1/1}
.plate::before{
content:"";position:absolute;inset:14px;border:1px solid var(--hair-dark-lo);pointer-events:none;z-index:2;
}
.plate img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .8s ease;
}
a.plate-link:hover .plate img{transform:scale(1.045)}
.plate .plate-mark{
position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
width:min(120px,26%);opacity:.10;z-index:1;
}
.plate .plate-slot{
position:absolute;top:26px;left:0;right:0;text-align:center;z-index:2;
max-width:none;
font-family:var(--label);font-size:8.5px;font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:rgba(214,186,138,.5);
padding:0 30px;
}
.plate .plate-cap{
position:absolute;left:0;right:0;bottom:0;z-index:3;
padding:56px 28px 24px;
background:linear-gradient(to top, rgba(5,22,14,.85), rgba(5,22,14,0));
}
.plate .plate-cap .p-eyebrow{
font-family:var(--label);font-size:9px;font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;
}
.plate .plate-cap .p-title{
font-family:var(--display);font-weight:600;font-size:21px;color:var(--head-dark);line-height:1.2;
}
a.plate-link{color:inherit;display:block;transition:border-color .3s ease}
a.plate-link:hover .plate{border-color:rgba(214,186,138,.5)}
a.plate-link:hover .p-title{color:var(--brass-hi)}
.plate-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.plate-row--2{grid-template-columns:repeat(2,1fr)}
.plate-note{margin-top:18px;text-align:center}
/* gallery: masonry collage, natural proportions, no gaps */
.gallery{columns:3;column-gap:18px;margin-top:50px}
.gallery .gitem{display:block;break-inside:avoid;margin:0 0 18px;position:relative;border:1px solid var(--hair-dark);background:var(--emerald)}
.gallery .gitem img{width:100%;height:auto;display:block}
.gallery .gitem::after{content:"";position:absolute;inset:10px;border:1px solid var(--hair-dark-lo);pointer-events:none}
@media (max-width:1020px){.gallery{columns:2}}
@media (max-width:600px){.gallery{columns:1;column-gap:14px}.gallery .gitem{margin-bottom:14px}}
/* ---------- specs bar (project pages) ---------- */
.specs{
display:flex;flex-wrap:wrap;gap:0;
border:1px solid var(--hair-dark);background:var(--tint-dark);
margin-top:44px;
}
.specs>div{padding:20px 28px;flex:1 1 auto;min-width:150px}
.specs>div+div{border-left:1px solid var(--hair-dark-lo)}
.specs .sp-label{font-family:var(--label);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:8px}
.specs .sp-val{font-family:var(--display);font-weight:600;font-size:17px;color:var(--brass)}
/* ---------- FAQ (open text, crawlable) ---------- */
.faq-list{margin-top:46px}
.faq-item{padding:32px 2px;border-bottom:1px solid rgba(214,186,138,.20)}
.band--cream .faq-item{border-bottom-color:rgba(173,129,48,.20)}
.faq-item:first-child{border-top:1px solid rgba(214,186,138,.20)}
.band--cream .faq-item:first-child{border-top-color:rgba(173,129,48,.20)}
.faq-item h3{font-size:22px;margin-bottom:14px}
.faq-item p{font-size:17.5px}
.faq-group-label{margin-top:64px}
/* ---------- lists ---------- */
.brass-list{list-style:none;margin-top:26px}
.brass-list li{
position:relative;padding:13px 0 13px 34px;font-size:17.5px;
border-bottom:1px solid rgba(214,186,138,.14);
}
.band--cream .brass-list li{border-bottom-color:rgba(173,129,48,.16)}
.brass-list li::before{
content:"";position:absolute;left:2px;top:24px;width:16px;height:1px;background:var(--brass);
}
.band--cream .brass-list li::before{background:var(--brass-dark)}
.brass-list li:last-child{border-bottom:none}
/* ---------- press / partners ---------- */
display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
gap:20px 46px;margin-top:40px;
}
font-family:var(--body);font-style:italic;font-weight:500;
font-size:19px;color:var(--muted-dark);
}
.partner-row{
display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:34px;
}
.partner-row span{
font-family:var(--label);font-size:10px;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);
}
/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:50px}
.form-grid .full{grid-column:1/-1}
.field label{
display:block;font-family:var(--label);font-size:10px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
margin-bottom:12px;
}
.band--cream .field label{color:var(--eyebrow-cream)}
.field input,.field select,.field textarea{
width:100%;background:rgba(214,186,138,.05);
border:1px solid var(--hair-dark);
color:var(--head-dark);font-family:var(--body);font-size:18px;
padding:15px 18px;border-radius:0;appearance:none;
}
.band--cream .field input,.band--cream .field select,.band--cream .field textarea{
background:rgba(255,255,255,.6);border-color:var(--hair-cream);color:var(--ink);
}
.field select{
background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%;
background-size:6px 6px;background-repeat:no-repeat;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:rgba(214,186,138,.6);
}
.band--cream .field input:focus,.band--cream .field select:focus,.band--cream .field textarea:focus{border-color:rgba(173,129,48,.6)}
/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band h2{max-width:22ch;margin:0 auto}
.cta-band .lede{margin:26px auto 0}
.cta-band p,.cta-band .eyebrow{margin-left:auto;margin-right:auto}
.cta-band .lede{margin-top:26px}
.cta-band .btn-row{justify-content:center;margin-top:42px}
.center p,.center .eyebrow{margin-left:auto;margin-right:auto}
.plate-cap .p-eyebrow,.plate-cap .p-title,.stat-strip p,.specs p{max-width:none}
/* ---------- footer ---------- */
.site-footer{
background:#092A1C;border-top:1px solid rgba(214,186,138,.16);
padding:clamp(70px,8vw,100px) 0 44px;color:var(--secondary-dark);
}
.footer-grid{
display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px;
}
.footer-brand img{height:38px;width:auto;margin-bottom:26px}
.footer-brand .f-tag{font-style:italic;font-size:16px;color:var(--brass);margin-bottom:22px}
.footer-brand p{font-size:15.5px;line-height:1.6;color:var(--muted-dark);max-width:38ch}
.f-col h2{
font-family:var(--label);font-size:10px;font-weight:600;
letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
margin-bottom:22px;
}
.f-col ul{list-style:none}
.f-col li{margin-bottom:11px}
.f-col a{font-size:16px;color:var(--secondary-dark)}
.f-col a:hover{color:var(--brass)}
.f-col .f-muted{font-size:14px;color:var(--muted-dark);font-style:italic;line-height:1.7;margin-top:16px;max-width:30ch}
.f-contact li{font-size:16px;color:var(--secondary-dark)}
.footer-rail{
margin-top:70px;padding-top:28px;
border-top:1px solid rgba(214,186,138,.14);
display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.footer-rail p{
font-family:var(--label);font-size:9.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);
}
/* ---------- reveal (animation-based so hover transitions stay instant) ---------- */
.reveal{opacity:0}
.reveal.in{animation:revealUp .75s cubic-bezier(.22,.61,.36,1) both}
@keyframes revealUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cards>*.in:nth-child(2),.plate-row>*.in:nth-child(2),.roles>*.in:nth-child(2){animation-delay:.09s}
.cards>*.in:nth-child(3),.plate-row>*.in:nth-child(3),.roles>*.in:nth-child(3){animation-delay:.18s}
.cards>*.in:nth-child(4),.plate-row>*.in:nth-child(4),.roles>*.in:nth-child(4){animation-delay:.27s}
.cards>*.in:nth-child(5),.roles>*.in:nth-child(5){animation-delay:.36s}
.cards>*.in:nth-child(6),.roles>*.in:nth-child(6){animation-delay:.45s}
.reveal .rule{width:0;transition:width .9s cubic-bezier(.22,.61,.36,1) .35s}
.reveal.in .rule{width:70px}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1}
.reveal.in{animation:none}
.reveal .rule{width:70px;transition:none}
}
/* ---------- utilities ---------- */
.mt-0{margin-top:0}.mt-20{margin-top:20px}.mt-40{margin-top:40px}.mt-60{margin-top:60px}.mt-80{margin-top:80px}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.grid-2--tight{gap:40px}
.steps-col{display:grid;gap:26px;margin-top:56px}
.prevnext{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* ---------- responsive ---------- */
@media (max-width:1020px){
.cards,.plate-row{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.stat-strip{grid-template-columns:repeat(2,1fr)}
.stat-strip>div:nth-child(3){border-left:none}
.stat-strip>div:nth-child(n+3){border-top:1px solid var(--hair-dark-lo)}
.gallery{grid-template-columns:repeat(2,1fr)}
.gallery .g-wide{grid-column:span 2}
}
@media (max-width:880px){
.nav-desktop{display:none}
.nav-toggle{display:block}
.grid-2{grid-template-columns:1fr;gap:44px}
.data-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.hero{min-height:74vh}
.frame{inset:14px}
}
/* ---------- cinematic hero ---------- */
.hero--media{min-height:96vh}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;transform:scale(1.1);animation:heroZoom 16s ease-out forwards}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg, rgba(7,30,20,.93) 0%, rgba(7,30,20,.66) 42%, rgba(7,30,20,.28) 72%, rgba(7,30,20,.5) 100%)}
.hero-scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(7,30,20,.82), rgba(7,30,20,0) 42%),linear-gradient(to bottom, rgba(7,30,20,.55), rgba(7,30,20,0) 24%)}
.hero-tint{position:absolute;inset:0;background:rgba(12,54,37,.32);mix-blend-mode:multiply}
@keyframes heroZoom{to{transform:scale(1.02)}}
.hero-display{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.7vw,57px);letter-spacing:.06em;line-height:1.18;color:var(--head-dark);text-wrap:balance;max-width:20ch}
.hero-display .line2{display:block;font-family:var(--body);font-style:italic;text-transform:none;font-weight:500;color:var(--brass);letter-spacing:.015em;font-size:1.05em;margin-top:6px}
h1.hero-kicker{font-size:clamp(12.5px,1.25vw,16px);font-weight:500;letter-spacing:.24em;line-height:1.9;color:var(--brass);max-width:none;margin-top:36px}
.hero-seq>*{opacity:0;transform:translateY(16px);animation:heroIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.hero-seq>*:nth-child(1){animation-delay:.15s}
.hero-seq>*:nth-child(2){animation-delay:.35s}
.hero-seq>*:nth-child(3){animation-delay:.6s}
.hero-seq>*:nth-child(4){animation-delay:.85s}
.hero-seq>*:nth-child(5){animation-delay:1.05s}
.hero-seq>*:nth-child(6){animation-delay:1.2s}
@keyframes heroIn{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:34px;width:1px;height:52px;background:linear-gradient(to bottom,var(--brass),transparent);z-index:2;animation:cuePulse 2.4s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.25}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){
.hero-bg img,.hero-bg video{animation:none;transform:none}
.hero-seq>*{opacity:1;transform:none;animation:none}
.scroll-cue{animation:none}
}
/* ---------- before / after ---------- */
.ba{position:relative;overflow:hidden;border:1px solid var(--hair-dark);aspect-ratio:4/5;user-select:none;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;max-width:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;background:var(--brass);z-index:3;pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:48px;height:48px;border:1px solid var(--brass);border-radius:50%;background:rgba(9,42,28,.82);backdrop-filter:blur(4px);z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;pointer-events:none}
.ba-grip::before{content:"";width:7px;height:7px;border-left:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(45deg)}
.ba-grip::after{content:"";width:7px;height:7px;border-left:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(225deg)}
.ba-tag{position:absolute;top:16px;z-index:3;font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--head-dark);background:rgba(9,42,28,.74);padding:7px 13px;pointer-events:none}
.ba-tag--b{left:16px}
.ba-tag--a{right:16px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
.ba input[type=range]:focus-visible{opacity:1;outline:2px solid var(--brass-hi);outline-offset:-2px;background:transparent}
/* ---------- youtube card ---------- */
.yt-card{position:relative;display:block;overflow:hidden;border:1px solid var(--hair-dark);aspect-ratio:16/9;color:inherit;cursor:pointer;width:100%;padding:0;background:var(--deep);text-align:left}
.yt-card:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.yt-card.playing::before,.yt-card.playing .yt-play,.yt-card.playing .yt-meta{display:none}
.band--cream .yt-card{border-color:var(--hair-cream)}
.yt-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.yt-card:hover img{transform:scale(1.035)}
.yt-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(7,30,20,.78), rgba(7,30,20,.05) 48%);z-index:1}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:82px;height:58px;z-index:2;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));transition:transform .3s ease}
.yt-card:hover .yt-play{transform:translate(-50%,-58%) scale(1.09)}
.yt-meta{position:absolute;left:26px;right:26px;bottom:22px;z-index:2}
.yt-meta .yt-title{font-family:var(--display);font-size:19px;letter-spacing:.04em;color:var(--head-dark);line-height:1.3}
.yt-meta .yt-sub{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-top:9px}
/* ---------- logo rows ---------- */
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 46px;margin-top:38px}
.logo-row img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.68;transition:opacity .3s ease}
.logo-row img:hover{opacity:1}
.logo-row--mag img{height:40px}
.logo-row .logo-text{font-family:var(--label);font-size:12.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--body-dark);opacity:.68;transition:opacity .3s ease}
.logo-row .logo-text:hover{opacity:1}
/* ---------- process path (condensed) ---------- */
.path-wrap{position:relative;margin-top:52px}
.path-steps{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);position:relative}
.path-steps::before{content:"";position:absolute;left:50%;top:24px;bottom:24px;border-left:1.5px dashed rgba(214,186,138,.35);transform:translateX(-50%)}
.path-progress{position:absolute;left:50%;top:24px;width:2px;background:linear-gradient(to bottom,var(--brass-hi),var(--brass));transform:translateX(-50%);height:0;z-index:1}
.path-step{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center}
.path-node{grid-column:2;grid-row:1;justify-self:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-dark);background:rgba(8,32,21,.9);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;color:var(--brass);transition:all .5s ease;position:relative;z-index:2}
.path-step.on .path-node{background:var(--brass);color:var(--deep);border-color:var(--brass);box-shadow:0 0 0 7px rgba(214,186,138,.12)}
.path-card{grid-column:1;grid-row:1;background:var(--tint-dark);border:1px solid var(--hair-dark);padding:15px 18px;max-width:430px;justify-self:end;width:100%;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.path-step:nth-child(even) .path-card{grid-column:3;justify-self:start}
.path-card:hover{transform:translateY(-3px);border-color:rgba(214,186,138,.5);background:rgba(214,186,138,.1)}
.path-card h3{font-family:var(--display);font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.path-card p{font-size:15px;line-height:1.45;color:var(--secondary-dark);max-width:none}
@media (max-width:880px){
.path-step{grid-template-columns:56px 1fr}
.path-node{grid-column:1;width:40px;height:40px;font-size:13px;align-self:start}
.path-card,.path-step:nth-child(even) .path-card{grid-column:2;justify-self:stretch;max-width:none}
.path-steps::before,.path-progress{left:27px;transform:none}
}
/* ---------- brass line icons ---------- */
.pic{width:19px;height:19px;stroke:var(--brass);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .3s ease}
.path-step.on .pic,.path-card:hover .pic{transform:scale(1.12)}
.band--cream .pic{stroke:var(--brass-dark)}
.role .pic{width:21px;height:21px;margin-top:3px}
/* ---------- team roles ---------- */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;margin-top:8px}
.role{display:flex;gap:13px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid rgba(173,129,48,.16)}
.role:nth-last-child(-n+2){border-bottom:none}
.role .r-title{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.role p{font-size:14.5px;line-height:1.45;color:var(--muted-cream);max-width:none;margin-top:4px}
@media (max-width:640px){.roles{grid-template-columns:1fr}.role:nth-last-child(-n+2){border-bottom:1px solid rgba(173,129,48,.16)}.role:last-child{border-bottom:none}}
/* ---------- real map backdrop (side reveal) ---------- */
.map-real{position:relative;overflow:hidden}
.map-real .map-photo{
position:absolute;top:0;bottom:0;right:0;width:min(46%,620px);height:100%;
object-fit:cover;object-position:center top;
filter:sepia(.8) hue-rotate(96deg) saturate(.95) brightness(1.7) contrast(1.02);
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 52%);
mask-image:linear-gradient(to right, transparent 0%, #000 52%);
opacity:.8;
}
.map-real .map-shade{position:absolute;inset:0;pointer-events:none;background:
linear-gradient(to top, rgba(12,54,37,.6), rgba(12,54,37,0) 20%),
linear-gradient(to bottom, rgba(12,54,37,.6), rgba(12,54,37,0) 20%)}
.map-real .wrap{position:relative;z-index:1}
.map-real .section-head{max-width:560px}
.map-real .cards--2{grid-template-columns:1fr;max-width:500px}
.map-real .card{background:rgba(8,32,21,.6);backdrop-filter:blur(2px)}
.map-attr{position:absolute;right:14px;bottom:10px;z-index:1;font-family:var(--label);font-size:8.5px;letter-spacing:.08em;color:rgba(214,186,138,.45)}
.map-attr a{color:rgba(214,186,138,.55)}
@media (max-width:880px){
.map-real .map-photo{width:100%;opacity:.22;mask-image:none;-webkit-mask-image:none}
}
/* Photo slots: invisible to visitors; review.js reveals them in review mode
so Max can click one and pick the photo that belongs there. */
.photo-slot{display:none}
/* Guarantee list: icon + label + gold detail, per Max's reference layout */
.glist{display:flex;flex-direction:column}
.g-row{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--hair-cream)}
.g-row:last-child{border-bottom:none}
.g-row .pic{width:30px;height:30px;flex:none;fill:none;stroke:var(--brass-dark);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.g-row h3{margin-bottom:7px}
.g-detail{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:.01em;color:var(--brass-dark);font-size:17px;margin-left:12px}
.band--dark .g-row{border-color:var(--hair-dark)}
.band--dark .g-row .pic{stroke:var(--brass)}
.band--dark .g-detail{color:var(--brass)}
@media (max-width:640px){.g-row{gap:14px}.g-detail{display:block;margin:4px 0 0}}
/* Pricing tiers */
.tier{padding:20px 0;border-bottom:1px solid var(--hair-cream)}
.band--dark .tier{border-color:var(--hair-dark)}
.tier:last-of-type{border-bottom:none}
.tier-range{font-family:var(--display);font-weight:600;font-size:26px;color:var(--brass-dark);letter-spacing:.02em;margin:8px 0 2px}
.band--dark .tier-range{color:var(--brass)}
.guide-form input[type=email]{background:rgba(255,255,255,.7);border:1px solid var(--hair-cream);padding:12px 16px;font:inherit;color:inherit}
/* ---------- photo hero for inner pages (service + area) ---------- */
.hero--photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:min(62vh,640px);padding:clamp(150px,16vh,190px) 0 clamp(56px,7vh,84px)}
.hero--photo .wrap{position:relative;z-index:2;width:100%}
.hero--photo .hero-bg img{animation:heroZoom 18s ease-out forwards}
.hero--photo .lede{max-width:56ch}
@media (prefers-reduced-motion:reduce){.hero--photo .hero-bg img{animation:none;transform:none}}
/* ---------- FAQ accordions + category chips ---------- */
details.faq-item{padding:0;border-bottom:1px solid rgba(214,186,138,.20)}
.band--cream details.faq-item{border-bottom-color:rgba(173,129,48,.20)}
details.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:26px 2px;user-select:none}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary h3{margin:0;transition:color .25s ease}
details.faq-item summary::after{content:"+";flex:none;font-family:var(--display);font-size:22px;line-height:1;color:var(--brass-dark);transition:transform .3s ease}
.band--dark details.faq-item summary::after{color:var(--brass)}
details.faq-item[open] summary::after{transform:rotate(45deg)}
details.faq-item summary:hover h3{color:var(--brass-dark)}
.band--dark details.faq-item summary:hover h3{color:var(--brass)}
details.faq-item>p{padding:0 2px 28px;font-size:17.5px;max-width:66ch}
.faq-group-label{margin-top:64px}
.faqfilter [data-cat].hide,[data-cat].hide{display:none}
/* ---------- guide band (in-flow lead magnet) ---------- */
.guide-band .g-cover{width:min(300px,68vw);box-shadow:0 18px 50px rgba(0,0,0,.45);border:1px solid var(--hair-dark);transform:rotate(-2deg)}
.guide-band .g-trust{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.guide-band .g-trust img{height:18px;width:auto;filter:brightness(0) invert(1);opacity:.55}
.guide-band .g-trust span{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.guide-band .guide-form input[type=email]{background:rgba(255,255,255,.08);border:1px solid var(--hair-dark);color:var(--body-dark);min-width:240px}
.guide-band .guide-form input[type=email]::placeholder{color:var(--muted-dark)}
/* ---------- faint section watermark icon ---------- */
.section-ghost{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:min(330px,28vw);height:min(330px,28vw);fill:none;stroke:var(--brass);stroke-width:.55;stroke-linecap:round;stroke-linejoin:round;opacity:.055;pointer-events:none}
.band--cream .section-ghost{stroke:var(--brass-dark);opacity:.07}
@media (max-width:880px){.section-ghost{display:none}}
/* ---------- location pin in project specs ---------- */
.sp-pin{width:12px;height:12px;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px;margin-right:7px}
/* ---------- gallery interactivity + lightbox ---------- */
.gitem{overflow:hidden}
.gitem img{transition:transform .7s ease,filter .4s ease;cursor:zoom-in}
.gitem:hover img{transform:scale(1.045)}
#lightbox{position:fixed;inset:0;z-index:400;background:rgba(6,22,15,.94);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
#lightbox.open{display:flex}
#lightbox img{max-width:min(92vw,1400px);max-height:88vh;width:auto;height:auto;border:1px solid var(--hair-dark);box-shadow:0 30px 90px rgba(0,0,0,.6)}
#lightbox .lb-close{position:absolute;top:22px;right:26px;background:none;border:none;color:var(--brass);font-family:var(--display);font-size:34px;line-height:1;cursor:pointer}
#lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(12,54,37,.55);border:1px solid var(--hair-dark);color:var(--brass);font-family:var(--display);font-size:26px;line-height:1;width:52px;height:52px;border-radius:50%;cursor:pointer;transition:background .25s ease}
#lightbox .lb-nav:hover{background:rgba(26,100,73,.8)}
#lightbox .lb-prev{left:24px}
#lightbox .lb-next{right:24px}
#lightbox .lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--label);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--brass)}
@media (max-width:640px){#lightbox .lb-nav{width:42px;height:42px}#lightbox .lb-prev{left:10px}#lightbox .lb-next{right:10px}}
/* ==========================================================================
POLISH LAYER (2026-09-02): the subtle, expensive-feeling details.
All transform/opacity based; every motion piece respects reduced-motion.
========================================================================== */
/* staggered section reveals: eyebrow -> headline -> rule -> lede */
.section-head.reveal{opacity:1}
html.js .section-head.reveal>*{opacity:0}
.section-head.reveal.in{animation:none}
.section-head.reveal.in>*{animation:revealUp .8s cubic-bezier(.22,.61,.36,1) both}
.section-head.reveal.in>*:nth-child(1){animation-delay:.05s}
.section-head.reveal.in>*:nth-child(2){animation-delay:.18s}
.section-head.reveal.in>*:nth-child(3){animation-delay:.3s}
.section-head.reveal.in>*:nth-child(4){animation-delay:.42s}
.section-head.reveal.in>*:nth-child(n+5){animation-delay:.52s}
.section-head.reveal.in h2{animation:revealUp .8s cubic-bezier(.22,.61,.36,1) both .18s, headTrack 1.6s cubic-bezier(.22,.61,.36,1) both .18s}
@keyframes headTrack{from{letter-spacing:.11em}to{letter-spacing:.05em}}
/* curtain reveal for photo plates + gallery tiles */
.plate.reveal.in,.reveal.in>.plate,.plate-link.reveal.in .plate{animation:curtain 1.1s cubic-bezier(.77,0,.175,1) both}
.plate.reveal.in img,.reveal.in>.plate img,.plate-link.reveal.in .plate img{animation:settle 1.4s cubic-bezier(.22,.61,.36,1) both}
.gitem.reveal.in{animation:curtain .9s cubic-bezier(.77,0,.175,1) both}
@keyframes curtain{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
/* images still loading when the script runs fade in on arrival (JS adds .fade, then .ld);
images already decoded are never hidden, so a slow script can't blank a photo */
img.fade{opacity:0;transition:opacity .7s ease}
img.fade.ld{opacity:1}
/* film grain on photo heroes */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* nav: underline draws in from the left */
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{border-bottom:none}
/* body text links: hairline underline slides in */
main p a:not(.btn),main li a:not(.btn),.site-footer li a:not(.btn),.caption a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s ease,color .25s ease;padding-bottom:1px}
main p a:not(.btn):hover,main li a:not(.btn):hover,.site-footer li a:not(.btn):hover,.caption a:hover{background-size:100% 1px}
/* editorial drop cap */
.dropcap::first-letter{font-family:var(--body);font-style:italic;font-weight:500;font-size:3.4em;float:left;line-height:.82;padding:.08em .14em 0 0;color:var(--brass)}
.band--cream .dropcap::first-letter{color:var(--brass-dark)}
/* quotes: ghosted opening mark */
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;left:-14px;top:-42px;font-family:var(--display);font-size:150px;line-height:1;color:var(--brass);opacity:.13;pointer-events:none}
/* footer: giant ghosted wordmark */
.site-footer{position:relative;overflow:hidden}
.footer-word{position:absolute;left:50%;bottom:-.22em;transform:translateX(-50%);font-family:var(--display);font-weight:600;font-size:clamp(90px,17vw,300px);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);opacity:.035;white-space:nowrap;pointer-events:none;user-select:none;line-height:1}
.site-footer .wrap{position:relative;z-index:1}
/* scroll progress hairline */
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(to right,var(--brass-dark),var(--brass));z-index:120;pointer-events:none;transition:width .1s linear}
/* page transitions: class-driven so a paused tab can never strand the page invisible */
html.js body{opacity:0;transition:opacity .5s ease}
html.js body.ready{opacity:1}
html.js body.leaving{opacity:0;transition:opacity .22s ease}
/* marquee pauses on hover; magnetic buttons need transform transitions */
.marquee:hover .marquee-track{animation-play-state:paused}
.btn{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .25s cubic-bezier(.22,.61,.36,1)}
/* keyboard focus */
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
/* scrollbar */
html{scrollbar-color:var(--brass-dark) var(--deep);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--brass-dark);border-radius:6px;border:2px solid var(--deep)}
/* next / previous project cards */
.prevnext-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.prevnext-cards .plate{aspect-ratio:16/9}
.prevnext-cards .p-eyebrow::before{content:"\2190 ";}
.prevnext-cards .plate-link:last-child .p-eyebrow::before{content:""}
.prevnext-cards .plate-link:last-child .p-eyebrow::after{content:" \2192";}
@media (max-width:640px){.prevnext-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.section-head.reveal.in>*,.section-head.reveal.in h2,.plate.reveal.in,.reveal.in>.plate,.plate-link.reveal.in .plate,.gitem.reveal.in,.plate.reveal.in img,.reveal.in>.plate img,.plate-link.reveal.in .plate img{animation:none;opacity:1;clip-path:none;transform:none}
html.js body{animation:none}
html.js .gallery img,html.js .plate img,html.js .mtile img{opacity:1}
}
/* ---------- fixes 2026-09-02: hero bleed, footer wordmark, magazine plate ---------- */
/* Parallax moves .hero-bg downward on scroll; clip it to the hero and over-size it so the edge never shows */
.hero{overflow:hidden}
.hero .hero-bg{top:-16%;bottom:-16%}
/* Footer wordmark: the original treatment — giant REVIVAL anchored at the bottom edge, behind everything,
cropped by the footer; the rail line crossing it is intentional (Max's call, 2026-09-02, final) */
/* ---------- paid-traffic landing pages ---------- */
/* landing mode: strip the site nav so the page has one exit, the form */
body:has(.landing-mode) .nav-desktop>li:not(:last-child){display:none}
body:has(.landing-mode) .mobile-nav .m-group{display:none}
body:has(.landing-mode) .lead-pop{display:none}
.landing-hero{min-height:0;align-items:center;padding-top:clamp(130px,15vh,170px)}
.landing-hero .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center}
.landing-hero h1{font-size:clamp(27px,3.4vw,44px)}
.mini-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px}
.mini-trust span{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.mini-trust span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--brass);margin-right:9px;vertical-align:2px}
.lead-card{background:rgba(9,42,28,.78);backdrop-filter:blur(10px);border:1px solid var(--hair-dark);padding:clamp(24px,3vw,36px);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.lead-card h2{font-size:clamp(17px,1.6vw,19px);font-weight:500;letter-spacing:.04em;text-transform:none;line-height:1.35}
.lead-card h2,.lead-card h3{margin:6px 0 6px}
.lead-card .caption{margin-bottom:18px}
.lead-form .field{margin-bottom:12px}
.lead-form label{display:block;font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.lead-form input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--hair-dark);padding:12px 14px;font:inherit;font-size:16px;color:var(--body-dark)}
.lead-form input:focus{outline:none;border-color:var(--brass)}
.lead-form .btn{width:100%;margin-top:6px;text-align:center}
.lead-form .lp-fine{font-size:13px;font-style:italic;color:var(--muted-dark);margin-top:12px;line-height:1.45}
.lead-card--cream{background:var(--cream-panel);border-color:var(--hair-cream);box-shadow:0 24px 60px rgba(90,70,30,.14);text-align:left}
.lead-card--cream .lead-form label{color:var(--brass-dark)}
.lead-card--cream .lead-form input{background:#fff;border-color:var(--hair-cream);color:var(--ink)}
.lead-card--cream .lead-form .lp-fine{color:var(--muted-cream)}
.cta-band .lead-card--cream h3,.cta-band .lead-card--cream p{margin-left:0;margin-right:0}
.sticky-cta{display:none}
@media (max-width:880px){
.landing-hero .hero-grid{grid-template-columns:1fr}
.sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;gap:8px;padding:10px 12px;background:rgba(9,42,28,.96);border-top:1px solid var(--hair-dark);backdrop-filter:blur(8px)}
.sticky-cta .btn{flex:1;text-align:center;padding:14px 10px;font-size:10px}
body:has(.sticky-cta){padding-bottom:70px}
}
/* ---------- About crest: the window panes dissolve into the cross ----------
The R stays solid the whole time. Only the window animates: the panes fade out
while the mullion cross rises in white light, then the window returns. 10s loop.
Layered images (base = mark with panes erased, panes = panes only) keep it seamless.
Bar positions are exact percentages of mark-r.png (414x431), measured from pixels. */
.about-hero-grid{grid-template-columns:1.5fr .5fr}
.logo-cross-wrap{display:flex;justify-content:flex-start}
.logo-cross{position:relative;width:min(230px,52vw);opacity:.6;
transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.logo-cross img{width:100%;height:auto;display:block}
.logo-cross img.panes{position:absolute;inset:0;opacity:1;transition:opacity .75s ease}
.logo-cross .cross-v,.logo-cross .cross-h{position:absolute;background:var(--head-dark);opacity:0;transition:opacity .75s ease,box-shadow .75s ease}
.logo-cross .cross-v{left:36.96%;top:76.80%;width:2.66%;height:15.78%}
.logo-cross .cross-h{left:32.13%;top:81.44%;width:12.32%;height:2.09%}
/* one demonstration cycle on page load, then hover owns it */
@keyframes panesIntro{0%,18%{opacity:1}48%,62%{opacity:0}92%,100%{opacity:1}}
@keyframes crossIntro{
0%,22%{opacity:0;box-shadow:0 0 0 rgba(243,237,223,0)}
48%,62%{opacity:1;box-shadow:0 0 9px rgba(243,237,223,.3)}
92%,100%{opacity:0;box-shadow:0 0 0 rgba(243,237,223,0)}
}
@media (hover:hover){
.logo-cross img.panes{animation:panesIntro 4.6s ease-in-out 1 .7s}
.logo-cross .cross-v,.logo-cross .cross-h{animation:crossIntro 4.6s ease-in-out 1 .7s}
.logo-cross:hover{transform:translateY(-6px) scale(1.025);opacity:.85}
.logo-cross:hover img.panes{opacity:0;animation:none}
.logo-cross:hover .cross-v,.logo-cross:hover .cross-h{opacity:1;animation:none;
box-shadow:0 0 9px rgba(243,237,223,.3)}
}
@media (hover:none){
.logo-cross img.panes{animation:panesIntro 6s ease-in-out infinite}
.logo-cross .cross-v,.logo-cross .cross-h{animation:crossIntro 6s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
.logo-cross,.logo-cross img.panes,.logo-cross .cross-v,.logo-cross .cross-h{animation:none;transition:none}
.logo-cross img.panes{opacity:.25}
.logo-cross .cross-v,.logo-cross .cross-h{opacity:.95;box-shadow:0 0 9px rgba(243,237,223,.3)}
}
@media (max-width:880px){
.about-hero-grid{grid-template-columns:1fr}
.logo-cross-wrap{justify-content:center;margin-top:10px}
.logo-cross{width:min(190px,50vw)}
}
/* ---------- guide teaser fan ---------- */
.g-stack{position:relative;display:inline-block}
.g-stack .g-cover{position:relative;z-index:2}
.g-stack .g-page2{position:absolute;top:6%;left:14%;width:min(300px,68vw);transform:rotate(4deg);opacity:.85;border:1px solid var(--hair-dark);box-shadow:0 12px 36px rgba(0,0,0,.4)}
.head-sq{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border:1px solid var(--hair-dark);filter:grayscale(1);margin-bottom:22px;display:block}
.band--cream .head-sq{border-color:var(--hair-cream)}
.bio-more{margin-top:14px}
.bio-more summary{cursor:pointer;list-style:none;font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:8px;user-select:none}
.bio-more summary::-webkit-details-marker{display:none}
.bio-more summary::after{content:"+";font-size:15px;line-height:1;transition:transform .3s ease}
.bio-more[open] summary::after{transform:rotate(45deg)}
.bio-more p{margin-top:12px}
.band--cream .bio-more summary{color:var(--brass-dark)}
/* ---------- team headshots ---------- */
.r-people{display:flex;gap:10px;margin-top:12px}
.r-people img{width:68px;height:68px;border-radius:50%;object-fit:cover;border:1px solid rgba(173,129,48,.5);filter:grayscale(1) brightness(.97);transition:transform .3s ease,border-color .3s ease}
.role:hover .r-people img{transform:scale(1.06);border-color:var(--brass-dark)}
/* ---------- stoplight sequence ---------- */
.path-step[data-accent="red"].on .path-node{background:#D93A2B;border-color:#D93A2B;color:#FFF;box-shadow:0 0 0 7px rgba(217,58,43,.16),0 0 26px rgba(217,58,43,.55)}
.path-step[data-accent="red"].on .path-card h3{color:#E8604F}
.path-step[data-accent="red"].on .pic{stroke:#E8604F}
.path-step[data-accent="amber"].on .path-node{background:#E8A93C;border-color:#E8A93C;color:#12281E;box-shadow:0 0 0 7px rgba(232,169,60,.16),0 0 26px rgba(232,169,60,.5)}
.path-step[data-accent="amber"].on .path-card h3{color:#EFB959}
.path-step[data-accent="amber"].on .pic{stroke:#EFB959}
.path-step[data-accent="green"].on .path-node{background:#2FA352;border-color:#2FA352;color:#FFF;box-shadow:0 0 0 7px rgba(47,163,82,.18),0 0 26px rgba(47,163,82,.55)}
.path-step[data-accent="green"].on .path-card h3{color:#4CC474}
.path-step[data-accent="green"].on .pic{stroke:#4CC474}
/* ---------- in print ---------- */
.mag-shot{display:block;max-width:330px;border:1px solid rgba(173,129,48,.3);box-shadow:0 34px 64px -20px rgba(32,48,42,.4);transform:rotate(-2.5deg);transition:transform .45s ease}
.mag-shot:hover{transform:rotate(-.5deg) scale(1.02)}
.mag-shot img{display:block;width:100%}
.band--cream .logo-row img{filter:brightness(0);opacity:.62}
.band--cream .logo-row img:hover{opacity:.95}
.band--cream .logo-row .logo-text{color:var(--body-cream);opacity:.62}
.logo-row--mag{gap:30px 56px}
.logo-row--mag img{height:54px}
/* ---------- brands watermark ---------- */
.watermark-band{position:relative;overflow:hidden}
.watermark-word{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:400;font-size:clamp(88px,16vw,220px);letter-spacing:.1em;color:rgba(214,186,138,.055);white-space:nowrap;pointer-events:none;text-transform:uppercase;z-index:0}
.watermark-band .wrap{position:relative;z-index:1}
/* ---------- service area map ---------- */
.map-band{position:relative;overflow:hidden}
.map-bg{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:min(640px,52vw);opacity:.85;z-index:0}
.map-band .wrap{position:relative;z-index:1}
.rmap text{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--caption-dark)}
.rmap .lake{fill:rgba(214,186,138,.08);stroke:rgba(214,186,138,.4);stroke-width:1}
.rmap .road{stroke:rgba(214,186,138,.22);stroke-width:1;stroke-dasharray:2 6;fill:none}
.rmap .ring485{stroke:rgba(214,186,138,.18);stroke-width:1;stroke-dasharray:2 5;fill:none}
.rmap .pin-dot{fill:var(--brass);transition:all .3s ease}
.rmap .pin-ring{fill:none;stroke:rgba(214,186,138,.45);stroke-width:1}
.rmap a{cursor:pointer}
.rmap a:hover .pin-dot{fill:var(--brass-hi)}
.rmap a:hover text{fill:var(--brass-hi)}
.rmap .focal .pin-ring{animation:pinPulse 3.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pinPulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.rmap .focal .pin-ring{animation:none}}
.map-band .cards--2{max-width:520px;grid-template-columns:1fr;margin-top:44px}
.map-band .section-head{max-width:520px}
@media (max-width:1020px){.map-bg{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:560px;margin:44px auto 0;display:block}}
/* ---------- lead capture ---------- */
.lead-pop{position:fixed;right:22px;bottom:22px;z-index:250;width:min(400px,calc(100vw - 44px));background:#0A2F20;border:1px solid rgba(214,186,138,.42);padding:28px 26px 22px;box-shadow:0 34px 80px -22px rgba(0,0,0,.6);transform:translateY(26px);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease,visibility .5s}
.lead-pop.show{transform:none;opacity:1;visibility:visible}
.lead-pop .lp-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--muted-dark);font-size:22px;line-height:1;cursor:pointer;padding:8px}
.lead-pop .lp-close:hover{color:var(--brass)}
.lead-pop .eyebrow{margin-bottom:12px;font-size:9.5px}
.lead-pop h3{font-size:16px;letter-spacing:.07em;color:var(--head-dark);margin-bottom:9px;text-transform:uppercase;font-family:var(--display)}
.lead-pop p{font-size:15px;line-height:1.5;color:var(--secondary-dark);max-width:none}
.lead-pop form{display:flex;gap:10px;margin-top:16px}
.lead-pop input[type=email]{flex:1;background:rgba(214,186,138,.06);border:1px solid var(--hair-dark);color:var(--head-dark);font-family:var(--body);font-size:15.5px;padding:11px 13px;min-width:0}
.lead-pop input[type=email]:focus{outline:none;border-color:rgba(214,186,138,.6)}
.lead-pop .btn{padding:12px 16px;width:auto}
.lead-pop .lp-fine{font-size:12.5px;font-style:italic;color:var(--muted-dark);margin-top:11px}
@media (max-width:640px){.lead-pop{right:10px;bottom:10px;width:calc(100vw - 20px)}.lead-pop .btn{width:auto}}
/* ---------- logo marquee ---------- */
.marquee{overflow:hidden;position:relative;margin-top:44px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;animation:marq 42s linear infinite;padding-right:72px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-track img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.68;transition:opacity .3s ease;flex:none}
.marquee-track img:hover{opacity:1}
.marquee-track img.lg{height:30px}
.marquee-track img.tall{height:46px}
.ig-mark{width:17px;height:17px;vertical-align:-4px;margin-right:9px;fill:none;stroke:var(--brass);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tech-logo{height:32px;width:auto;margin-top:28px;display:block;opacity:.85}
.tech-logo--dark{filter:brightness(0) invert(1);opacity:.7}
@media (prefers-reduced-motion:reduce){
.marquee{mask-image:none;-webkit-mask-image:none}
.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:28px 46px}
.marquee-track .dup{display:none}
}
/* ---------- hero tracking-in ---------- */
.hero-seq .hero-display{animation:heroIn .9s cubic-bezier(.22,.61,.36,1) forwards .35s, trackIn 1.7s cubic-bezier(.22,.61,.36,1) both .35s}
@keyframes trackIn{from{letter-spacing:.17em}to{letter-spacing:.06em}}
@media (prefers-reduced-motion:reduce){.hero-seq .hero-display{animation:none;letter-spacing:.06em}}
/* ---------- focus + anchors ---------- */
.btn:focus-visible,a:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
[id]{scroll-margin-top:96px}
/* ---------- instagram strip ---------- */
.ig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;max-width:920px;margin-left:auto;margin-right:auto}
.ig-tile{position:relative;display:block;overflow:hidden;border:1px solid var(--hair-dark);aspect-ratio:4/5}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;max-width:none}
.ig-tile:hover img{transform:scale(1.05)}
.ig-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,30,20,.5),rgba(7,30,20,0) 45%)}
.ig-play{position:absolute;top:10px;right:10px;width:22px;height:22px;z-index:2;border:1px solid rgba(244,239,227,.85);border-radius:6px}
.ig-play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-left:7px solid rgba(244,239,227,.9);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
@media (max-width:640px){.ig-row{grid-template-columns:repeat(2,1fr);gap:12px}}
/* ---------- footer socials ---------- */
.f-social{display:flex;gap:14px;margin-top:18px}
.f-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(214,186,138,.3);transition:border-color .3s ease,background .3s ease}
.f-social a:hover{border-color:var(--brass);background:rgba(214,186,138,.08)}
.f-social svg{width:16px;height:16px;stroke:var(--brass);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ---------- portfolio mosaic + filters ---------- */
.pfilter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px}
.pf-chip{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--hair-cream);background:transparent;color:var(--brass-dark);cursor:pointer;transition:all .25s ease}
.pf-chip:hover{background:rgba(173,129,48,.07)}
.pf-chip.on{background:var(--brass-dark);border-color:var(--brass-dark);color:var(--cream-panel)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mtile{display:block;margin:0;position:relative;overflow:hidden;border:1px solid var(--hair-cream);color:inherit}
.mtile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s ease}
.mtile:hover img{transform:scale(1.045)}
.mtile:hover{border-color:rgba(173,129,48,.5)}
.mtile .plate-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:56px 24px 20px;background:linear-gradient(to top, rgba(5,22,14,.85), rgba(5,22,14,0))}
.mtile .plate-cap .p-eyebrow{font-family:var(--label);font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;max-width:none}
.mtile .plate-cap .p-title{font-family:var(--display);font-weight:400;font-size:19px;color:#F3EDDF;line-height:1.25;max-width:none;letter-spacing:.04em}
.mtile:hover .p-title{color:var(--brass-hi)}
.mtile .p-view{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-top:10px;max-width:none;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.mtile:hover .p-view{opacity:1;transform:none}
.pgrid .hide{display:none}
@media (max-width:1020px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr;gap:16px}}
/* ---------- brass sheen ---------- */
.btn--solid{position:relative;overflow:hidden}
.btn--solid::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.btn--solid:hover::after{left:135%}
@media (max-width:640px){
body{font-size:17.5px}
.cards,.plate-row,.gallery{grid-template-columns:1fr}
.gallery .g-wide{grid-column:span 1}
.footer-grid{grid-template-columns:1fr;gap:40px}
.trustbar{flex-direction:column;align-items:flex-start;gap:16px}
.stat-strip{grid-template-columns:1fr}
.stat-strip>div+div{border-left:none;border-top:1px solid var(--hair-dark-lo)}
.specs{flex-direction:column}
.specs>div+div{border-left:none;border-top:1px solid var(--hair-dark-lo)}
.frame .tick::before,.frame .tick::after,.frame::before,.frame::after{display:none}
.yt-meta .yt-title{font-size:14.5px}
.yt-play{width:60px;height:43px}
.btn{width:100%;text-align:center}
.btn-row{flex-direction:column}
.nav-cta{display:none}
}
/* ===================== ROUND 21 (Max review, 2026-09-09) ===================== */
/* Footer logo sits a touch high, closer to the column headings */
/* Line-art market icons on the Where We Build cards */
.card-art{display:block;width:120px;height:40px;fill:none;stroke:var(--brass-dark);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px;opacity:.85}
/* Tablet: two-column layouts were squeezing into tall narrow slabs between
880px and about 1024px. Collapse them a step earlier. */
@media (max-width:1024px){
.grid-2,.about-hero-grid,.data-grid,.landing-hero .hero-grid{grid-template-columns:1fr}
.grid-2{gap:44px}
}
@media (max-width:640px){
.site-footer{padding-top:54px}
}
/* Buildertrend logo under the portal heading (cream band) and inside the data row (dark band) */
.tech-logo--inline{height:22px;margin:2px 0 18px;opacity:.9}
.d-logo{height:16px;width:auto;vertical-align:-3px;filter:brightness(0) invert(1);opacity:.85}
/* Instagram glyph, shown beside the word wherever it appears */
.ig-ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:9px;display:inline-block}
p .ig-ic{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* Where We Build: cream hero, then the home-page map band with the two market cards */
.map-real .card-art{stroke:var(--brass)}
.map-real .cards--2{margin-top:44px}
.band--cream .breadcrumbs,.band--cream .breadcrumbs a{color:var(--muted-cream)}
/* Buildertrend marks: larger and fully opaque so the wordmark reads crisp */
.tech-logo{opacity:1}
.tech-logo--dark{opacity:.92}
.tech-logo--inline{height:28px;margin:4px 0 20px}
.d-logo{height:20px;vertical-align:-5px;opacity:1}
.card-art--lake{width:64px;height:90px}
/* ===================== ROUND 23 (2026-09-11) ===================== */
/* A page that opens on a cream section gets the solid green header from the
top; otherwise the cream nav and white logo disappear into the cream hero.
Written generally so any future cream-topped page is covered too. */
body:has(main > section.band--cream:first-of-type) .site-header{background:rgba(9,42,28,.94);border-bottom-color:rgba(214,186,138,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Sub-footer: a short centred rule set level with the bottom of the social
buttons (it clears them horizontally at half width), then a small gap
before the copyright line. */
.footer-rail{margin-top:34px;padding-top:0;border-top:none;position:relative}
.footer-rail::before{content:"";position:absolute;left:25%;right:25%;top:-34px;height:1px;background:linear-gradient(90deg,rgba(214,186,138,0),rgba(214,186,138,.24) 16%,rgba(214,186,138,.24) 84%,rgba(214,186,138,0))}
@media (max-width:1020px){.footer-rail{margin-top:44px;padding-top:26px}.footer-rail::before{top:0}}
/* Buildertrend mark inside the footer client-login link */
.f-bt img{height:12px;width:auto;display:inline-block;vertical-align:-1px;margin:0 5px 0 3px;filter:brightness(0) invert(1);opacity:.78}
/* Lake Norman: traced silhouette file, sized to sit with the skyline */
.card-art--lake{width:62px;height:96px}
/* ===================== ROUND 24 (2026-09-11) ===================== */
/* What We Build, option A: photo tiles (chosen by Max) */
.wwb-go{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.wwb-more{margin-top:30px;text-align:center}
.wwb-more a{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.wwb-a{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(2,minmax(250px,1fr));gap:14px;margin-top:52px}
.wwb-a__tile{position:relative;overflow:hidden;display:block;min-height:250px;background:var(--deep)}
.wwb-a__tile--lg{grid-row:span 2}
.wwb-a__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.wwb-a__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,28,19,.9) 0%,rgba(6,28,19,.42) 42%,rgba(6,28,19,.04) 72%)}
.wwb-a__tile::before{content:"";position:absolute;inset:12px;z-index:2;border:1px solid rgba(214,186,138,0);transition:border-color .5s ease;pointer-events:none}
.wwb-a__tile:hover::before,.wwb-a__tile:focus-visible::before{border-color:rgba(214,186,138,.5)}
.wwb-a__tile:hover img{transform:scale(1.05)}
.wwb-a__txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 28px}
.wwb-a .wwb-a__txt h3{font-family:var(--display);font-weight:500;font-style:normal;font-size:clamp(16px,1.5vw,20px);letter-spacing:.07em;text-transform:uppercase;color:var(--head-dark);margin:0 0 8px}
.wwb-a .wwb-a__tile--lg h3{font-size:clamp(22px,2.3vw,31px)}
.wwb-a .wwb-a__txt p{font-size:15.5px;line-height:1.5;color:var(--body-dark);max-width:40ch;margin:0 0 14px}
@media (max-width:1024px){.wwb-a{grid-template-columns:1fr 1fr;grid-template-rows:auto}.wwb-a__tile--lg{grid-column:span 2;grid-row:auto;min-height:360px}}
@media (max-width:640px){.wwb-a{grid-template-columns:1fr}.wwb-a__tile{min-height:270px}.wwb-a .wwb-a__tile--lg{grid-column:auto;min-height:340px}}
/* Where We Build cards: market icon to the right of the title, so cards stay short */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.card-head h3{margin:0}
.card-head .card-art{margin:0;flex:none;width:96px;height:32px}
.card-head .card-art--lake{width:34px;height:52px}
/* Footer client login: just the Buildertrend b */
.f-bt img{height:13px;margin:0 5px 0 4px;vertical-align:-2px}
/* Watermark: top of the R sits on the sub-footer rule, level with the bottom of
the social buttons, and the footer grows just enough for the letters to
stand on its bottom edge. Cinzel at line-height 1, measured in the browser:
cap top 0.1025em below the box top, cap height 0.70em. */
.site-footer{--fw:clamp(90px,17vw,300px)}
.footer-rail .footer-word{font-size:var(--fw);top:calc(-34px - var(--fw) * .1025);bottom:auto;left:50%;transform:translateX(-50%);z-index:0}
.footer-rail p{position:relative;z-index:1}
.site-footer{padding-bottom:max(44px, calc(var(--fw) * .70 - 70px))}
@media (max-width:1020px){.footer-rail .footer-word{top:calc(var(--fw) * -.1025)}.site-footer{padding-bottom:44px}}
/* ===================== ROUND 25 (2026-09-11) ===================== */
/* Where We Build: icon sits right beside the title, not pushed to the far edge */
.card-head{justify-content:flex-start;gap:16px}
/* Footer client login: the Buildertrend b as inline vector in the link colour.
The earlier ![]()
was recoloured with a CSS filter, which rasterises at low
resolution and is why the mark looked soft at 13px. */
.f-bt .bt-mark{display:inline-block;width:12px;height:15px;fill:currentColor;vertical-align:-2px;margin:0 5px 0 4px}
/* Sub-footer, final geometry. Supersedes round 23/24.
- The rule stays exactly level with the bottom of the social buttons.
- The top of the R sits --gap below the rule.
- The letters stand 3px off the bottom edge.
- The copyright line is vertically centred in the band between the rule
and the bottom edge (--rt is the measured height of that one-line row).
Cinzel at line-height 1: cap top 0.1025em below the box top, cap height 0.70em. */
.site-footer{
--fw:clamp(90px,17vw,300px);
--gap:12px;
--rt:16px;
--band:calc(var(--fw) * .70 + var(--gap) + 3px);
--half:calc((var(--band) - var(--rt)) / 2);
padding-bottom:var(--half);
}
.footer-rail{margin-top:var(--half);padding-top:0;border-top:none;position:relative}
.footer-rail::before{top:calc(-1 * var(--half))}
.footer-rail .footer-word{font-size:var(--fw);top:calc(var(--gap) - var(--half) - var(--fw) * .1025);bottom:auto;left:50%;transform:translateX(-50%);z-index:0}
@media (max-width:1020px){
.site-footer{padding-bottom:44px}
.footer-rail{margin-top:44px;padding-top:26px}
.footer-rail::before{top:0}
.footer-rail .footer-word{top:calc(var(--gap) - var(--fw) * .1025)}
}
/* The copyright row must be exactly --rt tall for the centring above to hold:
the license line was wrapping to two lines and inheriting a 9.5px top margin
from the general p + p rule, making the row 39px instead of 16px. */
@media (min-width:1021px){.footer-rail p{margin:0;line-height:16px;white-space:nowrap}}
/* ===================== ROUND 26 (2026-09-11): watermark sized to the footer ===================== */
/* The word used to scale with the screen (17vw, up to 300px) while the footer
content stops at 1044px, so on wide screens it overhung both sides. Now its
letter edges land on the footer grid's left and right edges at every width.
Cinzel 600 "REVIVAL" at .06em tracking, measured: ink width 4.6571em, left
bearing .045em, ink centre .014em left of the box centre (trailing tracking).
cqw is used so the scrollbar is excluded, exactly like the grid's own width;
the band padding moves from .site-footer onto .footer-rail so every length
that uses --fw is resolved inside the container. Approved layout before this
is tagged subfooter-v1. */
.site-footer{container-type:inline-size;--fw:calc((min(var(--wrap), 100cqw) - 2 * var(--pad)) / 4.6571);padding-bottom:0}
.footer-rail{padding-bottom:var(--half)}
.footer-rail .footer-word{transform:translateX(calc(-50% + .014em))}
@media (max-width:1020px){.site-footer{padding-bottom:44px}.footer-rail{padding-bottom:0}}
/* Tablet and phone: the band's spacing is fixed there, so grow the rail's bottom
padding with the word so the letters are never clipped at the bottom edge. */
@media (max-width:1020px){.site-footer{padding-bottom:0}.footer-rail{padding-bottom:max(44px, calc(var(--fw) * .70 - 38px))}}
/* ===================== ROUND 27 (2026-09-11) ===================== */
/* Owners photo: a 68px circle left each face about 15px across, because two
people side by side must fit inside the circle's width. A pill the same
height as the other team circles, and about as wide as two of them, lets
the crop close in on both faces (head-duo-circle.jpg, a 320px square from the
1400x933 original at 554,165 520x295). */
/* Owners: same 68px circle as the rest of the row, cropped tight on both faces (round 31; the round-27 oval is gone) */
/* Sub-footer: copyright row moves to the bottom of the page (--tb above the
edge) instead of the middle of the band. The rule, the gap above the R and
the watermark stay exactly where they were; only the split of the band's
height between the rail's top margin and bottom padding changes.
Approved centred version is tagged subfooter-v2. */
@media (min-width:1021px){
.site-footer{--tb:24px;--mt:calc(var(--band) - var(--rt) - var(--tb))}
.footer-rail{margin-top:var(--mt);padding-bottom:var(--tb)}
.footer-rail::before{top:calc(-1 * var(--mt))}
.footer-rail .footer-word{top:calc(var(--gap) - var(--mt) - var(--fw) * .1025)}
}
/* Mobile menu Start Your Build: the menu's link rule (.mobile-nav a: 26px
Cinzel, cream, 8px padding) was out-ranking the button's own styling, so it
rendered with cream text and the menu font. Restore the standard button:
label font, button padding, and the dark green text used on every gold
button elsewhere. */
.mobile-nav a.btn{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:17px 32px;text-align:center}
.mobile-nav a.btn--solid,.mobile-nav a.btn--solid:hover{color:var(--deep)}
/* Tablet and phone: same idea. The rail spans from the rule to the page bottom
and is at least tall enough for the watermark, with the copyright lines
packed at its bottom (the text wraps here, so its height is not fixed). */
@media (max-width:1020px){.footer-rail{padding-bottom:24px;min-height:calc(var(--fw) * .70 + var(--gap) + 3px);align-content:flex-end}}
/* Mobile menu Start Your Build: same font and colours, larger so it reads as
the call to action at the bottom of the menu (Max, 2026-09-11). */
.mobile-nav a.btn{font-size:16px;letter-spacing:.18em;padding:21px 24px}
/* Charlotte skyline: traced from Max's line drawing (charlotte-skyline.svg, 3.81:1) */
.card-head .card-art--city{width:130px;height:34px}
/* ===================== ROUND 28 (2026-09-11): before and after ===================== */
/* Three formats, chosen per pair by whether the photos were taken from the same
spot. Only aligned pairs become drag sliders; the rest are side-by-side pairs or
before-during-after sequences, which need no alignment. */
.ba--43{aspect-ratio:4/3}
.bx-slider{max-width:880px;margin-inline:auto}
.bx-slider--tall{max-width:560px}
.bx-pair,.bx-seq{display:grid;gap:14px}
.bx-pair{grid-template-columns:1fr 1fr}
.bx-seq{grid-template-columns:repeat(3,1fr)}
.bx--tall{max-width:780px;margin-inline:auto}
.bx--small{max-width:880px;margin-inline:auto}
.bx figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--hair-dark)}
.bx img{display:block;width:100%;height:auto}
.bx figure .ba-tag{left:14px;right:auto;top:14px}
.bx-cap{margin:16px auto 0;font-size:15.5px;line-height:1.6;color:var(--muted-dark);max-width:70ch;text-align:center}
.bx + .bx-cap + .bx{margin-top:40px}
.bx-block{margin-top:clamp(56px,7vw,84px)}
.bx-feature{margin:44px 0 60px}
.band--cream .bx figure{border-color:var(--hair-cream)}
.band--cream .bx-cap{color:var(--muted-cream)}
@media (max-width:640px){.bx-pair,.bx-seq{grid-template-columns:1fr}.bx--tall{max-width:420px}}
/* Market card icons: skyline 50% larger, lake a little larger. On narrow cards the
skyline shrinks to fit instead of pushing past the card edge. */
.card-head .card-art--city{width:195px;height:auto;aspect-ratio:3.81;flex:0 1 195px;min-width:0}
.card-head .card-art--lake{width:42px;height:64px}
/* ===================== ROUND 30: before/after folded into the story ===================== */
/* No more warped befores. Project pages: the story gets a right-hand column holding the
before/after (stacked pair, three-card progression, or the two genuine sliders), sticky
on desktop. Service pages: the pair replaces the stock photo in What's Included.
Every card opens the site lightbox and steps through its own group. */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:64px;align-items:start}
.story-side{position:sticky;top:104px}
.bx-side .eyebrow{margin-bottom:14px}
.bx-stack{display:grid;grid-template-columns:1fr;gap:12px}
.bx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bx figure a{display:block;cursor:zoom-in}
.bx figure::after{content:"\2922";position:absolute;right:10px;bottom:8px;z-index:3;font-size:15px;line-height:1;color:var(--brass);background:rgba(9,42,28,.74);padding:5px 7px;pointer-events:none;opacity:.9}
.bx-row figure .ba-tag{left:8px;top:8px;padding:5px 9px;font-size:8.5px}
.bx-row figure::after{font-size:12px;padding:4px 5px;right:6px;bottom:6px}
.bx-side .bx-cap,.story-side .bx-cap{text-align:left;margin:12px 0 0;font-size:14px;max-width:none}
.story-side .bx-cap + .bx{margin-top:20px}
.bx-side .ba{max-width:none}
.band--cream .ba{border-color:var(--hair-cream)}
#lightbox .lb-count{white-space:nowrap}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;gap:48px}.story-side{position:static;max-width:560px}}
.ba--34{aspect-ratio:3/4}
/* ===================== ROUND 31: What's Included with the proof beside it; progression viewer ===================== */
/* Text and bullets stay together on the left; the right column sits beside them and sticks while
the list scrolls. Before/during/after is one large stage with three labelled stops under it. */
.grid-2--proof{grid-template-columns:minmax(0,1fr) minmax(280px,440px);gap:64px}
.grid-2--proof .section-head{max-width:640px}
.grid-2--proof .brass-list{margin-top:28px}
.grid-2--proof .plate{aspect-ratio:4/3}
.bx-row--2{grid-template-columns:1fr 1fr}
.bx-row--2 figure .ba-tag{left:8px;top:8px;padding:5px 9px;font-size:8.5px}
.prog{max-width:960px;margin-inline:auto;outline:none}
.prog:focus-visible .prog-stage{outline:2px solid var(--brass);outline-offset:3px}
.prog-stage{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hair-dark);background:#0b2e20}
.prog-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.prog-stage img.is-on{opacity:1}
.prog-tag{left:14px;right:auto;top:14px}
.prog-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;background:rgba(9,42,28,.72);border:1px solid var(--brass);color:var(--brass);font-family:var(--display);font-size:22px;line-height:1;cursor:pointer;transition:background .25s ease}
.prog-arrow:hover{background:rgba(26,100,73,.85)}
.prog-prev{left:16px}.prog-next{right:16px}
.prog-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.prog-thumb{position:relative;padding:0;border:1px solid var(--hair-dark);background:none;cursor:pointer;opacity:.5;transition:opacity .25s ease,outline-color .25s ease;outline:1px solid transparent;outline-offset:-1px}
.prog-thumb:hover,.prog-thumb.is-on{opacity:1}
.prog-thumb.is-on{outline-color:var(--brass)}
.prog-thumb img{display:block;width:100%;height:auto}
.prog-thumb span{position:absolute;left:10px;bottom:10px;font-family:var(--label);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--head-dark);background:rgba(9,42,28,.74);padding:6px 10px}
.band--cream .prog-stage,.band--cream .prog-thumb{border-color:var(--hair-cream)}
.prog-stage img{cursor:zoom-in}
.prog-stage img:not(.is-on){pointer-events:none}
/* Side-column variant: text stops instead of thumbnails, so nothing on the page is tiny */
.prog--side{max-width:none}
.prog--tall .prog-stage{aspect-ratio:3/4}
.prog--32 .prog-stage{aspect-ratio:3/2}
.prog-strip--pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.prog-strip--pills .prog-thumb{flex:1 1 auto;opacity:1;padding:10px 12px;font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-cream);border:1px solid var(--hair-cream);background:rgba(255,255,255,.35);outline:none}
.prog-strip--pills .prog-thumb span{position:static;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit}
.prog-strip--pills .prog-thumb:hover{color:var(--ink)}
.prog-strip--pills .prog-thumb.is-on{color:var(--head-dark);background:var(--deep);border-color:var(--deep)}
.band--dark .prog-strip--pills .prog-thumb{color:var(--muted-dark);border-color:var(--hair-dark);background:rgba(255,255,255,.04)}
.band--dark .prog-strip--pills .prog-thumb.is-on{color:var(--deep);background:var(--brass);border-color:var(--brass)}
.story-side .bx-cap{font-size:13.5px}
/* Wider proof column on desktop (Max: the ADU slider had empty space to grow into) */
.story-grid{grid-template-columns:minmax(0,1fr) minmax(300px,540px);gap:56px}
.grid-2--proof{grid-template-columns:minmax(0,1fr) minmax(300px,540px);gap:56px}
@media (max-width:1024px){.story-grid{grid-template-columns:1fr}}
.bx-feature .bx-cap{margin-top:18px}
@media (max-width:1024px){.grid-2--proof{grid-template-columns:1fr;gap:44px}.grid-2--proof .story-side{position:static;max-width:560px}}
@media (max-width:640px){.prog-arrow{width:38px;height:38px;font-size:18px}.prog-prev{left:8px}.prog-next{right:8px}.prog-thumb span{left:6px;bottom:6px;padding:4px 7px;font-size:8px}}
@media (prefers-reduced-motion:reduce){.prog-stage img,.prog-thumb{transition:none}}
/* Round 32: viewer stops share one row at equal width; the stage takes each photo's own
proportions (set by main.js from the img width/height) so nothing is cropped. */
.prog-strip--pills{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.prog-strip--pills .prog-thumb{padding:10px 8px;letter-spacing:.14em;text-align:center;line-height:1.35}
.prog-stage img{object-fit:contain;background:#0b2e20}
.prog-stage{transition:aspect-ratio .3s ease}
/* Round 33: the viewer frame keeps one size (the opening photo's shape). Photos of another
shape sit inside it whole, and their edges fade into the band color instead of showing bars. */
.prog-stage{transition:none}
.prog-stage img{background:transparent}
.band--cream .prog-stage{background:var(--cream)}
.prog-stage img.lb-x{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.prog-stage img.lb-y{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}
/* Round 34: the Renovations progression opens on the finished room and sits a step smaller */
.bx-feature .prog{max-width:760px}
/* Round 36: the About crest in the page's gold (brass) instead of white. The mark PNGs are
brass-tinted copies; the cross bars and their glow follow the same color. */
.logo-cross{opacity:.82}
.logo-cross .cross-v,.logo-cross .cross-h{background:var(--brass)}
@keyframes crossIntro{
0%,22%{opacity:0;box-shadow:0 0 0 rgba(214,186,138,0)}
48%,62%{opacity:1;box-shadow:0 0 10px rgba(214,186,138,.45)}
92%,100%{opacity:0;box-shadow:0 0 0 rgba(214,186,138,0)}
}
@media (hover:hover){.logo-cross:hover{opacity:1}.logo-cross:hover .cross-v,.logo-cross:hover .cross-h{box-shadow:0 0 10px rgba(214,186,138,.45)}}
@media (prefers-reduced-motion:reduce){.logo-cross .cross-v,.logo-cross .cross-h{box-shadow:0 0 10px rgba(214,186,138,.45)}}
/* ===================== ROUND 37: refinement pass, approved by Max 2026-09-11 ===================== */
/* Home hero: the display line gets more air from the uppercase kicker beneath it. */
.hero-seq .hero-kicker{margin-top:44px}
/* Two-up plate rows (home Recent Work, Cornelius): 16:9 -> 4:3 so tall kitchen photos keep their rooms. */
.plate-row--2 .plate--wide{aspect-ratio:4/3}
.plate-row--2{gap:30px}
/* Pricing facts that are a short list read as one column. */
.data-grid--list{grid-template-columns:1fr;max-width:620px}
/* Project galleries open on the first photo at full width, then flow into the columns.
The inner hairline frame on each thumbnail is gone. */
.gallery .gitem:first-child{column-span:all;margin-bottom:22px}
.gallery .gitem::after{display:none}
@media (max-width:640px){.hero-seq .hero-kicker{margin-top:30px}}
/* ===================== CAREERS (2026-09-12) ===================== */
.jobs{margin-top:44px;border-top:1px solid var(--hair-dark)}
.job{border-bottom:1px solid var(--hair-dark)}
.job summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer}
.job summary::-webkit-details-marker{display:none}
.job summary::after{content:"+";font-family:var(--display);font-size:26px;line-height:1;color:var(--brass);margin-left:auto;transition:transform .3s ease}
.job[open] summary::after{transform:rotate(45deg)}
.job-title{font-family:var(--display);font-size:22px;color:var(--head-dark);letter-spacing:.02em}
.job-dept{font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.job-body{padding:0 0 30px;max-width:900px}
.job-body p{color:var(--muted-dark)}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:22px}
.job-h{font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.job-cols ul{list-style:none;padding:0;margin:0}
.job-cols li{position:relative;padding-left:18px;margin-bottom:9px;font-size:15px;line-height:1.55;color:var(--muted-dark)}
.job-cols li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--brass)}
.field input[type=file]{padding:14px 16px;border:1px dashed rgba(214,186,138,.45);background:rgba(255,255,255,.03);color:var(--muted-dark);font-size:14px;cursor:pointer;width:100%}
.field input[type=file]::file-selector-button{font-family:var(--label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);background:none;border:1px solid var(--brass);padding:9px 14px;margin-right:14px;cursor:pointer}
.field .caption a{color:var(--brass)}
@media (max-width:700px){.job-cols{grid-template-columns:1fr}.job summary{flex-wrap:wrap}.job-dept{width:100%;order:-1}}
/* ===================== RESEARCH FEATURES (2026-09-12): resource rows and builder questions ===================== */
.res-list{margin-top:44px;border-top:1px solid var(--hair-dark)}
.res-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--hair-dark);color:inherit;text-decoration:none}
.res-k{font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.res-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.res-t{font-family:var(--display);font-size:21px;color:var(--head-dark);letter-spacing:.02em}
.res-s{font-size:14.5px;color:var(--muted-dark);line-height:1.55;max-width:70ch}
.res-go{font-family:var(--display);font-size:22px;color:var(--brass);transition:transform .3s ease}
.res-row:hover .res-go{transform:translateX(6px)}
.res-row:hover .res-t{color:var(--brass-hi)}
.qlist{list-style:none;counter-reset:q;padding:0;margin:0}
.qlist li{counter-increment:q;padding:34px 0;border-bottom:1px solid var(--hair-cream)}
.qlist li:first-child{padding-top:0}
.qlist h2{font-size:clamp(20px,2vw,26px);text-transform:none;letter-spacing:.01em;line-height:1.3;max-width:none;margin:0}
.qlist h2::before{content:counter(q,decimal-leading-zero);display:block;font-family:var(--label);font-size:10px;letter-spacing:.24em;color:var(--brass-dark);margin-bottom:10px}
.q-why{margin-top:12px;color:var(--muted-cream)}
.q-ans{margin-top:14px;padding:16px 20px;border-left:2px solid var(--brass);background:rgba(255,255,255,.45);color:var(--body-cream)}
.q-k{display:block;font-family:var(--label);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dark);margin-bottom:6px}
@media (max-width:820px){.res-row{grid-template-columns:1fr auto}.res-k{grid-column:1/-1}}
/* ===================== CAREERS REWORK (2026-09-14) ===================== */
/* Hero: headline left, the team photo right in black and white with a soft darkening wash. */
.careers-hero-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.careers-photo{margin:0}
.cp-frame{position:relative;display:block;overflow:hidden;border:1px solid var(--hair-dark)}
.cp-frame img{display:block;width:100%;height:auto}
.cp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,15,.06) 0%,rgba(6,22,15,.34) 100%);pointer-events:none}
.careers-photo .caption{margin-top:12px;color:var(--muted-dark)}
/* Roles: grouped by department; the tag on each row now carries the experience bar. */
.jobs{border-top:none}
.job-group{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);padding:44px 0 14px;border-bottom:1px solid var(--hair-dark);margin:0}
.job-group:first-child{padding-top:0}
.job-dept{color:var(--muted-dark)}
/* How Hiring Works: three equal steps, one type system (label, display heading, body). */
.hire-steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.hire-step{border-top:1px solid var(--brass-dark);padding-top:24px}
.hs-n{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dark);margin:0 0 14px}
.hire-step h3{font-family:var(--display);font-size:clamp(20px,1.9vw,24px);font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink);margin:0 0 10px}
.hire-step p:not(.hs-n){font-family:var(--body);font-size:17px;line-height:1.6;color:var(--body-cream);margin:0;max-width:34ch}
/* About: the careers row closing the team section. */
.join-row{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:64px;padding-top:40px;border-top:1px solid var(--hair-dark)}
.join-row .eyebrow{margin-bottom:10px}
.join-t{font-family:var(--display);font-size:clamp(20px,2.2vw,28px);color:var(--head-dark);letter-spacing:.02em;margin:0;line-height:1.3}
.join-s{margin:8px 0 0;font-size:15.5px;color:var(--muted-dark)}
.join-row .btn{flex:0 0 auto}
@media (max-width:1024px){.careers-hero-grid{grid-template-columns:1fr;gap:40px}.careers-photo{max-width:640px}}
@media (max-width:760px){.hire-steps{grid-template-columns:1fr;gap:28px}.join-row{flex-direction:column;align-items:flex-start}}
/* Home Design & Decor: the real HD&D mark (stacked logo), sized a step taller than the wordmarks beside it */
.logo-row--mag img.logo-hdd{height:64px}
/* Contact: "Not ready to reach out yet?" becomes three cards at the foot of the page (2026-09-14).
The top of the page stays on the form. */
.read-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:40px auto 0;text-align:left}
.read-card{display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;border:1px solid var(--hair-dark);background:var(--tint-dark);color:inherit;text-decoration:none;transition:border-color .3s ease,background .3s ease}
.read-card:hover{border-color:var(--brass);background:rgba(214,186,138,.1)}
.rc-k{font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.rc-t{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--head-dark)}
.rc-s{font-family:var(--body);font-size:16px;line-height:1.55;color:var(--muted-dark)}
.rc-go{margin-top:auto;padding-top:8px;font-family:var(--label);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
@media (max-width:820px){.read-cards{grid-template-columns:1fr}}
/* Careers: Why Revival in two columns, then the benefits as an icon grid (2026-09-14).
Line icons in the site's drawing style, brass on cream, instead of emoji. */
.why-grid{align-items:start}
.why-copy{padding-top:6px}
.why-copy p{color:var(--body-cream);font-size:18px;line-height:1.65}
.offer-head{margin-top:clamp(56px,7vw,80px)}
.offer-head .eyebrow{margin-bottom:0}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:22px;border-top:1px solid var(--hair-cream)}
.offer{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:26px 0 24px;border-bottom:1px solid var(--hair-cream)}
.offer svg{width:28px;height:28px;fill:none;stroke:var(--brass-dark);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.offer h3{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:.03em;text-transform:none;color:var(--ink);margin:0 0 7px;line-height:1.3}
.offer p{font-size:16px;line-height:1.55;color:var(--body-cream);margin:0}
@media (max-width:1024px){.offer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.offer-grid{grid-template-columns:1fr}}
/* Careers (2026-09-14, second pass): the respectful-workplace benefit leads the grid at full width;
every role gets an Apply Now that jumps to the form with that role pre-selected. */
.offer--lead{grid-column:1/-1;grid-template-columns:40px 1fr;padding:30px 0 28px}
.offer--lead svg{width:32px;height:32px}
.offer--lead h3{font-size:21px}
.offer--lead p{font-size:17.5px;max-width:78ch}
.job-apply{margin-top:26px}
/* Careers hero carousel (2026-09-14): four team photos, in color, crossfading in the framed 3:2 window, with a light
darkening wash; hairline arrows and dots beneath; caption swaps with the photo. */
.cp-carousel .cp-frame{aspect-ratio:3/2}
.cp-carousel .cp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.cp-carousel .cp-frame img.is-on{opacity:1}
.cp-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.cp-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-dark);background:none;color:var(--brass);font-family:var(--display);font-size:16px;line-height:1;cursor:pointer;transition:border-color .25s ease,background .25s ease}
.cp-btn:hover{border-color:var(--brass);background:rgba(214,186,138,.1)}
.cp-dots{display:flex;gap:8px}
.cp-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--brass);background:none;padding:0;cursor:pointer;opacity:.55;transition:opacity .25s ease,background .25s ease}
.cp-dot.is-on{background:var(--brass);opacity:1}
.careers-photo .cp-cap{margin-top:8px;min-height:1.6em}
/* Careers carousel in full color (Max, 2026-09-14): a lighter wash so the color reads true */
.cp-carousel .cp-frame::after{background:linear-gradient(180deg,rgba(6,22,15,0) 55%,rgba(6,22,15,.22) 100%)}
/* ===== ROUND 40 (2026-09-14): Buildertrend logo in its real colors everywhere. On dark bands it sits on a
cream chip instead of being knocked out to white. Select menus readable on dark bands. ===== */
.tech-logo{opacity:1}
.tech-logo--dark{filter:none;opacity:1;height:46px;width:auto;padding:10px 13px;background:var(--cream);border-radius:3px;box-sizing:border-box}
.d-logo{filter:none;opacity:1;height:26px;width:auto;padding:5px 8px;background:var(--cream);border-radius:3px;box-sizing:border-box;vertical-align:middle}
.guide-band .g-trust img{filter:none;opacity:1;height:30px;width:auto;padding:6px 9px;background:var(--cream);border-radius:3px;box-sizing:border-box}
.field select option{color:var(--ink);background:#fff}
/* Technology: the Buildertrend devices mockup beside the portal intro */
.tech-intro{align-items:center}
.tech-mock{margin:0}
.tech-mock img{display:block;width:100%;height:auto}
/* Home: full-width feature photos under What We Build and before the final CTA */
.home-feature{margin-left:0;margin-right:0}
.home-feature .caption{margin-top:14px}
/* Are We a Fit: two verdict columns, then the five questions beside the section head */
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fit-col{padding:36px 34px 26px;border:1px solid var(--hair-cream);background:rgba(255,255,255,.55)}
.fit-col--no{background:rgba(12,54,37,.045)}
.fit-col .fit-k{font-family:var(--label);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-dark);margin-bottom:10px}
.fit-col--no .fit-k{color:var(--muted-cream, #6E7F75)}
.fit-col h3{font-size:26px;margin-bottom:16px}
.fit-list{list-style:none;padding:0;margin:0}
.fit-list li{position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--hair-cream);font-size:17.5px;line-height:1.55}
.fit-list li::before{content:"";position:absolute;left:0;top:16px;width:24px;height:24px;border-radius:50%;border:1px solid var(--brass-dark);background:url("data:image/svg+xml;utf8,") center/13px no-repeat}
.fit-col--no .fit-list li::before{border-color:rgba(32,48,42,.3);background-image:url("data:image/svg+xml;utf8,");opacity:.75}
.fit-q{counter-reset:q;list-style:none;padding:0;margin:0}
.fit-q li{counter-increment:q;display:grid;grid-template-columns:40px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--hair-dark);font-size:18.5px;line-height:1.5;color:var(--head-dark)}
.fit-q li:last-child{border-bottom:1px solid var(--hair-dark)}
.fit-q li::before{content:"0" counter(q);font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--brass);padding-top:7px}
.fit-answer{margin-top:28px;padding:22px 24px;border:1px solid var(--hair-dark);background:rgba(214,186,138,.05)}
.fit-answer p{margin:0;font-size:16.5px;color:var(--body-dark)}
@media (max-width:820px){.fit-cols{grid-template-columns:1fr;gap:18px}.fit-col{padding:28px 22px 20px}}
/* ROUND 40: Investment Guide teaser. Real renders of the cover and the kitchen ranges page, stacked like
two sheets on a desk: deeper, softer shadows, second page fully legible. */
.g-stack{padding:30px 40px 34px 0}
.g-stack .g-cover,.guide-band .g-cover{width:min(320px,66vw);height:auto;border:1px solid rgba(214,186,138,.4);box-shadow:0 36px 64px -12px rgba(0,0,0,.6),0 12px 24px rgba(0,0,0,.3);transform:rotate(-2.5deg)}
.g-stack .g-page2{top:4%;left:18%;width:min(320px,66vw);height:auto;opacity:1;transform:rotate(5deg) translateX(9%);border:1px solid rgba(214,186,138,.4);box-shadow:0 28px 54px -10px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.28)}
.band--cream .g-stack .g-cover,.band--cream .g-stack .g-page2{border-color:rgba(173,129,48,.35)}
/* ROUND 41: home closing CTA merged with the bedroom photo. The photo fills the band and dissolves into
cream on the left, where the copy sits. Under 860px the photo becomes a top panel fading down into the text. */
.cta-photo{position:relative;overflow:hidden;padding:0;min-height:640px;display:flex;align-items:center}
.cta-photo__media{position:absolute;inset:0;z-index:0}
.cta-photo__media img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block}
.cta-photo__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 34%,rgba(244,239,227,.92) 44%,rgba(244,239,227,.55) 54%,rgba(244,239,227,0) 68%)}
.cta-photo .wrap{position:relative;z-index:1;width:100%;padding-top:110px;padding-bottom:110px}
.cta-photo__txt{max-width:470px}
.cta-photo__txt h2{max-width:none}
.cta-photo__txt .lede{margin-top:26px}
.cta-photo__txt .btn-row{margin-top:38px}
.cta-photo__txt .caption{margin-top:16px}
.cta-photo__cred{margin-top:34px !important;opacity:.7}
@media (max-width:860px){
.cta-photo{min-height:0;display:block}
.cta-photo__media{position:relative;inset:auto;aspect-ratio:4/3}
.cta-photo__media img{object-position:70% 50%}
.cta-photo__media::after{background:linear-gradient(180deg,rgba(244,239,227,0) 55%,var(--cream) 100%)}
.cta-photo .wrap{padding-top:8px;padding-bottom:70px}
.cta-photo__txt{max-width:none}
}
/* ROUND 41: no chips. On dark bands the logo is its reversed version (cream wordmark, teal swoosh kept),
straight on the green. */
.tech-logo--dark{background:none;padding:0;height:34px;opacity:.95}
.d-logo{background:none;padding:0;height:18px;vertical-align:-4px}
.guide-band .g-trust img{background:none;padding:0;height:20px;opacity:.9}
/* ROUND 42: Guarantees hero. Photo chosen by Max 2026-09-14 (Lake Wylie fireplace wall). The headline sits
left, so the dark scrim is heavy on the left and clears to the true photo colors on the right. */
.hero--guarantees .hero-bg img{object-position:62% 50%}
.hero--guarantees .hero-scrim{background:linear-gradient(95deg, rgba(7,30,20,.96) 0%, rgba(7,30,20,.86) 30%, rgba(7,30,20,.42) 54%, rgba(7,30,20,.06) 74%, rgba(7,30,20,0) 100%)}
.hero--guarantees .hero-scrim::after{background:linear-gradient(to top, rgba(7,30,20,.72), rgba(7,30,20,0) 34%),linear-gradient(to bottom, rgba(7,30,20,.88) 0%, rgba(7,30,20,.55) 16%, rgba(7,30,20,0) 34%)}
.hero--guarantees .hero-tint{background:linear-gradient(90deg, rgba(12,54,37,.45) 0%, rgba(12,54,37,.2) 50%, rgba(12,54,37,0) 72%)}
@media (max-width:760px){
.hero--guarantees .hero-scrim{background:linear-gradient(180deg, rgba(7,30,20,.55) 0%, rgba(7,30,20,.8) 60%, rgba(7,30,20,.92) 100%)}
.hero--guarantees .hero-tint{background:rgba(12,54,37,.25)}
}
/* ROUND 42: Technology hero. Max's team-and-plans photo, anchored to its top edge: any cropping comes off
the bottom, and the slow zoom grows downward so the top never clips. */
.hero--technology .hero-bg{top:0;bottom:-32%}
.hero--technology .hero-bg img{object-position:50% 0;transform-origin:50% 0}
/* ROUND 43: the word Buildertrend becomes the logo, set inline in the sentence; no standalone logos. */
.bt-inline{display:inline-block;height:.92em;width:auto;vertical-align:-.1em;margin:0 .06em}
.lede .bt-inline{height:1em}
.guide-band .g-trust img{height:16px;vertical-align:-3px;margin-left:2px;opacity:1}
.form-err{margin-top:12px;font-family:var(--body);font-style:italic;font-size:15.5px;color:#C9A063;flex-basis:100%}
.band--cream .form-err{color:#9A6A1E}
/* ROUND 44: technology page. Logo sits under the devices mockup, not inside the sentence; the Platform row logo is larger. */
.tech-mock__brand{margin:18px 0 0;text-align:center}
.tech-mock__brand img{height:38px;width:auto;display:inline-block}
.d-logo{height:30px;vertical-align:-9px}
@media (max-width:640px){.d-logo{height:24px;vertical-align:-7px}}