/* ============================================================
   Purple Window Cleaning — global styles (all pages)
   Design DNA: bigapplewindowcleaning.com (Montserrat, hairline grid,
   photo hero, two-tone headings) — recolored to brand purple #6B2FA3.
   ============================================================ */

:root{
  --purple:#6B2FA3; --purple-deep:#4E1F7D; --purple-ink:#2A0F45;
  --tint:#F1EAFA; --bg:#F4F5F7;
  --ink:#14121A; --muted:#5B6069; --faint:#9AA0A6;
  --line:#E7E7EE; --white:#fff;
  --container:1240px; --pad:40px;
  --ease:cubic-bezier(.33,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:"Montserrat",system-ui,sans-serif;color:var(--ink);background:var(--white);font-size:16px;line-height:1.6}
img,svg{display:block;max-width:100%}
/* <picture> wrappers (from the modern-image-formats plugin) must be layout-transparent
   so images that rely on height:100% / absolute positioning inside a sized parent keep working */
picture{display:contents}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.accent{color:var(--purple)}

/* ---------- shared type ---------- */
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:16px}
.eyebrow--light{color:#E4D3F5}
.sec-title{font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.sec-intro{margin-top:18px;max-width:520px;color:var(--muted);font-size:18px;line-height:1.55}
.section{padding-block:clamp(64px,8vw,120px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:16px 28px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:.25s var(--ease)}
.btn--solid{background:var(--purple);color:#fff}
.btn--solid:hover{background:var(--purple-deep);transform:translateY(-2px)}
.btn--outline{background:transparent;border-color:var(--purple);color:var(--purple)}
.btn--outline:hover{background:var(--purple);color:#fff}
.btn--white{background:#fff;color:var(--purple)}
.btn--white:hover{background:var(--tint)}
.btn--lg{padding:19px 34px;font-size:14px}
.btn--block{width:100%;justify-content:center;padding:18px}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);transition:.25s var(--ease)}
.link-arrow::after{content:"→";transition:.25s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}
.link-arrow--light{color:#fff}

/* ---------- wordmark (text logo: "Purple" / "— Window Cleaning —") ---------- */
.wordmark{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1}
.wordmark__main{font-size:16px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.wordmark__sub{margin-top:5px;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:.35s var(--ease)}
.nav__inner{display:flex;align-items:center;gap:32px;padding-block:18px}
.nav.scrolled{background:#fff;box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:38px;height:38px;flex:0 0 auto;background:var(--purple);border-radius:8px;display:grid;place-items:center;padding:7px}
.brand__mark svg{width:100%}
.brand__name{font-weight:700;font-size:15px;line-height:1.15;color:#fff}
.nav.scrolled .brand__name{color:var(--ink)}
.brand--light .brand__name{color:#fff}
.nav .wordmark{color:#fff}
.nav.scrolled .wordmark{color:var(--purple)}
.nav__links{display:flex;gap:30px;margin-left:8px}
.nav__links a{font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav__links a:hover{color:#fff}
.nav.scrolled .nav__links a:hover{color:var(--purple)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav__phone{font-weight:700;font-size:17px;color:#fff}
.nav.scrolled .nav__phone{color:var(--ink)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;margin-left:auto}
.nav__burger span{width:26px;height:2px;background:#fff}
.nav.scrolled .nav__burger span{background:var(--ink)}

/* ---------- footer ---------- */
.footer{background:var(--purple-ink);color:#fff;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-block:72px 56px}
.footer__brand p{color:rgba(255,255,255,.7);margin-top:20px;max-width:44ch;font-size:15px;line-height:1.6}
.footer__tagline{color:#E4D3F5!important;font-weight:600;margin-top:16px!important}
.footer__social{display:flex;gap:12px;margin-top:22px}
.footer__social a{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:.25s var(--ease)}
.footer__social a:hover{background:var(--purple);border-color:var(--purple);transform:translateY(-2px)}
.footer__social svg{width:20px;height:20px}
.footer__col h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:18px}
.footer__col a{display:block;color:rgba(255,255,255,.85);font-size:15px;padding:5px 0}
.footer__col a:hover{color:#fff}
.footer__logo{display:flex;align-items:center;gap:13px}
.footer__logo-mark{width:46px;height:auto;flex:0 0 auto}
.footer__wordmark{font-size:clamp(20px,5vw,88px);font-weight:800;letter-spacing:-.02em;line-height:.9;white-space:nowrap;color:rgba(255,255,255,.12);padding-block:20px 4px;text-align:center}
.footer__legal{padding-block:28px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);font-size:13px}

/* ---------- mobile sticky action bar ---------- */
/* Hidden on desktop — the header already carries the phone + estimate CTA. */
.mobile-bar{display:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px)}
.no-anim .reveal{opacity:1;transform:none}

/* ---------- responsive (global chrome) ---------- */
@media(max-width:980px){
  :root{--pad:24px}
  /* Solid header from the start on mobile — not only after scroll */
  .nav{background:#fff;box-shadow:0 1px 0 var(--line)}
  .nav .wordmark{color:var(--purple)}
  .nav__burger span{background:var(--ink)}
  .nav__links,.nav__right{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:20px 24px;gap:6px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .nav.open .nav__links a{color:var(--ink);padding:10px 0}

  /* sticky bottom action bar — compact call + estimate buttons */
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;gap:10px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(20,18,26,.10)}
  .mobile-bar__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px 8px;border-radius:10px;border:2px solid var(--purple);transition:.2s var(--ease)}
  .mobile-bar__btn svg{width:17px;height:17px;flex:0 0 auto}
  .mobile-bar__btn--call{color:var(--purple);background:#fff}
  .mobile-bar__btn--cta{color:#fff;background:var(--purple)}
  .mobile-bar__btn:active{transform:translateY(1px)}
  /* keep the footer's last rows clear of the fixed bar */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media(max-width:767px){
  /* mobile: 20px side gutters, container otherwise full-width.
     --pad also drives the carousel bleed (margin-inline:-var(--pad)),
     so carousels stay full-bleed / run off-screen, aligned to 20px. */
  :root{--pad:20px}
  /* footer: single column — blocks stack, no squished columns */
  .footer__top{grid-template-columns:1fr;gap:34px;padding-block:56px 44px}
}
/* very narrow phones — keep both bar labels on one line each */
@media(max-width:380px){
  .mobile-bar__btn{font-size:11.5px;letter-spacing:.02em;gap:6px;padding:11px 6px}
  .mobile-bar__btn svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}