:root {
  color-scheme: light;
  --vr-canvas: #fbf9f3;
  --vr-paper: #ffffff;
  --vr-ink: #1b1c18;
  --vr-body: #404944;
  --vr-muted: #51625c;
  --vr-green: #245c4a;
  --vr-green-dark: #044434;
  --vr-sage: #e8efea;
  --vr-line: #c0c9c3;
  --vr-copper: #bd694d;
  /*
   * The text-safe copper.
   *
   * `--vr-copper` measures 3.77:1 on the canvas, which fails WCAG 2.2 AA for
   * normal-size text. It remains the decorative accent -- borders, rules and
   * non-text marks are not subject to the text minimum -- while this darker member
   * of the same hue (5.16:1 on the canvas) is used wherever the copper carries text.
   */
  --vr-copper-ink: #a3542d;
  --vr-gold: #c6a65f;
  /*
   * Placeholder label colours.
   *
   * These are the visible labels on the empty client-logo and evidence slots
   * ("Approved logo slot 01", "Approved evidence pending"). The previous values,
   * #78817c on #ffffff and #68756f on #f5f3ed, measured 4.02:1 and 3.77:1 against
   * their backgrounds -- both below the 4.5:1 WCAG 2.2 AA minimum for normal-size
   * text. Measured in a real browser at 1440px, not estimated.
   *
   * The replacements are darker members of the same muted family, so the
   * placeholder still reads as secondary rather than as content, while reaching AA.
   */
  --vr-slot-muted: #5c6762;
  --vr-slot-muted-on-warm: #4f5a55;
  --vr-serif: Georgia, Cambria, "Times New Roman", serif;
  --vr-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vr-page-gutter: clamp(1.25rem, 5vw, 4rem);
  --vr-content-width: 75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background: var(--vr-canvas);
}

body {
  margin: 0;
  background: var(--vr-canvas);
  color: var(--vr-ink);
  font-family: var(--vr-sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--vr-green);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  /*
   * MO02 requires links and buttons to transition. Buttons already did (160ms) but
   * plain and navigation links changed colour instantly, which the W08 motion
   * verification measured in a real browser as `transition: all over 0s`. The
   * duration and easing match the button treatment so the two read as one system.
   *
   * Only colour properties are transitioned, so nothing here can cause layout shift.
   */
  transition: color 160ms ease-out, text-decoration-color 160ms ease-out;
}

a:hover {
  color: var(--vr-green-dark);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #c1764b;
  outline-offset: 4px;
  border-radius: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--vr-ink);
  font-family: var(--vr-serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
}

h2 {
  font-size: clamp(1.8rem, 2.9vw, 2.65rem);
}

h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

p {
  color: var(--vr-body);
}

.skip-link {
  position: absolute;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  padding: 0.7rem 1rem;
  border-radius: 0.35rem;
  background: var(--vr-ink);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(27, 49, 44, 0.08);
  background: var(--vr-canvas);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.5rem);
  width: min(calc(100% - 2 * var(--vr-page-gutter)), var(--vr-content-width));
  min-height: 4.5rem;
  margin-inline: auto;
}

.site-brand,
.site-footer__name {
  color: var(--vr-ink);
  font-family: var(--vr-serif);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

/* WCAG 2.2 SC 2.5.8: the brand link's line box rounds to 23.75px. An explicit
   minimum keeps it at the 24px target size. The header row is 4.5rem tall and
   centres its items, so this cannot shift the approved layout. */
.site-brand {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
}

.site-brand:hover,
.site-footer__name:hover {
  color: var(--vr-green);
}

.primary-nav {
  position: static;
  margin-left: auto;
}

.primary-nav__disclosure {
  position: static;
}

.primary-nav__panel {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.primary-nav__summary {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--vr-ink);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
}

.primary-nav__summary::-webkit-details-marker {
  display: none;
}

.primary-nav__icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.primary-nav__icon-line {
  transform-origin: 12px 12px;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.primary-nav__label--open,
.primary-nav__disclosure[open] .primary-nav__label--closed {
  display: none;
}

.primary-nav__disclosure[open] .primary-nav__label--open {
  display: inline;
}

.primary-nav__disclosure[open] .primary-nav__icon-line--top {
  transform: translateY(5px) rotate(45deg);
}

.primary-nav__disclosure[open] .primary-nav__icon-line--middle {
  opacity: 0;
}

.primary-nav__disclosure[open] .primary-nav__icon-line--bottom {
  transform: translateY(-5px) rotate(-45deg);
}

.primary-nav__list,
.footer-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-block-columns {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

.primary-nav__list a,
.footer-nav__list a {
  color: var(--vr-ink);
  font-size: 0.93rem;
  font-weight: 550;
  text-decoration: none;
  text-underline-offset: 0.25em;
  /* MO02: footer navigation links transition like every other link. */
  transition: color 160ms ease-out;
}

.primary-nav__list a:hover,
.footer-nav__list a:hover {
  color: var(--vr-green);
  text-decoration: underline;
}

.button,
.wp-block-button__link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.2rem;
  border: 1px solid var(--vr-green);
  border-radius: 0.38rem;
  background: var(--vr-green);
  color: #fff;
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.button:hover,
.wp-block-button__link:hover {
  border-color: var(--vr-green-dark);
  background: var(--vr-green-dark);
  color: #fff;
}

.button--header {
  flex: 0 0 auto;
  min-height: 2.8rem;
  padding-inline: 1rem;
  font-size: 0.9rem;
}

.button--menu {
  display: none;
}

/*
 * DEFECT-04 (W09 R1). This rule used to set `min-height: 2.8rem`, overriding the shared
 * `min-height: 3rem` on `.button` above. Because `2.8rem` is 44.8px at the 16px root, the closing CTA
 * rendered a 48px primary button beside a 44.8px text button — the 3.2px frame difference the hosted QA
 * measured, with the labels themselves aligned.
 *
 * The fix is to DELETE the override rather than compensate for it, so both variants inherit one shared
 * minimum height from the design system. A transform, a negative margin or a per-button height would each
 * have hidden the symptom while leaving two competing sizing rules to drift apart again.
 *
 * `min-height` itself is kept on the shared rule: a text button with no background still needs a target
 * area at least as tall as the primary beside it, which is also a WCAG 2.5.8 consideration.
 */
.button--text {
  border-color: transparent;
  background: transparent;
  color: var(--vr-green);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.button--text:hover {
  border-color: transparent;
  background: rgba(35, 96, 79, 0.07);
  color: var(--vr-green-dark);
}

.site-main {
  min-height: 50vh;
}

.section {
  width: min(calc(100% - 2 * var(--vr-page-gutter)), var(--vr-content-width));
  margin-inline: auto;
  padding-block: clamp(3rem, 6.1vw, 5.5rem);
  border-bottom: 1px solid rgba(27, 49, 44, 0.08);
  scroll-margin-top: 2rem;
}

.section > :first-child,
.section .wp-block-group > :first-child {
  margin-top: 0;
}

.section > :last-child,
.section .wp-block-group > :last-child {
  margin-bottom: 0;
}

.section-heading {
  max-width: 47rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-title {
  max-width: 18ch;
  margin-bottom: 0.85rem;
}

.section-lede {
  max-width: 65ch;
  margin-bottom: 0;
  color: var(--vr-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.eyebrow {
  margin-bottom: 1.2rem;
  color: var(--vr-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-grid {
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.wp-block-columns.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.hero-title {
  max-width: 18ch;
  margin-bottom: 1.35rem;
  font-size: clamp(2.65rem, 3.9vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.hero-deck {
  max-width: 46rem;
  margin-bottom: 1rem;
  color: var(--vr-body);
  font-size: clamp(1.1rem, 1.55vw, 1.25rem);
  font-weight: 560;
  line-height: 1.55;
}

.hero-body {
  max-width: 45rem;
  margin-bottom: 1.55rem;
  color: var(--vr-muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.vr-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.vr-contact-actions--hero {
  margin-top: 1.5rem;
}

.vr-contact-actions--process {
  margin-top: 2rem;
}

/*
 * W09 R1 final visual correction A — centre the closing CTA group.
 *
 * The buttons were individually aligned and both 48px high, but the GROUP sat left-packed: measured 297px to the
 * left of the section heading's centre at 1440px. `.vr-contact-actions` is a flex row with no `justify-content`,
 * so its items start at the left edge.
 *
 * Scoped to `--closing` deliberately. The `--hero` and `--process` instances are left-aligned by design, and the
 * work order forbids globally centring every `.vr-contact-actions`. `--hero` is verified unchanged.
 *
 * At 390px this rule has no visible effect: the shared rule below sets `flex-direction: column` and
 * `.button { width: 100% }`, so the buttons fill the row and are centred by geometry already.
 */
.vr-contact-actions--closing {
  margin-top: 1.5rem;
  justify-content: center;
}

.hero-helper {
  margin: 0.9rem 0 0;
  color: var(--vr-muted);
  font-size: 0.85rem;
}

/*
 * W09 R1 final visual correction B — show the whole illustration.
 *
 * `background-size: cover` scaled the artwork to FILL the figure, and because the figure is wider than the
 * artwork it overflowed vertically and was cropped. `contain` scales it to FIT instead, so the whole illustration
 * is visible and the remaining space becomes the figure's paper background.
 *
 * `filter: contrast(1.05)` applies the modest contrast increase the reference uses, on the ELEMENT, so it affects
 * the rendered image without touching the SVG source.
 */
.hero-art {
  width: 100%;
  min-height: 21rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--vr-line);
  border-radius: 0.75rem;
  background-color: var(--vr-paper);
  /*
   * Hero artwork filename — THE VERSION SUFFIX IS DELIBERATE, AND IT KEEPS MOVING.
   *
   * A browser caches an SVG by URL, independently of the stylesheet's `?ver=` value. So every time the artwork
   * changes, the filename changes with it; otherwise a returning visitor could keep seeing a superseded
   * illustration long after the CSS was updated. The theme versions the STYLESHEET with `filemtime()`, which does
   * nothing for an image URL of its own.
   *
   * The history here is three steps, and the reasons differ:
   *
   *   hero-rank-tracker.svg     The founder replaced the contour illustration with a rising two-dot rank tracker.
   *                             New name so no cache could serve the old contour.
   *   hero-rank-tracker-v2.svg  The four contours were raised from 0.13-0.18 to 0.55-0.65 opacity to make them
   *                             visible. New name because the faint version had already been served.
   *   hero-rank-tracker-v3.svg  The founder rejected those thicker contours — "the graph lines from previous
   *                             designs were much better looking" — and chose a six-line version rebuilt from the
   *                             earlier designs' line grammar. New name for the same reason.
   *
   * DEPLOYING THIS: upload `hero-rank-tracker-v3.svg`, apply this stylesheet, refresh the stylesheet `?ver=` by
   * touching the CSS after extraction, verify the new artwork is live, and only then remove the superseded
   * `hero-rank-tracker-v2.svg`.
   */
  background-image: url("../images/hero-rank-tracker-v3.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: contrast(1.05);
}

.benefit-grid,
.approach-grid,
.process-grid {
  gap: 1.5rem;
}

.benefit-card,
.service-card,
.approach-card {
  height: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.85rem);
  border: 1px solid rgba(27, 49, 44, 0.08);
  border-radius: 0.55rem;
  background: var(--vr-paper);
}

.benefit-card h3,
.approach-card h3,
.service-card h3,
.process-step h3,
.faq-item summary {
  font-family: var(--vr-sans);
  font-weight: 600;
}

.benefit-card h3,
.approach-card h3 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.15rem, 1.45vw, 1.25rem);
  line-height: 1.22;
}

.benefit-card p,
.approach-card p,
.service-card > p:not(.service-card__label):not(.service-card__lead):not(.service-card__action),
.process-step > p:not(.process-step__number) {
  margin-bottom: 0;
  color: var(--vr-muted);
  font-size: 0.96rem;
  line-height: 1.68;
}

.wp-block-columns.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.wp-block-columns.service-grid > .wp-block-column {
  min-width: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.service-card__label {
  margin-bottom: 0.65rem;
  color: var(--vr-green);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
}

.service-card__lead {
  margin-bottom: 0.8rem;
  color: var(--vr-body);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
}

.service-card__action {
  margin: auto 0 0;
  padding-top: 1.3rem;
  font-size: 0.92rem;
  font-weight: 650;
}

.service-card__action a,
.approach-action a {
  text-decoration: none;
}

.service-card__action a:hover,
.approach-action a:hover {
  text-decoration: underline;
}

.approach-panel {
  padding: clamp(1.5rem, 5vw, 4.5rem);
  border-radius: 0.65rem;
  background: var(--vr-sage);
}

.approach-panel > .section-title {
  max-width: 22ch;
}

.approach-intro {
  max-width: 73ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.7rem);
  color: var(--vr-body);
}

.approach-card {
  border-color: rgba(27, 49, 44, 0.06);
  box-shadow: 0 0.2rem 0.9rem rgba(27, 49, 44, 0.035);
}

.approach-action {
  margin: 1.6rem 0 0;
  font-size: 0.94rem;
  font-weight: 650;
}

.process-grid {
  margin-top: 1.75rem;
}

.process-step {
  height: 100%;
  padding: 1rem 0.5rem 0;
  border-top: 1px solid var(--vr-line);
}

.process-step h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
}

.faq-list {
  border-bottom: 1px solid var(--vr-line);
}

.faq-item {
  border-top: 1px solid var(--vr-line);
}

.faq-item summary {
  position: relative;
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem;
  color: var(--vr-ink);
  cursor: pointer;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.4;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: 0 0 auto;
  width: 1.5rem;
  color: var(--vr-green);
  content: "+";
  font-size: 1.25rem;
  font-weight: 450;
  line-height: 1;
  text-align: center;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item__answer {
  max-width: 70ch;
  padding: 0 2.2rem 1.1rem 0.2rem;
}

.faq-item__answer p {
  margin: 0;
  color: var(--vr-muted);
  font-size: 0.98rem;
  line-height: 1.72;
}

.section--closing {
  border-bottom: 0;
}

.closing-panel {
  max-width: 70rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 4.25rem);
  border-radius: 0.65rem;
  background: var(--vr-sage);
}

.closing-panel .section-title {
  max-width: 16ch;
}

.closing-copy {
  max-width: 70ch;
  margin-bottom: 0;
  color: var(--vr-muted);
}

.site-footer {
  background: #252b28;
  color: #f7f6f0;
}

.site-footer__inner {
  display: flex;
  width: min(calc(100% - 2 * var(--vr-page-gutter)), var(--vr-content-width));
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-inline: auto;
  padding-block: 3.25rem;
}

.site-footer__brand {
  max-width: 32rem;
}

.site-footer__name {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: #f7f6f0;
}

.site-footer__brand p {
  max-width: 42ch;
  margin: 0;
  color: #c5ccc7;
  font-size: 0.9rem;
}

.footer-nav__list {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.footer-nav__list a {
  color: #e2e7e3;
  font-size: 0.88rem;
}

.page-content {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.content-width {
  width: min(calc(100% - 2 * var(--vr-page-gutter)), 58rem);
  margin-inline: auto;
}

.page-content__header {
  margin-bottom: 2rem;
}

.page-content__title {
  margin-bottom: 0;
}

.page-content__body > :last-child {
  margin-bottom: 0;
}

.not-found {
  padding-block: clamp(5rem, 12vw, 10rem);
}

.not-found h1 {
  margin-bottom: 1.5rem;
}

/*
 * DEFECT-02 (W09 R1) — target sizes.
 *
 * The hosted QA measured 8-13 interactive elements per page below 24x24 CSS px. That is a MEASUREMENT, not a
 * verdict: WCAG 2.2 SC 2.5.8 has exceptions, and prose links inside sentences legitimately qualify for the
 * Inline exception — enlarging those would reflow the text they sit in. Those are recorded as EXEMPT with the
 * exception named, not dismissed as a group.
 *
 * The targets below were measured as STANDALONE links on their own line, 19-21px tall, so the Inline exception
 * did not apply and they passed AA only via the Spacing exception:
 *
 *   .service-card__action a   the "See audit services ->" link in each service card
 *   .approach-action a        the "Explore our approach ->" link
 *   .footer-nav__list a       footer navigation links
 *
 * The work order forbids dismissing all undersized targets with a single exception and asks for approximately
 * 44px on important controls where the design allows. The service-card and approach links are the primary route
 * from a card into its matching detail section, and the surrounding space absorbs the growth with no layout
 * change, so they are that case.
 *
 * `inline-flex` + `min-height` + `align-items: center` grows the CLICKABLE BOX while keeping the text on its own
 * line. Padding alone would also enlarge the box but would visibly shift the text out of the card's rhythm.
 *
 * SCOPE NOTE, recorded because it was a mistake worth keeping. `.text-link` was ALSO given this treatment on the
 * assumption it was undersized. It was not: `pages.css` already sets `min-height: 2.6rem` (41.6px) on it, and
 * cascade diagnosis confirmed 41.59px computed on the live page. That rule was removed rather than left in place,
 * because a rule that appears to fix a problem that does not exist makes the next reader doubt the ones that do.
 *
 * The mobile navigation panel already had `min-height: 3rem` (48px) on its links, which is why it never appeared
 * in the undersized set.
 */
.service-card__action a,
.approach-action a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.footer-nav__list a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

/*
 * Header navigation links, desktop only.
 *
 * These measured 20px tall in the desktop header bar (centred at cy 35.8). On desktop the nav is a horizontal
 * row, so the clickable box was only as tall as the text. They passed AA via the Spacing exception, but the row
 * has room to grow and this is the site's primary navigation — the case the work order describes when it asks
 * for approximately 44px on important controls where the design allows.
 *
 * `align-items: center` keeps each label optically centred in its taller box, so the header does not look
 * different. The mobile panel already had `min-height: 3rem` and is unaffected by this media query.
 */
@media (min-width: 1024px) {
  .primary-nav__list a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
}

/*
 * The About cross-link inside the local-expertise panel.
 *
 * A bare <a> in its own block with no class, measured 21px tall on Home at every viewport. It sits in a
 * generously padded panel, so the target can grow without moving anything around it.
 */
.local-expertise-panel > a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.post-summary {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--vr-line);
}

.post-summary__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.post-summary__title a {
  color: inherit;
  text-decoration: none;
}

.reveal-ready {
  transform: translateY(0.65rem);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-ready.is-visible {
  transform: translateY(0);
}

.vr-contact-actions-editor {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--vr-green);
  border-radius: 0.4rem;
  background: var(--vr-sage);
  color: var(--vr-ink);
}

.vr-contact-actions-editor p {
  margin: 0.3rem 0 0;
  color: var(--vr-muted);
  font-size: 0.9rem;
}

.local-slot-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  margin: 0 0 1rem;
  color: var(--vr-muted);
  font-size: 0.83rem;
}

.local-slot-note p {
  margin: 0;
  color: inherit;
}

.local-slot-note__label,
.local-work-slot__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(27, 28, 24, 0.12);
  border-radius: 0.25rem;
  background: #f0eee8;
  color: #51625c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.local-client-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.local-client-slot {
  display: grid;
  min-height: 7rem;
  place-items: center;
  padding: 1rem;
  border: 1px solid rgba(112, 121, 116, 0.24);
  border-radius: 0.45rem;
  background: var(--vr-paper);
  color: var(--vr-slot-muted);
  text-align: center;
}

.local-client-slot span {
  padding: 0.45rem 0.65rem;
  border: 1px dashed #aeb8b1;
  border-radius: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.local-slot-caption {
  margin: 0.8rem 0 0;
  color: var(--vr-muted);
  font-size: 0.78rem;
  font-style: italic;
}

.local-slot-action {
  margin: 0.8rem 0 0;
  font-size: 0.94rem;
  font-weight: 650;
}

.local-work-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.5rem;
}

.local-work-slot {
  display: flex;
  min-width: 0;
  min-height: 15rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  border: 1px solid rgba(112, 121, 116, 0.24);
  border-radius: 0.45rem;
  background: var(--vr-paper);
}

.local-work-slot__preview {
  display: grid;
  width: 100%;
  min-height: 7.5rem;
  flex: 1;
  place-items: center;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px dashed #aeb8b1;
  border-radius: 0.25rem;
  background: #f5f3ed;
  color: var(--vr-slot-muted-on-warm);
  text-align: center;
}

.local-work-slot__preview span {
  font-size: 0.8rem;
  font-weight: 600;
}

.local-work-slot > p {
  margin: 0;
  color: var(--vr-muted);
  font-size: 0.83rem;
}

.local-method-example {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(112, 121, 116, 0.24);
}

.local-method-example__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.local-method-example__grid article {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid rgba(112, 121, 116, 0.24);
  border-radius: 0.4rem;
  background: var(--vr-paper);
}

.local-method-example__grid h3 {
  margin: 0 0 0.55rem;
  color: #7a433e;
  font-family: var(--vr-sans);
  font-size: 0.9rem;
  font-weight: 700;
}

.local-method-example__grid p {
  margin: 0;
  color: var(--vr-body);
  font-size: 0.88rem;
  line-height: 1.55;
}

.local-method-example__note {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(112, 121, 116, 0.24);
  color: var(--vr-muted);
  font-size: 0.78rem;
  font-style: italic;
}

.section--local-expertise {
  padding-block: 2rem;
  border-bottom: 0;
}

.local-expertise-panel {
  max-width: 75rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 0.5rem;
  background: #172d2a;
  color: #f3f1eb;
}

.local-expertise-panel__eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #99d2bb;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.local-expertise-panel h2 {
  max-width: 23ch;
  margin-bottom: 1.25rem;
  color: inherit;
}

.local-expertise-panel > p {
  max-width: 62ch;
  margin-bottom: 1.5rem;
  color: #d2dbd5;
}

.local-slot-note--dark {
  max-width: 42rem;
  margin-bottom: 1.3rem;
  color: #d2dbd5;
}

.local-slot-note--dark .local-slot-note__label {
  border-color: rgba(181, 239, 215, 0.35);
  background: rgba(181, 239, 215, 0.1);
  color: #b5efd7;
}

.local-expertise-panel > a {
  color: #b5efd7;
  font-weight: 600;
  text-underline-offset: 0.22em;
}

.local-design-slot-editor {
  padding: 1rem;
  border: 1px dashed #788a80;
  border-radius: 0.4rem;
  background: #f5f3ed;
}

.local-design-slot-editor strong {
  display: block;
  margin-bottom: 0.3rem;
}

.local-design-slot-editor p {
  margin: 0;
  color: var(--vr-muted);
  font-size: 0.88rem;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .service-card:focus-within {
    transform: translateY(-0.15rem);
    border-color: rgba(35, 96, 79, 0.25);
    box-shadow: 0 0.75rem 1.8rem rgba(27, 49, 44, 0.08);
  }
}

@media (max-width: 63.99rem) {
  :root {
    --vr-page-gutter: clamp(1.25rem, 5vw, 2rem);
  }

  .site-header__inner {
    min-height: 4.5rem;
    gap: 1rem;
    /*
     * Allow the header row to wrap.
     *
     * The brand is `white-space: nowrap`, so at 200% text size the brand plus the
     * navigation exceed the row's width. With `flex-wrap: nowrap` (the initial
     * value) the row could not shrink, the navigation was pushed past the right
     * edge, and the whole page overflowed horizontally by 94px on a 390px screen --
     * measured in a real browser at 200% text. Wrapping lets the enlarged content
     * stack downward instead of sideways, which is the required behaviour for text
     * enlargement.
     */
    flex-wrap: wrap;
  }

  /*
   * The navigation may shrink, and its panel is bounded by the viewport rather than
   * by the navigation's own box, so enlarging text can never push it off-screen.
   */
  .primary-nav {
    min-width: 0;
  }

  .site-brand {
    font-size: 1.35rem;
  }

  .primary-nav__summary {
    display: flex;
  }

  .primary-nav__list {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /*
   * The disclosure is the positioning context for its own panel.
   *
   * Without this the disclosure is `position: static` under this media query, so the
   * absolutely-positioned panel below resolves against a further ancestor. At 200%
   * text size the panel then grew past the viewport and the page overflowed
   * horizontally by 94px on a 390px screen -- measured in a real browser at 200% text,
   * not estimated. Anchoring the panel to the disclosure keeps it inside the header,
   * which is what the panel's own `left: 0; right: 0` already assumed.
   */
  .primary-nav__disclosure {
    position: relative;
  }

  .primary-nav__panel {
    position: absolute;
    top: 100%;
    right: 0;
    /*
     * DEFECT-01 (W09 R1). The panel is absolutely positioned inside the disclosure, which is a
     * shrink-to-fit flex item only as wide as the "Menu" button (~64px). `left: 0; right: 0` therefore
     * resolved to 64px, and `max-width` could not help: it caps a MAXIMUM, it does not give the box a
     * width, so a 64px panel satisfied a 350px cap and stayed 64px.
     *
     * The fix gives the box a real width and anchors its RIGHT edge instead. The header inner is
     * `min(100% - 2 * gutter)` centred, so the disclosure's right edge already sits at
     * (viewport - gutter). Anchoring `right: 0` and sizing to `100vw - 2 * gutter` therefore places the
     * left edge exactly on the opposite gutter, giving a full-width panel with no horizontal overflow.
     *
     * `left: auto` is required, not cosmetic: with `left`, `right` AND `width` all set, the box is
     * over-constrained and the browser ignores `right` in LTR, so `left: 0` would anchor the left edge to
     * the 64px disclosure and push the panel off the right of the screen.
     */
    left: auto;
    width: calc(100vw - var(--vr-page-gutter) * 2);
    /*
     * Never wider than the viewport, and allowed to scroll rather than push the page sideways when text
     * is enlarged. The vertical scroll is the safety net for a long menu.
     */
    max-width: calc(100vw - var(--vr-page-gutter) * 2);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.8rem var(--vr-page-gutter) 1.2rem;
    border-top: 1px solid rgba(27, 49, 44, 0.08);
    background: var(--vr-canvas);
    box-shadow: 0 0.8rem 1.5rem rgba(27, 49, 44, 0.08);
  }

  .primary-nav__list a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    font-size: 1rem;
  }

  .primary-nav__disclosure[open] .button--menu {
    display: flex;
    min-height: 3rem;
  }

  .button--header {
    display: none;
  }

  .wp-block-columns.hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .hero-title {
    font-size: clamp(2.45rem, 5.5vw, 3.2rem);
  }

  .hero-art {
    min-height: 18rem;
  }

  .benefit-grid {
    flex-wrap: wrap;
  }

  /*
   * The column minimum must never exceed the space actually available.
   *
   * This was `min-width: min(100%, 19rem)`. `100%` is the COLUMN's percentage of the flex
   * container, not the container's own width, so once the container is too narrow to fit two
   * 19rem columns plus the gap, the pair refuses to shrink and the row overflows the page.
   *
   * Measured at 844x390 (a common phone in LANDSCAPE): the page overflowed horizontally by
   * **148px**, with the offending benefit column sitting at right:992 against a 844px
   * viewport. Portrait widths are narrower and fall below the two-column branch, which is why
   * the five portrait widths tested in W08 never caught it.
   *
   * `min(100%, 19rem)` becomes a plain `min-width: 0` with a `flex-basis` that already
   * expresses the 50% target, so the columns shrink to fit and wrap to one column when they
   * genuinely cannot. The visible result at wide widths is unchanged.
   */
  .benefit-grid > .wp-block-column {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
}

@media (max-width: 47.99rem) {
  h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.05rem);
  }

  .section {
    padding-block: 3rem;
  }

  .benefit-grid,
  .approach-grid,
  .process-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .wp-block-columns.hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .wp-block-columns.service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .hero-copy,
  .hero-visual-column,
  .benefit-grid > .wp-block-column,
  .service-grid > .wp-block-column {
    flex-basis: auto;
    width: 100%;
  }

  .hero-title {
    max-width: 11ch;
    margin-bottom: 1rem;
    font-size: clamp(2.25rem, 9.75vw, 2.5rem);
    line-height: 1.12;
  }

  .hero-deck {
    font-size: 1.13rem;
  }

  .hero-body {
    font-size: 0.98rem;
  }

  .hero-art {
    min-height: 12rem;
    aspect-ratio: 1.42;
  }

  .benefit-card,
  .service-card,
  .approach-card {
    padding: 1.35rem;
  }

  .service-card {
    min-height: auto;
  }

  .approach-panel,
  .closing-panel {
    padding: 1.5rem;
  }

  .process-grid {
    margin-top: 1rem;
  }

  .process-step {
    padding: 1rem 0 0;
  }

  .vr-contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vr-contact-actions .button {
    width: 100%;
  }

  .vr-contact-actions--hero .button--text,
  .vr-contact-actions--closing .button--text {
    border-color: transparent;
    background: transparent;
    color: var(--vr-green);
  }

  .faq-item summary {
    min-height: 3.75rem;
    font-size: 1rem;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 1.75rem;
    padding-block: 2.75rem;
  }

  .footer-nav__list {
    justify-content: flex-start;
    gap: 0.7rem 1.2rem;
  }

  .local-client-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .local-client-slot {
    min-height: 5.75rem;
    padding: 0.6rem;
  }

  .local-work-slot-grid,
  .local-method-example__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .local-work-slot {
    min-height: 12rem;
    padding: 1.1rem;
  }

  .local-method-example {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }

  .local-expertise-panel {
    padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }

  .reveal-ready,
  .reveal-ready.is-visible {
    transform: none;
  }
}

@media (forced-colors: active) {
  .button,
  .wp-block-button__link {
    border: 1px solid ButtonText;
  }

  .benefit-card,
  .service-card,
  .approach-card,
  .approach-panel,
  .closing-panel {
    border: 1px solid CanvasText;
  }
}