/* ================================================
   10-7 Tree Service — styles.css (ZING export)
   Merged: site.css + home.css + pages.css
   ================================================ */

/* ============================================================
   10-7 TREE SERVICE — shared system
   Editorial-luxe: deep forest green, warm cream, amber sun.
   ============================================================ */

/* ---- Fonts (Geist body per brief; Spectral display; Geist Mono) ---- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Lexend:wght@300;400;500;600&display=swap');

/* ---- Design tokens ---- */
:root{
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* brand */
  --green-900:#081102;   /* near-black forest */
  --green-800:#0c1804;
  --green-700:#122D02;   /* brand dark green */
  --green-600:#1c3d0a;
  --green-500:#32510B;   /* brand mid green */
  --sage-400:#6f8a4e;
  --sage-300:#9bb178;
  --amber:#C5A258;       /* refined antique gold */
  --amber-soft:#E2C88E;  /* champagne highlight */
  --gold:#FFD700;        /* touch glow */
  --cream:#ECE6D6;       /* warm ivory */
  --cream-dim:#c6c7b6;

  /* semantic — dark (default) */
  --bg:           var(--green-900);
  --bg-2:         #0e1b06;
  --surface:      #122604;
  --surface-2:    #16300a;
  --line:         color-mix(in oklab, var(--sage-400) 26%, transparent);
  --line-strong:  color-mix(in oklab, var(--sage-400) 46%, transparent);
  --ink:          var(--cream);
  --ink-soft:     color-mix(in oklab, var(--cream) 74%, transparent);
  --ink-faint:    color-mix(in oklab, var(--cream) 50%, transparent);
  --accent:       var(--amber);
  --accent-ink:   #2a1c00;
  --shadow-1: 0 1px 0 color-mix(in oklab, var(--cream) 6%, transparent), 0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-2: 0 1px 0 color-mix(in oklab, var(--cream) 8%, transparent), 0 40px 80px -30px rgba(0,0,0,.9);
  --hero-overlay: linear-gradient(180deg, rgba(8,14,4,.62) 0%, rgba(8,14,4,.52) 38%, rgba(12,22,6,.86) 86%, var(--bg) 100%);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 4px;
  --radius-lg: 8px;

  --font-body:'Geist', system-ui, sans-serif;
  --font-display:'Spectral', Georgia, serif;
  --font-mono:'Geist Mono', ui-monospace, monospace;
  --header-h: 76px;
}

html[data-theme="light"]{
  --bg:           #f1ece0;
  --bg-2:         #ebe5d6;
  --surface:      #fbf8f0;
  --surface-2:    #ffffff;
  --line:         color-mix(in oklab, var(--green-700) 18%, transparent);
  --line-strong:  color-mix(in oklab, var(--green-700) 32%, transparent);
  --ink:          #16280a;
  --ink-soft:     color-mix(in oklab, #16280a 82%, transparent);
  --ink-faint:    color-mix(in oklab, #16280a 58%, transparent);
  --amber:        #785f1e;  /* deep antique gold — AA-legible on ivory */
  --accent-ink:   #2a1c00;
  --shadow-1: 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -24px rgba(20,38,10,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.7), 0 40px 80px -32px rgba(20,38,10,.45);
  --hero-overlay: linear-gradient(180deg, rgba(9,16,3,.60) 0%, rgba(9,16,3,.34) 42%, rgba(241,236,224,.82) 90%, var(--bg) 100%);
}

/* ---- Light-mode: brand-green headings + legible gold buttons ---- */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3{ color:var(--green-700); }
/* headings that sit over imagery stay light */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .cta-inner h2{ color:#fff; }
html[data-theme="light"] .btn-primary{ background:#C5A258; color:#241700; box-shadow:0 4px 14px -8px color-mix(in oklab,#C5A258 32%, transparent); }
html[data-theme="light"] .btn-primary:hover{ background:#cdac61; box-shadow:0 8px 20px -12px color-mix(in oklab,#C5A258 34%, transparent); }

/* ---- Sections over imagery use the brighter gold + light text for legible accents/buttons ---- */
.hero, .page-hero, .cta-band{
  --amber:#CBA967;
  --ink:#F3EFE5;
  --ink-soft:color-mix(in oklab, #F3EFE5 84%, transparent);
  --ink-faint:color-mix(in oklab, #F3EFE5 60%, transparent);
  --line:color-mix(in oklab, #ffffff 24%, transparent);
  --line-strong:color-mix(in oklab, #ffffff 44%, transparent);
}
.hero .sub, .page-hero .sub, .hero .free{ text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero .hero-eyebrow, .page-hero .hero-eyebrow, .page-hero .crumb{ text-shadow:0 1px 10px rgba(0,0,0,.55); }

/* ---- Brand-green chrome: header + footer are always a dark green context ---- */
.site-header, .site-footer{
  --ink:        #ECE6D6;
  --ink-soft:   color-mix(in oklab, #ECE6D6 80%, transparent);
  --ink-faint:  color-mix(in oklab, #ECE6D6 54%, transparent);
  --line:       color-mix(in oklab, #9bb178 22%, transparent);
  --line-strong:color-mix(in oklab, #9bb178 42%, transparent);
  --amber:      #CBA967;
  --surface:    #173208;
  --bg:         #122D02;
  color:var(--ink);
}

/* dyslexia-friendly font swap */
html[data-dys="on"]{ --font-body:'Lexend', system-ui, sans-serif; }

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--amber); color:#2a1c00; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.04; letter-spacing:-.01em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--amber);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--amber); opacity:.8; }
.serif-i{ font-style:italic; font-family:var(--font-display); }

/* ---- Buttons ---- */
.btn{
  --bp:.95rem 1.55rem;
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  padding:var(--bp); border-radius:100px; border:1px solid transparent;
  font-size:.95rem; font-weight:500; letter-spacing:.01em; line-height:1;
  position:relative; overflow:hidden; white-space:nowrap;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; transition: transform .3s var(--ease); }
.btn-primary{ background:var(--amber); color:#241700; box-shadow: 0 4px 14px -8px color-mix(in oklab, var(--amber) 30%, transparent); }
.btn-primary:hover{ transform:translateY(-2px); background:color-mix(in oklab, var(--amber) 94%, #fff); box-shadow:0 8px 20px -12px color-mix(in oklab, var(--amber) 32%, transparent); }
.btn-primary:hover svg{ transform:translateX(3px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:color-mix(in oklab, var(--ink) 4%, transparent); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--amber); color:var(--ink); transform:translateY(-2px); }
.btn-lg{ --bp:1.15rem 2rem; font-size:1.02rem; }

/* link with animated underline wipe */
.ulink{ position:relative; display:inline-block; }
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.ulink:hover::after, .ulink:focus-visible::after{ transform:scaleX(1); }

/* ============================================================
   LUXURY ACCENTS — subtle brand splashes, glows & micro-motion
   (brand hexes only: #122D02, #32510B, #FAA320)
   ============================================================ */
/* hero ambient gold glow — slow breathe behind the headline */
.hero-inner::before, .page-hero .hero-inner::before{
  content:""; position:absolute; left:-8%; top:-16%; width:60%; height:92%;
  background:radial-gradient(circle at 38% 42%, color-mix(in oklab, var(--amber) 15%, transparent), transparent 62%);
  filter:blur(48px); opacity:.5; z-index:-1; pointer-events:none;
  animation:luxBreathe 9s ease-in-out infinite;
}
@keyframes luxBreathe{ 0%,100%{ opacity:.32; transform:scale(1); } 50%{ opacity:.58; transform:scale(1.06); } }

/* primary button — whisper-soft light sweep on hover (expensive, not flashy) */
.btn-primary::after{
  content:""; position:absolute; top:0; left:-140%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in oklab, #fff 13%, transparent), transparent);
  transform:skewX(-18deg); pointer-events:none; transition:left 1.25s var(--ease);
}
.btn-primary:hover::after{ left:165%; }

/* feature cards — faint gold glow on hover */
.svc-card:hover, .value-card:hover{ box-shadow:var(--shadow-2), 0 16px 54px -22px color-mix(in oklab, var(--amber) 34%, transparent); }

/* eyebrow accent bar — gentle gold pulse */
.eyebrow::before{ animation:luxBar 5s ease-in-out infinite; }
@keyframes luxBar{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* subtle brand color splashes in feature sections */
.services, .values, .testi{ position:relative; overflow:hidden; }
.services::before, .values::before, .testi::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 38% at 94% 4%, color-mix(in oklab, var(--amber) 9%, transparent), transparent 70%),
    radial-gradient(44% 46% at 3% 98%, color-mix(in oklab, #32510B 16%, transparent), transparent 72%);
}
.services > .wrap, .values > .wrap, .testi > .wrap{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .hero-inner::before, .page-hero .hero-inner::before, .eyebrow::before{ animation:none; }
  .btn-primary::after{ transition:none; }
}

/* ============================================================
   FILM GRAIN
   ============================================================ */
.grain{
  position:fixed; inset:-120%; z-index:60; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grainShift 6s steps(6) infinite;
}
html[data-theme="light"] .grain{ mix-blend-mode:multiply; opacity:.05; }
@keyframes grainShift{
  0%{transform:translate(0,0)}16%{transform:translate(-6%,4%)}33%{transform:translate(4%,-7%)}
  50%{transform:translate(-5%,6%)}66%{transform:translate(7%,3%)}83%{transform:translate(-3%,-5%)}100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* touch glow layer */
.glow-layer{ position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden; }
.glow{
  position:absolute; width:380px; height:380px; margin:-190px 0 0 -190px;
  border-radius:50%; pointer-events:none; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(255,215,0,.22) 0%, rgba(255,200,40,.12) 32%, rgba(255,200,40,0) 70%);
  transition: opacity .42s var(--ease);
}

/* custom cursor + trail (desktop only, added via JS) */
.cursor-trail{ position:fixed; z-index:58; pointer-events:none; top:0; left:0; will-change:transform,opacity; }
html.has-cursor, html.has-cursor *{ cursor:none !important; }
.cursor-dot, .cursor-leaf{ position:fixed; z-index:59; pointer-events:none; top:0; left:0; will-change:transform; }

/* ============================================================
   PAGE LOADER (tree growing from a pot)
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:var(--bg); transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-art{ width:130px; height:150px; }
.loader-cap{ margin-top:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); }
.lo-pot{ transform-origin:center; animation:potIn .5s var(--ease) both; }
.lo-trunk{ stroke-dasharray:120; stroke-dashoffset:120; animation:draw 1s var(--ease) .25s forwards; }
.lo-branch{ stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s var(--ease) .75s forwards; }
.lo-leaf{ transform-origin:center; transform:scale(0); opacity:0; animation:leafPop .5s var(--ease) forwards; }
.lo-sun{ transform-origin:center; transform:scale(0); opacity:0; animation:leafPop .6s var(--ease) 1.2s forwards; }
@keyframes potIn{ from{transform:translateY(8px) scale(.9);opacity:0} to{transform:none;opacity:1} }
@keyframes draw{ to{stroke-dashoffset:0} }
@keyframes leafPop{ to{transform:scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce){
  .lo-trunk,.lo-branch,.lo-leaf,.lo-sun,.lo-pot{ animation:none !important; stroke-dashoffset:0 !important; transform:none !important; opacity:1 !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1;
  background:linear-gradient(180deg, rgba(6,11,3,.66) 0%, rgba(6,11,3,.34) 45%, transparent 100%);
  pointer-events:none; opacity:1; transition:opacity .4s var(--ease);
}
html[data-theme="light"] .site-header::before{
  background:linear-gradient(180deg, rgba(20,38,10,.42) 0%, rgba(20,38,10,.18) 45%, transparent 100%);
}
.site-header.scrolled::before{ opacity:0; }
.site-header.scrolled{
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  box-shadow:0 10px 40px -28px rgba(0,0,0,.9);
}
/* brighter nav over hero image before scroll */
.site-header:not(.scrolled) .nav-main a{ color:color-mix(in oklab, #fff 86%, transparent); text-shadow:0 1px 10px rgba(0,0,0,.45); }
html[data-theme="light"] .site-header:not(.scrolled) .nav-main a{ color:#fff; }
.header-inner{ width:100%; max-width:var(--maxw); margin-inline:auto;
  /* safe-area aware so the right-edge controls clear notches/curved corners
     when viewport-fit=cover is in effect (landscape on notched phones) */
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between; gap:18px; }
/* brand may shrink (and truncate its name) so it can NEVER push the
   right-side controls — most importantly the hamburger — off the edge */
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:1; min-width:0; }
.brand img{ flex-shrink:0; }
.brand-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand img{ width:46px; height:46px; border-radius:50%; }
.brand-name{ font-family:var(--font-display); font-size:1.15rem; line-height:1; letter-spacing:-.01em; }
.brand-name b{ font-weight:500; }
.brand-name span{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber); margin-top:4px; }

.nav-main{ display:flex; align-items:center; gap:30px; margin-left:30px; margin-right:auto; }
.nav-main a{ position:relative; font-size:.92rem; color:var(--ink-soft); transition:color .3s var(--ease), transform .3s var(--ease); }
.nav-main a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; border-radius:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-main a:hover{ color:var(--ink); transform:translateY(-2px); }
.nav-main a:hover::after, .nav-main a:focus-visible::after{ transform:scaleX(1); }
.nav-main a.active{ color:var(--ink); }
.nav-main a.active::after{ transform:scaleX(1); opacity:.9; }
.drawer-panel a.dlink.active{ color:var(--amber); }
.site-header:not(.scrolled) .nav-main a::after{ box-shadow:0 1px 8px rgba(0,0,0,.4); }

.utility{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.hamburger{ flex-shrink:0; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:transparent; border:none; color:var(--ink); position:relative;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover{ background:color-mix(in oklab, var(--sage-400) 22%, transparent); }
.icon-btn svg{ width:20px; height:20px; }

/* contact pill */
.contact-wrap{ position:relative; }
.contact-pill{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em .9em; border-radius:100px;
  background:color-mix(in oklab, var(--sage-400) 16%, transparent);
  border:1px solid var(--line); color:var(--ink); font-size:.86rem; font-weight:500;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-pill:hover{ background:color-mix(in oklab, var(--sage-400) 26%, transparent); border-color:var(--line-strong); }
.contact-pill svg{ width:15px; height:15px; color:var(--amber); }
.contact-pill .ph{ white-space:nowrap; }
.contact-menu{
  position:absolute; right:0; top:calc(100% + 10px); width:272px; padding:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .3s var(--ease); z-index:5;
}
.contact-wrap:hover .contact-menu,
.contact-wrap:focus-within .contact-menu,
.contact-wrap.open .contact-menu{ opacity:1; visibility:visible; transform:none; }
.contact-menu a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:8px; font-size:.9rem; color:var(--ink); transition:background .25s var(--ease); }
.contact-menu a:hover{ background:color-mix(in oklab, var(--sage-400) 18%, transparent); }
.contact-menu svg{ width:17px; height:17px; color:var(--amber); flex-shrink:0; }
.contact-menu a > span{ min-width:0; flex:1; }
.contact-menu small{ display:block; color:var(--ink-faint); font-size:.72rem; line-height:1.25; word-break:break-all; }

.header-cta{ margin-left:4px; }
.hamburger{ display:none; }

@media (max-width: 1080px){
  .nav-main{ display:none; }
  .contact-pill .ph{ display:none; }
  .contact-pill{ padding:.6em; }
  /* nav links collapse here — the menu MUST become reachable via the hamburger,
     otherwise tablets (≈761–1080px) have no navigation at all */
  .hamburger{ display:grid; }
}
/* declutter the tablet header: drop the inline CTA once it starts competing
   with the hamburger (the drawer still carries a prominent Get-Free-Quote) */
@media (max-width: 920px){
  .header-cta{ display:none; }
}
@media (max-width: 760px){
  .brand-name span{ display:none; }
}
/* PHONES: keep the header to brand + hamburger only. The extra header
   actions (call pill, search, settings) were overflowing the row, and
   because body has overflow-x:hidden the rightmost item — the hamburger —
   was being clipped off-screen. Those actions now live in the drawer. */
@media (max-width: 700px){
  .utility .contact-wrap,
  .utility .search-open,
  .utility .settings-open{ display:none; }
  .header-inner{ gap:12px; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none;
}
.drawer.open{ visibility:visible; pointer-events:auto; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(4,8,2,.6); opacity:0; transition:opacity .4s var(--ease); backdrop-filter:blur(3px); }
.drawer.open .drawer-scrim{ opacity:1; }
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(86vw,360px);
  background:var(--surface); border-left:1px solid var(--line); padding:26px 24px;
  display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .45s var(--ease);
  overflow-y:auto;
}
.drawer.open .drawer-panel{ transform:none; }
.drawer-panel a.dlink{ font-family:var(--font-display); font-size:1.6rem; padding:12px 0; border-bottom:1px solid var(--line); transition:color .3s var(--ease), padding-left .3s var(--ease); }
.drawer-panel a.dlink:hover{ color:var(--amber); padding-left:8px; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }

/* drawer utility actions (search / settings) — shown on phones where these
   icons are removed from the header bar */
.drawer-utils{ display:flex; flex-direction:column; gap:2px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.drawer-util{
  display:flex; align-items:center; gap:14px; width:100%; padding:13px 4px; border:none; background:transparent;
  color:var(--ink-soft); font-family:var(--font-body); font-size:1rem; text-align:left; border-radius:8px;
  transition:color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
}
.drawer-util:hover{ color:var(--amber); background:color-mix(in oklab, var(--sage-400) 14%, transparent); padding-left:10px; }
.drawer-util svg{ width:21px; height:21px; flex-shrink:0; color:var(--amber); }

/* ============================================================
   SEARCH PANEL
   ============================================================ */
.search-panel{
  position:fixed; top:0; left:0; right:0; z-index:80; padding:0 var(--gutter);
  background:color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); transform:translateY(-105%); transition:transform .5s var(--ease);
  box-shadow:var(--shadow-2);
}
.search-panel.open{ transform:none; }
.search-inner{ max-width:760px; margin-inline:auto; padding:30px 0 26px; }
.search-row{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--line-strong); padding-bottom:14px; }
.search-row input{
  flex:1; background:transparent; border:none; color:var(--ink); font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2.2rem); outline:none;
}
.search-row input::placeholder{ color:var(--ink-faint); }
.mic-btn.listening{ color:var(--amber); animation:micPulse 1.1s var(--ease) infinite; }
@keyframes micPulse{ 0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--amber) 40%,transparent)} 50%{box-shadow:0 0 0 10px transparent} }
.search-results{ margin-top:20px; display:flex; flex-direction:column; gap:2px; min-height:40px; }
.search-results a{ display:flex; justify-content:space-between; align-items:center; padding:13px 8px; border-radius:8px; transition:background .25s var(--ease); }
.search-results a:hover{ background:color-mix(in oklab, var(--sage-400) 16%, transparent); }
.search-results .sr-kind{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.search-empty{ color:var(--ink-faint); font-size:.95rem; padding:8px; }

/* ============================================================
   SETTINGS / ACCESSIBILITY PANEL
   ============================================================ */
.settings-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:80; width:min(92vw,380px);
  background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-2);
  transform:translateX(102%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.settings-panel.open{ transform:none; }
.sp-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2; }
.sp-head h3{ font-size:1.15rem; }
.sp-body{ padding:8px 24px 40px; }
.sp-group{ padding:20px 0; border-bottom:1px solid var(--line); }
.sp-group:last-child{ border-bottom:none; }
.sp-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.sp-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; }
.sp-row span.t{ font-size:.95rem; }
.sp-row small{ display:block; color:var(--ink-faint); font-size:.78rem; margin-top:2px; }

/* toggle switch */
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; border-radius:100px; background:color-mix(in oklab, var(--ink) 18%, transparent); transition:background .3s var(--ease); }
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--cream); transition:transform .3s var(--ease); }
.switch input:checked ~ .track{ background:var(--amber); }
.switch input:checked ~ .thumb{ transform:translateX(20px); }

/* seg toggle (night/bright) */
.seg{ display:inline-flex; background:color-mix(in oklab, var(--ink) 10%, transparent); border-radius:100px; padding:3px; gap:2px; }
.seg button{ border:none; background:transparent; color:var(--ink-soft); padding:.45em .9em; border-radius:100px; font-size:.82rem; display:inline-flex; gap:.4em; align-items:center; transition:all .3s var(--ease); }
.seg button.on{ background:var(--amber); color:#241700; }

.sp-select, .sp-range{ width:100%; }
.sp-select{ padding:.6em .8em; border-radius:8px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink); font:inherit; font-size:.9rem; margin-top:6px; }
.sp-range{ accent-color:var(--amber); }
.sp-sub{ font-size:.78rem; color:var(--ink-faint); margin-top:8px; }
.scrim{ position:fixed; inset:0; z-index:79; background:rgba(4,8,2,.5); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease); }
.scrim.show{ opacity:1; visibility:visible; }

/* read-aloud highlight */
.ra-reading{ background:color-mix(in oklab, var(--amber) 32%, transparent); border-radius:3px; box-shadow:0 0 0 4px color-mix(in oklab, var(--amber) 32%, transparent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ position:relative; background:var(--green-700); border-top:1px solid var(--line); padding:80px 0 30px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; }
.footer-brand img{ width:92px; height:92px; border-radius:50%; margin-bottom:18px; box-shadow:0 0 0 1px color-mix(in oklab,#9bb178 30%, transparent), 0 10px 30px -12px rgba(0,0,0,.5); }
.footer-brand p{ color:var(--ink-soft); font-size:.92rem; max-width:30ch; }
.footer-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0 0 18px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:var(--ink-soft); font-size:.92rem; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:60px; padding-top:26px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.82rem; }
.socials{ display:flex; gap:12px; align-items:center; }
.soc{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink-soft); transition:all .35s var(--ease); }
.soc:hover{ color:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px color-mix(in oklab, var(--amber) 18%, transparent); transform:translateY(-2px); }
.soc svg{ width:24px; height:24px; }
/* Facebook: refined, on-theme brand mark (matches site palette) */
.soc.soc-fb{ background:color-mix(in oklab,var(--sage-400) 15%, transparent); border-color:var(--line-strong); color:var(--ink); }
.soc.soc-fb:hover{ color:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px color-mix(in oklab, var(--amber) 18%, transparent); }
.soc.soc-fb svg{ width:24px; height:24px; }
@media (max-width: 880px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   MOTION — reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s } .reveal[data-d="6"]{ transition-delay:.48s }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* clip-path wipe for images */
.clip-wipe{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease); }
.clip-wipe.in{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .clip-wipe{ clip-path:none !important; } }

/* page transition veil */
.page-veil{ position:fixed; inset:0; z-index:95; background:var(--bg); pointer-events:none; opacity:0; transition:opacity .5s var(--ease); }
.page-veil.show{ opacity:1; pointer-events:auto; }

/* utility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.translate-note{ font-size:.78rem; color:var(--amber); font-family:var(--font-mono); letter-spacing:.04em; }

/* ============================================================
   CROSS-DEVICE POLISH — touch targets, notch safe-areas, overflow
   ============================================================ */

/* Kill the grey tap-flash on iOS/Android (we already provide hover + touch-glow feedback) */
html{ -webkit-tap-highlight-color: transparent; }

/* Respect the notch / rounded corners in landscape on modern phones:
   pad the fixed chrome + key containers past the safe-area insets. */
.header-inner,
.hero-inner,
.page-hero .hero-inner,
.wrap,
.search-panel,
.area{
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.drawer-panel{ padding-right: max(24px, env(safe-area-inset-right)); }
.settings-panel{ padding-bottom: env(safe-area-inset-bottom); }

/* Comfortable 44px touch targets on touch devices (WCAG / Apple HIG) */
@media (pointer: coarse){
  .icon-btn{ width:44px; height:44px; }
  .nav-main a{ padding-block:6px; }
  .footer-col a, .contact-menu a{ padding-block:max(11px, .55em); }
}

/* Belt-and-suspenders against horizontal scroll on small screens */
html, body{ max-width:100%; overflow-x:hidden; }
img, iframe, video{ max-width:100%; }

/* Very small phones (≤360px): tighten the gutter so content keeps breathing room */
@media (max-width: 360px){
  :root{ --gutter:16px; }
  .btn-lg{ --bp:1.05rem 1.5rem; font-size:.96rem; }
}


/* ============================================================
   HOME — hero, about, services, stats, testimonials
   ============================================================ */

/* ---- HERO ---- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  isolation:isolate;
  /* clear the sticky header so the headline never collides with the top bar */
  padding-top:calc(var(--header-h) + clamp(44px, 8vh, 96px));
  /* hero bleeds ~220px past its box; next section overlaps up */
  margin-bottom:-220px; padding-bottom:calc(clamp(96px,13vh,150px) + 220px);
}
.hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  transform:scale(1.06); animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.16) translate(-1.5%, -2%); } }
@media (prefers-reduced-motion: reduce){ .hero-bg img{ animation:none; transform:scale(1.05); } }
.hero-bg::after{ content:""; position:absolute; inset:0; background:var(--hero-overlay), linear-gradient(100deg, rgba(7,12,3,.66) 0%, rgba(7,12,3,.34) 40%, rgba(7,12,3,.06) 62%, transparent 74%); }

.hero-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }
.hero h1{
  font-size:clamp(2.7rem, 7vw, 5.6rem); line-height:.98; max-width:16ch; letter-spacing:-.02em;
  color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero h1 em{ font-style:italic; color:var(--amber-soft); }
.hero .sub{ margin-top:26px; max-width:50ch; font-size:clamp(1.05rem,1.6vw,1.3rem); color:color-mix(in oklab, #fff 86%, transparent); }
.hero-eyebrow{ margin-bottom:22px; }
.hero-actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-actions .free{ font-size:.86rem; font-weight:500; color:#fff; display:inline-flex; gap:.55em; align-items:center; padding:.6em 1.05em; border-radius:100px; background:color-mix(in oklab, #0a1004 46%, transparent); border:1px solid color-mix(in oklab,#fff 28%, transparent); backdrop-filter:blur(6px); }
.hero-actions .free::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); }

.hero-scroll{ position:absolute; left:var(--gutter); bottom:240px; z-index:1; display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:color-mix(in oklab,#fff 60%, transparent); }
.hero-scroll .line{ width:54px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; inset:0; background:var(--amber); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
@media (max-width:760px){ .hero-scroll{ display:none; } }

/* floating trust ticker over hero/about seam */
.seam-card{
  position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
  margin-top:clamp(28px, 6vh, 70px);
}
.seam-inner{
  background:color-mix(in oklab, #9bb178 26%, var(--green-700)); border:1px solid color-mix(in oklab, #9bb178 30%, transparent); border-radius:14px; box-shadow:var(--shadow-2);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; --amber:#CBA967;
}
.seam-inner > div{ padding:30px 28px; background:var(--green-700); position:relative; }
.seam-inner .k{ font-family:var(--font-display); font-size:clamp(1.9rem,3.8vw,2.7rem); color:var(--amber); line-height:1; font-variant-numeric:tabular-nums; }
.seam-inner .v{ margin-top:9px; font-size:.86rem; color:color-mix(in oklab, #ECE6D6 80%, transparent); }
@media (max-width:760px){ .seam-inner{ grid-template-columns:1fr 1fr; } }

/* section scaffold */
.section{ position:relative; padding:clamp(80px,12vh,140px) 0; }
.section-head{ max-width:760px; margin-bottom:60px; }
.section-head h2{ font-size:clamp(2rem,4.6vw,3.4rem); margin-top:18px; }
.section-head p{ margin-top:20px; color:var(--ink-soft); font-size:1.08rem; }

/* ---- ABOUT (asymmetric editorial) ---- */
.about{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(34px,5vw,68px); align-items:center; }
#about{ padding-block:clamp(62px,9vh,104px); }
.about-media{ position:relative; max-width:380px; margin-inline:auto; }
.about-media .frame{ position:relative; padding:16px 16px 18px; background:#faf6ea; border:1px solid color-mix(in oklab, var(--green-700) 24%, transparent); border-radius:4px; box-shadow:var(--shadow-2); }
.about-media .frame img{ width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; display:block; border-radius:2px; }
.about-media .frame::after{ content:""; position:absolute; inset:9px; border:1px solid color-mix(in oklab, var(--amber) 50%, transparent); border-radius:3px; pointer-events:none; }
.about-media .badge-float{
  position:absolute; right:-26px; bottom:-26px; width:128px; height:128px; border-radius:50%;
  background:var(--green-700); border:1px solid color-mix(in oklab, #9bb178 32%, transparent); box-shadow:var(--shadow-2), 0 0 0 6px color-mix(in oklab, var(--green-700) 30%, transparent); display:grid; place-items:center; text-align:center; padding:16px;
}
.about-media .badge-float .k{ font-family:var(--font-display); font-size:2.1rem; color:#CBA967; line-height:1; }
.about-media .badge-float .v{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in oklab, #ECE6D6 80%, transparent); margin-top:6px; }
.about-media .caption{ position:absolute; left:-10px; top:30px; transform:rotate(-90deg); transform-origin:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); }
.about-body h2{ font-size:clamp(2rem,4.4vw,3.2rem); }
.about-body .lead{ font-size:1.18rem; color:var(--ink); margin-top:24px; }
.about-body .rest{ margin-top:18px; color:var(--ink-soft); }
.about-points{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.about-points li{ display:flex; gap:12px; font-size:.95rem; color:var(--ink-soft); }
.about-points svg{ width:20px; height:20px; color:var(--amber); flex-shrink:0; margin-top:2px; }
@media (max-width:880px){ .about{ grid-template-columns:1fr; gap:60px; } .about-media .badge-float{ right:18px; } .about-points{ grid-template-columns:1fr; } }

/* ---- SERVICES ---- */
.services{ background:var(--bg-2); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card{
  position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface) 90%, var(--green-700)));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-1);
}
.svc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:4; opacity:0; transition:opacity .4s var(--ease); background:linear-gradient(90deg, transparent, var(--amber), transparent); }
.svc-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-2), 0 18px 56px -22px color-mix(in oklab, var(--amber) 38%, transparent); border-color:color-mix(in oklab, var(--amber) 52%, transparent); }
.svc-card:hover::before{ opacity:.9; }
.svc-photo{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.svc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.svc-card:hover .svc-photo img{ transform:scale(1.06); }
.svc-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,18,4,.5)); }
.svc-num{ display:none; }
.svc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.svc-body h3{ font-size:1.45rem; }
.svc-body p{ margin-top:12px; color:var(--ink-soft); font-size:.95rem; flex:1; }
.svc-more{ margin-top:20px; display:inline-flex; align-items:center; gap:.5em; font-size:.86rem; font-weight:500; color:var(--amber); }
.svc-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.svc-card:hover .svc-more svg{ transform:translateX(4px); }

/* ---- CTA band ---- */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; }
.cta-band .cta-bg{ position:absolute; inset:0; z-index:-2; }
.cta-band .cta-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:kenburns 30s var(--ease) infinite alternate; }
.cta-band .cta-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(12,22,6,.92), rgba(12,22,6,.62)); }
.cta-inner{ padding:clamp(70px,11vh,130px) 0; text-align:center; }
.cta-inner h2{ font-size:clamp(2.1rem,5vw,3.6rem); color:#fff; max-width:18ch; margin-inline:auto; }
.cta-inner p{ margin:22px auto 0; max-width:46ch; color:color-mix(in oklab,#fff 80%, transparent); }
.cta-inner .cta-actions{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-phone{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); color:#fff; margin-top:30px; text-shadow:0 0 26px color-mix(in oklab, var(--amber) 60%, transparent); animation:ctaGlow 4s ease-in-out infinite; }
.cta-phone svg{ width:1em; height:1em; color:var(--amber); filter:drop-shadow(0 0 10px color-mix(in oklab, var(--amber) 70%, transparent)); }
@keyframes ctaGlow{ 0%,100%{ text-shadow:0 0 22px color-mix(in oklab, var(--amber) 45%, transparent); } 50%{ text-shadow:0 0 34px color-mix(in oklab, var(--amber) 75%, transparent); } }
@media (prefers-reduced-motion: reduce){ .cta-phone{ animation:none; } }

/* ---- TESTIMONIALS (styled empty state) ---- */
.testi{ text-align:center; }
.testi-empty{
  max-width:680px; margin:40px auto 0; padding:54px 40px; border:1px dashed var(--line-strong); border-radius:16px;
  background:color-mix(in oklab, var(--surface) 60%, transparent); position:relative;
}
.testi-stars{ display:inline-flex; gap:6px; color:var(--amber); margin-bottom:20px; }
.testi-stars svg{ width:24px; height:24px; }
.testi-empty h3{ font-size:1.7rem; }
.testi-empty p{ margin-top:14px; color:var(--ink-soft); }
.testi-empty .hint{ margin-top:24px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.testi-dots{ display:flex; gap:8px; justify-content:center; margin-top:28px; }
.testi-dots span{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
.testi-dots span:first-child{ background:var(--amber); }

/* ---- auto-rotating testimonial slider ---- */
.testi-slider{ position:relative; max-width:900px; margin:46px auto 0; }
.testi-viewport{ overflow:hidden; border:1px solid var(--line); border-radius:18px; background:color-mix(in oklab, var(--surface) 70%, transparent); }
.testi-track{ display:grid; }
.testi-card{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s var(--ease); box-sizing:border-box; padding:clamp(40px,5.5vw,64px) clamp(26px,5vw,68px); text-align:center; }
.testi-card.active{ opacity:1; visibility:visible; }
.testi-card .testi-photo{ width:clamp(220px, 62%, 360px); margin:0 auto 26px; border-radius:14px; overflow:hidden; aspect-ratio:16/10; box-shadow:var(--shadow-1); border:1px solid var(--line); }
.testi-card .testi-photo img{ width:100%; height:100%; object-fit:cover; }
.testi-card .stars{ display:flex; justify-content:center; gap:5px; color:var(--amber); margin-bottom:20px; }
.testi-card .stars svg{ width:20px; height:20px; }
.testi-card blockquote{ margin:0 auto; max-width:42ch; font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.25rem,2.5vw,1.7rem); line-height:1.4; color:var(--ink); text-wrap:balance; }
.testi-card .who{ margin-top:30px; display:flex; align-items:center; justify-content:center; gap:13px; }
.testi-card .testi-face{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--line-strong); flex-shrink:0; background:color-mix(in oklab, var(--sage-400) 18%, transparent); }
.testi-card .testi-initials{ display:grid; place-items:center; background:var(--amber); color:#241700; font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:.02em; border-color:color-mix(in oklab, var(--amber) 60%, transparent); }
.testi-badge{ display:flex; width:fit-content; align-items:center; gap:.55em; margin:0 auto 20px; padding:.45em .95em; border-radius:100px; background:color-mix(in oklab, var(--sage-400) 15%, transparent); border:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.testi-badge svg{ width:13px; height:13px; color:var(--amber); }
.testi-card .av{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-body); font-weight:600; font-size:.95rem; color:#241700; flex-shrink:0; }
.testi-card .nm{ text-align:left; }
.testi-card .nm b{ font-family:var(--font-body); font-weight:600; font-size:.98rem; display:block; }
.testi-card .nm span{ font-size:.84rem; color:var(--ink-faint); }
.testi-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); transition:all .3s var(--ease); z-index:2; }
.testi-arrow:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-50%) scale(1.06); }
.testi-arrow svg{ width:20px; height:20px; }
.testi-arrow.prev{ left:-23px; } .testi-arrow.next{ right:-23px; }
@media (max-width:600px){ .testi-arrow.prev{ left:6px; } .testi-arrow.next{ right:6px; } .testi-arrow{ background:color-mix(in oklab,var(--surface) 85%, transparent); backdrop-filter:blur(6px); } }
.testi-dotrow{ display:flex; gap:9px; justify-content:center; margin-top:26px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; padding:0; border:none; background:var(--line-strong); transition:all .3s var(--ease); }
.testi-dot.on{ background:var(--amber); width:24px; border-radius:5px; }
.testi-foot{ margin-top:22px; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- service-area strip ---- */
.area{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding:30px var(--gutter); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.area .marq{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.7rem); color:var(--ink-soft); }
.area .marq b{ color:var(--amber); font-style:normal; }

/* image fallback (when Unsplash fails) */
.img-fallback{
  background:
    repeating-linear-gradient(135deg, color-mix(in oklab,var(--green-500) 50%, var(--bg)) 0 14px, color-mix(in oklab,var(--green-700) 70%, var(--bg)) 14px 28px);
  display:grid; place-items:center; color:var(--cream-dim);
}
.img-fallback::after{ content:attr(data-label); font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; text-align:center; padding:0 12px; }


/* ============================================================
   INNER PAGES — About / Services / Contact
   Builds on site.css + home.css (shares .hero-bg, .section, .svc-card,
   .seam-card, .cta-band, .about helpers).
   ============================================================ */

/* ---- shorter hero variant w/ same bleed + Ken Burns ---- */
.page-hero{
  position:relative; display:flex; align-items:center; isolation:isolate;
  min-height:clamp(460px, 64vh, 680px);
  padding-top:calc(var(--header-h) + clamp(46px, 8vh, 90px));
  padding-bottom:calc(clamp(60px,9vh,110px) + 210px);
  margin-bottom:-210px;
}
.page-hero .hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.page-hero .hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.06); animation:kenburns 28s var(--ease) infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .page-hero .hero-bg img{ animation:none; transform:scale(1.05); } }
.page-hero .hero-bg::after{ content:""; position:absolute; inset:0; background:var(--hero-overlay), linear-gradient(100deg, rgba(7,12,3,.66) 0%, rgba(7,12,3,.34) 40%, rgba(7,12,3,.06) 62%, transparent 74%); }
.page-hero .hero-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1; color:#fff; max-width:18ch; text-shadow:0 2px 40px rgba(0,0,0,.5); }
.page-hero h1 em{ font-style:italic; color:var(--amber-soft); }
.page-hero .sub{ margin-top:22px; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.25rem); color:color-mix(in oklab, #fff 86%, transparent); }
.page-hero .hero-eyebrow{ margin-bottom:20px; }

/* breadcrumb */
.crumb{ display:flex; align-items:center; gap:10px; margin-bottom:22px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in oklab,#fff 64%, transparent); }
.crumb a{ color:inherit; transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--amber); }
.crumb svg{ width:13px; height:13px; opacity:.6; }

/* section that emerges from the hero bleed */
.after-hero{ position:relative; z-index:1; background:var(--bg); padding-top:clamp(90px,13vh,150px); }

/* ---- generic intro head centered ---- */
.lead-narrow{ max-width:760px; }
.lead-narrow .lead{ font-size:1.25rem; color:var(--ink); margin-top:24px; }
.lead-narrow p + p{ margin-top:18px; color:var(--ink-soft); }

/* ============================================================
   VALUES / WHY US
   ============================================================ */
.values{ background:var(--bg-2); }
.values-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{
  position:relative; overflow:hidden; border:1px solid color-mix(in oklab, #9bb178 26%, transparent); border-radius:16px; padding:32px 30px;
  background:linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 100%);
  color:#ECE6D6; isolation:isolate;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.value-card::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(70% 60% at 90% 0%, color-mix(in oklab, var(--amber) 14%, transparent), transparent 70%); }
.value-card:hover{ transform:translateY(-7px); border-color:color-mix(in oklab, var(--amber) 50%, transparent); box-shadow:var(--shadow-2), 0 18px 56px -22px color-mix(in oklab, var(--amber) 36%, transparent); }
.value-ic{ width:54px; height:54px; border-radius:13px; display:grid; place-items:center; background:color-mix(in oklab, var(--amber) 24%, transparent); color:#E2C88E; margin-bottom:20px; border:1px solid color-mix(in oklab, var(--amber) 34%, transparent); }
.value-ic svg{ width:26px; height:26px; }
.value-card h3{ font-size:1.4rem; color:#F4F0E6; }
html[data-theme="light"] .value-card h3{ color:#F4F0E6; }
.value-card p{ margin-top:12px; color:color-mix(in oklab, #ECE6D6 78%, transparent); font-size:.96rem; }

/* ============================================================
   SERVICE DETAIL ROWS (services.html)
   ============================================================ */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; padding:clamp(50px,7vh,90px) 0; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.svc-detail:last-of-type{ border-bottom:none; }
.svc-detail.rev .svc-detail-media{ order:2; }
@media (max-width:880px){ .svc-detail{ grid-template-columns:1fr; gap:36px; } .svc-detail.rev .svc-detail-media{ order:0; } }
.svc-detail-media{ position:relative; }
.svc-detail-media .frame{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-2); }
.svc-detail-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.svc-detail:hover .svc-detail-media .frame > img{ transform:scale(1.05); }

/* ---- per-service photo gallery (crossfade + arrows) ---- */
.frame.pc .pc-track{ display:grid; width:100%; height:100%; }
.frame.pc .pc-slide{ grid-area:1 / 1; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s var(--ease), transform .8s var(--ease); }
.frame.pc .pc-slide.contain{ object-fit:contain; background:transparent; }
.frame.pc .pc-slide.contain.matte{ background:linear-gradient(160deg,#16300a 0%,#0c1606 100%); }
.frame.pc.frame-blurbg::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--pcbg) center/cover no-repeat; filter:blur(22px) brightness(.5) saturate(1.1); transform:scale(1.14); }
.frame.pc.frame-blurbg .pc-track{ position:relative; z-index:1; }
.frame.pc .pc-slide.active{ opacity:1; visibility:visible; }
.svc-detail:hover .frame.pc .pc-slide.active{ transform:scale(1.05); }
.frame.pc .pc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab, #0c1606 52%, transparent); border:1px solid color-mix(in oklab,#fff 30%, transparent);
  color:#fff; backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.frame.pc .pc-arrow svg{ width:22px; height:22px; }
.frame.pc .pc-arrow.prev{ left:14px; }
.frame.pc .pc-arrow.next{ right:14px; }
.frame.pc:hover .pc-arrow, .frame.pc:focus-within .pc-arrow{ opacity:1; }
.frame.pc .pc-arrow:hover{ background:var(--amber); color:#241700; border-color:var(--amber); }
.frame.pc .pc-arrow.prev:hover{ transform:translateY(-50%) translateX(-2px); }
.frame.pc .pc-arrow.next:hover{ transform:translateY(-50%) translateX(2px); }
.frame.pc .pc-dots{ position:absolute; left:0; right:0; bottom:14px; z-index:3; display:flex; gap:7px; justify-content:center; }
.frame.pc .pc-dot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:color-mix(in oklab,#fff 50%, transparent); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; transition:background .3s var(--ease), width .3s var(--ease); }
.frame.pc .pc-dot.on{ background:var(--amber); width:20px; border-radius:5px; }
@media (hover: none){ .frame.pc .pc-arrow{ opacity:1; } }
.svc-detail-media .num{ display:none; }
.svc-detail-body .eyebrow{ margin-bottom:16px; }
.svc-detail-body h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); }
.svc-detail-body .desc{ margin-top:18px; color:var(--ink-soft); }
.benefits{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.benefits li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:var(--ink); }
.benefits svg{ width:21px; height:21px; color:var(--amber); flex-shrink:0; margin-top:2px; }
.svc-detail-body .svc-cta{ margin-top:28px; display:inline-flex; align-items:center; gap:.6em; }

/* services quick-nav chips */
.svc-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.svc-chip{ display:inline-flex; align-items:center; gap:.5em; padding:.6em 1.1em; border-radius:100px; border:1px solid var(--line-strong); color:var(--ink-soft); font-size:.86rem; transition:all .3s var(--ease); }
.svc-chip:hover{ border-color:var(--amber); color:var(--ink); background:color-mix(in oklab,var(--amber) 10%, transparent); transform:translateY(-2px); }
.svc-chip span.n{ font-family:var(--font-mono); font-size:.74rem; color:var(--amber); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,5vw,70px); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

.contact-details .ci{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-details .ci:first-child{ padding-top:0; }
.contact-ic{ width:46px; height:46px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; background:color-mix(in oklab,var(--amber) 16%, transparent); color:var(--amber); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
/* distinct on-brand themed colors per contact method */
.contact-ic.ic-phone{ color:#B8862B; background:color-mix(in oklab,#B8862B 18%, transparent); }
.contact-ic.ic-email{ color:#5C7A2E; background:color-mix(in oklab,#5C7A2E 18%, transparent); }
.contact-ic.ic-loc{   color:#2F6E3F; background:color-mix(in oklab,#2F6E3F 18%, transparent); }
.contact-ic.ic-hours{ color:#9A7B22; background:color-mix(in oklab,#9A7B22 18%, transparent); }
.contact-details .ci:hover .contact-ic{ transform:translateY(-2px); box-shadow:0 8px 20px -10px currentColor; }
html[data-theme="dark"] .contact-ic.ic-phone{ color:#E0B14A; background:color-mix(in oklab,#E0B14A 16%, transparent); }
html[data-theme="dark"] .contact-ic.ic-email{ color:#9bb178; background:color-mix(in oklab,#9bb178 18%, transparent); }
html[data-theme="dark"] .contact-ic.ic-loc{ color:#7FB890; background:color-mix(in oklab,#7FB890 16%, transparent); }
html[data-theme="dark"] .contact-ic.ic-hours{ color:#D8B24A; background:color-mix(in oklab,#D8B24A 16%, transparent); }
.contact-ic svg{ width:22px; height:22px; }
.contact-details .ci h4{ font-family:var(--font-body); font-weight:600; font-size:1.02rem; margin:0 0 3px; }
.contact-details .ci a, .contact-details .ci p{ color:var(--ink-soft); font-size:.96rem; }
.contact-details .ci a:hover{ color:var(--amber); }
.contact-social{ display:flex; gap:12px; margin-top:26px; align-items:center; }

/* form */
.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(26px,4vw,42px); box-shadow:var(--shadow-1); }
.contact-form h3{ font-size:1.6rem; }
.contact-form .fhint{ color:var(--ink-soft); margin-top:8px; font-size:.94rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.82rem; font-weight:500; color:var(--ink-soft); letter-spacing:.01em; }
.field label .req{ color:var(--amber); }
.field input, .field select, .field textarea{
  width:100%; padding:.85em 1em; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--bg-2); color:var(--ink); font:inherit; font-size:.96rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in oklab,var(--amber) 22%, transparent); }
.field.err input, .field.err select, .field.err textarea{ border-color:#e0683c; box-shadow:0 0 0 3px color-mix(in oklab,#e0683c 22%, transparent); }
.field .msg{ font-size:.78rem; color:#e88a64; min-height:0; display:none; }
.field.err .msg{ display:block; }
.form-actions{ margin-top:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note{ font-size:.82rem; color:var(--ink-faint); }
.form-success{
  display:none; margin-top:22px; padding:20px 22px; border-radius:12px; gap:14px; align-items:center;
  background:color-mix(in oklab,var(--sage-400) 18%, transparent); border:1px solid var(--line-strong);
}
.form-success.show{ display:flex; }
.form-success svg{ width:26px; height:26px; color:var(--amber); flex-shrink:0; }
.form-success b{ display:block; }
.form-success span{ color:var(--ink-soft); font-size:.92rem; }

/* map */
.map-wrap{ position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); }
.map-wrap iframe{ display:block; width:100%; height:420px; border:0; filter:saturate(.9) contrast(1.02); }
html[data-theme="dark"] .map-wrap iframe{ filter:invert(.92) hue-rotate(175deg) saturate(.7) brightness(.95); }
.map-tag{ position:absolute; left:20px; top:20px; z-index:2; display:inline-flex; align-items:center; gap:.5em; padding:.55em 1em; border-radius:100px; background:color-mix(in oklab,var(--bg) 82%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line); font-size:.84rem; }
.map-tag svg{ width:15px; height:15px; color:var(--amber); }
@media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } .map-wrap iframe{ height:340px; } }

/* ============================================================
   JOURNAL
   ============================================================ */
.jr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .jr-grid{ grid-template-columns:1fr; } }
.jr-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:32px 32px 30px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface) 90%, var(--green-700)));
  box-shadow:var(--shadow-1); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.jr-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .4s var(--ease); background:linear-gradient(90deg, transparent, var(--amber), transparent); }
.jr-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2), 0 18px 56px -22px color-mix(in oklab, var(--amber) 32%, transparent); border-color:color-mix(in oklab, var(--amber) 50%, transparent); }
.jr-card:hover::before{ opacity:.9; }
.jr-card h3{ font-size:1.5rem; color:var(--green-700); }
html[data-theme="dark"] .jr-card h3{ color:#F4F0E6; }
.jr-card p{ color:var(--ink-soft); font-size:.97rem; }
.jr-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); padding:.4em .8em; border:1px solid color-mix(in oklab,var(--amber) 40%, transparent); border-radius:100px; }
.jr-more{ display:inline-flex; align-items:center; gap:.5em; font-size:.88rem; font-weight:500; color:var(--amber); margin-top:auto; }
.jr-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.jr-card:hover .jr-more svg{ transform:translateX(4px); }

.jr-articles{ padding-top:0; }
.jr-readwrap{ max-width:760px; }
.jr-article{ padding:48px 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.jr-article:first-child{ border-top:none; padding-top:0; }
.jr-meta{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.jr-read{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.jr-article h2{ font-size:clamp(1.8rem,3.8vw,2.7rem); color:var(--green-700); }
html[data-theme="dark"] .jr-article h2{ color:#F4F0E6; }
.jr-lead{ margin-top:18px; font-family:var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.5; color:var(--ink); }
.jr-article p{ margin-top:18px; color:var(--ink-soft); font-size:1.05rem; line-height:1.7; }
.jr-tips{ list-style:none; margin:28px 0 0; padding:24px 26px; display:flex; flex-direction:column; gap:13px;
  background:color-mix(in oklab, var(--sage-400) 10%, transparent); border:1px solid var(--line); border-radius:14px; }
.jr-tips li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-size:.98rem; }
.jr-tips svg{ width:20px; height:20px; color:var(--amber); flex-shrink:0; margin-top:2px; }
.jr-cta{ margin-top:28px; }