/* ============================================================
   805 PowerWash — refined corporate system (v7)
   Direction: quiet, premium B2B. Geometric Sora display, Inter
   body. Deep navy ink on white, restrained cyan accent, generous
   whitespace, hairline structure, smooth staggered motion.
   ============================================================ */

:root{
  --ink:        #0c2230;
  --ink-soft:   #5a6e79;
  --brand:      #0e6e98;
  --navy:       #081d29;
  --navy-2:     #0c2a3b;
  --accent:     #16b6d4;
  --accent-soft:#86d8e8;
  --amber:      #e0a13c;
  --amber-press:#cf9026;
  --paper:      #ffffff;
  --mist:       #f4f8f9;
  --mist-2:     #eaf1f4;
  --line:       rgba(12,34,48,0.09);
  --line-2:     rgba(12,34,48,0.15);
  --clean:      #f8fbfc;

  --display: "Sora", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --t-label: 0.72rem;
  --t-sm:    clamp(0.9rem, 0.87rem + 0.12vw, 0.96rem);
  --t-body:  clamp(1rem, 0.97rem + 0.14vw, 1.08rem);
  --t-lede:  clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  --t-h3:    clamp(1.12rem, 1.05rem + 0.3vw, 1.3rem);
  --t-h2:    clamp(1.7rem, 1.35rem + 1.55vw, 2.7rem);
  --t-h1:    clamp(2rem, 1.5rem + 2.1vw, 3.25rem);

  --maxw: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow:   0 1px 2px rgba(12,34,48,0.04), 0 18px 40px -24px rgba(12,34,48,0.28);
  --shadow-h: 0 2px 6px rgba(12,34,48,0.07), 0 30px 60px -28px rgba(12,34,48,0.40);
  --ease: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body); font-size:var(--t-body); line-height:1.65;
  color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.12; letter-spacing:-0.02em; color:var(--ink); }
strong,b{ font-weight:600; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4rem, 9vw, 8rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--body); font-weight:600; font-size:var(--t-label);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--brand);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block; }
.section-title{ font-size:var(--t-h2); margin-top:1.1rem; max-width:20ch; text-wrap:balance; }
.lede{ font-size:var(--t-lede); color:var(--ink-soft); margin-top:1.2rem; max-width:54ch; font-weight:400; line-height:1.55; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--body); font-weight:600; font-size:0.96rem; line-height:1;
  padding:0.95rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn-call{ background:var(--amber); color:#3a2a06; box-shadow:0 10px 26px -12px rgba(224,161,60,0.65); }
.btn-call:hover{ background:var(--amber-press); transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(224,161,60,0.7); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.32); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); transform:translateY(-2px); }

.site-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.85); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s; }
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(12,34,48,0.4); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1rem; }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:38px; width:auto; }
.nav-links{ display:flex; gap:2rem; margin-left:auto; }
.nav-links a{ position:relative; font-size:0.95rem; font-weight:500; color:var(--ink-soft); transition:color .18s; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1.1rem; }
.nav-phone{ font-weight:600; font-size:0.95rem; color:var(--brand); white-space:nowrap; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

.hero{ position:relative; overflow:hidden; color:var(--clean);
  background:
    radial-gradient(110% 80% at 82% -10%, rgba(22,182,212,0.20), transparent 50%),
    radial-gradient(80% 90% at 0% 115%, rgba(14,110,152,0.30), transparent 55%),
    linear-gradient(160deg, #0d4f6e 0%, #0a2f43 55%, #081d29 100%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,4vw,4rem); align-items:center; padding-block:clamp(3.5rem,8vw,7rem); }
.hero-kicker{ display:block; font-weight:600; font-size:var(--t-label); letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-soft); }
.hero h1{ color:#f8fbfc; font-size:var(--t-h1); margin-top:1.1rem; line-height:1.1; letter-spacing:-0.025em; text-wrap:balance; max-width:17ch; }
.hero h1 .clean{ color:var(--accent-soft); }
.hero p{ font-size:var(--t-lede); color:rgba(248,251,252,0.86); margin-top:1.4rem; max-width:50ch; font-weight:400; line-height:1.55; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.7rem; border-top:1px solid rgba(255,255,255,0.14); }
.hero-trust div{ font-size:0.84rem; color:rgba(248,251,252,0.74); padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid rgba(255,255,255,0.13); }
.hero-trust div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-trust b{ display:block; font-weight:600; font-size:0.96rem; color:#fff; margin-bottom:0.15rem; letter-spacing:0; }

.hero-photo{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.12); aspect-ratio:4/3.3; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:slowzoom 14s ease-out forwards; }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,29,41,0.45), transparent 45%); }
.hero-photo figcaption{ position:absolute; left:14px; bottom:13px; z-index:2; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:#eaf6fb; font-weight:500; }
@keyframes slowzoom{ to{ transform:scale(1); } }

.industries{ background:var(--navy); border-top:1px solid rgba(255,255,255,0.07); }
.ind-row{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; padding:1.1rem 0; }
.ind-label{ font-size:var(--t-label); letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-soft); font-weight:600; margin-right:0.4rem; }
.ind-chip{ font-size:0.82rem; font-weight:500; color:#ddf0f5; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.13); padding:0.4rem 0.85rem; border-radius:999px; }

.services{ background:#fff; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.svc{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-h); }
.svc-photo{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-2); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.svc:hover .svc-photo img{ transform:scale(1.06); }
.svc h3{ font-size:var(--t-h3); margin:1.4rem 1.5rem 0; }
.svc p{ margin:0.55rem 1.5rem 1.6rem; color:var(--ink-soft); font-size:var(--t-sm); line-height:1.58; }

.res-band{ margin-top:4rem; padding-top:3rem; border-top:1px solid var(--line); }
.res-grid{ margin-top:2.4rem; }

.specs{ background:var(--navy); color:var(--clean); }
.specs-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); overflow:hidden; }
.spec{ padding:1.9rem 1.6rem; border-right:1px solid rgba(255,255,255,0.1); }
.spec:last-child{ border-right:none; }
.spec b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.2rem+1vw,2rem); color:#fff; letter-spacing:-0.02em; }
.spec span{ display:block; margin-top:0.45rem; color:rgba(248,251,252,0.7); font-size:0.86rem; line-height:1.5; }

.why{ background:var(--mist); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.points{ margin-top:2rem; display:grid; gap:1.6rem; }
.point{ display:flex; gap:1rem; }
.point .dot{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(22,182,212,0.12); color:var(--brand); display:grid; place-items:center; font-size:0.85rem; font-weight:700; }
.point h3{ font-size:var(--t-h3); }
.point p{ color:var(--ink-soft); font-size:var(--t-sm); margin-top:0.25rem; line-height:1.55; }
.quote-card{ background:linear-gradient(155deg, var(--navy-2), var(--navy)); color:#fff; border-radius:var(--radius); padding:clamp(1.8rem,3vw,2.8rem); box-shadow:var(--shadow); position:relative; align-self:start; }
.quote-card .mark-q{ font-family:var(--display); font-size:4rem; line-height:0.4; color:var(--accent); opacity:0.5; }
.quote-card blockquote{ font-size:var(--t-lede); font-weight:400; line-height:1.5; margin-top:0.8rem; }
.quote-card cite{ display:block; margin-top:1.4rem; font-style:normal; font-size:0.85rem; color:var(--accent-soft); letter-spacing:0.02em; }

.area{ background:#fff; }
.area-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.cities{ display:flex; flex-wrap:wrap; gap:0.65rem; }
.city{ font-size:0.88rem; font-weight:500; padding:0.5rem 0.95rem; border-radius:999px; background:var(--mist); border:1px solid var(--line); color:var(--ink-soft); transition:.2s; }
.city.home{ background:var(--brand); border-color:var(--brand); color:#fff; }
.city:hover{ border-color:var(--accent); color:var(--ink); }

.faq{ background:var(--mist); }
.faq-list{ max-width:860px; margin-top:2.4rem; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; margin-bottom:0.8rem; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faq-item[open]{ border-color:var(--line-2); box-shadow:var(--shadow); }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.2rem 1.4rem; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color:var(--accent); line-height:1; transition:transform .25s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 1.4rem 1.3rem; margin:0; color:var(--ink-soft); font-size:var(--t-sm); line-height:1.62; }

.cta{ background:linear-gradient(160deg, #0d4f6e 0%, #0a2f43 60%, #081d29 100%); color:var(--clean); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.cta h2{ font-size:var(--t-h2); color:#fff; }
.cta p{ color:rgba(248,251,252,0.82); margin-top:1.1rem; font-size:var(--t-lede); font-weight:400; max-width:42ch; line-height:1.55; }
.phone-big{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,1.2rem+2vw,2.6rem); color:#fff; margin-top:1.6rem; display:inline-block; letter-spacing:-0.02em; }
.phone-big:hover{ color:var(--accent-soft); }
.form{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem); backdrop-filter:blur(8px); }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.4rem; color:var(--accent-soft); letter-spacing:0.02em; }
.field .opt{ font-weight:400; color:rgba(248,251,252,0.5); }
.field input,.field select,.field textarea{ width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-sm); padding:0.8rem 0.95rem; color:var(--clean); font-family:var(--body); font-size:0.97rem; transition:border-color .2s, background .2s; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(248,251,252,0.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,0.1); }
.field select option{ color:#0c2230; }
.form .btn-call{ width:100%; margin-top:0.4rem; }
.form-note{ font-size:0.8rem; color:rgba(248,251,252,0.58); margin-top:1rem; text-align:center; }

.site-footer{ background:var(--navy); color:rgba(248,251,252,0.72); padding-block:3.5rem 2.2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.foot-logo{ height:46px; width:auto; margin-bottom:0.3rem; }
.foot-grid h4{ font-family:var(--body); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1rem; font-weight:600; }
.foot-grid a{ display:block; color:rgba(248,251,252,0.72); padding:0.28rem 0; font-size:0.93rem; transition:color .18s; }
.foot-grid a:hover{ color:#fff; }
.foot-bottom{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; justify-content:space-between; font-size:0.82rem; color:rgba(248,251,252,0.55); }

.sprayline{ border:0; height:1px; background:var(--line); }
.hero + .sprayline, .industries + .sprayline{ display:none; }

.callbar{ display:none; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .why-grid, .area-grid, .cta-grid{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links, .nav-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .specs-grid{ grid-template-columns:1fr 1fr; }
  .spec{ border-bottom:1px solid rgba(255,255,255,0.1); }
  .spec:nth-child(2n){ border-right:none; }
  .spec:nth-last-child(-n+2){ border-bottom:none; }
}
@media (max-width:620px){
  .svc-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .hero-actions .btn{ width:100%; }
  .hero-trust{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 0; }
  .hero-trust div{ border-right:1px solid rgba(255,255,255,0.13); padding-right:1rem; margin-right:0; }
  .hero-trust div:nth-child(2n){ border-right:none; }
  body{ padding-bottom:64px; }
  .callbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; box-shadow:0 -8px 24px rgba(0,0,0,0.16); }
  .callbar a{ flex:1; text-align:center; padding:1rem 0.5rem; font-weight:600; font-size:0.95rem; }
  .callbar-call{ background:var(--amber); color:#3a2a06; }
  .callbar-quote{ background:#fff; color:var(--brand); border-left:1px solid var(--line); }
}

.mobile-menu{ display:none; padding:0.5rem 0 1.4rem; }
.mobile-menu a{ display:block; padding:0.85rem 0; border-top:1px solid var(--line); font-weight:500; color:var(--ink); }
.mobile-menu .btn-call{ margin-top:1.1rem; width:100%; color:#3a2a06; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-photo img{ transform:none; }
}