/* ============================================================
   A/C Valley — Photo-forward / lifestyle (BRIGHT) archetype.
   Bright off-white canvas, cool-cyan accent, warm-clay secondary.
   Bricolage Grotesque (display) + Hanken Grotesk (body).
   ⛔ Photos at 100% brightness. No dark scrims over imagery.
   ============================================================ */

:root{
  --bg:        oklch(0.985 0.006 95);
  --ink:       oklch(0.28 0.018 240);
  --muted:     oklch(0.52 0.015 240);
  --accent:    oklch(0.66 0.13 215);
  --accent-deep:oklch(0.50 0.12 220);
  --clay:      oklch(0.68 0.12 50);
  --surface:   oklch(0.965 0.008 95);
  --surface-2: oklch(0.945 0.010 95);
  --line:      oklch(0.90 0.008 100);
  --white:     oklch(0.995 0.003 95);

  --maxw: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.2rem);
  --r: 18px;
  --r-sm: 12px;
  --shadow-soft: 0 10px 30px -12px oklch(0.55 0.04 230 / 0.22);
  --shadow-card: 0 14px 40px -18px oklch(0.45 0.05 235 / 0.30);

  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,0.96rem + 0.2vw,1.12rem);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-0.02em; margin:0}
h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem); font-weight:700}
h3{font-size:1.18rem; font-weight:600; letter-spacing:-0.01em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding:clamp(3.4rem,7vw,6.4rem) 0}
.eyebrow{
  font:600 0.78rem/1 var(--font-body); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 0.9rem;
}
.lead{font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem); color:var(--ink); line-height:1.5}
.muted{color:var(--muted)}
.accent{color:var(--accent-deep)}
.clay{color:var(--clay)}

/* reveal */
.reveal{opacity:0; transform:translateY(20px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55ch; font-family:var(--font-body);
  font-weight:600; font-size:1rem; padding:0.85em 1.5em; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-call{ background:var(--accent); color:var(--white); box-shadow:var(--shadow-soft) }
.btn-call:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card) }
.btn-ghost{ background:var(--white); color:var(--accent-deep); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--accent); transform:translateY(-2px) }
.btn-lg{ font-size:1.08rem; padding:1em 1.7em }
.btn-xl{ font-size:1.2rem; padding:1.05em 2em }
.phone-ico{ width:1.05em; height:1.05em; display:inline-block;
  background:currentColor; -webkit-mask:var(--phm) center/contain no-repeat; mask:var(--phm) center/contain no-repeat }
:root{ --phm:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z"/></svg>') }

/* ---------- NAV (light over bright photo -> ink-on-white scrolled) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  /* at-rest over a BRIGHT hero: a soft frosted-light bar keeps dark nav text legible over any photo */
  background:oklch(0.99 0.006 95 / 0.55); backdrop-filter:blur(8px) saturate(1.1);
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav-inner{ display:flex; align-items:center; gap:1.2rem; height:72px }
.brand{ display:flex; align-items:center; gap:0.6ch; font-family:var(--font-display); font-weight:800;
  font-size:1.32rem; letter-spacing:-0.02em; color:var(--ink); text-shadow:none; }
.brand-mark{ width:30px; height:30px; border-radius:9px; background:var(--accent);
  display:inline-grid; place-items:center; box-shadow:0 4px 14px oklch(0.5 0.1 220 / .4) }
.brand-mark::before{ content:""; width:14px; height:14px; border-radius:50%;
  border:2.6px solid #fff; border-top-color:transparent; border-right-color:transparent; transform:rotate(45deg) }
.brand-thin{ font-weight:600; opacity:.85 }
.nav-links{ display:flex; gap:1.6rem; margin-left:auto; align-items:center }
.nav-call.in-menu{ display:none } /* only shown inside the open mobile menu */
.nav-links a{ font-weight:600; font-size:0.98rem; color:var(--ink); opacity:.86;
  text-shadow:none; position:relative; padding:.2em 0 }
.nav-links a:hover{ opacity:1; color:var(--accent-deep) }
.nav-links a.active{ color:var(--accent-deep) }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); border-radius:2px }
.nav-call{ margin-left:0.4rem }

.nav.scrolled{ background:oklch(0.99 0.005 95 / 0.94); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -16px oklch(0.5 0.05 230 / .4) }
.nav.scrolled .nav-links a{ opacity:.82 }

/* mobile nav */
.nav-toggle{ display:none; margin-left:auto; width:42px; height:42px; border:none; background:transparent; cursor:pointer; position:relative }
.nav-toggle span{ position:absolute; left:9px; right:9px; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s }
.nav-toggle span:nth-child(1){top:14px} .nav-toggle span:nth-child(2){top:20px} .nav-toggle span:nth-child(3){top:26px}

/* ---------- HERO (full-bleed bright photo, text lower-left, LIGHT wash) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden }
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:center 40% }
/* LIGHT wash only — brightens the lower-left for text, NEVER darkens the photo */
.hero-wash{ position:absolute; inset:0;
  background:linear-gradient(105deg, oklch(0.99 0.006 95 / 0.78) 0%, oklch(0.99 0.006 95 / 0.30) 34%, transparent 58%);
  z-index:1 }
.hero-wash-b{ position:absolute; inset:0;
  background:linear-gradient(to top, oklch(0.99 0.006 95 / 0.55) 0%, transparent 30%); z-index:1 }
.hero-content{ position:relative; z-index:2; padding-bottom:clamp(3rem,7vh,6rem); padding-top:96px }
.hero-eyebrow{ color:var(--accent-deep); display:inline-flex; align-items:center; gap:.6ch;
  background:oklch(0.99 0.006 95 / 0.7); padding:.4em .9em; border-radius:999px; backdrop-filter:blur(4px) }
.hero-h1{ font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem); font-weight:800; color:var(--ink);
  max-width:16ch; margin:.7rem 0 0 }
.hero-h1 .cool{ color:var(--accent-deep) }
.hero-line{ display:block; overflow:hidden }
.hero-line .mask{ display:block; transform:translateY(105%) }
.hero-sub{ font-size:clamp(1.08rem,1rem + 0.5vw,1.35rem); color:var(--ink); max-width:46ch;
  margin:1.2rem 0 0; line-height:1.5; font-weight:500 }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.8rem }
.hero-trust{ font-size:.92rem; color:var(--muted); font-weight:600 }
.hero-trust b{ color:var(--ink) }
/* cool-air ripple breath */
.cool-breath{ position:absolute; z-index:1; width:46vmax; height:46vmax; right:-14vmax; top:-10vmax;
  border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, oklch(0.8 0.10 215 / 0.40) 0%, transparent 62%) }

/* ---------- INTRO / FEEL THE COOL ---------- */
.intro-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center }
.intro-photo{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card) }
.intro-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.intro-copy h2{ margin-bottom:1rem }

/* ---------- SERVICES (asymmetric, not identical grid) ---------- */
.svc-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2.2rem }
.svc-head h2{ max-width:18ch }
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem }
.svc{ background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.4rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s }
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent }
.svc h3{ margin:.9rem 0 .4rem }
.svc p{ color:var(--muted); font-size:.98rem; margin:0 }
.svc-ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:oklch(0.93 0.04 215); color:var(--accent-deep) }
.svc-ico svg{ width:25px; height:25px }
/* asymmetric spans so no two consecutive cards share a skeleton */
.svc.s1{ grid-column:span 3 } .svc.s2{ grid-column:span 3 }
.svc.s3{ grid-column:span 2 } .svc.s4{ grid-column:span 2 } .svc.s5{ grid-column:span 2 }
.svc.s6{ grid-column:span 6; display:flex; align-items:center; gap:1.4rem; background:var(--surface) }
.svc.s6 .svc-ico{ background:oklch(0.92 0.05 50); color:var(--clay) }
.svc.s6 .svc-body{ flex:1 }
.svc.s6 h3{ margin:0 0 .25rem }

/* ---------- PROOF BAND (honest fix stories) ---------- */
.proof-band{ background:var(--surface) }
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:2rem }
.proof-card{ background:var(--white); border-radius:var(--r); padding:2rem 1.9rem;
  border:1px solid var(--line); box-shadow:var(--shadow-soft) }
.proof-card .big{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--accent-deep); letter-spacing:-0.02em }
.proof-card .strike{ color:var(--clay); text-decoration:line-through; text-decoration-thickness:2px }
.proof-card blockquote{ margin:0 0 1rem; font-size:1.12rem; line-height:1.55 }
.proof-card cite{ color:var(--muted); font-style:normal; font-weight:600; font-size:.95rem }

/* ---------- LIFESTYLE FULL-BLEED BAND (bright, NO dark scrim) ---------- */
.band{ position:relative; min-height:62svh; display:flex; align-items:center; overflow:hidden }
.band-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
/* light wash for text legibility — brightens, never darkens */
.band-wash{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, oklch(0.99 0.006 95 / 0.82) 0%, oklch(0.99 0.006 95 / 0.35) 40%, transparent 66%) }
.band-content{ position:relative; z-index:2; padding-block:clamp(2.5rem,6vw,4.5rem) }
.band h2{ max-width:18ch; color:var(--ink) }
.band p{ max-width:42ch; color:var(--ink); font-weight:500; margin-top:.8rem }

/* ---------- REVIEWS ---------- */
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.2rem }
.rev{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.6rem;
  display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-soft) }
.rev .stars{ color:var(--clay); letter-spacing:2px; font-size:.95rem }
.rev blockquote{ margin:0; font-size:1.02rem; line-height:1.55; flex:1 }
.rev-author{ display:flex; align-items:center; gap:.7ch; font-weight:600; font-size:.95rem; color:var(--ink) }
.av{ width:36px; height:36px; border-radius:50%; background:oklch(0.92 0.05 215); color:var(--accent-deep);
  display:grid; place-items:center; font-size:.78rem; font-weight:700 }
.rev.wide{ grid-column:span 1 }

/* ---------- PILLARS ---------- */
.pillars-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.4rem }
.pillar{ text-align:left }
.pillar .pn{ font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--accent);
  line-height:1; display:block; margin-bottom:.6rem; opacity:.85 }
.pillar h3{ margin-bottom:.3rem }
.pillar p{ color:var(--muted); font-size:.98rem; margin:0 }

/* ---------- SERVICE AREA ---------- */
.area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center }
.chips{ display:flex; flex-wrap:wrap; gap:.7rem }
.chip{ background:var(--white); border:1px solid var(--line); border-radius:999px; padding:.55em 1.1em;
  font-weight:600; font-size:.95rem }
.chip-clay{ background:oklch(0.95 0.04 50); border-color:transparent; color:var(--clay) }

/* ---------- CTA BAND ---------- */
.cta-band{ background:linear-gradient(135deg, oklch(0.96 0.03 215) 0%, oklch(0.97 0.02 95) 100%); }
.cta-inner{ text-align:center; padding:clamp(3rem,7vw,5.5rem) 0 }
.cta-inner h2{ max-width:20ch; margin-inline:auto }
.cta-sub{ color:var(--muted); font-size:1.15rem; margin:1rem auto 2rem; max-width:40ch }
.cta-lic{ margin-top:1.4rem; color:var(--muted); font-weight:600; font-size:.95rem }

/* ---------- PAGE HERO (sub-pages, bright compact) ---------- */
.page-hero{ position:relative; padding:128px 0 clamp(2.5rem,5vw,4rem); overflow:hidden; background:var(--surface) }
.page-hero::after{ content:""; position:absolute; right:-10vmax; top:-12vmax; width:40vmax; height:40vmax;
  border-radius:50%; background:radial-gradient(circle, oklch(0.85 0.08 215 / .35) 0%, transparent 65%); z-index:0 }
.page-hero .wrap{ position:relative; z-index:1 }
.page-hero h1{ font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem); font-weight:800; max-width:18ch }
.page-hero p{ color:var(--muted); font-size:1.15rem; max-width:50ch; margin-top:1rem }

/* ---------- SERVICE DETAIL BLOCKS (alternating) ---------- */
.sd{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  padding:clamp(2.2rem,5vw,3.6rem) 0; border-bottom:1px solid var(--line) }
.sd:last-of-type{ border-bottom:none }
.sd.flip .sd-media{ order:2 }
.sd-media{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card) }
.sd-media img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.sd-num{ font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:1.1rem; letter-spacing:.04em }
.sd h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); margin:.4rem 0 .8rem }
.sd ul{ margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem }
.sd li{ position:relative; padding-left:1.6em; color:var(--muted) }
.sd li::before{ content:""; position:absolute; left:0; top:.55em; width:.7em; height:.7em; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px oklch(0.85 0.08 215 / .4) }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:start }
.about-photo{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card) }
.about-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.about-copy h2{ margin-bottom:1rem }
.named{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem }
.named .card{ background:var(--surface); border-radius:var(--r-sm); padding:1.1rem 1.3rem; flex:1; min-width:160px }
.named .role{ color:var(--accent-deep); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em }
.named .who{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin-top:.2rem }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start }
.contact-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.9rem; box-shadow:var(--shadow-soft) }
.contact-card + .contact-card{ margin-top:1.2rem }
.contact-line{ display:flex; align-items:center; gap:.9ch; margin-bottom:.8rem; font-size:1.08rem }
.contact-line:last-child{ margin-bottom:0 }
.contact-line .ci{ width:38px; height:38px; border-radius:11px; background:oklch(0.93 0.04 215); color:var(--accent-deep);
  display:grid; place-items:center; flex:none }
.contact-line .ci svg{ width:19px; height:19px }
.contact-line a{ font-weight:600 }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem }
.field label{ font-weight:600; font-size:.92rem }
.field input, .field textarea{ font-family:inherit; font-size:1rem; padding:.8em 1em; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--bg); color:var(--ink); transition:border-color .2s }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent) }
.form-note{ display:none; margin-top:.8rem; padding:.9em 1.1em; background:oklch(0.95 0.04 215); border-radius:var(--r-sm);
  color:var(--accent-deep); font-weight:500; font-size:.95rem }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:oklch(0.85 0.01 240); padding:clamp(2.6rem,5vw,3.6rem) 0 2rem }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem }
.foot-brand{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; margin-bottom:.6rem }
.footer h4{ font-family:var(--font-body); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em;
  color:oklch(0.72 0.02 240); margin:0 0 .9rem }
.foot-grid a{ color:oklch(0.88 0.01 240); display:block; margin-bottom:.5rem; font-size:.98rem }
.foot-grid a:hover{ color:var(--accent) }
.foot-bottom{ border-top:1px solid oklch(0.38 0.02 240); padding-top:1.4rem; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:.6rem; color:oklch(0.66 0.02 240); font-size:.88rem }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  .svc-grid{ grid-template-columns:repeat(2,1fr) }
  .svc.s1,.svc.s2,.svc.s3,.svc.s4,.svc.s5{ grid-column:span 1 }
  .svc.s6{ grid-column:span 2 }
  .rev-grid{ grid-template-columns:repeat(2,1fr) }
  .pillars-grid{ grid-template-columns:repeat(2,1fr) }
  .intro-grid, .area-grid, .about-grid, .contact-grid{ grid-template-columns:1fr }
  .sd, .sd.flip{ grid-template-columns:1fr }
  .sd.flip .sd-media{ order:0 }
  .proof-grid{ grid-template-columns:1fr }
  .about-photo img{ aspect-ratio:4/3 }
}
@media(max-width:640px){
  .nav-links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0; background:oklch(0.99 0.005 95 / 0.98);
    backdrop-filter:blur(12px); padding:.5rem 0; transform:translateY(-130%); transition:transform .3s ease;
    box-shadow:0 12px 30px -16px oklch(0.5 0.05 230 / .5); align-items:stretch }
  .nav-links.open{ transform:translateY(0) }
  .nav-links a{ color:var(--ink); text-shadow:none; padding:.9rem var(--pad); border-bottom:1px solid var(--line) }
  .nav-links a.active::after{ display:none }
  .nav-call{ display:none }
  .nav-toggle{ display:block }
  .nav-call.in-menu{ display:flex; margin:.7rem var(--pad); justify-content:center }
  .svc-grid{ grid-template-columns:1fr }
  .svc.s6{ grid-column:span 1; flex-direction:column; align-items:flex-start; text-align:left }
  .rev-grid{ grid-template-columns:1fr }
  .pillars-grid{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr }
  .hero{ min-height:92svh }
  .hero-h1{ max-width:none }
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .reveal{ opacity:1 !important; transform:none !important }
  .hero-line .mask{ transform:none !important }
}

/* ===== ZV SAMPLE BADGE — removable ===== */
.zv-sample-badge{display:none}
body[data-sample] .zv-sample-badge{
  display:flex; align-items:center; gap:.5ch; position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:999; padding:.45em .9em; border-radius:999px; font:600 .72rem/1 var(--font-body);
  letter-spacing:.03em; color:#fff; background:oklch(0.30 0.02 240 / 0.86); backdrop-filter:blur(8px);
  box-shadow:0 4px 18px oklch(0.3 0.03 230 /.35); text-decoration:none; pointer-events:auto;
}
.zv-sample-badge b{color:oklch(0.78 0.13 215)}
.zv-short{display:none}
@media(max-width:640px){
  .zv-sample-badge{font-size:.62rem; bottom:10px; left:auto; right:10px; transform:none; padding:.4em .8em; opacity:.94; white-space:nowrap}
  .zv-long{display:none} .zv-short{display:inline}
}