/* =========================================================
   Regal Lawn Installation — design system
   Brand: crown green + black + white (from logo)
   Standalone site. No shared assets with any other brand.
   ========================================================= */

:root{
  /* brand */
  --green:        #6FBE44;   /* primary crown green */
  --green-bright: #82D451;
  --green-deep:   #4E9A2E;
  --green-ink:    #2C5A1B;

  /* neutrals */
  --ink:     #0E1110;        /* near-black background */
  --ink-2:   #161B18;        /* raised dark surface */
  --ink-3:   #1E2521;
  --line-dk: rgba(255,255,255,.12);

  --paper:   #F6F8F4;        /* light section bg */
  --paper-2: #FFFFFF;
  --card:    #FFFFFF;
  --line:    #E3E8DF;

  --text:    #1A1E1B;        /* body text on light */
  --muted:   #5A635C;        /* secondary text on light */
  --text-dk: #EAF0E8;        /* body text on dark */
  --muted-dk:#A9B4A6;        /* secondary on dark */

  --shadow:  0 18px 50px -22px rgba(14,17,16,.55);
  --shadow-sm: 0 8px 24px -14px rgba(14,17,16,.45);
  --radius:  16px;
  --radius-lg: 26px;
  --maxw:    1180px;
  --gutter:  clamp(20px, 5vw, 56px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.3rem, 5.4vw, 4rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:clamp(1.2rem, 2.4vw, 1.5rem); }
p{ margin:0 0 1.1em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px, 9vw, 116px); }
.section--tight{ padding-block:clamp(44px, 6vw, 72px); }

/* dark / light surfaces */
.surface-dark{ background:var(--ink); color:var(--text-dk); }
.surface-dark h1,.surface-dark h2,.surface-dark h3{ color:#fff; }
.surface-ink2{ background:var(--ink-2); color:var(--text-dk); }
.surface-ink2 h2,.surface-ink2 h3{ color:#fff; }
.surface-paper{ background:var(--paper); }
.surface-white{ background:var(--paper-2); }

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-ink); /* #2C5A1B ~6.7:1 on light surfaces (AA) */
}
.surface-dark .eyebrow,.surface-ink2 .eyebrow,.hero .eyebrow{ color:var(--green-bright); }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; opacity:.8; }

.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--muted); max-width:60ch; }
.surface-dark .lead,.surface-ink2 .lead,.hero .lead{ color:var(--muted-dk); }

.section-head{ max-width:64ch; margin-bottom:clamp(32px,4vw,52px); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green); --fg:#0c1a06;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1;
  padding:.95em 1.5em; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  box-shadow:0 10px 24px -12px rgba(79,154,46,.8);
}
.btn:hover{ transform:translateY(-2px); background:var(--green-bright); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:1.1em 1.85em; font-size:1.05rem; }
.btn--ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4); box-shadow:none;
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.btn--dark{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn--dark:hover{ background:#000; }
.btn--block{ width:100%; }
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }

:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--green-bright); outline-offset:3px; border-radius:6px;
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(12,15,13,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-dk);
}
.nav{ display:flex; align-items:center; gap:1.5rem; height:74px; }
.nav__logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav__logo img{ height:38px; width:auto; }
.nav__links{
  display:flex; align-items:center; gap:1.7rem; margin-left:auto;
  list-style:none; padding:0; margin-block:0;
}
.nav__links a{
  font-weight:500; font-size:.97rem; color:var(--text-dk);
  padding:.4em 0; position:relative;
}
.nav__links a:hover{ color:#fff; }
.nav__links a[aria-current="page"]{ color:var(--green-bright); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--green-bright); transition:right .25s ease;
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ right:0; }
.nav__cta{ margin-left:.4rem; }
.nav__toggle{
  display:none; margin-left:auto; width:46px; height:46px;
  background:transparent; border:1px solid var(--line-dk); border-radius:12px;
  cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; display:block; width:20px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav__toggle span::before{ transform:translateY(-6px); }
.nav__toggle span::after{ transform:translateY(6px); }

@media (max-width:860px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line-dk);
    padding:.5rem var(--gutter) 1.4rem; margin:0;
    transform:translateY(-130%); visibility:hidden;
    transition:transform .3s ease, visibility 0s .3s; align-items:stretch;
  }
  .nav.open .nav__links{ transform:translateY(0); visibility:visible; transition:transform .3s ease; }
  .nav__links a{ padding:.95rem 0; border-bottom:1px solid var(--line-dk); font-size:1.05rem; }
  .nav__links a::after{ display:none; }
  .nav__links .nav__cta{ margin:1rem 0 0; }
  .nav__links .btn{ width:100%; }
  .nav.open .nav__toggle span{ background:transparent; }
  .nav.open .nav__toggle span::before{ transform:rotate(45deg); }
  .nav.open .nav__toggle span::after{ transform:rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; isolation:isolate; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,13,11,.62) 0%, rgba(10,13,11,.30) 38%, rgba(10,13,11,.72) 100%),
    radial-gradient(120% 90% at 18% 30%, rgba(10,13,11,.55), transparent 60%);
}
.hero__inner{ padding-block:clamp(90px, 16vw, 168px); max-width:760px; }
.hero h1{ color:#fff; margin-bottom:.4em; }
.hero .lead{ color:#E7EFE3; font-size:clamp(1.1rem,1.8vw,1.35rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.4rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16);
  color:#D7E2D2; font-size:.95rem;
}
.hero__trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero__trust svg{ flex:0 0 auto; color:var(--green-bright); }
.hero--sub .hero__inner{ padding-block:clamp(70px,11vw,120px); max-width:820px; }

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* feature split */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split--rev .split__media{ order:2; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } .split--rev .split__media{ order:0; } }
.split__media picture{ display:block; }
.split__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---------- cards ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px); box-shadow:var(--shadow-sm); height:100%;
}
.surface-dark .card,.surface-ink2 .card{
  background:var(--ink-3); border-color:var(--line-dk); box-shadow:none; color:var(--text-dk);
}
.surface-dark .card h3,.surface-ink2 .card h3{ color:#fff; }
.card p:last-child{ margin-bottom:0; }
.card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(111,190,68,.18), rgba(78,154,46,.10));
  color:var(--green-deep); margin-bottom:1rem; border:1px solid rgba(78,154,46,.22);
}
.surface-dark .card__icon,.surface-ink2 .card__icon{ color:var(--green-bright); border-color:rgba(130,212,81,.28); }
.card__icon svg{ width:26px; height:26px; }

/* ---------- process steps ---------- */
.steps{ counter-reset:step; display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding:1.4rem 1.4rem 1.5rem; border-radius:var(--radius); background:var(--paper-2); border:1px solid var(--line); }
.surface-dark .step{ background:var(--ink-3); border-color:var(--line-dk); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:1.5rem; color:var(--green-deep); font-weight:600; display:block; margin-bottom:.5rem;
}
.surface-dark .step::before{ color:var(--green-bright); }
.step h3{ font-size:1.12rem; margin-bottom:.35em; }

/* ---------- check list ---------- */
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.ticks li{ display:flex; gap:.75rem; align-items:flex-start; }
.ticks svg{ flex:0 0 auto; margin-top:.18em; color:var(--green-deep); }
.surface-dark .ticks svg,.surface-ink2 .ticks svg{ color:var(--green-bright); }
.ticks strong{ display:block; }
.ticks span{ color:var(--muted); }
.surface-dark .ticks span,.surface-ink2 .ticks span{ color:var(--muted-dk); }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px); }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
.gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; position:relative; background:var(--ink-3); }
.gallery picture{ display:block; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem;
  font-size:.85rem; color:#fff; background:linear-gradient(transparent, rgba(8,11,9,.78));
}

/* ---------- chips (service area) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  font-size:.92rem; padding:.5em 1em; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line); color:var(--text);
}
.surface-dark .chip,.surface-ink2 .chip{ background:var(--ink-3); border-color:var(--line-dk); color:var(--text-dk); }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg, var(--green-deep), var(--green-ink));
  color:#fff; text-align:center; border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,72px) var(--gutter);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:54ch; margin-inline:auto; }
.cta-band .btn{ --bg:#fff; --fg:#1c3a10; }
.cta-band .btn:hover{ --bg:#0e1110; color:#fff; }
.cta-band .btn:focus-visible{ outline-color:#0b1a06; outline-offset:4px; } /* visible ring on green backdrop */

/* ---------- contact form ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,60px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.form-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,40px); box-shadow:var(--shadow);
}
.field{ margin-bottom:1.15rem; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; color:var(--text); }
.field .req{ color:var(--green-deep); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; color:var(--text);
  padding:.85em 1em; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green-deep); box-shadow:0 0 0 3px rgba(78,154,46,.55);
}
.field textarea{ min-height:130px; resize:vertical; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px){ .field--row{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-note{ font-size:.85rem; color:var(--muted); margin-top:.4rem; }
.form-status{ margin-top:1rem; padding:.9em 1.1em; border-radius:12px; font-size:.95rem; display:none; }
.form-status.show{ display:block; }
.form-status.err{ background:#fdecec; color:#9b1c1c; border:1px solid #f5c2c2; }
.form-status.ok{ background:#eef8e8; color:#2f6b18; border:1px solid #cce8bd; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--muted-dk); padding-block:clamp(48px,6vw,72px) 2rem; border-top:1px solid var(--line-dk); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.site-footer img{ height:42px; width:auto; margin-bottom:1rem; }
.site-footer .footer-h{ color:#fff; font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.site-footer ul a{ display:inline-block; padding:.3em 0; }
.site-footer a:hover{ color:#fff; }
.footer-bar{
  margin-top:clamp(32px,4vw,52px); padding-top:1.5rem; border-top:1px solid var(--line-dk);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.85rem; color:#7e8a7b;
}

/* ---------- reveal animation (progressive enhancement) ---------- */
/* Visible by default — only hidden once JS confirms it can reveal them.
   The delayed animation is a safety net: if site.js never runs (blocked,
   failed download), everything still appears after 2.5s. */
.reveal{ opacity:1; }
html.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
  animation:reveal-rescue 0s 2.5s forwards;
}
html.js .reveal.in{ opacity:1; transform:none; animation:none; }
@keyframes reveal-rescue{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .gallery img{ transition:none; }
  .gallery figure:hover img{ transform:none; }
  .btn{ transition:none; }
}

.skip-link{
  position:absolute; left:8px; top:-60px; z-index:100; background:#fff; color:var(--ink);
  padding:.7em 1.1em; border-radius:10px; font-weight:600; transition:top .2s ease;
}
.skip-link:focus{ top:8px; }