/* Joel Dyck, Saskatoon. Tokens are Ranola's real stylesheet values; layout is the canvas. */
:root{--bg:#f6f4ee;--cream-deep:#ebe7dc;--text:#1a2433;--muted:#5c646e;--soft:#4a5260;--line:#dcd8cd;--line-soft:#e9e5da;--card:#ffffff;--gold:#edbb00;--navy:#142335;
--sage:#3c5c4f;--sage-deep:#2f4a3f;--sage-soft:#e6ede9;--sage-light:#9cb8ab;--charcoal:#142335;--gold-text:#856a00;
--serif:"Fraunces",Georgia,serif;--sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--maxw:1140px;--gut:24px;
--shadow-soft:0 4px 18px -14px rgba(52,52,52,.35)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.1;letter-spacing:-.01em;color:var(--text);margin:0}
h1{font-weight:600;font-size:clamp(38px,6.5vw,56px);line-height:1.08}
h1.big{font-size:clamp(46px,7vw,64px);line-height:1.02}
h2{font-weight:600;font-size:clamp(28px,4vw,38px)}
h3{font-weight:400;font-size:clamp(21px,2.6vw,25px)}
p{margin:0 0 16px;color:var(--soft);text-wrap:pretty}
a{color:var(--sage-deep);text-decoration:none}a:hover{color:var(--text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px;margin:0 auto;padding:0 var(--gut)}
.narrowc{max-width:860px;margin-inline:auto;text-align:center}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
.muted{color:var(--muted)}.small{font-size:13.5px}.src{font-size:13px;color:var(--muted)}.date{font-size:15px;color:var(--muted);margin-top:18px}
.lead{font-size:clamp(18px,2.2vw,20px);line-height:1.6;color:var(--soft);max-width:38em}
.center .lead,.narrowc .lead,.center p,.narrowc p{margin-inline:auto}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;border-radius:11px;padding:15px 28px;text-align:center;border:none;cursor:pointer}
.btn-primary{background:var(--gold);color:var(--navy)}.btn-primary:hover{background:#d9ab00}.btn-light{background:var(--bg);color:var(--sage-deep)}
.btn-outline-light{background:transparent;color:var(--bg);border:1.5px solid rgba(255,249,239,.55)}
.btn.pill{border-radius:999px;padding:11px 22px;font-size:14px}
.btnrow{display:flex;gap:13px;flex-wrap:wrap}.btnrow.center{justify-content:center}
/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--bg)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;flex-direction:column;gap:2px;color:var(--text)}
.brand-name{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.01em}
.brand-sub{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;max-width:110px;line-height:1.5}
.nav{display:flex;align-items:center;gap:26px;font-size:14.5px}.nav a{color:var(--text)}.nav a.on{color:var(--sage-deep);font-weight:600}
.dark-head .hdr{background:var(--charcoal);border-color:rgba(255,249,239,.12)}
.dark-head .hdr .brand,.dark-head .nav a{color:var(--bg)}.dark-head .brand-sub{color:rgba(255,249,239,.6)}
/* hero */
.hero{position:relative;background:var(--charcoal);color:var(--bg);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 72% 26%,rgba(237,187,0,.28) 0%,rgba(20,35,53,0) 58%),linear-gradient(160deg,#142335 0%,#1e3a33 55%,#0f1a28 100%)}
.hero-in{position:relative;padding-top:74px;padding-bottom:84px}
.hero .kicker{color:var(--sage-light);letter-spacing:.28em}
.hero h1{color:var(--bg);font-size:clamp(46px,8.4vw,80px);line-height:.99;max-width:15ch;margin:18px 0 0;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;font-weight:400}
.hero .lead{color:#cbe3dd;margin-top:26px}
.askbar{margin-top:30px;max-width:660px;display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:999px;padding:8px 8px 8px 26px}
.askbar input{flex:1;border:0;background:transparent;font:inherit;font-size:16px;color:var(--text);outline:none}
.askbar button{width:46px;height:46px;border-radius:999px;background:var(--sage-deep);color:var(--bg);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.askhint{margin-top:15px;font-size:14px;color:rgba(255,249,239,.72)}
.herotrust{margin-top:26px;font-size:15px;color:#cbe3dd;max-width:54ch}.herotrust strong{color:var(--bg)}
/* chips, cards */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 17px;font-size:14px;color:var(--text)}
.chips.light .chip{background:transparent;border-color:rgba(255,249,239,.3);color:var(--bg)}
.chip.ghost{color:var(--sage-deep);font-weight:500;font-size:13px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-soft);color:var(--text)}
.card h3{margin-bottom:9px}.card p{font-size:16px;margin:0}
.cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:38px}
section.wrap{padding-top:78px}
.rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
/* stats */
.stats{background:var(--sage-soft);padding:44px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.stat{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1}
.statcard .statgrid{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left;margin-top:16px}
.statcard .stat{font-size:30px}.statcard .src{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* page hero */
.phero{background:linear-gradient(180deg,var(--cream-deep),var(--bg));border-bottom:1px solid var(--line);padding:62px 0 56px}
.phero h1{max-width:17ch}.phero .kicker{margin-bottom:18px;display:block}.phero .lead{margin-top:22px}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
/* prose */
.prose{padding-top:46px;padding-bottom:20px}
.prose h2{margin:38px 0 14px}.prose h3{margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 18px 20px;padding:0}.prose li{margin-bottom:8px;color:var(--soft)}
.prose a{font-weight:500;text-decoration:underline;text-underline-offset:2px}
.qfacts{background:var(--bg);border-left:4px solid var(--sage);border-radius:6px;padding:24px 26px;margin:30px 0}
.qfacts h3{font-size:20px;font-weight:500;margin:0 0 14px}.qfacts ul{margin:0 0 0 18px;font-size:16px}.qfacts li{margin-bottom:7px}.qfacts strong{color:var(--text);font-weight:600}
blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--sage);font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--sage-deep)}
.photo{height:340px;border-radius:16px;background:linear-gradient(150deg,var(--sage-soft),var(--cream-deep) 60%,#ede4d0);border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;margin-top:48px}
.photo.tall{height:400px;margin:0}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.quoteband{background:var(--cream-deep);margin-top:84px;padding:76px 0}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,32px);line-height:1.42;color:var(--text)}
/* faq */
.faq{margin-top:46px}.faq h2{margin-bottom:14px}
.faq details{border-bottom:1px solid var(--line)}.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-family:var(--serif);font-weight:500;font-size:20px;color:var(--text);display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--sage);font-family:var(--sans);font-size:19px;font-weight:500}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding:0 0 20px;font-size:16px}
.faq details[data-review]{background:rgba(255,224,102,.22);border-radius:8px;padding:0 12px}
.links{margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
/* band, footer */
.band{background:var(--sage);color:var(--bg);text-align:center;padding:66px 0;margin-top:54px}
.band h2{color:var(--bg);margin-bottom:14px}.band p{color:var(--sage-soft);max-width:46ch;margin:0 auto 26px}
.ftr{padding:48px 0 34px}.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14.5px}
.fgrid a{display:block;color:var(--text);margin:6px 0}.fgrid .kicker{margin-bottom:10px}
.fbar{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:13px}
/* gaps: real facts only the client can supply */
mark.gap{background:rgba(184,65,44,.10);color:#8a2f1f;border:1px dashed #b8412c;border-radius:6px;padding:0 6px;font-size:.88em;font-weight:500;font-family:var(--sans);font-style:normal}
table{border-collapse:collapse;width:100%;font-size:14.5px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.cardgrid{grid-template-columns:1fr 1fr}.hero-grid,.about-grid,.fgrid{grid-template-columns:1fr}.statgrid{grid-template-columns:1fr 1fr}.nav{gap:14px;font-size:13.5px}}
@media(max-width:600px){.cardgrid{grid-template-columns:1fr}.hdr-in{flex-direction:column;align-items:flex-start;gap:12px}.nav{flex-wrap:wrap}}

/* process block, provincial facts, verbatim reviews */
.process{margin:32px 0;padding:24px 28px;border:1px solid var(--line,#e5dccb);border-radius:16px;background:#fff}
.process h2{margin-top:0}
.process ol{padding-left:22px;margin:0}
.process li{margin:8px 0;line-height:1.55}
.process[data-review] {box-shadow:inset 4px 0 0 #f0d46a}
p[data-review="verify"]{background:#fff8dc;padding:8px 12px;border-radius:8px}
.review{margin:32px 0;padding:0 0 0 20px;border-left:3px solid var(--sage,#6d8b85)}
.review blockquote{margin:0 0 8px;font-family:Fraunces,Georgia,serif;font-size:1.15rem;line-height:1.5;font-style:italic}
.review figcaption{font-size:.9rem;color:#6b665c}

/* inline call to action and the valuation form */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:36px 0;padding:24px 28px;border-radius:16px;background:var(--sage,#6d8b85);color:#fff}
.cta h3{margin:4px 0 6px;color:#fff}.cta p{margin:0;opacity:.9}.cta .kicker{color:#fff;opacity:.8}.cta .btn{white-space:nowrap}
@media(max-width:640px){.cta{flex-direction:column;align-items:flex-start}}
.valform{padding:32px;margin:-30px 0 40px;background:#fff;border:1px solid var(--line,#e5dccb);border-radius:16px}
.valform h2{margin:6px 0 18px}
.valform label{display:block;font-size:.9rem;font-weight:500;margin:12px 0 4px}
.valform input,.valform select,.valform textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:inherit;border:1px solid var(--line,#e5dccb);border-radius:10px;background:#fff9ef}
.valform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.valform .row2{grid-template-columns:1fr}}
.valform button{margin-top:20px}

/* Ranola-style lead form fields */
.valform .field{margin-bottom:15px}
.valform .field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px}
.valform .field input,.valform .field select{width:100%;font-family:var(--sans);font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.valform .field input:focus,.valform .field select:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.valform .formnote{font-size:14px;color:var(--muted);text-align:center;margin:12px 0 0}
.formok{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--sage-soft);margin:-30px 0 40px}

/* header is the same tone on every page; only the home hero is dark */
.dark-head .hdr{background:var(--card);border-color:var(--line)}
.dark-head .hdr .brand,.dark-head .nav a{color:var(--text)}.dark-head .brand-sub{color:var(--muted)}

/* buttons: lift, shadow and a shine sweep on hover and press */
.btn{position:relative;overflow:hidden;transition:transform .12s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(20,35,53,.55)}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px -8px rgba(20,35,53,.5)}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .5s ease}
.btn-primary:hover::after{left:130%}
.btn-primary{box-shadow:0 8px 20px -14px rgba(237,187,0,.9)}

/* mega menu */
.nav{display:flex;align-items:center;gap:6px}
.nav .menu{position:relative}
.nav .menu>a .caret{font-size:11px;opacity:.6;margin-left:2px}
.mega{position:absolute;left:50%;transform:translateX(-50%);top:100%;padding-top:14px;display:none;z-index:50;width:max-content;max-width:calc(100vw - 48px)}
.nav .menu:hover .mega,.nav .menu:focus-within .mega{display:block}
.megagrid{display:grid;grid-auto-flow:column;gap:32px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 28px;box-shadow:var(--shadow-soft)}
.megagrid a{display:block;padding:5px 0;font-size:14px;color:var(--text);white-space:nowrap}
.megagrid a:hover{color:var(--sage)}
.megagrid .kicker{margin-bottom:6px}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:18px;cursor:pointer;color:var(--text)}
@media(max-width:900px){.navtoggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);padding:12px 24px}body.navopen .nav{display:flex}.mega{position:static;transform:none;display:block;padding:0 0 10px 12px}.megagrid{grid-auto-flow:row;border:0;box-shadow:none;padding:6px 0}.megagrid a{white-space:normal}.hdr-in{position:relative}}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);padding:14px 24px 0}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--sage)}.crumbs .sep{margin:0 8px;opacity:.5}

/* footer: full lists */
.fgrid{grid-template-columns:1.2fr 1fr 1fr 2fr}
.fwide .fhoods{columns:3;column-gap:18px}
.fwide .fhoods a{display:block;break-inside:avoid;font-size:13px;padding:2px 0}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fwide{grid-column:1/-1}.fwide .fhoods{columns:2}}

/* guide index: area tabs, A-Z, cards */
.gtabs{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.gtab{font:500 14px/1 Inter,sans-serif;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.gtab.on{background:var(--sage);border-color:var(--sage);color:#fff}
.gcount{font-size:12px;opacity:.65;background:rgba(0,0,0,.08);border-radius:999px;padding:2px 7px}
.gtab.on .gcount{background:rgba(255,255,255,.22);opacity:.9}
.galpha{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px}
.gl{font:500 13px/1 Inter,sans-serif;min-width:30px;padding:8px 6px;border-radius:7px;border:1px solid transparent;background:none;color:var(--text);cursor:pointer}
.gl:hover:not(:disabled){background:var(--cream-deep)}
.gl.on{background:var(--navy);color:#fff}
.gl.off{color:#918b7d;cursor:default}
.gguides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.gguides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gguides{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s;color:var(--text)}
.gcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(20,35,53,.55)}
.gphoto{display:flex;align-items:center;justify-content:center;height:150px;margin:14px 14px 0;border-radius:10px;background:var(--cream-deep);font-size:13px;text-align:center;padding:10px}
.gbody{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px}
.gname{font:600 21px/1.2 Fraunces,Georgia,serif}
.gdesc{font-size:14.5px;line-height:1.5;color:var(--soft)}
.gmore{font-size:14px;font-weight:600;color:var(--sage-deep);margin-top:2px}
.gcard.flat .gbody{padding:22px 22px 24px}
.gguides.open .gcard[hidden]{display:none}

/* calculators */
.calcwrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:820px){.calcwrap{grid-template-columns:1fr}}
.calcpanel,.calcout{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px}
.calcout{background:var(--sage-soft);position:sticky;top:96px}
.calcpanel .field{margin-bottom:16px}
.calcpanel label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:7px}
.rngval{font-size:14px;letter-spacing:0;text-transform:none;color:var(--sage-deep);font-weight:600}
.calcpanel input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.calcpanel input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.calcpanel input.rng{padding:0;border:0;background:none;accent-color:var(--sage);height:26px}
.calcnote{font-size:13px;line-height:1.55;color:var(--muted);margin:14px 0 0}
.calcnote.dim{opacity:.8}
.biglab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
.big{font:600 44px/1.1 Fraunces,Georgia,serif;margin:8px 0 20px;font-variant-numeric:tabular-nums}
.resrow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid rgba(20,35,53,.1);font-size:14.5px}
.resrow b{font-variant-numeric:tabular-nums;font-weight:600}
.resrow.total{border-top:2px solid var(--sage);font-weight:600;margin-top:4px}

/* free tools: icon tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 8px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:9px;padding:20px 18px 22px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--text);transition:border-color .15s,transform .15s,box-shadow .15s}
.tile:hover{border-color:var(--sage);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(20,35,53,.5)}
.tile svg{width:26px;height:26px;stroke:var(--sage);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile-name{font:600 17px/1.25 Fraunces,Georgia,serif}
.tile-blurb{font-size:13.5px;line-height:1.5;color:var(--muted)}
.tile-sec{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:18px}
.tiles .tile-sec:first-child{margin-top:0}
.tile-sec h3{font-size:15px;white-space:nowrap;margin:0}
.tile-sec i{flex:1;height:1px;background:var(--line);display:block}

/* free guides: ruled ledger */
.ledger{margin-top:10px}
.led-group{margin-bottom:34px}
.led-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--text)}
.led-head h3{font-size:19px;margin:0}
.led-head span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.led-row{display:grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:16px;align-items:baseline;padding:13px 8px 13px 4px;border-bottom:1px solid var(--line-soft);border-radius:8px;color:var(--text)}
.led-row:hover{background:var(--cream-deep)}
.led-n{font:14px/1 Fraunces,Georgia,serif;color:var(--muted);font-variant-numeric:tabular-nums}
.led-name{font-size:15.5px;line-height:1.45}
.led-arrow{color:var(--sage);font-size:17px;justify-self:end;transition:transform .15s}
.led-row:hover .led-arrow{transform:translateX(4px)}

/* hover sweep: a top bar that is invisible at rest and fills left to right on hover */
.tile,.gcard,a.card,.syscard,.quote,.contactcard,.nbcard{position:relative;overflow:hidden}
.tile::before,.gcard::before,a.card::before,.syscard::before,.quote::before,.contactcard::before,.nbcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--sage);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.33,0,.2,1);
}
.tile:hover::before,.tile:focus-visible::before,
.gcard:hover::before,.gcard:focus-visible::before,
a.card:hover::before,a.card:focus-visible::before,
.syscard:hover::before,.quote:hover::before,
.contactcard:hover::before,.contactcard:focus-visible::before,
.nbcard:hover::before,.nbcard:focus-within::before{transform:scaleX(1)}
a.card,a.contactcard{transition:transform .15s,box-shadow .15s}
a.card:hover,a.contactcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(20,35,53,.5)}
@media(prefers-reduced-motion:reduce){
  .tile::before,.gcard::before,a.card::before{transition:none}
  .tile:hover,.gcard:hover,a.card:hover,a.contactcard:hover{transform:none}
}

/* valuation page: hero split, sample card, proof, quotes */
.vhero{background:var(--cream-deep);padding:56px 0 64px}
.vhero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
@media(max-width:900px){.vhero-in{grid-template-columns:1fr;gap:30px}}
.vhero-copy h1{font-size:clamp(31px,4.2vw,50px);line-height:1.06;margin:12px 0 16px}
.vhero-copy h1 em{font-style:italic;color:var(--sage-deep)}
.vproof{list-style:none;display:flex;gap:30px;flex-wrap:wrap;padding:0;margin:24px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.vproof li{display:flex;flex-direction:column;gap:2px}
.vproof b{font:600 26px/1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums}
.vproof span{font-size:13px;color:var(--muted)}
.vhero-note{font-size:14px;color:var(--muted);margin:0;max-width:52ch}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 20px 44px -32px rgba(20,35,53,.6)}
.formhead{font-size:23px;margin:0 0 18px}
.formcard .field{margin-bottom:14px}
.formcard label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.formcard input,.formcard select{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.formcard input:focus,.formcard select:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.formcard .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.formcard .row2{grid-template-columns:1fr}}
.formnote{font-size:13.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.formok{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--sage-soft)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center;padding:56px 0}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.checks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.checks li{padding-left:28px;position:relative;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:9px;border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}
.hubtag{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sage-deep);margin-bottom:10px}
.valmock{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 22px 48px -34px rgba(20,35,53,.65)}
.val-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.val-head h4{font:600 19px/1.2 Fraunces,Georgia,serif;margin:4px 0 2px}
.val-head p{margin:0;font-size:13px;color:var(--muted)}
.hub-kick,.hub-lab{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.hub-badge{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--navy);padding:5px 10px;border-radius:999px;white-space:nowrap}
.val-val,.val-comps,.val-net,.val-top{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.val-top{border-bottom:0;padding-bottom:0}
.hub-num{font:600 30px/1.1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;margin:6px 0 10px}
.hub-num em{font-style:normal;color:var(--muted);font-size:22px}
.hub-meter{height:6px;border-radius:99px;background:var(--cream-deep);overflow:hidden}
.hub-meter i{display:block;height:100%;width:64%;background:var(--sage)}
.hub-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}
.hub-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:9px 0;font-size:14px;align-items:baseline}
.hub-row b{font-variant-numeric:tabular-nums}
.hub-row em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
.hub-netnum{font:600 23px/1.1 Fraunces,Georgia,serif;font-variant-numeric:tabular-nums;margin-top:6px}
.hub-netnum em{font-style:normal;font-size:13px;color:var(--muted)}
.hub-trow{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:14px}
.hub-trow i{width:7px;height:7px;border-radius:99px;background:var(--gold);flex:0 0 auto}
.hubcap{font-size:13px;color:var(--muted);margin-top:12px}

.tinted{background:var(--cream-deep);padding:56px 24px;max-width:none}
.tinted>.center,.tinted>.cardgrid{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.card .ic{width:34px;height:34px;border-radius:9px;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px/1 Fraunces,Georgia,serif;margin-bottom:14px}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:44px 0 18px;text-align:center}
@media(max-width:700px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.quote .stars{color:var(--gold-text);letter-spacing:2px;margin-bottom:10px}
.quote p{margin:0 0 14px;font-size:14.5px;line-height:1.6}
.quote .who{font-size:13px;font-weight:600;color:var(--muted)}
.vband{margin-top:0}

/* grouped FAQ accordions on the valuation page */
.faqgroup{margin:30px 0 0}
.faqgroup h3{font-size:16px;letter-spacing:.02em;padding-bottom:8px;border-bottom:2px solid var(--text);margin:0 0 4px}

/* core landing pages: systems grid, contact cards, hero illustration */
.syshead{font-size:clamp(26px,3.4vw,38px);margin:12px 0 10px}
.syshead em{font-style:italic;color:var(--sage-deep)}
.center-proof{justify-content:flex-start}
.sysgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:var(--maxw);margin:38px auto 26px}
@media(max-width:900px){.sysgrid{grid-template-columns:1fr}}
.syscard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.syscard svg{width:28px;height:28px;stroke:var(--sage);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sysnum{font:14px/1 Fraunces,Georgia,serif;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px}
.syscard h3{font-size:21px;margin:0;padding-bottom:10px;border-bottom:2px solid var(--sage-soft)}
.syscard p{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.sysline{font-family:Fraunces,Georgia,serif;font-style:italic;color:var(--sage-deep);font-size:15.5px;margin-top:auto!important;padding-top:6px}
.sysgrid[data-review]{box-shadow:none}
.graphicwrap{border-radius:16px;overflow:hidden;box-shadow:0 22px 48px -34px rgba(20,35,53,.7);--g-mesh:#7fd0aa;--g-glow:#edbb00;--g-glow-deep:#d9a800;--g-rim:#ffe3a0}
.graphicwrap svg{display:block;width:100%;height:auto}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:560px){.contactgrid{grid-template-columns:1fr}}
.contactcard{display:flex;flex-direction:column;gap:3px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:13px;color:var(--text)}
.contactcard b{font:600 17px/1.3 Fraunces,Georgia,serif;word-break:break-word}
a.contactcard:hover{border-color:var(--sage)}

/* home: split hero, neighbourhood notes, quote pair */
.hero-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:32px}}
.hero-split h1{max-width:none;margin:16px 0 20px}
.hero-split .lead{max-width:52ch;margin-top:0}
.hero-split .btnrow{margin-top:30px}
.herographic{border-radius:18px;overflow:hidden;box-shadow:0 26px 56px -34px rgba(0,0,0,.85);--g-mesh:#7fd0aa;--g-glow:#edbb00;--g-glow-deep:#d9a800;--g-rim:#ffe3a0}
.herographic svg{display:block;width:100%;height:auto}
@media(max-width:900px){.herographic{max-width:440px;margin:0 auto}}
.nbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}
@media(max-width:900px){.nbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.nbgrid{grid-template-columns:1fr}}
.nbcard{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.nbcard h3{font-size:20px;margin:0 0 10px;padding-bottom:9px;border-bottom:2px solid var(--sage-soft)}
.nbcard h3 a{color:var(--text)}
.nbcard h3 a:hover{color:var(--sage-deep)}
.nbcard p{margin:0;font-size:14.5px;line-height:1.6;color:var(--soft)}
.nbmore{margin-top:12px!important;font-size:14px;font-weight:600}
.nbmore a{color:var(--sage-deep)}
.homequotes{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:var(--maxw);margin:34px auto 26px}
@media(max-width:760px){.homequotes{grid-template-columns:1fr}}
.homequotes .quote{margin:0}
.homequotes blockquote{margin:0 0 14px;font:italic 400 17px/1.6 Fraunces,Georgia,serif;color:var(--text)}
.homequotes figcaption{font-size:13px;font-weight:600;color:var(--muted)}
.hero .btn-outline-light{border-color:rgba(255,255,255,.45);color:var(--bg)}
.hero .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* FAQ hub: answer-first capsules */
.faqjump{display:flex;gap:10px;flex-wrap:wrap;padding-top:26px;padding-bottom:6px}
.faqjump a{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 Inter,sans-serif;padding:11px 17px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text)}
.faqjump a:hover{border-color:var(--sage);color:var(--sage-deep)}
.faqsec{padding-top:34px}
.faqsech{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--sage-deep);padding-bottom:9px;border-bottom:2px solid var(--sage);margin-bottom:4px}
.faqitem{padding:30px 0;border-bottom:1px solid var(--line-soft)}
.faqitem:last-child{border-bottom:0}
.faqitem h3{font-size:clamp(20px,2.4vw,25px);line-height:1.25;margin:0 0 14px}
.faqitem p{margin:0 0 14px;color:var(--soft)}
.faqitem p.capsule{color:var(--text);font-size:17.5px;line-height:1.62;border-left:3px solid var(--gold);padding-left:18px}
.faqcta{margin:16px 0 0!important;font-size:14.5px;font-weight:600}
.faqcta a{color:var(--sage-deep)}
.faqcta a:hover{text-decoration:underline}


/* --- Nav breathing room. Stacked media queries had squeezed the top bar to a
   6px gap, which read as cramped and boxy. Tune spacing here, not in the
   media queries below. --- */
.hdr-in{gap:40px;padding-top:22px;padding-bottom:22px}
.nav{gap:4px;font-size:14.5px}
.nav>a,.menu>a{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;border-radius:999px;
  line-height:1;transition:background .15s,color .15s}
.nav>a:hover,.menu>a:hover{background:rgba(60,92,79,.08)}
.hdr .nav>a.on{background:rgba(60,92,79,.12)}
.nav .btn{margin-left:10px}
.megagrid{gap:44px;padding:28px 34px;border-radius:18px}
.megagrid a{padding:7px 0;font-size:14.5px}
.megagrid .kicker{margin-bottom:12px}
.mega{padding-top:10px}
@media(max-width:1100px){.hdr-in{gap:24px}.nav{font-size:13.5px}.nav>a,.menu>a{padding:8px 10px}}
@media(max-width:900px){.nav{gap:2px;font-size:15px}.nav>a,.menu>a{padding:12px 14px;border-radius:10px}}

/* Header: name hard left, everything else grouped hard right, no mid-word wrap */
.hdr-in{justify-content:flex-start}
.hdr-in .brand{margin-right:auto;flex:0 0 auto}
.hdr .nav{margin-left:auto;flex-wrap:nowrap}
.hdr .nav>a,.hdr .nav .menu>a{white-space:nowrap}
@media(max-width:900px){.hdr .nav{flex-wrap:wrap;margin-left:0}}

/* Stat rows stay centred when a card is withheld */
.statrow,.statgrid{grid-template-columns:repeat(auto-fit,minmax(150px,max-content));justify-content:space-evenly}
.statcard .statgrid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
@media(max-width:700px){.statrow,.statgrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}

/* Hero house: a real render when one is supplied, same footprint as the illustration */
.graphicwrap .heroimg,.herographic .heroimg{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 2px 4px rgba(20,35,53,.06),0 26px 60px -28px rgba(20,35,53,.45)}

/* CTA band fixes.
   1. p{color:var(--soft)} is an element selector, so it beat the white inherited from
      .cta and the body copy rendered dark grey on dark green. .cta p never set a colour.
   2. The pill is a flex child, so it shrank below its own text width and the label was
      clipped by .btn{overflow:hidden}. */
.cta p,.cta li,.cta .lead,.cta .muted,.cta small{color:#fff;opacity:.92}
.cta a:not(.btn){color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.cta .btn,.cta .btn.pill{flex:0 0 auto;white-space:nowrap}
.cta>div:first-child{min-width:0}
@media(max-width:640px){.cta .btn,.cta .btn.pill{width:100%}}

/* Same two faults anywhere else the panel is dark */
.band p,.band li,.band .muted{color:var(--sage-soft)}
.band .btn,.hero .btn,.btnrow .btn{flex:0 0 auto}

/* Neighbourhood and portrait photography */
.photo img,.gphoto img{display:block;width:100%;height:100%;object-fit:cover}
.photo img{border-radius:16px;aspect-ratio:16/9}
.photo.tall img{aspect-ratio:4/5;border-radius:16px}
.gphoto img{border-radius:10px;aspect-ratio:3/2}

/* The whole neighbourhood card is one <a>, so .prose a underlined the name and the entire
   description. Only the "Read the guide" line should read as a link. */
.prose .gcard,.prose .gcard:hover{text-decoration:none;font-weight:inherit}
.gcard .gname,.gcard .gdesc{text-decoration:none!important;font-weight:inherit}
.gcard .gname{color:var(--text);font-weight:600}
.gcard .gdesc{color:var(--soft)}
.gcard .gmore{text-decoration:none}
.gcard:hover .gmore{text-decoration:underline;text-underline-offset:2px}

/* Area page: street photo beside the map. Joel asked for a map on every area page. */
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.areagrid .photo{margin:0}
.areagrid .photo img{height:100%;min-height:300px;object-fit:cover}
.areamap{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:300px;background:var(--cream-deep)}
.areamap iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
@media(max-width:820px){.areagrid{grid-template-columns:1fr}.areagrid .photo img,.areamap{min-height:230px}}

/* One video per area, from the agent's own channel */
.areavideo{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--charcoal);margin:18px 0 8px}
.areavideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* --- Guide cards: tighten. (Olly Loom, 2026-09-17: "there's a gap between
   Acworth and Alpharetta ... get that tightened".) The photo band was a fixed
   150px holding a 3:2 image, so every card letterboxed its own photo and
   carried a dead strip above and below it. Where a real photo exists, the
   image now fills the band edge to edge; placeholder cards are untouched
   because :has(img) does not match them. Card height 359px -> 329px. --- */
.gphoto:has(img){padding:0;height:158px}
.gphoto img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
.gbody{gap:6px;padding:15px 18px 17px}
.gdesc{font-size:14px;line-height:1.45}


/* --- Rating strip. (Olly Loom, 2026-09-17: "I don't like the double line,
   can we just make it one line, and then can we also put, like, the stars
   somewhere? Obviously, without hurting AEO.") It was a four-cell grid with a
   big number over a caption, so every stat read as two lines and two of the
   four were placeholders that hide-gaps emptied. Now one line. The rating and
   the count stay as TEXT inside it, not baked into the stars, so an answer
   engine still reads "5 Google rating from 36 five star reviews" and the
   AggregateRating in the JSON-LD still has something on the page to match. --- */
.ratingline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;padding:26px 0}
.rstars{color:var(--gold, #e8b64c);font-size:17px;letter-spacing:2px;line-height:1}
.rtext{font-size:15.5px;color:var(--text)}
.rtext b{font-weight:600}
.rtext + .rtext::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
 background:var(--line);vertical-align:middle;margin-right:18px}
@media(max-width:600px){.ratingline{gap:8px 14px;padding:20px 0}.rtext{font-size:14.5px}
 .rtext + .rtext::before{margin-right:14px}}


/* --- Video library (Joel Boss call, 2026-09-17). Thumbnails that open YouTube,
   not twelve live players on one page. --- */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:10px 0 60px}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
.vcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(20,35,53,.55)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cream-deep)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(20,35,53,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;padding-left:3px}
.vbody{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.vplace{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);font-weight:600}
.vtitle{font:600 17px/1.3 Fraunces,Georgia,serif}


/* --- FAQ hub as drop-downs (Olly Loom 2026-09-17). Group rows closed by
   default; questions as quiet rows, not a wall of underlined links. --- */
.faqgroups{margin:10px auto 70px}
.faqgroup{border:1px solid var(--line);border-radius:14px;background:var(--card);margin:0 0 12px;overflow:hidden}
.faqgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;font:600 19px/1.2 Fraunces,Georgia,serif;color:var(--text)}
.faqgroup>summary::-webkit-details-marker{display:none}
.faqgroup>summary::after{content:"+";font:400 22px/1 var(--sans, sans-serif);color:var(--sage-deep);margin-left:auto}
.faqgroup[open]>summary::after{content:"\2212"}
.faqgroup .gcount{font:500 12.5px/1 var(--sans, sans-serif);color:var(--soft);background:var(--cream-deep);border-radius:999px;padding:5px 10px}
.faqgroup .faqindex{list-style:none;margin:0;padding:0 8px 10px;max-height:520px;overflow:auto;border-top:1px solid var(--line)}
.faqgroup .faqindex li{border-bottom:1px solid var(--line)}
.faqgroup .faqindex li:last-child{border-bottom:0}
.faqgroup .faqindex a{display:block;padding:12px 14px;color:var(--text);text-decoration:none;font-size:15px;line-height:1.45;border-radius:8px}
.faqgroup .faqindex a:hover{background:var(--cream-deep);color:var(--sage-deep)}

.hero-bg{background:
  radial-gradient(120% 90% at 72% 26%,rgba(237,187,0,.18) 0%,rgba(20,35,53,0) 58%),
  linear-gradient(90deg,rgba(15,26,38,.92) 0%,rgba(15,26,38,.74) 45%,rgba(15,26,38,.5) 100%),
  linear-gradient(180deg,rgba(15,26,38,.30) 0%,rgba(15,26,38,.20) 35%,rgba(15,26,38,.68) 100%),
  url('/assets/hero-bg.jpg') center 8%/cover no-repeat;
  background-color:#142335}
.hero .kicker{color:#cfe0d7}
@media(max-width:700px){.hero-bg{background-position:center 8%,center 8%,center 8%,center 22%}}