/* ============================================================
   RIDGELINE LANDSCAPE CO. — DESIGN SYSTEM (Aster palette)
   A land-surveyor visual language, restated in a minimal,
   mature dark-mint register: near-black green, ocean-green
   accent, snow-drift text. Ornament dialed back on purpose.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- color tokens (Fringy Flower / Snow Drift / Ocean Green / Jagged Ice / Everglade) ---- */
  --bark:      #0D1A0C;
  --bark-2:    #12240F;
  --forest:    #1E3A1C;
  --forest-2:  #295726;
  --forest-3:  #336B30;
  --moss:      #40AA82;
  --moss-dim:  #2C7358;
  --fern:      #A6DEBA;
  --ember:     #40AA82;
  --ember-hi:  #5CC79A;
  --ember-dim: #2C7358;
  --stone:     #B7C9BA;
  --stone-dim: #5F7263;
  --paper:     #F2F6EF;
  --paper-2:   #DBE8DC;
  --paper-dim: #C1EADA;
  --ink:       #0D1A0C;
  --ink-soft:  #16311A;
  --line:      rgba(242,246,239,0.12);
  --line-soft: rgba(242,246,239,0.07);
  --shadow:    0 20px 50px -20px rgba(0,0,0,0.55);

  /* ---- type tokens ---- */
  --f-display: 'Fraunces', serif;
  --f-body:    'Work Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  /* ---- layout tokens ---- */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(64px, 9vw, 128px);
  --radius: 2px;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
body{
  background:var(--bark);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }
svg{ display:block; }

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

/* screen-reader-only text (e.g. the spoken form of a star rating) */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ TYPE SCALE ============ */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:none;
  letter-spacing:-0.01em;
  line-height:1.08;
  color:var(--paper);
}

h1{ font-size:clamp(2.4rem, 5.6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 3.8vw, 2.9rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); }
h4{ font-size:1.05rem; letter-spacing:0; font-weight:600; font-family:var(--f-body); }

p{ color:var(--stone); max-width:60ch; }

.lede{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--paper-dim); font-weight:400; font-family:var(--f-body); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ember-hi);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--ember-hi);
  display:inline-block;
}

/* ============ LAYOUT ============ */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-pad); position:relative; }
.section--forest{ background:var(--forest); }
.section--bark{ background:var(--bark); }
.section--light{ background:var(--bark-2); color:var(--paper); }
.section--dark2{ background:var(--bark-2); }

.grid{ display:grid; gap:var(--gutter); }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}
@media (min-width:601px) and (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* topographic contour texture, subtle */
.topo-bg{
  position:absolute; inset:0; pointer-events:none; opacity:0.07;
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0, transparent 26px, var(--line) 27px, transparent 28px, transparent 60px),
    repeating-radial-gradient(circle at 82% 70%, transparent 0, transparent 34px, var(--line) 35px, transparent 36px, transparent 74px);
}

/* ============ RIDGE DIVIDERS (signature) ============ */
.ridge{ position:relative; height:64px; margin-top:-1px; line-height:0; }
.ridge svg{ width:100%; height:100%; }
.ridge--bark path{ fill:var(--bark); }
.ridge--forest path{ fill:var(--forest); }
.ridge--dark2 path{ fill:var(--bark-2); }
.ridge--light path{ fill:var(--bark-2); }
.ridge--up{ transform:scaleY(-1); }

/* ============ UTILITY BAR ============ */
.utility-bar{
  background:#54A58B;
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:0.74rem;
  letter-spacing:0.04em;
}
.utility-bar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:9px; gap:16px; flex-wrap:wrap;
}
.utility-bar a{ color:var(--ink); font-weight:600; }
.utility-bar__left, .utility-bar__right{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.utility-bar__right span{ opacity:0.85; }

/* ============ SCROLL PROGRESS BAR ============ */
/* Thin glowing line, top of viewport, above the header. Width is set purely
   off scroll position (js/scroll-progress.js), so it self-adjusts to each
   page's own length automatically — a short page and the long home page
   both reach 100% exactly at their own footer. */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:210;
  pointer-events:none; background:transparent;
}
.scroll-progress__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--moss-dim), var(--ember-hi) 55%, var(--fern));
  box-shadow:0 0 5px rgba(92,199,154,0.6), 0 0 1px rgba(92,199,154,0.8);
}

/* ============ HEADER / NAV ============ */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,26,12,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
@media (max-width:700px){
  header.site-header{
    background:rgba(13,26,12,0.92);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:42px; height:42px; flex-shrink:0; color:var(--ember); }
.site-header .brand__mark{ color:#54A58B; }
.site-footer .brand__mark{ color:#54A58B; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--f-display); font-size:1.35rem; font-weight:600; letter-spacing:0; color:var(--paper); }
.brand__sub{ font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.24em; color:var(--fern); margin-top:4px; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-family:var(--f-mono); font-size:0.8rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--stone); position:relative; padding-block:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ember-hi); transition:width 0.25s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--paper); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{ font-family:var(--f-mono); font-size:0.86rem; color:var(--paper); display:flex; align-items:center; gap:8px; }
.nav-phone svg{ width:16px; height:16px; color:var(--ember-hi); }

.menu-toggle{ display:none; background:none; border:1px solid var(--line); padding:9px 11px; color:var(--paper); }
.menu-toggle svg{ width:20px; height:20px; }

/* mobile nav overlay */
.mobile-nav{
  position:fixed; inset:0; background:var(--forest); z-index:200;
  display:flex; flex-direction:column; padding:24px var(--gutter);
  overflow-y:auto;
  transform:translateY(-100%); transition:transform 0.35s ease;
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:48px; }
.mobile-nav a{
  display:block;
  font-family:var(--f-display); font-size:2.2rem; text-transform:none; font-weight:500;
  color:var(--paper); padding-block:14px; border-bottom:1px solid var(--line-soft);
}
.mobile-nav__cta{ width:100%; justify-content:center; margin-top:20px; }
.mobile-nav__foot{ margin-top:auto; font-family:var(--f-mono); color:var(--stone); font-size:0.85rem; }
.mobile-close{ background:none; border:none; color:var(--paper); }
.mobile-close svg{ width:26px; height:26px; }

@media (max-width:700px){
  .main-nav, .nav-phone{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .utility-bar__left span:nth-child(2){ display:none; }
}
@media (min-width:701px) and (max-width:980px){
  .main-nav{ gap:16px; }
  .main-nav a{ font-size:0.72rem; }
  .nav-cta{ gap:10px; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-mono); font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:15px 28px; border:1px solid transparent; white-space:nowrap;
  transition:transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn svg{ width:15px; height:15px; }
.btn--ember{ background:var(--ember); color:var(--ink); font-weight:600; }
.btn--ember:hover{ background:var(--ember-hi); transform:translateY(-2px); }
.btn--outline{ border-color:var(--stone-dim); color:var(--paper); }
.btn--outline:hover{ border-color:var(--paper); background:var(--forest-2); }
.btn--ghost{ color:var(--ember-hi); padding-inline:0; border-bottom:1px solid var(--ember-dim); }
.btn--ghost:hover{ border-color:var(--ember-hi); }
.btn--block{ width:100%; }

/* ============ SURVEY STAKE NUMBERING (signature) ============ */
.stake{
  font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.08em;
  color:var(--ember-hi); display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ember-dim); padding:5px 10px 5px 8px; margin-bottom:18px;
}
.stake::before{ content:'\2316'; font-size:0.9rem; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  background:var(--bark);
  border-bottom:1px solid var(--line-soft);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,26,12,0.72) 0%, rgba(13,26,12,0.32) 38%, rgba(13,26,12,0.52) 68%, var(--bark) 100%),
    linear-gradient(90deg, rgba(13,26,12,0.85) 0%, rgba(13,26,12,0.3) 55%, rgba(13,26,12,0.12) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; padding-block:96px 72px; }
.hero__coord{
  writing-mode:vertical-rl; position:absolute; right:calc(var(--gutter) - 6px); top:0; bottom:0;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.22em; color:var(--stone);
  display:flex; align-items:center; padding-block:80px; z-index:2;
}
.hero h1{ max-width:14ch; margin-bottom:22px; }
.hero__row{ display:flex; gap:56px; align-items:flex-end; flex-wrap:wrap; margin-top:40px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:32px; flex-wrap:wrap; }
.hero__stat b{ display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--paper); }
.hero__stat span{ font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.08em; color:var(--fern); text-transform:uppercase; }

@media (max-width:700px){
  .hero__coord{ display:none; }
  .hero{ min-height:82vh; }
}

/* ============ PROOF BAR ============ */
.proof-bar{ background:var(--bark-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.proof-bar .container{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  padding-block:26px; gap:24px;
}
.proof-item{ display:flex; align-items:center; gap:12px; }
.proof-item svg{ width:26px; height:26px; color:var(--ember-hi); flex-shrink:0; }
.proof-item b{ display:block; font-family:var(--f-display); font-size:1.15rem; color:var(--paper); letter-spacing:0.01em; }
.proof-item span{ font-family:var(--f-mono); font-size:0.7rem; color:var(--stone); letter-spacing:0.04em; }

/* ============ SERVICE PANELS ============ */
.panel{
  border:1px solid var(--line); border-top:3px solid var(--ember);
  background:var(--forest-2); padding:34px 30px; height:100%;
  display:flex; flex-direction:column;
  transition:transform 0.25s ease, background-color 0.25s ease;
}
.panel:hover{ transform:translateY(-6px); background:var(--forest-3); }
.panel__num{ font-family:var(--f-mono); color:var(--ember-hi); font-size:0.78rem; letter-spacing:0.06em; margin-bottom:20px; }
.panel h3{ margin-bottom:12px; text-transform:none; }
.panel p{ font-size:0.94rem; flex-grow:1; }
.panel__foot{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line-soft); padding-top:16px; }
.panel__price{ font-family:var(--f-mono); font-size:0.78rem; color:var(--fern); }
.panel__link{ font-family:var(--f-mono); font-size:0.78rem; color:var(--ember-hi); display:inline-flex; align-items:center; gap:6px; }
.panel__link svg{ width:13px; height:13px; transition:transform 0.2s ease; }
.panel:hover .panel__link svg{ transform:translateX(3px); }

/* ============ WHY / FEATURE LIST ============ */
.feature{ display:flex; gap:20px; }
.feature__num{
  font-family:var(--f-mono); font-size:0.85rem; color:var(--ember-hi);
  border:1px solid var(--ember-dim); width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.feature h4{ margin-bottom:8px; color:var(--paper); text-transform:none; font-family:var(--f-body); font-weight:700; letter-spacing:0; font-size:1.08rem;}
.feature p{ font-size:0.93rem; }

/* ============ TESTIMONIAL TICKER ============ */
.tt-wrap{ overflow:hidden; position:relative; }
.tt-wrap::before, .tt-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.tt-wrap::before{ left:0; background:linear-gradient(90deg, var(--forest), transparent); }
.tt-wrap::after{ right:0; background:linear-gradient(270deg, var(--forest), transparent); }
.tt-track{ display:flex; gap:24px; width:max-content; animation:tt-scroll 46s linear infinite; }
.tt-wrap:hover .tt-track{ animation-play-state:paused; }
@keyframes tt-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tcard{
  width:360px; flex-shrink:0; background:var(--forest-2); border:1px solid var(--line);
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.tcard__stars{ color:var(--ember-hi); font-size:0.9rem; letter-spacing:2px; }
.tcard p{ color:var(--paper-dim); font-size:0.95rem; }
.tcard__who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.tcard__badge{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--ember-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:0.8rem; color:var(--ember-hi); flex-shrink:0;
}
.tcard__who b{ display:block; font-size:0.88rem; color:var(--paper); }
.tcard__who span{ font-family:var(--f-mono); font-size:0.7rem; color:var(--stone); }

/* ============ FAQ ACCORDION ============ */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:none; text-align:left; color:inherit;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-block:24px; font-family:var(--f-display); font-size:1.15rem; text-transform:none; letter-spacing:0;
}
.faq-q .plus{ font-family:var(--f-mono); font-size:1.3rem; color:var(--ember-hi); flex-shrink:0; transition:transform 0.25s ease; }
.faq-item.is-open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-item.is-open .faq-a{ max-height:400px; }
.faq-a p{ padding-bottom:24px; max-width:70ch; }

/* ============ FORM ============ */
.quote-card{ background:var(--forest-2); border:1px solid var(--line); padding:clamp(24px,4vw,44px); }
.quote-card__head{ margin-bottom:22px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--fern); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--bark-2); border:1px solid var(--line); color:var(--paper);
  padding:13px 14px; font-family:var(--f-body); font-size:0.95rem;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--stone-dim); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ember); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field--check{ display:flex; align-items:flex-start; gap:10px; }
.field--check input{ width:auto; margin-top:4px; }
.field--check label{ text-transform:none; letter-spacing:0; font-size:0.82rem; color:var(--stone); margin:0; }
.form-trust{ font-family:var(--f-mono); font-size:0.72rem; color:var(--fern); text-align:center; margin-top:14px; letter-spacing:0.03em; }

/* ============ FINAL CTA BAND ============ */
.cta-band{
  background:var(--forest); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  position:relative; overflow:hidden;
}
.cta-band__inner{
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
  padding-block:64px; position:relative; z-index:1;
}
.cta-band .btn-group{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============ FOOTER ============ */
footer.site-footer{
  background:var(--bark); border-top:1px solid var(--line-soft);
  position:relative; overflow:hidden;
}
.footer-top{ padding-block:80px 56px; position:relative; z-index:1; }
.footer-bottom{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ margin-block:18px; font-size:0.9rem; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:16px; height:16px; color:var(--stone); }
.footer-social a:hover{ border-color:var(--ember); }
.footer-social a:hover svg{ color:var(--ember-hi); }
.footer-col h4{ color:var(--paper); margin-bottom:20px; font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.1em; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:0.9rem; color:var(--stone); }
.footer-col a:hover{ color:var(--ember-hi); }
.footer-col .footer-contact-item{
  display:inline-flex; align-items:flex-start; gap:10px;
  font-size:0.9rem; color:var(--stone);
  transition:color 0.2s ease;
}
.footer-col .footer-contact-item svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:inherit; }
.footer-col li:has(.footer-contact-item):hover .footer-contact-item{ color:var(--ember-hi); }
.footer-bottom{ border-top:1px solid var(--line-soft); padding-block:24px; }
.footer-bottom .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom, .footer-bottom a{ font-family:var(--f-mono); font-size:0.72rem; color:var(--stone-dim); }
.footer-bottom a:hover{ color:var(--stone); }

/* ---- footer beams-with-collision: light beams fall behind the footer
   content and spark where they meet the bottom edge. Pure CSS — no scroll
   or JS animation loop involved, so it can't add jank on real hosting.
   Glow is a soft white with a light green tint to match the theme. ---- */
.footer-beams{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.footer-beam{
  position:absolute; left:var(--x, 50%); top:-15%;
  width:1px; height:var(--h, 64px);
  background:linear-gradient(to bottom, transparent, rgba(235,255,244,0.95) 45%, rgba(120,225,180,0.85) 75%, transparent);
  box-shadow:0 0 8px rgba(210,255,232,0.5), 0 0 2px rgba(210,255,232,0.7);
  animation:footer-beam-fall var(--dur, 8s) linear infinite;
  animation-delay:var(--delay, 0s);
}
.footer-beam::after{
  content:''; position:absolute; left:50%; bottom:-4px; width:10px; height:10px;
  border-radius:50%; transform:translate(-50%, 50%) scale(0); opacity:0;
  background:radial-gradient(circle, rgba(235,255,244,0.95), rgba(120,225,180,0.55) 55%, transparent 75%);
  animation:footer-beam-spark var(--dur, 8s) linear infinite;
  animation-delay:var(--delay, 0s);
}
@keyframes footer-beam-fall{
  0%{ top:-15%; opacity:0; }
  10%{ opacity:1; }
  55%{ opacity:1; }
  62%{ top:110%; opacity:0; }
  100%{ top:110%; opacity:0; }
}
@keyframes footer-beam-spark{
  0%, 56%{ opacity:0; transform:translate(-50%, 50%) scale(0); }
  60%{ opacity:1; transform:translate(-50%, 50%) scale(1.6); }
  68%{ opacity:0; transform:translate(-50%, 50%) scale(2.2); }
  100%{ opacity:0; transform:translate(-50%, 50%) scale(0); }
}
@media (prefers-reduced-motion: reduce){
  .footer-beams{ display:none; }
}

/* ============ FLOATING PERSISTENT CTA ============ */
.float-quote{
  position:fixed; right:0; top:60%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; background:var(--ember); color:var(--ink);
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:18px 12px; z-index:90; font-weight:600;
}
.float-quote:hover{ background:var(--ember-hi); }
@media (max-width:700px){
  .float-quote{ padding:14px 9px; font-size:0.7rem; }
}

/* ============ STICKY CALL WIDGET (bottom-right, all pages) ============
   A round FAB that expands into a contact panel: Google rating summary,
   a tap-to-call button, and a "send a question" action. The question
   action is routed at runtime by js/main.js — sms: on touch devices
   (opens Messages), the contact form on desktop where sms: silently
   fails. Both destinations live in data- attributes on the anchor. */
.call-widget{
  position:fixed; right:20px; bottom:60px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  pointer-events:none;
}
.call-widget__fab{
  position:relative;
  pointer-events:auto;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(140deg, var(--ember-hi), #54A58B 55%, var(--forest-2));
  display:flex; align-items:center; justify-content:center; align-self:flex-end;
  box-shadow:0 14px 30px -10px rgba(13,26,12,0.65);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.call-widget__fab:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(13,26,12,0.75); }
.call-widget__fab svg{ width:26px; height:26px; color:var(--paper); position:relative; z-index:1; }
/* the FAB swaps its phone glyph for an X while the panel is open */
.call-widget__fab .icon-close{ display:none; }
.call-widget.is-open .call-widget__fab .icon-phone{ display:none; }
.call-widget.is-open .call-widget__fab .icon-close{ display:block; }

/* ---- idle nudge: a soft ring pulses outward once the visitor has sat on
   the page a while without touching the widget. Stops the instant the
   panel opens (see setOpen in js/main.js), so it never overlaps the open
   panel or nags someone who's already engaged. ---- */
.call-widget__fab.is-pulsing::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--ember-hi); opacity:0; pointer-events:none;
  animation:cw-pulse 3.2s ease-in-out infinite;
}
@keyframes cw-pulse{
  0%{ transform:scale(1); opacity:0; }
  18%{ opacity:0.55; }
  65%{ transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .call-widget__fab.is-pulsing::before{ animation:none; }
}

.call-widget__panel{
  width:300px; max-width:calc(100vw - 40px);
  background:var(--paper); border-radius:20px; padding:18px;
  box-shadow:0 24px 60px -18px rgba(13,26,12,0.7);
  color:var(--ink);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(0.97);
  transform-origin:bottom right; pointer-events:none;
  transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.call-widget.is-open .call-widget__panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
}
.call-widget__head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.call-widget__head svg{ width:19px; height:19px; flex-shrink:0; }
.call-widget__head b{ font-size:0.92rem; font-weight:700; color:var(--ink); }
.call-widget__verified{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.66rem; font-weight:700; color:#39705E;
  background:rgba(84,165,139,0.14); border-radius:999px; padding:3px 8px;
}
.call-widget__verified svg{ width:10px; height:10px; }
.call-widget__close{
  margin-left:auto; background:none; border:none; cursor:pointer; padding:2px;
  color:var(--ink-soft); opacity:0.5; line-height:0; transition:opacity 0.2s ease;
}
.call-widget__close:hover{ opacity:1; }
.call-widget__close svg{ width:15px; height:15px; }
.call-widget__score{ display:flex; align-items:center; gap:10px; }
.call-widget__rating{ font-family:var(--f-display); font-size:2.1rem; font-weight:600; line-height:1; color:var(--ink); }
.call-widget__stars{ color:#F5B400; font-size:1rem; letter-spacing:2px; }
.call-widget__count{ font-size:0.8rem; color:var(--ink-soft); opacity:0.75; margin:6px 0 16px; }
.call-widget__count b{ font-weight:700; opacity:1; }

.call-widget__call{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ember); color:var(--paper); font-weight:700; font-size:0.92rem;
  padding:14px 16px; border-radius:12px; margin-bottom:10px;
  transition:background-color 0.2s ease, transform 0.2s ease;
}
.call-widget__call:hover{ background:#39705E; color:var(--paper); transform:translateY(-1px); }
.call-widget__call svg{ width:17px; height:17px; flex-shrink:0; }

.call-widget__text{
  display:flex; align-items:center; gap:11px;
  background:var(--paper-2); border-radius:12px; padding:12px 14px;
  transition:background-color 0.2s ease;
}
.call-widget__text:hover{ background:#CBDCCD; }
.call-widget__text-icon{
  width:34px; height:34px; border-radius:50%; background:var(--paper); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#39705E;
}
.call-widget__text-icon svg{ width:16px; height:16px; }
.call-widget__text-copy b{ display:block; font-size:0.85rem; font-weight:700; color:var(--ink); line-height:1.3; }
.call-widget__text-copy span{ display:block; font-size:0.74rem; color:var(--ink-soft); opacity:0.75; line-height:1.3; }

@media (max-width:700px){
  .call-widget{ right:16px; bottom:30px; }
  .call-widget__fab{ width:54px; height:54px; }
}
@media (prefers-reduced-motion: reduce){
  .call-widget__panel{ transition:opacity 0.01ms, visibility 0.01ms; transform:none; }
  .call-widget.is-open .call-widget__panel{ transform:none; }
}

/* ============ BREADCRUMB / PAGE HEAD ============ */
.page-head{ padding-block:calc(var(--section-pad) * 0.7) 56px; position:relative; }
.breadcrumb{ font-family:var(--f-mono); font-size:0.74rem; color:var(--stone); letter-spacing:0.04em; margin-bottom:20px; }
.breadcrumb a{ color:var(--fern); }
.breadcrumb .sep{ margin-inline:8px; color:var(--stone-dim); }

/* ============ MISC ============ */
.divider-line{ height:1px; background:var(--line); border:none; margin-block:var(--section-pad); }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; }
.tag{
  font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid var(--line); padding:6px 12px; color:var(--stone);
}
.center{ text-align:center; margin-inline:auto; }
.mw-head{ max-width:640px; }
.split-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:52px; }

/* ============ PHOTO PLATES (field-documentation imagery system) ============
   In lieu of stock photography, scenes are rendered as layered gradient
   "field plates" — lit like dusk/dawn site photography, with grain,
   contour overlay, crop-mark corners and a mono caption strip. Swap the
   --scene gradient per instance to art-direct different moments. */
.grain-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.plate{
  position:relative; overflow:hidden; background:var(--forest);
  isolation:isolate;
}
.plate::before{ /* scene gradient */
  content:''; position:absolute; inset:0; z-index:0;
  background: var(--scene, radial-gradient(120% 90% at 75% 15%, #336B30 0%, #1E3A1C 45%, #0D1A0C 100%));
}
.plate::after{ /* grain + vignette, kept faint for a calmer, mature surface */
  content:''; position:absolute; inset:0; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:0.22;
  box-shadow:inset 0 0 120px 40px rgba(0,0,0,0.4);
}
.plate__contours{
  position:absolute; inset:0; z-index:1; opacity:0.28; pointer-events:none;
  background-image:repeating-radial-gradient(circle at 30% 116%, transparent 0, transparent 38px, rgba(242,246,239,0.07) 39px, transparent 40px, transparent 96px);
}
.plate__cap{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--paper-dim);
  background:rgba(13,26,12,0.6); border:1px solid rgba(242,246,239,0.18);
  padding:6px 10px; backdrop-filter:blur(2px);
}
.plate__corner{ position:absolute; width:18px; height:18px; z-index:2; border-color:var(--ember-hi); opacity:0.85; }
.plate__corner--tl{ top:12px; left:12px; border-top:2px solid; border-left:2px solid; }
.plate__corner--br{ bottom:12px; right:12px; border-bottom:2px solid; border-right:2px solid; }

/* ============ CHECKLIST ============ */
.check-list li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:0.93rem; color:var(--stone); }
.check-list svg{ width:16px; height:16px; color:var(--ember-hi); flex-shrink:0; margin-top:3px; }

/* ============ PRICE TABLE ============ */
.price-table{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:0.85rem; }
.price-table th, .price-table td{ text-align:left; padding:16px 14px; border-bottom:1px solid var(--line); }
.price-table th{ color:var(--fern); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.08em; font-weight:500; }
.price-table td{ color:var(--paper-dim); }
.price-table tr:hover td{ background:var(--forest-2); }
.price-table td:first-child, .price-table th:first-child{ padding-left:0; }
.table-scroll{ overflow-x:auto; }

/* ============ SERVICE DETAIL BLOCK ============ */
.svc-block{ scroll-margin-top:120px; }
.svc-block:not(:last-child){ margin-bottom:var(--section-pad); }

/* ============ GALLERY FILTER ============ */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn{
  font-family:var(--f-mono); font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--stone); padding:10px 18px;
  transition:all 0.2s ease;
}
.filter-btn:hover{ border-color:var(--ember-dim); color:var(--paper); }
.filter-btn.is-active{ background:var(--ember); border-color:var(--ember); color:var(--ink); font-weight:600; }
.g-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.g-item{ position:relative; }
.g-item .plate{ aspect-ratio:1/1; }
.g-item.g-tall .plate{ aspect-ratio:1/1.35; }
.g-item.g-wide{ grid-column:span 2; }
.g-item.g-wide .plate{ aspect-ratio:2.15/1; }
@media (max-width:900px){
  .g-grid{ grid-template-columns:repeat(2,1fr); }
  .g-item.g-wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .g-grid{ grid-template-columns:1fr; }
  .g-item.g-wide{ grid-column:span 1; }
}

/* ============ CONTACT INFO ============ */
.info-row{ display:flex; gap:16px; align-items:flex-start; padding-block:18px; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:none; }
.info-row svg{ width:20px; height:20px; color:var(--ember-hi); flex-shrink:0; margin-top:2px; }
.info-row b{ display:block; color:var(--paper); font-size:0.92rem; margin-bottom:3px; }
.info-row span, .info-row a{ font-size:0.88rem; color:var(--stone); }
.map-frame{ border:1px solid var(--line); filter:grayscale(0.35) contrast(1.05) brightness(0.9); }
.map-frame iframe{ width:100%; height:300px; border:0; display:block; }

/* ============ BEFORE/AFTER ============ */
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid var(--line); position:relative; }
.ba-pair .plate{ aspect-ratio:4/3; }
.ba-label{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.1em; background:rgba(13,26,12,0.75); border:1px solid var(--line); padding:5px 10px; color:var(--paper); text-transform:uppercase; }
@media (max-width:640px){ .ba-pair{ grid-template-columns:1fr; } }

/* ============ BLOG ============ */
.post-card{ display:flex; flex-direction:column; }
.post-card .plate{ aspect-ratio:16/10; margin-bottom:20px; }
.post-card__meta{ font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--fern); text-transform:uppercase; margin-bottom:10px; }
.post-card h3{ text-transform:none; margin-bottom:10px; font-size:1.3rem; }
.post-card p{ font-size:0.92rem; }
.post-card__link{ margin-top:14px; font-family:var(--f-mono); font-size:0.78rem; color:var(--ember-hi); }
.featured-post{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.featured-post .plate{ aspect-ratio:4/3; }
@media (max-width:860px){ .featured-post{ grid-template-columns:1fr; } }

/* scene variants — all mixed from the Aster palette for a cohesive, quiet look */
.scene-dusk{ --scene: radial-gradient(130% 100% at 80% 10%, #336B30 0%, #1E3A1C 40%, #0D1A0C 100%); }
.scene-stone{ --scene: linear-gradient(155deg, #234A21 0%, #16311A 45%, #0D1A0C 100%); }
.scene-mist{ --scene: radial-gradient(120% 90% at 30% 0%, #3C8E70 0%, #234A21 45%, #0D1A0C 100%); }
.scene-autumn{ --scene: linear-gradient(160deg, #2C7358 0%, #1A3D2F 45%, #0D1A0C 100%); }
.scene-ember{ --scene: radial-gradient(120% 100% at 70% 100%, #40AA82 0%, #1E3A1C 42%, #0D1A0C 100%); }
.scene-blue-hour{ --scene: linear-gradient(165deg, #234A21 0%, #12240F 48%, #0D1A0C 100%); }