/* Redwood Coastal Power Wash & Paint - premium review homepage styles */
/* Coastal forest palette; system fonts only; no remote font/CDN imports */

:root{
  --bark:#4b2e1e;
  --redwood:#6e3b2e;
  --forest-deep:#1f3d2b;
  --forest-mid:#345c3f;
  --fog:#9fb8c4;
  --sand:#e9e1d0;
  --cream:#f7f4ec;
  --charcoal:#23262b;
  --gold:#c9a66b;
  --line:#d8cfbd;
  --text:#2a2e28;
  --radius:10px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.5;
}
h1,h2,h3{
  font-family: Georgia, "Times New Roman", serif;
  color:var(--forest-deep);
  margin:0 0 .5em;
  line-height:1.2;
}
img,svg{max-width:100%;}
a{color:var(--forest-mid);}

.skip-link{
  position:absolute;
  left:.5rem; top:-3rem;
  background:var(--forest-deep);
  color:var(--cream);
  padding:.6rem 1rem;
  border-radius:6px;
  z-index:1000;
  transition:top .15s ease;
}
.skip-link:focus{top:.5rem;}

:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(247,244,236,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none;}
.logo-slot{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:0 0 auto;
  /* Reserved space for the approved logo asset; intentionally empty until supplied. */
}
.footer-brand .logo-slot{width:28px; height:28px;}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-name{font-family:Georgia,serif; font-weight:700; color:var(--forest-deep); font-size:1.05rem;}
.brand-tagline{font-size:.72rem; color:var(--redwood); letter-spacing:.04em; text-transform:uppercase;}
.primary-nav{margin-left:auto;}
.nav-links{display:flex; gap:1.1rem; list-style:none; margin:0; padding:0;}
.nav-links a{text-decoration:none; color:var(--text); font-size:.95rem;}
.nav-links a:hover{color:var(--forest-mid);}
.nav-cta{
  background:var(--forest-mid); color:#fff; text-decoration:none;
  padding:.55rem 1rem; border-radius:6px; font-size:.9rem; white-space:nowrap;
}
.nav-cta:hover{background:var(--forest-deep);}
@media (max-width:820px){
  .nav-links{display:none;}
  .brand-tagline{display:none;}
}

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; padding:.85rem 1.4rem;
  border-radius:6px; font-weight:600; font-size:1rem;
}
.btn-primary{background:var(--forest-mid); color:#fff;}
.btn-primary:hover{background:var(--forest-deep);}
.btn-secondary{background:transparent; color:var(--forest-deep); border:2px solid var(--forest-mid);}
.btn-secondary:hover{background:var(--forest-mid); color:#fff;}

/* Hero */
.hero{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:2rem;
  padding:2.2rem 1rem 1rem;
  align-items:center;
}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr 1fr; padding:3rem 1.5rem 1.5rem;}
}
.hero-copy h1{font-size:clamp(2rem,4.5vw,2.9rem);}
.hero-sub{font-size:1.05rem; max-width:38ch; color:var(--text);}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.2rem;}

.hero-stage{position:relative;}
.house-art{width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:0 8px 30px rgba(31,61,43,.18);}
.hero-caption{margin:.7rem 0 0; font-weight:600; color:var(--forest-deep); min-height:1.4em; font-size:.98rem;}

.intro-skip{
  display:none;
  position:absolute; top:.7rem; right:.7rem;
  background:rgba(31,61,43,.85); color:#fff; border:none;
  padding:.5rem .8rem; border-radius:6px; font-size:.8rem; cursor:pointer;
}
.intro-skip:hover{background:var(--forest-deep);}
.js .intro-skip{display:inline-flex;}

/* Scene ships finished. The single JS timeline owns all animated properties. */
.intro-skip:not([hidden]){display:inline-flex}
[hidden]{display:none!important}
.house-art .diamond{transform-box:view-box;transform-origin:0 0}
.house-art .tool-wand,.house-art .tool-sprayer{pointer-events:none}

/* Transition strap */
.transition-strap{
  background:var(--forest-deep); color:var(--cream);
  text-align:center; padding:.8rem 1rem; font-weight:600; letter-spacing:.02em;
}

/* Services */
.services{max-width:var(--maxw); margin:0 auto; padding:3rem 1rem;}
.services h2, .process h2, .estimate h2{text-align:center; font-size:1.9rem; margin-bottom:1.6rem;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; box-shadow:0 3px 10px rgba(31,61,43,.06);
}
.card h3{font-size:1.1rem; margin-bottom:.4rem;}
.card p{margin:0; font-size:.94rem; color:var(--text);}

/* Process */
.process{background:var(--sand); padding:3rem 1rem;}
.process-list{
  max-width:760px; margin:0 auto; list-style:none; padding:0;
  display:flex; flex-direction:column; gap:1.3rem;
}
.process-list li{display:flex; gap:1rem; align-items:flex-start;}
.step-num{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--forest-mid); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.process-list h3{font-size:1.05rem; margin-bottom:.25rem;}
.process-list p{margin:0; font-size:.94rem;}

/* Estimate */
.estimate{max-width:820px; margin:0 auto; padding:3rem 1rem 4rem;}
.estimate-intro{text-align:center; max-width:56ch; margin:0 auto 1.4rem;}
.estimate-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem;
}
.estimate-notice{
  background:#fff7e6; border:1px solid #e3c98f; border-radius:6px;
  padding:.75rem 1rem; font-size:.9rem; margin-top:0;
}
.estimate-panel fieldset{
  border:1px solid var(--line); border-radius:8px; padding:1rem;
  display:grid; gap:.9rem;
}
.estimate-panel legend{font-weight:700; padding:0 .4rem; color:var(--forest-deep);}
.estimate-panel label{display:flex; flex-direction:column; gap:.3rem; font-size:.9rem;}
.estimate-panel input, .estimate-panel select{
  padding:.55rem; border:1px solid var(--line); border-radius:5px; background:#f4f1ea;
}
.estimate-panel fieldset[disabled]{opacity:.75;}
.estimate-panel fieldset[disabled] input,
.estimate-panel fieldset[disabled] select,
.estimate-panel fieldset[disabled] button{cursor:not-allowed;}
.estimate-panel button{
  justify-self:start; background:var(--forest-mid); color:#fff; border:none;
  padding:.7rem 1.2rem; border-radius:6px; font-weight:600;
}

/* Footer */
.site-footer{background:var(--forest-deep); color:var(--cream); padding:2.2rem 1rem;}
.footer-inner{max-width:var(--maxw); margin:0 auto; text-align:center;}
.footer-brand{display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:.6rem;}
.footer-name{color:var(--cream);}
.footer-fine{font-size:.78rem; opacity:.8; margin-top:1rem;}
.site-footer p{margin:.25rem 0;}

/* Refinement03: give the architectural scene room, without the floating-card treatment. */
.hero{max-width:1440px;margin-inline:auto}
.house-art{border-radius:0;box-shadow:none}
@media(min-width:900px){.hero{grid-template-columns:.82fr 1.35fr;gap:2.5rem;padding-block:4rem 2rem}.hero-copy{padding-left:1rem}.hero-copy h1{font-size:clamp(2.4rem,3.8vw,3.5rem)}.hero-caption{padding-top:.6rem;border-top:1px solid #1f3d2b33}}

/* Unified editorial review: useful connected pages, not disconnected concepts. */
html{scroll-padding-top:110px}.logo-slot:empty{display:none}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.69rem;font-weight:600;color:var(--redwood);margin-bottom:1.5rem}.hero-copy h1{font-weight:400;letter-spacing:-.035em}.hero-copy .hero-sub{line-height:1.8}.home-story{max-width:1180px;margin:auto;padding:6rem 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:5rem;border-bottom:1px solid var(--line)}.home-story h2,.section-heading h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:400;line-height:1.1;text-align:left}.home-story p:not(.eyebrow){font-size:1.1rem;line-height:1.85;margin:0 0 1.5rem}.home-story em,.section-heading em{color:var(--redwood)}.editorial-link{font-size:.9rem;text-underline-offset:5px}.services{padding:5rem 1.5rem}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}.card{display:block;text-decoration:none;border:0;border-top:1px solid var(--forest-mid);padding:1.5rem 0;background:transparent;box-shadow:none;border-radius:0}.card h3{font-size:1.6rem;font-weight:400}.card p{line-height:1.8}.service-number{display:block;color:var(--redwood);font-size:.75rem;margin-bottom:2rem}.card-link{display:block;margin-top:1.5rem;font-size:.85rem;text-decoration:underline;text-underline-offset:4px}.project-invitation{padding:5rem max(1.5rem,calc((100vw - 1120px)/2));background:var(--forest-deep);color:var(--cream)}.project-invitation h2{color:var(--cream);font-size:clamp(2rem,4vw,3.5rem);font-weight:400}.project-invitation .eyebrow{color:#d9be91}.project-invitation p:not(.eyebrow){max-width:50ch;line-height:1.8;margin-bottom:2rem}.btn-light{background:var(--cream);color:var(--forest-deep)}.process{padding-block:5rem}.process h2,.estimate h2{font-weight:400;font-size:2.5rem}.intro-replay{border:0;background:transparent;color:var(--forest-deep);padding:.6rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.footer-navigation{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin:1.5rem 0}.footer-navigation a{color:var(--cream)}
@media(max-width:820px){.nav-inner{flex-wrap:wrap;justify-content:space-between}.primary-nav{order:3;flex-basis:100%;margin:0}.nav-links{display:flex;justify-content:center;gap:1.7rem;padding:.4rem 0}.brand-tagline{display:block}.nav-cta{font-size:.75rem;padding:.6rem .75rem}.brand-name{font-size:1rem}.home-story{grid-template-columns:1fr;gap:1.5rem;padding:3.5rem 1.25rem}.card-grid{grid-template-columns:1fr;gap:1rem}.section-heading{align-items:start;flex-direction:column}.services{padding:3.5rem 1.25rem}.hero-stage{min-width:0}.hero-copy{min-width:0}.hero{padding-inline:1.25rem}.project-invitation{padding:3.5rem 1.25rem}}

/* Align the homepage with the connected editorial pages. */
.nav-inner{max-width:1380px;padding:24px 5%}.brand-name{font-size:26px;letter-spacing:-.7px;line-height:1.12}.brand-tagline{font:10px/1.4 system-ui,sans-serif;letter-spacing:.19em;text-transform:uppercase;margin-top:7px}.nav-cta,.btn{border-radius:0}.hero-copy h1{font-size:clamp(42px,4.5vw,64px);line-height:1.05;letter-spacing:-.045em}.hero-copy .hero-sub{max-width:39ch}.hero-actions{gap:12px}.hero-stage{align-self:center}.hero-caption{font-size:12px;letter-spacing:.02em;font-weight:400}.intro-replay{font-size:12px}.hero{padding-block:4rem 3rem}
@media(max-width:820px){.nav-inner{padding:20px 6%;gap:18px}.brand-name{font-size:22px}.nav-cta{font-size:11px}.hero{padding-block:2.5rem}.hero-copy h1{font-size:46px}.hero-copy .hero-sub{font-size:15px}.hero-actions .btn{font-size:12px;padding:13px 17px}.hero-stage{margin-top:1rem}}

.intro-replay[hidden]{display:inline-block!important;visibility:hidden}