/* ===================================================================
   Complete Horticulture & Tree Service - shared stylesheet
   Design system ported from the approved index.html. Brand tokens are
   mirrored in the Tailwind config (see src/partials/head.html). If you
   add a color here, add it there too.
   =================================================================== */

:root{
  --paper:#F5F1E8; --paper-2:#EBE4D5; --pine-ink:#15221B;
  --forest:#2E7D44; --forest-deep:#1B4D2E; --sap:#6FA544;
  --bark:#5A3E2B; --amber:#BC8438; --amber-lt:#D8A44F;
  --night:#0F1A13; --night-2:#152A1D; --bone:#F1EDE3; --bone-dim:#B0C0AF;
  --ink-dim:#5C6B5B; --line-lt:rgba(21,34,27,.14); --line-dk:rgba(241,237,227,.14);
}
html{background:var(--night);scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--pine-ink);
  font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;}

h1,h2,h3,.font-serif{font-family:'Newsreader',Georgia,serif;letter-spacing:-.01em;line-height:1.05;}
.font-sans{font-family:'Hanken Grotesque',system-ui,sans-serif;}
.eyebrow{font-family:'Hanken Grotesque',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;}
.tag{font-family:'Hanken Grotesque',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.serif-lead{font-family:'Newsreader',serif;}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:'Hanken Grotesque',sans-serif;font-weight:600;
  border-radius:2px;transition:.24s cubic-bezier(.2,.7,.2,1);line-height:1;text-decoration:none;cursor:pointer;}
.btn-amber{background:var(--amber);color:#20160a;padding:1rem 1.6rem;}
.btn-amber:hover{background:var(--amber-lt);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(188,132,56,.7);}
.btn-forest{background:var(--forest);color:#fff;padding:1rem 1.6rem;}
.btn-forest:hover{background:var(--forest-deep);transform:translateY(-2px);}
.btn-line-dk{border:1px solid rgba(241,237,227,.3);color:var(--bone);padding:1rem 1.6rem;background:rgba(255,255,255,.04);backdrop-filter:blur(4px);}
.btn-line-dk:hover{border-color:var(--amber-lt);color:var(--amber-lt);}
.btn-line-lt{border:1px solid var(--line-lt);color:var(--pine-ink);padding:1rem 1.6rem;}
.btn-line-lt:hover{border-color:var(--forest);color:var(--forest);}

.ulink{position:relative;color:var(--forest);font-family:'Hanken Grotesque',sans-serif;font-weight:600;text-decoration:none;}
.ulink::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--amber);transition:.3s;}
.ulink:hover::after{width:100%;}

.img-slot{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--paper-2),#DDD4C0);isolation:isolate;}
.img-slot.dark{background:linear-gradient(135deg,var(--night-2),var(--night));}
.img-slot::after{content:attr(data-file);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Hanken Grotesque',sans-serif;font-size:.7rem;letter-spacing:.1em;color:rgba(92,107,91,.55);z-index:0;
  background:repeating-linear-gradient(45deg,rgba(21,34,27,.03) 0 10px,transparent 10px 20px);}
.img-slot.dark::after{color:rgba(176,192,175,.45);background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}

.card-lt{background:var(--paper);border:1px solid var(--line-lt);border-radius:3px;transition:.35s cubic-bezier(.2,.7,.2,1);}
.card-lt:hover{border-color:var(--forest);transform:translateY(-4px);box-shadow:0 20px 44px -30px rgba(21,34,27,.45);}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(2){transition-delay:.07s}.stagger.in>*:nth-child(3){transition-delay:.14s}
.stagger.in>*:nth-child(4){transition-delay:.21s}.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.35s}

.rule-dk{height:1px;background:linear-gradient(90deg,transparent,var(--line-dk),transparent);}
::selection{background:var(--amber);color:#20160a;}
input,select,textarea{font-family:'Newsreader',serif;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* hero */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--night);}
#leaf-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;}

/* ---- Interior page hero (non-home): shorter, dark band ---- */
.page-hero{position:relative;overflow:hidden;background:var(--forest-deep);}
.page-hero .page-hero-bg{position:absolute;inset:0;z-index:0;}
.page-hero .page-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,17,12,.9) 0%,rgba(10,17,12,.6) 55%,rgba(10,17,12,.35) 100%);}
.page-hero .page-hero-inner{position:relative;z-index:2;}

/* ---- Multi-page nav dropdowns ---- */
.navlink{color:var(--bone-dim);transition:color .2s;text-decoration:none;}
.navlink:hover{color:var(--bone);}
.has-menu{position:relative;}
.has-menu>.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:250px;background:var(--forest-deep);border:1px solid var(--line-dk);border-radius:4px;
  padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:70;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);}
.has-menu:hover>.submenu,.has-menu:focus-within>.submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);}
.submenu a{display:block;padding:.5rem .9rem;border-radius:3px;color:var(--bone-dim);font-size:.95rem;line-height:1.25;white-space:nowrap;text-decoration:none;transition:.18s;}
.submenu a:hover{background:var(--night-2);color:var(--bone);}
.submenu .submenu-head{padding:.35rem .8rem .2rem;color:var(--amber-lt);}
.submenu-2col{min-width:540px;display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem;row-gap:.1rem;}

/* active nav state - set by build via .nav-<key> */
.navlink[data-active="true"]{color:var(--bone);}
.navlink[data-active="true"]::after{content:"";display:block;height:2px;background:var(--amber);margin-top:3px;border-radius:2px;}

/* ---- Breadcrumbs ---- */
.crumbs{font-family:'Hanken Grotesque',sans-serif;font-size:.8rem;letter-spacing:.04em;}
.crumbs a{color:var(--forest);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs .sep{color:var(--ink-dim);margin:0 .5rem;}
.crumbs.on-dark a{color:var(--amber-lt);}
.crumbs.on-dark .sep,.crumbs.on-dark span[aria-current]{color:var(--bone-dim);}

/* ---- Long-form prose (blog articles, legal pages) ---- */
.prose{max-width:none;}
.prose p{margin:0 0 1.2rem;color:var(--pine-ink);line-height:1.75;}
.prose h2{font-size:1.9rem;margin:2.4rem 0 1rem;color:var(--pine-ink);font-weight:400;}
.prose h3{font-size:1.35rem;margin:1.8rem 0 .6rem;color:var(--pine-ink);font-family:'Hanken Grotesque',sans-serif;font-weight:600;}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.3rem;}
.prose li{margin:.4rem 0;line-height:1.7;}
.prose a{color:var(--forest);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-lt);text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--amber);}
.prose blockquote{margin:1.6rem 0;padding:.6rem 0 .6rem 1.4rem;border-left:3px solid var(--amber);
  font-style:italic;color:var(--ink-dim);}
.prose strong{color:var(--pine-ink);font-weight:600;}
.prose .callout{background:var(--paper-2);border:1px solid var(--line-lt);border-radius:4px;padding:1.2rem 1.4rem;margin:1.8rem 0;}
.prose .callout p:last-child{margin-bottom:0;}
.prose h4{font-size:1.08rem;margin:1.4rem 0 .5rem;color:var(--pine-ink);font-family:'Hanken Grotesque',sans-serif;font-weight:600;}
.prose .table-wrap{overflow-x:auto;margin:1.8rem 0;}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;}
.prose th,.prose td{border:1px solid var(--line-lt);padding:.6rem .8rem;text-align:left;vertical-align:top;line-height:1.6;}
.prose thead th{background:var(--paper-2);font-family:'Hanken Grotesque',sans-serif;font-weight:600;color:var(--pine-ink);}

/* ---- FAQ details ---- */
.faq details{border-bottom:1px solid var(--line-lt);}
.faq summary{list-style:none;}
.faq summary::-webkit-details-marker{display:none;}

/* ---- Notice / TODO(client) flags (visible in-page, on-brand) ---- */
.notice{border:1px dashed var(--amber);background:rgba(188,132,56,.08);border-radius:4px;
  padding:.9rem 1.1rem;font-family:'Hanken Grotesque',sans-serif;font-size:.85rem;color:var(--bark);}
.notice.on-dark{color:var(--amber-lt);background:rgba(188,132,56,.12);}

@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important;}
  html{scroll-behavior:auto;} #leaf-canvas{display:none;}
  .animate-bounce{animation:none!important;}
}