/* ============================================================
   BRIDGEPOINT CONSTRUCTION, shared design system
   One brand, two paths. Brass = residential, Steel = commercial.
   Faces: Segoe/system sans (headings+UI), Georgia serif (body),
   Consolas mono (labels/data). Light + dark themes via tokens.
   ============================================================ */

:root {
  --paper:   #ECEAE2;
  --surface: #F6F4EE;
  --raise:   #FFFFFF;
  --ink:     #16242E;
  --ink-soft:#51616A;
  --ink-mute:#7B8890;
  --line:    rgba(22,36,46,0.13);
  --line-strong: rgba(22,36,46,0.28);
  --res:     #A96C1E;   --res-deep:#8A5613;
  --res-tint:rgba(169,108,30,0.10);
  --com:     #2F5D64;   --com-deep:#22474D;   --com-tint:rgba(47,93,100,0.10);
  --good:    #3F7A4E;
  --star:    #C99A3A;
  --ink-hero:#0E1B23;
  --shadow-s: 0 1px 2px rgba(22,36,46,.07), 0 6px 18px rgba(22,36,46,.07);
  --shadow-l: 0 4px 12px rgba(22,36,46,.09), 0 24px 60px rgba(22,36,46,.13);
  --serif: Georgia, 'Times New Roman', serif;
  --sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:  'Consolas', 'SF Mono', ui-monospace, monospace;
  --maxw: 1140px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E161C; --surface:#16222A; --raise:#1C2A33; --ink:#E9EAE4;
    --ink-soft:#A6B2B8; --ink-mute:#74818A; --line:rgba(255,255,255,0.11);
    --line-strong:rgba(255,255,255,0.22); --res:#D8A85B; --res-deep:#E8BD72;
    --res-tint:rgba(216,168,91,0.13); --com:#62A2AA; --com-deep:#7FB9C0; --com-tint:rgba(98,162,170,0.13);
    --good:#6FB585; --star:#E0B24E; --ink-hero:#0A1218;
    --shadow-s:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.4);
    --shadow-l:0 4px 12px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{ --paper:#ECEAE2; --surface:#F6F4EE; --raise:#FFFFFF; --ink:#16242E; --ink-soft:#51616A; --ink-mute:#7B8890; --line:rgba(22,36,46,0.13); --line-strong:rgba(22,36,46,0.28); --res:#A96C1E; --res-deep:#8A5613; --res-tint:rgba(169,108,30,0.10); --com:#2F5D64; --com-deep:#22474D; --com-tint:rgba(47,93,100,0.10); --good:#3F7A4E; --star:#C99A3A; --ink-hero:#0E1B23; --shadow-s:0 1px 2px rgba(22,36,46,.07),0 6px 18px rgba(22,36,46,.07); --shadow-l:0 4px 12px rgba(22,36,46,.09),0 24px 60px rgba(22,36,46,.13);}
:root[data-theme="dark"]{ --paper:#0E161C; --surface:#16222A; --raise:#1C2A33; --ink:#E9EAE4; --ink-soft:#A6B2B8; --ink-mute:#74818A; --line:rgba(255,255,255,0.11); --line-strong:rgba(255,255,255,0.22); --res:#D8A85B; --res-deep:#E8BD72; --res-tint:rgba(216,168,91,0.13); --com:#62A2AA; --com-deep:#7FB9C0; --com-tint:rgba(98,162,170,0.13); --good:#6FB585; --star:#E0B24E; --ink-hero:#0A1218; --shadow-s:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.4); --shadow-l:0 4px 12px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.5);}

*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
h1,h2,h3,h4{font-family:var(--sans); font-weight:700; letter-spacing:-0.02em; margin:0; text-wrap:balance;}
p{margin:0 0 1em;}
a{color:var(--com-deep); text-decoration:none;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--res); font-weight:600;}
.eyebrow.com{color:var(--com);}
.mock-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); opacity:.85;}
.tnum{font-variant-numeric:tabular-nums;}

/* buttons */
.btn{font-family:var(--sans); font-weight:700; font-size:15px; border:none; border-radius:8px; padding:14px 24px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none;}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--res); outline-offset:2px;}
.btn-primary{background:var(--res); color:#1a1206; box-shadow:var(--shadow-s);}
.btn-com{background:var(--com); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong);}
.btn-sm{padding:10px 16px; font-size:13.5px;}
.btn-lg{padding:16px 30px; font-size:16px;}

/* header / nav */
header.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--sans); font-weight:700; letter-spacing:.02em; font-size:16.5px; color:var(--ink);}
.brand .m{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em; background:var(--ink); color:var(--paper); padding:5px 8px; border-radius:4px;}
.nav-links{display:flex; gap:24px; align-items:center; font-family:var(--sans); font-size:14.5px; color:var(--ink-soft);}
.nav-links a:hover, .nav-links a[aria-current]{color:var(--ink);}
.nav-links a[aria-current]{border-bottom:2px solid var(--res); padding-bottom:2px;}
.nav-cta{display:flex; gap:12px; align-items:center;}
.login{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); border:1.5px solid var(--line-strong); padding:8px 15px; border-radius:7px;}
.login:hover{border-color:var(--res);}
@media(max-width:940px){ .nav-links{display:none;} }

/* sections */
section{padding:72px 0;}
.sec-head{max-width:60ch; margin-bottom:34px;}
.sec-head h2{font-size:clamp(26px,3.6vw,38px); line-height:1.08; margin-top:12px;}
.sec-head p{color:var(--ink-soft); font-size:18px; margin:14px 0 0;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.tint{background:var(--surface);}
.dark-band{background:var(--ink-hero); color:#F2EEE6;}
.dark-band h2{color:#FCFAF5;} .dark-band p{color:#D8D2C6;} .dark-band .eyebrow{color:var(--res-deep);}

/* page hero (interior pages) */
.phero{position:relative; overflow:hidden; background:var(--ink-hero); color:#F2EEE6;}
.phero.res-hero:before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 15%, rgba(216,168,91,.34), transparent 55%), linear-gradient(120deg,#10202a,#22160c);}
.phero.com-hero:before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 15%, rgba(98,162,170,.32), transparent 55%), linear-gradient(120deg,#0f2226,#10202a);}
.phero:after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px);}
.phero-in{position:relative; z-index:2; padding:70px 0;}
.phero h1{font-size:clamp(34px,5.6vw,56px); line-height:1.03; color:#FCFAF5; margin:18px 0 0; max-width:18ch;}
.phero .sub{font-size:clamp(17px,2.2vw,21px); color:#D8D2C6; margin:20px 0 0; max-width:48ch; line-height:1.45;}
.phero .eyebrow{color:var(--res-deep);}
.phero.com-hero .eyebrow{color:var(--com-deep);}
.phero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}
.phero .btn-ghost{color:#F2EEE6; border-color:rgba(255,255,255,.28);}
/* optional photo hero (place .phero-photo + .phero-veil as first children of .phero) */
.phero-photo{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;}
.phero-veil{position:absolute; inset:0; z-index:1;}
.phero.res-hero .phero-veil{background:linear-gradient(112deg,rgba(9,17,23,.92),rgba(9,17,23,.66) 45%,rgba(34,22,12,.5));}
.phero.com-hero .phero-veil{background:linear-gradient(112deg,rgba(9,17,23,.93),rgba(9,17,23,.7) 45%,rgba(15,34,38,.55));}

/* real-photo featured cards + image gallery */
.pfeat{display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-s); text-decoration:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;}
.pfeat:hover{transform:translateY(-4px); box-shadow:var(--shadow-l);}
.pfeat img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.pfeat:hover img{transform:scale(1.05);}
.pfeat .pm{padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.pfeat .pm b{font-family:var(--sans); font-size:15px; color:var(--ink); display:block; letter-spacing:-.01em;}
.pfeat .pm span{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute);}
.pfeat .pm .ar{color:var(--res); font-family:var(--sans); font-weight:700;}
.igal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.igal figure{margin:0; position:relative; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-s);}
.igal img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.igal figure:hover img{transform:scale(1.07);}
.igal figcaption{position:absolute; left:0; right:0; bottom:0; padding:24px 14px 11px; background:linear-gradient(transparent,rgba(9,17,23,.8)); color:#fff; font-family:var(--sans); font-weight:700; font-size:13.5px;}
@media(max-width:860px){.igal{grid-template-columns:1fr 1fr;}}

/* trust strip */
.trust{display:flex; flex-wrap:wrap; gap:14px 26px; font-family:var(--sans); font-size:13.5px; color:#CFC9BC;}
.trust.on-light{color:var(--ink-soft);} .trust.on-light b{color:var(--ink);}
.trust b{color:#fff;}
.trust .s{color:var(--star); letter-spacing:1px;}
.phero .trust{margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16);}

/* generic card grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow-s);}
.card.res{border-top:4px solid var(--res);}
.card.com{border-top:4px solid var(--com);}
.card h3{font-size:19px; margin-bottom:8px;}
.card h4{font-size:16px; margin-bottom:6px;}
.card p{color:var(--ink-soft); font-size:15px; margin:0;}
.card .ic{width:42px; height:42px; border-radius:10px; background:var(--res-tint); color:var(--res); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px;}
.card.com .ic{background:var(--com-tint); color:var(--com);}

/* two-path chooser tiles */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.path{position:relative; overflow:hidden; border-radius:16px; padding:34px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; box-shadow:var(--shadow-l); transition:transform .15s ease;}
.path:hover{transform:translateY(-3px);}
.path.res{background:linear-gradient(150deg,#2a1c0c,#7a4e18 70%,#a96c1e);}
.path.com{background:linear-gradient(150deg,#0f2226,#244b52 70%,#2f5d64);}
.path .pk{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85;}
.path h3{font-size:26px; margin:8px 0 6px; color:#fff;}
.path p{margin:0; color:rgba(255,255,255,.82); font-size:15px; max-width:34ch;}
.path .go{font-family:var(--sans); font-weight:700; font-size:14px; margin-top:16px; display:inline-flex; gap:8px; align-items:center; color:#fff;}
.path .deco{position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px); opacity:.6;}

/* financing calculator */
.fin .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;}
.fin ul{list-style:none; padding:0; margin:22px 0 0; font-family:var(--sans); font-size:14.5px;}
.fin li{padding:7px 0 7px 26px; position:relative; color:#E4DFD3;}
.fin li:before{content:"✓"; position:absolute; left:0; color:var(--res-deep); font-weight:700;}
.fin.on-light li{color:var(--ink-soft);}
.calc{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:28px;}
.calc.on-light{background:var(--surface); border-color:var(--line);}
.calc .ct{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#B9C6C9;}
.calc.on-light .ct{color:var(--ink-mute);}
.calc .amt{font-family:var(--sans); font-weight:700; font-size:15px; color:#fff; margin:6px 0 0; display:flex; justify-content:space-between; align-items:baseline;}
.calc.on-light .amt{color:var(--ink);}
.calc .amt .v{font-size:22px; color:var(--res-deep); font-variant-numeric:tabular-nums;}
.calc input[type=range]{width:100%; margin:14px 0 4px; accent-color:var(--res); height:6px;}
.calc .mo{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); text-align:center;}
.calc.on-light .mo{border-top-color:var(--line);}
.calc .mo .big{font-family:var(--sans); font-weight:700; font-size:46px; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; line-height:1;}
.calc.on-light .mo .big{color:var(--ink);}
.calc .mo .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#B9C6C9; margin-top:8px;}
.calc .disc{font-family:var(--mono); font-size:10px; color:#8b979b; margin-top:14px; line-height:1.5; text-align:center;}

/* before / after slider */
.ba-wrap{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-l); aspect-ratio:16/9; user-select:none; touch-action:none;}
.ba-layer{position:absolute; inset:0; display:flex; align-items:flex-end; padding:20px;}
.ba-after{background:linear-gradient(155deg,#efe7d8,#d8c3a0 60%,#b98f52);}
.ba-before{background:linear-gradient(155deg,#5a5148,#736658 60%,#8a7d6d); clip-path:inset(0 50% 0 0);}
.ba-tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:rgba(14,22,28,.72); color:#fff; padding:6px 11px; border-radius:6px;}
.ba-after .ba-tag{margin-left:auto;}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); z-index:5;}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow-l); display:flex; align-items:center; justify-content:center; z-index:6; cursor:ew-resize; font-family:var(--mono); color:var(--ink-hero); font-size:14px; font-weight:700;}
.ba-cap{font-family:var(--sans); font-size:14px; color:var(--ink-soft); margin-top:14px; text-align:center;}

/* photo placeholder tiles (mockup imagery) */
.ph-img{border-radius:12px; box-shadow:var(--shadow-s); position:relative; overflow:hidden; aspect-ratio:4/3;}
.ph-img .tl{position:absolute; left:10px; bottom:9px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55);}
.ph-k{background:linear-gradient(155deg,#c9a86e,#8a5613);}
.ph-k2{background:linear-gradient(155deg,#d8b98a,#a96c1e);}
.ph-b{background:linear-gradient(155deg,#7fa6ab,#2f5d64);}
.ph-b2{background:linear-gradient(155deg,#9ab3b7,#345a60);}
.ph-c{background:linear-gradient(150deg,#2a3138,#4a5560);}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery.g4{grid-template-columns:repeat(4,1fr);}
.gitem .gcap{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); margin-top:10px; line-height:1.4;}

/* portfolio filter bar */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.filter-btn{font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.02em; padding:9px 18px; border-radius:22px; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink-soft); cursor:pointer; transition:transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;}
.filter-btn:hover{transform:translateY(-1px); border-color:var(--res); color:var(--ink);}
.filter-btn:focus-visible{outline:2px solid var(--res); outline-offset:2px;}
.filter-btn[aria-current="true"]{background:var(--res); border-color:var(--res); color:#1a1206;}

/* process steps */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.step{background:var(--surface); padding:24px 20px;}
.step .n{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--res);}
.step h4{font-size:16px; margin:12px 0 6px;}
.step p{margin:0; font-size:14px; color:var(--ink-soft); font-family:var(--sans); line-height:1.5;}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{text-align:center; padding:20px;}
.stat .n{font-family:var(--sans); font-weight:700; font-size:38px; letter-spacing:-.02em; color:var(--res); font-variant-numeric:tabular-nums; line-height:1;}
.stat .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin-top:10px;}

/* reviews */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.rev{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow-s);}
.rev .s{color:var(--star); letter-spacing:2px; font-size:15px;}
.rev p{font-size:15.5px; margin:12px 0 16px; color:var(--ink);}
.rev .who{font-family:var(--sans); font-size:13.5px; color:var(--ink-mute);}
.rev .who b{color:var(--ink); display:block; font-size:14.5px;}

/* faq */
.faq{max-width:800px;}
.faq details{border-bottom:1px solid var(--line); padding:6px 0;}
.faq summary{font-family:var(--sans); font-weight:700; font-size:16.5px; padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:"+"; font-family:var(--mono); color:var(--res); font-size:22px; font-weight:400;}
.faq details[open] summary:after{content:"–";}
.faq details p{color:var(--ink-soft); margin:0 0 18px; max-width:68ch;}

/* forms */
.form{display:grid; gap:16px; max-width:560px;}
.form .frow{display:grid; gap:6px;}
.form label{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft);}
.form input, .form select, .form textarea{font-family:var(--serif); font-size:16px; padding:12px 14px; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--raise); color:var(--ink);}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid var(--res); outline-offset:1px; border-color:var(--res);}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* closing CTA */
.close{border-radius:20px; padding:56px 44px; text-align:center; color:#fff; box-shadow:var(--shadow-l); background:linear-gradient(150deg, var(--res-deep), var(--res));}
.close.com{background:linear-gradient(150deg, var(--com-deep), var(--com));}
.close h2{font-size:clamp(28px,4vw,42px); color:#fff; line-height:1.05; max-width:20ch; margin:0 auto;}
.close p{color:rgba(255,255,255,.9); font-size:18px; margin:16px auto 0; max-width:44ch;}
.close .btn-primary{background:#fff; color:var(--res-deep); margin-top:28px;}
.close.com .btn-primary{color:var(--com-deep);}
.close .fast{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:18px;}

/* footer */
footer.foot{background:var(--ink-hero); color:#C8C2B6; padding:50px 0 40px; font-family:var(--sans); font-size:14px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.foot .brand{color:#fff;}
.foot a{color:#C8C2B6;} .foot a:hover{color:#fff;}
.foot-col b{color:#fff; display:block; margin-bottom:10px; font-size:13px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;}
.foot-col a{display:block; padding:4px 0;}
.foot-legal{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); font-family:var(--mono); font-size:11.5px; color:#8b979b; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* breadcrumb */
.crumb{font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--ink-mute); padding:16px 0 0;}
.crumb a{color:var(--ink-mute);} .crumb a:hover{color:var(--ink);}

/* utility */
.lead{font-size:20px; color:var(--ink-soft); max-width:60ch; line-height:1.5;}
.prose{max-width:68ch;} .prose p{color:var(--ink-soft);}
.pill{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:20px; background:var(--res-tint); color:var(--res); font-weight:600;}
.pill.com{background:var(--com-tint); color:var(--com);}
.divider{height:1px; background:var(--line); border:none; margin:0;}

@media(max-width:860px){
  .grid-2,.grid-3,.grid-4,.paths,.fin .wrap,.reviews,.stats,.gallery,.gallery.g4,.form .two{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  section{padding:56px 0;}
}
/* ===================== MOTION LAYER (added; auto-applied by site.js) ===================== */
#site-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--res-deep),var(--res));z-index:100;box-shadow:0 0 12px var(--res);transition:width .05s linear;}
#site-floatcta{position:fixed;right:18px;bottom:18px;z-index:90;transform:translateY(150%);transition:transform .5s cubic-bezier(.16,1,.3,1);}
#site-floatcta.show{transform:translateY(0);}
#site-floatcta a{display:inline-flex;align-items:center;gap:8px;background:var(--res);color:#1a1206;font-family:var(--sans);font-weight:700;font-size:14.5px;padding:13px 20px;border-radius:40px;box-shadow:var(--shadow-l);text-decoration:none;}
#site-floatcta a:before{content:"";width:8px;height:8px;border-radius:50%;background:#1a1206;animation:bp-pulse 1.6s infinite;}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s;} .reveal.d2{transition-delay:.14s;} .reveal.d3{transition-delay:.21s;} .reveal.d4{transition-delay:.28s;} .reveal.d5{transition-delay:.35s;}

header.nav{transition:background .3s,box-shadow .3s,border-color .3s;}
header.nav.scrolled{box-shadow:0 6px 24px rgba(22,36,46,.10);}

/* interactive polish on existing components */
.btn{position:relative;overflow:hidden;}
.btn-primary:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s;}
.btn-primary:hover:after{left:130%;}
.card,.rev,.tcard{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.card:hover,.rev:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);}
.ph-img,.thumb,.gitem .ph-img{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.ph-img:hover,.thumb:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-l);}
.step:hover .n{color:var(--res-deep);}
.ba-knob.hint{animation:bp-knobhint 2.4s ease-in-out 3;}
.stat .n{transition:none;}

@keyframes bp-pulse{0%{box-shadow:0 0 0 0 rgba(169,108,30,.5);}70%{box-shadow:0 0 0 10px rgba(169,108,30,0);}100%{box-shadow:0 0 0 0 rgba(169,108,30,0);}}
@keyframes bp-knobhint{0%,100%{transform:translate(-50%,-50%);}25%{transform:translate(-130%,-50%);}75%{transform:translate(30%,-50%);}}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} .reveal{opacity:1 !important;transform:none !important;} }

/* real photos swapped in for placeholder gallery tiles (added) */
.ph-k {background:#8a5613 url('img/stock/k4.jpeg') center/cover no-repeat;}
.ph-k2{background:#a96c1e url('img/stock/k3.jpeg') center/cover no-repeat;}
.ph-b {background:#2f5d64 url('img/stock/b1.jpeg') center/cover no-repeat;}
.ph-b2{background:#345a60 url('img/stock/b3.jpeg') center/cover no-repeat;}
.ph-c {background:#2a3138 url('img/office-ti.jpeg') center/cover no-repeat;}
.avatar{aspect-ratio:4/3; border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; background:var(--surface); border:1px solid var(--line); color:var(--ink-mute); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; box-shadow:var(--shadow-s);}