/* ============================================================
   GroveDeck WordPress theme — shared stylesheet
   Organic "Grove" direction. Light warm canvas, deep forest
   anchor, wave transitions between color bands.
   No mid-greens. Palette (WCAG AA verified):
     canvas #F7F6F1 | canvas-2 #ECEFE6 | ink #1E2A23 (13.8:1)
     ink-2 #3F5249 (7.7:1) | leaf-deep #2C6149 (links/buttons)
     leaf-pale #E3EFE5 (on-dark) | forest #1B3325 (bands)
     focus #1B5FB0
   ============================================================ */
:root{
  --canvas:#F7F6F1;
  --canvas-2:#ECEFE6;
  --ink:#1E2A23;
  --ink-2:#3F5249;
  --forest:#1B3325;
  --forest-2:#264534;
  --leaf-deep:#2C6149;
  --leaf-pale:#E3EFE5;  /* on-dark text */
  --honey:#E8B45C;      /* primary CTA accent (honey + ink = 7.9:1) */
  --honey-dark:#D9A648; /* honey hover */
  --band:#E8EDDE;       /* light band background */
  --focus:#1B5FB0;
  --hairline:#CBD5CB;
  --radius:14px;
  --measure:70ch;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:"Epilogue",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{
  font-family:"Fraunces",Georgia,serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.375rem,5.2vw,3.875rem)}
h2{font-size:clamp(1.625rem,3vw,2.375rem);color:var(--leaf-deep)}  /* 6.7:1 on canvas */
h3{font-size:1.25rem;line-height:1.3}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:var(--leaf-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{font-weight:600}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
em{font-style:italic}

/* Skip link */
.skip-link{
  position:absolute;left:1rem;top:-3.5rem;z-index:100;
  background:var(--ink);color:var(--canvas);
  padding:.65rem 1.1rem;border-radius:0 0 10px 10px;
  text-decoration:none;font-weight:600;transition:top .15s ease-out;
}
.skip-link:focus{top:0}

/* Layout helpers */
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.wrap-narrow{max-width:48rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
section{padding-block:clamp(3rem,6vw,5rem);scroll-margin-top:2rem}
.band-2{background:var(--band)}
.band-soft{background:var(--canvas-2)}

/* ===== Wave transitions between bands (organic, varied) ===== */
/* -2px bleed + 4px overscan kills hairline seams where bands meet */
.wave{line-height:0;display:block;margin-top:-2px;margin-bottom:-2px;position:relative}
.wave svg{display:block;width:100%;height:calc(clamp(52px,9vw,116px) + 4px)}
/* shorter wave for tighter interior rhythm */
.wave.wave-sm svg{height:calc(clamp(40px,6vw,80px) + 4px)}
/* taller layered "treeline horizon" waves for hero → content and content → footer */
.wave-hero svg,.wave-foot svg{height:clamp(110px,17vw,200px)}

/* Buttons — 44px minimum target */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.6rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:all .2s ease-out;
  /* Raised-glass finish — a glossy top sheen + a soft lift shadow, matching the
     selected nav pill so every filled button reads as the same lifted material. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 5px 24px -9px rgba(6,14,10,.36);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 30px -9px rgba(6,14,10,.45);
}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--honey);color:var(--ink)}            /* honey + ink 7.9:1 */
.btn-primary:hover{background:var(--honey-dark)}
/* Ghost/outline buttons stay flat at rest — a drop shadow under a transparent fill reads wrong */
.btn-outline{background:transparent;color:var(--leaf-deep);border-color:var(--leaf-deep);box-shadow:none} /* 6.7:1 */
.btn-outline:hover{background:var(--band);box-shadow:0 3px 14px -8px rgba(15,28,21,.22)}
.on-dark .btn-outline{color:var(--leaf-pale);border-color:var(--leaf-pale)} /* 11.5:1 */
.on-dark .btn-outline:hover{background:var(--forest-2)}
.on-dark :focus-visible{outline-color:#9CC4F0}
/* Honey primary keeps its colour on dark too — the warm fill carries the emphasis. */
/* Secondary CTA — solid leaf-green, pairs with the honey primary (See how we work). */
.btn-lead{
  background:var(--leaf-deep);
  color:#fff;
  border-color:transparent;
}
.btn-lead:hover{
  background:#234E3B;
  color:#fff;
}

/* ===== Header (forest anchor) — shared chrome ===== */
.hero-shell{background:var(--forest);color:var(--canvas);position:relative;overflow:hidden}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.25rem;position:relative;z-index:2}
.wordmark{
  font-family:"Fraunces",Georgia,serif;font-size:1.45rem;font-weight:600;
  color:var(--canvas);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
}
.wordmark svg{flex:none}
/* ===== Primary navigation — WordPress-ready accessible disclosure menu ===== */
/* Screen-reader-only utility (WP convention) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Mobile menu controls — hidden on desktop, revealed in the hamburger media query */
.nav-toggle{
  display:none;appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
  color:var(--canvas);border-radius:12px;flex:none;
  transition:background .18s ease-out;
}
.nav-toggle:hover{background:rgba(227,239,229,.12)}
.nav-toggle-bars{position:relative;display:block;width:22px;height:14px}
.nav-toggle-bars span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
.nav-close{
  display:none;position:absolute;top:1.4rem;right:clamp(1.25rem,6vw,2.25rem);
  width:44px;height:44px;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--canvas);cursor:pointer;border-radius:12px;
  transition:background .18s ease-out;
}
.nav-close:hover{background:rgba(227,239,229,.12)}
body.nav-open{overflow:hidden}
/* Backdrop behind the right-side drawer (shown only in the mobile media query) */
.nav-scrim{display:none;position:fixed;inset:0;z-index:55;background:rgba(13,26,18,.5);opacity:0;visibility:hidden;border:0;margin:0;padding:0;cursor:pointer;transition:opacity .26s ease-out,visibility .26s}

.site-nav{display:flex;align-items:center}
.site-nav .menu,
.site-nav .sub-menu{list-style:none;margin:0;padding:0}
.site-nav .menu{display:flex;align-items:center;gap:clamp(.15rem,1vw,.5rem);flex-wrap:wrap}
.site-nav .menu-item{position:relative;display:flex;align-items:center}

/* Top-level links and submenu toggles share one pill affordance — NO underline on hover */
.site-nav .menu-item > a,
.site-nav .submenu-toggle{
  color:var(--leaf-pale);text-decoration:none;font-weight:500;font-size:1rem;
  min-height:44px;display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem .8rem;border-radius:999px;
  transition:background .18s ease-out,color .18s ease-out;
}
/* Reflow-free hover bold: a hidden 600-weight ghost reserves the bold width on
   the horizontal top-level labels, so bolding one never nudges the row. */
.site-nav > .menu > .menu-item > a:not(.btn){
  flex-direction:column;justify-content:center;align-items:flex-start;gap:0;
}
.site-nav > .menu > .menu-item > a:not(.btn)::after{
  content:attr(data-text);font-weight:600;height:0;line-height:0;
  overflow:hidden;visibility:hidden;pointer-events:none;
}
/* Childless items: hover/focus underlines the link (footer-style) — buttons excluded */
.site-nav .menu-item:not(.menu-item-has-children):not(.menu-cta) > a:hover,
.site-nav .menu-item:not(.menu-item-has-children):not(.menu-cta) > a:focus-visible{
  color:#fff;font-weight:600;
}

/* Parent items: the link and its caret act as ONE target — hovering, focusing, or
   opening either underlines the label and brightens the caret together. */
.site-nav .menu-item-has-children{border-radius:999px}
.site-nav .menu-item-has-children:hover > a,
.site-nav .menu-item-has-children:focus-within > a,
.site-nav .menu-item-has-children.is-open > a{
  color:#fff;font-weight:600;
}
.site-nav .menu-item-has-children:hover > .submenu-toggle,
.site-nav .menu-item-has-children:focus-within > .submenu-toggle,
.site-nav .menu-item-has-children.is-open > .submenu-toggle{
  color:#fff;
}

/* Current page / current section indicator — "Soft puff" raised glass: a pillowy
   translucent fill, a top sheen, a fine rim, and a wide soft drop so the pill
   floats above the bar. Scoped to TOP-LEVEL items. Bold white label is the
   primary cue (WCAG 1.4.1); the glass is the supporting shape signal. */

/* (a) Childless current item: the link is the glass pill. */
.site-nav > .menu > .menu-item:not(.menu-item-has-children).current-menu-item > a:not(.btn),
.site-nav > .menu > .menu-item:not(.menu-item-has-children) > a[aria-current="page"]:not(.btn){
  color:#fff;font-weight:600;
  background:rgba(227,239,229,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(227,239,229,.12),
    0 12px 26px -8px rgba(0,0,0,.45);
}

/* (b) Parent item that is the current section (ancestor) or current page:
   the glass wraps the whole pill — label AND caret together (applied to the li). */
.site-nav > .menu > .menu-item-has-children.current-menu-ancestor,
.site-nav > .menu > .menu-item-has-children.current-menu-item{
  background:rgba(227,239,229,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(227,239,229,.12),
    0 12px 26px -8px rgba(0,0,0,.45);
}
.site-nav > .menu > .menu-item-has-children.current-menu-ancestor > a,
.site-nav > .menu > .menu-item-has-children.current-menu-item > a,
.site-nav > .menu > .menu-item-has-children.current-menu-ancestor > .submenu-toggle,
.site-nav > .menu > .menu-item-has-children.current-menu-item > .submenu-toggle{
  color:#fff;font-weight:600;
}

/* Current item inside an open dropdown — same "Soft puff" glass, pill-shaped */
.site-nav .sub-menu .current-menu-item > a,
.site-nav .sub-menu .menu-item > a[aria-current="page"]{
  color:#fff;font-weight:600;
  background:rgba(227,239,229,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(227,239,229,.12),
    0 10px 20px -10px rgba(0,0,0,.5);
}

/* Parent items: anchor + injected toggle button sit together. Extra left
   padding balances the room the caret takes on the right so the pill looks even. */
.site-nav .menu-item-has-children > a{padding-left:1.15rem;padding-right:.45rem}
.site-nav .submenu-toggle{
  background:transparent;border:0;cursor:pointer;
  margin-left:-.5rem;padding:.5rem .5rem;min-width:44px;justify-content:center;
}
.site-nav .submenu-toggle svg{transition:transform .22s ease-out}
.site-nav .menu-item-has-children.is-open > .submenu-toggle svg{transform:rotate(180deg)}

/* Dropdown panel */
.site-nav .sub-menu{
  position:absolute;top:calc(100% + .5rem);left:0;z-index:40;min-width:248px;
  background:var(--forest-2);
  border:1px solid rgba(227,239,229,.16);border-radius:16px;padding:.4rem;
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease-out,transform .18s ease-out,visibility .18s;
}
.site-nav .menu-item-has-children.is-open > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.site-nav .sub-menu .menu-item{display:block}
.site-nav .sub-menu .menu-item > a{
  display:block;width:100%;border-radius:999px;padding:.62rem 1.05rem;
  min-height:44px;font-weight:500;color:var(--leaf-pale);white-space:nowrap;
}
.site-nav .sub-menu .menu-item > a:hover,
.site-nav .sub-menu .menu-item > a:focus-visible{color:#fff;font-weight:600}

/* CTA item keeps the pill button look (honey primary) */
.site-nav .menu-cta{margin-left:.35rem}
.site-nav .menu-cta > a.btn{white-space:nowrap;padding:.7rem 1.6rem;min-height:48px;color:var(--ink)}
.site-nav .menu-cta > a.btn:hover{color:var(--ink);background:var(--honey-dark)}

/* No-JS / fallback: reveal submenu on hover for pointer users */
@media (hover:hover){
  .no-js .site-nav .menu-item-has-children:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
}
/* ===== Mobile: hamburger drawer (JS) / wrapping fallback (no-JS) ===== */
@media (max-width:860px){
  /* Submenus stack inline; menu becomes a vertical list. Applies in the drawer
     AND in the no-JS wrapping fallback. */
  .site-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:.1rem 0 .3rem .8rem;min-width:0}
  .site-nav .sub-menu .menu-item > a{white-space:normal}
  .site-nav .menu-item-has-children:not(.is-open) > .sub-menu{display:none}
  .site-nav .menu{flex-direction:column;align-items:flex-start;gap:.1rem;width:100%}
  .site-nav .menu-item{width:100%}
  /* Parent items: let the submenu wrap onto its own full-width row so it drops
     DOWN beneath the label + caret instead of sitting to their right. */
  .site-nav .menu-item-has-children{flex-wrap:wrap}
  .site-nav .menu-item-has-children > .sub-menu{flex-basis:100%;width:100%}

  /* Hamburger drawer — only when JS is active (html loses .no-js).
     Right-side slide-in panel (not a full-screen overlay) with a tap-to-close
     backdrop over the rest of the page. */
  html:not(.no-js) .nav-toggle{display:inline-flex}
  html:not(.no-js) .nav-scrim{display:block}
  html:not(.no-js) .nav-scrim.is-open{opacity:1;visibility:visible}
  html:not(.no-js) .site-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;z-index:60;
    width:min(86vw,340px);
    background:var(--forest);
    box-shadow:-14px 0 40px rgba(0,0,0,.32);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:clamp(4.5rem,15vw,6rem) clamp(1.25rem,6vw,1.75rem) 2.5rem;
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;transform:translateX(100%);
    transition:transform .26s ease-out,visibility .26s;
  }
  html:not(.no-js) .site-nav.is-open{visibility:visible;transform:translateX(0)}
  html:not(.no-js) .nav-close{display:inline-flex}
  html:not(.no-js) .site-nav .menu{gap:.3rem}
  html:not(.no-js) .site-nav .menu-item > a,
  html:not(.no-js) .site-nav .submenu-toggle{font-size:1.1rem}
  html:not(.no-js) .site-nav .menu-cta{margin:.6rem 0 0}
  html:not(.no-js) .site-nav .menu-cta > a.btn{align-self:flex-start}
}

/* ===== Hero (front page) ===== */
.hero{padding-block:clamp(3.5rem,8vw,7rem) 0;position:relative;z-index:1}
.eyebrow{
  color:var(--leaf-pale);
  font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero h1{color:var(--canvas);max-width:21ch}
.hero h1 em{color:var(--leaf-pale);font-style:italic}
.hero .lede{color:var(--leaf-pale);font-size:1.1875rem;max-width:58ch;margin-top:1.25rem}
.tagline{color:var(--canvas);font-weight:700;font-size:1.0625rem;margin:1.5rem 0 2rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.lead-in{font-size:1.125rem;color:var(--ink-2);max-width:62ch}

/* ===== Compact interior page header ===== */
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem);position:relative;z-index:1}
.page-head .eyebrow{margin-bottom:1rem}
.page-head h1{color:var(--canvas);max-width:20ch}
.page-head .lede{color:var(--leaf-pale);font-size:1.1875rem;max-width:56ch;margin-top:1.1rem}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.9rem;color:var(--leaf-pale);margin-bottom:1.4rem;position:relative;z-index:1}
.breadcrumb a{color:var(--leaf-pale);text-decoration:none}
.breadcrumb a:hover{color:#fff;font-weight:600}
.breadcrumb span[aria-hidden]{opacity:.5}
.breadcrumb [aria-current="page"]{color:var(--canvas);font-weight:600}

/* ===== Verticals / card grids ===== */
.vert-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.25rem}
.vert-grid > div{
  position:relative;
  padding:1.25rem 1rem;margin-inline:-1rem;border-radius:var(--radius);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.vert-grid > div:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(30, 42, 35, 0.12)}
/* whole card clickable via stretched link */
.vert-grid h3 a{text-decoration:none}
.vert-grid h3 a:hover{text-decoration:none}
.vert-grid h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.vert-grid h3 a:focus-visible{outline:none}
.vert-grid h3 a:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.vert-note{color:var(--ink-2);font-size:.95rem;margin-top:1rem}

/* ===== Services ledger ===== */
.services-wrap{position:relative}
.services{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4.5rem);margin-top:1rem;position:relative;z-index:1}
.service{
  position:relative;
  display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:start;
  padding:1.35rem 1rem;margin-inline:-1rem;border-radius:var(--radius);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(30, 42, 35, 0.12)}
/* whole card clickable via stretched link */
.service h3 a{text-decoration:none}
.service h3 a:hover{text-decoration:none}
.service h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.service h3 a:focus-visible{outline:none}
.service h3 a:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.service svg{color:var(--leaf-deep);margin-top:.2rem}
.service h3{margin-bottom:.35rem}
.service p{margin:0;color:var(--ink-2);font-size:.97rem}
@media (max-width:760px){.services{grid-template-columns:1fr}}

/* ===== Engine band (forest, organic corners) ===== */
.engine{
  background:var(--forest);color:var(--leaf-pale);
  border-radius:32px;padding:clamp(2rem,5vw,3.5rem);
  position:relative;overflow:hidden;
}
.engine::before{
  content:"";position:absolute;right:-15%;top:-55%;width:70%;height:120%;
  background:var(--forest-2);border-radius:50%;
}
.engine > *{position:relative}
.engine h2{max-width:24ch;color:var(--canvas)}
.engine p{color:var(--leaf-pale)}

/* ===== Comparison table — elevated GroveDeck card ===== */
.table-hint{display:none;font-size:.9rem;color:var(--ink-2);margin:1.5rem 0 -1rem}
@media (max-width:700px){.table-hint{display:block}}
.lane-wrap{position:relative;margin-top:2rem}
.table-scroll{overflow-x:auto}
.table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius)}
.table-scroll table{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:.97rem;position:relative;z-index:1}
.table-scroll caption{text-align:left;padding:1rem}
.table-scroll thead th{font-family:"Fraunces",serif;font-weight:600;font-size:1.02rem;
  padding:1.05rem 1.4rem;text-align:left;vertical-align:middle;color:var(--ink-2)}
.table-scroll tbody th,.table-scroll tbody td{padding:1.15rem 1.4rem;text-align:left;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--hairline) 60%,transparent)}
.table-scroll tbody th{font-weight:600;color:var(--ink-2);font-size:.95rem}
.table-scroll tbody tr:last-child th,.table-scroll tbody tr:last-child td{border-bottom:none}
/* GroveDeck column = one elevated card. White fill + even shadow are drawn by
   .lane-card sitting behind the column (positioned by theme.js); the cells stay
   transparent so the card shows through, keeping their own row separators. */
.table-scroll tbody td.col-gd{font-weight:600;background:transparent;
  border-bottom-color:color-mix(in srgb,var(--hairline) 70%,transparent)}
.table-scroll thead th.col-gd{position:relative;z-index:2;
  background:var(--leaf-deep);color:#fff;border-radius:18px 18px 0 0}
.lane-card{position:absolute;z-index:0;background:#fff;border-radius:18px;
  box-shadow:0 0 38px -12px rgba(27,51,37,.5)}
/* graceful fallback before JS runs / if JS is disabled: tint the column */
.lane-card:not([style]){display:none}
.lane-wrap:not(:has(.lane-card[style])) tbody td.col-gd{background:color-mix(in srgb,var(--leaf-pale) 60%,#fff)}

/* ===== Objections ===== */
.objections{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:.5rem}
.objections h3{font-family:"Epilogue",sans-serif;font-size:1.05rem;font-weight:700}
.objections p{font-size:.97rem;color:var(--ink-2);margin:0}

/* ===== CTA band ===== */
.cta-shell{background:var(--forest);color:var(--canvas)}
.cta-shell h2{color:var(--canvas);max-width:24ch}
.cta-shell p{color:var(--leaf-pale)}
.trust-line{color:var(--leaf-pale);font-size:.95rem;margin-top:1.4rem}

/* ===== FAQ ===== */
.faq{margin-top:1.5rem;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;font-weight:600;font-size:1.05rem;
  padding:1.1rem .25rem;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;transition:color 0.15s ease-out;
}
.faq summary:hover{color:var(--leaf-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:"Fraunces",serif;font-size:1.4rem;color:var(--leaf-deep);
  flex:none;line-height:1;transition:transform .2s ease-out;
}
.faq summary:hover::after{transform:scale(1.15)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 .25rem 1.25rem;color:var(--ink-2);max-width:64ch;margin:0}

/* ===== Prose (page.php / single.php body) ===== */
.prose{color:var(--ink);font-size:1.0625rem}
.prose > *{max-width:var(--measure)}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:2rem;color:var(--ink)}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--leaf-deep)}
.prose a{font-weight:500}
.prose hr{border:none;border-top:1px solid var(--hairline);margin:2.6rem 0;max-width:var(--measure)}
.prose figure{margin:2.2rem 0;max-width:none}
.prose figure img,.prose .img-ph{display:block;width:100%;border-radius:var(--radius)}
.prose figcaption{font-size:.9rem;color:var(--ink-2);margin-top:.7rem}
.prose blockquote{
  margin:2.2rem 0;padding:.4rem 0 .4rem 1.6rem;
  border-left:3px solid var(--leaf-deep);
  font-family:"Fraunces",Georgia,serif;font-size:1.3rem;line-height:1.4;color:var(--ink);
  font-weight:500;max-width:60ch;
}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:.8rem;font-family:"Epilogue",sans-serif;font-size:.95rem;font-style:normal;color:var(--ink-2);font-weight:600}
.lead-para{font-size:1.25rem;line-height:1.55;color:var(--ink-2);font-weight:400}

/* Image placeholder (hi-fi stand-in for real media) */
.img-ph{
  position:relative;background:var(--band);border:1px solid var(--hairline);
  color:var(--leaf-deep);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  aspect-ratio:16/9;overflow:hidden;
}
.img-ph svg{width:34px;height:34px;opacity:.55}
.img-ph.ph-square{aspect-ratio:1/1}
.img-ph.ph-wide{aspect-ratio:21/9}

/* Article meta */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;font-size:.92rem;color:var(--leaf-pale);position:relative;z-index:1}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--forest-2);color:var(--leaf-pale);
  padding:.3rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
}
.meta-dot{opacity:.5}
.byline{display:flex;align-items:center;gap:.75rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--hairline)}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--band);border:1px solid var(--hairline);flex:none;display:flex;align-items:center;justify-content:center;color:var(--leaf-deep);font-weight:700;font-family:"Fraunces",serif}
.byline .who{font-weight:600}
.byline .role{font-size:.9rem;color:var(--ink-2)}

/* ===== Blog archive — stacked full-width rows ===== */
.post-list{display:flex;flex-direction:column;gap:0;margin-top:1rem;border-top:1px solid var(--hairline)}
.post-row{
  display:grid;grid-template-columns:1fr;gap:.6rem;
  padding:1.9rem 1rem;margin-inline:-1rem;border-bottom:1px solid var(--hairline);border-radius:var(--radius);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.post-row:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(30, 42, 35, 0.05)}
.post-row .post-cat{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--leaf-deep)}
.post-row h2,.post-row h3{color:var(--ink);font-size:clamp(1.4rem,2.4vw,1.85rem);margin:0}
.post-row h2 a,.post-row h3 a{color:inherit;text-decoration:none}
.post-row:hover h2 a,.post-row:hover h3 a{font-weight:600}
.post-row p{margin:.2rem 0 0;color:var(--ink-2);font-size:1rem;max-width:68ch}
.post-row .row-meta{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;font-size:.88rem;color:var(--ink-2);margin-top:.5rem}
.post-row.featured{
  grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:#fff;border:1px solid var(--hairline);margin-inline:0;padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:var(--radius);margin-bottom:2.2rem;box-shadow:0 6px 22px rgba(30, 42, 35, 0.04);
}
.post-row.featured .img-ph{aspect-ratio:4/3}
.post-row.featured h2,.post-row.featured h3{font-size:clamp(1.7rem,3vw,2.4rem)}
@media (max-width:720px){.post-row.featured{grid-template-columns:1fr}}

/* Category filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chip{
  display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;
  border-radius:999px;border:1px solid var(--hairline);background:#fff;
  color:var(--ink-2);text-decoration:none;font-size:.92rem;font-weight:600;
  transition:all .15s ease;
}
.chip:hover{border-color:var(--leaf-deep);color:var(--leaf-deep)}
.chip[aria-current="true"]{background:var(--leaf-deep);color:#fff;border-color:var(--leaf-deep)}

/* ===== Pagination ===== */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:3rem}
.pagination a,.pagination span{
  min-width:46px;min-height:46px;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--hairline);background:#fff;color:var(--ink-2);
  text-decoration:none;font-weight:600;transition:all .15s ease;
}
.pagination a:hover{border-color:var(--leaf-deep);color:var(--leaf-deep)}
.pagination [aria-current="page"]{background:var(--leaf-deep);color:#fff;border-color:var(--leaf-deep)}
.pagination .gap{border:none;background:none}
.pagination .prev,.pagination .next{padding:0 1.1rem;gap:.4rem}

/* ===== Search ===== */
.searchform{display:flex;gap:.6rem;margin-top:1.6rem;max-width:34rem;position:relative;z-index:1}
.searchform input[type=search]{
  flex:1;font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--hairline);border-radius:999px;padding:.7rem 1.2rem;min-height:50px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.searchform.on-dark input[type=search]{background:rgba(255,255,255,.96)}
.searchform input:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(27,95,176,.25)}
.search-summary{color:var(--ink-2);margin-top:.4rem}
.search-summary strong{color:var(--ink)}
.result{padding:1.6rem 1rem;margin-inline:-1rem;border-bottom:1px solid var(--hairline);border-radius:var(--radius);transition:background-color .2s ease}
.result:hover{background:#fff;box-shadow:0 8px 22px rgba(30,42,35,.04)}
.result .kicker{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--leaf-deep)}
.result h3{margin:.35rem 0 .4rem}
.result h3 a{text-decoration:none}
.result h3 a:hover{font-weight:600}
.result p{margin:0;color:var(--ink-2);font-size:.97rem}
.result mark{background:var(--band);color:var(--ink);padding:0 .15em;border-radius:3px}
.result .url{display:block;margin-top:.5rem;font-size:.85rem;color:var(--leaf-deep)}

/* ===== 404 ===== */
.notfound{text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.notfound .code{
  font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--leaf-pale);
  font-size:clamp(5rem,18vw,11rem);line-height:.9;letter-spacing:-.03em;margin:0 0 .4rem;
}
.notfound h1{color:var(--canvas);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 auto .9rem;max-width:18ch}
.notfound p{color:var(--leaf-pale);margin-inline:auto;max-width:48ch}
.notfound .hero-ctas{justify-content:center;margin-top:2rem}
.notfound .suggest{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}

/* ===== Contact form ===== */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr 1.2fr;margin-top:1rem;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:1.1rem}
.form-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:0 6px 22px rgba(30,42,35,.04)}
.field-row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
label{font-weight:600;font-size:.95rem;display:block;margin-bottom:.35rem}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);border-radius:10px;
  padding:.7rem .85rem;min-height:48px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea{min-height:7rem;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(27, 95, 176, 0.2);
}
.form-note{font-size:.92rem;color:var(--ink-2);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-aside{display:grid;gap:1.6rem}
.contact-aside .item{display:grid;gap:.2rem}
.contact-aside .item .k{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--leaf-deep)}
.contact-aside .item a{font-weight:500}

/* ===== Footer ===== */
.site-footer{background:var(--forest);color:var(--leaf-pale);padding-block:clamp(2.25rem,4.5vw,3.5rem) 2rem}
.site-footer .tagline-foot{
  font-family:"Fraunces",serif;font-size:1.35rem;color:var(--canvas);margin-bottom:2.5rem;max-width:24ch;
}
.foot-cols{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.foot-cols h3{font-family:"Epilogue",sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--leaf-pale)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:.15rem}
.foot-cols a{color:var(--leaf-pale);text-decoration:none;display:inline-flex;align-items:center;min-height:38px}
.foot-cols a:hover{color:#fff;font-weight:600}
.legal{border-top:1px solid var(--forest-2);margin-top:3rem;padding-top:1.5rem;font-size:.9rem;color:#B9CBBD}
.legal p{margin:0;max-width:none}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
/* No-JS fallback: never hide content if the reveal script doesn't run */
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

.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}

/* ============================================================
   INTERIOR-PAGE BRIDGE
   Interior pages were authored against the legacy "Skill Loop"
   design system (sl- classes) and ship as plain Gutenberg blocks.
   This maps both onto the GroveDeck look so page bodies carry the
   same styling as the homepage. Everything is scoped to .prose, so
   the front page (front-page.php) is never affected.
   ============================================================ */

/* --- Legacy sl- accents (recoloured for the LIGHT body) -------- */
/* .eyebrow / .trust-line / .lede tokens are leaf-pale, built for the
   dark hero. On the light canvas body they need dark ink instead. */
.prose .sl-eyebrow{
  color:var(--leaf-deep);
  font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:1rem;
}
.prose .sl-hero-tagline{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--ink);font-weight:600}
.prose .sl-vertical-note{color:var(--ink-2);font-size:.95rem;margin-top:1rem}
.prose > .sl-trust-line{color:var(--ink-2);font-size:.95rem;margin-top:1.4rem}

/* --- FAQ accordions: <details class="sl-faq"> mirrors .faq ----- */
.prose .sl-faq{border-bottom:1px solid var(--hairline)}
.prose .sl-faq:first-of-type{border-top:1px solid var(--hairline);margin-top:1.5rem}
.prose .sl-faq:last-of-type{border-bottom:0}
/* Drop the redundant separator block that sits right after a FAQ group. */
.prose .sl-faq + .wp-block-separator{display:none}
.prose .sl-faq summary{
  cursor:pointer;font-weight:600;font-size:1.05rem;color:var(--ink);
  padding:1.1rem .25rem;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;transition:color .15s ease-out;
}
.prose .sl-faq summary:hover{color:var(--leaf-deep)}
.prose .sl-faq summary::-webkit-details-marker{display:none}
.prose .sl-faq summary::after{
  content:"+";font-family:"Fraunces",serif;font-size:1.4rem;color:var(--leaf-deep);
  flex:none;line-height:1;transition:transform .2s ease-out;
}
.prose .sl-faq summary:hover::after{transform:scale(1.15)}
.prose .sl-faq[open] summary::after{transform:rotate(45deg)}
.prose .sl-faq p{padding:0 .25rem 1.25rem;color:var(--ink-2);max-width:64ch;margin:0}

/* --- Dark forest bands: sl-cta-band / sl-engine-band ----------- */
.prose .sl-cta-band,
.prose .sl-engine-band{
  background:var(--forest);color:var(--leaf-pale);
  border-radius:32px;padding:clamp(2rem,5vw,3.25rem);
  margin:2.5rem 0;max-width:none;
}
.prose .sl-cta-band :where(h2,h3),
.prose .sl-engine-band :where(h2,h3){color:var(--canvas);max-width:24ch}
.prose .sl-cta-band p,
.prose .sl-engine-band p{color:var(--leaf-pale);max-width:60ch}
.prose .sl-cta-band a:not(.wp-block-button__link),
.prose .sl-engine-band a:not(.wp-block-button__link){color:#fff}
.prose .sl-cta-band .sl-trust-line,
.prose .sl-engine-band .sl-trust-line{color:var(--leaf-pale);font-size:.95rem;margin-top:1.4rem}

/* --- Default Gutenberg blocks → GroveDeck look ----------------- */
/* Buttons mirror .btn / .btn-primary / .btn-outline */
.prose .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.6rem;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;
  border:1px solid transparent;background:var(--honey);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 5px 24px -9px rgba(6,14,10,.36);
  transition:all .2s ease-out;
}
.prose .wp-block-button__link:hover{background:var(--honey-dark);transform:translateY(-2px)}
.prose .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--leaf-deep);border-color:var(--leaf-deep);box-shadow:none;
}
.prose .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--band)}
.prose .sl-cta-band .wp-block-button__link,
.prose .sl-engine-band .wp-block-button__link{background:var(--honey);color:var(--ink)}

/* Tables (incl. legacy sl-compare) → table-scroll card treatment.
   Every interior table is a comparison with GroveDeck in column 2. */
.prose .wp-block-table,
.prose .sl-compare{max-width:none;margin:2.25rem 0;overflow-x:auto}
.prose .wp-block-table table{border-collapse:separate;border-spacing:0;width:100%;font-size:.97rem}
.prose .wp-block-table thead th{
  font-family:"Fraunces",serif;font-weight:600;font-size:1.02rem;
  padding:1.05rem 1.4rem;text-align:left;vertical-align:bottom;color:var(--ink-2);
}
.prose .wp-block-table tbody th,
.prose .wp-block-table tbody td{
  padding:1.05rem 1.4rem;text-align:left;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--hairline) 60%,transparent);
}
.prose .wp-block-table tbody tr:last-child th,
.prose .wp-block-table tbody tr:last-child td{border-bottom:none}
.prose .wp-block-table thead th:nth-child(2){
  background:var(--leaf-deep);color:#fff;border-radius:14px 14px 0 0;vertical-align:middle;
}
.prose .wp-block-table tbody td:nth-child(2){
  background:color-mix(in srgb,var(--leaf-pale) 60%,#fff);font-weight:600;color:var(--ink);
}

/* Column groups → soft cards, echoing the homepage vert/service grids */
.prose .wp-block-columns{margin:2.25rem 0;gap:2rem}
.prose .wp-block-column{
  padding:1.25rem;border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease;
}
.prose .wp-block-column:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(30,42,35,.10)}
.prose .wp-block-column > :first-child{margin-top:0}
.prose .wp-block-column :where(h3,h4){margin-bottom:.4rem;color:var(--ink)}
.prose .wp-block-column p{color:var(--ink-2);font-size:.97rem}

/* Separators */
.prose .wp-block-separator{
  border:none;border-top:1px solid var(--hairline);
  margin:2.6rem 0;max-width:var(--measure);opacity:1;
}


/* ============================================================
   INTERIOR-PAGE WIDTH + CARD GRIDS (v1.0.6)
   Page bodies ship wrapped in one constrained wp:group. `.prose > *`
   was capping that group at --measure, squeezing card grids, tables
   and bands into the reading column. Free structural blocks to the
   full container while keeping running text at a readable measure so
   interior pages use the page width like the homepage.
   ============================================================ */

/* Let the wrapping group(s) span the full content container */
.prose > .wp-block-group,
.prose > .wp-block-group > .wp-block-group{max-width:none}

/* Keep running text readable even when the group is full width */
.prose .wp-block-group > :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,.wp-block-heading,.wp-block-list){
  max-width:var(--measure);
}

/* Structural blocks fill the container (homepage-style grids/bands) */
.prose .wp-block-columns{max-width:none;margin-block:2.75rem;gap:1.5rem}
.prose .wp-block-group > .wp-block-table,
.prose .wp-block-group > .sl-cta-band,
.prose .wp-block-group > .sl-engine-band{max-width:none}

/* Column groups → real cards so a full-width grid reads as cards
   (echoes the homepage .vert-grid / .service surfaces) */
.prose .wp-block-column{
  background:color-mix(in srgb,var(--canvas-2) 55%,#fff);
  border:1px solid color-mix(in srgb,var(--hairline) 55%,transparent);
  border-radius:var(--radius);
  padding:1.4rem 1.45rem 1.55rem;
}
.prose .wp-block-column > :where(h2,h3,h4,p){max-width:none}
.prose .wp-block-column > :first-child{margin-top:0}

/* Linked column cards → whole card clickable, no title underline
   (echoes the homepage .vert-grid / .service stretched-link pattern, v1.1.37) */
.prose .wp-block-column:has(> :where(h2,h3) > a){
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.prose .wp-block-column:has(> :where(h2,h3) > a):hover{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(30, 42, 35, 0.12);
}
.prose .wp-block-column > :where(h2,h3) > a{text-decoration:none}
.prose .wp-block-column > :where(h2,h3) > a:hover{text-decoration:none}
.prose .wp-block-column > :where(h2,h3) > a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.prose .wp-block-column > :where(h2,h3) > a:focus-visible{outline:none}
.prose .wp-block-column > :where(h2,h3) > a:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}


/* ============================================================
   INTERIOR-PAGE SECTION SPACING (v1.0.9)
   Spacers were removed from page bodies; the theme's native ~2.4rem
   heading margin left sections too tight. Give each section heading
   more room above so sections breathe (homepage uses banded sections
   for this; interior bodies rely on heading rhythm).
   ============================================================ */
.prose h2{margin-top:4.5rem}
/* a touch more air around full-width card grids and tables */
.prose .wp-block-columns{margin-block:3rem}
.prose .wp-block-group > .wp-block-table{margin-block:3rem}
/* don't push the very first block down (hero already provides the gap) */
.prose > .wp-block-group > :first-child,
.prose > .wp-block-group > .wp-block-group__inner-container > :first-child,
.prose > :first-child{margin-top:0}


/* ============================================================
   HOW-WE-WORK STAGE GRID (v1.1.12)
   The five stage cards ship as one .wp-block-columns.stage-grid.
   Render as a uniform 3-up grid: identical width (repeat(3,1fr))
   and identical height across both rows (grid-auto-rows:1fr), so
   the 3+2 layout reads as five equal cards. Stacks on mobile.
   ============================================================ */
.prose .wp-block-columns.stage-grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;
  align-items:stretch;gap:1.5rem;max-width:none;
}
/* each card spans two of six tracks = one third wide; the last two are
   shifted in by one track so row two centers under row one (inverted pyramid) */
.prose .wp-block-columns.stage-grid > .wp-block-column{margin:0;flex-basis:auto;grid-column:span 2;}
.prose .wp-block-columns.stage-grid > .wp-block-column:nth-child(4){grid-column:2 / span 2;}
@media (max-width:781px){
  .prose .wp-block-columns.stage-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
  .prose .wp-block-columns.stage-grid > .wp-block-column,
  .prose .wp-block-columns.stage-grid > .wp-block-column:nth-child(4){grid-column:auto;}
}