/* Optimal Health layer-one site styles (2026-09-11). Loaded by the oh-site plugin on every page the theme
   renders (not on the template-blank mockup pages, which carry their own CSS). Tokens come from the theme
   presets that oh-theme.json defines, so the palette and fonts live in one place. Everything here is either
   a piece of the mockup's design system that theme.json cannot express (hairlines, shadows, motion, the
   header bar, the footer grid, the FAQ block, form controls) or a correction to the Assembler theme's
   factory look. Source of record: optimal-health repo, 06-designs/website-redesign/_site/oh-site.css. */

:root {
  --oh-line: rgba(125, 104, 15, 0.14);
  --oh-line-strong: rgba(125, 104, 15, 0.28);
  --oh-underline: #cbb98d;
  --oh-shadow-1: 0 1px 2px rgba(90, 76, 25, 0.05), 0 6px 16px rgba(90, 76, 25, 0.08);
  --oh-shadow-2: 0 2px 5px rgba(90, 76, 25, 0.06), 0 16px 34px rgba(90, 76, 25, 0.12);
  --oh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --oh-dur1: 160ms;
  --oh-dur2: 260ms;
  --oh-gutter: clamp(20px, 3.2vw, 52px);
}

html { -webkit-font-smoothing: antialiased; scroll-padding-top: 88px; }
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
img { max-width: 100%; height: auto; }

/* ============ focus ============ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--theme-3);
  outline-offset: 2px;
}

/* ============ header bar (template part "header", built by _site/build-theme-wp.mjs) ============ */
.oh-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid var(--oh-line);
}
/* the blur lives on a pseudo-element: backdrop-filter on the header itself would make the header the
   containing block for the navigation block's fixed-position overlay menu, trapping it in the bar.
   White, not the page's ivory, so the bar stands apart from the page (Cooper, 2026-09-18). */
.oh-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.oh-header .oh-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--oh-gutter);
  margin: 0;
  max-width: none;
}
.oh-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--wp--preset--color--theme-4);
  flex: none;
}
.oh-logo b {
  font-family: var(--wp--preset--font-family--newsreader);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
}
.oh-logo span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-deep);
  margin-top: 3px;
}
.oh-logo:hover { color: var(--wp--preset--color--theme-4); }
/* the logo link measured 36px tall at 390; the row is already 44px, so this changes the tap area only (/review-page, 2026-09-15) */
.oh-logo { min-height: 44px; justify-content: center; }
/* at 360px the subtitle's tracking pushed the menu button 3px off-screen (/review-page, 2026-09-15) */
@media (max-width: 380px) {
  .oh-header .oh-header-in { gap: 10px; }
  .oh-logo span { letter-spacing: 0.08em; }
}

/* phone CTA: the mockup's primary button at bar size; "Call" alone on phones */
.oh-top-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--wp--preset--color--theme-5);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  transition: transform var(--oh-dur1) var(--oh-ease), box-shadow var(--oh-dur2) var(--oh-ease), background var(--oh-dur1) var(--oh-ease);
}
.oh-top-cta:hover { color: #fff; background: var(--wp--preset--color--charcoal-deep); transform: translateY(-1px); box-shadow: var(--oh-shadow-2); }
.oh-top-cta:active { transform: scale(0.97); }
.oh-top-cta .oh-cta-short { display: none; }
@media (max-width: 640px) {
  .oh-top-cta .oh-cta-long { display: none; }
  .oh-top-cta .oh-cta-short { display: inline; }
  .oh-top-cta { padding: 10px 16px; }
}

/* the navigation block: desktop bar from 1025px (the mockup's breakpoint), overlay menu below it.
   Core switches at 600px; the two !important rules move that line. */
.oh-header .oh-nav { gap: 22px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.oh-header .oh-nav .wp-block-navigation__container { gap: 22px; }
.oh-header .oh-nav .wp-block-navigation-item__content { text-decoration: none; }
.oh-header .oh-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-weight: 500;
  font-size: 15.5px;
  color: var(--wp--preset--color--ink-secondary);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--oh-dur1) var(--oh-ease), border-color var(--oh-dur1) var(--oh-ease);
}
.oh-header .oh-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.oh-header .oh-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.oh-header .oh-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content,
.oh-header .oh-nav .wp-block-navigation__container > .has-child.is-open > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--theme-4);
  border-bottom-color: var(--wp--preset--color--theme-3);
}
.oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--ink-secondary);
  border-radius: 6px;
  margin-left: 0;
  transition: transform var(--oh-dur1) var(--oh-ease);
}
/* core sizes the chevron's svg with width/height: inherit, so the 28px hit box above became a 28px
   chevron with a 3.5px stroke. 14px is the homepage header's chevron (its 1.5 stroke renders at 1.75px). */
.oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
  width: 14px;
  height: 14px;
  margin-top: 0;
}
.oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon:hover { color: var(--wp--preset--color--theme-4); background: var(--wp--preset--color--theme-1); }
.oh-header .oh-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
.oh-header .oh-nav .wp-block-navigation__container > .has-child.is-open > .wp-block-navigation__submenu-icon { transform: rotate(180deg); }

/* hamburger: 44px hit area, the mockup's icon box */
.oh-header .wp-block-navigation__responsive-container-open {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--oh-line-strong);
  border-radius: 8px;
  color: var(--wp--preset--color--theme-4);
  padding: 0;
}
.oh-header .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; padding: 0; color: var(--wp--preset--color--theme-4); }

@media (max-width: 1024px) {
  .oh-header .oh-nav { flex: none; order: 3; }
  .oh-header .oh-top-cta { order: 2; margin-left: auto; }
  .oh-header .wp-block-navigation__responsive-container-open { display: flex !important; }
  .oh-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* the overlay menu (phones and tablets): ivory sheet, big rows, the group labels as plain headings */
.oh-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 16px var(--oh-gutter) 32px;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 40px; }
/* the bar centers its items through the block's layout variables, which the overlay inherits; the
   overlay is a left-aligned list like the mockup pages' drawer */
.oh-header .wp-block-navigation__responsive-container.is-menu-open,
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-justify: flex-start;
  --navigation-layout-align: flex-start;
  text-align: left;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; justify-content: flex-start; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { justify-content: flex-start; width: 100%; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { border-bottom: 1px solid var(--oh-line); padding: 4px 0; width: 100%; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: stretch; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--wp--preset--color--theme-4);
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  gap: 0;
  padding: 0 0 8px 14px;
  margin: 0 0 8px 4px;
  border-left: 2px solid var(--oh-line);
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { border-left: 0; margin: 0; padding: 0 0 6px; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 15.5px;
  font-weight: 400;
  color: var(--wp--preset--color--theme-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
  font-size: 14.5px;
  font-weight: 600;
  min-height: 40px;
  margin-top: 6px;
  pointer-events: none;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.oh-header .oh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon { display: none; }

/* desktop dropdown: one sheet under the item, the hub's groups side by side as columns
   (the Olive Ave layout from the mockup pages, done with the core block's own markup) */
@media (min-width: 1025px) {
  /* the sheet is positioned against the header bar, not the menu item, so it spans the bar like the
     mockup pages' panel and can never run past the viewport edge; everything between must be static */
  .oh-header .oh-header-in,
  .oh-header .oh-nav,
  .oh-header .oh-nav .wp-block-navigation__responsive-container,
  .oh-header .oh-nav .wp-block-navigation__responsive-dialog,
  .oh-header .oh-nav .wp-block-navigation__responsive-container-content,
  .oh-header .oh-nav .wp-block-navigation__container,
  .oh-header .oh-nav .wp-block-navigation__container > .has-child { position: static; }
  .oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px 48px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    margin: 0;
    padding: 32px var(--oh-gutter) 36px;
    /* the bar's white, so bar and sheet read as one surface. !important because the block's
       overlayBackgroundColor attribute (needed for the phone overlay) stamps has-theme-1-background-color
       on every submenu container, and WordPress prints preset colour classes with !important; without it
       this sheet was the page's ivory all along, whatever the value here said (found 2026-09-18) */
    background: #fff !important;
    border: 0;
    border-top: 1px solid var(--oh-line);
    border-bottom: 1px solid var(--oh-line);
    border-radius: 0;
    box-shadow: var(--oh-shadow-2);
    color: var(--wp--preset--color--ink-secondary);
  }
  /* Keep the item hovered while the pointer crosses from the link down to the sheet.
     This MUST be at least as tall as the space between the nav item's bottom edge and the sheet's
     top edge, or the pointer lands in a band belonging to neither, .oh-header-in takes the hover,
     core fires pointerleave on the <li> and the menu shuts before it can be reached. Measured on
     the live header at 1440px (2026-09-23): item bottom 61px, sheet top 88px, so the gap is 27px
     and the old 20px left a 7px dead zone -- which is why both menus could only be opened by
     clicking. 27px is the exact distance: the strip runs from the item's bottom edge to the sheet,
     touching both and overlapping NEITHER. It must not overlap the items. A first attempt used 30px,
     and those 3px of overlap put the pointer on the open menu's bridge and on the nav item at the
     same time, so travelling along the menu bar made the sheets flicker and swap (Cooper caught it
     on video, 2026-09-23). The strip is full-width, so while a menu is open it also covers the band
     under its neighbours -- that is deliberate: crossing below another item keeps the current sheet
     open instead of snatching it away, and moving up onto that item still opens its own.
     position:absolute is required: the sheet is display:flex when open, and an in-flow
     pseudo-element would become a flex item and take part in the menu's layout. */
  .oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -27px;
    height: 27px;
  }
  .oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block;
    min-width: 150px;
    max-width: 220px;
  }
  /* the nested groups are always open inside the sheet */
  .oh-header .oh-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    height: auto;
    width: auto;
    min-width: 0;
    overflow: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent !important; /* over the same preset class as the sheet above */
  }
  .oh-header .oh-nav .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
    font-size: 15px;
    font-weight: 600;
    color: var(--wp--preset--color--theme-4);
    padding: 0 0 10px;
    line-height: 1.4;
    pointer-events: none;
    cursor: default;
    white-space: nowrap;
  }
  .oh-header .oh-nav .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation__submenu-icon,
  .oh-header .oh-nav .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { display: none; }
  .oh-header .oh-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--wp--preset--color--ink-secondary);
    line-height: 28px;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .oh-header .oh-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold-deep); }
  .oh-header .oh-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .oh-nav-hub > .wp-block-navigation-item__content {
    font-weight: 500;
    color: var(--wp--preset--color--theme-4);
  }
}

/* ============ page title and content column ============ */
.oh-page-title { padding-top: clamp(40px, 6vw, 72px); }
.oh-page-title h1 { margin: 0; }
.oh-page-title .wp-block-post-date { margin-top: 12px; }

.wp-block-post-content > :is(h2, h3, h4):not(:first-child) { margin-top: calc(var(--wp--style--block-gap) * 2); }
.wp-block-post-content > :is(h3, h4):not(:first-child) { margin-top: calc(var(--wp--style--block-gap) * 1.5); }
.wp-block-post-content > :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 16px; }
.wp-block-post-content :is(p, li) { color: var(--wp--preset--color--ink-secondary); }
.wp-block-post-content :is(ul, ol) { padding-left: 1.3em; }
.wp-block-post-content li { margin-bottom: 0.4em; }
.wp-block-post-content li::marker { color: var(--wp--preset--color--gold-deep); }
.wp-block-post-content a:not(.wp-element-button) {
  text-decoration: underline;
  text-decoration-color: var(--oh-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--oh-dur1) var(--oh-ease), color var(--oh-dur1) var(--oh-ease);
}
.wp-block-post-content a:not(.wp-element-button):hover { text-decoration-color: var(--wp--preset--color--theme-3); }
.wp-block-post-content img { border-radius: 10px; }
.wp-block-post-content figure { margin-left: 0; margin-right: 0; }
.wp-block-post-content hr { border: 0; border-top: 1px solid var(--oh-line-strong); }
.wp-block-post-content table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.wp-block-post-content :is(th, td) { border-bottom: 1px solid var(--oh-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.wp-block-post-content th { font-weight: 600; color: var(--wp--preset--color--theme-4); }

/* Rank Math FAQ block: the Dysport page's FAQ treatment, static (no accordion).
   Rank Math renders the block server-side as div.rank-math-block > .rank-math-list > .rank-math-list-item,
   not the saved .wp-block-rank-math-faq-block > .rank-math-faq-item markup (that is the editor's). The
   2026-09-11 rules named only the saved classes and matched nothing on the front end; both are named now
   (found 2026-09-14, session 24). */
:is(.wp-block-rank-math-faq-block, .rank-math-block) { border-top: 1px solid var(--oh-line-strong); margin-top: 8px; }
:is(.wp-block-rank-math-faq-block, .rank-math-block) :is(.rank-math-faq-item, .rank-math-list-item) { padding: 20px 0; margin: 0; border-bottom: 1px solid var(--oh-line-strong); }
:is(.wp-block-rank-math-faq-block, .rank-math-block) .rank-math-question {
  font-family: var(--wp--preset--font-family--newsreader);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--theme-4);
  margin: 0 0 8px;
  text-wrap: wrap;
}
:is(.wp-block-rank-math-faq-block, .rank-math-block) .rank-math-answer { max-width: 66ch; color: var(--wp--preset--color--ink-secondary); }
:is(.wp-block-rank-math-faq-block, .rank-math-block) .rank-math-answer > :last-child { margin-bottom: 0; }
:is(.wp-block-rank-math-faq-block, .rank-math-block) .rank-math-answer > :first-child { margin-top: 0; }

/* the HTML sitemap page's lists and the blog index */
.wp-block-page-list, .wp-block-latest-posts { padding-left: 1.3em; }
.wp-block-post-excerpt { color: var(--wp--preset--color--ink-secondary); }

/* ============ buttons: the mockup's lift on hover ============ */
.wp-element-button, .wp-block-button__link {
  transition: transform var(--oh-dur1) var(--oh-ease), box-shadow var(--oh-dur2) var(--oh-ease), background var(--oh-dur1) var(--oh-ease), border-color var(--oh-dur1) var(--oh-ease);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: var(--oh-shadow-2); }
.wp-element-button:active, .wp-block-button__link:active { transform: scale(0.97); }
.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--theme-4); background: var(--wp--preset--color--theme-2); box-shadow: none; }

/* ============ forms (Gravity Forms on the contact page) ============ */
/* Orbital sets its variables on .gform-theme--orbital in a stylesheet that loads after this one, so the
   overrides need more specificity than a bare class; the direct rules below cover the controls Orbital
   styles without a variable. */
body .gform_wrapper.gform-theme--orbital, body .gform_wrapper.gform-theme--foundation, body .gform_wrapper.gravity-theme {
  --gf-color-primary: #3b4145;
  --gf-color-primary-rgb: 59, 65, 69;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: #31363a;
  --gf-color-primary-lighter: #474c4f;
  --gf-color-in-ctrl-primary: #272b2d;
  --gf-color-in-ctrl-light: #5f666b;
  --gf-color-in-ctrl-dark: #272b2d;
  --gf-color-out-ctrl-dark: #272b2d;
  --gf-color-out-ctrl-light: #5f666b;
  --gf-ctrl-border-color: rgba(125, 104, 15, 0.28);
  --gf-ctrl-bg-color: #faf8f5;
  --gf-ctrl-radius: 8px;
  --gf-ctrl-label-color-primary: #272b2d;
  --gf-ctrl-label-color-secondary: #5f666b;
  --gf-ctrl-btn-radius: 8px;
  --gf-ctrl-btn-bg-color-primary: #3b4145;
  --gf-ctrl-btn-bg-color-hover-primary: #31363a;
  --gf-ctrl-btn-border-color-primary: #3b4145;
  --gf-ctrl-btn-border-color-hover-primary: #31363a;
  --gf-ctrl-btn-color-primary: #ffffff;
  --gf-ctrl-btn-color-hover-primary: #ffffff;
  --gf-ctrl-btn-font-weight-primary: 600;
  --gf-ctrl-btn-size-primary: 16px;
  --gf-ctrl-btn-padding-x-primary: 24px;
  --gf-ctrl-btn-padding-y-primary: 14px;
  --gf-ctrl-btn-shadow-primary: none;
  --gf-ctrl-btn-shadow-hover-primary: 0 2px 5px rgba(90, 76, 25, 0.06), 0 16px 34px rgba(90, 76, 25, 0.12);
  --gf-ctrl-border-color-focus: #bc9c21;
  --gf-ctrl-shadow-focus: 0 0 0 3px rgba(188, 156, 33, 0.28);
  --gf-ctrl-padding-x: 14px;
  --gf-ctrl-padding-y: 12px;
  --gf-ctrl-size: 16px;
  --gf-ctrl-label-size-primary: 15px;
  --gf-ctrl-label-weight-primary: 600;
  --gf-color-danger: #a13b2f;
  --gf-form-gap-y: 20px;
  --gf-form-gap-x: 16px;
}
body .gform_wrapper.gform-theme .gform_footer .gform_button.button,
body .gform_wrapper.gform-theme .gform-footer .gform_button.button {
  background: var(--wp--preset--color--theme-5);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: 48px;
  padding: 14px 24px !important;
  box-shadow: none;
  transition: transform var(--oh-dur1) var(--oh-ease), box-shadow var(--oh-dur2) var(--oh-ease), background var(--oh-dur1) var(--oh-ease);
}
body .gform_wrapper.gform-theme .gform_footer .gform_button.button:hover,
body .gform_wrapper.gform-theme .gform-footer .gform_button.button:hover { background: var(--wp--preset--color--charcoal-deep); transform: translateY(-1px); box-shadow: var(--oh-shadow-2); }
body .gform_wrapper.gform-theme .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select) {
  background: var(--wp--preset--color--theme-2);
  border: 1px solid var(--oh-line-strong);
  border-radius: 8px;
  color: var(--wp--preset--color--theme-4);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  box-shadow: none;
}
body .gform_wrapper.gform-theme .gfield :is(input, textarea, select):focus { border-color: var(--wp--preset--color--theme-3); box-shadow: 0 0 0 3px rgba(188, 156, 33, 0.28); outline: none; }
body .gform_wrapper.gform-theme .gfield_label, body .gform_wrapper.gform-theme .gfield_label.gform-field-label { color: var(--wp--preset--color--theme-4); font-size: 15px; font-weight: 600; }
body .gform_wrapper.gform-theme .gfield_description, body .gform_wrapper.gform-theme .gfield_required { font-size: 14.5px; }
body .gform_wrapper.gform-theme .gfield_description { color: var(--wp--preset--color--ink-mute); }
body .gform_wrapper.gform-theme .gfield-choice-input { border-color: var(--oh-line-strong); background: var(--wp--preset--color--theme-2); }
body .gform_wrapper.gform-theme .gfield-choice-input:checked { background-color: var(--wp--preset--color--theme-5); border-color: var(--wp--preset--color--theme-5); }
body .gform_wrapper.gform-theme .gfield-choice-input + label { color: var(--wp--preset--color--theme-4); font-size: 16px; }
body .gform_wrapper.gform-theme .gform_required_legend { color: var(--wp--preset--color--ink-mute); font-size: 14.5px; }
.gform_wrapper .gform_confirmation_message, .gform_confirmation_wrapper .gform_confirmation_message {
  background: var(--wp--preset--color--theme-2);
  border: 1px solid var(--oh-line);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: var(--oh-shadow-1);
}

/* ============ footer (template part "footer", built by _site/build-theme-wp.mjs) ============ */
.oh-footer {
  border-top: 1px solid var(--oh-line);
  padding: 32px var(--oh-gutter) 64px;
  margin-top: 0;
  font-size: 16px;
  color: var(--wp--preset--color--ink-secondary);
}
.oh-footer .oh-footer-in {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.oh-footer b { color: var(--wp--preset--color--theme-4); }
.oh-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wp--preset--color--theme-4);
  text-decoration: underline;
  text-decoration-color: var(--oh-underline);
  text-underline-offset: 3px;
}
.oh-footer a:hover { color: var(--wp--preset--color--gold-deep); text-decoration-color: var(--wp--preset--color--theme-3); }
.oh-footer .oh-caption { font-size: 14.5px; color: var(--wp--preset--color--ink-mute); }
.oh-footer .oh-num { font-variant-numeric: tabular-nums; }
.oh-footer .oh-footer-base {
  max-width: 1200px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--oh-line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: center;
  font-size: 14.5px;
  color: var(--wp--preset--color--ink-mute);
}
.oh-footer .oh-footer-base a { min-height: 44px; }
@media (min-width: 641px) { .oh-footer .oh-footer-in { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .oh-footer .oh-footer-in { grid-template-columns: repeat(4, 1fr); } }

/* ============ layer-one lifts (2026-09-14): hero image, subtitle, lede, call-and-text band ============ */
/* the featured image under the H1 (page and single templates); the block renders nothing without one */
.oh-page-title .wp-block-post-featured-image { margin: 28px 0 0; }
.oh-page-title .wp-block-post-featured-image img { display: block; width: 100%; border-radius: 10px; object-position: 50% 30%; }

/* the first H2 of a ported page is Growth99's headline under the old banner title: a deck, not a second title.
   Not on the contact page (22) or the HTML sitemap (38), where the first heading is a real section heading. */
body:not(.page-id-22, .page-id-38) .wp-block-post-content > h2:first-child {
  font-family: var(--wp--preset--font-family--albert-sans);
  font-size: clamp(19px, 1.2vw + 14px, 22px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--wp--preset--color--ink-secondary);
  margin-top: 0;
}
/* the opening paragraph reads as an opening */
.wp-block-post-content > h2:first-child + p, .wp-block-post-content > p:first-child {
  font-size: 19px;
  line-height: 1.6;
  color: var(--wp--preset--color--theme-4);
}

/* call-and-text band after the content (page and single templates, built by _site/build-theme-wp.mjs) */
.oh-cta-band {
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(40px, 6vw, 72px) var(--oh-gutter);
  background: var(--wp--preset--color--theme-2);
  border-top: 1px solid var(--oh-line);
}
.oh-cta-band .oh-cta-band-in { max-width: 680px; margin: 0 auto; text-align: center; }
.oh-cta-band h2 { margin: 0 0 12px; font-size: clamp(26px, 2vw + 14px, 34px); }
.oh-cta-band p { margin: 0 auto; max-width: 34em; color: var(--wp--preset--color--ink-secondary); }
.oh-cta-band .oh-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.oh-cta-band .oh-cta-actions a { min-width: 200px; font-variant-numeric: tabular-nums; }
.oh-cta-band .oh-btn-outline { background: transparent; color: var(--wp--preset--color--theme-4); border: 1.5px solid var(--oh-line-strong); }
.oh-cta-band .oh-btn-outline:hover { color: var(--wp--preset--color--theme-4); background: var(--wp--preset--color--white); border-color: var(--wp--preset--color--theme-4); box-shadow: none; }
.oh-cta-band .oh-cta-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: 16px;
  color: var(--wp--preset--color--theme-4);
  text-decoration: underline;
  text-decoration-color: var(--oh-underline);
  text-underline-offset: 3px;
}
.oh-cta-band .oh-cta-more:hover { text-decoration-color: var(--wp--preset--color--theme-3); }
body.page-id-22 .oh-cta-band { display: none; }

/* ============ layer two: section patterns (2026-09-14) ============ */
/* The Dysport page's sections (_output/oh-dysport-provo.html) on the theme's tokens, for pages built from
   the oh-site patterns (_site/blocks/sections.mjs). Every rule is scoped to a section class, so pages that
   do not use the patterns are unchanged. Breakpoints are the mockup's: 641px and 1025px. */

/* sections butt against each other: no block gap between them, their own vertical padding */
.wp-block-post-content > :is(.oh-sec, .oh-hero-svc, .oh-book) { margin-top: 0; margin-bottom: 0; }
.wp-block-group.oh-sec { padding-top: clamp(44px, 7vw, 76px); padding-bottom: clamp(44px, 7vw, 76px); padding-left: var(--oh-gutter); padding-right: var(--oh-gutter); }
.oh-sec > :is(h2, .wp-block-heading):first-child { margin-top: 0; }
/* WordPress centres every child narrower than a constrained column (margin auto, !important); the mockup keeps
   short paragraphs and the steps on the column's left edge. --oh-col is the section's contentSize. */
.wp-block-group.oh-sec { --oh-col: 1320px; }
.wp-block-group.oh-sec.oh-sec--narrow { --oh-col: 820px; }
.wp-block-group.oh-sec:not(.oh-band, .oh-rev) > :is(p, .oh-steps) { margin-left: max(0px, calc((100% - var(--oh-col)) / 2)) !important; margin-right: auto !important; }
.oh-sec > h2 + * { margin-top: 20px; }
/* Desktop layouts for the narrow sections (prose, steps, pricing), Cooper 2026-09-15. Centred at 820px they
   stepped 250px in from the wide sections' left edge and floated in empty space; all set heading-left,
   text-right they read as one repeated template. So from 1025px up each measures from the full 1320px column
   and shares its left edge, but the layouts differ, picked per section in the page spec:
   - split (prose and pricing by default): heading left, body right, on the same 0.8 : 1.2 columns and 52px gap
     as .oh-split ("What it treats"). A float, not a grid, so a tall heading cannot stretch paragraph rows.
   - .oh-sec--columns (prose): heading on top, each paragraph its own column (two or three), hairline tops.
   - .oh-sec--lead (prose): heading on top, the first paragraph as a large serif lead, the rest below it.
   - steps: a horizontal timeline, numbers on a rail across the top.
   - .oh-sec--center (pricing): heading and card centred.
   Line length stays readable in each. The review moment stays centred. Below 1025px everything stacks as before. */
.oh-sec--lead > h2 + p { font-family: var(--wp--preset--font-family--newsreader); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.34; letter-spacing: -0.01em; color: var(--wp--preset--color--theme-4); }
.wp-block-post-content .oh-sec--lead > h2 + p { color: var(--wp--preset--color--theme-4); }
.oh-sec--lead > h2 + p + p { margin-top: 20px; }
@media (min-width: 1025px) {
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev) {
    --oh-split-w: min(100%, 1320px);
    --oh-split-l: calc((100% - var(--oh-split-w)) / 2);
  }
  /* split */
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) { display: flow-root; }
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) > h2 {
    float: left;
    width: calc((var(--oh-split-w) - 52px) * 0.4);
    max-width: none;
    margin: 0 0 0 var(--oh-split-l) !important;
  }
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) > :not(h2, .oh-split-action) {
    margin-left: calc(var(--oh-split-l) + (var(--oh-split-w) - 52px) * 0.4 + 52px) !important;
    margin-right: var(--oh-split-l) !important;
  }
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) > h2 + * { margin-top: 0; }
  /* a button under the heading stays in the heading's column (prose({ action }), Cooper 2026-09-16) */
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) > h2 + .oh-split-action {
    float: left;
    clear: left;
    width: calc((var(--oh-split-w) - 52px) * 0.4);
    margin: 28px 0 0 var(--oh-split-l) !important;
  }
  .wp-block-group.oh-sec.oh-sec--narrow:not(.oh-rev, .oh-sec--columns, .oh-sec--lead, .oh-sec--center):not(:has(> .oh-steps)) > .oh-split-action + * { margin-top: 0; }

  /* columns: a grid on the section, outer tracks as the margins; the gap is padding on columns two and three,
     so the first column starts on the shared edge */
  .wp-block-group.oh-sec.oh-sec--columns {
    --oh-n: 2;
    --oh-c: calc((var(--oh-split-w) - (var(--oh-n) - 1) * 52px) / var(--oh-n));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--oh-c)) minmax(0, calc(var(--oh-c) + 52px)) minmax(0, 1fr);
    align-items: start;
  }
  .wp-block-group.oh-sec.oh-sec--columns:has(> p:nth-of-type(3)) {
    --oh-n: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--oh-c)) minmax(0, calc(var(--oh-c) + 52px)) minmax(0, calc(var(--oh-c) + 52px)) minmax(0, 1fr);
  }
  /* four classes, so these outrank the column-edge rule for > :is(p, .oh-steps) above (also four, earlier) */
  .wp-block-group.oh-sec.oh-sec--narrow.oh-sec--columns > * { grid-row: 2; margin: 0 !important; max-width: none; }
  .wp-block-group.oh-sec.oh-sec--narrow.oh-sec--columns > h2 { grid-row: 1; grid-column: 2 / -2; margin-bottom: 32px !important; }
  .wp-block-group.oh-sec.oh-sec--columns > p { padding-top: 22px; background: linear-gradient(var(--oh-line-strong), var(--oh-line-strong)) no-repeat right top / calc(100% - 52px) 1px; }
  .wp-block-group.oh-sec.oh-sec--columns > p:nth-of-type(1) { grid-column: 2; background-size: 100% 1px; }
  .wp-block-group.oh-sec.oh-sec--columns > p:nth-of-type(2) { grid-column: 3; padding-left: 52px; }
  .wp-block-group.oh-sec.oh-sec--columns > p:nth-of-type(3) { grid-column: 4; padding-left: 52px; }

  /* lead */
  .wp-block-group.oh-sec.oh-sec--narrow.oh-sec--lead > * { margin-left: var(--oh-split-l) !important; margin-right: var(--oh-split-l) !important; }
  .wp-block-group.oh-sec.oh-sec--lead > h2 { max-width: none; }
  .wp-block-group.oh-sec.oh-sec--lead > h2 + p { max-width: 900px; margin-top: 24px; }
  .wp-block-group.oh-sec.oh-sec--lead > h2 + p + p { max-width: 65ch; margin-top: 24px; }

  /* steps: horizontal timeline; the rail runs from the first number's centre to the last's */
  .wp-block-group.oh-sec.oh-sec--narrow:has(> .oh-steps) > * { margin-left: var(--oh-split-l) !important; margin-right: var(--oh-split-l) !important; max-width: none; }
  .oh-sec--narrow > .oh-steps {
    --oh-sn: 3;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 40px;
    padding-left: 0;
    margin-top: 40px;
  }
  .oh-sec--narrow > .oh-steps:has(> .oh-step:nth-child(4)) { --oh-sn: 4; }
  .oh-sec--narrow > .oh-steps:has(> .oh-step:nth-child(5)) { --oh-sn: 5; }
  .oh-sec--narrow > .oh-steps::before, .oh-sec--narrow > .oh-steps::after {
    left: 20px;
    right: calc((100% - (var(--oh-sn) - 1) * 40px) / var(--oh-sn) - 20px);
    top: 19px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .oh-sec--narrow > .oh-steps::after { transform-origin: left; }
  .oh-sec--narrow > .oh-steps.oh-anim::after { transform: scaleX(0); }
  .oh-sec--narrow > .oh-steps.oh-anim.oh-draw::after { transform: scaleX(1); }
  .oh-sec--narrow > .oh-steps > .oh-step { padding: 60px 0 0; }
  .oh-sec--narrow > .oh-steps .oh-step::before { left: 0; top: 0; }

  /* center */
  .wp-block-group.oh-sec.oh-sec--center { text-align: center; }
  .wp-block-group.oh-sec.oh-sec--center > * { margin-left: auto !important; margin-right: auto !important; }
  .wp-block-group.oh-sec.oh-sec--center > .oh-card { max-width: 760px; margin-top: 28px; }
  .wp-block-group.oh-sec.oh-sec--center .wp-block-buttons { justify-content: center; }
}
:is(.oh-sec, .oh-hero-svc) :is(.oh-split, .oh-results, .oh-tiles, .oh-paths, .oh-ledger, .oh-team, .oh-profile) > * { margin-top: 0; margin-bottom: 0; }
.oh-lede { font-size: 18.5px; line-height: 1.6; color: var(--wp--preset--color--ink-secondary); max-width: 60ch; }
/* the deck under a statement heading: a little larger than body, regular, muted, so the title owns the weight (Cooper 2026-09-16, option A) */
.oh-answer { font-size: 20px; line-height: 1.55; font-weight: 400; color: var(--wp--preset--color--ink-secondary); max-width: 58ch; }
.wp-block-post-content p.oh-answer { color: var(--wp--preset--color--ink-secondary); }
.oh-sec .oh-caption { font-size: 16px; color: var(--wp--preset--color--ink-mute); }
.wp-block-post-content p.oh-caption { color: var(--wp--preset--color--ink-mute); }
/* question sections (.oh-sec--q, set by oh-site.php section 9 when the section heading ends with a question mark): the direct
   answer under the heading is set in italic Newsreader, "so the italic answers the question" (Cooper 2026-09-16). The one place
   italic is allowed (brand guide). The answer is the treats or compare answer line, the first paragraph of a split or lead prose
   section, or the pricing card's paragraph; columns and steps carry no single answer and are left alone. */
.oh-sec--q .oh-answer, .wp-block-post-content .oh-sec--q p.oh-answer,
.oh-sec--q.oh-prose:not(.oh-sec--columns) > h2 + p,
.oh-sec--q > .oh-card > p:first-child { font-family: var(--wp--preset--font-family--newsreader); font-style: italic; font-weight: 400; font-size: clamp(21px, 1.1vw + 16px, 24px); line-height: 1.4; letter-spacing: -0.005em; color: var(--wp--preset--color--ink-secondary); }
.oh-sec--q.oh-prose.oh-sec--lead > h2 + p, .wp-block-post-content .oh-sec--q.oh-prose.oh-sec--lead > h2 + p { font-size: clamp(22px, 2vw, 27px); line-height: 1.38; color: var(--wp--preset--color--ink-secondary); }

/* hero: copy beside the featured image, the four-fact ledger under both */
.wp-block-group.oh-hero-svc { padding: 22px var(--oh-gutter) 12px; }
.oh-hero-grid { display: grid; gap: 20px; }
.oh-hero-grid > * { margin: 0; }
.oh-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.oh-hero-copy > * { margin: 0; }
.oh-hero-copy h1 { margin: 0; }
.oh-hero-copy .oh-lede { max-width: 44ch; margin-top: 16px; }
.oh-hero-copy .wp-block-buttons { margin-top: 16px; align-self: stretch; gap: 12px; }
.oh-hero-copy .wp-block-buttons .wp-block-button { flex: 1 1 auto; }
.oh-hero-copy .wp-block-buttons .wp-block-button__link { width: 100%; }
.oh-proof, .oh-rating { font-size: 15px; color: var(--wp--preset--color--ink-secondary); font-variant-numeric: tabular-nums; }
.oh-proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; background: var(--wp--preset--color--theme-2); border-radius: 8px; box-shadow: var(--oh-shadow-1); }
.oh-proof::before, .oh-rating::before { content: "\2605\2605\2605\2605\2605"; color: var(--wp--preset--color--theme-3); letter-spacing: 2px; }
.wp-block-post-content p.oh-proof, .wp-block-post-content p.oh-rating { color: var(--wp--preset--color--ink-secondary); }
.oh-hero-photo { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--oh-line); box-shadow: var(--oh-shadow-1); background: var(--wp--preset--color--surface-soft); aspect-ratio: 4 / 3; }
.oh-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 0 !important; filter: saturate(0.94); }
.oh-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(188, 156, 33, 0.06), rgba(39, 43, 45, 0.14) 94%); pointer-events: none; }
.oh-ledger { display: grid; margin-top: 32px; border-top: 1px solid var(--oh-line-strong); border-bottom: 1px solid var(--oh-line-strong); }
.oh-ledger-item { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--oh-line); }
.oh-ledger-item:first-child { border-top: 0; }
.oh-ledger-item > * { margin: 0; }
.wp-block-post-content .oh-ledger-term { font-family: var(--wp--preset--font-family--newsreader); font-size: 16px; color: var(--wp--preset--color--ink-mute); }
.wp-block-post-content .oh-ledger-value { font-size: 16px; color: var(--wp--preset--color--theme-4); }

/* what it treats: answer beside a hairline list */
.oh-split { display: grid; gap: 32px; }
.oh-split-copy > * { margin-top: 0; }
.oh-split-copy > * + * { margin-top: 20px; }
.oh-split-copy > .oh-caption { margin-top: 14px; }
.wp-block-post-content ul.is-style-oh-hairline { list-style: none; padding-left: 0; margin: 0; align-self: start; }
.wp-block-post-content .is-style-oh-hairline li { position: relative; margin: 0; padding: 18px 0 18px 30px; border-top: 1px solid var(--oh-line-strong); font-size: 16px; color: var(--wp--preset--color--ink-secondary); }
.wp-block-post-content .is-style-oh-hairline li:last-child { border-bottom: 1px solid var(--oh-line-strong); }
.wp-block-post-content .is-style-oh-hairline li::before { content: "\25C6"; position: absolute; left: 2px; top: 22px; font-size: 13px; color: var(--wp--preset--color--gold-deep); }
.is-style-oh-hairline li strong { display: block; font-family: var(--wp--preset--font-family--newsreader); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--wp--preset--color--theme-4); }

/* before and afters: side by side without the script, a slider with it */
.oh-results { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 32px; margin-top: 32px; } /* centred, even gap (Cooper 2026-09-14) */
.oh-results > .oh-result { flex: 0 1 auto; max-width: 100%; }
.oh-result { background: var(--wp--preset--color--theme-2); border-radius: 12px; box-shadow: var(--oh-shadow-1); overflow: hidden; }
.oh-result > * { margin: 0; }
.oh-ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.oh-ba > figure { margin: 0; position: relative; }
.oh-ba img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0 !important; }
.oh-ba figcaption { position: absolute; top: 8px; left: 8px; margin: 0; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.32); }
.oh-ba > figure + figure figcaption { left: auto; right: 8px; color: var(--wp--preset--color--theme-4); background: rgba(250, 248, 245, 0.85); }
/* every pair at one height (--oh-ba-h), width from the photo's own shape (--oh-r, set by oh-site.js), never wider than the column.
   Cooper 2026-09-14: the full-width 3:2 frames were too big and cropped the tall side view. */
.oh-ba.is-slider { --oh-ba-h: 400px; display: block; width: calc(var(--oh-ba-h) * var(--oh-r, 1.5)); max-width: 100%; aspect-ratio: 3 / 2; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.oh-ba.is-slider > figure { position: absolute; inset: 0; }
.oh-ba.is-slider img { aspect-ratio: auto; }
.oh-ba.is-slider:focus-visible { outline: 2px solid var(--wp--preset--color--theme-3); outline-offset: -2px; }
.oh-ba-div { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); transform: translateX(-1px); pointer-events: none; }
.oh-ba-handle { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: var(--oh-shadow-2); color: var(--wp--preset--color--theme-5); font-size: 14px; }
.wp-block-post-content .oh-result-label { padding: 12px 16px 16px; }
.oh-result-label strong { font-family: var(--wp--preset--font-family--newsreader); font-weight: 500; font-size: 17px; color: var(--wp--preset--color--theme-4); }

/* statement band */
.wp-block-group.oh-band { background: linear-gradient(160deg, rgba(199, 179, 162, 0.34), rgba(188, 156, 33, 0.12)); text-align: center; }
.oh-band .oh-statement { font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; }
.oh-band > p { max-width: 72ch; margin-left: auto !important; margin-right: auto !important; margin-top: 24px; }

/* comparison table: our row first and tinted */
.wp-block-table.is-style-oh-compare { margin: 32px -14px 0; overflow-x: auto; }
.wp-block-table.is-style-oh-compare table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.wp-block-table.is-style-oh-compare :is(thead, tbody, tfoot) { border: 0; }
.wp-block-table.is-style-oh-compare :is(th, td) { border: 0; border-bottom: 1px solid var(--oh-line); padding: 18px 28px 18px 14px; text-align: left; vertical-align: top; color: var(--wp--preset--color--ink-secondary); }
/* column headings: dark, bold, over a gold rule (Cooper, 2026-09-15: they did not stand out in muted 14.5px) */
.wp-block-table.is-style-oh-compare thead th { font-size: 16px; font-weight: 600; color: var(--wp--preset--color--theme-4); padding-top: 0; padding-bottom: 14px; border-bottom: 2px solid var(--wp--preset--color--theme-3); }
.wp-block-table.is-style-oh-compare tbody th { font-family: var(--wp--preset--font-family--newsreader); font-weight: 500; font-size: 19px; white-space: nowrap; color: var(--wp--preset--color--theme-4); }
.wp-block-table.is-style-oh-compare tbody th em { display: block; margin-top: 3px; font-family: var(--wp--preset--font-family--albert-sans); font-style: normal; font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--wp--preset--color--ink-mute); }
.wp-block-table.is-style-oh-compare tbody tr:first-child > * { background: var(--wp--preset--color--gold-soft); }
.wp-block-table.is-style-oh-compare tbody tr:first-child > :first-child { border-radius: 8px 0 0 8px; }
.wp-block-table.is-style-oh-compare tbody tr:first-child > :last-child { border-radius: 0 8px 8px 0; }
/* every row is the practice's own (a menu, not a comparison with others): no row tinted as the pick */
.wp-block-table.is-style-oh-compare.oh-compare--even tbody tr:first-child > * { background: none; border-radius: 0; }
.wp-block-table.is-style-oh-compare tbody tr:last-child > * { border-bottom: 0; }
.oh-sec .wp-block-table.is-style-oh-compare + p { margin-top: 24px; }
/* phones: one card per row, each value labelled with its column heading (oh-site.js adds the labels and
   .is-stacked). A 560px table in a 350px scroller hid its last column with no cue, and scrolling to it
   lost the row names (chemical peels /review-page, 2026-09-15, plugin 2.1.7). Without the script it scrolls. */
@media (max-width: 640px) {
  .wp-block-table.is-style-oh-compare.is-stacked { overflow-x: visible; }
  .wp-block-table.is-style-oh-compare.is-stacked table { min-width: 0; }
  .wp-block-table.is-style-oh-compare.is-stacked :is(table, tbody, tr, th, td) { display: block; }
  .wp-block-table.is-style-oh-compare.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wp-block-table.is-style-oh-compare.is-stacked tbody tr { padding: 18px 14px; border-bottom: 1px solid var(--oh-line); }
  .wp-block-table.is-style-oh-compare.is-stacked tbody tr:last-child { border-bottom: 0; }
  .wp-block-table.is-style-oh-compare.is-stacked tbody :is(th, td) { padding: 0; border: 0; white-space: normal; background: none; border-radius: 0; }
  .wp-block-table.is-style-oh-compare.is-stacked tbody td { margin-top: 6px; }
  .wp-block-table.is-style-oh-compare.is-stacked tbody td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--wp--preset--color--theme-4); }
  .wp-block-table.is-style-oh-compare.is-stacked tbody tr:first-child { background: var(--wp--preset--color--gold-soft); border-radius: 8px; }
  .wp-block-table.is-style-oh-compare.is-stacked.oh-compare--even tbody tr:first-child { background: none; border-radius: 0; }
}

/* review moment */
.oh-rev { text-align: center; }
.wp-block-quote.is-style-oh-review { border: 0; padding: 0; margin: 24px auto 0; background: none; }
.wp-block-quote.is-style-oh-review p { max-width: 38ch; margin-left: auto; margin-right: auto; font-family: var(--wp--preset--font-family--newsreader); font-weight: 400; font-size: clamp(23px, 4.4vw, 36px); line-height: 1.3; letter-spacing: -0.01em; color: var(--wp--preset--color--theme-4); text-wrap: balance; }
.wp-block-quote.is-style-oh-review p::before { content: "\201C"; color: var(--wp--preset--color--theme-3); }
.wp-block-quote.is-style-oh-review p::after { content: "\201D"; color: var(--wp--preset--color--theme-3); }
.wp-block-quote.is-style-oh-review cite { display: block; margin-top: 16px; font-size: 15px; font-style: normal; color: var(--wp--preset--color--ink-mute); }
.wp-block-quote.is-style-oh-review cite strong { color: var(--wp--preset--color--theme-4); }
.oh-rev .oh-rating { margin-top: 24px; }

/* steps: CSS counters for the numbers; the rail is drawn unless the script is animating it */
.oh-steps { position: relative; counter-reset: oh-step; padding-left: 60px; max-width: 640px; margin-top: 32px; }
.oh-steps::before, .oh-steps::after { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; }
.oh-steps::before { background: var(--oh-line-strong); }
.oh-steps::after { background: var(--wp--preset--color--theme-3); transform-origin: top; transition: transform 1.15s var(--oh-ease); }
.oh-steps.oh-anim::after { transform: scaleY(0); }
.oh-steps.oh-anim.oh-draw::after { transform: scaleY(1); }
.oh-steps > .oh-step { position: relative; counter-increment: oh-step; margin: 0; padding: 16px 0; }
/* the bubble is an outline: surface fill, gold ring, ink numeral (Cooper's pick C of four on the live
   sections, 2026-09-18; before, a gold-deep fill with a white numeral). The reveal is the ring going from
   hairline to gold and the numeral from muted to ink. */
.oh-step::before { content: counter(oh-step); position: absolute; left: -60px; top: 14px; z-index: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--wp--preset--font-family--newsreader); font-size: 19px; color: var(--wp--preset--color--theme-4); background: var(--wp--preset--color--theme-2); border: 2px solid var(--wp--preset--color--theme-3); transition: color 420ms var(--oh-ease), border-color 420ms var(--oh-ease), background 420ms var(--oh-ease); }
.oh-steps.oh-anim .oh-step::before { color: var(--wp--preset--color--ink-mute); background: var(--wp--preset--color--theme-2); border-color: var(--oh-line-strong); }
.oh-steps.oh-anim.oh-draw .oh-step::before { color: var(--wp--preset--color--theme-4); background: var(--wp--preset--color--theme-2); border-color: var(--wp--preset--color--theme-3); }
.oh-steps.oh-draw .oh-step:nth-child(2)::before { transition-delay: 0.5s; }
.oh-steps.oh-draw .oh-step:nth-child(3)::before { transition-delay: 0.85s; }
.oh-steps.oh-draw .oh-step:nth-child(4)::before { transition-delay: 1.1s; }
.oh-step > * { margin: 0; }
.wp-block-post-content .oh-step h3 { margin: 0; font-family: var(--wp--preset--font-family--albert-sans); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.wp-block-post-content .oh-step p { margin-top: 4px; font-size: 16px; }

/* pricing card */
.oh-card { margin-top: 24px; padding: clamp(24px, 4vw, 32px); background: var(--wp--preset--color--theme-2); border: 1px solid var(--oh-line); border-radius: 16px; box-shadow: var(--oh-shadow-1); }
.oh-card > * { margin: 0; }
.oh-card > * + * { margin-top: 16px; }

/* FAQ section: the Rank Math block as an accordion once the script runs */
.oh-faq :is(.wp-block-rank-math-faq-block, .rank-math-block) { margin-top: 36px; }
/* "Frequently Asked Questions" on one line at every phone width (Cooper 2026-09-16): 11.3px of width per font px, measured, inside the gutters */
.oh-faq > h2, h2.oh-faq-title { font-size: min(var(--wp--preset--font-size--x-large), calc((100vw - 44px) / 11.3)); text-wrap: wrap; }
.oh-faq .rank-math-block .rank-math-answer { max-width: 80ch; }
.oh-faq .is-accordion :is(.rank-math-faq-item, .rank-math-list-item) { padding: 0; }
.oh-faq .is-accordion .rank-math-question { margin: 0; }
.oh-faq-toggle { all: unset; box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; padding: 24px 0; cursor: pointer; font: inherit; color: inherit; text-wrap: wrap; }
.oh-faq-toggle::after { content: "+"; flex: none; font-family: var(--wp--preset--font-family--albert-sans); font-weight: 400; font-size: 22px; line-height: 1; color: var(--wp--preset--color--gold-deep); transition: transform var(--oh-dur2) var(--oh-ease); }
.oh-faq-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.oh-faq-toggle:hover { color: var(--wp--preset--color--gold-press); }
.oh-faq-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--theme-3); outline-offset: 2px; }
.oh-faq .is-accordion .rank-math-answer { padding: 0 0 24px; }

/* tiles and the hub grid: the title's link covers the card */
.oh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.oh-grid-heading { margin-top: 40px; }
.oh-sec > .oh-grid-heading + .oh-tiles { margin-top: 16px; }
.oh-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--theme-2); border-radius: 12px; box-shadow: var(--oh-shadow-1); transition: transform var(--oh-dur2) var(--oh-ease), box-shadow var(--oh-dur2) var(--oh-ease); }
.oh-tile:hover { transform: translateY(-3px); box-shadow: var(--oh-shadow-2); }
.oh-tile > * { margin: 0; }
.oh-tile .wp-block-image { overflow: hidden; background: linear-gradient(150deg, rgba(199, 179, 162, 0.5), rgba(199, 179, 162, 0.24) 60%, rgba(188, 156, 33, 0.14)); aspect-ratio: 16 / 10; }
.oh-tile .wp-block-image img { display: block; width: 100%; height: 100%; border-radius: 0 !important; transition: transform 420ms var(--oh-ease); }
.oh-tile:hover .wp-block-image img { transform: scale(1.06); }
.wp-block-post-content .oh-tile-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 16px 16px; font-family: var(--wp--preset--font-family--newsreader); font-weight: 500; font-size: 17px; line-height: 1.3; }
.oh-tile-title::after { content: "\2192"; flex: none; font-family: var(--wp--preset--font-family--albert-sans); font-weight: 700; color: var(--wp--preset--color--gold-press); transition: transform var(--oh-dur2) var(--oh-ease); }
.oh-tile:hover .oh-tile-title::after { transform: translateX(4px); }
.wp-block-post-content .oh-tile-title a { color: var(--wp--preset--color--theme-4); text-decoration: none; }
.oh-tile-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.oh-tile:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--theme-1), 0 0 0 5px var(--wp--preset--color--theme-3); }

/* booking paths (hubs) */
.oh-paths { display: grid; gap: 16px; margin-top: 32px; }
.oh-path { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 28px); background: var(--wp--preset--color--theme-2); border: 1px solid var(--oh-line); border-radius: 16px; box-shadow: var(--oh-shadow-1); }
.oh-path > * { margin: 0; }
.oh-path > * + * { margin-top: 12px; }
.wp-block-post-content .oh-path h3 { margin: 0; }
.oh-path > .wp-block-buttons { margin-top: auto; padding-top: 16px; }

/* team grid and profile (Meet the Team, 2026-09-21): portrait cards, each bio in a core Details block that
   starts closed (the text is in the page; the practice edits it in the editor). The portrait is a 4:5 frame
   over a 2:3 original, cropped from the top so the face keeps its headroom. */
.oh-team { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
.oh-person { display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--theme-2); border: 1px solid var(--oh-line); border-radius: 16px; box-shadow: var(--oh-shadow-1); }
.oh-person > * { margin: 0; }
.oh-portrait { margin: 0; overflow: hidden; background: linear-gradient(150deg, rgba(199, 179, 162, 0.5), rgba(199, 179, 162, 0.24) 60%, rgba(188, 156, 33, 0.1)); }
.oh-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 0 !important; }
.wp-block-post-content .oh-person-name { margin: 0; padding: 18px 20px 0; font-size: 22px; line-height: 1.2; }
.wp-block-post-content .oh-person-role { padding: 5px 20px 0; font-size: 15px; color: var(--wp--preset--color--ink-secondary); }
.wp-block-post-content .oh-person-focus { padding: 12px 20px 0; font-size: 16px; line-height: 1.5; }
.oh-person > .oh-person-focus:last-child, .oh-person > .oh-person-role:last-child, .oh-person > .oh-person-name:last-child { padding-bottom: 20px; }
.oh-person-bio { margin: auto 0 0; padding: 16px 20px 18px; }
.oh-person-bio > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--oh-line-strong); font-family: var(--wp--preset--font-family--albert-sans); font-size: 15px; font-weight: 600; color: var(--wp--preset--color--theme-4); }
.oh-person-bio > summary::-webkit-details-marker { display: none; }
.oh-person-bio > summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--wp--preset--color--theme-3); transition: transform var(--oh-dur2) var(--oh-ease); }
.oh-person-bio[open] > summary::after { transform: rotate(45deg); }
.oh-person-bio > summary:hover { color: var(--wp--preset--color--gold-press); }
.wp-block-post-content .oh-person-bio > p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; }
.wp-block-post-content .oh-person-bio > summary + p { margin-top: 14px; }
.oh-team--compact { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.oh-team--compact .oh-person-name { font-size: 19px; padding: 14px 16px 16px; }
/* profile: portrait beside the copy */
.oh-profile { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
.oh-profile > * { margin: 0; }
.oh-profile > .oh-portrait { border-radius: 16px; border: 1px solid var(--oh-line); box-shadow: var(--oh-shadow-1); }
.oh-profile-copy > * { margin-top: 0; }
.oh-profile-copy > * + * { margin-top: 14px; }
.oh-profile-copy > p { max-width: 62ch; }
.wp-block-post-content .oh-profile-copy .oh-person-name { padding: 0; font-size: 26px; }
.wp-block-post-content .oh-profile-copy .oh-person-role { padding: 0; margin-top: 4px; }
.oh-profile-copy > .oh-person-role + p { margin-top: 18px; }
.oh-profile-copy > .wp-block-buttons { margin-top: 22px; }
/* contact form (the contact page, 2026-09-21): the form in a card beside the copy, on the split grid */
.oh-form-card { margin: 0; padding: clamp(20px, 4vw, 32px); background: var(--wp--preset--color--theme-2); border: 1px solid var(--oh-line); border-radius: 16px; box-shadow: var(--oh-shadow-1); }
.oh-form-card .gform_wrapper { margin: 0; }
.oh-form-card .gform_wrapper .gform_footer { margin-top: 8px; padding-bottom: 0; }
.oh-split-copy > .oh-form-card { margin-top: 24px; }
/* location: the address and hours on a charcoal panel over an embedded map, one rounded unit (Cooper's reference, 2026-09-21) */
.oh-location { margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--oh-line); box-shadow: var(--oh-shadow-1); background: var(--wp--preset--color--theme-2); align-self: start; }
.oh-location > * { margin: 0; }
.oh-location-card { padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px) 26px; background: var(--wp--preset--color--theme-5); }
.oh-location-card > * { margin: 0; }
.wp-block-post-content .oh-location-card h3 { margin: 0 0 10px; color: #fff; font-size: 26px; }
.wp-block-post-content .oh-location-card p { color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.55; }
.wp-block-post-content .oh-location-card p.oh-location-label { margin-top: 16px; font-family: var(--wp--preset--font-family--newsreader); font-size: 15px; color: rgba(255, 255, 255, 0.62); }
.wp-block-post-content .oh-location-card p.oh-location-hours { color: #fff; }
.wp-block-post-content .oh-location-card p.oh-location-link { margin-top: 18px; font-size: 15px; font-weight: 600; }
.oh-location-card a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }
.oh-location-card a:hover { color: var(--wp--preset--color--gold-soft); }
.oh-location-map { aspect-ratio: 4 / 3; background: var(--wp--preset--color--sand); }
.oh-location-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* prose section */
.oh-prose > p { max-width: 65ch; }
.oh-sec > h2 + .oh-split-action { margin-top: 20px; margin-bottom: 24px; }
/* full width on phones, like the hero's buttons */
@media (max-width: 640px) { .oh-split-action .wp-block-button { flex: 1 1 auto; } .oh-split-action .wp-block-button__link { width: 100%; } }

/* book band: the page's close, full width */
.wp-block-group.oh-book { padding: clamp(56px, 8vw, 76px) var(--oh-gutter); text-align: center; background: linear-gradient(150deg, rgba(199, 179, 162, 0.42), rgba(188, 156, 33, 0.16)); border-top: 1px solid var(--oh-line); }
.oh-book::before { content: ""; display: block; width: 52px; height: 30px; margin: 0 auto 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='30' viewBox='0 0 52 30' fill='none'%3E%3Cpath d='M26 28V4M26 28C20 22 14 18 8 14M26 28c6-6 12-10 18-14M26 28C23 20 20 13 14 6M26 28c3-8 6-15 12-22' stroke='%23bc9c21' stroke-width='1.4' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") no-repeat center; }
.oh-book > h2 { margin: 0; }
.oh-book > p { max-width: 50ch; margin: 16px auto 0 !important; color: var(--wp--preset--color--ink-secondary); }
.oh-book > .wp-block-buttons { margin-top: 20px; gap: 12px; }
.oh-book .wp-block-button__link { min-width: 200px; font-variant-numeric: tabular-nums; }

/* outline buttons in the sections: the mockup's ghost button */
:is(.oh-sec, .oh-hero-svc, .oh-book) .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--theme-4); border: 1.5px solid var(--oh-line-strong); }

/* sticky bar (built by oh-site.js from the book band), below the desktop breakpoint */
.oh-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 1px; background: var(--oh-line-strong); border-top: 1px solid var(--oh-line-strong); box-shadow: 0 -6px 18px rgba(90, 76, 25, 0.13); }
.oh-stickybar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 54px; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.oh-stickybar .oh-sb-secondary { background: var(--wp--preset--color--theme-2); color: var(--wp--preset--color--theme-4); }
.oh-stickybar .oh-sb-primary { background: var(--wp--preset--color--theme-5); color: #fff; }
@media (max-width: 1024px) { body.has-oh-stickybar .oh-footer { padding-bottom: calc(54px + 32px); } }
/* the open menu drawer sits in the sticky header's stacking context (z-index 50), so the bar painted over
   its last rows; the drawer is for navigating, so the bar steps aside while it is open (/review-page, 2026-09-15) */
body:has(.oh-header .wp-block-navigation__responsive-container.is-menu-open) .oh-stickybar { display: none; }
/* phone and text numbers inside sentences measured 20px tall at 390, under the 24px floor; the book band's
   sentence was missed until the chemical peels review (2.1.7) */
:is(.oh-sec :is(p, li), .oh-book > p) a:is([href^="tel:"], [href^="sms:"]) { display: inline-block; padding-block: 2px; }
/* Content links inside running text (2.3.9, 2026-09-22): the anchor stays inline so a long link still wraps, and vertical
   padding on an inline box extends its hit area without touching the line box, so the tap box is about 32px tall, the
   same as the numbers above. Found by the mobile reviewer on the specials drafts (19px glyph-height links). */
:is(.oh-sec :is(p, li), .oh-book > p) a:not([href^="tel:"], [href^="sms:"], .wp-block-button__link) { padding-block: 0.4em; }

@media (min-width: 641px) {
  .wp-block-group.oh-hero-svc { padding-top: 36px; padding-bottom: 20px; }
  .oh-hero-grid { gap: 32px; }
  .oh-hero-copy .wp-block-buttons .wp-block-button { flex: 0 1 auto; }
  .oh-hero-copy .wp-block-buttons .wp-block-button__link { width: auto; }
  .oh-hero-copy .wp-block-buttons, .oh-hero-copy .oh-proof { margin-top: 24px; }
  .oh-ba.is-slider { --oh-ba-h: 290px; }
  .oh-tiles { grid-template-columns: repeat(4, 1fr); }
  .oh-paths { grid-template-columns: 1fr 1fr; }
  .oh-team { grid-template-columns: repeat(2, 1fr); }
  .oh-team--compact { grid-template-columns: repeat(3, 1fr); }
  .oh-profile { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
  .oh-profile-sec--flip .oh-profile { grid-template-columns: minmax(0, 1fr) 300px; }
  .oh-profile-sec--flip .oh-profile > .oh-portrait { order: 2; }
}
@media (min-width: 1025px) {
  .oh-hero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
  .oh-hero-photo { aspect-ratio: 1 / 1; margin-top: 30px; }
  .oh-ledger { grid-template-columns: 1.7fr 1fr 1fr 1fr; margin-top: 48px; }
  .oh-ledger-item { display: block; padding: 22px 24px 22px 0; border-top: 0; }
  .oh-ledger-item + .oh-ledger-item { border-left: 1px solid var(--oh-line); padding-left: 24px; }
  .wp-block-post-content .oh-ledger-term { font-size: 15.5px; }
  .wp-block-post-content .oh-ledger-value { margin-top: 6px; font-size: 18px; }
  .oh-split { grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: start; }
  .oh-stickybar { display: none; }
  .oh-team { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .oh-team--compact { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .oh-profile { grid-template-columns: 400px minmax(0, 1fr); gap: 56px; }
  .oh-profile-sec--flip .oh-profile { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ============ motion ============ */
/* Scroll motion (plugin 2.2.0, 2026-09-16), the homepage's since session 32: content rises 40px (26px on
   phones) over .9s on the SM and MAKLV curve as it arrives, items that arrive together go in reading order
   90ms apart, tile photos settle from 1.08, and the hero photo settles, then drifts inside its frame from
   641px up. The hidden state and the reveal transition are printed by oh-site.php from its selector list
   (oh_site_reveal_selectors), the same list oh-site.js reveals, and apply only under html.oh-motion.
   Tuning: --oh-rv-y (travel), --oh-rv-dur (speed), and the order step in oh-site.js. */
:root { --oh-ease-lux: cubic-bezier(0.16, 1, 0.3, 1); --oh-rv-y: 40px; --oh-rv-dur: 0.9s; }
@media (max-width: 640px) { :root { --oh-rv-y: 26px; } }
/* a tile keeps its own short, undelayed hover lift beside the reveal */
.oh-motion .oh-tiles > .oh-tile { transition: opacity var(--oh-rv-dur) var(--oh-ease-lux) var(--oh-rv-delay, 0s), translate var(--oh-rv-dur) var(--oh-ease-lux) var(--oh-rv-delay, 0s), transform var(--oh-dur2) var(--oh-ease), box-shadow var(--oh-dur2) var(--oh-ease); }
.oh-motion .oh-tiles > .oh-tile .wp-block-image img { scale: 1.08; transition: scale 1.6s var(--oh-ease-lux) var(--oh-rv-delay, 0s), transform 420ms var(--oh-ease); }
.oh-motion .oh-tiles > .oh-tile.oh-in .wp-block-image img { scale: 1; }
/* hero photos (the service hero's and a ported page's featured image): never faded, since each is its
   page's largest paint; they settle from a slight zoom once the script starts (html.oh-play). From 641px
   up they rest at 1.12 so the script can drift them 5% either way inside the frame without an edge showing. */
.oh-hero-photo, .oh-page-title .wp-block-post-featured-image { isolation: isolate; }
.oh-page-title .wp-block-post-featured-image { overflow: hidden; border-radius: 10px; }
.oh-motion :is(.oh-hero-photo, .oh-page-title .wp-block-post-featured-image) img { scale: 1.07; transition: scale 2.4s var(--oh-ease-lux); }
.oh-motion.oh-play :is(.oh-hero-photo, .oh-page-title .wp-block-post-featured-image) img { scale: 1; }
@media (min-width: 641px) {
  .oh-motion :is(.oh-hero-photo, .oh-page-title .wp-block-post-featured-image) img { scale: 1.2; }
  .oh-motion.oh-play :is(.oh-hero-photo, .oh-page-title .wp-block-post-featured-image) img { scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Mega-menu columns must not resize when hovered (2.4.4).
   Each column of the desktop mega menu is itself a navigation submenu, and core gives an OPEN
   submenu min-width:200px. The columns sit in a centred row at their content width (measured
   2026-09-23: 150px to 193px), so hovering one widened it to 200px and shoved every other column
   sideways -- the columns appeared to jump about as the pointer moved over the menu, on every
   hover, in both menus. Nothing to do with the sheet opening or the hover bridge above; it fires
   whenever the pointer crosses a column heading.
   Pinning min-width to 0 keeps every column at the width it already has at rest, so hovering
   changes nothing. Only the NESTED containers (a submenu inside the sheet) are affected; the sheet
   itself is full-width and untouched. */
@media (min-width: 1025px) {
  .oh-header .oh-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    min-width: 0;
  }
}

/* The phone drawer is an accordion (2.5.0, 2026-09-24). Core flattens every submenu into the overlay and
   hides the toggles, which measured live at 390px as 55 links and 2654px of scroll, about 3.1 phone
   screens, with "Med spa" 1318px down and "Contact" 2599px down and last. Core does not drive its own
   toggles in the overlay either: aria-expanded stays "true" through a click, verified 2026-09-24. So the
   two top-level groups that have children get their own button, collapsed by default, one open at a time.
   The group's own link still navigates; only the chevron expands. Detail in _site/nav.md. */
.oh-header .oh-acc-btn { display: none; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .oh-acc { position: relative; }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .oh-acc-btn {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; right: 0; width: 44px; height: 56px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--wp--preset--color--theme-4);
  /* the group link carries z-index 1, so the chevron needs to sit above it (found 2026-09-24) */
  z-index: 2;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .oh-acc-btn svg {
  width: 15px; height: 15px; transition: transform .18s ease;
}
.oh-header .wp-block-navigation__responsive-container.is-menu-open .oh-acc.oh-acc-open > .oh-acc-btn svg { transform: rotate(180deg); }
.oh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .oh-acc:not(.oh-acc-open) > .wp-block-navigation__submenu-container {
  display: none !important;
}