/* ============================================================
   HARRISON CONCRETE COATINGS
   styles.css
   Palette: slate #53565D / deep #3A3D43 / cream #F3EDE1 / amber #C2691F
   ============================================================ */

:root{
  --cream:#F3EDE1;
  --cream2:#FAF6EE;
  --sand:#E8DFCD;
  --slate:#53565D;
  --slatedeep:#3A3D43;
  --ink:#2A2B2F;
  --muted:#6B6E74;
  --amber:#C2691F;
  --amberdk:#A4540F;
}

html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{ -webkit-font-smoothing:antialiased; }

/* ---------- Noise overlay ---------- */
.noise-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
#header-inner{ background:transparent; }
#site-header.scrolled #header-inner{
  background:rgba(250,246,238,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(83,86,93,.12);
  box-shadow:0 8px 30px rgba(42,43,47,.08);
}
.nav-link{ position:relative; transition:color .2s ease, transform .2s ease; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:var(--amber); transition:width .25s ease;
}
.nav-link:hover{ color:var(--amberdk); transform:translateY(-1px); }
.nav-link:hover::after{ width:100%; }

/* ---------- Call buttons (magnetic + sliding bg) ---------- */
.btn-call{
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease;
}
.btn-call .btn-bg{
  position:absolute; inset:0; z-index:0;
  background:var(--amberdk);
  transform:translateY(101%);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.btn-call:hover{ transform:scale(1.03); }
.btn-call:hover .btn-bg{ transform:translateY(0); }
.btn-call:focus-visible{ outline:3px solid var(--amberdk); outline-offset:3px; }

/* ---------- Hero ---------- */
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--cream); }
.hero-grad{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 100%, rgba(243,237,225,.2) 0%, rgba(243,237,225,.85) 55%, var(--cream) 80%),
    linear-gradient(180deg, rgba(243,237,225,.4) 0%, rgba(243,237,225,0) 30%);
}
.hero-mountains{
  position:absolute; left:0; right:0; bottom:0; height:72%;
  background:
    /* far ridge */
    linear-gradient(180deg, transparent 0%, transparent 100%);
}
.hero-mountains::before,
.hero-mountains::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  background-repeat:no-repeat; background-position:bottom center; background-size:cover;
}
.hero-mountains::before{
  height:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23E8DFCD' d='M0 600 L0 400 L260 230 L430 360 L600 180 L760 380 L900 250 L1080 420 L1230 300 L1440 440 L1440 600 Z'/%3E%3C/svg%3E");
  opacity:.7;
}
.hero-mountains::after{
  height:78%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%2353565D' d='M0 600 L0 470 L320 250 L470 410 L720 200 L760 240 L860 150 L980 330 L1160 230 L1440 460 L1440 600 Z'/%3E%3C/svg%3E");
  opacity:.16;
}

/* ---------- Hero photo ---------- */
.hero-photo-wrap{
  position:relative; justify-self:center; width:100%; max-width:460px;
}
.hero-photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:2rem; border:1px solid rgba(83,86,93,.15);
  box-shadow:0 26px 60px rgba(42,43,47,.22);
}
.hero-photo-badge{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.04em; color:var(--slatedeep);
  background:rgba(250,246,238,.9); backdrop-filter:blur(6px);
  padding:.5rem .9rem; border-radius:999px; box-shadow:0 6px 18px rgba(42,43,47,.14);
}
@media (max-width:1023px){
  .hero-photo-wrap{ max-width:520px; margin-top:.5rem; }
  .hero-photo{ aspect-ratio:16/11; }
}

/* ---------- Section helpers ---------- */
.kicker{
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
}
.section-title{
  font-family:'Montserrat',sans-serif; font-weight:800; color:var(--slatedeep);
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.01em;
}

/* ---------- Trust bar ---------- */
.trust-item{ padding:0 .5rem; }

/* ---------- Benefit cards ---------- */
.benefit-card{
  background:var(--cream2); border:1px solid rgba(83,86,93,.12);
  border-radius:2rem; padding:1.8rem 1.6rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.benefit-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(42,43,47,.10);
  border-color:rgba(194,105,31,.35);
}
.benefit-icon{
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(194,105,31,.12); color:var(--amber); margin-bottom:1.1rem;
}
.benefit-icon svg{ width:24px; height:24px; }
.benefit-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.05rem; color:var(--slatedeep); }
.benefit-text{ margin-top:.5rem; color:var(--muted); font-size:.95rem; line-height:1.55; }

/* ---------- Flake blend tiles ---------- */
.flake-tile{
  position:relative; border-radius:1.25rem; overflow:hidden;
  background:var(--cream); border:1px solid rgba(83,86,93,.12);
  box-shadow:0 10px 26px rgba(42,43,47,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.flake-tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(42,43,47,.16); }
.flake-tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.flake-tile figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.7rem .9rem .8rem;
}
.flake-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem; color:var(--slatedeep); }
.flake-code{ font-family:'Inter',sans-serif; font-size:.72rem; color:var(--muted); letter-spacing:.02em; white-space:nowrap; }
.flake-pop{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cream2);
  background:var(--amber); padding:.28rem .6rem; border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}

/* ---------- Process ---------- */
.process-step{ position:relative; }
.process-num{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:2.6rem; line-height:1;
  color:var(--amber); opacity:.85; margin-bottom:.8rem;
}
.process-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.15rem; color:var(--slatedeep); }
.process-text{ margin-top:.55rem; color:var(--muted); font-size:.95rem; line-height:1.6; }

/* ---------- Before / After slider ---------- */
.ba-slider{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:1.5rem;
  overflow:hidden; user-select:none; touch-action:pan-y;
  box-shadow:0 18px 44px rgba(0,0,0,.28); background:#2f3136;
}
.ba-after{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none;
}
.ba-before-wrap{
  position:absolute; top:0; left:0; height:100%; width:50%; overflow:hidden;
  z-index:2; border-right:3px solid var(--cream2);
}
.ba-before-wrap .ba-before{
  position:absolute; top:0; left:0; height:100%; width:auto; max-width:none;
  display:block; pointer-events:none;
}
.ba-tag{
  position:absolute; top:.75rem; z-index:4; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px; color:var(--cream2);
  background:rgba(42,43,47,.72); backdrop-filter:blur(4px);
}
.ba-tag-before{ left:.75rem; }
.ba-tag-after{ right:.75rem; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; z-index:3;
  background:var(--cream2); transform:translateX(-50%); pointer-events:none;
}
.ba-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--cream2);
  box-shadow:0 3px 12px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.ba-handle span::before,
.ba-handle span::after{
  content:""; position:absolute; width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.ba-handle span::before{ left:9px; border-right:8px solid var(--slatedeep); }
.ba-handle span::after{ right:9px; border-left:8px solid var(--slatedeep); }
.ba-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
}
.ba-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  font-family:'Inter',sans-serif; font-size:.82rem; color:var(--cream2);
  background:linear-gradient(to top, rgba(20,20,22,.78), transparent);
  padding:1.4rem .9rem .7rem; pointer-events:none;
}

/* ---------- Showcase tiles ---------- */
.show-tile{
  position:relative; border-radius:1.5rem; overflow:hidden; aspect-ratio:3/2;
  box-shadow:0 18px 44px rgba(0,0,0,.28); background:#2f3136;
}
.show-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.show-tile:hover img{ transform:scale(1.04); }
.show-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-family:'Inter',sans-serif; font-size:.82rem; color:var(--cream2);
  background:linear-gradient(to top, rgba(20,20,22,.8), transparent);
  padding:1.6rem .9rem .8rem;
}
@media (max-width:767px){ .show-tile{ aspect-ratio:4/3; } }

/* ---------- Prep feature note ---------- */
.prep-note{
  background:linear-gradient(135deg,#474a52,#34363b);
  border:1px solid rgba(250,246,238,.1);
  border-radius:1.5rem;
  display:flex; flex-direction:column; justify-content:center;
  padding:2rem;
}
@media (min-width:768px){ .prep-note{ padding:2.6rem; } }

/* ---------- Service area ---------- */
.area-county{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem; color:var(--slatedeep); padding-bottom:.5rem; border-bottom:2px solid var(--amber); display:inline-block; }
.area-list{ margin-top:.9rem; display:flex; flex-direction:column; gap:.4rem; color:var(--muted); font-size:.95rem; }

.area-map-wrap{
  position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; width:100%;
  border:1px solid rgba(83,86,93,.15); border-radius:2.5rem; overflow:hidden;
  box-shadow:0 18px 44px rgba(42,43,47,.12); background:var(--sand);
}
.area-map-wrap iframe{ display:block; width:100%; height:100%; filter:grayscale(.15) contrast(1.02); }

/* ---------- FAQ ---------- */
.faq-item{ padding:1.3rem 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.05rem; color:var(--slatedeep);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-weight:700; font-size:1.5rem; color:var(--amber);
  transition:transform .3s ease; line-height:1;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-body{ margin-top:.85rem; color:var(--muted); font-size:1rem; line-height:1.65; max-width:60ch; }

/* ---------- Final CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:2.5rem; padding:3.5rem 1.5rem;
  background:linear-gradient(135deg,#3A3D43,#2A2B2F);
}
.cta-mountains{
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23C2691F' fill-opacity='0.14' d='M0 400 L0 280 L300 120 L460 250 L700 90 L900 230 L1120 130 L1440 300 L1440 400 Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:bottom center; background-size:cover;
}

/* ---------- Footer ---------- */
.footer-head{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,246,238,.55); }
.footer-call{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.3rem; color:var(--cream2); transition:color .2s ease, transform .2s ease; display:inline-block; }
.footer-call:hover{ color:var(--amber); transform:translateY(-1px); }

/* ---------- Mobile sticky call bar ---------- */
#mobile-call{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--amber); color:var(--cream2);
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:.02em;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0));
  box-shadow:0 -8px 26px rgba(42,43,47,.22);
  transition:background .2s ease;
}
#mobile-call:active{ background:var(--amberdk); }

/* ---------- Scroll-reveal ---------- */
[data-anim]{ opacity:0; transform:translateY(26px); }
.anim-ready [data-anim]{ will-change:opacity,transform; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  html{ scroll-padding-top:80px; }
}
@media (max-width:640px){
  .section-title{ font-size:1.65rem; }
  .cta-band{ padding:2.5rem 1.2rem; }
  .process-num{ font-size:2.2rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .btn-call:hover{ transform:none; }
}