/* White Bear Lake Home Inspection — "LAKESIDE LUXE" (DARK). Approved Design 08, NO SERIF.
   Deep teal-black + brass on near-black teal. Premium SANS only: Hanken Grotesk (display+body),
   Archivo for big display. Asymmetric luxe layout, scroll-reveal, custom inline SVG.
   White Bear Lake = historic NE-metro lake city, older housing stock. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --bg:#0a1f22;--panel:#11343a;--panel2:#16454a;--line:#234f53;--line2:#2f5f63;
  --brass:#c9a86a;--brass2:#dcc28a;--teal:#7fae9f;--teal2:#9fd0bf;
  --ink:#e7efee;--text:#e7efee;--mut:#a9c0bd;--mut2:#8aa3a0;
}
body{font-family:'Hanken Grotesk',-apple-system,sans-serif;background:var(--bg);
  color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.65}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:'Hanken Grotesk','Archivo',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}

/* subtle topographic line texture (dark) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' stroke='%237fae9f' stroke-width='1' opacity='0.06'%3E%3Cpath d='M0 200 Q100 160 200 200 T400 200'/%3E%3Cpath d='M0 230 Q100 190 200 230 T400 230'/%3E%3Cpath d='M0 170 Q100 130 200 170 T400 170'/%3E%3Cpath d='M0 260 Q100 220 200 260 T400 260'/%3E%3Cpath d='M0 140 Q100 100 200 140 T400 140'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 100% 80% at 50% 100%,#000 20%,transparent 75%)}
body>*{position:relative;z-index:1}

/* eyebrow — brass letterspaced uppercase */
.eyebrow{font-family:'Hanken Grotesk',sans-serif;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--brass);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--brass)}

/* top bar */
.util{background:#071719;color:#9fb6b3;font-size:.8rem;border-bottom:1px solid var(--line)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 0;flex-wrap:wrap;gap:6px}
.util a{color:var(--brass2);font-weight:700}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,31,34,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,52px)}
.brand{display:flex;align-items:center;gap:13px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.22rem;color:#fff}
.brand .mk{width:42px;height:42px}
.brand .mk svg{width:42px;height:42px}
.brand small{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2);font-weight:600;margin-top:2px}
.menu{display:flex;gap:30px;font-size:.92rem;font-weight:500}
.menu a{color:#bcd0cd;position:relative;padding:5px 0;transition:color .2s}
.menu a:hover{color:var(--brass)}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brass);transition:width .25s}
.menu a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--brass);color:#0a1f22;font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;font-size:.9rem;padding:13px 26px;border:0;border-radius:2px;cursor:pointer;transition:transform .2s,box-shadow .25s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,168,106,.22);background:var(--brass2)}
.btn.brass{background:transparent;border:1px solid var(--brass);color:var(--brass);border-radius:2px;padding:12px 26px}
.btn.brass:hover{background:var(--brass);color:#0a1f22}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);box-shadow:none}
.btn.lg{padding:16px 34px;font-size:1rem}
.btn.lg.brass{padding:15px 34px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:#0a1f22;
  padding:10px 18px;border-radius:0 0 4px 0;font-weight:700;font-size:.9rem}
.skip:focus{left:0}

/* mobile nav toggle */
.navtoggle{display:none;width:46px;height:46px;background:transparent;border:1px solid var(--line2);
  border-radius:2px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:20px;height:2px;background:var(--brass);border-radius:2px;transition:.25s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:880px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,31,34,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    padding:8px clamp(20px,4vw,52px) 18px}
  .menu.open{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .navtoggle{display:inline-flex}
  .nav .btn.brass{display:none}
}

/* HERO — dark luxe split; asymmetric 2-col grid */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(50px,6vw,88px);overflow:hidden;min-height:430px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,68px);align-items:center}
.hero .htext .rv{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero .eyebrow.rv{animation-delay:.1s}.hero h1.rv{animation-delay:.26s}.hero .sub.rv{animation-delay:.46s}
.hero .acts.rv{animation-delay:.62s}.hero .trust.rv{animation-delay:.8s}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1{font-size:clamp(2.6rem,5vw,3.75rem);max-width:15ch;margin:22px 0 0;color:#fff;font-weight:700;line-height:1.05}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero .sub{font-size:clamp(1.06rem,1.4vw,1.24rem);max-width:48ch;margin:24px 0 32px;color:var(--mut)}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .acts .btn.ghost{border-color:var(--brass);color:var(--brass);background:transparent}
.hero .acts .btn.ghost:hover{background:rgba(201,168,106,.1)}
.hero .trust{margin-top:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero .trust .stars{color:var(--brass);font-size:1.15rem;letter-spacing:2px}
.hero .trust span{font-family:'Hanken Grotesk',sans-serif;font-size:.84rem;color:var(--mut);font-weight:500}
.hero .himg{position:relative}
.hero .himg img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);background:linear-gradient(200deg,#16454a,#0a1f22 70%)}
.hero .himg::before{content:"";position:absolute;inset:-14px;border:1px solid var(--brass);border-radius:8px;z-index:-1;opacity:.55}
.hero .himg::after{content:"24hr report";position:absolute;right:18px;top:18px;background:var(--bg);
  border:1px solid var(--brass);color:var(--brass);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 13px;border-radius:2px}
.hero .himg .chip{position:absolute;left:-18px;bottom:30px;background:var(--panel);border:1px solid var(--brass);border-radius:4px;
  padding:16px 20px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.hero .himg .chip b{display:block;font-size:1.7rem;color:var(--brass);font-weight:700}
.hero .himg .chip span{font-family:'Hanken Grotesk',sans-serif;font-size:.74rem;color:var(--mut)}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}.hero .himg{order:-1}.hero .himg img{aspect-ratio:16/10}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* sections */
.sec{padding:clamp(64px,8vw,118px) 0;position:relative}
.sec.mist{background:var(--panel)}
.sec.deep{background:#071719;color:var(--text)}
.shead{max-width:720px}
.shead.mid{margin:0 auto;text-align:center}.shead.mid .eyebrow{justify-content:center}
.sec h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:16px 0 0;color:#fff;font-weight:700}
.sec h2 em{font-style:normal;color:var(--brass)}
.sec.deep h2 em,.sec.mist h2 em{color:var(--brass)}
.lead{margin-top:20px;font-size:1.12rem;color:var(--mut);line-height:1.75}

/* ===== SIGNATURE: era timeline (heritage housing) ===== */
.eras{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.era{position:relative;border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:4px;
  background:var(--panel2);padding:26px 24px;transition:transform .25s,border-color .25s}
.era:hover{transform:translateY(-5px);border-color:var(--brass)}
.era .yr{font-family:'Archivo','Hanken Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:var(--brass);letter-spacing:-.02em}
.era h4{font-size:1.06rem;color:#fff;margin-top:8px}
.era p{margin-top:10px;font-size:.9rem;color:var(--mut);line-height:1.65}
@media(max-width:880px){.eras{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.eras{grid-template-columns:1fr}}

/* ===== Common White Bear Lake issues grid ===== */
.issues{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.issue{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:26px 24px;
  border-left:3px solid var(--brass);transition:transform .25s,border-color .25s}
.issue:hover{transform:translateX(4px);border-color:var(--brass)}
.issue h4{font-size:1.12rem;color:#fff}
.issue p{margin-top:9px;font-size:.92rem;color:var(--mut);line-height:1.65}
@media(max-width:880px){.issues{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.issues{grid-template-columns:1fr}}

/* service cards */
.svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-top:56px}
.svc{background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.svc:hover{transform:translateY(-7px);box-shadow:0 28px 56px rgba(0,0,0,.4);border-color:var(--brass)}
.svc .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc:hover .ph img{transform:scale(1.07)}
.svc .no{position:absolute;top:12px;left:12px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;color:var(--brass);background:rgba(7,23,25,.78);backdrop-filter:blur(4px);padding:3px 11px;border-radius:2px}
.svc .bd{padding:24px}
.svc h3{font-size:1.3rem;color:#fff}
.svc p{margin-top:9px;color:var(--mut);font-size:.95rem}
.svc .go{margin-top:16px;display:inline-flex;gap:8px;align-items:center;color:var(--brass);font-weight:700;font-size:.86rem}
.svc:hover .go{gap:13px}

/* feature split */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;margin-top:58px}
.feat .im{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.42);border:1px solid var(--line)}
.feat .im img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat .im .tag{position:absolute;left:16px;bottom:16px;background:var(--brass);color:#0a1f22;font-weight:700;font-size:.84rem;padding:9px 16px;border-radius:2px}
.feat p{margin-top:16px;color:var(--mut);line-height:1.8}
.feat .pts{margin-top:24px;display:grid;gap:13px}
.feat .pts li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;color:var(--text)}
.feat .pts li::before{content:"";width:22px;height:22px;flex:none;margin-top:1px;border-radius:50%;
  background:var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;border:1px solid var(--line)}
@media(max-width:860px){.feat{grid-template-columns:1fr}}

/* process — timeline */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:58px;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;background:var(--brass);opacity:.35}
.step{text-align:center;position:relative}
.step .n{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--bg);border:2px solid var(--brass);color:var(--brass);display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.25rem;position:relative;z-index:1}
.step h4{font-size:1.12rem;color:#fff}
.step p{margin-top:9px;font-size:.92rem;color:var(--mut)}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}}

/* quote */
.quotebox{margin-top:46px;border:1px solid var(--brass);border-radius:6px;overflow:hidden;box-shadow:0 22px 54px rgba(0,0,0,.4);background:#fff}
.quotecap{display:flex;justify-content:space-between;padding:15px 22px;background:#071719;color:#bcd0cd;font-size:.82rem;letter-spacing:.04em}
.quotecap b{color:var(--brass2)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}
.gal figure{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1;background:var(--panel);border:1px solid var(--line)}
.gal figure.tall{grid-row:span 2;aspect-ratio:auto}.gal figure.wide{grid-column:span 2;aspect-ratio:2}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;left:12px;bottom:11px;font-family:'Hanken Grotesk',sans-serif;font-size:.66rem;
  letter-spacing:.04em;color:#0a1f22;background:var(--brass);padding:4px 10px;border-radius:2px;opacity:0;transition:opacity .3s;font-weight:700}
.gal figure:hover figcaption{opacity:1}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}.gal figure.wide{grid-column:span 2}}

/* reviews/gbp */
.gbp{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:32px}
.stars{color:var(--brass);font-size:1.4rem;letter-spacing:2px}

/* faq */
.faq{max-width:820px;margin:50px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:1.14rem;color:#fff;padding:20px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;color:var(--brass);font-size:1.45rem}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 20px;color:var(--mut);line-height:1.75}

/* CTA */
.ctaband{position:relative;border-radius:8px;overflow:hidden;padding:clamp(48px,7vw,92px);text-align:center;color:#fff;
  background:linear-gradient(120deg,#11343a,#0a1f22);border:1px solid var(--line)}
.ctaband .eyebrow{color:var(--brass)}
.ctaband h2{color:#fff;font-size:clamp(2.1rem,4.8vw,3.4rem);max-width:18ch;margin:14px auto 0;font-weight:700}
.ctaband h2 em{color:var(--brass);font-style:normal}
.ctaband p{margin:18px auto 32px;max-width:48ch;color:var(--mut);font-size:1.1rem}

/* footer */
footer{background:#071719;color:var(--mut);padding:clamp(60px,8vw,96px) 0 30px;border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:44px}
footer h5{font-family:'Hanken Grotesk',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;font-weight:700}
footer .brand{color:#fff;font-size:1.22rem;margin-bottom:14px;font-family:'Hanken Grotesk',sans-serif;font-weight:700}
footer li{margin-bottom:10px}
footer a:hover{color:var(--brass)}
footer .legal{font-family:'Hanken Grotesk',sans-serif;border-top:1px solid var(--line);margin-top:46px;padding-top:24px;font-size:.76rem;color:var(--mut2);text-align:center}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* ===== /answers AEO hub ===== */
.ans-hub{display:grid;gap:14px;margin-top:50px}
.ans-cat{margin-top:40px}
.ans-cat:first-child{margin-top:0}
.ans-cat h3{font-family:'Hanken Grotesk',sans-serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px;font-weight:700}
.ans-q{border:1px solid var(--line);border-radius:4px;background:var(--panel2);margin-bottom:12px;overflow:hidden;transition:border-color .25s}
.ans-q[open]{border-color:var(--brass)}
.ans-q summary{cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:1.12rem;color:#fff;
  padding:20px 24px;list-style:none;position:relative}
.ans-q summary::-webkit-details-marker{display:none}
.ans-q summary::after{content:"+";position:absolute;right:24px;color:var(--brass);font-size:1.5rem;font-weight:300}
.ans-q[open] summary::after{content:"\2212"}
.ans-q .ans{padding:0 24px 22px;color:var(--mut);line-height:1.75}
.ans-q .ans a{color:var(--brass);font-weight:600}
/* answers detail page */
.ans-page{max-width:760px;margin:0 auto}
.ans-page .qbig{font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;font-family:'Hanken Grotesk','Archivo',sans-serif;line-height:1.1;font-weight:700}
.ans-page .abody{margin-top:24px;font-size:1.12rem;color:var(--mut);line-height:1.8}
.ans-related{margin-top:50px;border-top:1px solid var(--line);padding-top:30px}
.ans-related h4{font-family:'Hanken Grotesk',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;font-weight:700}
.ans-related a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--mut);transition:color .2s,padding-left .2s}
.ans-related a:hover{color:var(--brass);padding-left:6px}

/* ===== deep guide / article ===== */
.article{max-width:780px;margin:0 auto}
.article .lede{font-size:1.22rem;color:var(--text);line-height:1.7;margin-bottom:14px}
.article h2{font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;margin:44px 0 14px;letter-spacing:-.01em;font-weight:700}
.article h2 em{color:var(--brass);font-style:normal}
.article p{color:var(--mut);line-height:1.85;margin-bottom:16px;font-size:1.04rem}
.article .checklist{margin:30px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:28px 30px}
.article .checklist h3{font-family:'Hanken Grotesk',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:18px;font-weight:700}
.article .checklist li{display:flex;gap:13px;align-items:flex-start;padding:9px 0;color:var(--text)}
.article .checklist li::before{content:"";width:18px;height:18px;flex:none;margin-top:3px;border-radius:3px;
  background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a1f22' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.article .gcta{margin-top:40px;border:1px solid var(--brass);border-radius:6px;background:
  radial-gradient(120% 120% at 50% 0%,rgba(201,168,106,.12),transparent 60%),var(--panel2);padding:32px 34px;text-align:center}
.article .gcta p{color:var(--text);font-size:1.1rem;margin-bottom:20px}
.article .toc{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:22px 26px;margin:30px 0}
.article .toc h4{font-family:'Hanken Grotesk',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:12px;font-weight:700}
.article .toc a{display:block;color:var(--mut);padding:6px 0;font-size:.96rem;transition:color .2s}
.article .toc a:hover{color:var(--brass)}

/* responsive quote iframe */
.qframe{height:auto;min-height:780px}
@media(max-width:760px){.qframe{min-height:clamp(560px,118vw,780px)}}

/* honor reduced-motion */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .htext .rv{opacity:1;transform:none;animation:none}
  .hero .himg .chip b{animation:none}
  html{scroll-behavior:auto}
}

/* ≤480px fine-tuning */
@media(max-width:480px){
  .sec{padding:clamp(46px,12vw,62px) 0}
  .util .wrap{flex-direction:column;align-items:flex-start;gap:3px;font-size:.74rem}
  footer .cols{grid-template-columns:1fr}
  .hero{padding:48px 0 36px;min-height:0}
  .btn.lg{padding:14px 24px;font-size:.95rem}
  .quotecap{flex-direction:column;gap:4px}
}