/* ==========================================================
   ELLIOT ENVIRONMENTAL — Michigan mold removal specialists
   Palette: dark navy + light/sky blue (both from the EE logo).
   Mobile-first; breakpoints at 720 and 1040.
========================================================== */

:root {
  /* Blue — from the EE logo; authority + trust */
  --blue-900:#062a45; --blue-800:#073d66; --blue-700:#0a5f9e;
  --blue-600:#0e7fc9; --blue-500:#1a91dd; --blue-400:#4fb0ea;
  --blue-300:#8bcdf2; --blue-100:#d9edfa; --blue-50:#eff7fd;

  /* Accent — light / sky blue (from the logo); highlights + primary CTA.
     (Kept the --green-* names so usages didn't have to change.) */
  --green-700:#0d76bd; --green-600:#0f83cf; --green-500:#1391da;
  --green-400:#45b7ee; --green-100:#d3ecfb; --green-50:#e9f6fe;

  /* Ink / neutrals */
  --ink-900:#0d1b26; --ink-800:#152532; --ink-700:#26343f;
  --ink-500:#52616c; --ink-400:#71808a; --ink-300:#9aa6ae;
  --ink-100:#e4e9ed; --ink-50:#f4f7f9;
  --white:#ffffff;

  --shadow-sm:0 2px 8px rgba(6,42,69,.07);
  --shadow-md:0 10px 30px rgba(6,42,69,.10);
  --shadow-lg:0 24px 60px rgba(6,42,69,.18);

  --radius-sm:6px; --radius:12px; --radius-lg:18px;
  --container:1200px; --header-h:76px;
  --t-fast:140ms ease; --t:220ms ease;

  --font-head:"Poppins","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* -- Base -------------------------------------------------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip; }
body {
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.62;
  color:var(--ink-700); background:var(--white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
img { max-width:100%; display:block; }
a { color:var(--blue-700); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--green-600); }
ul { margin:0; padding:0; list-style:none; }
button { font-family:inherit; cursor:pointer; border:0; background:none; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.14; margin:0 0 .5em; color:var(--ink-900); letter-spacing:-.01em; }
h1 { font-size:clamp(2rem,5vw,3.1rem); }
h2 { font-size:clamp(1.6rem,3.4vw,2.35rem); }
h3 { font-size:1.22rem; }
p { margin:0 0 1em; }
em { font-style:normal; color:var(--blue-600); }
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
.eyebrow { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--green-600); margin-bottom:.7rem; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:12px; top:12px; background:var(--white); padding:10px 16px; z-index:200; border-radius:6px; }

/* -- Buttons ----------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; font-family:var(--font-body); font-weight:600; font-size:15px;
  border-radius:var(--radius); border:2px solid transparent; white-space:nowrap;
  transition:transform var(--t-fast), background var(--t), color var(--t), box-shadow var(--t); }
.btn:hover { transform:translateY(-2px); }
.btn-green { background:var(--green-500); color:var(--white); box-shadow:0 6px 18px rgba(19,145,218,.34); }
.btn-green:hover { background:var(--green-600); color:var(--white); }
.btn-blue { background:var(--blue-800); color:var(--white); box-shadow:0 6px 18px rgba(7,61,102,.32); }
.btn-blue:hover { background:var(--blue-900); color:var(--white); }
.btn-white { background:var(--white); color:var(--blue-800); }
.btn-white:hover { background:var(--blue-50); color:var(--blue-800); }
.btn-outline { background:transparent; color:var(--blue-700); border-color:var(--blue-200,#bfe0f5); border-color:#bfe0f5; }
.btn-outline:hover { background:var(--blue-50); color:var(--blue-800); }
.btn-lg { padding:15px 30px; font-size:16px; }
.btn-sm { padding:9px 16px; font-size:14px; }
.btn-block { display:flex; width:100%; }

/* -- Topbar ------------------------------------------------ */
.topbar { background:var(--blue-900); color:var(--blue-100); font-size:13.5px; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; height:40px; }
.topbar-left { display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-right { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.topbar-right a { color:var(--white); font-weight:600; }
.topbar-right a:hover { color:var(--green-400); }
.topbar-divider { color:rgba(255,255,255,.25); }
.topbar-left i, .topbar-right i { color:var(--blue-400); }

/* -- Header ------------------------------------------------ */
.site-header { position:sticky; top:0; z-index:100; background:var(--white); box-shadow:var(--shadow-sm);
  border-bottom:1px solid var(--ink-100); transition:box-shadow var(--t); }
.site-header.scrolled { box-shadow:var(--shadow-md); }
.header-inner { display:flex; align-items:center; gap:20px; min-height:100px; transition:min-height var(--t); }
.site-header.scrolled .header-inner { min-height:68px; }
.brand { display:flex; align-items:center; flex-shrink:0; }
.brand-logo { width:auto; height:84px; object-fit:contain; transition:height var(--t); }
.site-header.scrolled .brand-logo { height:54px; }

.main-nav { display:none; align-items:center; gap:4px; margin-left:auto; }
.nav-link { display:inline-flex; align-items:center; gap:7px; padding:10px 15px; font-size:15.5px; font-weight:600;
  color:var(--ink-700); border-radius:9px; background:none; cursor:pointer; font-family:var(--font-body); }
.nav-link:hover, .nav-link.is-active { color:var(--blue-700); background:var(--blue-50); }

.nav-item.has-dropdown { position:relative; }
.nav-item.has-dropdown::after { content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.nav-dd-toggle i { font-size:.66rem; transition:transform var(--t-fast); }
.nav-item.has-dropdown:hover .nav-dd-toggle i,
.nav-item.has-dropdown.open .nav-dd-toggle i { transform:rotate(180deg); }
.dropdown { position:absolute; top:calc(100% + 8px); left:0; min-width:262px; background:var(--white);
  border:1px solid var(--ink-100); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t), visibility var(--t); z-index:120; }
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown,
.nav-item.has-dropdown.open .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-link { padding:11px 14px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--ink-700); white-space:nowrap; }
.dropdown-link:hover, .dropdown-link.is-active { background:var(--blue-50); color:var(--blue-700); }

.header-cta { display:none; align-items:center; gap:10px; margin-left:8px; }
.nav-toggle { display:inline-flex; margin-left:auto; width:46px; height:46px; align-items:center; justify-content:center;
  font-size:22px; color:var(--blue-800); border-radius:10px; }
.nav-toggle:hover { background:var(--blue-50); }
.mobile-nav { display:none; flex-direction:column; gap:4px; padding:14px 20px 22px; border-top:1px solid var(--ink-100); background:var(--white); }
.mobile-nav.open { display:flex; }
.mobile-nav .nav-link { padding:12px 12px; font-size:16px; border-bottom:1px solid var(--ink-50); border-radius:0; }
.mobile-nav-label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); padding:8px 12px 2px; }
.mobile-nav .btn { margin-top:8px; }
@media (max-width:720px) {
  .brand-logo { height:60px; }
  .site-header.scrolled .brand-logo { height:46px; }
  .header-inner { min-height:78px; }
}

/* -- Hero -------------------------------------------------- */
.hero { position:relative; color:var(--white); overflow:hidden;
  background:linear-gradient(135deg,var(--blue-800) 0%,var(--blue-600) 55%,var(--blue-500) 100%); }
.hero-bg { position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(700px 400px at 82% 18%, rgba(69,183,238,.30), transparent 60%),
    radial-gradient(600px 500px at 12% 90%, rgba(255,255,255,.14), transparent 60%); }
.hero-inner { position:relative; padding:76px 20px 84px; max-width:860px; }
.hero-grid { position:relative; display:grid; grid-template-columns:1fr; gap:38px; align-items:center; padding:54px 20px 62px; }
.hero-copy { max-width:640px; }
@media (min-width:920px) { .hero-grid { grid-template-columns:1.15fr .85fr; gap:50px; } }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:999px; font-size:.82rem;
  font-weight:600; letter-spacing:.04em; margin-bottom:22px; backdrop-filter:blur(4px); }
.hero-eyebrow i { color:var(--green-400); }
.hero-title { font-size:clamp(2rem,4.4vw,3.1rem); color:var(--white); margin-bottom:.35em; text-wrap:balance; }
.hero-accent { color:var(--green-400); }
.hero-sub { font-size:clamp(1.05rem,2.2vw,1.28rem); color:rgba(255,255,255,.92); max-width:640px; margin-bottom:2rem; }
.hero-sub em { color:var(--green-300,#8fd4ff); color:#8fd4ff; font-style:italic; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.2rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:10px 24px; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.18); }
.hero-trust li { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.94); }
.hero-trust i { color:var(--green-400); }

/* -- Hero lead-capture form -------------------------------- */
.hero-form { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:26px 24px; }
.hero-form-head { margin-bottom:16px; }
.hero-form-head h3 { font-size:1.34rem; color:var(--ink-900); margin-bottom:5px; }
.hero-form-head p { font-size:.92rem; color:var(--ink-500); margin:0; }
.hero-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hero-form input { width:100%; margin-bottom:12px; padding:13px 15px; font-family:inherit; font-size:15px;
  color:var(--ink-800); border:1.5px solid var(--ink-100); border-radius:10px; background:var(--white); transition:border-color var(--t-fast); }
.hero-form input:focus { outline:none; border-color:var(--blue-500); }
.hero-form .btn { margin-top:4px; }
.hero-form-fine { font-size:.84rem; color:var(--ink-400); text-align:center; margin:12px 0 0; }
.hero-form-fine a { color:var(--blue-700); font-weight:600; }

/* -- Trust strip ------------------------------------------- */
.trust-strip { background:var(--ink-50); border-bottom:1px solid var(--ink-100); }
.trust-inner { display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; padding:18px 20px; justify-content:center; }
.trust-label { font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-400); }
.trust-badges { display:flex; flex-wrap:wrap; gap:12px 22px; }
.trust-badges span { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--ink-700); }
.trust-badges i { color:var(--blue-600); }

/* -- Section head ------------------------------------------ */
.section-head { text-align:center; max-width:720px; margin:0 auto 48px; }
.section-title { margin-bottom:.4em; }
.section-sub { color:var(--ink-500); font-size:1.06rem; }
.section-head-light .section-title, .section-head-light .section-sub { color:var(--white); }
.section-head-light .section-sub { color:rgba(255,255,255,.85); }

/* -- Services grid ----------------------------------------- */
.services { padding:78px 0; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; }
.service-card { display:flex; flex-direction:column; align-items:flex-start; padding:30px 26px;
  background:var(--white); border:1px solid var(--ink-100); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.service-icon { width:58px; height:58px; display:flex; align-items:center; justify-content:center; font-size:24px;
  color:var(--white); border-radius:14px; margin-bottom:18px;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-500)); box-shadow:0 6px 16px rgba(14,127,201,.28); }
.service-card h3 { color:var(--ink-900); margin-bottom:.4em; }
.service-card p { color:var(--ink-500); font-size:.96rem; margin-bottom:1.2em; }
.service-link { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue-700); font-size:.94rem; }
.service-card:hover .service-link { color:var(--green-600); }
.service-link i { transition:transform var(--t-fast); }
.service-card:hover .service-link i { transform:translateX(4px); }
.service-card-cta { background:linear-gradient(140deg,var(--blue-800),var(--blue-600)); border:none; color:var(--white); }
.service-card-cta h3 { color:var(--white); }
.service-card-cta p { color:rgba(255,255,255,.9); }
.service-card-cta .service-icon { background:rgba(255,255,255,.16); box-shadow:none; }
.service-card-cta .service-link { color:#8fd4ff; }
.service-card-cta:hover { border:none; }
.service-card-cta:hover .service-link { color:var(--white); }

/* -- Why --------------------------------------------------- */
.why { padding:78px 0; background:var(--blue-50); }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.why-card { background:var(--white); border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-sm); }
.why-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:23px;
  color:var(--green-600); background:var(--green-50); border-radius:14px; margin-bottom:16px; }
.why-card h3 { margin-bottom:.45em; }
.why-card p { color:var(--ink-500); font-size:.96rem; margin:0; }

/* -- Process band ------------------------------------------ */
.process-band { padding:78px 0; color:var(--white);
  background:linear-gradient(150deg,var(--blue-900),var(--blue-700)); }
.process-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; list-style:none; padding-left:0; }
.process-row li { position:relative; padding-top:6px; }
.pr-num { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--blue-900); background:var(--green-400);
  margin-bottom:14px; }
.process-row h3 { color:var(--white); margin-bottom:.35em; font-size:1.14rem; }
.process-row p { color:rgba(255,255,255,.82); font-size:.95rem; margin:0; }

/* -- Reviews ----------------------------------------------- */
.reviews { padding:78px 0; }
.review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.review-card { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.review-stars { color:#f5b301; margin-bottom:12px; letter-spacing:2px; }
.review-card blockquote { margin:0 0 18px; font-size:1.02rem; color:var(--ink-700); line-height:1.6; }
.review-card figcaption { display:flex; flex-direction:column; margin-top:auto; }
.review-card figcaption strong { color:var(--ink-900); }
.review-card figcaption span { font-size:.86rem; color:var(--ink-400); }
/* homepage: show 3 by default (script.js randomizes which 3) */
.reviews .review-grid .review-card:nth-child(n+4) { display:none; }
.reviews-more { text-align:center; margin-top:38px; }

/* -- Reviews page ------------------------------------------ */
.reviews-page { padding:52px 0 72px; }
.reviews-rating { display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; padding:24px 30px; margin-bottom:38px;
  background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--radius-lg); }
.rr-score { display:flex; flex-direction:column; line-height:1; }
.rr-score strong { font-family:var(--font-head); font-size:3rem; color:var(--blue-800); font-weight:800; }
.rr-score span { font-size:.85rem; color:var(--ink-500); margin-top:5px; }
.rr-meta { display:flex; flex-direction:column; gap:7px; }
.rr-stars { color:#f5b301; font-size:1.2rem; letter-spacing:3px; }
.rr-meta > span { color:var(--ink-500); font-size:.95rem; }
.reviews-page .review-card blockquote { font-size:.98rem; }

/* -- Photo gallery + lightbox ------------------------------ */
.gallery { padding:48px 0 72px; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.gal-item { padding:0; border:0; background:none; cursor:pointer; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:1/1; box-shadow:var(--shadow-sm); position:relative; }
.gal-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t); }
.gal-item:hover img { transform:scale(1.06); }
.gal-item::after { content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem;
  background:rgba(6,42,69,.34); opacity:0; transition:opacity var(--t); }
.gal-item:hover::after, .gal-item:focus-visible::after { opacity:1; }

.lightbox { position:fixed; inset:0; z-index:300; background:rgba(6,20,32,.94); display:none;
  align-items:center; justify-content:center; padding:40px; }
.lightbox.open { display:flex; }
.lb-img { max-width:92vw; max-height:82vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.lb-close { position:absolute; top:16px; right:24px; font-size:2.6rem; line-height:1; color:#fff; background:none; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%;
  font-size:2.4rem; line-height:1; color:#fff; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; }
.lb-nav:hover { background:rgba(255,255,255,.24); }
.lb-prev { left:20px; } .lb-next { right:20px; }
.lb-caption { position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff; font-size:.95rem; padding:0 20px; }
@media (max-width:640px) { .lb-nav { width:44px; height:44px; font-size:1.9rem; } .lb-prev { left:8px; } .lb-next { right:8px; } .lightbox { padding:20px; } }

/* -- Service area ------------------------------------------ */
.service-area { padding:78px 0; background:var(--ink-50); }
.area-inner { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.area-copy p { color:var(--ink-500); max-width:520px; }
.area-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.area-list li { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--radius-sm);
  padding:11px 14px; font-size:.92rem; font-weight:500; color:var(--ink-700); text-align:center; }

/* -- CTA band ---------------------------------------------- */
.cta-band { padding:56px 0; background:linear-gradient(135deg,var(--blue-800),var(--blue-600)); color:var(--white); }
.cta-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; }
.cta-copy { max-width:600px; }
.cta-copy h2 { color:var(--white); margin-bottom:.3em; }
.cta-copy p { color:rgba(255,255,255,.92); margin:0; font-size:1.06rem; }
.cta-actions { display:flex; flex-wrap:wrap; gap:14px; }

/* -- Breadcrumb -------------------------------------------- */
.breadcrumb { padding:18px 20px 0; font-size:.86rem; color:var(--ink-400); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.breadcrumb a { color:var(--ink-500); }
.breadcrumb a:hover { color:var(--blue-700); }
.breadcrumb i { font-size:.7rem; color:var(--ink-300); }
.breadcrumb span[aria-current] { color:var(--ink-700); font-weight:600; }

/* -- Page hero (about/contact/legal) ----------------------- */
.page-hero { padding:56px 0 44px; background:linear-gradient(135deg,var(--blue-800),var(--blue-600)); color:var(--white); }
.page-hero h1 { color:var(--white); }
.page-hero-sub { font-size:1.12rem; color:rgba(255,255,255,.9); max-width:640px; margin:0; }
.page-hero-sm { padding:44px 0 32px; }

/* -- Service page ------------------------------------------ */
.svc-hero { padding:52px 0 58px; color:var(--white); background:linear-gradient(135deg,var(--blue-800),var(--blue-600)); }
.svc-hero-grid { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.svc-hero-copy h1 { color:var(--white); }
.svc-hero-copy .eyebrow { color:#8fd4ff; }
.svc-lede { font-size:1.16rem; color:rgba(255,255,255,.92); margin:0 0 1.4rem; }
.svc-hero-trust { display:flex; flex-direction:column; gap:9px; margin:0 0 1.4rem; }
.svc-hero-trust li { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.94); font-weight:500; }
.svc-hero-trust i { color:var(--green-400); }
.svc-hero-phone a { color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:9px; font-size:1.05rem; }
.svc-hero-phone i { color:var(--green-400); }
@media (min-width:920px) { .svc-hero-grid { grid-template-columns:1.05fr .92fr; gap:52px; } }

.svc-signs { padding:70px 0; }
.svc-cols { display:grid; grid-template-columns:1fr; gap:36px; align-items:start; }
.svc-signs-copy h2 { text-transform:none; }
.svc-signs-copy p { color:var(--ink-500); margin-bottom:1.4em; }
.signs-list { display:flex; flex-direction:column; gap:12px; }
.signs-list li { display:flex; align-items:flex-start; gap:12px; background:var(--ink-50); border:1px solid var(--ink-100);
  border-radius:var(--radius); padding:15px 18px; font-weight:500; color:var(--ink-700); }
.signs-list i { color:var(--green-500); margin-top:3px; flex-shrink:0; }

.svc-process { padding:70px 0; background:var(--blue-50); }
.step-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; list-style:none; padding-left:0; }
.step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:var(--white); border-radius:var(--radius-lg); padding:30px 22px; box-shadow:var(--shadow-sm); }
.step-num { flex-shrink:0; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--white); background:linear-gradient(135deg,var(--blue-600),var(--blue-500)); }
.step-body h3 { font-size:1.08rem; margin-bottom:.35em; }
.step-body p { color:var(--ink-500); font-size:.95rem; margin:0; }

.svc-faq { padding:70px 0; }
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--ink-100); border-radius:var(--radius); overflow:hidden; background:var(--white); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left;
  padding:18px 20px; font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--ink-900); }
.faq-q i { color:var(--blue-600); transition:transform var(--t); flex-shrink:0; }
.faq-q[aria-expanded="true"] i { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height var(--t); }
.faq-a p { padding:0 20px 20px; margin:0; color:var(--ink-500); }

.svc-related { padding:70px 0; background:var(--ink-50); }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.rel-card { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--ink-100);
  border-radius:var(--radius); padding:18px 20px; font-weight:600; color:var(--ink-800); box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t); }
.rel-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); color:var(--blue-700); }
.rel-card > i:first-child { color:var(--blue-600); font-size:1.3rem; width:28px; text-align:center; }
.rel-card span { flex:1; }
.rel-arrow { color:var(--ink-300); }
.rel-card:hover .rel-arrow { color:var(--green-500); }

/* -- About ------------------------------------------------- */
.about-body { padding:70px 0; }
.about-cols { display:grid; grid-template-columns:1fr; gap:40px; }
.about-prose h2 { margin-top:1.4em; }
.about-prose h2:first-child { margin-top:0; }
.about-prose p { color:var(--ink-600); }
.about-side { display:flex; flex-direction:column; gap:18px; }
.about-stat { background:var(--blue-50); border-radius:var(--radius); padding:20px 22px; }
.about-stat strong { display:block; font-family:var(--font-head); font-size:2.1rem; color:var(--blue-700); line-height:1; }
.about-stat span { font-size:.92rem; color:var(--ink-500); }
.about-card { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); }
.about-card h3 { font-size:1.05rem; margin-bottom:.8em; }
.cred-badges { display:flex; flex-direction:column; gap:9px; }
.cred-badge { display:flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; color:var(--ink-700); }
.cred-badge i { color:var(--green-500); }
.about-card-cta { background:linear-gradient(140deg,var(--blue-800),var(--blue-600)); border:none; color:var(--white); }
.about-card-cta h3 { color:var(--white); }
.about-card-cta p { color:rgba(255,255,255,.88); font-size:.95rem; margin-bottom:1em; }

/* -- Contact ----------------------------------------------- */
.contact-body { padding:64px 0; }
.contact-cols { display:grid; grid-template-columns:1fr; gap:40px; }
.contact-line { display:flex; gap:15px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--ink-100); }
.contact-line > i { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--blue-600); background:var(--blue-50); border-radius:12px; }
.contact-line div { display:flex; flex-direction:column; }
.contact-line span { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.contact-line a { color:var(--ink-800); font-weight:600; font-size:1.08rem; }
.contact-line a:hover { color:var(--blue-700); }
.contact-certs { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.contact-certs span { background:var(--blue-50); color:var(--blue-800); font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:999px; }
.contact-form { background:var(--white); border:1px solid var(--ink-100); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md); }
.contact-form label { display:block; font-weight:600; font-size:.9rem; color:var(--ink-700); margin-bottom:16px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width:100%; margin-top:6px; padding:12px 14px; font-family:inherit; font-size:15px; color:var(--ink-800);
  border:1.5px solid var(--ink-100); border-radius:10px; background:var(--white); transition:border-color var(--t-fast); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:none; border-color:var(--blue-500); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp-field { position:absolute; left:-9999px; }
.form-fine { font-size:.85rem; color:var(--ink-400); text-align:center; margin:14px 0 0; }
.contact-body { scroll-margin-top:110px; }
.form-group-title { font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-700);
  margin:8px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--ink-100); }
.form-group-title:not(:first-of-type) { margin-top:26px; }
.contact-form .opt { color:var(--ink-400); font-weight:400; text-transform:none; letter-spacing:0; }
.form-fieldset { border:0; padding:0; margin:0 0 16px; }
.form-fieldset legend { font-weight:600; font-size:.9rem; color:var(--ink-700); margin-bottom:8px; padding:0; }
.radio-row { display:flex; gap:10px; flex-wrap:wrap; }
.radio { flex:1; min-width:120px; display:flex; align-items:center; gap:9px; margin:0; padding:12px 16px; font-weight:500;
  border:1.5px solid var(--ink-100); border-radius:10px; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
.radio:hover { border-color:var(--blue-300); }
.radio input { width:auto; margin:0; accent-color:var(--blue-600); }
.radio:has(input:checked) { border-color:var(--blue-500); background:var(--blue-50); }
.file-label input[type="file"] { padding:11px 12px; background:var(--ink-50); cursor:pointer; }
.file-hint { display:block; font-size:.82rem; color:var(--ink-400); font-weight:400; margin-top:6px; }

/* -- Legal ------------------------------------------------- */
.legal-body { padding:56px 0; }
.legal-prose { max-width:800px; margin:0 auto; }
.legal-prose h2 { font-size:1.3rem; margin-top:1.6em; }
.legal-prose h2:first-child { margin-top:0; }
.legal-prose p { color:var(--ink-600); }

/* -- Footer ------------------------------------------------ */
.site-footer { background:var(--ink-900); color:var(--ink-300); padding-top:56px; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:34px; padding-bottom:40px; }
.footer-logo { width:auto; height:58px; object-fit:contain; background:var(--white); border-radius:12px; padding:8px 12px; margin-bottom:14px; }
.footer-tag { color:var(--ink-300); font-size:.95rem; max-width:340px; }
.footer-certs { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.footer-certs span { background:rgba(255,255,255,.06); color:var(--blue-100); font-size:.76rem; font-weight:600; padding:5px 11px; border-radius:999px; }
.footer-col h3 { color:var(--white); font-size:1rem; margin-bottom:1em; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:var(--ink-300); font-size:.94rem; }
.footer-col a:hover { color:var(--green-400); }
.footer-contact p { display:flex; gap:10px; font-size:.94rem; margin-bottom:12px; }
.footer-contact i { color:var(--blue-400); margin-top:3px; }
.footer-contact a { color:var(--ink-300); }
.footer-contact .btn { margin-top:6px; }
.footer-bar { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; font-size:.86rem; }
.footer-bar-inner { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.footer-legal a { color:var(--ink-300); }
.footer-legal a:hover { color:var(--green-400); }

/* -- Blog index -------------------------------------------- */
.blog-index { padding:48px 0 70px; }
.blog-controls { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
.blog-search { flex:1; min-width:230px; padding:13px 16px; font-family:inherit; font-size:15px; color:var(--ink-800);
  border:1.5px solid var(--ink-100); border-radius:10px; background:var(--white); }
.blog-search:focus { outline:none; border-color:var(--blue-500); }
.blog-controls-right { display:flex; gap:12px; flex-wrap:wrap; }
.blog-ctl { display:flex; flex-direction:column; gap:5px; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-400); }
.blog-select { padding:12px 14px; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink-700);
  border:1.5px solid var(--ink-100); border-radius:10px; background:var(--white); cursor:pointer; }
.blog-select:focus { outline:none; border-color:var(--blue-500); }
.blog-count { color:var(--ink-400); font-size:.9rem; margin:0 0 20px; }
.blog-empty { text-align:center; padding:48px 20px; color:var(--ink-500); font-size:1.05rem; }
.blog-pagination { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:44px; }
.pg-btn { min-width:44px; padding:10px 15px; border:1.5px solid var(--ink-100); border-radius:9px; font-family:inherit;
  font-weight:600; font-size:.92rem; color:var(--ink-700); background:var(--white); transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.pg-btn:hover:not(:disabled) { border-color:var(--blue-300); color:var(--blue-700); }
.pg-btn.is-active { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.pg-btn:disabled { opacity:.4; cursor:default; }
.pg-ellipsis { padding:10px 4px; color:var(--ink-400); align-self:center; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.blog-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--ink-100);
  border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.blog-cat { align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green-700); background:var(--green-50); padding:4px 11px; border-radius:999px; margin-bottom:12px; }
.blog-card h3 { font-size:1.12rem; line-height:1.25; margin-bottom:8px; color:var(--ink-900); }
.blog-card time { display:block; font-size:.82rem; color:var(--ink-400); margin-bottom:10px; }
.blog-card p { font-size:.92rem; color:var(--ink-500); margin-bottom:16px; }
.blog-card .read { margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color:var(--blue-700); }
.blog-card:hover .read { color:var(--green-600); }

/* -- Blog single post -------------------------------------- */
.blog-single { padding:8px 0 20px; }
.blog-narrow { max-width:800px; }
.blog-single-head { padding:26px 0 22px; border-bottom:1px solid var(--ink-100); margin-bottom:32px; }
.blog-single-head .blog-cat { display:inline-block; margin-bottom:14px; }
.blog-single-head h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px; }
.blog-meta { color:var(--ink-400); font-size:.92rem; }
.blog-meta i { color:var(--blue-500); }
.blog-content { font-size:1.05rem; color:var(--ink-700); line-height:1.75; }
.blog-content p { margin:0 0 1.15em; }
.blog-content h2 { font-size:1.5rem; margin:1.6em 0 .5em; }
.blog-content h3 { font-size:1.2rem; margin:1.4em 0 .5em; }
.blog-content ul, .blog-content ol { margin:0 0 1.15em; padding-left:1.4em; }
.blog-content ul { list-style:disc; }
.blog-content ol { list-style:decimal; }
.blog-content li { margin-bottom:.5em; }
.blog-content img { border-radius:var(--radius); box-shadow:var(--shadow-sm); height:auto; margin:1.2em 0; }
.blog-content a { color:var(--blue-700); text-decoration:underline; }
.blog-content a:hover { color:var(--green-600); }
.blog-content blockquote { margin:1.4em 0; padding:14px 22px; border-left:4px solid var(--blue-500);
  background:var(--blue-50); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink-600); font-style:italic; }
.blog-content h1 { font-size:1.7rem; margin:1.2em 0 .5em; }
.blog-back { margin-top:40px; padding-top:24px; border-top:1px solid var(--ink-100); }
.blog-back a { font-weight:600; color:var(--blue-700); display:inline-flex; align-items:center; gap:8px; }

/* -- Responsive -------------------------------------------- */
@media (min-width:720px) {
  .area-inner { grid-template-columns:1fr 1.1fr; }
  .svc-cols { grid-template-columns:1fr 1fr; }
  .about-cols { grid-template-columns:1.7fr 1fr; }
  .contact-cols { grid-template-columns:1fr 1.2fr; }
  .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1.3fr; }
}
@media (min-width:1040px) {
  .main-nav { display:flex; }
  .header-cta { display:flex; }
  .nav-toggle { display:none; }
}
@media (max-width:1039px) {
  .header-phone { display:none; }
}

/* -- Mobile sticky call / consultation bar ----------------- */
.mobile-cta-bar { display:none; }
@media (max-width:720px) {
  .mobile-cta-bar {
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    box-shadow:0 -4px 20px rgba(6,42,69,.24);
    opacity:0; transform:translateY(100%);
    transition:opacity var(--t), transform var(--t);
    pointer-events:none; padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-cta-bar.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
  .mcta { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0;
    padding:15px 6px; font-family:var(--font-body); font-weight:700; font-size:14.5px;
    color:#fff; white-space:nowrap; }
  .mcta-call { background:var(--green-500); }
  .mcta-quote { background:var(--blue-700); }
  .mcta:active { filter:brightness(1.1); }
  .mcta i { flex:0 0 auto; }
}

/* -- Service page prose ------------------------------------ */
.svc-intro { padding:54px 0 6px; }
.svc-prose { max-width:820px; margin:0 auto; }
.svc-intro .svc-prose > p:first-child { font-size:1.16rem; color:var(--ink-700); }
.svc-content { padding:14px 0 44px; }
.svc-prose h2 { margin:1.7em 0 .5em; font-size:1.5rem; }
.svc-prose h2:first-child { margin-top:0; }
.svc-prose p { color:var(--ink-600); }
.svc-prose ul { margin:0 0 1.2em; padding-left:1.25em; list-style:disc; color:var(--ink-600); }
.svc-prose li { margin-bottom:.45em; }
.svc-prose strong { color:var(--ink-800); }

/* -- Media (images + placeholders) ------------------------- */
.media { margin:28px 0; }
.media img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:block; }
.media figcaption { margin-top:8px; font-size:.85rem; color:var(--ink-400); text-align:center; }

.img-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  border:2px dashed var(--blue-300); border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--blue-50),var(--green-50));
  padding:34px 26px; min-height:220px; margin:28px 0; }
.img-ph i { font-size:2rem; color:var(--blue-500); opacity:.7; }
.img-ph span { font-weight:600; font-size:.98rem; color:var(--ink-600); max-width:340px; }
.img-ph small { color:var(--ink-400); font-size:.8rem; }

/* -- Before / after --------------------------------------- */
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0; }
/* mobile: stack before/after full-width (service pages only — the homepage .ba-slider is untouched) */
@media (max-width:720px) { .ba-grid { grid-template-columns:1fr; gap:16px; } }
.ba-item { position:relative; }
.ba-item img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:block; }
.ba-tag { position:absolute; top:12px; left:12px; padding:5px 13px; border-radius:999px; font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#fff; }
.ba-tag.before { background:var(--ink-700); }
.ba-tag.after { background:var(--green-600); }

/* -- Homepage before/after gallery ------------------------- */
.work { padding:78px 0; }
.work-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.work-item h3 { text-align:center; font-size:1.08rem; margin-bottom:14px; }
.work-item .ba-grid { margin:0; }
.work-hint { text-align:center; color:var(--ink-400); font-size:.9rem; margin:-24px 0 30px; }
.work-hint i { color:var(--blue-500); }

/* -- Before/after comparison slider ------------------------ */
.ba-slider { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); touch-action:none; user-select:none; cursor:ew-resize; outline:none; }
.ba-slider:focus-visible { box-shadow:0 0 0 3px var(--blue-300), var(--shadow-md); }
.ba-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-reveal { clip-path:inset(0 50% 0 0); }
.ba-slider .ba-tag { position:absolute; top:12px; z-index:2; transition:opacity var(--t); }
.ba-slider .ba-tag.before { left:12px; right:auto; }
.ba-slider .ba-tag.after { right:12px; left:auto; }
.ba-divider { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(6,42,69,.18); transform:translateX(-50%); pointer-events:none; z-index:3; }
.ba-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--blue-700);
  display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow-md); }

/* -- 2026-09-25 homepage restructure (B/A #2, Why #3, services last) -- */
.why-card-link { display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:inherit;
  border:1px solid transparent; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.why-card-link:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.why-card-link p { margin-bottom:1.1em; }
.why-link { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--blue-700); font-size:.94rem; }
.why-card-link:hover .why-link { color:var(--green-600); }
.why-link i { transition:transform var(--t-fast); }
.why-card-link:hover .why-link i { transform:translateX(4px); }
.work-more { text-align:center; margin-top:34px; }
.trust-strip { border-top:1px solid var(--ink-100); }
@media (max-width:720px) { .topbar-left { display:none; } .topbar-inner { justify-content:center; } }