/* ================================================================
   Home Inspection St. Paul MN — "Architectural Brutalist-Refined"
   Charcoal + concrete-cream + oxidized-copper · Archivo + Public Sans
   Distinct from every other homeinspector site. No mono, no serif.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --char:#1c1c1a;        /* charcoal base */
  --char-2:#262624;      /* raised surface */
  --char-3:#302f2c;      /* card surface */
  --cream:#ece7dd;       /* concrete cream (primary text) */
  --cream-mute:#b9b3a7;  /* muted cream */
  --cream-dim:#8a857b;   /* dim */
  --copper:#3f7d6e;      /* oxidized-copper accent */
  --copper-2:#52a08d;    /* brighter copper for hover/links */
  --copper-soft:rgba(63,125,110,.16);
  --line:rgba(236,231,221,.14);
  --line-2:rgba(236,231,221,.26);
  --warn:#c47b54;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r:4px;--r-lg:8px;            /* brutalist = tight radii */
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Public Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--char);color:var(--cream);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--copper-2);text-decoration:none;}
a:hover{color:var(--cream);}

/* Blank-gap guard: reveal only hides under .js */
.reveal{opacity:1;}
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
html.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important;transition:none;}}

.skip{position:absolute;left:-9999px;top:0;background:var(--copper);color:#fff;padding:10px 16px;z-index:200;}
.skip:focus{left:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);}
.eyebrow{font-family:'Archivo',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--copper-2);}
.muted{color:var(--cream-mute);}

/* Brutalist display type */
h1,h2,h3,h4{font-family:'Archivo',sans-serif;line-height:1.02;letter-spacing:-.02em;color:var(--cream);text-transform:uppercase;font-weight:800;}
h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:900;}
h2{font-size:clamp(1.7rem,4vw,2.8rem);}
h3{font-size:1.25rem;letter-spacing:-.01em;}
p{color:var(--cream-mute);}
.lead{font-size:1.16rem;color:var(--cream);max-width:64ch;}

/* Heavy structural rules = the motif */
.rule{height:3px;background:var(--cream);width:64px;margin:var(--s4) 0;}
.rule.copper{background:var(--copper);}

/* Buttons — square, bold, structural */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:var(--r);
  border:2px solid transparent;cursor:pointer;min-height:50px;transition:transform .15s var(--ease),background .15s,color .15s,border-color .15s;}
.btn-primary{background:var(--copper);color:#0f1714;}
.btn-primary:hover{background:var(--copper-2);color:#0f1714;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper-2);}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line-2);color:var(--copper-2);background:var(--copper-soft);border-radius:var(--r);}
/* Rotating pill — cycles through cities & systems */
.pill-rotator{padding-top:5px;padding-bottom:5px;}
.pill-rotator .pdot{width:7px;height:7px;background:var(--copper-2);flex-shrink:0;}
.pill-rotator .rot{display:block;height:1.05em;line-height:1.05em;overflow:hidden;}
.pill-rotator .rot-track{display:flex;flex-direction:column;}
.pill-rotator .rot-track b{display:block;height:1.05em;line-height:1.05em;font-weight:700;white-space:nowrap;}
html.js .pill-rotator .rot-track{animation:pillRotate 26s steps(1) infinite;}
@keyframes pillRotate{
  0%,6%{transform:translateY(0);}
  8.33%,14.33%{transform:translateY(-1.05em);}
  16.66%,22.66%{transform:translateY(-2.1em);}
  25%,31%{transform:translateY(-3.15em);}
  33.33%,39.33%{transform:translateY(-4.2em);}
  41.66%,47.66%{transform:translateY(-5.25em);}
  50%,56%{transform:translateY(-6.3em);}
  58.33%,64.33%{transform:translateY(-7.35em);}
  66.66%,72.66%{transform:translateY(-8.4em);}
  75%,81%{transform:translateY(-9.45em);}
  83.33%,89.33%{transform:translateY(-10.5em);}
  91.66%,97.66%{transform:translateY(-11.55em);}
  100%{transform:translateY(-12.6em);}
}
@media (prefers-reduced-motion:reduce){html.js .pill-rotator .rot-track{animation:none;}}

/* Header */
.nav{position:sticky;top:0;z-index:100;background:rgba(28,28,26,.86);backdrop-filter:saturate(140%) blur(12px);border-bottom:2px solid var(--line);}
.nav-in{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;column-gap:var(--s5);min-height:70px;padding-top:var(--s3);padding-bottom:var(--s3);}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;white-space:nowrap;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--cream);font-size:clamp(.9rem,1.4vw,1.05rem);}
.logo span{white-space:nowrap;}
.logo .mk{width:34px;height:34px;flex-shrink:0;}
.nav-links{display:flex;flex-wrap:nowrap;gap:clamp(10px,1.4vw,var(--s4));align-items:center;white-space:nowrap;flex:0 1 auto;}
.nav-links a{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(.72rem,.95vw,.82rem);letter-spacing:.04em;text-transform:uppercase;color:var(--cream-mute);white-space:nowrap;}
.nav-links a:hover{color:var(--cream);}
.nav-cta{display:flex;gap:var(--s4);align-items:center;flex-shrink:0;}
.nav-phone{display:inline-flex;align-items:center;font-family:'Archivo',sans-serif;font-weight:700;color:var(--cream);letter-spacing:.02em;}
.nav-phone:hover{color:var(--copper-2);}
/* Compact header CTA — tighter than the hero/in-page .btn */
.nav .btn,.nav-cta .btn{padding:9px var(--s4);min-height:0;font-size:.8rem;gap:var(--s2);line-height:1;}
.burger{display:none;background:none;border:2px solid var(--line-2);border-radius:var(--r);width:46px;height:46px;color:var(--cream);}
.mnav{display:none;flex-direction:column;gap:2px;padding:8px var(--s5) 16px;border-top:2px solid var(--line);}
.mnav a{font-family:'Archivo',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:11px 0;color:var(--cream-mute);font-size:.86rem;}

/* Sections */
section{padding:var(--s9) 0;}
.sec-head{max-width:70ch;margin-bottom:var(--s7);}
.sec-head p{margin-top:var(--s3);}

/* Full-bleed hero */
.hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;border-bottom:3px solid var(--copper);overflow:hidden;}
.hero .bg{position:absolute;inset:0;z-index:0;}
.hero .bg img{width:100%;height:100%;object-fit:cover;}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,28,26,.34) 0%,rgba(28,28,26,.72) 55%,rgba(28,28,26,.95) 100%);}
.hero .inner{position:relative;z-index:2;padding:var(--s9) 0 var(--s8);width:100%;}
.hero h1{max-width:18ch;margin:var(--s4) 0 var(--s5);}
.hero h1 b{color:var(--copper-2);font-weight:900;}
.hero .lead{margin-bottom:var(--s6);}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;}
.hero-meta{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s5);font-family:'Archivo',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-mute);}
.hero-meta span{display:flex;align-items:center;gap:8px;}
.hero-meta i{width:8px;height:8px;background:var(--copper-2);font-style:normal;}

/* Hero architectural blueprint overlay — drawn, technical, on-brand */
.hero-blueprint{position:absolute;z-index:1;right:clamp(24px,6vw,120px);top:50%;transform:translateY(-50%);
  width:clamp(340px,36vw,500px);height:auto;color:rgba(236,231,221,.34);pointer-events:none;
  filter:drop-shadow(0 0 22px rgba(63,125,110,.18));}
.hero-blueprint .bp-grid{stroke:rgba(236,231,221,.07);}
.hero-blueprint .bp-house{color:rgba(236,231,221,.5);}
.hero-blueprint .bp-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);}
html.js .hero-blueprint .bp-draw{animation:bpDraw 1.4s var(--ease) forwards;}
.bp-roof{--len:400;animation-delay:.25s;}
.bp-walls{--len:760;animation-delay:.55s;}
.bp-floor{--len:228;animation-delay:.9s;}
.bp-chimney{--len:120;animation-delay:.7s;}
.bp-door{--len:160;animation-delay:1.05s;}
.bp-win{--len:130;animation-delay:1.15s;}
.bp-footing{--len:252;animation-delay:1.2s;}
.hero-blueprint .bp-note{opacity:0;}
html.js .hero-blueprint .bp-note{animation:bpFade .5s var(--ease) forwards;animation-delay:1.45s;}
@keyframes bpDraw{to{stroke-dashoffset:0;}}
@keyframes bpFade{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .hero-blueprint .bp-draw{stroke-dashoffset:0;animation:none;}
  .hero-blueprint .bp-note{opacity:1;animation:none;}
}
@media (max-width:980px){.hero-blueprint{display:none;}}

/* Stat band */
.statband{background:var(--char-2);border-top:2px solid var(--line);border-bottom:2px solid var(--line);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);}
.stat .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.6rem;line-height:1;color:var(--cream);}
.stat .n b{color:var(--copper-2);}
.stat .l{margin-top:var(--s2);color:var(--cream-mute);font-size:.9rem;}

/* Cards / grids */
.grid{display:grid;gap:var(--s4);}
.card{background:var(--char-3);border:1px solid var(--line);border-left:3px solid var(--copper);border-radius:var(--r);padding:var(--s5);}
.svc-grid{grid-template-columns:repeat(3,1fr);}
.svc{display:block;color:inherit;transition:transform .15s var(--ease),border-color .15s;}
.svc:hover{transform:translateY(-3px);border-left-color:var(--copper-2);}
.svc .ic{width:42px;height:42px;color:var(--copper-2);margin-bottom:var(--s4);overflow:visible;}
/* Animated service icons — subtle, looping, themed */
.ic .a-radar{transform-box:fill-box;transform-origin:center;animation:icSpin 8s linear infinite;}
.ic .a-pulse{transform-box:fill-box;transform-origin:center;animation:icPulse 2.8s var(--ease) infinite;}
.ic .a-pulse2{transform-box:fill-box;transform-origin:center;animation:icPulse 2.8s var(--ease) infinite .5s;}
.ic .a-pulse3{transform-box:fill-box;transform-origin:center;animation:icPulse 2.8s var(--ease) infinite 1s;}
.ic .a-scan{animation:icScan 2.6s var(--ease) infinite;}
.ic .a-drip{animation:icDrip 3s var(--ease) infinite;}
.ic .a-bob{transform-box:fill-box;transform-origin:center;animation:icBob 3.4s var(--ease) infinite;}
.ic .a-build{transform-box:fill-box;transform-origin:bottom;animation:icBuild 3.6s var(--ease) infinite;}
.ic .a-flow{stroke-dasharray:5 7;animation:icFlow 1.6s linear infinite;}
@keyframes icSpin{to{transform:rotate(360deg);}}
@keyframes icPulse{0%,100%{opacity:.35;transform:scale(.82);}50%{opacity:1;transform:scale(1.08);}}
@keyframes icScan{0%,100%{transform:translateX(-3px);}50%{transform:translateX(3px);}}
@keyframes icDrip{0%{transform:translateY(-1px);opacity:.5;}50%{opacity:1;}100%{transform:translateY(2px);opacity:.5;}}
@keyframes icBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-2px) rotate(-4deg);}}
@keyframes icBuild{0%,100%{transform:scaleY(.92);}50%{transform:scaleY(1);}}
@keyframes icFlow{to{stroke-dashoffset:-24;}}
@media (prefers-reduced-motion:reduce){.ic [class^=a-]{animation:none!important;}}
.svc h3{margin-bottom:var(--s2);}
.svc p{font-size:.96rem;}
.svc .more{display:inline-block;margin-top:var(--s3);font-family:'Archivo',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-2);}

/* Feature band (image + text) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;}
.feature.flip .feat-media{order:2;}
.feat-media{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.feat-media img{width:100%;}

/* Gallery — labelled, clickable, spaced */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.ghome{display:block;color:inherit;}
.ghome figure{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--char-3);transition:transform .2s var(--ease),border-color .2s;}
.ghome:hover figure{transform:translateY(-4px);border-color:var(--copper);}
.ghome img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
.ghome:hover img{transform:scale(1.05);}
.ghome figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s4);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);
  background:linear-gradient(180deg,rgba(28,28,26,0),rgba(28,28,26,.9) 75%);}
.ghome .glabel{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.86rem;color:var(--cream);}
.ghome .gtag{font-family:'Archivo',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-2);background:var(--copper-soft);border:1px solid var(--line);border-radius:var(--r);padding:3px 7px;white-space:nowrap;}

/* Breadcrumb */
.crumb{font-family:'Archivo',sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);padding:var(--s5) 0 0;}
.crumb a{color:var(--cream-mute);}
.crumb a:hover{color:var(--copper-2);}

/* AEO direct-answer block */
.aeo{background:var(--char-2);border-left:3px solid var(--copper);border-radius:var(--r);padding:var(--s5);margin:var(--s5) 0;}
.aeo .q{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cream);margin-bottom:var(--s2);}

/* Article body */
.prose{max-width:72ch;}
.prose p{margin:var(--s4) 0;color:var(--cream-mute);}
.prose h2{margin:var(--s7) 0 var(--s3);}
.prose h3{margin:var(--s5) 0 var(--s2);}
.prose ul,.prose ol{margin:var(--s4) 0 var(--s4) var(--s5);color:var(--cream-mute);}
.prose li{margin:var(--s2) 0;}
.prose a{text-decoration:underline;}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0;}
.faq summary{cursor:pointer;font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--cream);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--copper-2);font-size:1.5rem;line-height:1;}
.faq details[open] summary::after{content:'\2212';}
.faq p{margin-top:var(--s3);}

/* Instant Quote — tall, eager, never clipped */
.quote-sec{background:radial-gradient(120% 120% at 50% -10%,var(--copper-soft),transparent 60%);}
.quote-head{max-width:64ch;margin:0 auto var(--s6);text-align:center;}
.quote-head .lead{margin:var(--s3) auto 0;}
.quote-frame{max-width:820px;margin:0 auto;}
.quote-embed{border:2px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--char-3);min-height:900px;}
.quote-embed iframe{width:100%;height:900px;border:0;display:block;}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border:2px solid var(--copper);border-radius:var(--r);padding:var(--s8) var(--s7);text-align:center;}
.cta-band .bg{position:absolute;inset:0;z-index:0;}
.cta-band .bg img{width:100%;height:100%;object-fit:cover;}
.cta-band .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,28,26,.82),rgba(28,28,26,.94));}
.cta-band .inner{position:relative;z-index:2;}
.cta-band .hero-cta{justify-content:center;margin-top:var(--s5);}

/* TBD marker (honest placeholder) */
.tbd{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px dashed var(--warn);border-radius:var(--r);padding:2px 7px;}

/* Footer */
.footer{border-top:3px solid var(--copper);background:var(--char-2);padding:var(--s8) 0 var(--s7);color:var(--cream-dim);font-size:.9rem;}
.footer a{color:var(--cream-mute);}
.footer a:hover{color:var(--copper-2);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s7);}
.footer h4{font-family:'Archivo',sans-serif;color:var(--cream);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s3);}
.footer ul{list-style:none;display:grid;gap:9px;}
.footer .id-link{color:var(--copper-2);font-weight:600;}

/* Sticky mobile CTA */
.mobile-cta{position:fixed;bottom:0;left:0;right:0;display:none;gap:8px;z-index:90;
  padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  background:rgba(28,28,26,.95);backdrop-filter:blur(10px);border-top:2px solid var(--copper);}
.mobile-cta .btn{flex:1;justify-content:center;}

/* Responsive */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5);}
}
@media (max-width:1024px){
  .nav-links{display:none;}
  .burger{display:inline-flex;align-items:center;justify-content:center;}
}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .feature,.feature.flip{grid-template-columns:1fr;gap:var(--s5);}
  .feature.flip .feat-media{order:0;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .nav-cta .nav-phone{display:none;}
}
@media (max-width:600px){
  body{padding-bottom:76px;font-size:16px;}
  .mobile-cta{display:flex;}
  .svc-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr;gap:var(--s4);}
  .hero{min-height:auto;}
  .quote-embed,.quote-embed iframe{min-height:1100px;height:1100px;}
  section{padding:var(--s8) 0;}
  .cta-band{padding:var(--s7) var(--s5);}
}