/**
 * Accounts Clarity — Global component styles
 * Breakpoints match projects/flowcraft-site: 1200px (tablet), 810px (mobile).
 */

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ac-white);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: transform var(--duration-standard) var(--ease-standard);
}
.site-header.is-hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

/* Brand lockup: favicon mark + wordmark (matches reference navbar + footer). */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Explicit height: reset.css sets img{height:auto}, so pin the mark or the SVG collapses. */
.nav__brand-mark {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
}
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ac-navy-900);
  white-space: nowrap;
}
.nav__wordmark span { color: var(--ac-teal-500); }

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__list > li { position: relative; }
.nav__list > li > a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-heading);
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav__list > li:hover > a,
.nav__list > li > a:focus { color: var(--ac-teal-500); }
.nav__list > li.current-menu-item > a {
  color: var(--ac-teal-500);
  border-bottom: 2px solid var(--ac-teal-500);
}

/* Dropdown (submenu) */
.nav__list li ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--ac-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.nav__list li:hover > ul.sub-menu,
.nav__list li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__list li ul.sub-menu li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--color-text-body);
}
.nav__list li ul.sub-menu li a:hover { color: var(--ac-teal-500); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--color-text-heading);
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ac-navy-900);
  color: var(--ac-white);
  position: relative;
}

.site-footer__wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 0;
}

.footer__inner {
  padding: 76px 40px 40px;
}

.footer__row {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ── A. Brand + contact ── */
.footer__brand {
  /* Allowed to shrink below its ideal 320px so the link columns stay on the
     same row at the narrower container width. */
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 340px;
}
.footer__brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
/* reset.css sets img{height:auto}, which overrides the HTML height attr — pin it here */
.footer__brand-lockup img { height: 34px; width: auto; }
.footer__wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ac-white);
}
.footer__wordmark span { color: var(--ac-teal-400); }

.footer__tagline {
  font: var(--text-body-sm);
  color: var(--ac-mint-200);
  margin: 0 0 var(--space-5);
  max-width: 300px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.footer__contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ac-mint-200);
  font-size: 0.875rem;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__contact-row svg { flex-shrink: 0; }
a.footer__contact-row:hover { color: var(--ac-white); }
.footer__contact-row--static { cursor: default; }

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer__social-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-mint-200);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.footer__social-btn:hover {
  background: var(--ac-teal-500);
  border-color: var(--ac-teal-500);
  color: var(--ac-white);
}
.footer__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}
.footer__badge-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ac-teal-500);
  color: var(--ac-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.footer__badge-text { line-height: 1.15; }
.footer__badge-title { font-size: 0.72rem; font-weight: 600; color: var(--ac-white); }
.footer__badge-sub {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-ink-300);
}

/* ── B. Link columns + C. CTA card ── */
.footer__cols {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer__col-title {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-white);
  margin-bottom: var(--space-4);
}
.footer__menu {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer__menu a {
  font-size: 0.875rem;
  color: var(--ac-mint-200);
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__menu a:hover { color: var(--ac-white); }

.footer__cta-card {
  flex: 1 1 220px;
  max-width: 260px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.footer__cta-heading {
  font: var(--text-display-sm);
  color: var(--ac-white);
  margin-bottom: var(--space-2);
}
.footer__cta-body {
  font-size: 0.8125rem;
  color: var(--ac-mint-200);
  margin: 0 0 18px;
  line-height: 1.5;
}
.footer__cta-btn { width: 100%; }

/* ── Legal bar ── */
.footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer__copy {
  font-size: 0.8125rem;
  color: var(--ac-ink-300);
  margin: 0;
}
.footer__legal-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer__legal-links a {
  color: var(--ac-ink-300);
  font-size: 0.8125rem;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__legal-links a:hover { color: var(--ac-white); }

/* The header CTA uses the standard button, only marginally compacted so the
   header bar stays tight. It was on btn--sm (33px), which read as a different
   component from every other CTA and sat under the 44px touch minimum. */
.nav__cta {
  padding: 12px 20px;
  font-size: 0.875rem;
  min-height: 44px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.hero__content { flex: 1 1 520px; min-width: 320px; padding-bottom: var(--space-8); }

/* Ewa's design runs the headline much larger than a stock display-xl — it is the
   single dominant element on the page. Scale with the viewport but keep the
   two lines ("Clear books." / "Calm business.") intact down to small screens. */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 5.2vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-5);
}
.hero__accent { color: var(--ac-teal-500); }

.hero__sub {
  font: var(--text-body-lg);
  color: var(--color-text-body);
  max-width: 430px;
  margin: 0 0 var(--space-6);
}

.hero__actions { margin-bottom: var(--space-8); }

/* The wave sits in the left column beneath the CTA, as drawn — it is part of
   the hero composition, not a section divider bolted underneath. It runs the
   full width of the copy column and pushes on toward the illustration. */
.hero__wave {
  /* Runs from the copy column across the gap and under the illustration, as
     drawn. Absolute against .hero__inner so it can cross the gap without
     widening the copy column. Sits behind the artwork. */
  position: absolute;
  left: 0;
  bottom: var(--space-6);
  width: 92%;
  height: 150px;
  z-index: 0;
  pointer-events: none;
}
.hero__content, .hero__media { position: relative; z-index: 1; }
.hero__wave svg { display: block; width: 100%; height: 100%; }

.hero__media {
  flex: 0 1 500px;
  min-width: 280px;
  display: flex;
  justify-content: center;
  position: relative;
}
/* Illustration ships its own soft cloud blob baked in — no CSS blob, no radius,
   no crop. It's a transparent cutout, so it just floats on the page. */
.hero__image {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* ==========================================================================
   Wave divider (thin teal line, mid-page section transitions)
   ========================================================================== */

/* Full-bleed teal wave — spans the viewport, sits under the hero. */
/* Full-bleed divider — still available to other templates; the homepage hero
   now carries its own wave inside the left column instead. */
.wave-divider {
  line-height: 0;
  width: 100%;
  margin-top: calc(-1 * var(--space-6));
  overflow: hidden;
}
.wave-divider svg { display: block; width: 100%; }

/* ==========================================================================
   Trusted By
   ========================================================================== */

.trusted-by { padding: var(--space-4) 0 var(--space-6); text-align: center; }
.trusted-by__label {
  font: var(--text-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.trusted-by__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  color: var(--ac-navy-900);
}
/* Each mark sits in a fixed-height box so uploaded logos of any aspect ratio
   line up on one optical baseline with the fallback glyphs. */
/* Mark above, name beneath in two short lines — as the design draws it. Keeping
   them side by side made each item ~200px wide, which forced the five clients
   onto two rows. */
.trusted-by__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 150px;
  text-align: center;
  color: var(--ac-navy-900);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
}
.trusted-by__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ac-navy-900);
}
.trusted-by__name { text-align: center; }
/* Real uploaded logos: cap the height, let width follow, and hold them back to
   a calm neutral so a loud client logo can't shout over the page. */
.trusted-by__logo {
  max-height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity var(--duration-standard) var(--ease-standard);
}
.trusted-by__item:hover .trusted-by__logo { opacity: 1; }

/* ==========================================================================
   Services
   ========================================================================== */

.services__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.services__header .section-title { margin-bottom: 0; }
/* .services__link is now a .btn--ghost; keep it aligned to the title baseline */
.services__link { align-self: center; }

/* Three-up teaser, divided by hairline rules exactly as drawn. Icons sit in a
   soft neutral circle; the source SVGs have inconsistent viewBoxes so they are
   optically sized with object-fit rather than forced to a square. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-7);
}
.services__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: 0 var(--space-6);
  border-left: 1px solid var(--color-border-subtle);
}
.services__item:first-child { border-left: 0; }

.services__icon {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-circle);
  background: var(--ac-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.services__icon img {
  /* Fills the bubble, as drawn. The source SVGs carry generous internal padding
     inside their viewBox, so the glyph renders smaller than its box — the value
     here is deliberately close to the circle's diameter to compensate. */
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.services__item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.25;
  color: var(--color-text-heading);
  margin: 0;
}
.services__item-desc {
  font: var(--text-body-sm);
  color: var(--color-text-body);
  margin: 0;
  max-width: 30ch;
}
.services__item-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-accent);
  margin-top: auto;
  transition: color var(--duration-fast) var(--ease-standard);
}
.services__item-link svg { transition: transform var(--duration-standard) var(--ease-standard); }
.services__item-link:hover { color: var(--color-brand-accent-hover); }
.services__item-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Quote Band
   ========================================================================== */

/* The wave IS the boundary between this section and the page: a grey field whose
   bottom edge is the curve, with the teal accent line riding along that edge.
   Drawn as SVG paths in the markup so the fill and the stroke share one curve.
   The section carries enough bottom padding that the curve passes UNDER the
   content instead of cutting through it. */
.quote-band {
  position: relative;
  padding: var(--space-7) 0 var(--space-9);
  isolation: isolate;
}
.quote-band__field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}
.quote-band__fill { fill: var(--ac-gray-100); }
.quote-band__edge {
  stroke: var(--ac-teal-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.9;
}

.quote-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--space-8);
}

.quote-band__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-4);
  max-width: 15ch;
}
.quote-band__body {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
  max-width: 42ch;
}

.quote-band__aside {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.quote-band__icon-circle {
  width: 108px;
  height: 108px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--ac-teal-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quote-band__icon-circle img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.quote-band__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote-band__checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--tracking-body);
}
.quote-band__checklist svg {
  color: var(--ac-teal-500);
  flex-shrink: 0;
}
/* The payoff word of each line carries the teal, as drawn. */
.quote-band__accent { color: var(--ac-teal-500); }

/* ==========================================================================
   How It Works
   ========================================================================== */

/* No section background, and no cards — the steps float directly on the page
   exactly as drawn. Number sits inline with the title; illustration sits to the
   right of the copy; slim arrows connect the steps on desktop. */
.how-it-works { background: transparent; }

.how-it-works__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.how-it-works__step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.how-it-works__body { flex: 1 1 auto; min-width: 0; }

.how-it-works__image {
  width: 168px;
  height: 168px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Number + title on one line, as in the design. */
.how-it-works__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  min-height: 42px;
}
.how-it-works__num {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--ac-teal-500);
  color: var(--ac-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
}
.how-it-works__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--color-text-heading);
  margin: 0;
  text-wrap: balance;
}
.how-it-works__desc {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--color-text-body);
  max-width: 30ch;
}

/* Arrow between steps (desktop only). */
.how-it-works__arrow {
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  color: var(--ac-teal-400);
}

/* ==========================================================================
   About Ewa
   ========================================================================== */

/* White ground, as drawn — the grey belongs to the quote band above, not here. */
.about-ewa { background: var(--color-bg-page); }
.about-ewa__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
/* Transparent cutout illustration (ships its own soft blob) — no radius, no crop. */
.about-ewa__image {
  width: 420px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}
/* The copy sits on its own soft panel, with room to breathe — it was running
   right up against the illustration. */
.about-ewa__content {
  flex: 1 1 380px;
  background: var(--ac-mint-100);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-7);
}
.about-ewa__headline {
  font: var(--text-display-lg);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-4);
}
.about-ewa__body {
  font: var(--text-body-md);
  color: var(--color-text-body);
}
.about-ewa__body p { margin: 0 0 var(--space-3); }
.about-ewa__content .btn { margin-top: var(--space-3); }

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Soft tinted panel carrying one quote at a time, as drawn: oversized navy
   quote mark top-left, quote set in the display face, attribution beneath, and
   the carousel arrows parked right and vertically centred. No avatar — the
   design doesn't use one, and stock placeholder faces cheapen a real client's
   words. */
.testimonials__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  background: var(--ac-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8);
}

.testimonials__mark {
  color: var(--ac-navy-900);
  align-self: start;
  margin-top: var(--space-2);
  flex-shrink: 0;
}

.testimonials__slides { min-width: 0; }
.testimonials__slide { display: none; }
.testimonials__slide.is-active { display: block; margin: 0; }

/* The quote is the emotional peak of the page — it earns the display face and a
   size step above body copy. Measure capped so it stays readable. */
.testimonials__quote {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-body);
  margin: 0 0 var(--space-5);
  max-width: 62ch;
}
.testimonials__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonials__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-heading);
}
.testimonials__company {
  font-size: 0.875rem;
  color: var(--ac-teal-500);
}

.testimonials__nav {
  display: flex;
  gap: var(--space-3);
  align-self: center;
}
/* 44px keeps the target usable even though the drawn circle reads smaller. */
.testimonials__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border-subtle);
  background: var(--ac-white);
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.testimonials__nav-btn:hover {
  background: var(--ac-mint-100);
  border-color: var(--color-border-accent);
  transform: translateY(-1px);
}
.testimonials__nav-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta { background: var(--ac-navy-900); padding: var(--space-7) 0; }
.final-cta__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.final-cta__text { max-width: 520px; }
.final-cta__headline {
  font: var(--text-display-md);
  color: var(--ac-white);
  margin: 0 0 8px;
}
.final-cta__sub {
  font: var(--text-body-sm);
  color: var(--ac-mint-200);
  margin: 0;
}

/* ==========================================================================
   Default page content (fallback template)
   ========================================================================== */

.page-content { padding: var(--space-8) 0; }
.page-content__title {
  font: var(--text-display-xl);
  margin-bottom: var(--space-5);
}
.page-content__body { font: var(--text-body-md); }
.page-content__body > * + * { margin-top: var(--space-4); }

/* ==========================================================================
   Responsive — tablet (1200px)
   ========================================================================== */

@media (max-width: 1200px) {
  .container { padding: 0 28px; }
  /* Three-up teaser holds at this width; just tighten the gutters. */
  .services__item { padding: 0 var(--space-5); }

  /* Keep the design's 3-across flow here — just tighten the illustration and
     let the copy use the space. Stacking happens at 810px, not this early. */
  .how-it-works__image { width: 132px; height: 132px; }
  .how-it-works__desc { max-width: none; }
}

/* ==========================================================================
   Responsive — mobile (810px)
   ========================================================================== */

@media (max-width: 810px) {
  .container { padding: 0 20px; }

  /* Nav collapses to a mobile menu */
  .nav__toggle { display: flex; }
  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ac-white);
    border-bottom: 1px solid var(--color-border-subtle);
    /* Collapsed by default. grid-template-rows: 0fr only collapses the FIRST
       row, so on a multi-item list it leaks — scale+opacity on a transformed
       panel is the correct compositor-friendly approach here, and it keeps the
       list out of the flow and out of the tab order while closed. */
    display: flex;
    overflow: hidden;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-standard) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard),
                visibility 0s linear var(--duration-standard);
  }
  .nav__list.is-open {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--duration-standard) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard),
                visibility 0s;
  }
  .nav__list > li { width: 100%; }
  .nav__list > li > a { width: 100%; padding: 12px 20px; }
  .nav__list li ul.sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-left: 12px;
    display: none;
  }
  .nav__list li:hover ul.sub-menu,
  .nav__list li.is-open ul.sub-menu { display: block; }
  .nav__cta { display: none; }

  .hero__inner { flex-direction: column; }
  .hero__media { order: -1; }

  /* Single column — the vertical rules become horizontal separators so the
     three services still read as one divided set rather than floating blocks. */
  .services__grid { grid-template-columns: 1fr; }
  .services__item {
    padding: var(--space-6) 0;
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  .services__item:first-child { border-top: 0; padding-top: 0; }
  .services__item-desc { max-width: 38ch; }

  /* The About panel's desktop padding eats a phone's width — pull it in. */
  .about-ewa__content { padding: var(--space-6) var(--space-5); }

  /* Testimonials: the mark and arrows drop below the quote so the panel keeps a
     comfortable measure instead of squeezing three columns onto a phone. */
  .testimonials__panel {
    grid-template-columns: auto 1fr;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-4);
  }
  .testimonials__nav {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  /* Quote band: stack copy above the checklist, and pull the wave back so it
     stays decorative instead of crowding the text. */
  .quote-band { padding: var(--space-8) 0; }
  .quote-band__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .quote-band__headline { max-width: none; }
  .quote-band__wave { top: -8%; right: -22%; width: 78%; opacity: 0.55; }

  /* How It Works: stack the steps and rotate the connector to point down —
     the design's left-to-right flow becomes top-to-bottom, so the arrows stay
     meaningful instead of being dropped. */
  .how-it-works__grid {
    flex-direction: column;
    gap: var(--space-5);
  }
  .how-it-works__step { gap: var(--space-5); }
  .how-it-works__desc { max-width: none; }
  .how-it-works__arrow { transform: rotate(90deg); align-self: center; }

  .about-ewa__inner,
  .final-cta__inner { flex-direction: column; align-items: flex-start; }

  /* Footer columns wrap naturally via flex-wrap; tighten spacing on small screens */
  .footer__inner { padding: 64px 20px 32px; }
  .footer__row { gap: var(--space-7); }
  .footer__cols { gap: var(--space-7); }
  .footer__cta-card { max-width: none; }
}

@media (max-width: 540px) {
  .services__icon { width: 84px; height: 84px; }
  .services__icon img { width: 68px; height: 68px; }
}

/* ==========================================================================
   Page hero (Services / About / How It Works / Contact)
   ========================================================================== */

.page-hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
  overflow: hidden;
}
.page-hero__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  z-index: 0;
  pointer-events: none;
}
.page-hero__wave-edge {
  stroke: var(--ac-teal-400);
  stroke-width: 1.5;
  opacity: 0.75;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.page-hero__content { flex: 1 1 460px; min-width: 300px; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-4);
}
.page-hero__sub {
  font: var(--text-body-lg);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
  max-width: 40ch;
}
.page-hero__media { flex: 0 1 460px; min-width: 260px; display: flex; justify-content: center; }
.page-hero__media img { width: 100%; max-width: 460px; height: auto; }

/* ==========================================================================
   Services index -- two-column zigzag
   ========================================================================== */

/* Odd items sit left, even items are offset into the right column, reproducing
   the alternating rhythm of the design. Collapses to one column on mobile. */
.services-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-8);
  row-gap: var(--space-7);
}
.services-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
/* Push even items down so the two columns interlock rather than align. */
.services-list__item:nth-child(even) { margin-top: var(--space-7); }

.services-list__icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-list__icon img { width: 100%; height: 100%; object-fit: contain; }

.services-list__body { min-width: 0; }
.services-list__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-2);
}
.services-list__title a {
  color: var(--color-text-heading);
  transition: color var(--duration-fast) var(--ease-standard);
}
.services-list__title a:hover { color: var(--color-text-accent); }
.services-list__desc {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-3);
  max-width: 34ch;
}
.services-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-accent);
  transition: color var(--duration-fast) var(--ease-standard);
}
.services-list__link svg { transition: transform var(--duration-standard) var(--ease-standard); }
.services-list__link:hover { color: var(--color-brand-accent-hover); }
.services-list__link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Promise band (mint, wave-topped)
   ========================================================================== */

.promise-band {
  position: relative;
  padding: var(--space-9) 0 var(--space-7);
  isolation: isolate;
}
.promise-band__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.promise-band__fill { fill: var(--ac-mint-100); }
.promise-band__edge { stroke: var(--ac-teal-400); stroke-width: 1.5; opacity: 0.8; }

.promise-band__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.promise-band__icon {
  width: 108px;
  height: 108px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--ac-teal-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promise-band__icon img { width: 56px; height: 56px; object-fit: contain; }
.promise-band__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}

/* ==========================================================================
   Single service
   ========================================================================== */

.service-hero {
  position: relative;
  padding: var(--space-7) 0;
  overflow: hidden;
  isolation: isolate;
}
.service-hero__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.service-hero__wave-fill { fill: var(--ac-mint-100); }
.service-hero__wave-edge { stroke: var(--ac-teal-400); stroke-width: 1.5; opacity: 0.8; }

.service-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.service-hero__content { flex: 1 1 460px; min-width: 300px; }
.service-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-circle);
  background: var(--ac-white);
  margin-bottom: var(--space-4);
}
.service-hero__icon img { width: 56px; height: 56px; object-fit: contain; }
.service-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.125rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-4);
}
.service-hero__summary {
  font: var(--text-body-lg);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-6);
  max-width: 42ch;
}
.service-hero__media { flex: 0 1 420px; min-width: 240px; display: flex; justify-content: center; }
.service-hero__media img { width: 100%; max-width: 420px; height: auto; }

.service-body__copy {
  max-width: 68ch;
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
}
.service-body__copy p { margin: 0 0 var(--space-4); }

/* What is included */
.service-included__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
.service-included__intro {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
  max-width: 34ch;
}
.service-included__list {
  display: grid;
  gap: var(--space-4);
}
.service-included__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-heading);
  font-size: 1rem;
  letter-spacing: var(--tracking-body);
}
.service-included__list svg { color: var(--ac-teal-500); flex-shrink: 0; margin-top: 2px; }

/* Who it is for */
.service-who__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  align-items: start;
}
/* Reserve the icon box even when an icon is missing, so one item without art
   cannot drop its whole column out of alignment with its siblings. */
.service-who__item {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.service-who__item .service-who__icon { flex-shrink: 0; }
.service-who__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  background: var(--ac-gray-100);
  margin-bottom: var(--space-4);
}
.service-who__icon img { width: 48px; height: 48px; object-fit: contain; }
.service-who__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}
.service-who__desc {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
}

/* How it works */
.service-how__list {
  display: grid;
  gap: var(--space-6);
  max-width: 68ch;
}
.service-how__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.service-how__num {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--ac-teal-500);
  color: var(--ac-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.0625rem;
}
.service-how__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 6px 0 var(--space-2);
}
.service-how__desc {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
}

/* FAQ */
.service-faq__list { max-width: 68ch; }
.service-faq__item {
  border-bottom: 1px solid var(--color-border-subtle);
}
.service-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
}
.service-faq__q::-webkit-details-marker { display: none; }
.service-faq__q svg {
  color: var(--ac-teal-500);
  flex-shrink: 0;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.service-faq__item[open] .service-faq__q svg { transform: rotate(180deg); }
.service-faq__a {
  padding: 0 0 var(--space-5);
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  max-width: 60ch;
}
.service-faq__a p { margin: 0; }

/* Related services */
.service-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.service-related__item {
  display: block;
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-standard) var(--ease-standard);
}
.service-related__item:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-related__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  background: var(--ac-gray-100);
  margin-bottom: var(--space-4);
}
.service-related__icon img { width: 42px; height: 42px; object-fit: contain; }
.service-related__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}
.service-related__desc {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-3);
}
.service-related__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-accent);
}
.service-related__link svg { transition: transform var(--duration-standard) var(--ease-standard); }
.service-related__item:hover .service-related__link svg { transform: translateX(3px); }

/* ==========================================================================
   About page
   ========================================================================== */

.about-traits__grid,
.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.about-approach__grid { grid-template-columns: repeat(3, 1fr); }

.about-trait { text-align: center; }
.about-trait__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-4);
}
.about-trait__icon img { width: 100%; height: 100%; object-fit: contain; }
.about-trait__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
}
.about-trait__desc {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
}

/* ==========================================================================
   How It Works page -- vertical steps with connectors
   ========================================================================== */

.hiw-steps { display: grid; gap: var(--space-7); max-width: 900px; }
.hiw-step {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--space-5);
  position: relative;
}
.hiw-step__num {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  background: var(--ac-teal-500);
  color: var(--ac-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.0625rem;
  align-self: start;
}
.hiw-step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 4px 0 var(--space-2);
}
.hiw-step__desc {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
  max-width: 42ch;
}
.hiw-step__media { width: 200px; flex-shrink: 0; }
.hiw-step__media img { width: 100%; height: auto; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}
.contact__details { display: grid; gap: var(--space-6); }
.contact__row { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact__row-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-teal-500);
}
.contact__row-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-heading);
  margin: 0 0 2px;
}
.contact__row-value {
  font: var(--text-body-sm);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0;
}
.contact__row-value a { color: inherit; }
.contact__row-value a:hover { color: var(--color-text-accent); }

.contact__form-panel {
  background: var(--ac-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}
.contact__form-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-5);
}

/* The WS Form output is themed here so it inherits the brand rather than the
   plugin default. */
.contact__form-panel input[type="text"],
.contact__form-panel input[type="email"],
.contact__form-panel input[type="tel"],
.contact__form-panel textarea,
.contact__form-panel select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-heading);
  background: var(--ac-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.contact__form-panel textarea { min-height: 128px; resize: vertical; }
.contact__form-panel input:focus,
.contact__form-panel textarea:focus,
.contact__form-panel select:focus {
  outline: none;
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 3px rgba(127, 176, 175, 0.25);
}
.contact__form-panel label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Prefer-to-chat band */
.contact-chat {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.contact-chat__media { width: 260px; flex-shrink: 0; }
.contact-chat__media img { width: 100%; height: auto; }
.contact-chat__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-3);
}
.contact-chat__desc {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-5);
  max-width: 40ch;
}

/* ==========================================================================
   Responsive -- new templates
   ========================================================================== */

@media (max-width: 1000px) {
  .service-included__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-who__grid { grid-template-columns: repeat(2, 1fr); }
  .service-related__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__inner { grid-template-columns: 1fr; }
}

@media (max-width: 810px) {
  /* Zigzag collapses to a single column; the offset that creates the
     interlock would only produce a ragged stack on a phone. */
  .services-list__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .services-list__item:nth-child(even) { margin-top: 0; }
  .services-list__desc { max-width: none; }

  .page-hero__inner,
  .service-hero__inner { flex-direction: column; align-items: flex-start; }
  .page-hero__media,
  .service-hero__media { order: -1; align-self: center; }

  .service-who__grid,
  .service-related__grid,
  .about-traits__grid,
  .about-approach__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Keep Ewa's illustrations on mobile — they carry the brand, so hiding them
     strips the page of its character. Stack them under the copy instead. */
  .hiw-step {
    grid-template-columns: 42px 1fr;
    row-gap: var(--space-4);
  }
  .hiw-step__media {
    grid-column: 2;
    width: 100%;
    max-width: 240px;
  }

  .contact-chat__media { width: 100%; max-width: 260px; }
  .contact__form-panel { padding: var(--space-6) var(--space-5); }
}

/* ==========================================================================
   WS Form -- brand overrides
   The plugin ships its own stylesheets and enqueues them after the theme, using
   .wsf-* class names. These rules target those names so the form reads as part
   of the site rather than as a plugin default (its stock submit button is a
   blue #205493 and its inputs use black borders).
   ========================================================================== */

.contact__form-panel .wsf-form,
.contact__form-panel .wsf-form-canvas {
  font-family: var(--font-body);
  color: var(--color-text-body);
}

/* Labels */
.contact__form-panel .wsf-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Text-like fields */
.contact__form-panel .wsf-field:not([type="checkbox"]):not([type="radio"]),
.contact__form-panel textarea.wsf-field,
.contact__form-panel select.wsf-field {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-heading);
  background: var(--ac-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-height: 44px;
  box-shadow: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.contact__form-panel textarea.wsf-field {
  min-height: 132px;
  resize: vertical;
}

.contact__form-panel .wsf-field::placeholder { color: var(--ac-ink-500); }

.contact__form-panel .wsf-field:focus,
.contact__form-panel .wsf-field:focus-visible {
  outline: none;
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 3px rgba(127, 176, 175, 0.25);
}

/* Checkbox / radio: tint to the brand instead of the browser default */
.contact__form-panel input[type="checkbox"].wsf-field,
.contact__form-panel input[type="radio"].wsf-field {
  accent-color: var(--ac-teal-500);
  width: 18px;
  height: 18px;
  min-height: 0;
  border-radius: 4px;
}

/* Submit button -- matches .btn.btn--primary exactly, including the hover lift */
/* WS Form drives button colour through its own custom properties, and its
   `.wsf-form button.wsf-button.wsf-button-primary` selector outranks anything
   reasonable we could write. Setting the variables on the form is the correct
   seam: the plugin keeps its own rules, we supply the brand values. */
.contact__form-panel .wsf-form {
  --wsf-field-button-color-background: var(--color-cta-bg);
  --wsf-field-button-color-background-hover: var(--color-cta-bg-hover);
  --wsf-field-button-color-background-focus: var(--color-cta-bg-hover);
  --wsf-field-button-color-border: var(--color-cta-bg);
  --wsf-field-button-color-text: var(--color-cta-text);

  --wsf-field-button-primary-color-background: var(--color-cta-bg);
  --wsf-field-button-primary-color-background-hover: var(--color-cta-bg-hover);
  --wsf-field-button-primary-color-background-focus: var(--color-cta-bg-hover);
  --wsf-field-button-primary-color-border: var(--color-cta-bg);
  --wsf-field-button-primary-color-border-hover: var(--color-cta-bg-hover);
  --wsf-field-button-primary-color-text: var(--color-cta-text);

  /* Border uses its own set of names in the plugin's scheme. */
  --wsf-field-button-border-color: var(--color-cta-bg);
  --wsf-field-button-primary-border-color: var(--color-cta-bg);
  --wsf-field-button-primary-color-border-focus: var(--color-cta-bg-hover);

  /* Focus ring. The plugin's own `input[type="text"].wsf-field:focus` carries an
     attribute selector and so outranks our class rule; it paints the ring from
     --wsf-field-box-shadow. Supplying the variable is again the right seam. */
  --wsf-field-box-shadow: 0 0 0 3px rgba(127, 176, 175, 0.32);
  --wsf-field-box-shadow-alt: 0 0 0 3px rgba(127, 176, 175, 0.32);
  --wsf-field-color-border-focus: var(--color-border-accent);
  --wsf-field-border-color-focus: var(--color-border-accent);
  --wsf-field-button-border-color-focus: var(--color-cta-bg-hover);
}

/* Border colour on focus still needs to beat the plugin's attribute selector,
   so match its shape rather than relying on the variable alone. */
.contact__form-panel .wsf-form input[type="text"].wsf-field:focus,
.contact__form-panel .wsf-form input[type="email"].wsf-field:focus,
.contact__form-panel .wsf-form input[type="tel"].wsf-field:focus,
.contact__form-panel .wsf-form input[type="url"].wsf-field:focus,
.contact__form-panel .wsf-form input[type="number"].wsf-field:focus,
.contact__form-panel .wsf-form textarea.wsf-field:focus,
.contact__form-panel .wsf-form select.wsf-field:focus {
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 3px rgba(127, 176, 175, 0.32);
  outline: none;
}

/* Checkbox and radio focus, which the plugin styles separately. */
.contact__form-panel .wsf-form input[type="checkbox"].wsf-field:focus-visible,
.contact__form-panel .wsf-form input[type="radio"].wsf-field:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.contact__form-panel .wsf-form .wsf-button,
.contact__form-panel .wsf-form .wsf-button-primary,
.contact__form-panel button.wsf-button,
.contact__form-panel button.wsf-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 14px 24px;
  min-height: 48px;
  color: var(--color-cta-text);
  background: var(--color-cta-bg);
  border: 1.5px solid var(--color-cta-bg);
  border-radius: var(--radius-button);
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-standard) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.contact__form-panel .wsf-form .wsf-button:hover,
.contact__form-panel .wsf-form .wsf-button-primary:hover,
.contact__form-panel button.wsf-button:hover,
.contact__form-panel button.wsf-button-primary:hover {
  background: var(--color-cta-bg-hover);
  border-color: var(--color-cta-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.contact__form-panel .wsf-form .wsf-button:active,
.contact__form-panel button.wsf-button:active {
  transform: translateY(0);
  box-shadow: none;
}
.contact__form-panel .wsf-button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Validation + help text */
.contact__form-panel .wsf-field-help {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.contact__form-panel .wsf-field.wsf-field-error,
.contact__form-panel .wsf-field[aria-invalid="true"] {
  border-color: #b4453c;
}
.contact__form-panel .wsf-error,
.contact__form-panel .wsf-field-message {
  font-size: 0.8125rem;
  color: #b4453c;
  margin-top: 6px;
}
.contact__form-panel .wsf-success {
  font-size: 0.9375rem;
  color: var(--ac-teal-600);
}

/* Row rhythm -- the plugin grid is tighter than the rest of the page */
.contact__form-panel .wsf-field-wrapper { margin-bottom: var(--space-4); }
.contact__form-panel .wsf-section { padding: 0; }

/* ==========================================================================
   Legal pages (Privacy / Terms / Accessibility)
   A Read surface: one column at a comfortable measure, clear heading rhythm,
   and more space above a heading than below it so sections group correctly.
   ========================================================================== */

.page-hero--narrow { padding-bottom: var(--space-5); }

.legal__body {
  max-width: 72ch;
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
}
.legal__body > *:first-child { margin-top: 0; }

.legal__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: var(--space-7) 0 var(--space-3);
}
.legal__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-heading);
  margin: var(--space-6) 0 var(--space-2);
}

.legal__body p { margin: 0 0 var(--space-4); }

.legal__body ul,
.legal__body ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
  list-style: disc;
}
.legal__body ol { list-style: decimal; }
.legal__body li { margin-bottom: var(--space-2); }
.legal__body li::marker { color: var(--ac-teal-500); }

.legal__body a {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal__body a:hover { color: var(--color-brand-accent-hover); }

.legal__body em { color: var(--color-text-muted); }
.legal__body strong { color: var(--color-text-heading); font-weight: 600; }