/* ============================================================
   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-deeper:#234E3B; /* leaf hover (on white = 9.4:1) */
  --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}
/* homepage sections: ~15% tighter vertical rhythm (v1.1.51) */
.home section{padding-block:clamp(2.55rem,5.1vw,4.25rem)}
.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.
   ONE interaction model across every button surface (v1.1.61): hover and press
   shift TONE only. No transform, no shadow change — nothing moves or grows under
   the cursor. Matches the treatment .chip and .pagination a already used, and is
   the same for hand-coded .btn and Gutenberg .wp-block-button__link. */
.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;
  /* Explicit property list, not `all` — the shadow must never animate. */
  transition:background-color .18s ease-out,border-color .18s ease-out,
             color .18s ease-out,filter .18s ease-out;
  box-shadow:0 5px 24px -9px rgba(6,14,10,.36); /* static soft drop */
}
/* Press feedback for touch, where :hover never fires. */
.btn:active:not(:disabled){filter:brightness(.94)}
/* theme.js disables the contact submit during send; without this the dead
   button still answered :hover. */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.8;cursor:not-allowed}

.btn-primary{background:var(--honey);color:var(--ink)}                      /* 7.9:1 */
.btn-primary:hover:not(:disabled){background:var(--honey-dark)}             /* 6.7:1 */
/* Secondary CTA — solid leaf-green, pairs with the honey primary (See how we work). */
.btn-lead{background:var(--leaf-deep);color:#fff}                           /* 7.2:1 */
.btn-lead:hover:not(:disabled){background:var(--leaf-deeper);color:#fff}    /* 9.4:1 */
/* Ghost/outline buttons stay flat — 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:not(:disabled){background:var(--band)}                   /* 6.0:1 */
.on-dark .btn-outline{color:var(--leaf-pale);border-color:var(--leaf-pale)} /* 11.5:1 */
.on-dark .btn-outline:hover:not(:disabled){background:var(--forest-2)}      /* 9.0:1 */
.on-dark :focus-visible{outline-color:#9CC4F0}
/* Honey primary keeps its colour on dark too — the warm fill carries the emphasis. */

/* ===== 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;
}
/* Hover shifts colour + underline, never weight — a 500→600 swap reflows the
   label mid-hover and can rewrap it in a narrow column. */
.site-nav .sub-menu .menu-item > a:hover,
.site-nav .sub-menu .menu-item > a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* CTA item keeps the pill button look (honey primary).
   font-weight is restated because `.site-nav .menu-item > a` (0,2,1) outranks
   `.btn` (0,1,0) and would otherwise drop this CTA to 500 while every other
   primary button on the site sits at 600. */
.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);font-weight:600}
.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}
#verticals .vert-note{font-size:1.0625rem} /* homepage: match section body size; .95rem stays for single.php post meta */

/* ===== 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: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}}
/* lone last services card (odd card count only): one-column width, left-justified and
   flush with the column-1 cards (which bleed -1rem); v1.1.52 — was centered in v1.1.48.
   v1.1.55: scoped to :nth-child(odd) so an even grid (6 cards) renders 2×3 untouched */
.services>.service:nth-child(odd):last-child{grid-column:1 / -1}
@media (min-width:761px){
  .services>.service:nth-child(odd):last-child{justify-self:start;margin-inline:-1rem;width:calc((100% - clamp(2rem,5vw,4.5rem))/2 + 2rem)}
}

/* ===== 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}}
/* overflow-x:clip keeps .lane-card (absolute, outside .table-scroll) from
   escaping the wrap on narrow phones — below ~345px it used to push the whole
   document sideways. clip, not hidden, so vertical position:sticky still works. */
.lane-wrap{position:relative;margin-top:2rem;overflow-x:clip}
.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}
/* Native select chrome doesn't match the hairline + 10px-radius fields around it,
   so draw our own chevron. background-image, not a pseudo-element: select can't
   host one. */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231E2A23' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:14px 9px;
}
select::-ms-expand{display:none}
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:44px}
.foot-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.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}
/* Trademark line — smallest type on the site, so it stops at .8rem rather than
   the .72rem it carried as an inline style. #90A698 on forest = 5.2:1. */
.legal .tm{margin-top:.6rem;font-size:.8rem;line-height:1.55;color:#90A698;max-width:78ch}

/* ===== 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 — including the tonal-only
   interaction model (v1.1.61). These used to lift WITHOUT the shadow bloom that
   .btn:hover applied, so the same button behaved differently depending on whether
   a template or the block editor rendered it. */
.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:0 5px 24px -9px rgba(6,14,10,.36);
  transition:background-color .18s ease-out,border-color .18s ease-out,
             color .18s ease-out,filter .18s ease-out;
}
.prose .wp-block-button__link:hover{background:var(--honey-dark)}
.prose .wp-block-button__link:active{filter:brightness(.94)}
.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)}

/* The dark interior bands carry no .on-dark class, so anything focused inside
   them inherited --focus #1B5FB0 at 2.14:1 on forest — under the 3:1 non-text
   minimum (WCAG 1.4.11). Same override the header/footer already use. */
.prose .sl-cta-band :focus-visible,
.prose .sl-engine-band :focus-visible{outline-color:#9CC4F0}
.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 within each row (align-items:stretch). grid-auto-rows
   is auto, not 1fr — 1fr forced row two to match row one's height and left
   cards 4 and 5 carrying ~120px of dead space. Stacks on mobile.
   ============================================================ */
.prose .wp-block-columns.stage-grid{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;
  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;}
}


/* ============================================================
   HIRING-QUESTIONS READING MEASURE (v1.1.63)
   Page 452 (/cornerstone-admin-hiring-questions/) is long-form:
   its blocks sit directly in .prose with no wp:group wrapper and no
   full-width structural blocks (columns/tables/bands), so every
   element — paragraphs, the four long checklists, separators — sits
   in the same 70ch column and the page reads far narrower than
   sibling pages, whose card grids and (accidentally uncapped) lists
   fill the 72rem container. Measured: all running paragraphs
   site-wide are an identical 677px; only composition differs.
   Fix: bump the measure for this page only to the top of the
   documented 70–80ch range via the --measure token, so p/ul/hr widen
   together (677px → ~774px) and stay in proportion. Global .prose
   untouched.
   ============================================================ */
body.page-id-452 .prose{--measure:80ch}

/* ============================================================
   Static-site additions (not in the WP theme.css)
   1. Inline overrides ported from functions.php wp_add_inline_style()
   2. Consent banner (in-house consent, replaces the old WP plugin)
   ============================================================ */

/* --- 1. Ported WP inline overrides --- */
/* Inner-page FAQ groups close with a bottom border so the last question
   matches the homepage FAQ (theme.css drops it via :last-of-type). */
.prose .sl-faq:last-of-type{border-bottom:1px solid var(--hairline)}
/* Optical vertical centering for framed nav labels (selected-page pills + CTA). */
.site-nav .menu-cta>a.btn{padding-top:calc(.7rem + 1.5px);padding-bottom:calc(.7rem - 1.5px)}
.site-nav>.menu>.menu-item:not(.menu-item-has-children).current-menu-item>a:not(.btn),
.site-nav>.menu>.menu-item-has-children.current-menu-ancestor>a,
.site-nav>.menu>.menu-item-has-children.current-menu-item>a
{padding-top:calc(.5rem + 1.5px);padding-bottom:calc(.5rem - 1.5px)}
.site-nav .sub-menu .current-menu-item>a{padding-top:calc(.62rem + 1.5px);padding-bottom:calc(.62rem - 1.5px)}
/* Emphasized words in H1 headings render upright (no italic). */
h1 em{font-style:normal}

/* --- 2. Consent banner --- */
.gd-consent{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:200;
  max-width:34rem;margin-inline:auto;
  background:var(--canvas);color:var(--ink);
  border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:0 14px 44px -14px rgba(6,14,10,.4);
  padding:1.15rem 1.35rem;
}
.gd-consent[hidden]{display:none}
.gd-consent p{margin:0 0 .9rem;font-size:.95rem;line-height:1.55;max-width:none}
.gd-consent a{color:var(--leaf-deep)}
.gd-consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.gd-consent .btn{min-height:44px;padding:.55rem 1.35rem;font-size:.95rem;box-shadow:none}
@media (max-width:480px){
  .gd-consent{left:.6rem;right:.6rem;bottom:.6rem;padding:1rem 1.1rem}
  .gd-consent .btn{flex:1}
}

/* ---- 404 full-height shell (static port) -----------------------------------
   WP's header.php printed these as inline styles when is_404(); the static
   build keys them off the error404 body class instead. */
body.error404 .hero-shell{min-height:100vh;display:flex;flex-direction:column}
body.error404 .hero-shell>.wrap{flex:1;display:flex;flex-direction:column}
