/* ==========================================================================
   A Care Of Joy component layer.
   theme.json owns tokens + block defaults; this file owns components and the
   WP traps. Class prefix: .acoj-   Design intent: design/DESIGN.md
   (refero "Function": parchment surfaces, Fraunces display with one italic
   word, Inter body, one terracotta accent, 24px cards / 40px pills, elevation
   by colour step not shadow).
   ========================================================================== */

/* Tokens (colours, radii, shadows) come from assets/css/tokens.css — generated from design/tokens.json. */
:root {
  --acoj-charcoal: #333333;   /* long-form body copy */
  --acoj-ash: #808988;        /* input borders / placeholders only */
  --acoj-accent-deep: #9a4d2d;/* hover on accent fills */
  --acoj-ring: 0 0 0 3px rgba(176, 90, 54, .22);
  --acoj-ease: cubic-bezier(.22, 1, .36, 1);
  --acoj-header-h: 72px;
}

/* --- Stacked full-bleed panels ------------------------------------------------
   Every top-level section is a .acoj-panel (alignfull group with a
   backgroundColor). Kill the block gap between panels — with `margin-block`,
   NOT `margin: 0`, which destroys alignfull's negative side margins. */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > .acoj-panel,
.wp-block-post-content > .acoj-hero-cover { margin-block: 0 !important; }

/* --- Flow-layout fallback -----------------------------------------------------
   The block editor strips `layout` attrs when someone saves a page; panels then
   fall back to is-layout-flow and lose gutters + centering. Zero specificity. */
.wp-block-post-content > .acoj-panel.is-layout-flow > :where(*) {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

/* --- Browser surfaces (selection, caret, native controls) ---------------------- */
::selection { background: color-mix(in srgb, var(--acoj-accent) 22%, var(--acoj-base)); color: var(--acoj-contrast); }
.has-contrast-background-color ::selection { background: color-mix(in srgb, var(--acoj-accent) 55%, var(--acoj-contrast)); color: var(--acoj-base); }
html { caret-color: var(--acoj-accent); accent-color: var(--acoj-accent); scrollbar-color: var(--acoj-line) var(--acoj-base); }
:focus-visible { outline: 2px solid var(--acoj-accent); outline-offset: 3px; border-radius: 4px; }
a:focus-visible { border-radius: 6px; }

/* --- Base typography reflexes -------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
h1 em, h2 em, h3 em, .acoj-cta-band h2 em {
  font-style: italic;
  font-weight: 300;
  color: inherit;
}
/* Space above a heading > below it (craft floor). */
.acoj-panel h2 { margin-block: 0 var(--wp--preset--spacing--30); }
.acoj-panel h2 + p.has-large-font-size { margin-block-end: var(--wp--preset--spacing--50); }
.acoj-panel .has-large-font-size { font-weight: 300; line-height: 1.4; }
.acoj-panel .has-text-align-center.has-large-font-size { margin-inline: auto; }
.acoj-prose p { color: var(--acoj-charcoal); font-size: 1.0625rem; line-height: 1.6; }
.acoj-prose h2 { margin-block-start: var(--wp--preset--spacing--50); }
.acoj-prose h2:first-child { margin-block-start: 0; }
p a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
p a:hover { color: var(--acoj-accent); }

/* Constrained layouts centre every child inside the panel, so a left-aligned
   child narrower than the reading column would drift. Left-aligned copy keeps
   the full column width (720px) and only centred copy carries a ch measure. */
.acoj-panel > :is(h2, h3, p, ul, .wp-block-buttons):not(.has-text-align-center):not(.is-content-justification-center) { max-width: var(--wp--style--global--content-size, 720px); }
.acoj-panel > p.has-text-align-center.has-large-font-size { max-width: 44ch; }

/* Eyebrow — Inter 600 12px, uppercase, terracotta (refero "Eyebrow Label"). */
.acoj-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.28px;
  text-transform: uppercase;
  color: var(--acoj-accent);
  margin-block: 0 var(--wp--preset--spacing--20);
}
.acoj-eyebrow + h1, .acoj-eyebrow + h2 { margin-block-start: 0; }
.has-contrast-background-color .acoj-eyebrow,
.acoj-hero-cover .acoj-eyebrow { color: var(--acoj-base); opacity: .8; }

/* --- Buttons ---------------------------------------------------------------------- */
.wp-block-button__link {
  padding: 12px 24px;
  line-height: 1.25;
  transition: background-color .2s var(--acoj-ease), color .2s var(--acoj-ease), border-color .2s var(--acoj-ease), box-shadow .2s var(--acoj-ease);
}
.wp-block-button__link:hover { background-color: var(--acoj-accent-deep); color: var(--acoj-base); }
.wp-block-button__link:focus-visible { outline: none; box-shadow: var(--acoj-ring); }
/* Outline buttons use the deep accent as text: #b05a36 on the cream panel is 4.17:1 (fails AA for 15px text), #9a4d2d is 5.3:1. Solid buttons keep the true accent as a fill. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--acoj-accent-deep);
  color: var(--acoj-accent-deep);
  padding: calc(12px - 1.5px) calc(24px - 1.5px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--acoj-accent); color: var(--acoj-base); }
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.acoj-hero-cover .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: color-mix(in srgb, var(--acoj-base) 55%, transparent);
  color: var(--acoj-base);
}
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.acoj-hero-cover .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--acoj-base); color: var(--acoj-contrast); border-color: var(--acoj-base); }
.wp-block-buttons { gap: 12px; }
.acoj-panel .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--40); }

/* --- Header ------------------------------------------------------------------------
   Sticky must be the whole template part (children can't stick in a fit-height parent). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--acoj-base);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--acoj-ease), box-shadow .25s var(--acoj-ease);
}
html.acoj-scrolled header.wp-block-template-part { border-bottom-color: var(--acoj-line); }
.acoj-header {
  max-width: 1280px;
  margin-inline: auto;
  min-height: 72px; /* fixed: --acoj-header-h is measured by main.js for scroll offsets and must not feed back here */
  padding-inline: clamp(16px, 4vw, 32px);
  align-items: center;
  gap: 24px;
}
.acoj-logo { display: inline-flex; align-items: center; text-decoration: none; }
.acoj-logo img { display: block; height: 82px; width: auto; }
@media (max-width: 1280px) {
  .acoj-logo img { height: 66px; }
  .acoj-nav.wp-block-navigation { font-size: .875rem; }
  .acoj-nav .wp-block-navigation-item__content,
  .acoj-nav .wp-block-navigation-submenu__toggle { padding: 8px 9px; }
  .acoj-header { gap: 16px; }
}
.acoj-nav.wp-block-navigation { font-size: .9375rem; }
.acoj-nav .wp-block-navigation__container { gap: 4px; }
.acoj-nav .wp-block-navigation-item__content,
.acoj-nav .wp-block-navigation-submenu__toggle {
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .18s var(--acoj-ease);
}
.acoj-nav .wp-block-navigation-item__content:hover,
.acoj-nav .wp-block-navigation-submenu__toggle:hover { background: var(--acoj-surface); }
/* You-are-here: WP adds current-menu-item (+ aria-current) when the link's page id
   matches; the seed nav carries ids for that. Parent of an active child via :has(). */
.acoj-nav .current-menu-item > .wp-block-navigation-item__content,
.acoj-nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle,
.acoj-nav .has-child:has(.current-menu-item) > .wp-block-navigation-submenu__toggle,
.acoj-nav .has-child:has(.current-menu-item) > .wp-block-navigation-item__content { font-weight: 600; color: var(--acoj-accent); }
.acoj-nav .wp-block-navigation-item__content { font-weight: 400; }
.acoj-nav .wp-block-navigation__submenu-container {
  background: var(--acoj-base) !important;
  border: 1px solid var(--acoj-line) !important;
  border-radius: 12px;
  box-shadow: var(--acoj-shadow-panel);
  padding: 8px;
  min-width: 220px;
}
.acoj-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 12px; }
/* Submenu chevron: a compact round toggle right after the parent label, vertically centred, rotates when open. */
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child { display: flex; align-items: center; }
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation-item__content { padding-right: 6px; }
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle {
  width: 26px; height: 26px; padding: 0; margin-left: 0; /* ≥24px and unobscured: WCAG 2.2 target size */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--acoj-muted);
}
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle:hover { background: var(--acoj-surface); color: var(--acoj-contrast); }
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle svg { width: 10px; height: 10px; display: block; margin: 0; transition: transform .2s var(--acoj-ease); }
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover .wp-block-navigation-submenu__toggle svg,
.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.acoj-header-actions { align-items: center; gap: 8px; }
/* Header CTA clears the 44px touch floor. Owner's rule: the nav carries ONE action (Schedule a Tour) — no phone in the header; tel: links live in the footer, CTA band and contact page. */
.acoj-cta-header .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; font-size: .9375rem; }
.acoj-header-actions .wp-block-buttons { margin: 0; }
/* Mobile overlay menu: parchment, big serif links. */
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--acoj-base) !important;
  color: var(--acoj-contrast);
  padding: 88px clamp(16px, 6vw, 40px) 40px;
}
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 8px; }
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem;
  padding: 8px 0;
}
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border: 0 !important; box-shadow: none; padding: 0 0 8px 20px; background: transparent !important;
}
.acoj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.125rem; font-family: var(--wp--preset--font-family--body); }
.acoj-nav .wp-block-navigation__responsive-container-open,
.acoj-nav .wp-block-navigation__responsive-container-close { padding: 8px; border-radius: 12px; }
.acoj-header { flex-wrap: nowrap; }
.acoj-header > .acoj-nav { flex: 1 1 auto; min-width: 0; }
/* Full row: centre the links in the space between the logo and the CTA. */
html:not(.acoj-nav-collapsed) .acoj-header > nav.acoj-nav { justify-content: center; }
html:not(.acoj-nav-collapsed) .acoj-header > nav.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: flex; justify-content: center; width: 100%; }
html:not(.acoj-nav-collapsed) .acoj-header > nav.acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { justify-content: center; }
.acoj-header > .acoj-header-actions { flex: 0 0 auto; }
/* WP's "mobile" overlay only kicks in under 600px; with a 7-item nav and a wide
   lockup the row breaks long before that, so the hamburger takes over at 1024. */
/* Collapse rule: CSS baseline under 1024px, and main.js adds html.acoj-nav-collapsed
   at ANY width where the full row would wrap. The nav never splits into two rows. */
.acoj-nav .wp-block-navigation__container { flex-wrap: nowrap; }
html.acoj-nav-collapsed .acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
html.acoj-nav-collapsed .acoj-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
html.acoj-nav-collapsed .acoj-header { gap: 12px; }
html.acoj-nav-collapsed .acoj-header > .acoj-nav { flex: 0 0 auto; order: 3; }
html.acoj-nav-collapsed .acoj-header > .acoj-header-actions { order: 2; margin-left: auto; }
html.acoj-nav-collapsed .acoj-logo img { height: 56px; }
html.acoj-nav-collapsed .acoj-cta-header .wp-block-button__link { padding: 9px 16px; font-size: .875rem; }
@media (max-width: 1024px) {
  .acoj-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .acoj-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
  .acoj-header { gap: 12px; min-height: 64px; }
  .acoj-logo img { height: 56px; }
  .acoj-header > .acoj-nav { flex: 0 0 auto; order: 3; }
  .acoj-header > .acoj-header-actions { order: 2; margin-left: auto; }
  .acoj-cta-header .wp-block-button__link { padding: 9px 16px; font-size: .875rem; }
}
/* main.js adds html.acoj-nav-collapsed at any width; below 480px these rules must beat those, hence the doubled selectors. */
@media (max-width: 480px) {
  .acoj-logo img, html.acoj-nav-collapsed .acoj-logo img { height: 48px; }
  .acoj-header, html.acoj-nav-collapsed .acoj-header { gap: 6px; padding-inline: 12px; }
  .acoj-cta-header .wp-block-button__link, html.acoj-nav-collapsed .acoj-cta-header .wp-block-button__link { padding: 8px 12px; font-size: .8125rem; }
  .acoj-nav .wp-block-navigation__responsive-container-open { padding: 6px; }
}
@media (max-width: 340px) {
  .acoj-logo img, html.acoj-nav-collapsed .acoj-logo img { height: 44px; }
  .acoj-cta-header .wp-block-button__link, html.acoj-nav-collapsed .acoj-cta-header .wp-block-button__link { padding: 7px 10px; }
}
/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: calc(var(--acoj-header-h) + 16px); }

/* --- Hero: full-bleed cover (home) ------------------------------------------------ */
.acoj-hero-cover { display: flex; align-items: flex-end; }
.acoj-hero-cover .wp-block-cover__inner-container {
  width: 100%;
  padding-block: clamp(48px, 8vw, 112px) clamp(48px, 7vw, 96px);
  padding-inline: max(clamp(16px, 4vw, 32px), calc((100% - 1280px) / 2));
}
.acoj-hero-cover .wp-block-cover__inner-container > :where(:not(.alignfull)) { max-width: 1280px; }
.acoj-hero-cover .wp-block-cover__inner-container > * { margin-inline: 0 !important; }
.acoj-hero-cover h1 { max-width: 14ch; color: var(--acoj-base); margin-block: 0 var(--wp--preset--spacing--40); }
.acoj-hero-cover .has-large-font-size { color: var(--acoj-base); opacity: .86; max-width: 40ch; margin-block-end: var(--wp--preset--spacing--50); }
.acoj-hero-cover .wp-block-buttons { margin-block-start: 0; }
.acoj-hero-cover .wp-block-cover__image-background { filter: saturate(.9); }
/* Scrim sized for real footage: white interior walls reach luma ~210 behind the text; .45→.80 keeps the headline ≥4.5:1 and the lede ≥5:1 on the brightest frame. */
.acoj-hero-cover .wp-block-cover__background { background: linear-gradient(180deg, rgba(42,43,47,.45) 0%, rgba(42,43,47,.80) 100%) !important; opacity: 1 !important; }
@media (max-width: 782px) { .acoj-hero-cover { min-height: 72vh !important; } }

/* Hero video (main.js → heroVideo). The still paints first and stays the LCP element; the
   loop cross-fades in over it once frames are flowing. Opacity only: no movement, nothing
   for reduced motion to undo (the script never loads the video there). */
.acoj-hero-cover .acoj-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.9);
  opacity: 0; transition: opacity 900ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.acoj-hero-cover.acoj-hero-playing .acoj-hero-video { opacity: 1; }
.acoj-hero-cover .wp-block-cover__background,
.acoj-hero-cover .wp-block-cover__inner-container { z-index: 1; }
.acoj-hero-toggle {
  position: absolute; z-index: 2;
  inset-block-end: clamp(16px, 3vw, 32px); inset-inline-end: clamp(16px, 4vw, 32px);
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--acoj-base); background: rgba(42, 43, 47, .45);
  border: 1px solid rgba(254, 249, 239, .55);
  transition: background-color 150ms ease-out, transform 100ms ease-out;
}
.acoj-hero-toggle[hidden] { display: none; }
.acoj-hero-toggle:hover { background: rgba(42, 43, 47, .7); }
.acoj-hero-toggle:active { transform: scale(.94); }
.acoj-hero-toggle:focus-visible { outline: 2px solid var(--acoj-base); outline-offset: 3px; }

/* "Watch our story": third, quietest hero action. Text link with a drawn play mark. */
.acoj-hero-cover .acoj-watch .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--acoj-base);
  border: 1px solid transparent; padding-inline: 8px 14px;
}
.acoj-hero-cover .acoj-watch .wp-block-button__link::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid currentColor;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 0a14 14 0 1 0 0 28 14 14 0 0 0 0-28zm0 1.2a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6zM11.4 9v10a.5.5 0 0 0 .77.42l7.6-5a.5.5 0 0 0 0-.84l-7.6-5a.5.5 0 0 0-.77.42z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 0a14 14 0 1 0 0 28 14 14 0 0 0 0-28zm0 1.2a12.8 12.8 0 1 1 0 25.6 12.8 12.8 0 0 1 0-25.6zM11.4 9v10a.5.5 0 0 0 .77.42l7.6-5a.5.5 0 0 0 0-.84l-7.6-5a.5.5 0 0 0-.77.42z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  border: 0;
}
.acoj-hero-cover .acoj-watch .wp-block-button__link:hover { background: transparent; color: var(--acoj-base); text-decoration: underline; text-underline-offset: 4px; }

/* Film dialog: dim to focus. Opens and closes on the same opacity path. */
dialog.acoj-film {
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--acoj-r-card);
  background: #000; color: var(--acoj-base); overflow: visible;
  opacity: 0; transition: opacity 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete;
}
dialog.acoj-film[open] { opacity: 1; }
@starting-style { dialog.acoj-film[open] { opacity: 0; } }
dialog.acoj-film::backdrop { background: rgba(42, 43, 47, .82); }
dialog.acoj-film video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 32px); aspect-ratio: 16 / 9; border-radius: inherit; background: #000; }
.acoj-film-close {
  position: absolute; z-index: 1; inset-block-start: 12px; inset-inline-end: 12px;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--acoj-base); background: rgba(42, 43, 47, .6); border: 1px solid rgba(254, 249, 239, .55);
}
.acoj-film-close:hover { background: rgba(42, 43, 47, .85); }
.acoj-film-close:focus-visible { outline: 2px solid var(--acoj-base); outline-offset: 3px; }

/* --- Hero: split (inner pages) + plain (form pages) --------------------------------- */
.acoj-hero-split { gap: clamp(32px, 5vw, 64px); }
.acoj-hero-split h1, .acoj-hero-plain h1 { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); line-height: 1.02; }
.acoj-hero-split h1 { margin-block: 0 var(--wp--preset--spacing--40); max-width: 16ch; }
.acoj-hero-split .has-large-font-size { margin-block-end: 0; }
.acoj-hero-img img, .acoj-rounded img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--acoj-r-card);
}
.acoj-hero-plain h1 { margin-block: 0 var(--wp--preset--spacing--40); }
.acoj-hero-plain .has-large-font-size { margin-block-end: 0; }

/* --- Inline tag flow (terracotta "·" separators) ------------------------------------ */
.acoj-tagflow {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--50) 0 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 0;
  font-size: .9375rem;
  color: var(--acoj-charcoal);
}
.acoj-tagflow li { display: inline-flex; align-items: center; }
.acoj-tagflow li + li::before {
  content: "·";
  color: var(--acoj-accent);
  font-weight: 700;
  padding-inline: 16px;
}

/* --- Checklist (two columns, drawn check mark) -------------------------------------- */
.acoj-checklist {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--40) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 32px;
  color: var(--acoj-charcoal);
}
.acoj-checklist li {
  position: relative;
  padding-left: 32px;
  padding-block: 6px;
  border-bottom: 1px solid var(--acoj-line);
}
.acoj-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--acoj-accent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23b05a36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --- Team roster ------------------------------------------------------------------------ */
.acoj-roster {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 24px;
}
.acoj-roster li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  border-top: 1px solid var(--acoj-line);
}
.acoj-roster strong { font-family: var(--wp--preset--font-family--heading); font-weight: 400; font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; color: var(--acoj-contrast); }
.acoj-roster span { font-size: .875rem; color: var(--acoj-muted); }
.acoj-panel > h3 { margin-block: var(--wp--preset--spacing--40) 8px; max-width: var(--wp--style--global--content-size, 720px); }
.acoj-cards + h3 { margin-block-start: var(--wp--preset--spacing--60); }
.acoj-panel > h3 + p { max-width: var(--wp--style--global--content-size, 720px); color: var(--acoj-charcoal); }

/* --- Cards -------------------------------------------------------------------------- */
.acoj-cards { gap: 24px; }
.acoj-cards + .acoj-cards { margin-block-start: 24px; }
.acoj-card {
  position: relative;
  height: 100%;
  border-radius: var(--acoj-r-card);
  border: 1px solid transparent;
  transition: border-color .25s var(--acoj-ease), background-color .25s var(--acoj-ease);
}
/* Cards on a surface panel step back to parchment + hairline so the step is still visible. */
.has-surface-background-color .acoj-card { background-color: var(--acoj-base) !important; border-color: var(--acoj-line); }
.acoj-card h3 { margin-block: 0 12px; font-size: 1.625rem; line-height: 1.2; }
.acoj-card .acoj-eyebrow + h3 { margin-block-start: 0; }
.acoj-card p { color: var(--acoj-charcoal); margin: 0; }
.acoj-card h3 a { text-decoration: none; color: inherit; }
.acoj-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.acoj-cards-link .acoj-card h3 a { padding-right: 32px; display: inline-block; }
.acoj-cards-link .acoj-card h3::after {
  content: "";
  position: absolute; right: var(--wp--preset--spacing--50); top: var(--wp--preset--spacing--50);
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--acoj-line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15L15 5M8 5h7v7' fill='none' stroke='%232a2b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: border-color .25s var(--acoj-ease), background-color .25s var(--acoj-ease), transform .25s var(--acoj-ease);
}
.acoj-cards-link .acoj-card:hover { border-color: var(--acoj-accent); }
.acoj-cards-link .acoj-card:hover h3::after { border-color: var(--acoj-accent); transform: translate(2px, -2px); }
.acoj-card:has(h3 a:focus-visible) { box-shadow: var(--acoj-ring); }
.acoj-cards-link .acoj-card .acoj-eyebrow { color: var(--acoj-muted); }
@media (max-width: 781px) {
  .acoj-cards.wp-block-columns { gap: 16px; }
  .acoj-cards + .acoj-cards { margin-block-start: 16px; }
}

/* --- Split text / image ----------------------------------------------------------------- */
.acoj-split { gap: clamp(32px, 6vw, 80px); }
.acoj-split p { color: var(--acoj-charcoal); max-width: 52ch; }
.acoj-split h2 { max-width: 16ch; }
@media (max-width: 781px) { .acoj-split .acoj-rounded { margin-block-end: 8px; } }

/* --- Gallery ----------------------------------------------------------------------------- */
.acoj-gallery { gap: 24px; }
.acoj-gallery + .acoj-gallery { margin-block-start: 24px; }
.acoj-gallery figcaption { text-align: left; color: var(--acoj-muted); font-size: .875rem; margin-block-start: 10px; }

/* --- FAQ (native details) ------------------------------------------------------------------ */
.acoj-faqs h2 { max-width: 20ch; }
.acoj-faq {
  border-top: 1px solid var(--acoj-line);
  margin-block: 0 !important;
  padding-block: 4px;
}
.acoj-faq:last-of-type { border-bottom: 1px solid var(--acoj-line); }
.acoj-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 48px 20px 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: 0;
}
.acoj-faq summary::-webkit-details-marker { display: none; }
.acoj-faq summary::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%;
  border: 1.5px solid var(--acoj-line);
  background:
    linear-gradient(var(--acoj-accent), var(--acoj-accent)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--acoj-accent), var(--acoj-accent)) center / 1.5px 12px no-repeat;
  transition: transform .3s var(--acoj-ease), border-color .3s var(--acoj-ease);
}
.acoj-faq[open] summary::after { transform: rotate(45deg); border-color: var(--acoj-accent); }
.acoj-faq summary:hover::after { border-color: var(--acoj-accent); }
.acoj-faq summary:focus-visible { outline: none; box-shadow: var(--acoj-ring); border-radius: 8px; }
.acoj-faq > p { color: var(--acoj-charcoal); max-width: 64ch; margin: 0 0 24px; }

/* --- CTA band ------------------------------------------------------------------------------ */
.acoj-cta-band { text-align: center; }
/* The band is cream by default; when the section above it is already cream it flips to parchment so tones keep alternating. */
.wp-block-post-content > .acoj-panel.has-surface-background-color + .acoj-cta-band.has-surface-background-color { background-color: var(--acoj-base) !important; }
.acoj-cta-band h2 { max-width: 18ch; margin-inline: auto; }
.acoj-cta-band .has-large-font-size { margin-inline: auto; }

/* --- Contact / application layouts ------------------------------------------------------- */
.acoj-form-split { gap: clamp(32px, 6vw, 80px); }
/* Form layouts (Careers, Contact) sit inside the 1280 grid at 1100px so the form isn't pinned to the left edge. */
.acoj-form-split.alignwide { max-width: 1100px !important; margin-inline: auto !important; }
.acoj-form-split .acoj-card { height: auto; }
.acoj-form-split .acoj-card + .acoj-card { margin-block-start: 16px; }
.acoj-form-split h2 { margin-block-end: var(--wp--preset--spacing--40); }
.acoj-contact-lines { line-height: 1.7; }
.acoj-contact-lines a { text-decoration: none; }
.acoj-contact-lines a:hover { color: var(--acoj-accent); text-decoration: underline; }
.acoj-address { display: inline-block; line-height: 1.45; margin-top: 4px; }
.acoj-address span { display: block; }

/* --- Forms (Contact Form 7). WP has no global border-box — set it locally. --------------- */
.wpcf7 *, .wpcf7 *::before, .wpcf7 *::after { box-sizing: border-box; }
.wpcf7 p { margin: 0 0 16px; }
.wpcf7 label { display: block; font-size: .875rem; font-weight: 600; color: var(--acoj-contrast); }
.acoj-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { .acoj-form-grid { grid-template-columns: 1fr; } }
.wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 select, .wpcf7 textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  letter-spacing: -.023em;
  color: var(--acoj-contrast);
  background: var(--acoj-base);
  border: 1px solid var(--acoj-ash);
  border-radius: var(--acoj-r-input);
  padding: 12px 20px;
  transition: border-color .2s var(--acoj-ease), box-shadow .2s var(--acoj-ease);
}
.wpcf7 textarea { border-radius: var(--acoj-r-card); min-height: 140px; resize: vertical; }
.wpcf7 select { appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%232a2b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--acoj-muted); }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--acoj-accent); box-shadow: var(--acoj-ring); }
.wpcf7 input[type="file"] { font-size: .9375rem; margin-top: 6px; }
/* Live character counter under textareas (main.js); accent while under the minimum. */
.acoj-count { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 400; line-height: 1.3; color: var(--acoj-muted); text-align: right; font-variant-numeric: tabular-nums; }
.acoj-count.is-short { color: var(--acoj-accent-deep); }
.acoj-count.is-max { color: var(--acoj-accent-deep); font-weight: 600; }
.wpcf7-checkbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.wpcf7-checkbox label { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.wpcf7-checkbox input { accent-color: var(--acoj-accent); width: 18px; height: 18px; }
.wpcf7 input[type="submit"] {
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: -.023em;
  color: var(--acoj-base); background: var(--acoj-accent);
  border: 0; border-radius: var(--acoj-r-button); padding: 12px 24px; cursor: pointer;
  transition: background-color .2s var(--acoj-ease), box-shadow .2s var(--acoj-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--acoj-accent-deep); }
.wpcf7 input[type="submit"]:focus-visible { outline: none; box-shadow: var(--acoj-ring); }
.wpcf7 .wpcf7-spinner { margin-left: 12px; }
.wpcf7 .wpcf7-not-valid { border-color: #a23a2b !important; }
.wpcf7 .wpcf7-not-valid-tip { font-size: .8125rem; color: #a23a2b; margin-top: 6px; }
.wpcf7 .wpcf7-response-output {
  margin: 16px 0 0 !important; padding: 12px 20px !important;
  border: 1px solid var(--acoj-line) !important; border-radius: 16px; background: var(--acoj-surface);
  font-size: .9375rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--acoj-accent) !important; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #a23a2b !important; }

/* --- Footer ------------------------------------------------------------------------------- */
.acoj-footer { --acoj-footer-fg: color-mix(in srgb, var(--acoj-base) 72%, var(--acoj-contrast)); }
.acoj-footer-cols { gap: clamp(24px, 4vw, 48px); }
.acoj-footer-cols .wp-block-column { padding-top: 8px; }
.acoj-f-logo { display: block; width: 140px; height: auto; margin-block-end: 20px; margin-inline: auto; border-radius: 50%; background: var(--acoj-base); padding: 8px; box-sizing: border-box; }
.acoj-footer p.has-small-font-size { color: var(--acoj-footer-fg); }
.acoj-footer-h {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: .75rem !important;
  text-transform: uppercase;
  letter-spacing: -.28px;
  color: var(--acoj-footer-fg);
  margin-block: 6px 12px;
}
.acoj-footer ul { list-style: none; padding: 0; margin: 0; }
.acoj-footer li { padding: 4px 0; }
.acoj-footer a { color: var(--acoj-base); text-decoration: none; }
.acoj-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.acoj-footer .acoj-contact-lines { color: var(--acoj-base); margin: 0 0 12px; }
.acoj-footer .wp-block-buttons { margin-block-start: 8px; }
.acoj-copyright { color: var(--acoj-footer-fg); margin-block: var(--wp--preset--spacing--60) 0; border-top: 1px solid color-mix(in srgb, var(--acoj-base) 18%, transparent); padding-top: 24px; }
.acoj-copyright a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.acoj-copyright a:hover { color: var(--acoj-base); }

/* --- Motion: one authored moment — content rises into place once. ------------------------- */
.acoj-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--acoj-ease), transform .7s var(--acoj-ease); }
.acoj-reveal.in { opacity: 1; transform: none; }
.acoj-cards .acoj-reveal:nth-child(2) { transition-delay: .08s; }
.acoj-cards .acoj-reveal:nth-child(3) { transition-delay: .16s; }
html:not(.js) .acoj-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .acoj-reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* WP preset classes (has-*-font-size, has-*-color) carry !important. Override
   with higher specificity + !important, or strip the preset from the markup. */

/* --- Testimonials (#reviews, [acoj_testimonials]) ------------------------------------ */
.acoj-carousel {
  --acoj-car-gap: 24px;
  --acoj-car-per: 3;
  max-width: 1280px;
  margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--60);
  text-align: left;
}
@media (max-width: 1024px) { .acoj-carousel { --acoj-car-per: 2; } }
@media (max-width: 720px)  { .acoj-carousel { --acoj-car-per: 1; --acoj-car-gap: 16px; } }
/* The track: native scroll-snap, so a swipe tracks 1:1, keeps its momentum and
   can be grabbed mid-flight; the buttons only call scrollBy(). The scrollbar is
   hidden because the counter + buttons are the position cue. */
.acoj-testimonials {
  display: flex;
  gap: var(--acoj-car-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;            /* room for the card focus ring */
  margin: -4px;
  scroll-padding-inline: 4px;
  outline-offset: 6px;
}
.acoj-testimonials::-webkit-scrollbar { display: none; }
.acoj-testimonials:focus-visible { outline: 2px solid var(--acoj-accent); border-radius: var(--acoj-r-card); }
.acoj-testimonials[data-count="1"] { max-width: 760px; margin-inline: auto; }
.acoj-testimonials[data-count="1"] .acoj-testimonial { flex-basis: 100%; }
@media (min-width: 721px) { .acoj-carousel[data-total="2"] { --acoj-car-per: 2; } }
.acoj-testimonial {
  flex: 0 0 calc((100% - var(--acoj-car-gap) * (var(--acoj-car-per) - 1)) / var(--acoj-car-per));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--acoj-r-card);
  background: var(--acoj-base);
  border: 1px solid var(--acoj-line);
  display: flex; flex-direction: column; gap: 16px;
}
.acoj-carousel-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 28px;
}
.acoj-carousel-nav[hidden] { display: none; }
.acoj-carousel-btn {
  width: 48px; height: 48px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--acoj-line);
  background: var(--acoj-base);
  color: var(--acoj-contrast);
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, transform .1s ease-out;
}
.acoj-carousel-prev svg { transform: scaleX(-1); }
.acoj-carousel-btn:hover:not(:disabled) { background: var(--acoj-accent); border-color: var(--acoj-accent); color: var(--acoj-base); }
.acoj-carousel-btn:active:not(:disabled) { transform: scale(.94); }
.acoj-carousel-btn:focus-visible { outline: 2px solid var(--acoj-accent); outline-offset: 3px; }
.acoj-carousel-btn:disabled { opacity: .35; cursor: default; }
.acoj-carousel-count {
  min-width: 6ch; text-align: center;
  font-size: .9375rem; color: var(--acoj-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .acoj-testimonials { scroll-behavior: auto; }
  .acoj-carousel-btn { transition: none; }
}
.acoj-stars { display: inline-flex; gap: 2px; color: var(--acoj-accent); }
.acoj-testimonial blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.acoj-testimonial blockquote p {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.45;
  color: var(--acoj-contrast);
  text-wrap: pretty;
}
.acoj-testimonial figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; color: var(--acoj-muted); margin-top: auto; }
.acoj-testimonial figcaption strong { color: var(--acoj-contrast); font-weight: 600; }
.acoj-testimonial-link { color: var(--acoj-accent); text-decoration: underline; text-underline-offset: 3px; }
.acoj-testimonial-link:hover { text-decoration-thickness: 2px; }
.acoj-reviews > p:not(.has-large-font-size) { max-width: 60ch; margin-inline: auto; color: var(--acoj-muted); }
.acoj-reviews-summary { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 auto var(--wp--preset--spacing--40); font-size: .9375rem; color: var(--acoj-muted); }
.acoj-reviews-summary strong { color: var(--acoj-contrast); }
.acoj-reviews-summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.acoj-reviews-summary + .acoj-carousel { margin-block-start: 0; }