*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#C9A843;--gold-dim:#A88930;--gold-bg:rgba(201,168,67,0.1);--gold-border:rgba(201,168,67,0.25);
--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-2xl:40px;
--transition:0.25s ease;
}
[data-theme="light"]{
--bg:#F7F5F0;--bg2:#EDEAE2;--bg3:#E3DFD5;
--surface:#FFFFFF;--surface2:rgba(255,255,255,0.7);
--text:#0D0C0A;--text-mid:#5A5650;--text-muted:#9A9690;
--border:rgba(0,0,0,0.08);--border-mid:rgba(0,0,0,0.13);
--nav-bg:rgba(247,245,240,0.92);--nav-border:rgba(0,0,0,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.08);--shadow-lg:0 8px 48px rgba(0,0,0,0.12);
--card-bg:#FFFFFF;--tag-bg:#EDEAE2;--tag-text:#5A5650;
}
[data-theme="dark"]{
--bg:#0A0A0A;--bg2:#141414;--bg3:#1C1C1C;
--surface:#141414;--surface2:rgba(20,20,20,0.7);
--text:#EDE8DE;--text-mid:#9A9590;--text-muted:#5E5B56;
--border:rgba(255,255,255,0.07);--border-mid:rgba(255,255,255,0.12);
--nav-bg:rgba(10,10,10,0.92);--nav-border:rgba(255,255,255,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.4);--shadow-lg:0 8px 48px rgba(0,0,0,0.5);
--card-bg:#141414;--tag-bg:#1C1C1C;--tag-text:#9A9590;
}

html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background var(--transition),color var(--transition)}
img{border-radius:var(--r-lg);object-fit:cover;display:block}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
.nav-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1400px;z-index:200;pointer-events:none}
nav{background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:100px;padding:0 8px 0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);pointer-events:all;transition:background var(--transition),border-color var(--transition)}
.nav-logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0}
.nav-logo img{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{padding:8px 14px;border-radius:100px;font-size:14px;font-weight:400;color:var(--text-mid);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--bg2)}
/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);width:38px;height:38px}
.nav-hamburger span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:2px;transition:all 0.3s;margin:0 auto}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile drawer */
.mobile-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:190;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:80px 32px 40px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:clamp(28px,6vw,42px);font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--text);cursor:pointer;padding:12px 0;border-bottom:1px solid var(--border);width:100%;text-align:center;transition:color var(--transition)}
.mobile-nav a:hover,.mobile-nav a.active{color:var(--gold)}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav-cta{margin-top:24px;background:var(--gold);color:#0A0A0A;font-size:16px;font-weight:500;padding:15px 40px;border-radius:100px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;width:100%}

.nav-right{display:flex;align-items:center;gap:8px}
.theme-toggle{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--transition);color:var(--text-mid)}
.mobile-theme-btn{margin-top:20px;background:transparent;border:1px solid var(--border);color:var(--text-mid);font-size:14px;font-weight:400;padding:12px 24px;border-radius:100px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all var(--transition);display:flex;align-items:center;gap:8px;justify-content:center;width:100%}
.mobile-theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.nav-cta{background:var(--text);color:var(--bg);font-size:13px;font-weight:500;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity var(--transition);letter-spacing:0.01em}
.nav-cta:hover{opacity:0.8}

/* mosaic see-all only shows on mobile */
.mosaic-see-all{display:none}
/* footer-cols-row is transparent on desktop - children are direct grid items */
.footer-cols-row{display:contents}
/* JS-free fallback: show home page until initPage() runs */
.page#page-home{display:block !important}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── LAYOUT HELPERS ── */
.container{max-width:1400px;margin:0 auto;padding:0 40px}
.section{padding-top:100px;padding-bottom:100px}
.section-sm{padding:60px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--gold)}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:900;line-height:1.06;letter-spacing:-0.03em}
h1{font-size:clamp(52px,6vw,88px)}
h2{font-size:clamp(36px,4vw,60px)}
h3{font-size:clamp(22px,2.5vw,32px)}
em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.05em}
.lead{font-size:17px;color:var(--text-mid);line-height:1.75;font-weight:300;max-width:520px}
.label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:14px 26px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;transition:all var(--transition);letter-spacing:0.10em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;position:relative}
/* Primary CTA, solid gold with embedded black arrow chip */
.btn-gold{background:var(--gold);color:#0A0A0A;border-color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,0.10),inset 0 -2px 0 rgba(0,0,0,0.08);padding:14px 50px 14px 26px}
.btn-gold::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#0A0A0A;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:transform var(--transition),background var(--transition)}
.btn-gold:hover{background:var(--gold-dim);border-color:var(--gold-dim);transform:translateY(-1px);box-shadow:0 8px 22px rgba(201,168,67,0.32),inset 0 -2px 0 rgba(0,0,0,0.10)}
.btn-gold:hover::after{transform:translateY(-50%) translateX(3px)}
/* Dark CTA, used where button sits on gold/light surfaces (e.g. cta-card) */
.btn-dark{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,0.18);padding:14px 50px 14px 26px}
.btn-dark::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:transform var(--transition)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}
.btn-dark:hover::after{transform:translateY(-50%) translateX(3px)}
/* Secondary: transparent ghost outline so it sits IN the page, not on top of it */
.btn-outline{background:transparent;border-color:var(--text);color:var(--text);box-shadow:none;font-size:11px;letter-spacing:0.12em}
.btn-outline:hover{background:var(--text);border-color:var(--text);color:var(--bg);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-lg{font-size:13px;padding:17px 60px 17px 36px}
.btn-lg.btn-outline,.btn-outline.btn-lg{padding:17px 36px}
.btn-lg::after{width:34px;height:34px;font-size:14px;right:8px}
.arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.15);font-size:13px;flex-shrink:0}
.btn-icon-row{display:flex;align-items:center;gap:10px}

/* ── HERO ── */
.hero{padding-top:100px;min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero-inner{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:calc(100svh - 100px)}
.hero-left{display:flex;flex-direction:column;justify-content:flex-end;padding:30px 40px 38px;background:var(--bg2);border-radius:var(--r-xl);position:relative;overflow:hidden}
.hero-img-wrap{border-radius:var(--r-xl);overflow:hidden;position:relative}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl)}
.hero-img-grid{display:grid;grid-template-rows:1fr 1fr;gap:4px;height:calc(100svh - 100px);min-height:0;overflow:hidden}
.hero-img-sub{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hero-img-sub .hero-img-wrap{height:100%}
.hero-img-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:0;min-width:0}
.hero-tag{margin-bottom:20px}
.hero-headline{color:var(--text);font-size:clamp(34px,min(3.9vw,6.2vh),58px);line-height:1.03;margin-bottom:14px}
.hero-sub{font-size:14.5px;color:var(--text-mid);line-height:1.55;font-weight:300;max-width:420px;margin-bottom:18px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-stats-bar{display:flex;gap:0;border-top:1px solid var(--border);margin-top:20px;padding-top:16px}
.h-stat{flex:1;text-align:center}
.h-stat:not(:last-child){border-right:1px solid var(--border)}
.h-stat-n{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;color:var(--text);line-height:1}
.h-stat-n small{font-family:'DM Sans';font-size:20px;color:var(--gold)}
.h-stat-l{font-size:11px;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px}

/* ── TICKER ── */
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--gold);margin:40px 0}
.ticker-track{display:inline-flex;animation:tick 22s linear infinite}
.ticker-item{font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#0A0A0A;padding:12px 28px}
.ticker-sep{color:rgba(0,0,0,0.3);padding:12px 0}

/* ── CREDENTIALS TRUST STRIP ── */
.cred-strip{background:var(--surface);border-bottom:1px solid var(--border);padding:36px 0}
.cred-strip-inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.cred-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
.cred-items{display:flex;justify-content:center;align-items:flex-start;gap:56px;flex-wrap:wrap;max-width:920px}
.cred-item{display:flex;align-items:flex-start;gap:12px;text-align:left;min-width:0}
.cred-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:7px;flex-shrink:0}
.cred-label{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text);letter-spacing:0.01em}
.cred-sub{font-size:12px;color:var(--text-muted);margin-top:2px;font-weight:300}
@media(max-width:768px){
  .cred-strip{padding:28px 0}
  .cred-items{flex-direction:column;align-items:flex-start;gap:18px;width:100%;max-width:360px}
  .cred-item{width:100%}
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── IMAGE CARDS ── */
.img-card{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:0;min-width:0}
.img-card img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl);transition:transform 0.6s ease}
.img-card:hover img{transform:scale(1.03)}
.img-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.05) 60%,transparent 100%);border-radius:var(--r-xl)}
.img-card-info{position:absolute;bottom:0;left:0;right:0;padding:28px;border-radius:var(--r-xl)}
.img-card-type{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.img-card-title{font-size:20px;font-weight:500;color:#fff;font-family:'DM Sans',sans-serif;line-height:1.2}
.img-card-meta{font-size:12px;color:rgba(255,255,255,0.55);margin-top:5px}

/* ── SERVICES ── */
.service-band{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border)}
.service-item{padding:44px 40px;display:grid;grid-template-columns:60px 1fr 200px;gap:24px;align-items:start;border-bottom:1px solid var(--border);transition:background var(--transition);cursor:default}
.service-item:last-child{border-bottom:none}
.service-item:hover{background:var(--bg2)}
.service-num{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);padding-top:3px}
.service-name{font-size:19px;font-weight:500;color:var(--text);margin-bottom:10px}
.service-desc{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300}
.service-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tag{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tag-text);background:var(--tag-bg);padding:5px 13px;border-radius:100px;border:1px solid var(--border)}
.service-cta{text-align:right;padding-top:4px}

/* ── SPLIT SECTION ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split.flip{direction:rtl}.split.flip>*{direction:ltr}
.split-img{border-radius:var(--r-xl);overflow:hidden;height:540px}
.split-img img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-xl)}
.split-text{padding:20px}
.split-text .lead{margin-top:20px}
.split-text .btn{margin-top:36px}

/* ── PROJECT GRID ── */
.proj-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:6px}
.proj-mosaic .pc{grid-column:span 4;grid-row:span 2}
.proj-mosaic .pc:first-child{grid-column:span 5;grid-row:span 3}
.proj-mosaic .pc:nth-child(4){grid-column:span 4;grid-row:span 2}
.proj-mosaic .pc:nth-child(5){grid-column:span 3;grid-row:span 2}
.proj-mosaic .pc:nth-child(6){grid-column:span 4;grid-row:span 2}
.proj-mosaic .pc:nth-child(7){grid-column:span 4;grid-row:span 2}

/* ── ALL PROJECT CARDS ── */
.proj-grid-full{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px}
.proj-card{background:var(--card-bg);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease}
.proj-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.proj-card-img{height:240px;position:relative;overflow:hidden}
.proj-card-img img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform 0.6s ease}
.proj-card:hover .proj-card-img img{transform:scale(1.05)}
.proj-card-body{padding:24px 24px 28px}
.proj-type{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.proj-title{font-size:19px;font-weight:500;color:var(--text);margin-bottom:8px;font-family:'DM Sans',sans-serif}
.proj-desc{font-size:13px;color:var(--text-mid);line-height:1.65;font-weight:300}
.proj-meta-row{display:flex;gap:20px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.proj-meta span{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:2px}
.proj-meta strong{font-size:13px;color:var(--text-mid);font-weight:400}

/* ── PROCESS ── */
.process-card{background:var(--surface);border-radius:var(--r-xl);padding:56px;border:1px solid var(--border)}
.process-split{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.process-steps{display:flex;flex-direction:column}
.ps{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border)}
.ps:last-child{border-bottom:none;padding-bottom:0}
.ps-num{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);min-width:28px;padding-top:1px}
.ps-name{font-size:15px;font-weight:500;color:var(--text);margin-bottom:5px}
.ps-desc{font-size:13px;color:var(--text-mid);line-height:1.65;font-weight:300}

/* ── TESTIMONIAL ── */
.testi{background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--border);padding:64px;position:relative;overflow:hidden}
.testi::before{content:'\201C';position:absolute;top:-30px;left:40px;font-family:'Cormorant Garamond',serif;font-size:240px;color:var(--gold);opacity:0.06;line-height:1;pointer-events:none}
.testi-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.6vw,34px);font-weight:300;line-height:1.45;color:var(--text);font-style:italic;max-width:840px}
.testi-author{margin-top:36px;display:flex;align-items:center;gap:14px}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#0A0A0A;flex-shrink:0}
.testi-name{font-size:15px;font-weight:500;color:var(--text)}
.testi-loc{font-size:13px;color:var(--text-muted)}
/* Carousel */
.testi-carousel{position:relative}
.testi-slide{display:none;animation:testiIn 0.5s ease}
.testi-slide.active{display:block}
@keyframes testiIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.testi-controls{display:flex;align-items:center;gap:12px;margin-top:32px}
.testi-dot{width:7px;height:7px;border-radius:50%;background:var(--border-mid);cursor:pointer;transition:all 0.25s;border:none;padding:0}
.testi-dot.on{background:var(--gold);transform:scale(1.25)}
.testi-arrows{display:flex;gap:8px;margin-left:auto}
.testi-arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border-mid);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-mid);transition:all 0.2s;font-family:'DM Sans',sans-serif}
.testi-arrow:hover{border-color:var(--gold);color:var(--gold)}
.google-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-left:auto;padding:6px 14px;border:1px solid var(--border);border-radius:100px}
.google-badge svg{width:14px;height:14px;flex-shrink:0}
.stars{margin-left:auto;display:flex;gap:2px}
.star{color:var(--gold);font-size:14px}

/* ── STATS BAR ── */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;background:var(--surface)}
.stats-bar-footer{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--surface);padding:14px 32px;display:flex;align-items:center;gap:24px}
.stats-bar-footer-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);font-weight:300}
.stats-bar-footer-item::before{content:'◆';font-size:7px;color:var(--gold);flex-shrink:0}
.stats-bar-divider{width:1px;height:14px;background:var(--border);flex-shrink:0}
.stat-item{padding:40px 32px;text-align:center}
.stat-item:not(:last-child){border-right:1px solid var(--border)}
.stat-n{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;line-height:1;color:var(--text)}
.stat-n sub{font-family:'DM Sans';font-size:24px;color:var(--gold);vertical-align:0}
.stat-l{font-size:11px;color:var(--text-muted);letter-spacing:0.07em;text-transform:uppercase;margin-top:6px}

/* ── HOME, SELECTED WORK MOSAIC ── */
.proj-heading-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.proj-heading-row h2{font-family:'Inter',sans-serif;font-size:clamp(36px,4.5vw,56px);font-weight:900;line-height:1.04;letter-spacing:-0.03em;color:var(--text)}
.proj-heading-row h2 em{font-style:italic;color:var(--gold)}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.proj-tile{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;cursor:pointer}
.proj-tile img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s cubic-bezier(0.2,0.7,0.2,1)}
.proj-tile:hover img{transform:scale(1.06)}
.proj-tile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.80) 0%,rgba(0,0,0,0.12) 55%,transparent 100%)}
.proj-tile-info{position:absolute;left:0;right:0;bottom:0;padding:26px;transition:transform 0.5s cubic-bezier(0.2,0.7,0.2,1)}
.proj-tile:hover .proj-tile-info{transform:translateY(-6px)}
.proj-tile-cat{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;font-weight:600}
.proj-tile-title{font-family:'Inter',sans-serif;font-size:clamp(21px,1.9vw,27px);font-weight:700;color:#fff;line-height:1.08;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
.proj-tile-arrow{display:inline-block;color:var(--gold);opacity:0;transform:translateX(-8px);transition:all 0.45s cubic-bezier(0.2,0.7,0.2,1)}
.proj-tile:hover .proj-tile-arrow{opacity:1;transform:translateX(0)}
@media(max-width:900px){.home-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.home-grid{grid-template-columns:1fr}}

/* ── TOOLS HUB CARDS ── */
.tool-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tool-hub-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}
.tool-hub-card:hover{border-color:var(--gold-border);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.tool-hub-card::after{content:'→';position:absolute;bottom:36px;right:36px;font-size:20px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:all var(--transition)}
.tool-hub-card:hover::after{opacity:1;transform:translateX(0)}
.thc-icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--gold-bg);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:24px}
.thc-title{font-size:20px;font-weight:500;color:var(--text);margin-bottom:8px}
.thc-desc{font-size:14px;color:var(--text-mid);line-height:1.65;font-weight:300}
.thc-badge{display:inline-block;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-border);padding:4px 12px;border-radius:100px;margin-top:16px}

/* ── TOOL PAGES ── */
.tool-page-hero{padding:140px 0 60px;border-bottom:1px solid var(--border)}
.tool-page-hero h1{font-size:clamp(44px,5vw,72px);max-width:760px}
.tool-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.tool-header{padding:36px 40px 32px;border-bottom:1px solid var(--border)}
.tool-body{padding:40px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.result-panel{background:var(--bg2);border-radius:var(--r-lg);border:1px solid var(--border);padding:32px;display:flex;flex-direction:column;gap:20px}
.result-main .label{margin-bottom:8px}
.result-value{font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:300;color:var(--gold);line-height:1}
.result-range{font-size:13px;color:var(--text-muted);margin-top:6px}
.breakdown{border-top:1px solid var(--border);padding-top:18px;margin-top:4px}
.bd-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-mid);padding:6px 0;border-bottom:1px solid var(--border)}
.bd-row:last-child{border-bottom:none;color:var(--text);font-weight:500}
.bd-row.gold span:last-child{color:var(--gold)}
.form-group{margin-bottom:22px}
.form-label{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:9px}
.fsel,.finp{width:100%;background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--r-md);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:12px 16px;outline:none;transition:border-color var(--transition);-webkit-appearance:none;appearance:none}
.fsel:focus,.finp:focus{border-color:var(--gold)}
.fsel option{background:var(--bg2);color:var(--text)}
.range-wrap{margin-bottom:22px}
.range-head{display:flex;justify-content:space-between;margin-bottom:9px}
.range-head .form-label{margin-bottom:0}
.range-val{font-size:15px;font-weight:500;color:var(--gold)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--border-mid);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--gold);border-radius:50%;cursor:pointer;transition:transform 0.15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.range-labels{display:flex;justify-content:space-between;margin-top:7px}
.range-labels span{font-size:11px;color:var(--text-muted)}

/* ── PERMIT QUIZ ── */
.quiz-progress{height:3px;background:var(--border-mid);border-radius:2px;margin-bottom:28px;overflow:hidden}
.quiz-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 0.4s ease}
.quiz-step{display:none}
.quiz-step.active{display:block}
.quiz-q{font-size:20px;font-weight:400;color:var(--text);margin-bottom:6px;line-height:1.4}
.quiz-hint{font-size:13px;color:var(--text-muted);margin-bottom:24px;font-weight:300}
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.qopt{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-md);padding:15px 18px;cursor:pointer;font-size:14px;color:var(--text-mid);transition:all var(--transition);text-align:left;font-family:'DM Sans',sans-serif;width:100%}
.qopt:hover{border-color:var(--gold-border);color:var(--text)}
.qopt.sel{border-color:var(--gold);color:var(--text);background:var(--gold-bg)}
.q-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-mid);flex-shrink:0;transition:all var(--transition);display:flex;align-items:center;justify-content:center}
.qopt.sel .q-radio{border-color:var(--gold);background:var(--gold)}
.qopt.sel .q-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#0A0A0A}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.quiz-step-label{font-size:12px;color:var(--text-muted)}
.permit-result{background:var(--bg2);border-radius:var(--r-lg);border:1px solid var(--border);padding:28px;margin-top:20px;display:none}
.permit-result.show{display:block}
.pr-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.pr-title{font-size:19px;font-weight:500;color:var(--text);margin-bottom:8px}
.pr-body{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300}

/* ── GARDEN PICKER ── */
.size-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.size-opt{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:all var(--transition);text-align:center}
.size-opt:hover{border-color:var(--gold-border)}
.size-opt.sel{border-color:var(--gold);background:var(--gold-bg)}
.size-opt-label{font-size:13px;font-weight:500;color:var(--text);display:block}
.size-opt-price{font-size:11px;color:var(--text-muted);margin-top:3px}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.chk{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:all var(--transition)}
.chk:hover{border-color:var(--gold-border)}
.chk.on{border-color:var(--gold);background:var(--gold-bg)}
.chk-box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-mid);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.chk.on .chk-box{background:var(--gold);border-color:var(--gold)}
.chk.on .chk-box::after{content:'✓';font-size:10px;color:#0A0A0A;line-height:1}
.chk-label{font-size:13px;color:var(--text-mid);flex:1}
.chk-price{font-size:11px;color:var(--text-muted)}

/* ── EMAIL CAPTURE ── */
.email-cap{background:var(--gold);border-radius:var(--r-xl);padding:60px;margin-top:0}
.email-cap h2{font-family:'Inter',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:900;color:#0A0A0A;margin-bottom:12px;letter-spacing:-0.03em}
.email-cap p{font-size:16px;color:rgba(10,10,10,0.65);font-weight:300;max-width:480px;margin-bottom:28px}
.email-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin-bottom:10px}
.email-inp{background:rgba(255,255,255,0.9);border:none;border-radius:100px;padding:15px 24px;font-size:15px;font-family:'DM Sans',sans-serif;color:#0A0A0A;outline:none;width:100%}
.email-inp::placeholder{color:rgba(10,10,10,0.4)}
.email-submit{background:#0A0A0A;color:#fff;border:none;border-radius:100px;padding:15px 28px;font-size:14px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:opacity var(--transition);width:100%;margin-top:4px;max-width:640px}
.email-submit:hover{opacity:0.82}
.email-submit:disabled{opacity:0.5;cursor:not-allowed}
.project-summary{background:rgba(255,255,255,0.2);border-radius:var(--r-md);padding:18px 22px;margin-bottom:20px;max-width:640px}
.ps-title{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(10,10,10,0.5);margin-bottom:10px}
.ps-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.ps-row{font-size:13px;color:rgba(10,10,10,0.7);display:flex;gap:6px}
.ps-row strong{color:#0A0A0A;font-weight:500}
.email-success{background:rgba(255,255,255,0.25);border-radius:var(--r-lg);padding:28px 32px;max-width:640px;display:none}
.email-success.show{display:block}
.email-success h3{font-family:'Inter',sans-serif;font-size:26px;font-weight:800;color:#0A0A0A;margin-bottom:8px;letter-spacing:-0.02em}
.email-success p{font-size:14px;color:rgba(10,10,10,0.65);font-weight:300;line-height:1.6}
.email-note{font-size:12px;color:rgba(10,10,10,0.5);margin-top:14px}

/* ── CONTACT ── */
.contact-split{display:grid;grid-template-columns:1fr 1.1fr;min-height:calc(100vh - 100px);gap:0}
.contact-col{padding:80px 56px}
.contact-col-left{border-right:1px solid var(--border)}
.contact-info{margin-top:40px;display:flex;flex-direction:column;gap:28px}
.ci-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.ci-val{font-size:16px;color:var(--text)}
.ci-val a{color:var(--text);transition:color var(--transition)}
.ci-val a:hover{color:var(--gold)}
.ftextarea{width:100%;background:var(--bg2);border:1px solid var(--border-mid);border-radius:var(--r-md);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:14px 16px;outline:none;transition:border-color var(--transition);resize:vertical;min-height:120px}
.ftextarea:focus{border-color:var(--gold)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.svc-btn{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-md);padding:11px;text-align:center;cursor:pointer;font-size:12px;color:var(--text-mid);transition:all var(--transition);font-family:'DM Sans',sans-serif}
.svc-btn:hover,.svc-btn.on{border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}

/* ── PAGE HEADERS ── */
.page-hdr{padding:140px 0 56px;border-bottom:1px solid var(--border)}
.page-hdr h1{font-size:clamp(48px,5.5vw,80px);max-width:800px}
.page-sub{font-size:17px;color:var(--text-mid);max-width:560px;font-weight:300;margin-top:16px;line-height:1.7}
/* ABOUT HERO: text left, image right (matches homepage) */
.about-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:128px 0 72px;border-bottom:1px solid var(--border)}
.about-hero .page-hdr{padding:0;border-bottom:none;max-width:560px}
.about-hero .page-hdr h1{font-size:clamp(38px,4vw,62px)}
.about-hero .about-feature-img{margin-top:0;height:470px}
@media(max-width:860px){.about-hero{grid-template-columns:1fr;gap:30px;padding:100px 0 48px}.about-hero .about-feature-img{height:320px;order:2}.about-hero .page-hdr h1{font-size:clamp(40px,8vw,56px)}}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:8px;padding:28px 0;overflow-x:auto}
.fb{padding:9px 22px;border-radius:100px;font-size:13px;font-family:'DM Sans',sans-serif;border:1.5px solid var(--border);background:transparent;color:var(--text-mid);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.fb.on,.fb:hover{background:var(--text);border-color:var(--text);color:var(--bg)}

/* ── ABOUT ── */
.about-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.about-hero-wide{grid-column:span 2}

/* Single feature image, replaces 3-image mosaic */
.about-feature-img{width:100%;height:560px;border-radius:var(--r-xl);overflow:hidden;margin-top:48px}
.about-feature-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Article feature image, single hero image between article-hero text and article-body */
.article-feature-img{width:100%;height:520px;border-radius:var(--r-xl);overflow:hidden;margin:48px 0 0}
.article-feature-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Story 2-col: prose left, editorial pull quote right */
/* Story section: single centered column (was 2-col with pull-quote) */
.about-story{max-width:1240px;margin:0 auto;padding-bottom:80px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:start}
.about-story-text{max-width:780px}
.about-story-text h2{font-family:'Inter',sans-serif;font-size:clamp(36px,4.5vw,56px);font-weight:900;line-height:1.04;letter-spacing:-0.03em;color:var(--text);margin-top:18px}
.about-story-text h2 em{font-style:italic;color:var(--gold)}
.about-portrait img{width:100%;height:auto;display:block}
.about-portrait-cap{margin-top:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--text);display:flex;flex-direction:column;gap:2px;letter-spacing:0.01em}
.about-portrait-cap span{font-weight:400;font-size:13px;color:var(--text-mid)}
@media(max-width:860px){.about-story{grid-template-columns:1fr;gap:30px}.about-portrait{order:-1;max-width:300px}}

/* Values: numbered horizontal list (NOT cards) */
.about-values{max-width:1240px;margin:80px auto 0}
.values-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.value-item{padding:0 40px;border-left:1px solid var(--border)}
.value-item:first-child{border-left:none;padding-left:0}
.value-item:last-child{padding-right:0}
.value-num{font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:28px;font-style:italic}
.value-name{font-size:18px;font-weight:500;color:var(--text);margin-bottom:12px;letter-spacing:0.01em}
.value-desc{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300}

/* Team cards: already in HTML, keep card styling */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.team-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px}
.t-avatar{width:48px;height:48px;border-radius:var(--r-md);background:var(--gold-bg);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:24px}
.t-name{font-size:18px;font-weight:500;color:var(--text);margin-bottom:3px}
.t-role{font-size:11px;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase}
.t-bio{font-size:14px;color:var(--text-mid);line-height:1.7;margin-top:16px;font-weight:300}

/* ── FOOTER ── */
footer{background:var(--surface);border-top:1px solid var(--border);margin-top:80px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:64px 0 48px}
.footer-brand p{font-size:14px;color:var(--text-muted);line-height:1.7;max-width:260px;font-weight:300;margin-top:16px}
.footer-col h4{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.footer-col a{display:block;font-size:14px;color:var(--text-mid);margin-bottom:10px;cursor:pointer;transition:color var(--transition);font-weight:300}
.footer-col a:hover{color:var(--text)}
.footer-social{display:flex;gap:14px;margin-top:18px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;color:var(--text-mid);margin-bottom:0;transition:all var(--transition)}
.footer-social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-1px)}
.footer-social svg{width:15px;height:15px;display:block}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid var(--border)}
.footer-copy{font-size:12px;color:var(--text-muted)}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;right:28px;background:var(--surface);border:1px solid var(--gold);border-radius:var(--r-lg);padding:16px 24px;font-size:14px;color:var(--text);z-index:300;transform:translateY(80px);opacity:0;transition:all 0.4s;max-width:320px;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateY(0);opacity:1}

/* ── BREADCRUMB ── */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:13px;color:var(--text-muted)}
.breadcrumb a{cursor:pointer;transition:color var(--transition)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb span{color:var(--text-muted)}

/* ── MISC ── */
.gold-text{color:var(--gold)}
.centered{text-align:center}
.centered .lead,.centered h2{margin-left:auto;margin-right:auto}
.full-cta{background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--border);padding:80px;text-align:center;margin-top:80px}
.full-cta h2{max-width:600px;margin:0 auto 20px}
.full-cta .lead{margin:0 auto 40px}

/* Unsplash image fallback backgrounds */
.ub-1{background:linear-gradient(145deg,#1e1a14,#2d2518)}
.ub-2{background:linear-gradient(135deg,#12161a,#1a2028)}
.ub-3{background:linear-gradient(135deg,#1a1210,#28190f)}
.ub-4{background:linear-gradient(135deg,#0f1a12,#162414)}
.ub-5{background:linear-gradient(135deg,#181214,#241820)}
.ub-6{background:linear-gradient(145deg,#1c1814,#2c2015)}

/* ── PROJECT DETAIL PAGES ── */
.proj-detail-hero{padding-top:100px;position:relative}
.proj-hero-img{width:100%;height:68vh;min-height:480px;max-height:720px;position:relative;overflow:hidden;border-radius:0}
.proj-hero-img img{width:100%;height:100%;object-fit:cover;border-radius:0}
.proj-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.1) 50%,transparent 100%)}
.proj-hero-text{position:absolute;bottom:0;left:0;right:0;padding:48px 56px;z-index:2}
.proj-hero-type{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.proj-hero-type::before{content:'';width:20px;height:1px;background:var(--gold)}
.proj-hero-title{font-family:'Inter',sans-serif;font-size:clamp(44px,6vw,80px);font-weight:900;color:#fff;line-height:1.04;letter-spacing:-0.03em}
.proj-hero-title em{font-style:italic;color:var(--gold)}
.proj-breadcrumb{position:absolute;top:20px;left:56px;z-index:3;display:flex;align-items:center;gap:8px;font-size:13px}
.proj-breadcrumb a{color:rgba(255,255,255,0.65);cursor:pointer;transition:color 0.2s}
.proj-breadcrumb a:hover{color:#fff}
.proj-breadcrumb span{color:rgba(255,255,255,0.35)}

/* Snapshot bar */
.proj-snapshot{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);margin:32px 0 0}
.snap-item{padding:28px 32px}
.snap-item:not(:last-child){border-right:1px solid var(--border)}
.snap-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.snap-label::before{content:'';width:14px;height:1px;background:var(--gold);flex-shrink:0}
.snap-value{font-size:18px;font-weight:500;color:var(--text);line-height:1.2}
.snap-sub{font-size:12px;color:var(--text-muted);margin-top:3px}

/* ── PROJECT INTRO: text-left + snapshot-right on desktop ── */
.proj-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:start;margin-top:56px}
.proj-intro-text p{font-size:16px;color:var(--text-mid);line-height:1.8;font-weight:300;margin-bottom:18px}
.proj-intro-text p:last-of-type{margin-bottom:0}
.proj-intro-snapshot{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);margin:0}
.proj-intro-snapshot .snap-item{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.proj-intro-snapshot .snap-item:nth-child(2n){border-right:none}
.proj-intro-snapshot .snap-item:nth-last-child(-n+2){border-bottom:none}

/* ── PROJECT SPECS: combined Features + Secondary card ── */
.proj-specs{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);padding:48px;margin:0 0 80px}
.proj-specs-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.proj-specs-title{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}

/* Body layout */
.proj-body{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:56px 0;align-items:start}
.proj-story{}
.proj-story h2{font-family:'Inter',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:900;color:var(--text);line-height:1.15;margin-bottom:24px;letter-spacing:-0.025em}
.proj-story h2 em{font-style:italic;color:var(--gold)}
.proj-story p{font-size:16px;color:var(--text-mid);line-height:1.8;font-weight:300;margin-bottom:18px}
.proj-story p:last-of-type{margin-bottom:0}

/* Sidebar */
.proj-sidebar{}
.proj-sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;margin-bottom:16px}
.proj-feature-list{display:flex;flex-direction:column;gap:0}
.proj-feature{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-mid);font-weight:300}
.proj-feature:last-child{border-bottom:none;padding-bottom:0}
.proj-feature::before{content:'◆';font-size:8px;color:var(--gold);flex-shrink:0;margin-top:1px}
.proj-sidebar-title{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}

/* ── MEDIA CAROUSEL (replaces old gallery) ── */
.proj-gallery{margin:0 0 56px}

/* Tab bar */
.media-tabs{display:flex;gap:0;margin-bottom:0;border:1px solid var(--border);border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:var(--surface)}
.media-tab{padding:14px 24px;font-size:12px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;border:none;background:transparent;font-family:'DM Sans',sans-serif;transition:all var(--transition);display:flex;align-items:center;gap:8px;border-right:1px solid var(--border)}
.media-tab:last-child{border-right:none}
.media-tab:hover{color:var(--text);background:var(--bg2)}
.media-tab.active{color:var(--text);background:var(--bg);border-bottom:2px solid var(--gold);margin-bottom:-1px}
.media-tab-icon{font-size:13px;opacity:0.7}

/* Panel wrapper */
.media-panel{border:1px solid var(--border);border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);overflow:hidden;background:var(--bg2)}
.media-pane{display:none}
.media-pane.active{display:block}

/* Photo carousel */
.photo-carousel{position:relative;overflow:hidden;background:var(--bg2)}
.photo-track{display:flex;transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94)}
.photo-slide{min-width:100%;position:relative}
.photo-slide img{width:100%;height:clamp(380px,58vh,640px);object-fit:contain;display:block;border-radius:0}
.photo-thumbs{display:flex;gap:6px;padding:10px;background:var(--bg2);overflow-x:auto}
.photo-thumb{width:80px;height:56px;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--transition);flex-shrink:0}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb.active{border-color:var(--gold)}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);z-index:5;font-family:'DM Sans',sans-serif}
.carousel-arrow:hover{background:rgba(0,0,0,0.7)}
.carousel-arrow.prev{left:14px}
.carousel-arrow.next{right:14px}
.photo-counter{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);color:#fff;font-size:12px;padding:5px 12px;border-radius:100px;z-index:5}

/* Before / After slider */
.ba-wrap{position:relative;overflow:hidden;user-select:none;cursor:ew-resize;height:520px;background:#000}
.ba-before{position:absolute;inset:0}
.ba-before img{width:100%;height:520px;object-fit:cover;display:block}
.ba-after{position:absolute;top:0;left:0;bottom:0;overflow:hidden}
.ba-after img{width:var(--ba-wrap-width,100%);height:520px;object-fit:cover;display:block;max-width:none}
.ba-divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);cursor:ew-resize;z-index:10}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 16px rgba(0,0,0,0.3);cursor:ew-resize;font-size:13px;color:#0A0A0A;font-weight:600;gap:2px;flex-shrink:0}
.ba-labels{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:space-between;padding:0 20px;pointer-events:none;z-index:6}
.ba-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);padding:5px 14px;border-radius:100px}
.ba-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);color:#fff;font-size:12px;padding:8px 18px;border-radius:100px;pointer-events:none;transition:opacity 0.4s;z-index:12}
.ba-hint.hide{opacity:0}

/* Video pane */
.video-pane-inner{position:relative;background:#000}
.video-embed{width:100%;aspect-ratio:16/9;display:block;border:none}
.video-placeholder{height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg2);color:var(--text-muted)}
.video-placeholder-icon{font-size:48px;opacity:0.3}
.video-placeholder-text{font-size:14px;color:var(--text-muted);font-weight:300}
.video-placeholder-sub{font-size:12px;color:var(--text-muted);opacity:0.6}

/* Gallery polish, section spacing and reveal-on-hover for arrows */
.proj-gallery{margin:64px auto 80px;max-width:1040px}
.proj-gallery .carousel-arrow{opacity:0.35;transition:opacity 0.2s,background 0.2s,transform 0.2s}
.proj-gallery .photo-carousel:hover .carousel-arrow{opacity:1}
.ba-wrap *{user-select:none}
.ba-handle{cursor:ew-resize;letter-spacing:-1px;font-family:'DM Sans',sans-serif}
.photo-thumbs::-webkit-scrollbar{height:6px}
.photo-thumbs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.photo-thumbs::-webkit-scrollbar-track{background:transparent}

/* Tablet/mobile gallery: shorter image, smaller thumbs */
@media (max-width:768px){
  .photo-slide img{height:340px}
  .ba-wrap{height:340px}
  .ba-before img,.ba-after img{height:340px}
  .video-placeholder{height:340px}
  .photo-thumb{width:64px;height:44px}
  .carousel-arrow{width:34px;height:34px;font-size:14px}
  .carousel-arrow.prev{left:10px}
  .carousel-arrow.next{right:10px}
  .ba-handle{width:38px;height:38px;font-size:11px}
  .media-tab{padding:11px 16px;font-size:11px}
  .proj-gallery{margin:32px 0 56px}
}
@media (max-width:480px){
  .photo-slide img{height:260px}
  .ba-wrap{height:260px}
  .ba-before img,.ba-after img{height:260px}
  .photo-thumb{width:56px;height:38px}
  .ba-label{font-size:10px;padding:4px 10px}
}

/* Process highlight strip */
.proj-process-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 48px;margin-bottom:56px}
.pstrip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pstrip-item{display:flex;flex-direction:column;gap:6px}
.pstrip-item:not(:last-child){border-right:1px solid var(--border);padding-right:24px}
.pstrip-num{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--gold);line-height:1}
.pstrip-label{font-size:13px;font-weight:500;color:var(--text)}
.pstrip-desc{font-size:12px;color:var(--text-muted);line-height:1.55;font-weight:300}

/* Project detail CTA */
.proj-cta{background:var(--gold);border-radius:var(--r-2xl);padding:72px 64px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;margin-bottom:80px}
.proj-cta h2{font-family:'Inter',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:900;color:#0A0A0A;line-height:1.1;letter-spacing:-0.03em}
.proj-cta h2 em{font-style:italic}
.proj-cta p{font-size:16px;color:rgba(10,10,10,0.6);font-weight:300;margin-top:12px;max-width:480px}
.proj-cta-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.proj-cta .btn-dark{background:#0A0A0A;color:#fff;white-space:nowrap;padding:15px 32px}
.proj-cta .btn-ghost-dark{color:rgba(10,10,10,0.55);font-size:13px;cursor:pointer;text-align:right;transition:color 0.2s;font-family:'DM Sans',sans-serif;background:none;border:none;padding:4px 0}
.proj-cta .btn-ghost-dark:hover{color:#0A0A0A}

/* Next/prev project nav */
.proj-nav-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:80px}
.proj-nav-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 32px;cursor:pointer;transition:all 0.25s;display:flex;flex-direction:column;gap:6px}
.proj-nav-card:hover{border-color:var(--gold-border);transform:translateY(-3px);box-shadow:var(--shadow)}
.proj-nav-dir{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)}
.proj-nav-title{font-size:17px;font-weight:500;color:var(--text)}
.proj-nav-type{font-size:12px;color:var(--text-muted)}
.proj-nav-card.next{text-align:right}

/* Tag pill on image */
.img-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
[data-theme="dark"] .proj-nav-card{background:var(--surface)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#C9A843;--gold-dim:#A88930;--gold-bg:rgba(201,168,67,0.1);--gold-border:rgba(201,168,67,0.25);
--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-2xl:40px;
--transition:0.25s ease;
}
[data-theme="light"]{
--bg:#F7F5F0;--bg2:#EDEAE2;--bg3:#E3DFD5;
--surface:#FFFFFF;
--text:#0D0C0A;--text-mid:#5A5650;--text-muted:#9A9690;
--border:rgba(0,0,0,0.08);--border-mid:rgba(0,0,0,0.13);
--nav-bg:rgba(247,245,240,0.92);--nav-border:rgba(0,0,0,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.08);--shadow-lg:0 8px 48px rgba(0,0,0,0.12);
--card-bg:#FFFFFF;--tag-bg:#EDEAE2;--tag-text:#5A5650;
}
[data-theme="dark"]{
--bg:#0A0A0A;--bg2:#141414;--bg3:#1C1C1C;
--surface:#141414;
--text:#EDE8DE;--text-mid:#9A9590;--text-muted:#5E5B56;
--border:rgba(255,255,255,0.07);--border-mid:rgba(255,255,255,0.12);
--nav-bg:rgba(10,10,10,0.92);--nav-border:rgba(255,255,255,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.4);
--card-bg:#141414;--tag-bg:#1C1C1C;--tag-text:#9A9590;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── FLOATING NAV ── */
.nav-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1200px;z-index:200}
nav{background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:100px;padding:0 8px 0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:9px;cursor:pointer;text-decoration:none}
.logo-circle{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:16px;color:#0A0A0A}
.logo-type{font-size:14px;font-weight:500;color:var(--text)}
.logo-type span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:8px}
.theme-btn{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;font-size:14px;color:var(--text-mid);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.nav-cta{background:var(--text);color:var(--bg);font-size:13px;font-weight:500;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}

/* ── PAGE ROUTING ── */

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── ARTICLE LAYOUT ── */
.article-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.article-hero{padding:120px 0 60px;border-bottom:1px solid var(--border)}
.article-eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.article-eyebrow::before{content:'';width:20px;height:1px;background:var(--gold)}
.article-title{font-family:'Inter',sans-serif;font-size:clamp(40px,5.5vw,76px);font-weight:900;line-height:1.03;letter-spacing:-0.03em;color:var(--text);max-width:880px}
.article-title em{font-style:italic;color:var(--gold)}
.article-dek{font-size:18px;color:var(--text-mid);max-width:620px;font-weight:300;line-height:1.7;margin-top:24px}
.article-meta-bar{display:flex;align-items:center;gap:28px;margin-top:36px;padding-top:32px;border-top:1px solid var(--border)}
.article-meta-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.article-meta-item strong{color:var(--text-mid);font-weight:500}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border-mid)}

/* ── BODY GRID ── */
.article-body{display:grid;grid-template-columns:1fr 300px;gap:64px;padding:64px 0 100px;align-items:start}
.article-content{}
.article-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}

/* ── CONTENT TYPOGRAPHY ── */
.article-content h2{font-family:'Inter',sans-serif;font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.15;color:var(--text);margin:56px 0 20px;letter-spacing:-0.025em}
.article-content h2 em{font-style:italic;color:var(--gold)}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:18px;font-weight:500;color:var(--text);margin:32px 0 12px;letter-spacing:0.01em}
.article-content p{font-size:16px;color:var(--text-mid);line-height:1.82;font-weight:300;margin-bottom:20px}
.article-content p strong{color:var(--text);font-weight:500}
.article-content p:last-child{margin-bottom:0}
.article-content ul,.article-content ol{padding-left:0;list-style:none;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}
.article-content li{font-size:15px;color:var(--text-mid);line-height:1.7;font-weight:300;display:flex;align-items:baseline;gap:12px}
.article-content li::before{content:'◆';font-size:7px;color:var(--gold);flex-shrink:0;margin-top:2px}
.article-content ol{counter-reset:ol-counter}
.article-content ol li{counter-increment:ol-counter}
.article-content ol li::before{content:counter(ol-counter) '.';font-size:13px;color:var(--gold);font-weight:500;min-width:20px;flex-shrink:0}

/* ── CALLOUT BOXES ── */
.callout{border-radius:var(--r-xl);padding:32px 36px;margin:36px 0}
.callout-gold{background:var(--gold-bg);border:1px solid var(--gold-border)}
.callout-surface{background:var(--surface);border:1px solid var(--border)}
.callout-dark{background:var(--text);border-radius:var(--r-xl);padding:40px;margin:36px 0}
.callout-dark h3{color:var(--bg);font-size:20px;font-weight:500;margin-bottom:10px}
.callout-dark p{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.7;font-weight:300;margin-bottom:0}
.callout-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.callout h3{font-size:17px;font-weight:500;color:var(--text);margin-bottom:10px}
.callout p{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300;margin-bottom:0}

/* ── COST TABLE ── */
.cost-table{width:100%;border-collapse:collapse;border-radius:var(--r-xl);overflow:hidden;margin:32px 0;font-size:14px}
.cost-table thead tr{background:var(--text);color:var(--bg)}
.cost-table thead th{padding:14px 20px;text-align:left;font-weight:500;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.cost-table tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition)}
.cost-table tbody tr:last-child{border-bottom:none}
.cost-table tbody tr:hover{background:var(--bg2)}
.cost-table tbody td{padding:16px 20px;color:var(--text-mid);font-weight:300;line-height:1.5}
.cost-table tbody td:first-child{color:var(--text);font-weight:500}
.cost-table tbody td .gold{color:var(--gold);font-weight:500}
.cost-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin:32px 0}
.cost-table-wrap .cost-table{margin:0}
.cost-table-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:18px 20px 14px;border-bottom:1px solid var(--border)}

/* ── PULL QUOTE ── */
.pull-quote{border-left:3px solid var(--gold);padding:20px 28px;margin:36px 0;background:var(--surface);border-radius:0 var(--r-lg) var(--r-lg) 0}
.pull-quote p{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,28px);font-weight:300;font-style:italic;color:var(--text);line-height:1.4;margin-bottom:0}

/* ── SECTION DIVIDER ── */
.article-divider{height:1px;background:var(--border);margin:48px 0}

/* ── COST TIERS ── */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.tier-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.tier-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.tier-name{font-size:16px;font-weight:500;color:var(--text);margin-bottom:6px}
.tier-range{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:10px}
.tier-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:300}

/* ── WARNING BOX ── */
.warning{background:rgba(229,145,58,0.08);border:1px solid rgba(229,145,58,0.25);border-radius:var(--r-lg);padding:20px 24px;margin:28px 0;display:flex;gap:14px;align-items:flex-start}
.warning-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.warning-text{font-size:14px;color:var(--text-mid);line-height:1.65;font-weight:300}
.warning-text strong{color:var(--text);font-weight:500}

/* ── CHECKLIST ── */
.checklist{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;margin:28px 0}
.checklist-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.checklist-title::before{content:'';display:inline-block;width:20px;height:2px;background:var(--gold)}
.check-item{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-mid);font-weight:300;line-height:1.55}
.check-item:last-child{border-bottom:none;padding-bottom:0}
.check-box-ui{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--border-mid);flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.check-box-ui:hover{border-color:var(--gold)}
.check-box-ui.checked{background:var(--gold);border-color:var(--gold);color:#0A0A0A;font-size:11px}
.check-item-text{}

/* ── SIDEBAR ── */
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}
.sidebar-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.sidebar-title{font-size:17px;font-weight:500;color:var(--text);margin-bottom:8px}
.sidebar-body{font-size:13px;color:var(--text-mid);line-height:1.7;font-weight:300;margin-bottom:16px}
.sidebar-links{display:flex;flex-direction:column;gap:10px}
.sidebar-link{font-size:13px;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);transition:color var(--transition)}
.sidebar-link:last-child{border-bottom:none;padding-bottom:0}
.sidebar-link:hover{color:var(--gold)}
.sidebar-link::after{content:'→';margin-left:auto;opacity:0.4}
.toc-item{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);cursor:pointer;transition:color var(--transition)}
.toc-item:last-child{border-bottom:none}
.toc-item:hover{color:var(--text)}
.toc-num{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);flex-shrink:0}
.cta-card{background:var(--gold);border-radius:var(--r-xl);padding:28px}
.cta-card h3{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;color:#0A0A0A;margin-bottom:8px;letter-spacing:-0.02em}
.cta-card p{font-size:13px;color:rgba(10,10,10,0.65);font-weight:300;line-height:1.6;margin-bottom:16px}
.cta-card button{background:#0A0A0A;color:#fff;border:none;border-radius:100px;padding:14px 50px 14px 24px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;font-family:'DM Sans',sans-serif;cursor:pointer;width:100%;transition:all var(--transition);position:relative;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.cta-card button::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:transform var(--transition)}
.cta-card button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}
.cta-card button:hover::after{transform:translateY(-50%) translateX(3px)}

/* ── HUB INDEX ── */
.hub{padding:120px 0 80px}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column}
.hub-card:hover{border-color:var(--gold-border);transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-num{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;color:var(--border-mid);line-height:1;margin-bottom:16px}
.hub-title{font-size:17px;font-weight:500;color:var(--text);margin-bottom:8px;line-height:1.3}
.hub-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:300;flex:1}
.hub-tag{display:inline-block;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-border);padding:4px 12px;border-radius:100px;margin-top:16px;align-self:flex-start}
.hub-arrow{margin-top:12px;font-size:18px;color:var(--gold);align-self:flex-end}

/* ── FOOTER ── */
.article-footer{background:var(--surface);border-top:1px solid var(--border);padding:40px 0}
/* (removed unused article-footer .footer-inner override) */
.footer-copy{font-size:12px;color:var(--text-muted)}
.footer-back{font-size:13px;color:var(--text-muted);cursor:pointer;transition:color var(--transition)}
.footer-back:hover{color:var(--text)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.article-body{grid-template-columns:1fr}.article-sidebar{position:static}.tier-grid{grid-template-columns:1fr 1fr}.hub-grid{grid-template-columns:1fr}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#C9A843;--gold-dim:#A88930;--gold-bg:rgba(201,168,67,0.1);--gold-border:rgba(201,168,67,0.25);
--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-2xl:40px;
--transition:0.25s ease;
}
[data-theme="light"]{
--bg:#F7F5F0;--bg2:#EDEAE2;--bg3:#E3DFD5;
--surface:#FFFFFF;
--text:#0D0C0A;--text-mid:#5A5650;--text-muted:#9A9690;
--border:rgba(0,0,0,0.08);--border-mid:rgba(0,0,0,0.13);
--nav-bg:rgba(247,245,240,0.92);--nav-border:rgba(0,0,0,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.08);--shadow-lg:0 8px 48px rgba(0,0,0,0.12);
--card-bg:#FFFFFF;--tag-bg:#EDEAE2;--tag-text:#5A5650;
}
[data-theme="dark"]{
--bg:#0A0A0A;--bg2:#141414;--bg3:#1C1C1C;
--surface:#141414;
--text:#EDE8DE;--text-mid:#9A9590;--text-muted:#5E5B56;
--border:rgba(255,255,255,0.07);--border-mid:rgba(255,255,255,0.12);
--nav-bg:rgba(10,10,10,0.92);--nav-border:rgba(255,255,255,0.1);
--shadow:0 2px 24px rgba(0,0,0,0.4);
--card-bg:#141414;--tag-bg:#1C1C1C;--tag-text:#9A9590;
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}

.nav-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1200px;z-index:200}
nav{background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:100px;padding:0 8px 0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:9px;cursor:pointer}
.logo-circle{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:16px;color:#0A0A0A}
.logo-type{font-size:14px;font-weight:500;color:var(--text)}
.logo-type span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:8px}
.theme-btn{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;font-size:14px;color:var(--text-mid);display:flex;align-items:center;justify-content:center}
.nav-cta{background:var(--text);color:var(--bg);font-size:13px;font-weight:500;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}


@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.article-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.article-hero{padding:120px 0 60px;border-bottom:1px solid var(--border)}
.article-eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.article-eyebrow::before{content:'';width:20px;height:1px;background:var(--gold)}
.article-title{font-family:'Inter',sans-serif;font-size:clamp(40px,5.5vw,76px);font-weight:900;line-height:1.03;letter-spacing:-0.03em;color:var(--text);max-width:880px}
.article-title em{font-style:italic;color:var(--gold)}
.article-dek{font-size:18px;color:var(--text-mid);max-width:620px;font-weight:300;line-height:1.7;margin-top:24px}
.article-meta-bar{display:flex;align-items:center;gap:28px;margin-top:36px;padding-top:32px;border-top:1px solid var(--border)}
.article-meta-item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:7px}
.article-meta-item strong{color:var(--text-mid);font-weight:500}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border-mid)}

.article-body{display:grid;grid-template-columns:1fr 300px;gap:64px;padding:64px 0 100px;align-items:start}
.article-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}

.article-content h2{font-family:'Inter',sans-serif;font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.15;color:var(--text);margin:56px 0 20px;letter-spacing:-0.025em}
.article-content h2 em{font-style:italic;color:var(--gold)}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:18px;font-weight:500;color:var(--text);margin:32px 0 12px}
.article-content p{font-size:16px;color:var(--text-mid);line-height:1.82;font-weight:300;margin-bottom:20px}
.article-content p strong{color:var(--text);font-weight:500}
.article-content p:last-child{margin-bottom:0}
.article-content ul,.article-content ol{padding-left:0;list-style:none;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}
.article-content li{font-size:15px;color:var(--text-mid);line-height:1.7;font-weight:300;display:flex;align-items:baseline;gap:12px}
.article-content li::before{content:'◆';font-size:7px;color:var(--gold);flex-shrink:0;margin-top:2px}
.article-content ol{counter-reset:ol-counter}
.article-content ol li{counter-increment:ol-counter}
.article-content ol li::before{content:counter(ol-counter) '.';font-size:13px;color:var(--gold);font-weight:500;min-width:20px;flex-shrink:0}

.callout{border-radius:var(--r-xl);padding:32px 36px;margin:36px 0}
.callout-gold{background:var(--gold-bg);border:1px solid var(--gold-border)}
.callout-surface{background:var(--surface);border:1px solid var(--border)}
.callout-dark{background:var(--text);border-radius:var(--r-xl);padding:40px;margin:36px 0}
.callout-dark h3{color:var(--bg);font-size:20px;font-weight:500;margin-bottom:10px}
.callout-dark p{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.75;font-weight:300;margin-bottom:0}
.callout-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.callout h3{font-size:17px;font-weight:500;color:var(--text);margin-bottom:10px}
.callout p{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300;margin-bottom:0}

.cost-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin:32px 0}
.cost-table-wrap .cost-table{margin:0}
.cost-table-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.cost-table{width:100%;border-collapse:collapse;font-size:14px}
.cost-table thead tr{background:var(--text);color:var(--bg)}
.cost-table thead th{padding:14px 20px;text-align:left;font-weight:500;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.cost-table tbody tr{border-bottom:1px solid var(--border)}
.cost-table tbody tr:last-child{border-bottom:none}
.cost-table tbody tr:hover{background:var(--bg2)}
.cost-table tbody td{padding:16px 20px;color:var(--text-mid);font-weight:300;line-height:1.5}
.cost-table tbody td:first-child{color:var(--text);font-weight:500}
.cost-table tbody td .gold{color:var(--gold);font-weight:500}

.pull-quote{border-left:3px solid var(--gold);padding:20px 28px;margin:36px 0;background:var(--surface);border-radius:0 var(--r-lg) var(--r-lg) 0}
.pull-quote p{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,28px);font-weight:300;font-style:italic;color:var(--text);line-height:1.4;margin-bottom:0}

.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.tier-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.tier-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.tier-name{font-size:16px;font-weight:500;color:var(--text);margin-bottom:6px}
.tier-range{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:10px}
.tier-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:300}

.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.compare-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}
.compare-card.featured{border-color:var(--gold-border);background:var(--gold-bg)}
.compare-type{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.compare-name{font-size:20px;font-weight:700;color:var(--text);margin-bottom:16px;font-family:'Inter',sans-serif;letter-spacing:-0.01em}
.compare-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.compare-row:last-child{border-bottom:none;padding-bottom:0}
.compare-row-label{color:var(--text-muted);font-weight:300}
.compare-row-val{color:var(--text);font-weight:500;text-align:right}
.compare-row-val.gold{color:var(--gold)}

.roi-bar-wrap{margin:28px 0;display:flex;flex-direction:column;gap:14px}
.roi-bar-item{}
.roi-bar-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}
.roi-bar-label{color:var(--text);font-weight:500}
.roi-bar-pct{color:var(--gold);font-weight:500}
.roi-bar-track{height:8px;background:var(--bg2);border-radius:100px;overflow:hidden}
.roi-bar-fill{height:100%;background:var(--gold);border-radius:100px}
.roi-bar-note{font-size:12px;color:var(--text-muted);margin-top:5px}

.highlight-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:36px;margin:32px 0}
.highlight-box h3{font-size:18px;font-weight:500;color:var(--text);margin-bottom:12px}
.highlight-box p{font-size:14px;color:var(--text-mid);line-height:1.75;font-weight:300;margin-bottom:12px}
.highlight-box p:last-child{margin-bottom:0}

.step-list{display:flex;flex-direction:column;gap:0;margin:24px 0}
.step-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.step-item:last-child{border-bottom:none;padding-bottom:0}
.step-num{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--gold);line-height:1;flex-shrink:0;min-width:36px}
.step-content{}
.step-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:6px}
.step-desc{font-size:14px;color:var(--text-mid);line-height:1.65;font-weight:300}

.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}
.sidebar-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.toc-item{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);cursor:pointer;transition:color var(--transition)}
.toc-item:last-child{border-bottom:none}
.toc-item:hover{color:var(--text)}
.toc-num{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);flex-shrink:0}
.cta-card{background:var(--gold);border-radius:var(--r-xl);padding:28px}
.cta-card h3{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;color:#0A0A0A;margin-bottom:8px;letter-spacing:-0.02em}
.cta-card p{font-size:13px;color:rgba(10,10,10,0.65);font-weight:300;line-height:1.6;margin-bottom:16px}
.cta-card button{background:#0A0A0A;color:#fff;border:none;border-radius:100px;padding:14px 50px 14px 24px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;font-family:'DM Sans',sans-serif;cursor:pointer;width:100%;transition:all var(--transition);position:relative;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.cta-card button::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:transform var(--transition)}
.cta-card button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}
.cta-card button:hover::after{transform:translateY(-50%) translateX(3px)}
.sidebar-links{display:flex;flex-direction:column;gap:0}
.sidebar-link{font-size:13px;color:var(--text-mid);cursor:pointer;padding:10px 0;border-bottom:1px solid var(--border);transition:color var(--transition);display:flex;justify-content:space-between}
.sidebar-link:last-child{border-bottom:none;padding-bottom:0}
.sidebar-link:hover{color:var(--gold)}
.sidebar-link::after{content:'→';opacity:0.4}

.hub{padding:120px 0 80px}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column}
.hub-card:hover{border-color:var(--gold-border);transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-num{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;color:var(--border-mid);line-height:1;margin-bottom:16px}
.hub-title{font-size:17px;font-weight:500;color:var(--text);margin-bottom:8px;line-height:1.3}
.hub-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:300;flex:1}
.hub-tag{display:inline-block;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-border);padding:4px 12px;border-radius:100px;margin-top:16px;align-self:flex-start}

.article-footer{background:var(--surface);border-top:1px solid var(--border);padding:40px 0;margin-top:0}
/* (removed unused article-footer .footer-inner override) */
.footer-copy{font-size:12px;color:var(--text-muted)}
.footer-back{font-size:13px;color:var(--text-muted);cursor:pointer}
.footer-back:hover{color:var(--text)}

@media(max-width:900px){.article-body{grid-template-columns:1fr}.article-sidebar{position:static}.tier-grid,.compare-grid{grid-template-columns:1fr}.hub-grid{grid-template-columns:1fr}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#C9A843;--gold-dim:#A88930;--gold-bg:rgba(201,168,67,0.1);--gold-border:rgba(201,168,67,0.25);--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-2xl:40px;--transition:0.25s ease}
[data-theme="light"]{--bg:#F7F5F0;--bg2:#EDEAE2;--bg3:#E3DFD5;--surface:#FFFFFF;--text:#0D0C0A;--text-mid:#5A5650;--text-muted:#9A9690;--border:rgba(0,0,0,0.08);--border-mid:rgba(0,0,0,0.13);--nav-bg:rgba(247,245,240,0.92);--nav-border:rgba(0,0,0,0.1);--shadow:0 2px 24px rgba(0,0,0,0.08);--shadow-lg:0 8px 48px rgba(0,0,0,0.12);--card-bg:#FFFFFF;--tag-bg:#EDEAE2;--tag-text:#5A5650}
[data-theme="dark"]{--bg:#0A0A0A;--bg2:#141414;--bg3:#1C1C1C;--surface:#141414;--text:#EDE8DE;--text-mid:#9A9590;--text-muted:#5E5B56;--border:rgba(255,255,255,0.07);--border-mid:rgba(255,255,255,0.12);--nav-bg:rgba(10,10,10,0.92);--nav-border:rgba(255,255,255,0.1);--shadow:0 2px 24px rgba(0,0,0,0.4);--card-bg:#141414;--tag-bg:#1C1C1C;--tag-text:#9A9590}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}

.nav-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1200px;z-index:200}
nav{background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:100px;padding:0 8px 0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:9px;cursor:pointer}
.logo-circle{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:16px;color:#0A0A0A}
.logo-type{font-size:14px;font-weight:500;color:var(--text)}
.logo-type span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:8px}
.theme-btn{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);cursor:pointer;font-size:14px;color:var(--text-mid);display:flex;align-items:center;justify-content:center}
.nav-cta{background:var(--text);color:var(--bg);font-size:13px;font-weight:500;padding:10px 22px;border-radius:100px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}


@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.article-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.article-hero{padding:120px 0 60px;border-bottom:1px solid var(--border)}
.article-eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.article-eyebrow::before{content:'';width:20px;height:1px;background:var(--gold)}
.article-title{font-family:'Inter',sans-serif;font-size:clamp(40px,5.5vw,76px);font-weight:900;line-height:1.03;letter-spacing:-0.03em;color:var(--text);max-width:880px}
.article-title em{font-style:italic;color:var(--gold)}
.article-dek{font-size:18px;color:var(--text-mid);max-width:620px;font-weight:300;line-height:1.7;margin-top:24px}
.article-meta-bar{display:flex;align-items:center;gap:28px;margin-top:36px;padding-top:32px;border-top:1px solid var(--border)}
.article-meta-item{font-size:12px;color:var(--text-muted)}
.article-meta-item strong{color:var(--text-mid);font-weight:500}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border-mid)}

.article-body{display:grid;grid-template-columns:1fr 300px;gap:64px;padding:64px 0 100px;align-items:start}
.article-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}

.article-content h2{font-family:'Inter',sans-serif;font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.15;color:var(--text);margin:56px 0 20px;letter-spacing:-0.025em}
.article-content h2 em{font-style:italic;color:var(--gold)}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:18px;font-weight:500;color:var(--text);margin:32px 0 12px}
.article-content p{font-size:16px;color:var(--text-mid);line-height:1.82;font-weight:300;margin-bottom:20px}
.article-content p strong{color:var(--text);font-weight:500}
.article-content p:last-child{margin-bottom:0}
.article-content ul,.article-content ol{padding-left:0;list-style:none;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}
.article-content li{font-size:15px;color:var(--text-mid);line-height:1.7;font-weight:300;display:flex;align-items:baseline;gap:12px}
.article-content li::before{content:'◆';font-size:7px;color:var(--gold);flex-shrink:0;margin-top:2px}
.article-content ol{counter-reset:ol-c}
.article-content ol li{counter-increment:ol-c}
.article-content ol li::before{content:counter(ol-c) '.';font-size:13px;color:var(--gold);font-weight:500;min-width:20px;flex-shrink:0}

.callout{border-radius:var(--r-xl);padding:32px 36px;margin:36px 0}
.callout-gold{background:var(--gold-bg);border:1px solid var(--gold-border)}
.callout-surface{background:var(--surface);border:1px solid var(--border)}
.callout-dark{background:var(--text);border-radius:var(--r-xl);padding:40px;margin:36px 0}
.callout-dark h3{color:var(--bg);font-size:20px;font-weight:500;margin-bottom:10px}
.callout-dark p{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.75;font-weight:300;margin-bottom:0}
.callout-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.callout h3{font-size:17px;font-weight:500;color:var(--text);margin-bottom:10px}
.callout p{font-size:14px;color:var(--text-mid);line-height:1.7;font-weight:300;margin-bottom:0}

.pull-quote{border-left:3px solid var(--gold);padding:20px 28px;margin:36px 0;background:var(--surface);border-radius:0 var(--r-lg) var(--r-lg) 0}
.pull-quote p{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,28px);font-weight:300;font-style:italic;color:var(--text);line-height:1.4;margin-bottom:0}

.cost-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin:32px 0}
.cost-table-title{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.cost-table{width:100%;border-collapse:collapse;font-size:14px}
.cost-table thead tr{background:var(--text);color:var(--bg)}
.cost-table thead th{padding:14px 20px;text-align:left;font-weight:500;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.cost-table tbody tr{border-bottom:1px solid var(--border)}
.cost-table tbody tr:last-child{border-bottom:none}
.cost-table tbody tr:hover{background:var(--bg2)}
.cost-table tbody td{padding:16px 20px;color:var(--text-mid);font-weight:300;line-height:1.5}
.cost-table tbody td:first-child{color:var(--text);font-weight:500}
.cost-table tbody td .gold{color:var(--gold);font-weight:500}

.step-list{display:flex;flex-direction:column;gap:0;margin:24px 0}
.step-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border)}
.step-item:last-child{border-bottom:none;padding-bottom:0}
.step-num{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--gold);line-height:1;flex-shrink:0;min-width:36px}
.step-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:6px}
.step-desc{font-size:14px;color:var(--text-mid);line-height:1.65;font-weight:300}

.month-timeline{display:flex;flex-direction:column;gap:0;margin:24px 0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.month-item{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--border)}
.month-item:last-child{border-bottom:none}
.month-label{background:var(--bg2);padding:20px 20px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border)}
.month-tag{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.month-name{font-size:14px;font-weight:500;color:var(--text)}
.month-body{padding:20px 24px}
.month-title{font-size:15px;font-weight:500;color:var(--text);margin-bottom:6px}
.month-desc{font-size:13px;color:var(--text-mid);line-height:1.65;font-weight:300}
.month-note{font-size:12px;color:var(--gold);margin-top:6px}

.trend-grid{display:flex;flex-direction:column;gap:0;margin:48px 0}
.trend-item{padding:64px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.trend-item:first-child{padding-top:32px}
.trend-item:last-child{border-bottom:none;padding-bottom:24px}
.trend-item:nth-child(even) .trend-img{order:2}
.trend-item:nth-child(even) .trend-content{order:1}
.trend-img{height:360px;border-radius:var(--r-xl);overflow:hidden;background:var(--bg2)}
.trend-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease}
.trend-item:hover .trend-img img{transform:scale(1.02)}
.trend-content{display:flex;flex-direction:column;gap:0}
.trend-num{font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:14px;font-style:italic}
.trend-name{font-family:'Inter',sans-serif;font-size:32px;font-weight:800;color:var(--text);margin-bottom:14px;line-height:1.15;letter-spacing:-0.025em}
.trend-desc{font-size:15px;color:var(--text-mid);line-height:1.75;font-weight:300}
.trend-verdict{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:12px;font-weight:500;color:var(--text-mid);background:var(--bg2);padding:8px 16px;border-radius:100px;align-self:flex-start}
.trend-verdict.strong{color:var(--gold);background:var(--gold-bg)}
.trend-verdict.caution{color:var(--text-muted);background:var(--bg3)}

.hidden-cost-list{display:flex;flex-direction:column;gap:16px;margin:24px 0}
.hidden-cost-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.hc-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.hc-label{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.hc-title{font-size:16px;font-weight:500;color:var(--text);margin-bottom:6px}
.hc-desc{font-size:14px;color:var(--text-mid);line-height:1.65;font-weight:300}
.hc-cost{font-size:13px;color:var(--gold);font-weight:500;margin-top:8px}

.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px}
.sidebar-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.toc-item{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted);cursor:pointer;transition:color var(--transition)}
.toc-item:last-child{border-bottom:none}
.toc-item:hover{color:var(--text)}
.toc-num{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);flex-shrink:0}
.cta-card{background:var(--gold);border-radius:var(--r-xl);padding:28px}
.cta-card h3{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;color:#0A0A0A;margin-bottom:8px;letter-spacing:-0.02em}
.cta-card p{font-size:13px;color:rgba(10,10,10,0.65);font-weight:300;line-height:1.6;margin-bottom:16px}
.cta-card button{background:#0A0A0A;color:#fff;border:none;border-radius:100px;padding:14px 50px 14px 24px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;font-family:'DM Sans',sans-serif;cursor:pointer;width:100%;transition:all var(--transition);position:relative;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.cta-card button::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#0A0A0A;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:transform var(--transition)}
.cta-card button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}
.cta-card button:hover::after{transform:translateY(-50%) translateX(3px)}
.sidebar-links{display:flex;flex-direction:column;gap:0}
.sidebar-link{font-size:13px;color:var(--text-mid);cursor:pointer;padding:10px 0;border-bottom:1px solid var(--border);transition:color var(--transition);display:flex;justify-content:space-between}
.sidebar-link:last-child{border-bottom:none;padding-bottom:0}
.sidebar-link:hover{color:var(--gold)}
.sidebar-link::after{content:'→';opacity:0.4}

.hub{padding:120px 0 80px}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column}
.hub-card:hover{border-color:var(--gold-border);transform:translateY(-3px);box-shadow:var(--shadow)}
.hub-num{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;color:var(--border-mid);line-height:1;margin-bottom:16px}
.hub-title{font-size:17px;font-weight:500;color:var(--text);margin-bottom:8px;line-height:1.3}
.hub-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:300;flex:1}
.hub-tag{display:inline-block;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-border);padding:4px 12px;border-radius:100px;margin-top:16px;align-self:flex-start}

.article-footer{background:var(--surface);border-top:1px solid var(--border);padding:40px 0}
/* (removed unused article-footer .footer-inner override) */
.footer-copy{font-size:12px;color:var(--text-muted)}
.footer-back{font-size:13px;color:var(--text-muted);cursor:pointer}
.footer-back:hover{color:var(--text)}

@media(max-width:900px){.article-body{grid-template-columns:1fr}.article-sidebar{position:static}.hub-grid{grid-template-columns:1fr}.month-item{grid-template-columns:1fr}.month-label{border-right:none;border-bottom:1px solid var(--border)}.trend-item{grid-template-columns:1fr;gap:28px;padding:48px 0}.trend-item:nth-child(even) .trend-img{order:1}.trend-item:nth-child(even) .trend-content{order:2}.trend-img{height:280px}.trend-num{font-size:44px;margin-bottom:10px}.trend-name{font-size:26px;letter-spacing:-0.025em}}

/* ── HOMEPAGE EMBEDDED ESTIMATOR ── */
.home-est-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:48px 40px;max-width:840px;margin:0 auto}
.home-est-wrap .ck-quiz{padding:0!important;max-width:100%!important;margin:0}
.home-est-wrap .ck-intro-title,.home-est-wrap .ck-q-title,.home-est-wrap .ck-result-title{font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(26px,3.6vw,38px);line-height:1.15;letter-spacing:-0.025em;color:var(--text);margin-bottom:14px}
@media(max-width:680px){
  .home-est-wrap{padding:32px 22px;border-radius:var(--r-lg)}
}

/* ── 404 PAGE ── */
.notfound-section{padding:120px 0 90px}
.notfound-inner{max-width:1200px;margin:0 auto;padding:0 40px;width:100%}
.notfound-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;margin:22px 0 56px}
.notfound-text{max-width:560px}
.notfound-404{font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(84px,13vw,168px);line-height:0.82;letter-spacing:-0.04em;color:var(--text);margin-bottom:14px}
.notfound-title{font-family:'Inter',sans-serif;font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.05;margin:0 0 22px;letter-spacing:-0.02em}
.notfound-note{font-size:13px;color:var(--text-muted);font-style:italic;margin:14px 0 32px;max-width:520px}
.notfound-image{position:relative}
.notfound-image img{width:100%;height:auto;border-radius:var(--r-lg);display:block;box-shadow:0 12px 40px rgba(0,0,0,0.18);aspect-ratio:1400/931;object-fit:cover}
.notfound-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.notfound-card{display:block;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);text-decoration:none;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.notfound-card:hover{border-color:var(--gold-border);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.nfc-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.nfc-title{font-family:'Inter',sans-serif;font-size:21px;font-weight:600;color:var(--text);margin-bottom:6px}
.nfc-desc{font-size:13px;color:var(--text-mid);line-height:1.5}
.notfound-credit{font-size:11px;color:var(--text-muted);letter-spacing:0.02em;margin-top:12px;text-align:right;font-style:italic}
.notfound-credit a{color:var(--text-mid);text-decoration:underline;text-decoration-color:var(--border)}
.notfound-credit a:hover{color:var(--gold)}
@media(max-width:900px){
  .notfound-section{padding:90px 0 70px}
  .notfound-hero{grid-template-columns:1fr;gap:36px;margin-bottom:44px}
  .notfound-image{max-width:560px}
  .notfound-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .notfound-cards{grid-template-columns:1fr}
}

/* ── BATHROOM TOOL SCOPED CSS ── */

  #page-tool-bathroom {
    --paper: #f4efe5;
    --paper-2: #faf6ec;
    --ink: #15110d;
    --ink-2: #3a322a;
    --ink-3: #786d5d;
    --ink-faint: #b6ab97;
    --line: #ddd2b8;
    --line-2: #c8bb9e;
    --gold: #b88a2c;
    --gold-soft: #d4a64a;
    --gold-deep: #8c6817;
    --green: #5a6e3f;
    --shadow-sm: 0 1px 2px rgba(21,17,13,0.04);
    --shadow-md: 0 4px 12px rgba(21,17,13,0.06), 0 1px 3px rgba(21,17,13,0.04);
    --shadow-lg: 0 12px 32px rgba(21,17,13,0.08), 0 4px 8px rgba(21,17,13,0.04);
  }


  #page-tool-bathroom * { box-sizing: border-box; margin: 0; padding: 0; }


  #page-tool-bathroom, #page-tool-bathroom {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


  #page-tool-bathroom {
    background-image:
      radial-gradient(circle at 92% 5%, rgba(184,138,44,0.05) 0%, transparent 45%),
      radial-gradient(circle at 5% 95%, rgba(90,110,63,0.03) 0%, transparent 45%);
    min-height: 100vh;
    padding: 32px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }


  #page-tool-bathroom .tool {
    width: 100%;
    max-width: 720px;
    margin: 24px 0;
  }


  /* HEADER */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 18px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--line);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  #page-tool-bathroom .header .brand { color: var(--ink); font-weight: 500; }

  #page-tool-bathroom .header .tool-id { color: var(--ink-3); }


  /* PROGRESS */
  .progress {
    margin-bottom: 40px;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    transition: opacity 0.3s;
  }

  #page-tool-bathroom .progress-bar {
    height: 100%;
    background: var(--gold);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }

  #page-tool-bathroom .progress.hidden { opacity: 0; pointer-events: none; }


  /* SCREENS */
  .screen { display: none; animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

  #page-tool-bathroom .screen.active { display: block; }


  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* INTRO */
  .intro-eyebrow {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  #page-tool-bathroom .intro-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(38px, 6vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    color: var(--ink);
  }

  #page-tool-bathroom .intro-title em { font-style: italic; font-weight: 300; color: var(--gold); }

  #page-tool-bathroom .intro-lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 560px;
    margin-bottom: 36px;
  }

  #page-tool-bathroom .intro-meta {
    display: flex;
    gap: 32px;
    margin-bottom: 28px;
    padding: 18px 22px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
  }

  #page-tool-bathroom .intro-meta .item { flex: 1; }

  #page-tool-bathroom .intro-meta .item-num {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    line-height: 1;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 4px;
  }

  #page-tool-bathroom .intro-meta .item-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }


  #page-tool-bathroom .house-note {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(184,138,44,0.06);
    border: 1px solid rgba(184,138,44,0.2);
    border-radius: 4px;
    margin-bottom: 36px;
    align-items: flex-start;
  }

  #page-tool-bathroom .house-note .icon {
    color: var(--gold);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
  }

  #page-tool-bathroom .house-note .text {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }

  #page-tool-bathroom .house-note .text strong { font-weight: 600; color: var(--ink); }


  /* BUTTONS */
  #page-tool-bathroom .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    text-decoration: none;
  }

  #page-tool-bathroom .btn:hover { background: #2a221a; transform: translateY(-1px); }

  #page-tool-bathroom .btn:active { transform: translateY(0); }

  #page-tool-bathroom .btn-arrow { transition: transform 0.2s ease; }

  #page-tool-bathroom .btn:hover .btn-arrow { transform: translateX(4px); }

  #page-tool-bathroom .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-2);
  }

  #page-tool-bathroom .btn-ghost:hover { background: var(--paper-2); }

  #page-tool-bathroom .btn-gold { background: var(--gold); color: var(--paper); }

  #page-tool-bathroom .btn-gold:hover { background: var(--gold-deep); }


  /* QUESTION */
  .q-num {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  #page-tool-bathroom .q-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    color: var(--ink);
  }

  #page-tool-bathroom .q-help {
    font-size: 15px;
    color: var(--ink-2);
    margin-bottom: 32px;
    max-width: 520px;
  }


  /* OPTIONS */
  .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
  }

  #page-tool-bathroom .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-family: 'Geist', sans-serif;
  }

  #page-tool-bathroom .option:hover {
    border-color: var(--gold);
    background: #fcfaf3;
    transform: translateX(2px);
  }

  #page-tool-bathroom .option.selected {
    border-color: var(--gold);
    background: #fcfaf3;
    box-shadow: var(--shadow-md);
  }

  #page-tool-bathroom .option-text { flex: 1; min-width: 0; }

  #page-tool-bathroom .option-label {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }

  #page-tool-bathroom .option-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
  }

  #page-tool-bathroom .option-arrow {
    flex-shrink: 0;
    color: var(--ink-faint);
    font-size: 20px;
    transition: all 0.2s ease;
  }

  #page-tool-bathroom .option:hover .option-arrow { color: var(--gold); transform: translateX(3px); }

  #page-tool-bathroom .option.selected .option-arrow { color: var(--gold); }


  /* MULTI-SELECT (Q6) */
  .option.multi {
    transform: none;
  }

  #page-tool-bathroom .option.multi:hover {
    transform: translateX(2px);
  }

  #page-tool-bathroom .option-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1.5px solid var(--line-2);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 4px;
  }

  #page-tool-bathroom .option.selected .option-check {
    background: var(--gold);
    border-color: var(--gold);
  }

  #page-tool-bathroom .option-check::after {
    content: '';
    width: 6px;
    height: 11px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    margin-bottom: 2px;
  }

  #page-tool-bathroom .option.selected .option-check::after {
    transform: rotate(45deg) scale(1);
  }

  #page-tool-bathroom .option-add {
    flex-shrink: 0;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    text-align: right;
    min-width: 96px;
  }

  #page-tool-bathroom .option.selected .option-add {
    color: var(--gold-deep);
  }


  #page-tool-bathroom .multi-cta {
    margin-top: 20px;
    margin-bottom: 28px;
  }


  /* CONTROLS */
  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  #page-tool-bathroom .back-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.2s;
    font-weight: 500;
  }

  #page-tool-bathroom .back-btn:hover { color: var(--ink); }

  #page-tool-bathroom .back-btn:disabled { opacity: 0.3; cursor: not-allowed; }

  #page-tool-bathroom .step-indicator {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    text-transform: uppercase;
  }


  /* RESULT */
  .result-eyebrow {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  #page-tool-bathroom .result-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 36px;
    color: var(--ink);
  }

  #page-tool-bathroom .result-title em { font-style: italic; color: var(--gold); font-weight: 300; }


  #page-tool-bathroom .price-card {
    background: var(--ink);
    color: var(--paper);
    border-radius: 6px;
    padding: 36px 32px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
  }

  #page-tool-bathroom .price-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(212,166,74,0.12) 0%, transparent 60%);
    pointer-events: none;
  }

  #page-tool-bathroom .price-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
    position: relative;
  }

  #page-tool-bathroom .price-amount {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(38px, 6vw, 52px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--paper);
    margin-bottom: 12px;
    position: relative;
  }

  #page-tool-bathroom .price-amount em {
    font-style: italic;
    color: var(--gold-soft);
    font-weight: 300;
    margin: 0 6px;
    font-size: 0.7em;
  }

  #page-tool-bathroom .price-sub {
    font-size: 13px;
    color: var(--ink-faint);
    position: relative;
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.05em;
  }


  #page-tool-bathroom .breakdown { margin-bottom: 36px; }

  #page-tool-bathroom .breakdown-title {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 18px;
    letter-spacing: -0.005em;
  }

  #page-tool-bathroom .bucket {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    gap: 24px;
  }

  #page-tool-bathroom .bucket:last-child { border-bottom: none; }

  #page-tool-bathroom .bucket-text { flex: 1; min-width: 0; }

  #page-tool-bathroom .bucket-label {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--ink);
  }

  #page-tool-bathroom .bucket-desc {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.4;
  }

  #page-tool-bathroom .bucket-range {
    font-family: 'Geist Mono', monospace;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    font-weight: 500;
  }

  #page-tool-bathroom .bucket-range .dash { color: var(--ink-faint); margin: 0 4px; font-weight: 300; }


  #page-tool-bathroom .factors {
    background: var(--paper-2);
    border-left: 3px solid var(--gold);
    padding: 20px 24px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 36px;
  }

  #page-tool-bathroom .factors-title {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 14px;
    font-weight: 500;
  }

  #page-tool-bathroom .factor {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
  }

  #page-tool-bathroom .factor strong {
    color: var(--ink);
    font-weight: 500;
    min-width: 110px;
    flex-shrink: 0;
  }


  /* CTA */
  .cta-card {
    background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper) 100%);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 32px 28px;
    margin-bottom: 24px;
    text-align: left;
    position: relative;
    overflow: hidden;
  }

  #page-tool-bathroom .cta-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: var(--gold);
  }

  #page-tool-bathroom .cta-eyebrow {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  #page-tool-bathroom .cta-title {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }

  #page-tool-bathroom .cta-title em { font-style: italic; color: var(--gold); }

  #page-tool-bathroom .cta-text {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 480px;
  }


  #page-tool-bathroom .result-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 8px;
    flex-wrap: wrap;
  }


  /* DISCLAIMER */
  .disclaimer {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
    line-height: 1.6;
    text-transform: uppercase;
  }


  /* SUMMARY ROW (top of result) */
  .answer-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
  }

  #page-tool-bathroom .pill {
    display: inline-block;
    padding: 5px 11px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 12px;
    color: var(--ink-2);
    font-family: 'Geist', sans-serif;
    font-weight: 500;
  }

  #page-tool-bathroom .pill.gold {
    background: #fcf6e6;
    border-color: var(--gold-soft);
    color: var(--gold-deep);
  }


  /* Mobile */
  @media (max-width: 560px) {
    body { padding: 16px 14px; }
    .tool { margin: 8px 0; }
    .intro-meta { flex-direction: column; gap: 16px; }
    .price-card { padding: 28px 22px; }
    .cta-card { padding: 24px 20px; }
    .factors { padding: 16px 18px; }
    .factor strong { min-width: 90px; }
    .option-add { min-width: 78px; font-size: 10px; }
  }



/* ══════════════════════════════════════════
   SHARED QUIZ TOOL CSS: Tools 1, 2, 3
   Uses main site CSS variables throughout
   ══════════════════════════════════════════ */
.ck-quiz { max-width: 680px; margin: 0 auto; padding: 100px 40px 80px; }
.ck-quiz-screen { display: none; }
.ck-quiz-screen.active { display: block; animation: fadeUp 0.4s ease forwards; }

.ck-progress { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: 48px; overflow: hidden; transition: opacity 0.3s; }
.ck-progress.hidden { opacity: 0; }
.ck-progress-bar { height: 100%; background: var(--gold); width: 0%; transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1); }

.ck-intro-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.ck-intro-title{ font-family:'Inter',sans-serif; font-weight:900; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.05; letter-spacing:-0.03em; margin-bottom: 20px; color: var(--text); }
.ck-intro-title em { font-style: italic; color: var(--gold); }
.ck-intro-lede { font-size: 17px; line-height: 1.7; color: var(--text-mid); max-width: 520px; margin-bottom: 32px; font-weight: 300; }
.ck-intro-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 32px; }
.ck-meta-item { background: var(--surface); padding: 20px; }
.ck-meta-num { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 4px; }
.ck-meta-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
.ck-note { display: flex; gap: 12px; padding: 14px 18px; background: var(--gold-bg); border: 1px solid var(--gold-border); border-radius: var(--r-lg); margin-bottom: 32px; align-items: flex-start; }
.ck-note-icon { color: var(--gold); font-size: 14px; flex-shrink: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; }
.ck-note-text { font-size: 13px; color: var(--text-mid); line-height: 1.55; font-weight: 300; }
.ck-note-text strong { color: var(--text); font-weight: 500; }
.ck-start-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--text); color: var(--bg); font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px; border: none; border-radius: 100px; cursor: pointer; transition: opacity 0.2s; }
.ck-start-btn:hover { opacity: 0.82; }

.ck-q-num { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.ck-q-title{ font-family:'Inter',sans-serif; font-weight:900; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.1; letter-spacing:-0.025em; margin-bottom: 12px; color: var(--text); }
.ck-q-title em { font-style: italic; color: var(--gold); }
.ck-q-help { font-size: 15px; color: var(--text-mid); margin-bottom: 32px; max-width: 520px; font-weight: 300; line-height: 1.65; }

.ck-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.ck-opt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: all var(--transition); text-align: left; width: 100%; font-family: 'DM Sans', sans-serif; }
.ck-opt:hover { border-color: var(--gold); background: var(--gold-bg); transform: translateX(2px); }
.ck-opt.selected { border-color: var(--gold); background: var(--gold-bg); }
.ck-opt-text { flex: 1; min-width: 0; }
.ck-opt-label { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 20px; color: var(--text); margin-bottom: 3px; line-height: 1.2; }
.ck-opt-desc { font-size: 13px; line-height: 1.5; color: var(--text-mid); font-weight: 300; }
.ck-opt-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 18px; transition: all var(--transition); }
.ck-opt:hover .ck-opt-arrow, .ck-opt.selected .ck-opt-arrow { color: var(--gold); transform: translateX(3px); }
.ck-opt-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-mid); background: var(--bg2); display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.ck-opt.selected .ck-opt-check { background: var(--gold); border-color: var(--gold); }
.ck-opt-check::after { content: ''; width: 6px; height: 11px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.2s ease; margin-bottom: 2px; }
.ck-opt.selected .ck-opt-check::after { transform: rotate(45deg) scale(1); }
.ck-opt-add { flex-shrink: 0; font-size: 12px; color: var(--text-muted); text-align: right; min-width: 88px; font-weight: 400; }
.ck-opt.selected .ck-opt-add { color: var(--gold); font-weight: 500; }

.ck-controls { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); }
.ck-back { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 8px 0; font-weight: 400; font-family: 'DM Sans', sans-serif; transition: color var(--transition); }
.ck-back:hover { color: var(--text); }
.ck-step-ind { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ck-multi-cta { margin: 20px 0 28px; }
.ck-next-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--text); color: var(--bg); font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px; border: none; border-radius: 100px; cursor: pointer; transition: opacity 0.2s; }
.ck-next-btn:hover { opacity: 0.82; }

.ck-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ck-pill { display: inline-block; padding: 5px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 100px; font-size: 12px; color: var(--text-mid); font-weight: 400; }
.ck-pill.gold { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold); font-weight: 500; }

.ck-result-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.ck-result-title{ font-family:'Inter',sans-serif; font-weight:900; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing:-0.025em; margin-bottom: 32px; color: var(--text); }
.ck-result-title em { font-style: italic; color: var(--gold); }

.ck-price-card { background: var(--text); color: var(--bg); border-radius: var(--r-xl); padding: 36px 32px; margin-bottom: 32px; position: relative; overflow: hidden; }
.ck-price-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(201,168,67,0.12) 0%, transparent 60%); pointer-events: none; }
.ck-price-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,232,222,0.5); margin-bottom: 14px; position: relative; }
.ck-price-amount { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 6vw, 56px); line-height: 1.0; letter-spacing: -0.02em; color: var(--bg); margin-bottom: 10px; position: relative; }
.ck-price-amount em { font-style: italic; color: var(--gold); font-weight: 300; margin: 0 6px; font-size: 0.7em; }
.ck-price-sub { font-size: 13px; color: rgba(237,232,222,0.5); position: relative; letter-spacing: 0.04em; }

.ck-breakdown { margin-bottom: 32px; }
.ck-bd-title{ font-family:'Inter',sans-serif; font-weight:800; font-size: 22px; margin-bottom: 16px; color: var(--text);letter-spacing:-0.02em}
.ck-bucket { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 24px; }
.ck-bucket:last-child { border-bottom: none; }
.ck-bucket-text { flex: 1; }
.ck-bucket-label { font-size: 16px; font-weight: 500; margin-bottom: 2px; color: var(--text); }
.ck-bucket-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; font-weight: 300; }
.ck-bucket-val { font-size: 14px; color: var(--text); white-space: nowrap; font-weight: 500; }

.ck-factors { background: var(--surface); border-left: 3px solid var(--gold); padding: 20px 24px; border-radius: 0 var(--r-lg) var(--r-lg) 0; margin-bottom: 32px; }
.ck-factors-title { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.ck-factor { display: flex; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--text-mid); line-height: 1.55; font-weight: 300; }
.ck-factor strong { color: var(--text); font-weight: 500; min-width: 100px; flex-shrink: 0; }

.ck-permit-result { padding: 28px 32px; border-radius: var(--r-xl); margin-bottom: 28px; }
.ck-permit-yes { background: var(--gold-bg); border: 1px solid var(--gold-border); }
.ck-permit-warn { background: rgba(229,145,58,0.07); border: 1px solid rgba(229,145,58,0.22); }
.ck-permit-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px; }
.ck-permit-verdict{ font-family:'Inter',sans-serif; font-size: 28px; font-weight:800; color: var(--text); margin-bottom: 10px; line-height: 1.15;letter-spacing:-0.02em}
.ck-permit-body { font-size: 14px; color: var(--text-mid); line-height: 1.75; font-weight: 300; }

.ck-email-cap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; margin-top: 32px; }
.ck-email-title{ font-family:'Inter',sans-serif; font-size: 28px; font-weight:800; color: var(--text); margin-bottom: 8px; line-height: 1.15;letter-spacing:-0.02em}
.ck-email-title em { font-style: italic; color: var(--gold); }
.ck-email-body { font-size: 14px; color: var(--text-mid); font-weight: 300; line-height: 1.65; margin-bottom: 20px; }
.ck-email-fields { display: flex; gap: 12px; margin-bottom: 12px; }
.ck-email-inp { flex: 1; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; outline: none; transition: border-color var(--transition); }
.ck-email-inp:focus { border-color: var(--gold); }
.ck-email-inp::placeholder { color: var(--text-muted); }
.ck-email-submit { width: 100%; padding: 14px; background: var(--gold); color: #0A0A0A; border: none; border-radius: 100px; font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: opacity 0.2s; }
.ck-email-submit:hover { opacity: 0.88; }
.ck-email-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: center; font-weight: 300; }
.ck-email-success { display: none; text-align: center; padding: 20px 0; }
.ck-email-success h3{ font-family:'Inter',sans-serif; font-size: 24px; font-weight:800; color: var(--text); margin-bottom: 8px;letter-spacing:-0.02em}
.ck-email-success p { font-size: 14px; color: var(--text-mid); font-weight: 300; line-height: 1.65; }

.ck-result-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.ck-ghost-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: transparent; border: 1px solid var(--border-mid); border-radius: 100px; font-size: 14px; font-weight: 400; color: var(--text-mid); font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all var(--transition); }
.ck-ghost-btn:hover { border-color: var(--text); color: var(--text); }
.ck-primary-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--text); color: var(--bg); border: none; border-radius: 100px; font-size: 14px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: opacity 0.2s; }
.ck-primary-btn:hover { opacity: 0.85; }
.ck-disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border-mid); line-height: 1.6; }

@media (max-width: 640px) {
  .ck-quiz { padding: 80px 20px 60px; }
  .ck-price-card { padding: 28px 22px; }
  .ck-email-fields { flex-direction: column; }
  .ck-email-cap { padding: 24px; }
  .ck-factor strong { min-width: 80px; }
}


/* ══════════════════════════════════════
   RESPONSIVE, TABLET (max 900px)
   ══════════════════════════════════════ */
@media(max-width:900px){
  .container{padding:0 28px}
  .hero-inner{grid-template-columns:1fr 1.2fr;gap:8px}
  .footer-inner{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .proj-body{grid-template-columns:1fr;gap:32px;padding:40px 0}
  .proj-sidebar{position:static}
  .proj-snapshot{grid-template-columns:repeat(2,1fr)}
  .proj-snapshot .snap-item:nth-child(3),.proj-snapshot .snap-item:nth-child(4){border-top:1px solid var(--border)}
  /* New intro + specs */
  .proj-intro{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .proj-specs{padding:32px}
  .proj-specs-grid{grid-template-columns:1fr;gap:40px}
  .pstrip-inner{grid-template-columns:repeat(2,1fr)}
  .proj-cta{grid-template-columns:1fr;gap:24px;padding:48px 40px}
  .contact-split{grid-template-columns:1fr;min-height:auto}
  .contact-col-left{padding:100px 28px 48px}
  .contact-col-right{padding:48px 28px 60px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  /* About page tablet: reduce feature image, tighten story spacing */
  .about-feature-img{height:440px}
  .article-feature-img{height:400px}
  .about-story{padding-bottom:64px}
  .about-values{margin-top:64px}
  .value-item{padding:0 28px}
}

/* ══════════════════════════════════════
   RESPONSIVE, MOBILE (max 768px)
   ══════════════════════════════════════ */
@media(max-width:768px){

  /* ── NAV ── */
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-hamburger{display:flex}
  .nav-wrap{top:12px;width:calc(100% - 24px)}
  nav{padding:0 6px 0 16px;height:54px}
  nav .nav-logo img{height:28px}
  .theme-toggle{display:none}

  /* ── GLOBALS ── */
  .container{padding:0 24px}
  .section-sm{padding-top:28px;padding-bottom:28px}
  h1{font-size:clamp(34px,9vw,48px)}
  h2{font-size:clamp(26px,7vw,36px)}
  .lead{font-size:15px;line-height:1.65}
  .page-sub{font-size:15px}
  .page-hdr{padding:100px 0 40px}
  .eyebrow{font-size:10px}

  /* ── HOME PAGE SPACING PASS ── */

  /* Section rhythm: 64px gaps, large enough to read in dark mode */
  .section{padding-top:64px;padding-bottom:64px}

  /* Explicit divider line between consecutive sections on mobile.
     In dark mode --border is rgba(255,255,255,0.07), subtle but visible.
     In light mode it's nearly invisible, the background contrast does the work. */
  .section.container{border-top:1px solid var(--border)}
  /* First section on each page should not have a top border */
  .page > .section.container:first-of-type,
  #page-home > .section.container:first-of-type{border-top:none}

  /* Ticker: flush against hero, no margin gap */
  .ticker{margin:0}
  .ticker-item{font-size:11px;padding:10px 20px}

  /* Services band */
  .service-band{border-radius:var(--r-lg)}
  .service-item{padding:20px 16px;gap:12px}
  .service-num{font-size:16px;padding-top:1px}
  .service-name{font-size:18px;margin-bottom:5px;font-weight:500}
  .service-desc{font-size:14px;line-height:1.65}

  /* Stats: more breathing room above, stacked footer */
  .stats-bar{margin-top:64px}
  .stat-item{padding:24px 14px}
  .stats-bar-footer{flex-direction:column;gap:8px;padding:14px 18px}
  .stats-bar-footer-item{font-size:12px}
  .stats-bar-divider{display:none}
  /* Stats wrapper has no .section class; give it real bottom spacing so the
     next section's divider sits in a balanced gap, matching section rhythm */
  .stats-bar-footer{margin-bottom:64px}

  /* Process card */
  .process-card{padding:28px 18px}
  .ps{gap:14px;padding:14px 0}
  .ps-num{font-size:20px;min-width:28px}
  .ps-name{font-size:16px;margin-bottom:4px}
  .ps-desc{font-size:13px;line-height:1.6;color:var(--text-mid)}

  /* Testimonials: .container only, needs explicit top margin + reduced padding */
  .testi{padding:28px 20px;border-radius:var(--r-xl);margin-top:64px}
  /* When the testimonial sits in a bare .container (homepage), reserve matching
     bottom space so the next section's divider isn't flush against the card.
     On pages where it lives inside a .section.container (e.g. About), the
     section's own padding already handles this, so :not(.section) scopes it out. */
  .container:not(.section) > .testi{margin-bottom:64px}
  .testi-quote{font-size:clamp(17px,4.5vw,22px);line-height:1.55}
  .testi-author{flex-wrap:wrap;margin-top:20px;gap:8px}
  .testi-controls{margin-top:18px;flex-wrap:wrap;gap:10px}
  .testi-arrows{margin-left:0}
  .stars{gap:2px}

  /* Tools section: text-only on mobile, good internal spacing */
  .split-text h2{margin-bottom:12px}
  .split-text .lead{margin-bottom:24px}

  /* Bottom CTA */
  .full-cta{margin-top:44px}
  .full-cta h2{font-size:clamp(24px,7vw,32px);margin-bottom:12px}
  .full-cta .lead{font-size:14px;line-height:1.65;margin-bottom:28px}

  /* Footer spacing */
  .footer-inner{padding:36px 0 16px}

  /* ── HERO ── */
  .hero{padding-top:70px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:0;min-height:auto;height:auto}
  .hero-left{padding:36px 20px 40px;border-radius:var(--r-lg);min-height:calc(100svh - 70px);justify-content:center}
  .hero-headline{font-size:clamp(40px,11vw,56px);margin-bottom:18px}
  .hero-sub{font-size:15px;line-height:1.65;margin-bottom:28px;max-width:100%}
  .hero-actions{gap:10px}
  .hero-actions .btn{padding:12px 20px;font-size:11px}
  .hero-actions .btn-gold,.hero-actions .btn-dark{padding:12px 44px 12px 20px}
  .hero-actions .btn-gold::after,.hero-actions .btn-dark::after{width:26px;height:26px;font-size:12px}
  .hero-img-grid{display:none}
  .hero-stats-bar{gap:24px;margin-top:36px;padding-top:24px;flex-wrap:wrap}
  .hero-stat-n{font-size:22px}
  .hero-stat-l{font-size:11px}
  .hero-img-sub-grid{display:none}

  /* ── STATS BAR ── */
  .stats-bar{grid-template-columns:1fr 1fr;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .stat-item{padding:28px 16px}
  .stat-item:nth-child(2){border-right:none}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid var(--border)}
  .stat-item:nth-child(4){border-right:none}
  .stat-n{font-size:36px}
  .stat-n sub{font-size:18px}
  .stats-bar-footer{flex-wrap:wrap;gap:10px 16px;padding:14px 18px}
  .stats-bar-divider{display:none}
  .stats-bar-footer-item{font-size:11px}

  /* ── SERVICE BAND ── */
  .service-item{grid-template-columns:36px 1fr;gap:14px;padding:24px 18px}
  .service-cta{display:none}
  .service-num{font-size:18px;padding-top:2px}
  .service-name{font-size:17px;margin-bottom:6px}
  .service-desc{font-size:14px;line-height:1.6}
  .service-tags{display:none}

  /* ── SPLITS ── */
  .split,.split.flip{grid-template-columns:1fr;direction:ltr;gap:0}
  .split.flip>*{direction:ltr}
  .split-img{display:none}
  .split-text{padding:0}

  /* ── HOME MOSAIC ── */
  .home-mosaic{display:grid;grid-template-columns:1fr;grid-auto-rows:220px;gap:8px}
  .home-mosaic .img-card{grid-column:1 !important;grid-row:span 1 !important}
  .home-mosaic .img-card:nth-child(4),.home-mosaic .img-card:nth-child(5){display:none}
  .img-card-title{font-size:15px}
  .img-card-meta{font-size:11px}
  .mosaic-see-all{display:block;margin-top:12px;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);text-align:center;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all var(--transition)}
  .mosaic-see-all:hover{border-color:var(--gold);color:var(--gold)}

  /* ── PROJ HEADING ROW ── */
  .proj-heading-row{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}

  /* ── PROCESS ── */
  .process-split{grid-template-columns:1fr;gap:28px}

  /* ── ABOUT PAGE MOBILE ── */
  .about-feature-img{height:280px;margin-top:32px}
  .article-feature-img{height:240px;margin-top:32px;border-radius:var(--r-lg)}
  .values-list{grid-template-columns:1fr;gap:0}
  .value-item{padding:32px 0;border-left:none;border-top:1px solid var(--border)}
  .value-item:first-child{padding-top:0;border-top:none}
  .value-num{font-size:44px;margin-bottom:18px}

  /* ── TEAM ── */
  .team-grid{grid-template-columns:1fr 1fr;gap:14px}

  /* ── SVC GRID (about page) ── */
  .svc-grid{grid-template-columns:1fr 1fr;gap:8px}

  /* ── CONTACT PAGE ── */
  .contact-split{grid-template-columns:1fr;min-height:auto}
  .contact-col-left,.contact-col-right{padding:36px 20px}
  .contact-col-left{padding-top:90px}
  .ci-grid{grid-template-columns:1fr}
  .form-group{margin-bottom:14px}

  /* ── ABOUT HERO GRID ── */
  .about-hero-grid{grid-template-columns:1fr}
  .about-hero-wide{grid-column:span 1}

  /* ── PROJECT LISTING ── */
  .proj-grid-full{grid-template-columns:1fr;gap:14px;padding:0}
  .proj-card-img{height:200px}
  .proj-card-body{padding:20px 18px 22px}
  .proj-title{font-size:17px}
  .proj-meta-row{gap:12px}

  /* ── PROJECT DETAIL ── */
  .proj-hero-inner{padding:90px 0 32px}
  .proj-breadcrumb{font-size:12px}
  .proj-body{grid-template-columns:1fr;gap:28px;padding:28px 0}
  .proj-snapshot{grid-template-columns:1fr 1fr}
  .proj-snapshot .snap-item:nth-child(3),.proj-snapshot .snap-item:nth-child(4){border-top:1px solid var(--border)}
  /* New intro + specs mobile */
  .proj-intro{gap:24px;margin-top:28px}
  .proj-specs{padding:24px}
  .proj-specs-grid{gap:32px}
  .snap-item{padding:18px 20px}
  .snap-n{font-size:28px}
  .pstrip-inner{grid-template-columns:1fr 1fr;gap:14px}
  .proj-cta{grid-template-columns:1fr;gap:20px;padding:36px 20px;border-radius:var(--r-xl)}
  .proj-nav-strip{grid-template-columns:1fr;gap:8px}
  .proj-nav-card{padding:18px 20px}
  .proj-story p{font-size:15px}

  /* ── FOOTER ── */
  .footer-inner{grid-template-columns:1fr;gap:0;padding:32px 0 8px}
  .footer-brand{grid-column:span 1;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}
  .footer-brand p{max-width:100%;font-size:13px}
  .footer-cols-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
  .footer-contact{padding-top:16px;border-top:1px solid var(--border);grid-column:span 1}
  .footer-col h4{margin-bottom:12px}
  .footer-col a{margin-bottom:8px;font-size:13px}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center;padding:16px 0}

  /* ── TOOL HUB GRID (resources page) ── */
  .tool-hub-grid{grid-template-columns:1fr}

  /* ── ARTICLE PAGES ── */
  .article-body{grid-template-columns:1fr}
  .article-sidebar{position:static}
  .article-wrap{padding:0 18px}
  .article-hero{padding:80px 0 36px}
  .article-title{font-size:clamp(30px,8vw,44px);letter-spacing:-0.03em;line-height:1.03}
  .article-dek{font-size:15px}
  .article-meta-bar{flex-wrap:wrap;gap:10px}
  .article-meta-dot{display:none}
  .tier-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .cost-table{font-size:13px}
  .cost-table thead th,.cost-table tbody td{padding:12px 12px}
  .month-item{grid-template-columns:1fr}
  .month-label{border-right:none;border-bottom:1px solid var(--border)}
  .trend-item{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .trend-img{height:220px;border-radius:var(--r-lg)}
  .trend-num{font-size:38px;margin-bottom:8px}
  .trend-name{font-size:22px;letter-spacing:-0.025em}
  .trend-desc{font-size:14px}

  /* ── QUIZ TOOLS (1–3) ── */
  .ck-quiz{padding:80px 18px 60px}
  .ck-price-card{padding:28px 20px}
  .ck-email-cap{padding:24px 18px}
  .ck-email-fields{flex-direction:column}
  .ck-factor strong{min-width:80px}
  .ck-intro-meta .ck-meta-num{font-size:24px}
  .ck-opt{padding:14px 16px}
  .ck-opt-label{font-size:17px}
  .ck-result-actions{flex-direction:column}
  .ck-result-actions .ck-ghost-btn,.ck-result-actions .ck-primary-btn{width:100%;justify-content:center}

  /* ── BATHROOM TOOL (scoped) ── */
  #page-tool-bathroom .price-card{padding:28px 20px}
  #page-tool-bathroom .cta-card{padding:24px 20px}
  #page-tool-bathroom .intro-meta{flex-direction:column;gap:16px}

  /* ── GENERAL GRIDS ── */
  .grid-2{grid-template-columns:1fr;gap:20px}
  .grid-3{grid-template-columns:1fr;gap:16px}
  .grid-4{grid-template-columns:1fr 1fr;gap:14px}
  .email-fields{grid-template-columns:1fr}
  .ps-rows{grid-template-columns:1fr}
  .size-opts{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}

  /* ── FULL CTA SECTION ── */
  .full-cta{padding:44px 20px;border-radius:var(--r-xl)}
  .btn-icon-row{flex-direction:column;align-items:center;gap:10px}
  .btn-icon-row .btn{width:100%;justify-content:center}

  /* ── TICKER ── */
  .ticker-inner{animation-duration:20s}
}

/* ══════════════════════════════════════
   RESPONSIVE, SMALL PHONE (max 480px)
   ══════════════════════════════════════ */
@media(max-width:480px){
  .container{padding:0 20px}
  .hero-left{padding:28px 16px 36px}
  .hero-headline{font-size:clamp(36px,12vw,44px)}
  .stats-bar{grid-template-columns:1fr 1fr}
  .stat-item{padding:20px 12px}
  .stat-n{font-size:30px}
  .home-mosaic{grid-auto-rows:160px}
  .team-grid{grid-template-columns:1fr}
  .proj-snapshot{grid-template-columns:1fr 1fr}
  .snap-n{font-size:24px}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .footer-brand{grid-column:span 1}
  .article-title{font-size:clamp(28px,9vw,38px);letter-spacing:-0.03em;line-height:1.03}
  .ck-quiz{padding:70px 14px 50px}
  .ck-intro-meta{gap:0}
  .ck-intro-meta .ck-meta-item{padding:16px 6px}
  .ck-intro-meta .ck-meta-label{letter-spacing:0.04em}
  .ck-opt-add{min-width:72px;font-size:11px}
  .proj-grid-full{padding:0}
  .proj-card-img{height:180px}
  h1{font-size:clamp(30px,10vw,40px)}
  h2{font-size:clamp(24px,8vw,32px)}
}

/* ══ COLLECTION PAGE, MINI PROJECT CARDS ══ */
.coll-intro{max-width:640px;margin-bottom:64px}
.coll-intro .lead{margin-top:16px}

.mini-proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

.mini-proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:all var(--transition)}
.mini-proj-card:hover{border-color:var(--gold-border);box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* Horizontal scroll image strip */
.mini-strip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;position:relative}
.mini-strip::-webkit-scrollbar{display:none}
.mini-strip:active{cursor:grabbing}
.mini-strip-track{display:flex;gap:4px;padding:0}
.mini-strip-img{width:260px;height:190px;object-fit:cover;scroll-snap-align:start;flex-shrink:0;display:block}
.mini-strip-img:first-child{width:280px}

/* Strip navigation dots */
.mini-strip-dots{display:flex;gap:5px;padding:10px 20px 0;align-items:center}
.mini-strip-dot{width:5px;height:5px;border-radius:50%;background:var(--border-mid);border:none;padding:0;cursor:pointer;transition:all 0.2s;flex-shrink:0}
.mini-strip-dot.on{background:var(--gold);transform:scale(1.3)}
.mini-strip-count{margin-left:auto;font-size:11px;color:var(--text-muted);letter-spacing:0.05em}

/* Card info */
.mini-proj-info{padding:20px 22px 22px}
.mini-proj-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mini-proj-type-badge{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:500}
.mini-proj-meta-sep{width:1px;height:10px;background:var(--border-mid)}
.mini-proj-loc{font-size:11px;color:var(--text-muted);letter-spacing:0.04em}
.mini-proj-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--text);line-height:1.2;margin-bottom:8px}
.mini-proj-desc{font-size:13px;color:var(--text-mid);line-height:1.65;font-weight:300}

/* Mobile */
@media(max-width:768px){
  .mini-proj-grid{grid-template-columns:1fr;gap:20px}
  .mini-strip-img{width:220px;height:165px}
  .mini-strip-img:first-child{width:240px}
  .mini-proj-info{padding:16px 18px 18px}
  .mini-proj-name{font-size:20px}
  .coll-intro{margin-bottom:40px}
}
/* ── JOBBER EMBED WRAPPER ── */
.jobber-form-wrap{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg);
  padding:8px;
  overflow:hidden;
}
.jobber-form-wrap iframe{display:block;width:100%}

/* Maximize embedded form width on phones so Jobber's form never has to scroll horizontally */
@media(max-width:560px){
  .contact-col-right{padding-left:16px;padding-right:16px}
  .jobber-form-wrap{padding:5px}
}

/* Guides grid: two across on larger screens, single full-width card per row on phones */
.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* RESPONSIVE GUIDE TABLES
   Wide cost/comparison tables stay inside their card and scroll horizontally on
   small screens instead of pushing the whole page wider than the viewport.
   (Overrides the earlier .cost-table-wrap{overflow:hidden} base rules.)
   The layered backgrounds add a right/left fade that signals "scroll for more"
   and disappears once the table is scrolled to that edge. */
.article-content{min-width:0}
.cost-table-wrap{
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  background-color:var(--surface);
  background-image:
    linear-gradient(to right, var(--surface), rgba(127,127,127,0)),
    linear-gradient(to left,  var(--surface), rgba(127,127,127,0)),
    linear-gradient(to right, rgba(0,0,0,.13), rgba(127,127,127,0)),
    linear-gradient(to left,  rgba(0,0,0,.13), rgba(127,127,127,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment:local, local, scroll, scroll;
}
[data-theme="dark"] .cost-table-wrap{
  background-image:
    linear-gradient(to right, var(--surface), rgba(127,127,127,0)),
    linear-gradient(to left,  var(--surface), rgba(127,127,127,0)),
    linear-gradient(to right, rgba(255,255,255,.16), rgba(127,127,127,0)),
    linear-gradient(to left,  rgba(255,255,255,.16), rgba(127,127,127,0));
}



/* ============================================================
   2026 MOTION LAYER  (scroll reveal, hero entrance, count-up,
   scroll progress, hover). All gated by .has-js (set in <head>)
   so content never flashes and degrades gracefully without JS.
   ============================================================ */
.has-js .proj-tile,
.has-js .proj-card,
.has-js .guide-card,
.has-js .hub-card,
.has-js .tool-card,
.has-js .cta-card,
.has-js .result-card,
.has-js .pstrip-item,
.has-js .step,
.has-js .compare-row,
.has-js .testi-carousel,
.has-js .proj-gallery,
.has-js .proj-intro,
.has-js .proj-specs,
.has-js .full-cta,
.has-js .email-cap,
.has-js .about-feature-img,
.has-js .about-portrait,
.has-js .about-values,
.has-js .home-est-wrap,
.has-js .page-hdr,
.has-js .proj-heading-row,
.has-js .proj-story,
.has-js .about-story-text,
.has-js .service-card,
.has-js .value-card,
.has-js .stat-item{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--rd,0) * 1ms);will-change:opacity,transform;
}
.has-js .rv-in{opacity:1 !important;transform:none !important}
/* failsafe: if the motion script never initialises, reveal everything */
.has-js.motion-failsafe .proj-tile,.has-js.motion-failsafe .proj-card,.has-js.motion-failsafe .guide-card,.has-js.motion-failsafe .hub-card,.has-js.motion-failsafe .tool-card,.has-js.motion-failsafe .cta-card,.has-js.motion-failsafe .result-card,.has-js.motion-failsafe .pstrip-item,.has-js.motion-failsafe .step,.has-js.motion-failsafe .compare-row,.has-js.motion-failsafe .testi-carousel,.has-js.motion-failsafe .proj-gallery,.has-js.motion-failsafe .proj-intro,.has-js.motion-failsafe .proj-specs,.has-js.motion-failsafe .full-cta,.has-js.motion-failsafe .email-cap,.has-js.motion-failsafe .about-feature-img,.has-js.motion-failsafe .about-portrait,.has-js.motion-failsafe .about-values,.has-js.motion-failsafe .home-est-wrap,.has-js.motion-failsafe .page-hdr,.has-js.motion-failsafe .proj-heading-row,.has-js.motion-failsafe .proj-story,.has-js.motion-failsafe .about-story-text,.has-js.motion-failsafe .service-card,.has-js.motion-failsafe .value-card,.has-js.motion-failsafe .stat-item{opacity:1;transform:none}

/* hero entrance (homepage only) */
.has-js .hero-left>div>*{opacity:0;animation:heroRise .85s cubic-bezier(.2,.7,.2,1) forwards}
.has-js .hero-left>div>*:nth-child(1){animation-delay:.06s}
.has-js .hero-left>div>*:nth-child(2){animation-delay:.16s}
.has-js .hero-left>div>*:nth-child(3){animation-delay:.28s}
.has-js .hero-left>div>*:nth-child(4){animation-delay:.40s}
.has-js .hero-left>div>*:nth-child(5){animation-delay:.52s}
.has-js .hero-stats-bar{opacity:0;animation:heroRise .85s cubic-bezier(.2,.7,.2,1) .66s forwards}
.has-js .hero-inner>div:last-child{opacity:0;animation:heroFade 1.1s ease .34s forwards}
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),#e6c869);z-index:9999;pointer-events:none;will-change:transform}

/* refined hover */
.has-js .btn{transition:all .25s cubic-bezier(.2,.7,.2,1)}
.has-js .btn-gold:hover,.has-js .btn-outline:hover,.has-js .btn-lg:hover{transform:translateY(-2px)}
.has-js .btn-gold:hover{box-shadow:0 12px 30px -12px rgba(201,168,67,.55)}

@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion: reduce){
  .has-js .proj-tile,.has-js .proj-card,.has-js .guide-card,.has-js .hub-card,.has-js .tool-card,.has-js .cta-card,.has-js .result-card,.has-js .pstrip-item,.has-js .step,.has-js .compare-row,.has-js .testi-carousel,.has-js .proj-gallery,.has-js .proj-intro,.has-js .proj-specs,.has-js .full-cta,.has-js .email-cap,.has-js .about-feature-img,.has-js .about-portrait,.has-js .about-values,.has-js .home-est-wrap,.has-js .page-hdr,.has-js .proj-heading-row,.has-js .proj-story,.has-js .about-story-text,.has-js .service-card,.has-js .value-card,.has-js .stat-item{opacity:1 !important;transform:none !important;transition:none !important}
  .has-js .hero-left>div>*,.has-js .hero-stats-bar,.has-js .hero-inner>div:last-child{opacity:1 !important;animation:none !important}
  .scroll-prog{display:none !important}
}

/* ──────── COLLECTION GRID + LIGHTBOX ──────── */
.coll-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.coll-filter{padding:10px 18px;font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:100px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all var(--transition)}
.coll-filter:hover{color:var(--text);border-color:var(--text-muted)}
.coll-filter.active{color:#1a1a1a;background:var(--gold);border-color:var(--gold)}
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.coll-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);cursor:pointer;font-family:inherit;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.coll-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,0.13);border-color:var(--gold)}
.coll-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.coll-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}
.coll-card:hover .coll-card-media img{transform:scale(1.04)}
.coll-card-count{position:absolute;bottom:10px;right:10px;font-size:11px;font-weight:600;letter-spacing:0.03em;color:#fff;background:rgba(0,0,0,0.6);padding:5px 10px;border-radius:100px;backdrop-filter:blur(4px)}
.coll-card-info{padding:16px 18px 18px}
.coll-card-title{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:17px;color:var(--text);letter-spacing:-0.01em;line-height:1.2}
.coll-card-meta{display:block;margin-top:5px;font-size:12px;color:var(--text-muted);letter-spacing:0.03em;text-transform:uppercase}
.coll-card.hidden{display:none}
.coll-empty{display:none;color:var(--text-muted);padding:40px 0;font-size:15px}
.coll-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(12,12,12,0.94);display:none;align-items:center;justify-content:center;padding:24px}
.coll-lightbox.open{display:flex}
.coll-lb-stage{max-width:min(1100px,92vw);max-height:82vh;display:flex;align-items:center;justify-content:center}
.coll-lb-img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.coll-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,0.12);color:#fff;font-size:22px;cursor:pointer;transition:background var(--transition)}
.coll-lb-arrow:hover{background:rgba(255,255,255,0.25)}
.coll-lb-arrow.prev{left:24px}
.coll-lb-arrow.next{right:24px}
.coll-lb-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,0.12);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background var(--transition)}
.coll-lb-close:hover{background:rgba(255,255,255,0.25)}
.coll-lb-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:rgba(255,255,255,0.85);font-size:13.5px;padding:0 80px}
.coll-lb-counter{position:absolute;top:26px;left:28px;color:rgba(255,255,255,0.7);font-size:13px;letter-spacing:0.05em}
@media(max-width:640px){.coll-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.coll-card-title{font-size:15px}.coll-lb-arrow.prev{left:8px}.coll-lb-arrow.next{right:8px}.coll-lb-arrow{width:44px;height:44px}.coll-lb-caption{padding:0 14px;bottom:14px;font-size:12px}}

/* HOMEPAGE COST ESTIMATOR CTA CARD */
.est-cta-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:36px;max-width:900px;margin:0 auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-xl);padding:38px 44px;text-decoration:none;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.est-cta-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,0.16)}
.est-cta-eyebrow{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.est-cta-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,33px);font-weight:300;color:var(--text);line-height:1.12;margin-bottom:12px}
.est-cta-body{font-size:14.5px;color:var(--text-mid);line-height:1.6;max-width:500px;margin:0 0 20px}
.est-cta-meta{display:flex;flex-wrap:wrap;gap:24px}
.est-cta-meta span{font-size:13px;color:var(--text-muted)}
.est-cta-meta strong{color:var(--text);font-weight:600}
.est-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#0A0A0A;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;padding:16px 30px;border-radius:100px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,0.10),inset 0 -2px 0 rgba(0,0,0,0.08);transition:transform var(--transition)}
.est-cta-card:hover .est-cta-btn{transform:translateX(3px)}
@media(max-width:768px){.est-cta-card{grid-template-columns:1fr;gap:24px;padding:28px 24px}.est-cta-go{width:100%}.est-cta-btn{display:flex;justify-content:center;width:100%}}

/* GUIDE INLINE FIGURES */
.guide-figure{margin:40px 0}
.guide-figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);border:1px solid var(--border)}
.guide-figure figcaption{font-size:13px;color:var(--text-muted);margin-top:12px;line-height:1.55}

/* GUIDE CARDS: image one side, text the other (tool cards keep icon style) */
.tool-hub-card.guide-card{padding:0;display:grid;grid-template-columns:40% 1fr;align-items:stretch}
.tool-hub-card.guide-card::after{display:none}
.guide-card .thc-img{height:100%;min-height:200px;overflow:hidden}
.guide-card .thc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease}
.guide-card:hover .thc-img img{transform:scale(1.05)}
.guide-card .thc-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:560px){
  .tool-hub-card.guide-card{grid-template-columns:1fr}
  .guide-card .thc-img{min-height:0;height:170px}
  .guide-grid{grid-template-columns:1fr}
}

/* Dark-mode fix: keep dark accent surfaces dark in dark mode.
   .callout-dark and .ck-price-card use background:var(--text), which flips to a
   light tone in dark mode and leaves their light-coloured text unreadable.
   Pin them to an elevated dark surface with light text instead. */
[data-theme="dark"] .callout-dark{background:var(--bg3);border:1px solid var(--border-mid)}
[data-theme="dark"] .callout-dark h3{color:var(--text)}
[data-theme="dark"] .ck-price-card{background:var(--bg3);color:var(--text);border:1px solid var(--border-mid)}
[data-theme="dark"] .ck-price-card .ck-price-amount{color:var(--text)}