:root{
  --paper:#EFEAE0; --paper2:#F8F5EE; --ink:#1B1712; --ink-soft:#3A342C;
  --maroon:#7A1230; --maroon-wash:#F2E6E3; --brass:#8C6B2E; --brass-light:#C7A45C;
  --steel:#63697A; --rule:rgba(122,18,48,.18); --dark:#16110D; --dark2:#1F1812;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:80px;}
body{margin:0; color:var(--ink); font-family:'IBM Plex Sans',sans-serif; line-height:1.6; background:var(--paper);}
h1,h2,.serif{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.015em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}
a{color:inherit;}
img{max-width:100%;}

/* ---------- Header / Nav ---------- */
header{position:sticky; top:0; top:env(safe-area-inset-top,0px); background:rgba(239,234,224,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); z-index:100;}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:1180px; margin:0 auto;}
.brand{display:flex; flex-direction:column; line-height:1.1; text-decoration:none;}
.brand .name{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--maroon); font-weight:600;}
.brand .tag{font-size:.65rem; color:var(--steel); margin-top:3px; letter-spacing:.03em;}
nav.desktop-nav{display:flex; gap:32px; font-size:.92rem;}
nav.desktop-nav a{text-decoration:none; opacity:.8; color:var(--ink-soft); position:relative; padding-bottom:2px;}
nav.desktop-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--maroon); transition:right .25s ease;}
nav.desktop-nav a:hover::after{right:0;}
nav.desktop-nav a.active{color:var(--maroon); opacity:1;}
.cta{border:1px solid var(--maroon); color:var(--maroon); padding:10px 20px; text-decoration:none; font-size:.88rem; white-space:nowrap; display:inline-block;}
.cta:hover{background:var(--maroon); color:var(--paper2);}
.navlinks{display:flex; align-items:center; gap:20px;}

.menu-btn{display:none; background:none; border:none; padding:8px; cursor:pointer; width:44px; height:44px; align-items:center; justify-content:center;}
.menu-btn span{display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:background .2s;}
.menu-btn span::before, .menu-btn span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:transform .25s ease;}
.menu-btn span::before{top:-7px;} .menu-btn span::after{top:7px;}
.menu-btn.open span{background:transparent;}
.menu-btn.open span::before{transform:translateY(7px) rotate(45deg);}
.menu-btn.open span::after{transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none; flex-direction:column; background:var(--paper2); border-bottom:1px solid var(--rule); position:absolute; left:0; right:0; top:100%; max-height:0; overflow:hidden; transition:max-height .3s ease; z-index:99;}
.mobile-nav.open{max-height:520px;}
.mobile-nav a{display:block; padding:16px 28px; text-decoration:none; color:var(--ink); font-size:1rem; border-bottom:1px solid var(--rule);}
.mobile-nav a.active{color:var(--maroon);}
.mobile-nav .cta-mobile{margin:16px 28px; text-align:center; background:var(--maroon); color:var(--paper2); padding:14px; border:none;}

@media(max-width:860px){
  nav.desktop-nav{display:none;}
  .menu-btn{display:inline-flex;}
  .mobile-nav{display:flex;}
}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--maroon); color:var(--paper2); padding:15px 28px; text-decoration:none; font-weight:600; font-size:.95rem; box-shadow:0 10px 24px -10px rgba(122,18,48,.45); display:inline-block; border:none; cursor:pointer;}
.btn-primary:hover{background:#5E0E24;}
.btn-secondary{border:1px solid var(--steel); color:var(--ink); padding:15px 28px; text-decoration:none; font-size:.95rem; display:inline-block;}
.btn-secondary:hover{border-color:var(--maroon); color:var(--maroon);}
.ctas{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Sections ---------- */
section{padding:60px 0; position:relative; z-index:2;}
.sectionhead{max-width:60ch; margin-bottom:30px;}
.sectionhead h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin:0 0 14px; color:var(--ink);}
.sectionhead p{color:var(--steel); margin:0; font-size:1.02rem;}
.sectionhead.centered{margin-left:auto; margin-right:auto; text-align:center;}
.sectionhead.centered p{margin:0 auto;}
@media(max-width:640px){
  section{padding:42px 0;}
  .sectionhead{margin-bottom:34px;}
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ---------- Footer ---------- */
footer{padding:44px 0 30px; background:var(--dark); color:#C9C1B0; position:relative; z-index:2;}
.footgrid{display:grid; grid-template-columns:1fr 1fr 1.1fr 1.2fr; gap:36px;}
footer h4{font-size:.85rem; color:var(--brass-light); margin:0 0 14px; font-weight:500;}
footer p, footer address{margin:0 0 7px; font-style:normal; font-size:.94rem;}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(199,164,92,.2); font-size:.8rem; color:#8A8275; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.footer-logo{margin-bottom:20px;}
.footer-logo .fname{font-family:'Fraunces',serif; font-size:1.6rem; font-weight:600; color:var(--brass-light); display:block; letter-spacing:-.01em;}
.footer-logo .ftag{font-size:.68rem; letter-spacing:.14em; color:#9A9184; text-transform:uppercase; margin-top:5px; display:block;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:34px; height:34px; border-radius:50%; background:rgba(199,164,92,.1); display:flex; align-items:center; justify-content:center; color:#C9C1B0; transition:background .2s, color .2s; flex-shrink:0;}
.footer-social a:hover{background:var(--brass-light); color:var(--dark);}
.footer-social svg{width:16px; height:16px; display:block;}

.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.footer-links a{color:#C9C1B0; text-decoration:none; font-size:.92rem;}
.footer-links a:hover{color:var(--brass-light);}

.addr-box{background:rgba(242,236,223,.06); border:1px solid rgba(199,164,92,.2); padding:16px 18px; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:.78rem; color:#D8D0C0; line-height:1.75; margin-top:4px;}

.footer-map{border:1px solid rgba(199,164,92,.2); overflow:hidden; aspect-ratio:4/3; background:#0d0a08;}
.footer-map iframe{width:100%; height:100%; border:0; display:block;}

@media(max-width:900px){
  .footgrid{grid-template-columns:1fr 1fr; gap:32px;}
}
@media(max-width:600px){
  .footgrid{grid-template-columns:1fr; gap:30px;}
  footer{padding:48px 0 32px;}
  .foot-bottom{flex-direction:column; gap:6px;}
  .footer-map{aspect-ratio:16/10;}
}

/* ================= HOMEPAGE ================= */
.hero{
  padding:70px 0 60px; position:relative; overflow:hidden; min-height:0; display:flex; align-items:center;
  background:
    linear-gradient(100deg, rgba(22,17,13,.82) 20%, rgba(22,17,13,.5) 55%, rgba(22,17,13,.72) 100%),
    url('../img/hero-skyline.jpg') center 35%/cover no-repeat;
}
.hero .kicker{color:var(--brass-light);}
.hero h1{color:var(--paper2);}
.hero .lede{color:#E7DFD0;}
.hero .btn-secondary{border-color:rgba(242,236,223,.5); color:var(--paper2);}
.hero .btn-secondary:hover{border-color:var(--brass-light); color:var(--brass-light);}
.herogrid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; position:relative; z-index:2; width:100%;}
.kicker{color:var(--maroon); font-size:.92rem; margin-bottom:14px; letter-spacing:.02em;}
h1{font-size:clamp(2rem,4vw,3.2rem); margin:0 0 16px; max-width:13ch; line-height:1.08; color:var(--ink);}
.powerline{width:100%; max-width:440px; height:2px; margin:0 0 18px; overflow:hidden;}
.powerline rect{fill:none;}
.lede{max-width:46ch; color:var(--ink-soft); font-size:1.02rem; margin-bottom:26px;}

.charter{border:1px solid var(--rule); padding:26px 28px 20px; position:relative; background:var(--paper2); box-shadow:0 24px 60px -30px rgba(27,23,18,.25);}
.charter::before, .charter::after{content:""; position:absolute; left:28px; right:28px; height:1px; background:linear-gradient(90deg, transparent, var(--brass-light) 20%, var(--brass-light) 80%, transparent);}
.charter::before{top:6px;} .charter::after{bottom:6px;}
.seal{position:absolute; top:-18px; right:22px; width:44px; height:44px;}
.charter h2{font-size:1.05rem; color:var(--maroon); margin:6px 0 16px;}
.ledger-row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--rule);}
.ledger-row:last-child{border-bottom:none;}
.ledger-num{font-family:'Fraunces',serif; font-size:1.45rem; color:var(--ink); font-weight:600;}
.ledger-label{font-size:.82rem; color:var(--steel); text-align:right; max-width:14ch;}

.strip{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:24px 0; position:relative; z-index:2;}
.stripgrid{display:flex; gap:44px; flex-wrap:wrap; justify-content:space-between;}
.stripitem{flex:1; min-width:220px;}
.stripitem .label{color:var(--maroon); margin-bottom:8px; font-family:'Fraunces',serif; font-size:1.05rem;}
.stripitem p{margin:0; color:var(--ink-soft); font-size:.95rem; max-width:32ch;}

#services{background:var(--paper2);}
.servicelist{border-top:1px solid var(--rule);}
.service{display:grid; grid-template-columns:48px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--rule); transition:padding-left .25s;}
.service:hover{padding-left:8px;}
.service svg{margin-top:4px; stroke:var(--maroon);}
.service h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; margin:0 0 8px; color:var(--ink);}
.service p{margin:0; color:var(--ink-soft); font-size:.98rem; max-width:58ch;}

#partners{background:var(--maroon-wash);}
.cliwrap{display:flex; flex-wrap:wrap; gap:0;}
.partnerwrap .partner{border-right:1px solid var(--rule); padding:32px 40px; display:flex; align-items:center; justify-content:center; flex:1; min-width:150px;}
.partnerwrap .partner:last-child{border-right:none;}
.partnerwrap .partner img{max-height:52px; max-width:170px; width:auto; transition:transform .3s ease;}
.partnerwrap .partner:hover img{transform:scale(1.06);}

.clients{background:linear-gradient(180deg, var(--dark), var(--dark2)); color:#EDE6D9;}
.clients .sectionhead h2{color:#F2ECDF;}
.clients .sectionhead p{color:#9A9184;}
.clientgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(199,164,92,.15);}
.clientcard{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--dark);}
.clientcard img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.04); transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.clientcard:hover img{transform:scale(1.06);}
.clientcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,17,13,0) 45%, rgba(22,17,13,.92)); pointer-events:none;}
.clientcard .cname{position:absolute; left:20px; right:20px; bottom:16px; z-index:2; font-family:'Fraunces',serif; font-size:1.02rem; color:#F2ECDF;}

@media(max-width:900px){
  .herogrid{grid-template-columns:1fr;}
  .hero{min-height:auto; padding:90px 0 60px; background:linear-gradient(180deg, rgba(22,17,13,.55), rgba(22,17,13,.85)), url('../img/hero-skyline.jpg') center 35%/cover no-repeat;}
}
@media(max-width:760px){
  .clientgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .partnerwrap .partner{min-width:42%; border-right:none; border-bottom:1px solid var(--rule);}
  .clientgrid{grid-template-columns:1fr;}
  .ctas{flex-direction:column;}
  .ctas a{text-align:center;}
}

/* ================= ABOUT PAGE ================= */
.about-hero{
  min-height:380px; display:flex; align-items:flex-end; position:relative; padding:64px 0 40px;
  background: linear-gradient(180deg, rgba(22,17,13,.15), rgba(22,17,13,.75)), url('../img/about-hero.jpg') center 30%/cover no-repeat;
}
.about-hero .wrap{color:var(--paper2);}
.about-hero h1{color:var(--paper2);}
.about-hero .lede{max-width:60ch; color:#E7DFD0; font-size:1.05rem;}
.about-hero .lede b{color:var(--paper2);}
.about-hero .kicker{color:var(--brass-light);}

.whygrid{display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start;}
.whyphoto{position:relative; overflow:hidden; aspect-ratio:4/5;}
.whyphoto img{width:100%; height:100%; object-fit:cover; display:block;}
.whylist{border-top:1px solid var(--rule);}
.whyitem{border-bottom:1px solid var(--rule); padding:18px 0;}
.whyitem h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; margin:0 0 8px; color:var(--ink);}
.whyitem p{margin:0; color:var(--ink-soft); font-size:.97rem; max-width:52ch;}

.statstrip{background:var(--maroon-wash); padding:0;}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr);}
.statitem{padding:28px 22px; text-align:left; border-right:1px solid var(--rule);}
.statitem:last-child{border-right:none;}
.statitem .num{font-family:'Fraunces',serif; font-size:2rem; font-weight:600; color:var(--maroon); display:block;}
.statitem .lab{color:var(--ink-soft); font-size:.88rem;}

@media(max-width:860px){ .whygrid{grid-template-columns:1fr;} }
@media(max-width:700px){ .statgrid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){
  .about-hero{min-height:auto; padding:70px 0 40px;}
}

/* ================= CONTACT PAGE ================= */
.contact-hero{
  min-height:260px; display:flex; align-items:center; position:relative; padding:48px 0;
  background: linear-gradient(120deg, rgba(22,17,13,.88) 30%, rgba(22,17,13,.55)), url('../img/contact-hero.jpg') center/cover no-repeat;
}
.contact-hero .wrap{color:var(--paper2);}
.contact-hero h1{color:var(--paper2);}
.contact-hero .sub{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--brass-light);}
.contact-hero .kicker{color:var(--brass-light);}

.contactgrid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.mapbox{border:1px solid var(--rule); overflow:hidden;}
.mapbox img{width:100%; display:block;}
.maplink{display:inline-block; margin-top:14px; font-size:.9rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon);}

.reach h3{font-family:'Fraunces',serif; font-size:1rem; color:var(--brass); margin:0 0 22px; letter-spacing:.02em;}
.reachrow{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule);}
.reachrow:first-of-type{border-top:1px solid var(--rule);}
.reachrow .ico{width:20px; flex-shrink:0; margin-top:3px; stroke:var(--maroon);}
.reachrow div{font-size:.98rem; color:var(--ink-soft);}
.reachrow a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent;}
.reachrow a:hover{border-color:var(--maroon); color:var(--maroon);}

#inquiry{background:var(--paper2);}
.formwrap{max-width:720px;}
.formrow{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.field label{display:block; font-size:.82rem; color:var(--steel); margin-bottom:8px;}
.field input, .field textarea{width:100%; border:1px solid var(--rule); background:var(--paper); padding:14px; font-family:'IBM Plex Sans',sans-serif; font-size:1rem; color:var(--ink);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--brass);}
.field textarea{resize:vertical; min-height:120px;}
.submitbtn{background:var(--maroon); color:var(--paper2); border:none; padding:15px 32px; font-size:.95rem; font-weight:600; cursor:pointer; width:100%;}
.submitbtn:hover{background:#5E0E24;}

@media(max-width:860px){ .contactgrid{grid-template-columns:1fr; gap:40px;} }
@media(max-width:600px){
  .formrow{grid-template-columns:1fr;}
  .contact-hero{min-height:auto; padding:60px 0;}
  .submitbtn{width:100%;}
}

/* ---------- General touch/mobile polish ---------- */
@media(max-width:600px){
  .navrow{padding:14px 20px;}
  .wrap{padding:0 20px;}
  a, button{-webkit-tap-highlight-color:rgba(122,18,48,.15);}
}

/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4); z-index:150; transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px; display:block;}
@media(max-width:600px){
  .wa-float{width:52px; height:52px; bottom:16px; right:16px;}
  .wa-float svg{width:25px; height:25px;}
}

/* ================= PRODUCTS PAGE ================= */
.products-hero{
  min-height:320px; display:flex; align-items:center; position:relative; padding:56px 0 44px;
  background: linear-gradient(100deg, rgba(22,17,13,.9) 25%, rgba(22,17,13,.6)), url('../img/hero-skyline.jpg') center 25%/cover no-repeat;
}
.products-hero .wrap{color:var(--paper2);}
.products-hero h1{color:var(--paper2); max-width:16ch;}
.products-hero .kicker{color:var(--brass-light);}
.products-hero .lede{max-width:56ch; color:#E7DFD0; font-size:1.05rem; margin-bottom:28px;}
.specbadges{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(199,164,92,.3); max-width:640px;}
.specbadges .sb{padding:16px 28px 16px 0; margin-right:28px; border-right:1px solid rgba(199,164,92,.3);}
.specbadges .sb:last-child{border-right:none;}
.specbadges .sb .v{display:block; font-family:'Fraunces',serif; font-size:1.3rem; color:var(--brass-light);}
.specbadges .sb .l{font-size:.78rem; color:#B9AF9C;}

.catnav{position:sticky; top:65px; background:var(--paper2); border-bottom:1px solid var(--rule); z-index:50; overflow-x:auto; scrollbar-width:none;}
.catnav::-webkit-scrollbar{display:none;}
.catnav .wrap{display:flex; gap:8px; padding:14px 28px; white-space:nowrap;}
.catnav a{font-size:.86rem; color:var(--ink-soft); text-decoration:none; padding:9px 16px; border:1px solid var(--rule); flex-shrink:0;}
.catnav a:hover, .catnav a.active{background:var(--maroon); color:var(--paper2); border-color:var(--maroon);}

.category-block{padding:48px 0; border-bottom:1px solid var(--rule); scroll-margin-top:130px;}
.category-block:nth-child(even){background:var(--paper2);}
.cat-head{max-width:70ch; margin-bottom:40px;}
.cat-head .catlabel{color:var(--brass); font-size:.85rem; margin-bottom:10px; letter-spacing:.02em;}
.cat-head h2{font-size:clamp(1.5rem,2.8vw,2rem); margin:0 0 12px; color:var(--ink);}
.cat-head p{color:var(--steel); margin:0; font-size:1rem; max-width:65ch;}

.productgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule);}
@media(max-width:760px){ .productgrid{grid-template-columns:1fr;} }
.productcard{background:var(--paper); padding:24px 26px; display:flex; flex-direction:column; gap:10px;}
.category-block:nth-child(even) .productcard{background:var(--paper2);}
.productcard .picon{stroke:var(--maroon);}
.productcard h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; margin:0; color:var(--ink);}
.productcard .tagline{font-size:.78rem; color:var(--brass); letter-spacing:.02em;}
.productcard p{margin:0; color:var(--ink-soft); font-size:.95rem;}
.productcard .quotelink{margin-top:auto; font-size:.85rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon); align-self:flex-start;}

.cta-band{background:var(--maroon-wash); padding:40px 0; text-align:left;}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.cta-band h2{font-size:1.4rem; margin:0 0 6px; color:var(--ink);}
.cta-band p{margin:0; color:var(--ink-soft);}

@media(max-width:600px){
  .products-hero{min-height:auto; padding:60px 0 40px;}
  .specbadges .sb{margin-right:18px; padding-right:0;}
  .category-block{padding:36px 0;}
  .cta-band{text-align:center;}
  .cta-band .wrap{flex-direction:column;}
}

/* ================= PORTFOLIO PAGE ================= */
.portfolio-hero{
  min-height:300px; display:flex; align-items:center; position:relative; padding:56px 0 44px;
  background: linear-gradient(100deg, rgba(22,17,13,.9) 25%, rgba(22,17,13,.6)), url('../img/hero-skyline.jpg') center 45%/cover no-repeat;
}
.portfolio-hero .wrap{color:var(--paper2);}
.portfolio-hero h1{color:var(--paper2); max-width:18ch;}
.portfolio-hero .kicker{color:var(--brass-light);}
.portfolio-hero .lede{max-width:56ch; color:#E7DFD0; font-size:1.05rem; margin:0;}

.portfoliogrid{display:flex; flex-direction:column; gap:1px; background:var(--rule);}
.portfoliocard{background:var(--paper); display:grid; grid-template-columns:1fr 1fr;}
.category-block:nth-child(even) .portfoliocard{background:var(--paper2);}
.portfoliocard:nth-child(even) .pf-photo{order:2;}
.portfoliocard:nth-child(even) .pf-body{order:1;}
.portfoliocard .pf-photo{overflow:hidden; min-height:240px;}
.portfoliocard .pf-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.portfoliocard:hover .pf-photo img{transform:scale(1.05);}
.portfoliocard .pf-body{padding:30px 34px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
.portfoliocard .pf-sector{font-size:.78rem; color:var(--brass); letter-spacing:.02em;}
.portfoliocard h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.4rem; margin:0; color:var(--ink);}
.portfoliocard p{margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.65;}
.portfoliocard .pf-scope{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.portfoliocard .pf-scope li{font-size:.9rem; color:var(--ink-soft); padding-left:18px; position:relative;}
.portfoliocard .pf-scope li::before{content:"—"; position:absolute; left:0; color:var(--brass);}
.portfoliocard .quotelink{margin-top:8px; font-size:.85rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon); align-self:flex-start;}

@media(max-width:760px){
  .portfoliocard{grid-template-columns:1fr;}
  .portfoliocard:nth-child(even) .pf-photo, .portfoliocard:nth-child(even) .pf-body{order:0;}
  .portfoliocard .pf-photo{min-height:220px; aspect-ratio:16/10;}
  .portfoliocard .pf-body{padding:32px 28px;}
}

@media(max-width:600px){
  .portfolio-hero{min-height:auto; padding:60px 0 40px;}
}

/* ================= DENSER LAYOUT + INFO COMPONENTS ================= */
/* services: two-column grid instead of one long list */
.servicelist{display:grid; grid-template-columns:1fr 1fr; column-gap:48px; border-top:none;}
.service{border-top:1px solid var(--rule); border-bottom:none; padding:20px 0;}
.servicelist .service:nth-last-child(-n+2){border-bottom:1px solid var(--rule);}
@media(max-width:860px){
  .servicelist{grid-template-columns:1fr;}
  .servicelist .service:nth-last-child(2){border-bottom:none;}
}

/* range-at-a-glance cards (homepage) */
.rangegrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule);}
.rangecard{background:var(--paper2); display:grid; grid-template-columns:150px 1fr; gap:0; align-items:stretch;}
.rangecard .rimg{background:linear-gradient(160deg,#2a2420,#16110D); display:flex; align-items:center; justify-content:center; padding:10px;}
.rangecard .rimg img{max-width:100%; max-height:170px; object-fit:contain; display:block;}
.rangecard .rimg.light{background:linear-gradient(160deg,#e9e4da,#d6d0c4);}
.rangecard .rbody{padding:20px 22px; display:flex; flex-direction:column; gap:8px;}
.rangecard h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; margin:0; color:var(--ink);}
.rangecard .rtag{font-size:.76rem; color:var(--brass);}
.rangecard p{margin:0; font-size:.9rem; color:var(--ink-soft);}
.rangecard .rfacts{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.rangecard .rfacts span{font-size:.74rem; border:1px solid var(--rule); padding:3px 8px; color:var(--ink-soft); background:var(--paper);}
.rangecard a{font-size:.85rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon); align-self:flex-start; margin-top:auto;}
@media(max-width:900px){ .rangegrid{grid-template-columns:1fr;} }
@media(max-width:520px){ .rangecard{grid-template-columns:1fr;} .rangecard .rimg{min-height:150px;} }

/* industries grid */
.industrygrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule);}
.industry{background:var(--paper); padding:18px 20px; display:flex; flex-direction:column; gap:6px;}
.industry svg{stroke:var(--maroon);}
.industry h3{font-family:'Fraunces',serif; font-weight:600; font-size:1rem; margin:4px 0 0; color:var(--ink);}
.industry p{margin:0; font-size:.84rem; color:var(--steel); line-height:1.5;}
@media(max-width:900px){ .industrygrid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .industrygrid{grid-template-columns:1fr;} }

/* process steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule);}
.step{padding:20px 22px 4px 0; border-right:1px solid var(--rule); margin-right:22px;}
.step:last-child{border-right:none; margin-right:0;}
.step .snum{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--brass-light); font-weight:600; display:block; margin-bottom:4px;}
.step h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; margin:0 0 6px; color:var(--ink);}
.step p{margin:0; font-size:.88rem; color:var(--ink-soft);}
@media(max-width:860px){ .steps{grid-template-columns:1fr 1fr;} .step{border-right:none; margin-right:0; padding-right:16px;} }
@media(max-width:480px){ .steps{grid-template-columns:1fr;} }

/* credentials (about) */
.credgrid{display:grid; grid-template-columns:5fr 6fr; gap:36px; align-items:center;}
.credphoto{overflow:hidden; border:1px solid var(--rule);}
.credphoto img{width:100%; display:block;}
.credlist{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px;}
.credlist li{font-size:.9rem; color:var(--ink-soft); padding-left:16px; position:relative;}
.credlist li::before{content:"—"; position:absolute; left:0; color:var(--brass);}
@media(max-width:860px){ .credgrid{grid-template-columns:1fr;} }
@media(max-width:520px){ .credlist{grid-template-columns:1fr;} }
.isorow{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.isorow span{font-size:.78rem; border:1px solid var(--brass-light); color:var(--brass); padding:5px 11px; background:var(--paper2);}

/* products: glance table, feature blocks, spec tables */
.tablewrap{overflow-x:auto; border:1px solid var(--rule); background:var(--paper2); -webkit-overflow-scrolling:touch;}
.spectable{border-collapse:collapse; width:100%; font-size:.8rem;}
.spectable th, .spectable td{padding:8px 11px; text-align:right; border-bottom:1px solid var(--rule); white-space:nowrap;}
.spectable thead th{background:var(--dark); color:#F2ECDF; font-weight:500; font-size:.72rem; letter-spacing:.01em;}
.spectable thead tr.grp th{background:var(--dark2); color:var(--brass-light); text-align:center; border-bottom:1px solid rgba(199,164,92,.25);}
.spectable th:first-child, .spectable td:first-child{text-align:left; position:sticky; left:0; z-index:1;}
.spectable tbody td:first-child{background:var(--paper2); font-weight:600; color:var(--ink);}
.spectable tbody tr:nth-child(even) td{background:rgba(122,18,48,.04);}
.spectable tbody tr:nth-child(even) td:first-child{background:#f1ebe3;}
.spectable td.l, .spectable th.l{text-align:left;}
.spectable.glance td, .spectable.glance th{white-space:normal; text-align:left; vertical-align:top;}
.tablenote{font-size:.76rem; color:var(--steel); margin:8px 0 0;}

.pfeature{display:grid; grid-template-columns:5fr 7fr; gap:34px; align-items:start; padding:26px 0; border-top:1px solid var(--rule);}
.pfeature:first-of-type{border-top:none; padding-top:0;}
.pmedia{background:linear-gradient(160deg,#e9e4da,#d3cdc0); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; padding:14px; min-height:240px;}
.pmedia.dark{background:radial-gradient(ellipse at 50% 40%,#3a312a,#16110D 75%);}
.pmedia img{max-width:100%; max-height:400px; object-fit:contain; display:block;}
.pbody h3{font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; margin:0 0 4px; color:var(--ink);}
.pbody .ptag{font-size:.82rem; color:var(--brass); margin-bottom:10px; display:block;}
.pbody p{margin:0 0 12px; color:var(--ink-soft); font-size:.95rem;}
.pbody h4{font-size:.78rem; color:var(--maroon); margin:16px 0 8px; font-weight:600; letter-spacing:.02em;}
.factgrid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin:14px 0;}
.fact{padding:10px 12px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper2);}
.fact b{display:block; font-family:'Fraunces',serif; font-size:1.05rem; color:var(--maroon); font-weight:600;}
.fact span{font-size:.72rem; color:var(--steel); line-height:1.35; display:block;}
.featlist{list-style:none; padding:0; margin:0; columns:2; column-gap:26px;}
.featlist li{font-size:.86rem; color:var(--ink-soft); padding-left:15px; position:relative; margin-bottom:7px; break-inside:avoid;}
.featlist li::before{content:"—"; position:absolute; left:0; color:var(--brass);}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-size:.75rem; border:1px solid var(--rule); padding:4px 10px; color:var(--ink-soft); background:var(--paper);}
.chargebox{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); margin-top:6px;}
.chargebox div{padding:10px 14px; font-size:.84rem; color:var(--ink-soft); background:var(--paper2); border-right:1px solid var(--rule);}
.chargebox div:last-child{border-right:none;}
.chargebox b{display:block; color:var(--ink); font-size:.95rem;}
.dlrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.dlrow .btn-primary, .dlrow .btn-secondary{padding:12px 20px; font-size:.88rem;}
.subblock{margin-top:8px;}
.subblock h4{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--ink); margin:0 0 10px; font-weight:600; letter-spacing:0;}
@media(max-width:900px){ .pfeature{grid-template-columns:1fr;} .pmedia{min-height:200px;} }
@media(max-width:560px){ .factgrid{grid-template-columns:1fr 1fr;} .featlist{columns:1;} }

/* FAQ */
.faq{border-top:1px solid var(--rule); max-width:860px;}
.faq details{border-bottom:1px solid var(--rule); padding:14px 0;}
.faq summary{cursor:pointer; font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--maroon); font-size:1.3rem; line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin:10px 0 0; color:var(--ink-soft); font-size:.92rem; max-width:70ch;}
.productgrid.cols3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ .productgrid.cols3{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .productgrid.cols3{grid-template-columns:1fr;} }

/* hero containers: keep content aligned to the page grid inside flex heroes */
.about-hero .wrap, .contact-hero .wrap, .products-hero .wrap, .portfolio-hero .wrap{width:100%;}
.cat-head h2, .sectionhead h2{line-height:1.2;}
.spectable.glance{min-width:860px;}
.rangecard{grid-template-columns:200px 1fr;}
.rangecard .rimg.light{padding:0;}
.rangecard .rimg.light img{width:100%; height:100%; object-fit:cover; max-height:none;}
.rangecard .rimg img{max-height:210px;}
.sectionhead .moreink{display:inline-block; margin-top:10px; font-size:.88rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon);}
.rowhead{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px;}
.rowhead .sectionhead{margin-bottom:0;}
.rowhead .btn-secondary{padding:11px 20px; font-size:.86rem;}
.wrap.strip{padding-left:28px; padding-right:28px;}
@media(max-width:600px){ .wrap.strip{padding-left:20px; padding-right:20px;} }
.frcode{display:block; font-size:.68rem; color:var(--steel); font-weight:400; margin-top:1px;}
.spectable td a{color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon); font-weight:600;}
.spectable td.l{font-size:.8rem;}
.spectable.compact th, .spectable.compact td{padding:8px 9px;}
.spectable.compact thead th{white-space:normal; vertical-align:bottom; line-height:1.25;}
.spectable.compact td{white-space:nowrap;}

/* ===== product showcase cards + tabs ===== */
.product-card{background:#FDFCF9; border:1px solid var(--rule); box-shadow:0 26px 60px -36px rgba(27,23,18,.3); margin-bottom:30px;}
.showcase{display:grid; grid-template-columns:5fr 7fr; scroll-margin-top:130px;}
.sc-media{background:linear-gradient(160deg,#ece7dd,#d6cfc2); display:flex; align-items:center; justify-content:center; padding:24px; min-height:320px; border-right:1px solid var(--rule);}
.sc-media.dark{background:radial-gradient(ellipse at 50% 38%,#3d342c,#16110D 78%);}
.sc-media img{max-width:100%; max-height:330px; object-fit:contain; display:block;}
.sc-main{padding:34px 36px 30px; display:flex; flex-direction:column; gap:12px; justify-content:center;}
.sc-eyebrow{font-size:.76rem; color:var(--brass); letter-spacing:.04em;}
.sc-main h3{font-family:'Fraunces',serif; font-weight:600; font-size:2rem; margin:0; color:var(--ink); line-height:1.1;}
.sc-lede{margin:0 0 4px; color:var(--ink-soft); font-size:.98rem; max-width:54ch;}
.sc-facts{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:8px 0 6px;}
.sc-facts div{padding:14px 14px 14px 0; margin-right:14px; border-right:1px solid var(--rule);}
.sc-facts div:last-child{border-right:none; margin-right:0;}
.sc-facts b{display:block; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--maroon); font-weight:600; line-height:1.2;}
.sc-facts span{display:block; font-size:.73rem; color:var(--steel); line-height:1.35; margin-top:3px;}
.product-card .dlrow{margin-top:8px;}

.tabs{border-top:1px solid var(--rule); padding:0 36px 32px; scroll-margin-top:130px;}
.tablist{display:flex; gap:30px; border-bottom:1px solid var(--rule); overflow-x:auto; scrollbar-width:none; margin:0 0 24px;}
.tablist::-webkit-scrollbar{display:none;}
.tab{background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; padding:16px 2px 13px; font-family:inherit; font-size:.9rem; color:var(--steel); cursor:pointer; white-space:nowrap; letter-spacing:.01em;}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--maroon); border-bottom-color:var(--maroon); font-weight:600;}
.tab:focus-visible{outline:2px solid var(--brass-light); outline-offset:2px;}
.tabpanel{scroll-margin-top:130px;}
.tabpanel[hidden]{display:none;}
.tabs.js .tabpanel{animation:tabfade .3s ease;}
@keyframes tabfade{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.tabtitle{font-family:'Fraunces',serif; font-size:1.1rem; margin:26px 0 12px; color:var(--ink);}
.tabs.js .tabtitle{display:none;}
.tabs:not(.js) .tablist{display:none;}
.tabpanel p{margin:0 0 14px; color:var(--ink-soft); font-size:.95rem; max-width:70ch;}
.tabpanel h5{font-size:.74rem; color:var(--maroon); margin:20px 0 9px; letter-spacing:.04em; font-weight:600; text-transform:none;}
.ovgrid{display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start;}
.callout{border:1px solid var(--rule); background:var(--paper2); padding:18px 20px; display:flex; flex-direction:column; gap:6px; scroll-margin-top:130px;}
.callout b{font-family:'Fraunces',serif; font-size:1.05rem; color:var(--ink);}
.callout p{margin:0; font-size:.88rem;}
.callout a{font-size:.85rem; color:var(--maroon); text-decoration:none; border-bottom:1px solid var(--maroon); align-self:flex-start; margin-top:4px;}
.tabpanel .featlist{columns:2; column-gap:34px;}
.tabpanel .tablewrap{background:#fff;}
@media(max-width:900px){
  .showcase{grid-template-columns:1fr;}
  .sc-media{border-right:none; border-bottom:1px solid var(--rule); min-height:220px;}
  .sc-main{padding:26px 22px 24px;}
  .tabs{padding:0 22px 26px;}
  .ovgrid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .sc-facts{grid-template-columns:1fr 1fr;}
  .sc-facts div{border-right:none; margin-right:0; padding:12px 10px 12px 0; border-bottom:1px solid var(--rule);}
  .sc-facts div:nth-last-child(-n+2){border-bottom:none;}
  .tablist{gap:22px;}
  .tabpanel .featlist{columns:1;}
  .sc-main h3{font-size:1.65rem;}
}
.tabpanel p.tablenote{font-size:.76rem; color:var(--steel); margin:10px 0 0; max-width:none; line-height:1.5;}
.sc-media:not(.dark){padding:0;}
.sc-media:not(.dark) img{width:100%; height:100%; max-height:none; object-fit:cover;}
@media(max-width:600px){
  .product-card .dlrow a{flex:1 1 100%; text-align:center;}
  .sc-media:not(.dark){min-height:200px;}
}

/* =====================================================================
   MOBILE FIXES — paste at the VERY END of assets/css/style.css
   (must come last: several bugs were later rules overriding earlier
   media queries)
   ===================================================================== */

/* --- 0. Safe-area padding was on :root (pushes whole page). Move it. --- */
:root{padding-top:0; padding-bottom:0;}
body{padding-bottom:env(safe-area-inset-bottom,0px); overflow-x:clip;} /* clip, not hidden: keeps sticky working */

/* --- 1. HEADER: "Request a Quote" button was never hidden on mobile,
        so brand + button + burger were wider than the screen. --- */
@media(max-width:860px){
  .navlinks .cta{display:none;}      /* the menu already has .cta-mobile */
  .navlinks{gap:0;}
  .mobile-nav:not(.open){border-bottom:none;}
}
@media(max-width:600px){
  .brand .name{font-size:1.3rem;}
  .brand .tag{font-size:.6rem;}
}

/* --- 2. Sticky offsets: header height is measured by JS (see main.js
        snippet) instead of the hard-coded 65px. --- */
html{scroll-padding-top:calc(var(--hdr-h,72px) + 70px);}
.catnav{top:calc(var(--hdr-h,72px) - 1px);}
.category-block, .showcase, .tabs, .tabpanel, .callout{scroll-margin-top:calc(var(--hdr-h,72px) + 70px);}

/* --- 3. HOMEPAGE "range at a glance" cards: a later desktop rule
        (.rangecard{200px 1fr}) beat the mobile media query, leaving
        ~135px for the text on phones. --- */
@media(max-width:600px){
  .rangecard{grid-template-columns:1fr;}
  .rangecard .rimg{height:190px; min-height:0;}
  .rangecard .rimg.light img{height:100%;}
  .rangecard .rbody{padding:18px 18px 20px;}
}

/* --- 4. Services: smaller icon column --- */
@media(max-width:600px){
  .service{grid-template-columns:36px 1fr; gap:14px;}
  .service svg{width:36px; height:36px;}
}

/* --- 5. Partner logos: padding was eating the logo space --- */
@media(max-width:480px){
  .partnerwrap .partner{padding:22px 14px; min-width:50%;}
  .partnerwrap .partner:nth-child(odd){border-right:1px solid var(--rule);}
}

/* --- 6. About page --- */
@media(max-width:860px){ .whyphoto{aspect-ratio:4/3;} }
@media(max-width:700px){
  .statitem{padding:20px 16px;}
  .statitem:nth-child(2n){border-right:none;}
  .statitem:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .statitem .num{font-size:1.6rem;}
}

/* --- 7. PRODUCTS page --- */
@media(max-width:600px){
  /* hero badges: tidy 2-col grid instead of ragged wrapping with stray borders */
  .specbadges{display:grid; grid-template-columns:1fr 1fr; max-width:none;}
  .specbadges .sb{margin:0; padding:12px 8px 12px 0; border-right:none; border-bottom:1px solid rgba(199,164,92,.2);}
  .specbadges .sb .v{font-size:1.1rem;}

  /* category pill bar */
  .catnav .wrap{padding:10px 20px;}

  /* showcase cards */
  .sc-media:not(.dark){aspect-ratio:16/10; min-height:0;}
  .sc-media.dark{min-height:200px; padding:16px;}
  .sc-main{padding:22px 18px 20px;}
  .tabs{padding:0 16px 22px;}
  .tab{padding:14px 2px 11px; font-size:.86rem;}

  /* charge boxes: stack */
  .chargebox{grid-template-columns:1fr;}
  .chargebox div{border-right:none; border-bottom:1px solid var(--rule);}
  .chargebox div:last-child{border-bottom:none;}

  /* tables: keep scroll, tighter cells, hint that they scroll */
  .spectable{font-size:.76rem;}
  .spectable th, .spectable td{padding:7px 9px;}
  .spectable.glance{min-width:760px;}
  .tablewrap{position:relative;}
  .productcard{padding:20px 18px;}
  .cat-head{margin-bottom:28px;}
  .cta-band .btn-primary{width:100%; text-align:center;}
  .faq summary{font-size:.97rem;}
}

/* --- 8. Floating WhatsApp button must not cover footer text --- */
@media(max-width:600px){
  footer{padding-bottom:84px;}
}
/* --- 9. Homepage range cards: separate the stacked cards on mobile --- */
@media(max-width:900px){
  .rangegrid{gap:24px; background:transparent; border:none;}
  .rangecard{border:1px solid var(--rule);}
  .rangecard .rbody{padding-bottom:24px;}
}