:root {
  --walnof-treasury: #0a1f1a;
  --walnof-forest: #113919;
  --walnof-signal: #32a548;
  --walnof-sage: #8ed6b6;
  --walnof-mint: #cfede1;
  --walnof-bg: #f3faf6;
  --walnof-ease: cubic-bezier(.16,1,.3,1);
}

/* DIVI5-GOTCHAS.md #3 — Divi 5 dropped row centering */
.et_pb_row { width: 80%; margin: auto; }

/* ==========================================================================
   dp-shell / dp-flat infrastructure (DIVI5-GOTCHAS.md #13h) — ported from
   the deeds-pine-child/style.css reference implementation, verified there
   via Chrome DevTools CSS.getMatchedStylesForNode (not guessed). Divi 5's
   own dynamic CSS emits `.et_pb_section{padding:54px 0}` /
   `.et_block_row{padding:27px 0}` / a combined `.et_flex_row,.et_flex_
   column,.et_flex_module,.et_flex_section{display:flex}` selector — all at
   equal-or-higher specificity than a plain custom rule AND generated/loaded
   after this stylesheet, so a plain (non-!important) override silently
   loses the cascade tie every time. `!important` is required throughout
   this block for that reason, not as a specificity shortcut.
   ========================================================================== */
.et_pb_section { padding: 0 !important; }
.et_block_row { padding: 0 !important; }
.et_pb_row.dp-shell { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.et_pb_row.dp-full { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.et_pb_column.dp-shell { padding: 0; }
.dp-shell,
.dp-shell > .et_pb_column_inner { display: contents !important; }
.dp-flat,
.dp-flat > .et_pb_text_inner,
.dp-flat > .et_pb_image_wrap,
.dp-flat > .et_pb_button_wrapper_wrapper,
.dp-flat > .et_pb_button_wrapper,
.dp-flat > .et_pb_code_inner { display: contents !important; }

/*
 * DIVI5-GOTCHAS.md #13 — full-bleed grid heroes/sections lost their layout
 * entirely. Our source CSS's `.home-hero`/`.page-hero`/`.decision-section`/
 * `.insights-hero`/`.contact-capture-page`/`.service-detail` are all
 * `display:grid` containers meant to directly parent two flat content divs
 * edge-to-edge. Divi's own row is `width:80%;margin:auto` (Gotcha #3, above)
 * with columns floated at a fixed `%` width + `margin-right` gap — applying
 * our class to the row (so its real column children become the grid items)
 * is correct, but Divi's own row/column sizing otherwise still fights it:
 * the row sits at 80% width instead of full-bleed, and each column's own
 * `width:48.5%`-style rule still applies *within* its grid cell, leaving a
 * visible gap instead of filling it. Confirmed on Walnof (2026-10-06) —
 * before this fix every hero rendered at roughly half-height, squeezed to
 * 80% of the viewport width, with no background bleed or overlay effects.
 * Scoped to only these semantic classes, not a blanket `.et_pb_row` rule,
 * so unrelated Divi rows elsewhere on the site are untouched. Divi also
 * gives every row its own default responsive top/bottom padding (~29px
 * each side at 1440px) even with no `custom_padding` attribute set — our
 * own CSS already defines exact padding on the content *inside* these
 * rows (`.home-hero-copy`, `.service-detail-lead`, etc.), so the row
 * itself should contribute none, hence `padding:0` below.
 */
.et_pb_row.home-hero, .et_pb_row.page-hero, .et_pb_row.decision-section,
.et_pb_row.insights-hero, .et_pb_row.contact-capture-page, .et_pb_row.service-detail {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_row.home-hero > .et_pb_column,
.et_pb_row.page-hero > .et_pb_column,
.et_pb_row.decision-section > .et_pb_column,
.et_pb_row.insights-hero > .et_pb_column,
.et_pb_row.contact-capture-page > .et_pb_column,
.et_pb_row.service-detail > .et_pb_column {
  float: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { background: var(--walnof-bg); color: var(--walnof-treasury) !important; font-family: "Poppins", Arial, sans-serif; font-size: 17px; margin: 0; overflow-x: hidden; }

/*
 * Divi's own parent-theme critical CSS (divi-style-parent-inline-inline-css) sets
 * `body{font-family:Open Sans...}` and `h1,h2,h3,h4,h5,h6{color:#333}`. Both are
 * plain low-specificity selectors, but our headings never set their own explicit
 * color/font-family (they were meant to inherit it from their section's
 * `color`/`font-family`) — and an explicit rule always beats an inherited value
 * regardless of specificity. Divi's rule wins, so headings render Open Sans in
 * near-black #333 even inside our dark-background sections. Same category as the
 * documented Gotcha #4/#5 dark-section-text pattern. Fix: force real inheritance
 * back with !important, scoped to our own custom content (`.et_pb_code_inner`,
 * every full-bleed section's wrapper) so Divi's native-module areas are untouched.
 * `.et_pb_text_inner` gets the same treatment now that the site's et_pb_code
 * blocks are being replaced with real et_pb_text/et_pb_blurb modules — same
 * bug, same fix, different wrapper class (2026-09-28).
 */
body { font-family: "Poppins", Arial, sans-serif !important; }
.et_pb_code_inner h1, .et_pb_code_inner h2, .et_pb_code_inner h3,
.et_pb_code_inner h4, .et_pb_code_inner h5, .et_pb_code_inner h6,
.et_pb_code_inner p, .et_pb_code_inner blockquote,
.et_pb_text_inner h1, .et_pb_text_inner h2, .et_pb_text_inner h3,
.et_pb_text_inner h4, .et_pb_text_inner h5, .et_pb_text_inner h6,
.et_pb_blurb_content h1, .et_pb_blurb_content h2, .et_pb_blurb_content h3,
.et_pb_blurb_content h4, .et_pb_blurb_content h5, .et_pb_blurb_content h6 {
  color: inherit !important;
  font-family: inherit !important;
}
body a { color: inherit; text-decoration: none; }
button, a { font: inherit; cursor: pointer; }
button { border: 0; background: transparent; }
::selection { background: var(--walnof-signal); color: #fff; }
/* Name collision: Divi's own legacy grid system defines a bare `.container`
   class too (`width:80%;max-width:1080px`, force-loaded late via
   style-static.min.css per Gotcha #2) — same 0,1,0 specificity, later in
   the cascade, silently wins over this rule site-wide without !important.
   Confirmed via getMatchedCSSRules on the live header: three `.container`
   rules matched (an inline critical-CSS copy, ours, and Divi's), Divi's
   load-order-last one won, shrinking every `.container` element from the
   intended 1440px down to 1080px — see DIVI5-GOTCHAS.md #13j.

   No max-width at all (2026-10-07, user: "fit to the entire site, I don't
   want negative spaces on the side"): a fixed cap — 1440px, 1280px, any
   single number — always reintroduces dead gutters on any screen wider
   than that number, and most real monitors are 1920px+. `.container` is
   now pure fluid width, edge-to-edge, with `padding-inline` alone (already
   a responsive `clamp()`, capped at 4rem/64px) providing breathing room
   at any viewport. Confirmed no readability concern at realistic desktop
   widths (checked to 1920px) — revisit only if someone reports unreadably
   long lines on an ultrawide monitor. */
.container { margin-inline: auto !important; max-width: none !important; padding-inline: clamp(1.2rem, 4vw, 4rem) !important; width: 100% !important; }

.eyebrow { align-items: center; display: inline-flex; font-size: .65rem; font-weight: 800; gap: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { background: var(--walnof-signal); content: ""; height: .46rem; width: .46rem; }
.eyebrow-light { color: var(--walnof-mint); }
.section-pad { padding: clamp(4.5rem, 8vw, 8rem) 0 !important; }
.section-heading { margin-bottom: clamp(2rem, 4vw, 4rem); }
.section-heading h2, .split-heading h2 { font-size: clamp(2.35rem, 4.8vw, 5.6rem); font-weight: 800; letter-spacing: -.075em; line-height: .96; margin: .8rem 0 0; max-width: 58rem; }
.section-heading h2 em, .split-heading h2 em { color: var(--walnof-signal); font-family: "DM Serif Display", serif; font-weight: 400; }
.split-heading { align-items: end; display: grid; gap: 2rem; grid-template-columns: 1.3fr .7fr; }
.split-heading p, .section-heading p { color: #496f5f; font-size: .92rem; line-height: 1.75; margin: 0; max-width: 31rem; }

.walnof-btn-primary, .walnof-btn-outline, .walnof-btn-dark, .header-action, .mobile-cta { align-items: center; display: inline-flex; font-size: .66rem; font-weight: 800; gap: .65rem; justify-content: center; letter-spacing: .08em; min-height: 3.25rem; padding: 0 1.2rem; text-transform: uppercase; transition: transform .16s var(--walnof-ease), background-color .2s var(--walnof-ease), color .2s var(--walnof-ease), border-color .2s var(--walnof-ease); }
.walnof-btn-primary, .header-action, .mobile-cta { background: var(--walnof-signal); color: #fff; }
.walnof-btn-primary:hover, .header-action:hover { background: #268d3b; transform: translateY(-2px); }
.walnof-btn-outline { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.walnof-btn-outline:hover { background: #fff; color: var(--walnof-treasury); transform: translateY(-2px); }
.walnof-btn-dark { background: var(--walnof-treasury) !important; color: #fff !important; margin-top: 1.5rem; }
.walnof-btn-dark:hover { background: var(--walnof-signal); transform: translateY(-2px); }
.text-link-light { align-items: center; border-bottom: 1px solid currentColor; color: #fff; display: inline-flex; font-size: .68rem; font-weight: 800; gap: .55rem; letter-spacing: .08em; padding-bottom: .28rem; text-transform: uppercase; }

.site-header { background: #fff; box-shadow: 0 1px 0 rgba(10,31,26,.14); position: fixed; inset: 0 0 auto; z-index: 60; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(10,31,26,.1); }
.header-row { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; height: 5.8rem; gap: 1.4rem; }
.brand-link { align-items: center; display: flex; flex-shrink: 0; height: 4.8rem; justify-self: start; width: 13.5rem; }
/* New logo swapped in 2026-10-07 (user-supplied file) — tightly cropped to
   its own content bounding box already (no internal letterboxing to
   compensate for), and a different aspect ratio (~1.27:1, taller/squarer)
   than the old logo's ~1.5:1 landscape file the source's `scale(1.32)` was
   tuned for. Dropped the scale hack (it was over-enlarging an
   already-correctly-sized crop) and raised max-height to use more of the
   header's own height now that the mark doesn't need to fight a wide,
   mostly-empty bounding box. */
.brand-link img { display: block; height: auto; max-height: 5.4rem; object-fit: contain; object-position: left center; width: 100%; }
.desktop-nav { align-items: center; display: flex; gap: clamp(1rem, 2vw, 2rem); justify-self: center; }
.desktop-nav a { font-size: .66rem; font-weight: 800; letter-spacing: .06em; padding: .7rem 0; position: relative; text-transform: uppercase; }
.desktop-nav a::after { background: var(--walnof-signal); bottom: 0; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s var(--walnof-ease); width: 100%; }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); }
.header-action { justify-self: end; margin-left: .6rem; }
.menu-button { background: transparent; color: var(--walnof-treasury); display: none; grid-column: 3; justify-self: end; padding: .5rem; }
.mobile-panel { background: var(--walnof-treasury); color: #fff; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .28s var(--walnof-ease); }
.mobile-panel.is-open { grid-template-rows: 1fr; }
.mobile-panel nav { display: grid; min-height: 0; overflow: hidden; }
.mobile-panel a { align-items: center; border-top: 1px solid rgba(255,255,255,.14); display: flex; font-size: 1rem; font-weight: 700; justify-content: space-between; padding: 1rem 0; }
.mobile-panel .mobile-cta { border: 0; margin: 1rem 0 1.4rem; }

.home-hero { background: var(--walnof-treasury) !important; color: #fff; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); grid-template-rows: 1fr auto; min-height: 100svh; padding-top: 5.8rem !important; }
.home-hero-copy { align-self: center; padding: clamp(3rem,7vw,7.5rem) clamp(1.2rem,5vw,6rem); padding-right: clamp(2rem,5vw,5rem); }
.home-hero h1 { font-size: clamp(3.3rem,6.2vw,7.4rem); font-weight: 800; letter-spacing: -.085em; line-height: .9; margin: 1.1rem 0 1.5rem; max-width: 55rem; }
.home-hero h1 em { color: var(--walnof-sage); font-family: "DM Serif Display", serif; font-weight: 400; }
.home-hero-copy p { color: #cce8d9; font-size: clamp(.9rem,1.15vw,1.08rem); line-height: 1.75; max-width: 39rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.executive-audience { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.7rem; }
.executive-audience span { border: 1px solid rgba(207,237,225,.25); color: var(--walnof-mint); font-size: .57rem; font-weight: 700; letter-spacing: .05em; padding: .48rem .6rem; text-transform: uppercase; }
.home-hero-visual { min-height: 42rem; overflow: hidden; position: relative; }
.home-hero-visual::after { background: linear-gradient(90deg, rgba(10,31,26,.55), rgba(10,31,26,.04) 55%), linear-gradient(0deg, rgba(10,31,26,.65), transparent 45%); content: ""; inset: 0; position: absolute; }
.home-hero-visual img { animation: walnofDrift 18s ease-in-out infinite alternate; height: 100%; object-fit: cover; width: 100%; }
.visual-statement { bottom: 2.2rem; left: 2.2rem; max-width: 18rem; position: absolute; z-index: 2; }
.visual-statement strong, .home-hero-statement-mobile strong { display: block; font-size: .62rem; letter-spacing: .12em; margin-bottom: .5rem; text-transform: uppercase; }
.visual-statement span, .home-hero-statement-mobile span { font-family: "DM Serif Display", serif; font-size: 1.7rem; line-height: 1; }
/* Mobile-only standalone version of .visual-statement — see the comment in
   home.php next to $hero_statement_mobile for why this is a separate block
   rather than a responsive repositioning of the original. */
.home-hero-statement-mobile { display: none; }
.hero-service-index { background: var(--walnof-forest); display: grid; grid-column: 1/-1; grid-template-columns: repeat(5,1fr); }
.hero-service-index a { border-right: 1px solid rgba(207,237,225,.18); color: #fff; display: block; min-height: 8.2rem; padding: 1.2rem; position: relative; transition: background-color .2s var(--walnof-ease), transform .2s var(--walnof-ease); }
.hero-service-index a:hover { background: var(--walnof-signal); transform: translateY(-5px); }
.hero-service-index a > span { color: var(--walnof-sage); display: block; font-size: .52rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .55rem; text-transform: uppercase; }
.hero-service-index a:hover > span { color: #fff; }
.hero-service-index strong { display: block; font-size: .82rem; line-height: 1.35; max-width: 12rem; }
/* Home's service-index band is now 5 native Divi columns (one item per column)
   instead of one grid parent with 5 flat <a> children — same visual result,
   rules adapted to the new per-item wrapper. */
.hero-service-index-item a { border-right: 1px solid rgba(207,237,225,.18); color: #fff !important; display: block; min-height: 8.2rem; padding: 1.2rem; position: relative; transition: background-color .2s var(--walnof-ease), transform .2s var(--walnof-ease); }
.hero-service-index-item a:hover { background: var(--walnof-signal); transform: translateY(-5px); }
.hero-service-index-item a > span { color: var(--walnof-sage); display: block; font-size: .52rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .55rem; text-transform: uppercase; }
.hero-service-index-item a:hover > span { color: #fff; }
.hero-service-index-item strong { display: block; font-size: .82rem; line-height: 1.35; max-width: 12rem; }
.capability-band { background: var(--walnof-signal) !important; color: #fff; overflow: hidden; padding: .8rem 0 !important; }
.capability-marquee { animation: walnofMarquee 24s linear infinite; display: flex; gap: 3rem; min-width: max-content; padding-left: 100%; }
.capability-band span { font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.home-services { background: var(--walnof-bg) !important; }
.service-mosaic { display: grid !important; gap: 1rem; grid-template-columns: repeat(12,1fr); }
.service-card { background: #fff; display: flex; flex-direction: column; height: 100%; min-height: 20rem; padding: clamp(1.35rem,3vw,2.5rem); transition: background-color .25s var(--walnof-ease), color .25s var(--walnof-ease), transform .25s var(--walnof-ease); }
.service-card:hover { background: var(--walnof-forest); color: #fff; transform: translateY(-7px); }
/* .walnof-reveal.is-visible's resting `transform:none` ties on specificity
   with the rule above and wins on source order, silently cancelling the
   hover lift once the card has revealed. Re-assert with higher specificity. */
.service-card.walnof-reveal:hover { transform: translateY(-7px); }
.service-card span { color: var(--walnof-signal); font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.service-card h3 { font-size: clamp(1.45rem,2.2vw,2.5rem); letter-spacing: -.05em; line-height: 1.04; margin: 1rem 0 .8rem; }
.service-card p { color: #4b725f; font-size: .82rem; line-height: 1.65; margin: 0; max-width: 23rem; transition: color .2s var(--walnof-ease); }
.service-card:hover p { color: #cbe7d8; }
.service-card > div { align-items: center; display: flex; font-size: .62rem; font-weight: 800; gap: .5rem; margin-top: auto; padding-top: 2rem; text-transform: uppercase; }
.service-card-1 { grid-column: span 7; } .service-card-2 { grid-column: span 5; } .service-card-3, .service-card-4, .service-card-5 { grid-column: span 4; }
.decision-section { background: var(--walnof-treasury) !important; color: #fff; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr auto; min-height: 80svh; }
.decision-image { grid-row: 1/3; min-height: 40rem; overflow: hidden; }
.decision-image img { height: 100%; object-fit: cover; transition: transform .8s var(--walnof-ease); width: 100%; }
.decision-image:hover img { transform: scale(1.04); }
.decision-copy { align-self: center; padding: clamp(3rem,7vw,7rem); }
.decision-copy h2 { font-size: clamp(2.4rem,4.5vw,5.4rem); letter-spacing: -.075em; line-height: .95; margin: 1rem 0; }
.decision-copy p { color: #cbe7d8; line-height: 1.75; max-width: 32rem; }
.decision-metrics { background: var(--walnof-forest); display: grid; grid-template-columns: repeat(3,1fr); }
.decision-metrics div { border-left: 1px solid rgba(207,237,225,.18); min-height: 9rem; padding: 1.25rem; }
.decision-metrics strong { display: block; font-size: .78rem; margin-bottom: .5rem; text-transform: uppercase; }
.decision-metrics span { color: #b8dac9; font-size: .7rem; line-height: 1.55; }
.industry-preview { background: var(--walnof-mint) !important; }
.industry-row { display: grid !important; grid-template-columns: repeat(5,1fr); }
.industry-row > a, .industry-row a { border-left: 1px solid rgba(10,31,26,.18); display: flex; flex-direction: column; height: 100%; min-height: 18rem; padding: 1.3rem; transition: background-color .2s var(--walnof-ease), transform .2s var(--walnof-ease); }
.industry-row > a:hover, .industry-row a:hover { background: #fff; transform: translateY(-6px); }
/* .walnof-reveal's own transition loses to the rule above on specificity,
   which would silently drop the opacity fade (items would snap in instead
   of fading). Re-assert it here with higher specificity so scroll-reveal
   fades smoothly while hover's lift stays snappy. */
.industry-row > a.walnof-reveal { transition: opacity .6s var(--walnof-ease), transform .2s var(--walnof-ease), background-color .2s var(--walnof-ease); }
.industry-row h3 { font-size: 1.2rem; letter-spacing: -.045em; line-height: 1.06; }
.industry-row p { color: #476c5b; font-size: .72rem; line-height: 1.6; margin-top: auto; margin-bottom: auto; }
.industry-row span { align-items: center; display: flex; font-size: .6rem; font-weight: 800; gap: .45rem; margin-top: 1rem; text-transform: uppercase; }
/* Home's industry preview is now 5 native Divi columns instead of one grid
   parent — same adaptation as .hero-service-index-item above. */
.industry-row-item a { border-left: 1px solid rgba(10,31,26,.18); display: block; min-height: 18rem; padding: 1.3rem; transition: background-color .2s var(--walnof-ease), transform .2s var(--walnof-ease); }
.industry-row-item a:hover { background: #fff; transform: translateY(-6px); }
.industry-row-item h3 { font-size: 1.2rem; letter-spacing: -.045em; line-height: 1.06; }
.industry-row-item p { color: #476c5b; font-size: .72rem; line-height: 1.6; }
.industry-row-item span { align-items: center; display: flex; font-size: .6rem; font-weight: 800; gap: .45rem; margin-top: 2rem; text-transform: uppercase; }
.testimonials-section { background: #fff !important; }
.testimonial-frame { display: block !important; overflow: hidden; container-type: inline-size; -webkit-mask-image: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
/* Continuous marquee, not a discrete scroll-snap carousel: the card set is
   rendered twice in the markup (second copy aria-hidden) and this track
   drifts left at a constant rate forever. At translateX(-50%) the hidden
   second set sits exactly where the first set started, so the keyframe
   looping back to 0% is an invisible seam — no pause, no pointer controls,
   no pixel-visible "reset to card one" moment, matches once per page
   session on page-load so there's no felt delay when scrolling to it. */
.testimonial-track { display: flex; width: max-content; gap: 1.3rem; padding: .3rem .2rem 1rem; animation: walnofTestimonialScroll 54s linear infinite; }
.testimonial-frame:hover .testimonial-track, .testimonial-frame:focus-within .testimonial-track { animation-play-state: paused; }
@keyframes walnofTestimonialScroll { to { transform: translateX(-50%); } }
.testimonial-card { flex: 0 0 auto; width: calc((100cqi - 2.6rem) / 3); display: flex; flex-direction: column; gap: 1.1rem; min-height: 19rem; padding: 1.6rem 1.5rem; background: var(--walnof-forest); border: 1px solid rgba(255,255,255,.1); transition: transform .3s var(--walnof-ease), box-shadow .3s var(--walnof-ease), border-color .3s var(--walnof-ease); }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -20px rgba(10,31,26,.5); border-color: rgba(255,255,255,.22); }
.testimonial-stars { display: flex; gap: .2rem; color: var(--walnof-signal); }
.testimonial-stars svg:nth-child(n) { color: inherit; }
/* Empty-star outlines use stroke="currentColor" (same green as filled
   stars) — on the old white card that read as a muted outline, but on this
   dark card it's invisible. Override just the empty ones to a faint white. */
.testimonial-stars svg path[fill="none"] { stroke: rgba(255,255,255,.35); }
.testimonial-card blockquote { position: relative; color: #fff; font-size: .92rem; line-height: 1.6; padding-left: 1.9rem; margin: 0; }
.testimonial-qm { position: absolute; left: 0; top: -.1rem; color: var(--walnof-signal); opacity: .8; }
.testimonial-who { display: flex; align-items: center; gap: .75rem; margin-top: auto; font-size: .76rem; color: var(--walnof-mint); }
.testimonial-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--walnof-signal); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.executive-cta { background: var(--walnof-forest) !important; color: #fff; padding: clamp(3.5rem,6vw,6rem) 0 !important; }
.executive-cta .container { align-items: center; display: flex; gap: 2rem; justify-content: center; }
.executive-cta h2 { font-size: clamp(2rem,4vw,4.6rem); letter-spacing: -.07em; line-height: .96; margin: .8rem 0 0; max-width: 55rem; }

.page-hero { background: var(--walnof-treasury) !important; color: #fff; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 80svh; padding-top: 5.8rem !important; }
.page-hero-copy { align-self: center; padding: clamp(3rem,7vw,7rem); }
.page-hero-copy h1 { font-size: clamp(3rem,5.7vw,6.8rem); font-weight: 800; letter-spacing: -.082em; line-height: .91; margin: 1rem 0 1.4rem; }
.page-hero-copy h1 em { color: var(--walnof-sage); font-family: "DM Serif Display", serif; font-weight: 400; }
.page-hero-copy p { color: #cce8d9; font-size: .95rem; line-height: 1.75; max-width: 37rem; }
.page-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-meta span { border: 1px solid rgba(207,237,225,.25); color: var(--walnof-mint); font-size: .54rem; font-weight: 700; padding: .45rem .55rem; text-transform: uppercase; }
.page-hero-image { overflow: hidden; position: relative; }
.page-hero-image::after { background: linear-gradient(90deg, rgba(10,31,26,.55), transparent 50%); content: ""; inset: 0; position: absolute; }
.page-hero-image img { animation: walnofDrift 18s ease-in-out infinite alternate; height: 100%; object-fit: cover; width: 100%; }

.legal-page-section { padding: 9.5rem 0 5rem !important; }
.walnof-legal-text { margin-inline: auto; max-width: 54rem; padding-inline: clamp(1.2rem, 4vw, 4rem); }
.walnof-legal-text h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 1.5rem; }
.walnof-legal-text h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; }
.walnof-legal-text p { color: var(--walnof-treasury); line-height: 1.75; margin: 0 0 1rem; opacity: .82; }

.service-jump { background: var(--walnof-signal) !important; color: #fff; }
.service-jump .container { display: grid; grid-template-columns: repeat(5,1fr); padding-inline: 0; }
.service-jump a { align-items: center; border-right: 1px solid rgba(255,255,255,.25); display: flex; font-size: .63rem; font-weight: 800; justify-content: space-between; min-height: 5.6rem; padding: 1rem; text-transform: uppercase; }
.service-jump a:hover { background: #268d3b; }
.service-details { background: var(--walnof-bg) !important; }
.service-detail { align-items: stretch; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 56svh; }
.service-detail.is-reverse { grid-template-columns: .95fr 1.05fr; }
.service-detail.is-reverse .service-detail-lead { grid-column: 2; grid-row: 1; }
.service-detail.is-reverse .service-capability-panel { grid-column: 1; grid-row: 1; }
.service-detail-lead { align-self: center; padding: clamp(2.5rem,5vw,5rem); }
/* Divi gives every module a default bottom margin for inter-module spacing
   (~44px here) — harmless where our own CSS already owns the gap via
   padding/margin on a wrapper, but it stacks unwanted extra height wherever
   we split one source element (text + its CTA) into two sibling Divi
   modules in the same column. See DIVI5-GOTCHAS.md #13. */
.service-detail-lead.et_pb_text { margin-bottom: 0 !important; }
.service-detail-lead h2 { font-size: clamp(2.5rem,4.6vw,5.3rem); letter-spacing: -.075em; line-height: .96; margin: 1rem 0; }
.service-detail-lead p:not(.service-outcome) { color: #476c5b; line-height: 1.75; max-width: 40rem; }
.service-outcome { color: var(--walnof-treasury) !important; font-family: "Poppins", sans-serif; font-size: clamp(1.25rem,1.8vw,1.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.2 !important; }
.service-capability-panel { align-content: center; background: var(--walnof-mint); display: grid; padding: clamp(2.2rem,4vw,4rem); }
.service-capability-panel > span, .service-capability-panel span { font-size: .66rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 1rem; text-transform: uppercase; }
.service-capability-panel > div, .capability-item { align-items: center; border-top: 1px solid rgba(10,31,26,.2); display: grid; gap: .8rem; grid-template-columns: auto 1fr; padding: .82rem 0; }
.service-capability-panel p { font-size: .82rem; font-weight: 600; margin: 0; }
.service-detail.is-reverse .service-detail-lead { background: var(--walnof-treasury); color: #fff; }
.service-detail.is-reverse .service-detail-lead p:not(.service-outcome) { color: #c8e4d5; }
.service-detail.is-reverse .service-outcome { color: var(--walnof-sage) !important; }
.service-detail.is-reverse .walnof-btn-dark { background: var(--walnof-signal); }
.service-detail.is-reverse .service-capability-panel { background: #fff; }
.control-principle { background: var(--walnof-treasury) !important; color: #fff; padding: clamp(4rem,8vw,8rem) 0 !important; }
.control-principle blockquote { font-family: "DM Serif Display", serif; font-size: clamp(2rem,4.6vw,5.2rem); line-height: .98; margin: 1.3rem 0 2rem; max-width: 68rem; }

.industry-visual-section { background: var(--walnof-bg) !important; }
.industry-icon-grid { display: grid !important; gap: 1rem; grid-template-columns: repeat(12,1fr); }
.industry-icon-card { grid-column: span 4; }
.industry-icon-card.is-wide { grid-column: span 6; }
.industry-icon-card article { background: #fff; display: flex; flex-direction: column; height: 100%; min-height: 25rem; padding: clamp(1.5rem,3vw,2.7rem); transition: background-color .24s var(--walnof-ease), color .24s var(--walnof-ease), transform .24s var(--walnof-ease); }
.industry-icon-card article:hover { background: var(--walnof-forest); color: #fff; transform: translateY(-7px); }
.icon-tile { align-items: center; background: var(--walnof-mint); color: var(--walnof-treasury); display: flex; height: 4rem; justify-content: center; margin-bottom: 1.4rem; width: 4rem; }
.industry-icon-card h2 { font-size: clamp(1.7rem,2.7vw,3rem); letter-spacing: -.06em; line-height: 1; margin: 0 0 1rem; }
.compact-brief { border-top: 1px solid rgba(10,31,26,.14); padding: .85rem 0; }
.compact-brief strong { color: var(--walnof-signal); display: block; margin-bottom: .35rem; }
.compact-brief p { color: #4b705f; line-height: 1.55; margin: 0; transition: color .24s var(--walnof-ease); }
.industry-icon-card article:hover .compact-brief { border-color: rgba(255,255,255,.2); }
.industry-icon-card article:hover .compact-brief p { color: #cce7d9; }
.industry-icon-card a { align-items: center; display: flex; font-weight: 800; gap: .55rem; margin-top: auto; padding-top: 1rem; text-transform: uppercase; }
.visual-benefit-band { background: var(--walnof-treasury) !important; color: #fff; padding: clamp(3.5rem,6vw,6rem) 0 !important; }
.visual-benefit-band .container { display: grid; grid-template-columns: repeat(3,1fr); }
.visual-benefit-band .container > div, .visual-benefit-band .container div { border-left: 1px solid rgba(207,237,225,.2); padding: 1.5rem; }
.visual-benefit-band svg { color: var(--walnof-sage); }
.visual-benefit-band h3 { font-size: 1.35rem; letter-spacing: -.04em; margin: 1rem 0 .5rem; }
.visual-benefit-band p { color: #c8e4d5; line-height: 1.55; margin: 0; }

.about-visual { background: var(--walnof-bg) !important; }
.about-visual-grid { align-items: stretch; display: grid !important; grid-template-columns: 1.05fr .95fr; }
.about-photo { min-height: 38rem; overflow: hidden; }
.about-photo img { height: 100%; object-fit: cover; transition: transform .8s var(--walnof-ease); width: 100%; }
.about-photo:hover img { transform: scale(1.045); }
.about-statement { align-content: center; background: var(--walnof-mint); display: grid; padding: clamp(2.5rem,6vw,6rem); }
.about-statement h2 { font-size: clamp(2.4rem,4.5vw,5.2rem); letter-spacing: -.075em; line-height: .96; margin: 1rem 0; }
.about-statement p { color: #456b59; line-height: 1.65; }
.about-statement .walnof-btn-dark { width: max-content; }
.principle-section { background: var(--walnof-treasury) !important; color: #fff; padding: clamp(4.5rem,8vw,8rem) 0 !important; }
.principle-section .section-heading h2 em { color: var(--walnof-sage); }
.principle-grid { display: grid !important; grid-template-columns: repeat(3,1fr); }
.principle-card { border: 1px solid rgba(207,237,225,.2); min-height: 16rem; padding: 1.6rem; transition: background-color .22s var(--walnof-ease), transform .22s var(--walnof-ease); }
.principle-card:hover { background: var(--walnof-forest); transform: translateY(-6px); }
.principle-card svg { color: var(--walnof-sage); }
.principle-card h3 { font-size: 1.45rem; letter-spacing: -.045em; margin: 1.2rem 0 .65rem; }
.principle-card p { color: #c8e4d5; line-height: 1.58; margin: 0; }
.values-section { background: var(--walnof-bg) !important; }
.values-visual-grid { display: grid !important; grid-template-columns: repeat(3,1fr); }
.value-visual-card { border-top: 1px solid rgba(10,31,26,.16); min-height: 13rem; padding: 1.4rem 1.4rem 1.4rem 0; }
.value-visual-card svg { color: var(--walnof-signal); }
.value-visual-card h3 { font-size: 1.35rem; letter-spacing: -.04em; margin: .9rem 0 .45rem; }
.value-visual-card p { color: #4b705f; line-height: 1.55; margin: 0; }

.insights-hero { background: var(--walnof-treasury) !important; color: #fff; display: grid; grid-template-columns: 1fr 1fr; min-height: 62svh; padding-top: 5.8rem !important; }
.insights-hero-image { min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.insights-hero-image img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.insights-hero-copy { align-self: center; padding: clamp(3rem,7vw,7rem); }
.insights-hero-copy h1 { font-size: clamp(3rem,5.5vw,6.5rem); letter-spacing: -.08em; line-height: .91; margin: 1rem 0; }
.insights-hero-copy h1 em { color: var(--walnof-sage); font-family: "DM Serif Display", serif; font-weight: 400; }
.insights-hero-copy p { color: #cae7d7; line-height: 1.75; }
.insights-hero-copy .walnof-btn-primary { margin-top: 1.4rem; }
.insight-principle { background: var(--walnof-mint) !important; padding: clamp(3.8rem,7vw,7rem) 0 !important; }
.insight-principle .container { align-items: end; display: grid; gap: 3rem; grid-template-columns: 1.2fr .8fr; }
.insight-principle h2 { font-size: clamp(2.5rem,5vw,5.7rem); letter-spacing: -.08em; line-height: .94; margin: 1rem 0 0; }
.insight-principle h2 em { color: var(--walnof-signal); font-family: "DM Serif Display", serif; font-weight: 400; }
.insight-principle p { color: #436856; line-height: 1.65; margin: 0; }
.insight-icon-section { background: var(--walnof-bg) !important; }
.insight-icon-grid { display: grid !important; gap: 1rem; grid-template-columns: repeat(6,1fr); }
.insight-icon-card { background: #fff; grid-column: span 2; min-height: 22rem; padding: 1.7rem; transition: background-color .22s var(--walnof-ease), color .22s var(--walnof-ease), transform .22s var(--walnof-ease); }
.insight-icon-card.is-wide { grid-column: span 3; }
.insight-icon-card:hover { background: var(--walnof-forest); color: #fff; transform: translateY(-7px); }
.insight-icon-card svg { color: var(--walnof-signal); }
.insight-icon-card > span { color: var(--walnof-signal); display: block; font-weight: 800; margin-top: 1.2rem; text-transform: uppercase; }
.insight-icon-card h3 { font-size: clamp(1.45rem,2.3vw,2.5rem); letter-spacing: -.055em; line-height: 1.06; margin: .7rem 0; }
.insight-icon-card p { color: #4b705f; line-height: 1.55; transition: color .22s var(--walnof-ease); }
.insight-icon-card:hover p { color: #c8e4d5; }
.insight-icon-card a { align-items: center; display: flex; font-weight: 800; gap: .5rem; margin-top: 1.3rem; text-transform: uppercase; }

.contact-capture-page { background: var(--walnof-treasury) !important; color: #fff; display: grid; grid-template-columns: .82fr 1.18fr; min-height: 100svh; padding-top: 5.8rem !important; }
.contact-intro-panel { align-self: center; padding: clamp(3rem,6vw,6rem); }
.contact-intro-panel h1 { font-size: clamp(3rem,5.4vw,6.4rem); font-weight: 800; letter-spacing: -.082em; line-height: .91; margin: 1rem 0 1.3rem; }
.contact-intro-panel h1 em { color: var(--walnof-sage); font-family: "DM Serif Display", serif; font-weight: 400; }
.contact-intro-panel p { color: #cae7d7; line-height: 1.7; max-width: 36rem; }
.contact-methods { border-top: 1px solid rgba(207,237,225,.22); margin-top: 2rem; }
.contact-methods > a, .contact-methods > div { align-items: center; border-bottom: 1px solid rgba(207,237,225,.22); display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; padding: 1.1rem 0; }
.contact-methods span { color: var(--walnof-sage); display: block; font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-methods strong { font-size: .88rem; }
.enquiry-panel { align-items: center; background: var(--walnof-mint); display: flex; padding: clamp(2rem,5vw,5rem); }
.enquiry-form, .enquiry-success { background: #fff; color: var(--walnof-treasury); margin: auto; max-width: 56rem; padding: clamp(1.5rem,3.5vw,3.2rem); width: 100%; }
.form-heading { margin-bottom: 1.5rem; }
.form-heading h2, .enquiry-success h2 { font-size: clamp(2.2rem,3.6vw,4rem); letter-spacing: -.065em; line-height: .98; margin: .7rem 0; }
.form-heading p, .enquiry-success p { color: #4b705f; line-height: 1.6; margin: 0; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: .45rem; }
.form-field > span { font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { background: var(--walnof-bg); border: 1px solid rgba(10,31,26,.22); border-radius: 0; color: var(--walnof-treasury); font-family: "Poppins", sans-serif; outline: none; padding: .85rem .9rem; transition: border-color .18s var(--walnof-ease), box-shadow .18s var(--walnof-ease); width: 100%; }
.form-field input, .form-field select { min-height: 3.4rem; }
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--walnof-signal); box-shadow: 0 0 0 3px rgba(50,165,72,.14); }
.form-span-2 { grid-column: 1/-1; }
.consent-field { align-items: flex-start; display: flex; gap: .75rem; line-height: 1.5; }
.consent-field input { accent-color: var(--walnof-signal); flex: 0 0 auto; height: 1.15rem; margin-top: .25rem; width: 1.15rem; }
.field-error, .submit-error { color: #9b2c2c !important; margin: 0; }
.form-honeypot { height: 0; left: -10000px; overflow: hidden; position: absolute; width: 0; }
.privacy-note { align-items: flex-start; background: var(--walnof-bg); display: flex; gap: .75rem; margin: 1.2rem 0; padding: 1rem; }
.privacy-note svg { color: var(--walnof-signal); flex: 0 0 auto; margin-top: .15rem; }
.privacy-note p { color: #4b705f; line-height: 1.5; margin: 0; }
.submit-enquiry { align-items: center; background: var(--walnof-signal); color: #fff; display: flex; font-weight: 800; gap: .65rem; justify-content: center; min-height: 3.7rem; padding: 0 1.5rem; text-transform: uppercase; transition: background-color .18s var(--walnof-ease), transform .16s var(--walnof-ease); width: 100%; }
.submit-enquiry:hover:not(:disabled) { background: #268d3b; transform: translateY(-2px); }
.submit-enquiry:disabled { cursor: wait; opacity: .7; }
.enquiry-success { text-align: left; }
.enquiry-success > svg { color: var(--walnof-signal); margin-bottom: 1.2rem; }

.site-footer { background: #fff; }
.footer-primary { display: grid; gap: 4rem; grid-template-columns: 1.2fr .5fr .7fr; padding-bottom: 3.5rem; padding-top: 4rem; }
/* User: "centre the logo in the left half of the footer." The img box
   itself is capped at max-width:19rem, well short of the footer-brand
   column's full width — `object-position` alone only repositions content
   *within* that already-narrow box, it doesn't move the box itself. Centre
   the box in its column with `margin-inline:auto` (the actual fix) and
   switch `object-position` to center too, for the rare case the scaled
   content doesn't exactly fill the box. */
.footer-brand img { display: block; height: auto; margin-inline: auto; max-height: 11rem; max-width: 19rem; object-fit: contain; object-position: center; width: 100%; }
.footer-brand p, .footer-contact p { color: #4b705f; font-size: .74rem; line-height: 1.65; max-width: 31rem; }
/* Replaced the long description paragraph with the brand's own "People |
   Processes | Progress" tagline (previously baked into the logo artwork,
   removed from the image per the prior request, relocated here as real
   text). More specific selector than `.footer-brand p` above so it wins
   on the properties it needs to override; font-size still floors at 17px
   via the sitewide readability-contract safeguard further down this file
   (by design, not fought here) — uppercase + letter-spacing + the brand
   green carries the "tagline" feel at that size, same device `.eyebrow`
   uses elsewhere. */
.footer-brand p.footer-tagline { color: var(--walnof-signal); font-weight: 800; letter-spacing: .14em; margin: 0; max-width: none; text-align: center; text-transform: uppercase; }
.footer-tagline span { color: var(--walnof-mint); margin: 0 .4em; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: .65rem; }
.footer-nav > span, .footer-contact > span { color: var(--walnof-signal); font-size: .58rem; font-weight: 800; letter-spacing: .11em; margin-bottom: .35rem; text-transform: uppercase; }
.footer-nav a, .footer-contact a { font-size: .75rem; font-weight: 700; }
/* `justify-content:space-between` (the source's own rule) pins items to
   the far edges of the row — harmless at a capped container width, but
   once `.container` went fully fluid (2026-10-07) this row can span the
   whole browser width, stretching 2-3 short text items apart with a huge,
   uneven gap and no visual relationship to each other. User: "centre the
   footer text, it looks messy." First fix clustered everything into one
   centered group; follow-up request was more specific — two EQUAL halves
   (brand+tagline / legal links), each centered within its own half, both
   halves aligned on the same row. `footer.php` now wraps the 3 spans into
   two `.footer-bottom-col` groups; this is a real 2-column grid (not flex
   centering) so each half gets exactly 50%, regardless of how long either
   side's text is. */
.footer-bottom { border-top: 1px solid rgba(10,31,26,.14); display: grid; grid-template-columns: 1fr 1fr; align-items: center; font-size: .56rem; font-weight: 700; letter-spacing: .06em; padding-bottom: 1.2rem; padding-top: 1.2rem; text-transform: uppercase; }
.footer-bottom-col { align-items: center; display: flex; flex-direction: column; gap: .4rem; justify-content: center; text-align: center; }

/* Reveal-on-scroll (mirrors framer-motion's whileInView), driven by js/main.js */
.walnof-reveal { opacity: 0; transform: translateY(18px); transition: opacity .62s var(--walnof-ease), transform .62s var(--walnof-ease); }
.walnof-reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes walnofDrift { from { transform: scale(1.02) translate3d(-.5%,0,0); } to { transform: scale(1.08) translate3d(.5%,-.5%,0); } }
@keyframes walnofMarquee { to { transform: translateX(-100%); } }
@keyframes walnofSpin { to { transform: rotate(360deg); } }
.spin { animation: walnofSpin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .walnof-reveal { opacity: 1; transform: none; }
}

@media (max-width: 1050px) {
  .desktop-nav, .header-action { display: none; } .menu-button { display: block; }
  .home-hero, .page-hero, .insights-hero, .contact-capture-page { grid-template-columns: 1fr; }
  .home-hero-visual, .page-hero-image, .insights-hero-image { min-height: 36rem; }
  /* Home hero only: on mobile the building photo becomes a full-bleed
     background behind the text instead of stacking as its own block below
     it — matches the desktop treatment (image + dark gradient, text legible
     on top) rather than showing a plain solid-colour panel first. */
  .home-hero { position: relative; overflow: hidden; }
  .home-hero-copy { position: relative; z-index: 2; }
  .home-hero-visual { position: absolute; inset: 0; min-height: 0; z-index: 0; }
  .home-hero-visual::after { background: linear-gradient(180deg, rgba(10,31,26,.72) 0%, rgba(10,31,26,.88) 45%, var(--walnof-forest) 100%); }
  /* The "One business" caption now has two mutually-exclusive renderings:
     .visual-statement (absolute, tied to the now-full-height background
     image above) would land on top of the capability band below — hide it
     and show the normal-flow standalone copy instead, which just takes its
     own row between the hero buttons and the band, no overlap possible. */
  .visual-statement { display: none; }
  .home-hero-statement-mobile { display: block; padding: 0 clamp(1.2rem,5vw,6rem) 1.8rem; position: relative; z-index: 2; }
  .hero-service-index, .service-jump .container { grid-template-columns: repeat(3,1fr); }
  .industry-row { grid-template-columns: repeat(3,1fr); }
  .testimonial-card { width: calc((100cqi - 1.3rem) / 2); }
  .service-detail, .service-detail.is-reverse { grid-template-columns: 1fr; }
  .service-detail.is-reverse .service-detail-lead, .service-detail.is-reverse .service-capability-panel { grid-column: auto; grid-row: auto; }
  .footer-primary { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
  .industry-icon-card { grid-column: span 6; }
  .visual-benefit-band .container, .principle-grid, .values-visual-grid { grid-template-columns: 1fr 1fr; }
  .about-visual-grid, .insight-principle .container { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-row { height: 5.2rem; } .brand-link { height: 4.4rem; width: 10.8rem; } .brand-link img { max-height: 5rem; }
  .home-hero, .page-hero, .insights-hero, .contact-capture-page { padding-top: 5.2rem; }
  .legal-page-section { padding-top: 7.5rem !important; }
  .testimonial-card { width: 100cqi; }
  .home-hero-copy, .page-hero-copy, .insights-hero-copy, .contact-intro-panel { padding: 3.2rem 1.2rem; }
  .home-hero h1, .page-hero-copy h1, .insights-hero-copy h1, .contact-intro-panel h1 { font-size: clamp(2.8rem,15vw,4.5rem); }
  .hero-service-index, .service-jump .container { grid-template-columns: 1fr 1fr; }
  .hero-service-index a { min-height: 7rem; }
  .split-heading { grid-template-columns: 1fr; }
  .service-mosaic { grid-template-columns: 1fr; } .service-card { grid-column: auto !important; min-height: 16rem; }
  .decision-section { grid-template-columns: 1fr; } .decision-image { grid-row: auto; min-height: 26rem; } .decision-metrics { grid-template-columns: 1fr; }
  .industry-row { grid-template-columns: 1fr; }
  .executive-cta .container { align-items: flex-start; flex-direction: column; }
  .footer-primary { gap: 2.5rem; grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .footer-bottom { grid-template-columns: 1fr; gap: 1rem; }
  .footer-bottom-col { gap: .5rem; }
  .industry-icon-grid, .insight-icon-grid { grid-template-columns: 1fr; }
  .industry-icon-card, .insight-icon-card { grid-column: auto !important; }
  .visual-benefit-band .container, .principle-grid, .values-visual-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; } .form-span-2 { grid-column: auto; }
  .contact-capture-page { padding-top: 5.2rem; }
  .contact-intro-panel, .enquiry-panel { padding: 2.5rem 1.2rem; }
}

/* Readability contract (ported from client/src/index.css, missing from this
   file entirely until 2026-10-07 — user-requested minimum rendered text
   size is 17px across all interface and content copy). Without this, every
   rem-sized small-print element (nav links, header-action, footer text,
   eyebrows, card copy...) renders at its literal computed rem value
   (10-14px at the browser's default 16px root) instead of the mandated
   17px floor — this was the real cause behind the header/footer "spacing"
   complaint, not a header/footer-specific bug. */
.eyebrow, .walnof-btn-primary, .walnof-btn-outline, .walnof-btn-dark, .header-action, .mobile-cta, .desktop-nav a, .mobile-panel a,
.home-hero-copy > p, .executive-audience span, .visual-statement strong, .home-hero-statement-mobile strong, .hero-service-index a > span, .hero-service-index strong,
.capability-band span, .split-heading p, .section-heading > p, .service-card span, .service-card p, .service-card > div,
.decision-copy p, .decision-metrics strong, .decision-metrics span, .industry-row p, .industry-row span, .hero-meta span,
.service-jump a, .service-detail-lead > p, .service-capability-panel > span, .service-capability-panel p,
.insights-hero-copy p, .briefing-panel span, .briefing-panel a,
.perspective-card > span, .perspective-card p, .perspective-card a, .contact-intro-panel > p, .contact-methods span, .contact-methods strong,
.footer-brand p, .footer-contact p, .footer-nav a, .footer-contact a, .footer-bottom span {
  font-size: 17px !important;
}

/* Final global safeguard for the 17px minimum: applies to all non-heading interface and reading text. */
body :is(p, a, button, span, strong, li, label, small) { font-size: max(17px, 1em) !important; }

/* CookieYes consent banner: compact it down — the plugin's own defaults are
   generous (16.5px/24px padding, 24px line-heights, 8px/27px button padding).
   Font-size stays untouched (still floored at 17px by the rule above);
   this only trims padding/line-height/button bulk for a tighter, less
   intrusive bar. meta.customCSS isn't usable here — the Lite plugin's own
   frontend script never reads that field (Pro-only), so these overrides
   target the plugin's real rendered classes directly instead. */
.cky-consent-container .cky-consent-bar { padding: 10px 24px !important; }
.cky-consent-container .cky-notice-group { align-items: center !important; gap: 1.5rem !important; }
.cky-consent-container .cky-title { margin-bottom: 2px !important; line-height: 1.3 !important; }
.cky-consent-container .cky-notice-des p { line-height: 1.35 !important; }
.cky-consent-container .cky-notice-btn-wrapper { gap: .6rem !important; }
.cky-consent-container .cky-btn { padding: 7px 16px !important; border-radius: 3px !important; font-weight: 600 !important; white-space: nowrap !important; }
.cky-consent-container .cky-btn-customize { text-decoration: underline !important; text-underline-offset: 3px !important; }

/* Floating WhatsApp button — site-wide (lives in footer.php, outside the
   per-page Divi content). `bottom` is adjusted by main.js whenever the
   CookieYes banner is on screen, so the two fixed-bottom elements never
   overlap regardless of banner height (which differs by viewport/content). */
.walnof-whatsapp-btn { align-items: center; background: #25d366; border-radius: 50%; bottom: 1.6rem; box-shadow: 0 6px 20px -4px rgba(10,31,26,.35); color: #fff; display: flex; height: 3.6rem; justify-content: center; position: fixed; right: 1.6rem; transition: transform .2s var(--walnof-ease), bottom .2s var(--walnof-ease), box-shadow .2s var(--walnof-ease); width: 3.6rem; z-index: 55; }
.walnof-whatsapp-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 26px -4px rgba(10,31,26,.45); }
@media (max-width: 720px) {
  .walnof-whatsapp-btn { bottom: 1.1rem; height: 3.2rem; right: 1.1rem; width: 3.2rem; }
}