/*
Theme Name: Ostro Theme
Theme URI: https://ostrohealth.com
Description: A custom block theme for Ostro, migrated from Webflow.
Version: 1.0.8
Author: Ostro
Author URI: https://ostrohealth.com
Text Domain: ostro
Tags: full-site-editing, block-theme
*/

/* =============================================
   Theme-level custom properties
   ============================================= */
:root {
  /* Approximate rendered height of the .announcements bar.
     Used by elements that need to clear it (e.g. the
     menu-overlay close button). Override at a narrower
     scope if the announcement changes height. */
  --ostro-announcement-height: 55px;
}

/**
 * The site's single horizontal gutter primitive.
 *
 * Reproduces Webflow production exactly, measured 2026-09-15 and frozen in
 * tests/visual/geometry/webflow-baseline.json:
 *
 *   >=1747px   (100vw - 1600px) / 2   content caps at 1600px and centres
 *   992-1746px 4.2vw                  fluid
 *   480-991px  30px                   fixed step
 *   <=479px    15px                   fixed step (base .section-warpper case;
 *                                      .section-warpper-black/homepage-section2
 *                                      diverge to 20px here and get an explicit
 *                                      override when Task 6 touches them)
 *
 * Webflow expressed the fluid range as `padding: 3em` against `font-size:
 * 1.4vw` (3 x 1.4 = 4.2vw). That is stated directly here instead, so the
 * gutter no longer silently depends on body typography.
 *
 * A bare clamp() cannot express this: the tablet and mobile values are
 * discrete steps, not points on the fluid curve.
 *
 * vw units resolve against the Site Editor's canvas iframe rather than the
 * browser viewport, so this tracks the canvas as it resizes — which is what
 * makes the editor preview honest. Do not convert this to px.
 */
:root {
  --ostro-gutter: 4.2vw;
}

@media (max-width: 991px) {
  :root {
    --ostro-gutter: 30px;
  }
}

@media (max-width: 479px) {
  :root {
    --ostro-gutter: 15px;
  }
}

* {
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   WordPress → Webflow Button Bridge
   Reset wp-block-button wrapper and pass
   Webflow .cta styles through to the <a>.
   ============================================= */

/* Strip wrapper styling — neutralize ALL Webflow .cta rules on the wrapper div */
.wp-block-button.cta,
.wp-block-button.cta:hover,
.wp-block-button.cta.cta-home:hover,
.wp-block-button.cta.cta-home.cta-invert:hover {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Reset WordPress default button link styles and apply Webflow .cta base styles */
.wp-block-button.cta .wp-block-button__link {
  color: #000;
  letter-spacing: .5px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  width: auto;
  padding: 7px 18px 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}

.wp-block-button.cta .wp-block-button__link:hover {
  border-color: var(--black, #000);
  background-color: var(--black, #000);
  color: var(--white, #fff);
  border-radius: 20px;
}

/* .cta-home: black filled button */
.wp-block-button.cta.cta-home .wp-block-button__link {
  color: #fff;
  text-align: center;
  background-color: #000;
  border-width: 1px;
  width: 202px;
  font-size: 18px;
}

.wp-block-button.cta.cta-home .wp-block-button__link:hover {
  color: #000;
  background-color: #fff;
  border-color: #000;
  border-radius: 20px;
}

/* .cta-invert: white outlined button */
.wp-block-button.cta.cta-home.cta-invert .wp-block-button__link {
  color: #000;
  background-color: #fff;
  border-color: #000;
  width: 200px;
  font-size: 18px;
}

.wp-block-button.cta.cta-home.cta-invert .wp-block-button__link:hover {
  color: var(--white, #fff);
  text-align: center;
  background-color: #595959;
  border-color: #595959;
  border-radius: 20px;
}

/* =============================================
   Header & Footer → Webflow Bridge
   Core blocks add wrapper elements (<p>, <figure>)
   that Webflow CSS doesn't expect. These rules
   make wrappers transparent and pass styles through.
   ============================================= */

/* --- Announcement CTA: <p> acts as the button container --- */
p.announcement-cta {
  margin-top: 0;
  margin-bottom: 0;
}
p.announcement-cta a {
  color: inherit;
  text-decoration: none;
}
p.announcement-cta.yellow-cta a:hover {
  color: inherit;
}

.cms-body-text.annoucement-text {
  font-size: 18px;
}
@media screen and (min-width: 1920px) {
  .cms-body-text.annoucement-text {
    font-size: 23px;
  }
}

/* --- Logo: <figure> replaces <a> as container --- */
figure.wp-block-image.logo {
  margin: 0;
  z-index: 100002;
}
figure.wp-block-image.logo img {
  width: 225px;
}

/* --- Close icon: <figure> wrapper inherits positioning --- */
figure.wp-block-image.announcement-close {
  margin: 0;
  line-height: 0;
}

/* --- Desktop nav links (.nav-new): pass styles through <p> to <a> --- */
/* (Removed — now using wp:navigation block) */

/* --- Mobile nav links (.nav): pass styles through <p> to <a> --- */
/* (Removed — now using wp:navigation block) */

/* =============================================
   Navigation Block → Webflow Design Bridge
   Style the WordPress navigation overlay to match
   the Webflow full-screen menu overlay design.
   ============================================= */

/* Keep navbar-animated visible on all screen sizes
   (Webflow CSS hides it at mobile breakpoints since it
   had a separate .navbar-mobile, which we no longer need) */
.navbar-animated {
  display: block !important;
  position: fixed !important;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
}

/* Position the navigation block in the nav-bg bar.
   Use `nav` tag to avoid matching the <ul> inside the overlay
   which also carries .wp-block-navigation.ostro-nav classes. */
.nav-bg nav.wp-block-navigation.ostro-nav {
  position: absolute;
  right: var(--wp--preset--spacing--16);
  top: 0;
  bottom: 0;
  justify-content: center;
  display: flex;
  align-items: center;
  z-index: 999;

  @media screen and (min-width: 768px) {
    right: 0;
  }
}

/* Force-hide the responsive container when closed.
   WordPress core may not hide it if scripts don't load
   or if Webflow CSS interferes. */
.wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: none !important;
}

/* Burger / open button — always visible */
.wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container-open {
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 1.5em;
  border: none;
}
/* Hide WP's built-in 2-line SVG and draw a 3-line
   hamburger via CSS so we don't have to swap markup. */
.wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container-open svg {
  display: none;
}
.wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container-open {
  position: relative;
}
.wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container-open::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 2px;
  background-color: var(--black, #000);
  box-shadow:
    0 -8px 0 var(--black, #000),
    0  8px 0 var(--black, #000);
}

/* Vertically center the logo (and nav) inside the
   90px nav-bg. WP's constrained layout is block flow,
   so the figure would otherwise sit at the top. */
.wp-block-group.nav-bg {
  display: flex;
  align-items: center;
  /* min-height: 90px; */
}

/* "Get a demo" pill button in the nav bar.
   Sits between the logo and the hamburger; hidden on mobile (≤767px)
   and suppressed on the schedule-a-demo page. */
.nav-demo-cta-wrap {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
}
.nav-demo-cta .wp-block-button__link {
  border: 1px solid var(--black, #000);
  color: var(--black, #000);
  background: transparent;
  border-radius: 20px;
  padding: 7px 18px 8px;
  font-family: NHG TX Regular, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.nav-demo-cta .wp-block-button__link:hover {
  background: var(--black, #000);
  color: #fff;
}
@media screen and (max-width: 767px) {
  .nav-demo-cta-wrap { display: none !important; }
}
/* Hide on schedule-a-demo and homepage */
.page-schedule-a-demo .nav-demo-cta-wrap,
.home .nav-demo-cta-wrap {
  display: none !important;
}

/* Mobile adjustments — tablet */
@media screen and (max-width: 991px) {
  /* Hide the hero arrow background at tablet/phone, matching the Webflow
     source (.home-background is display:none at <=991px). The arrow is an
     inline background style injected by core background support, so the
     override needs !important to win over the inline declaration. */
  .home-hero-bg {
    background-image: none !important;
  }
}

/* Inset the hero arrow background from the right edge by 3em, matching
   Webflow's .home-background { right: var(--_sizing---base--section-side-margins) }.
   The block outputs background-position as an inline style so !important is required. */
.home-hero-bg {
  background-position: right 3em top !important;
}

/* =============================================
   Navigation Overlay template part
   Replaces the former `!important` overrides on
   core's default overlay. Core adds
   `disable-default-overlay` to the responsive
   container and renders `parts/navigation-overlay.html`
   inside `.wp-block-navigation__overlay-container`,
   hiding the block's own inner content.
   ============================================= */

/* Core applies clamp()-based root padding to the open container when a custom
   overlay is used; the part supplies its own spacing, so zero core's out. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
  padding: 0;
}

/* Zero out core's default `:where(.wp-block-group.has-background) { padding }`,
   which the group picks up from its `has-background` class. */
.ostro-nav-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  overflow-y: auto;
  padding: 0;
  background-color: var(--white, #fff);
}

.ostro-nav-overlay__content {
  padding-left: var(--wp--preset--spacing--16);
  padding-right: var(--wp--preset--spacing--16);
  /* Important to override inline WP core padding-top */
  padding-top: calc(var(--ostro-announcement-height, 0) + 8em) !important;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;

  @media screen and (min-width: 768px) {
    /* Important to override inline WP core padding-top */
    padding-top: calc(var(--ostro-announcement-height, 0) + 12em) !important;
    padding-left: var(--wp--preset--spacing--32);
    padding-right: var(--wp--preset--spacing--32);
  }

  @media screen and (min-width: 993px) {
    padding-left: var(--wp--preset--spacing--48);
    padding-right: var(--wp--preset--spacing--48);
  }
}

@media screen and (min-width: 1920px) {
  .ostro-nav-overlay__content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Mirrors the burger's coordinates: the open button sits inside the 90px
   nav-bg, vertically centred at (90 - 40) / 2 = 25px, and inherits
   nav-wrapper's horizontal padding. The close block lives in a fixed
   full-viewport panel and cannot inherit either, so both are restated.
   The announcement bar renders on the home page only, so its height is
   added there alone. */
.ostro-nav-overlay__close {
  position: fixed;
  top: 25px;
  right: var(--wp--preset--spacing--48);
  z-index: 100001;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home .ostro-nav-overlay__close {
  top: calc(var(--ostro-announcement-height, 55px) + 25px);
}
.ostro-nav-overlay__close svg {
  fill: var(--black, #000);
  width: 30px;
  height: 30px;
}

.ostro-nav-overlay__menu .wp-block-navigation__container {
  gap: 0;
}
/* Navigation item text styles */
.ostro-nav-overlay__menu .wp-block-navigation-item__content {
  font-family: NHG DS Medium, sans-serif;
  font-size: 2.8em;
  font-weight: 500;
  line-height: 0.8;
  color: var(--black, #000);
  text-decoration: none;
  display: block;
  padding: 0;
  cursor: pointer;

  @media screen and (min-width: 480px) {
    font-size: 2.8em;
  }

  @media screen and (min-width: 783px) {
    font-size: 3.8em;
  }

  @media screen and (min-width: 992px) {
    font-size: 4.8em;
    line-height: 1;
  }
}

.ostro-nav-overlay__menu .wp-block-navigation-item__content:hover {
  color: var(--orange, #f98b0b);
  text-decoration: none;
}

/* Tablet */
@media screen and (max-width: 991px) {
  .ostro-nav-overlay__close {
    top: 20px;
    right: 20px;
  }
  body.home .ostro-nav-overlay__close {
    top: calc(var(--ostro-announcement-height, 55px) + 20px);
  }
  .ostro-nav-overlay__menu .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--16);
  }
}

/* The admin bar pushes the fixed panel down; it is 32px, 46px below 783px.
   The close block is `position: fixed` on the viewport, so it doesn't
   inherit the panel's own offset and needs its own admin-bar adjustment,
   same as before this refactor. */
body.admin-bar .ostro-nav-overlay {
  top: 32px;
  height: calc(100vh - 32px);
}
body.admin-bar .ostro-nav-overlay__close {
  top: calc(25px + 32px);
}
body.admin-bar.home .ostro-nav-overlay__close {
  top: calc(var(--ostro-announcement-height, 55px) + 25px + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .ostro-nav-overlay {
    top: 46px;
    height: calc(100vh - 46px);
  }
  body.admin-bar .ostro-nav-overlay__close {
    top: calc(20px + 46px);
  }
  body.admin-bar.home .ostro-nav-overlay__close {
    top: calc(var(--ostro-announcement-height, 55px) + 25px + 46px);
  }
}

/* --- Footer links: pass styles through <p> to <a> --- */
p.footer-link {
  margin-top: 0;
  margin-bottom: 0;
}
p.footer-link a {
  color: inherit;
  text-decoration: none;
}
p.footer-link a:hover {
  color: var(--dark-grey);
}

/* --- Footer small links: inline display to sit side by side --- */
p.footer-link-p2 {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
}
p.footer-link-p2 a {
  color: inherit;
  text-decoration: none;
}
p.footer-link-p2 a:hover {
  text-decoration: underline;
}

/* --- Footer text: reset paragraph margins --- */
p.footer-text {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Footer logo: <figure> wrapper --- */
figure.wp-block-image.link-block {
  margin: 0;
}
figure.wp-block-image.link-block img {
  width: 100%;
}

/* =============================================
   Admin bar offset
   Push the site down so WP's fixed admin bar
   doesn't paint over the announcement bar.
   ============================================= */
body.admin-bar .navbar-animated {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .navbar-animated {
    top: 46px;
  }
}

/* Global fixed-header clearance for all non-home page templates and posts.
   The announcement bar is hidden on non-home pages (body:not(.home) rule in
   ostro-site.css), so the fixed header is just the .nav-bg (90px).
   Loaded in style.css (after WP layout CSS) so it wins the cascade. */
body:not(.home) main.wp-block-group {
  padding-top: 90px;
  margin-block-start: 0;
}

/* Hero needs more clearance than Webflow's 101px —
   the fixed nav (announcement ~50px + .nav-bg 90px)
   is taller than the original push value accounted for. */
.base-section.base-push-below-nav {
  margin-top: 160px;
}

/* =============================================
   .base-section centering + padding bridge
   Webflow caps width to 1600px but never centers
   it; WP's constrained main centers, but we still
   need explicit padding and margin-auto so
   sections used outside main (e.g. footer) match.
   ============================================= */
.wp-block-group.base-section {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ostro-gutter);
  padding-right: var(--ostro-gutter);
  max-width: 1748px; /* Temporary fix for full-width sections to match nav. Deserves a proper solution later. */
}

/* Nav logo: undo WP's default figure centering */
.wp-block-image.logo {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* =============================================
   Hero background arrow
   .home-background lives on the inner <img>, so
   Webflow's own .home-background rule handles
   positioning. We only need to (a) make the
   .base-section-relative anchor positioned at all
   viewports (Webflow only sets position:relative
   at min-width:1920px), and (b) neutralize the WP
   figure wrapper so it doesn't add its own box.
   ============================================= */
.base-section.base-section-relative {
  position: relative;
}
.base-section.base-section-relative > figure.wp-block-image {
  margin: 0;
  line-height: 0;
}
/* Restore Webflow's .home-background sizing — WP's
   `.wp-block-image img` rule (specificity 0,1,1)
   otherwise outranks the bare `.home-background`
   (0,1,0) and forces width:100%. */
.wp-block-image img.home-background {
  max-width: 35%;
  width: auto;
}

/* =============================================
   Editor-only overrides
   ostro-site.css is loaded into the block editor
   via add_editor_style(), so its bare `h1`/`h2`
   rules cascade to the editor's post-title input
   (which is rendered as an <h1>). Reset to a
   reasonable UI size so the title field doesn't
   render at hero scale.
   ============================================= */
.editor-post-title,
.editor-post-title__input,
.wp-block-post-title {
  font-size: 2.5rem;
  line-height: 1.2;
  padding-top: 0;
  padding-bottom: 0;
}

/* Keep a bottom gap in the editor title field only. */
.editor-post-title,
.editor-post-title__input {
  padding-bottom: 1em;
}

/* =============================================
   Grid fair-share columns
   `1fr` is shorthand for `minmax(auto, 1fr)`, which
   lets columns expand to content's intrinsic min-width
   and overflow the viewport. `minmax(0, 1fr)` keeps
   columns within their fraction; content wraps inside.
   See spec:
   docs/superpowers/specs/2026-05-28-homepage-grid-overflow-fix-design.md
   ============================================= */
.section-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

._4-col-group {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-grid-footer {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* =============================================
   Footer padding parity with Webflow
   The token migration snapped Webflow's literal
   px values to the consolidated spacing scale,
   producing visible deltas (-28px on the
   bottom-padding of the link grid, etc.). Restore
   the original values verbatim here so the
   rendered footer matches the Webflow source.
   ============================================= */
.footer {
  padding-left: 48px;
  padding-right: 48px;
}
.section-grid-footer {
  padding-top: 60px;
  padding-bottom: 220px;
}
.section-grid-footer.bottom {
  padding-top: 0;
  padding-bottom: 60px;
}

/* Grid children all start in row 1 — neutralize the block-gap margin
   that WP applies to non-first siblings, which otherwise pushes the
   News and LinkedIn columns down. */
.section-grid-footer > * {
  align-self: start;
  margin-block-start: 0;
}

/* Restore Webflow's footer text sizes. The token-migration CSS rewrite
   stripped font-size from these selectors expecting the homepage pattern
   migration to set them via block attributes — but the footer template
   part wasn't part of that pass, so the values went missing entirely. */
.footer-link,
.wp-block-navigation.footer-link-group .wp-block-navigation-item__content {
  font-size: 20px;
}
.footer-text {
  font-size: 16px;
}
.footer-link-p2,
.wp-block-navigation.footer-meta .wp-block-navigation-item__content {
  font-size: 16px;
}

/* =============================================
   Announcement CTA → wp:button bridge
   The Webflow .announcement-cta.yellow-cta.w-button
   styling lived on a <p> with an inline <a>. Under
   wp:button it now lives on the wrapper <div> with
   the link as .wp-block-button__link. Neutralize the
   WP wrapper and pass styles through to the <a>.
   ============================================= */
.wp-block-button.announcement-cta,
.wp-block-button.announcement-cta:hover {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.wp-block-button.announcement-cta .wp-block-button__link,
.wp-block-button.announcement-cta .wp-block-button__link:hover {
	color: inherit;
	background-color: var(--orange, #f98b0b);
	border-radius: 20px;
	padding: 6px 18px;
  font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

/* =============================================
   Footer navigation blocks bridge
   Footer link columns and the bottom-row meta
   links are now wp:navigation blocks. WP wraps
   each item in <li class="wp-block-navigation-item">
   with <a class="wp-block-navigation-item__content">.
   Pass .footer-link / .footer-link-p2 styling
   through and reset the list defaults.
   ============================================= */
.wp-block-navigation.footer-link-group,
.wp-block-navigation.footer-meta {
	font-size: inherit;
}
.wp-block-navigation.footer-link-group .wp-block-navigation__container,
.wp-block-navigation.footer-meta .wp-block-navigation__container {
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-navigation.footer-link-group .wp-block-navigation-item,
.wp-block-navigation.footer-meta .wp-block-navigation-item {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-navigation.footer-link-group .wp-block-navigation-item__content {
	color: var(--white, #fff);
	text-decoration: none;
}
.wp-block-navigation.footer-link-group .wp-block-navigation-item__content:hover {
	color: var(--dark-grey, #b1b3b3);
}
.wp-block-navigation.footer-meta .wp-block-navigation-item__content {
	color: inherit;
	text-decoration: none;
	margin-right: 0.4em;
}
.wp-block-navigation.footer-meta .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Footer template part: WordPress adds a default top margin to the <footer>
   element that produces a blank white line between main content and footer. */
.wp-site-blocks > footer {
	margin-top: 0;
}

/* =============================================
   Schedule a demo banner
   Full-width yellow CTA bar above the dark footer.
   Webflow structure: outer .section-warpper.demo-link
   carries the yellow background full-bleed; inner
   .link-demo-div is the constrained content container
   (max-width 1600px, centered, 3em horizontal inset
   matching the footer).
   ============================================= */
.wp-block-buttons.section-warpper.demo-link {
	background-color: var(--wp--preset--color--sunshine-yellow);
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
.wp-block-buttons.section-warpper.demo-link .wp-block-button.link-demo-div {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	max-width: none;
}
.wp-block-button.link-demo-div .wp-block-button__link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--black);
	padding: 60px 48px;
	padding-right: calc(48px + 88px + 24px); /* 48px inset + arrow width + gap */
	font-family: "NHG DS Medium", sans-serif;
	font-size: 2em; /* matches Webflow h3 font-size: 2em */
	font-weight: 500;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	background-image: url("/wp-content/themes/ostro/images/Frame-22.svg");
	background-repeat: no-repeat;
	background-position: calc(100% - 48px) center;
	background-size: 88px auto;
	transition: background-position 250ms ease;
}
.wp-block-button.link-demo-div .wp-block-button__link:hover,
.wp-block-button.link-demo-div .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	background-position: calc(100% - 48px + 20px) center;
}
@media screen and (max-width: 479px) {
    .wp-block-button.link-demo-div .wp-block-button__link {
        font-size: 1.4rem;
        padding: 24px 20px;
        padding-right: calc(20px + 44px + 16px); /* right padding clears the scaled-down arrow */
        background-size: 44px auto;
        background-position: calc(100% - 20px) center;
    }
    .wp-block-button.link-demo-div .wp-block-button__link:hover,
    .wp-block-button.link-demo-div .wp-block-button__link:focus-visible {
        background-position: calc(100% - 20px + 12px) center;
    }
}

/* =============================================
   Home Intro Section Bridge (ostro/home-intro)
   Replaces Webflow w-node grid-area IDs with
   class-based selectors for the 12-col grid.
   Matches the live ostro.veeva.com layout:
   text block cols 1-6 (left), image cols 7-12
   (right, spanning the grid rows).
   ============================================= */
.homepage-section2 .section-grid > .home-intro-text {
	grid-area: 1 / 1 / 2 / 7;
	align-self: center;
}
.homepage-section2 .section-grid > .wp-block-image {
	grid-area: 1 / 7 / 5 / 13;
}
/* At <=479px the Webflow export collapses .section-grid to a flex column.
   Match the live ostro.veeva.com phone layout: image stacked on top, text
   full-width below. The image is last in source order, so pull it first. */
@media screen and (max-width: 479px) {
	.homepage-section2 .section-grid > .wp-block-image {
		order: -1;
	}
	.homepage-section2 .section-grid > .home-intro-text {
		align-self: stretch;
	}
}

/* =============================================
   Stats / Treatment Section Bridge (ostro/stats-grid)
   The Webflow export places this section's groups via
   #w-node IDs that block markup can't carry. Re-assert
   the grid-areas by class, matching the live site:
   Treatment/Understanding/Awareness row 1 full width,
   the 4-up stats on rows 3-4 full width (row 2 empty).
   ============================================= */
.section-warpper.treatment .section-grid > .content-group {
	grid-area: 1 / 1 / 2 / 13;
}
.section-warpper.treatment .section-grid > ._4-col-group {
	grid-area: 3 / 1 / 5 / 13;
}
/* Neutralize WP flow-layout block-gap margin on the stat columns. As grid
   items, the injected margin-block-start pushes columns 2-4 down ~24px and
   breaks alignment; grid gaps already handle spacing. */
.section-warpper.treatment ._4-col-group > ._4-col {
	margin-top: 0;
}
/* Size each stat column to its number (content-based, like the live site's
   278/278/334/353 tracks) so wide numbers (264%, 400%) don't bleed into the
   column gap. Desktop only — the tablet/phone column rules live below, and
   scoping to min-width avoids a specificity clash with them. */
@media screen and (min-width: 992px) {
	.section-warpper.treatment ._4-col-group.home-stats {
		grid-template-columns: repeat(4, minmax(min-content, 1fr));
	}
}
/* Production sizes the arrows via .arrow-svg on the <img>; WP applies that
   class to the <figure>, so size the inner <img> to fill the figure
   (the .arrow-svg width), keeping the arrow correct across breakpoints. */
.section-warpper.treatment .arrow-svg img {
	width: 100%;
	height: 100%;
}
/* Stat labels: 20px on the live site (our base preset renders 16px, which
   reads lighter). Match production. The has-base-font-size utility class
   uses !important, so override in kind. */
.section-warpper.treatment ._4-col .paragraph {
	font-size: 20px !important;
}
/* Responsive stat columns, matching the live .home-stats behavior:
   2x2 on tablet, single column on phone. The .home-stats compound
   selector outranks the base ._4-col-group template, which WP's
   layout classes otherwise leave at 4-up. */
@media screen and (max-width: 991px) {
	._4-col-group.home-stats {
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width: 479px) {
	._4-col-group.home-stats {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
}

/* =============================================
   Product Grid Section Bridge (ostro/product-grid)
   The Webflow export placed each product card via a
   #w-node grid-area ID that block markup can't carry,
   so the cards collapse to single columns. Re-assert
   the production 2-up layout by class: cards 1 & 2 on
   row 1 (left/right halves), card 3 on the next row.
   At <=479px .section-grid collapses to a flex column
   (ostro-site.css), so the cards stack there as on the
   live site.
   ============================================= */
.section-warpper-black .section-grid > .product-item {
	margin-top: 0;
}
.section-warpper-black .section-grid > .product-item:nth-child(1) {
	grid-area: 1 / 1 / 2 / 7;
}
.section-warpper-black .section-grid > .product-item:nth-child(2) {
	grid-area: 1 / 7 / 2 / 13;
}
.section-warpper-black .section-grid > .product-item:nth-child(3) {
	grid-area: 3 / 7 / 4 / 13;
}
/* Product title uses bold weight; subtitle uses the thin display font (already in Webflow CSS) */
.home-product-title {
	font-family: "NHG TX Bold", sans-serif;
	font-weight: 700;
}

/* Icon + heading row: strip WP block margins so flex align-items:center works */
.div-block-7 > figure.wp-block-image {
	margin: 0;
}
.div-block-7 > .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0;
}


/* =============================================
   Products Intro Section Bridge (ostro/products-intro)
   ============================================= */
.homepage-section2.top-section .section-grid.product-grid > * {
	margin-top: 0;
}
.homepage-section2.top-section ._2-col > ._4-col {
	margin-top: 0;
}
.homepage-section2.top-section ._4-col > .paragraph-with-line {
	margin-top: 0;
}
.homepage-section2.top-section .section-grid.product-grid > .heading-15 {
	grid-area: 1 / 1 / 2 / 9;
}
.homepage-section2.top-section .section-grid.product-grid > ._2-col {
	grid-area: 2 / 7 / 4 / 13;
}

@media screen and (max-width: 991px) {
	.homepage-section2.top-section .section-grid.product-grid > ._2-col {
		grid-area: 2 / 5 / 4 / 13;
	}
}

@media screen and (max-width: 479px) {
	.homepage-section2.top-section .section-grid.product-grid > .heading-15 {
		grid-area: 1 / 1 / 2 / 13;
	}
	.homepage-section2.top-section .section-grid.product-grid > ._2-col {
		grid-area: auto;
	}
}

/* Match production label size */
.section-warpper.homepage-section2.top-section ._4-col .paragraph {
	font-size: 20px;
}

/* =============================================
   Products Title Section Bridge (ostro/products-title)
   ============================================= */
@media screen and (max-width: 479px) {
    .section-grid-text.product-page {
      padding-left: var(--wp--preset--spacing--16);
      padding-right: var(--wp--preset--spacing--16);
    }
    .section-grid-text.product-page > .heading1-products {
        grid-area: 1 / 1 / 2 / 13;
    }
}


.section-grid-text.product-page {
  padding-right: var(--_sizing---base--section-side-margins);
  padding-left: var(--_sizing---base--section-side-margins);
}


.section-grid-text.product-page > .heading1-products {
	grid-area: 1 / 1 / 2 / 13;
}


/* =============================================
   Product Hero Section Bridge (ostro/section-product-hero + instances)
   ============================================= */
.div-block-32 > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.section-warpper .section-grid.navigate-phone > * {
	margin-top: 0 !important;
}

@media screen and (min-width: 992px) {
	.section-warpper .section-grid.navigate-phone > .div-block-41 {
		grid-area: span 2 / span 6 / span 2 / span 6;
	}
	.section-warpper .section-grid.navigate-phone > .iphone-group-3,
	.section-warpper .section-grid.navigate-phone > .iphone-group {
		grid-area: 1 / 8 / 5 / 12;
	}
}
/* Mobile: both children span full width; phone right-aligned via margin-left:auto.
   WP block CSS resets margin-left to 0, overriding Webflow's ≤991px rule. */
@media screen and (max-width: 479px) {
	.section-warpper .section-grid.navigate-phone > .div-block-41 {
		grid-area: 1 / 1 / 5 / 13;
	}
	.section-warpper .section-grid.navigate-phone > .iphone-group-3,
	.section-warpper .section-grid.navigate-phone > .iphone-group {
		grid-area: 1 / 1 / 2 / 13;
		margin-left: auto !important;
		margin-right: 0 !important;
		width: auto !important;
	}
}

/* Let Webflow's top: 13rem on .iphone-group-3 apply so the phone GIF
   visually overflows into the section below (matches production). */

/* =============================================
   Email Hero Section Bridge (ostro/products-email-hero)
   ============================================= */
.section-warpper.attribute .section-grid.attibute--no-cut > * {
    margin-top: 0 !important;
}
@media screen and (min-width: 992px) {
	.section-warpper.attribute .section-grid.attibute--no-cut > .div-block-16 {
		grid-area: 1 / 1 / 3 / 5;
	}
	.section-warpper.attribute .section-grid.attibute--no-cut > .ipad-group {
		grid-area: 1 / 8 / 5 / 12;
	}
}
.div-block-12 > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure mobile stacking and prevent overflow.
   Exclude .navigate-phone and .attibute--no-cut: Webflow overrides both
   back to grid at ≤479px — our !important would block their grid rules. */
@media screen and (max-width: 479px) {
	.section-grid:not(.navigate-phone):not(.attibute--no-cut) {
		display: flex !important;
		flex-direction: column !important;
	}
	.section-grid:not(.navigate-phone):not(.attibute--no-cut) > * {
		grid-area: auto !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0 !important;
	}
	/* attibute--no-cut: both children share grid cell 1/1/2/3 (matching production) */
	.section-grid.attibute--no-cut > .div-block-16 {
		grid-area: 1 / 1 / 2 / 3;
	}
	.section-grid.attibute--no-cut > .ipad-group {
		grid-area: 1 / 1 / 2 / 3;
	}
}



/* Ensure SVG icons in product heroes and feature columns scale to fill their container
   and don't collapse when width/height are not explicitly set by the theme. */
.wp-block-image.image-21 img,
.wp-block-image.product-icons img {
	width: 100%;
	height: 100%;
}

/* =============================================
   Product Hero Typography Bridge
   Ensure tagline and section heading font size matches
   production/webflow at smaller screen sizes.
   ============================================= */
@media screen and (max-width: 991px) {
	.h2-2-2, .h2-white-2 {
		font-size: 3em !important;
		line-height: .95 !important;
	}
}
@media screen and (max-width: 479px) {
	.h2-2-2, .h2-white-2 {
		font-size: 2.2em !important;
		line-height: 1 !important;
	}
	/* Adjust GIF offset for mobile */
	.section-warpper .section-grid.navigate-phone > .iphone-group-3 {
		margin-top: 0 !important;
	}
}

/* =============================================
   Feature Columns Section Bridge (ostro/section-feature-columns)
   ============================================= */
.section-warpper.consult-2 .section-grid.consult.content > *,
.section-warpper.consult-2 ._3-col-group > * {
	margin-top: 0 !important;
}
.section-warpper.consult-2 .section-grid.consult.content > .prodcut-intro-group {
	grid-area: 1 / 1 / 2 / 8;
}
.section-warpper.consult-2 .section-grid.consult.content > ._3-col-group {
	grid-area: 2 / 4 / 4 / 13;
}
/* Re-assert 3-up layout for feature columns */
.section-warpper.consult-2 ._3-col-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 25px;
}
@media screen and (max-width: 991px) {
	.section-warpper.consult-2 ._3-col-group {
		grid-template-columns: 1fr 1fr;
	}
	.section-warpper.consult-2 ._3-col-group > ._4-col {
		margin-top: 0 !important;
	}
}
@media screen and (max-width: 479px) {
	.section-warpper.consult-2 .section-grid.consult.content > .prodcut-intro-group {
		grid-area: 1 / 1 / 2 / 13;
	}
	.section-warpper.consult-2 ._3-col-group {
		grid-template-columns: 1fr;
	}
	.section-warpper.consult-2 ._3-col-group > ._4-col {
		margin-top: 0 !important;
	}
}

.section-warpper.consult-2 .product-icons {
	width: max-content;
}
.section-warpper.consult-2 .product-icons img {
	width: 75px !important;
	height: auto !important;
}
.section-warpper.consult-2 ._4-col:last-child .product-icons img {
	width: 70px !important;
}

/* Ensure Sites hero grid has minimum height to prevent overlap */
.section-grid.navigate-phone {
	grid-template-rows: auto auto auto auto !important;
}

/* =============================================
   Sites for Patients Section Bridge (ostro/products-sites-patients)
   ============================================= */
.section-warpper.prodcut .section-grid.prodcut > * {
	margin-top: 0 !important;
}
.section-warpper.prodcut .section-grid.prodcut > .prodcut-intro-group {
	grid-area: 1 / 1 / 2 / 8;
}
.section-warpper.prodcut .section-grid.prodcut > ._3-col-group {
	grid-area: 2 / 4 / 4 / 13;
}
.section-warpper.prodcut .patients-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 25px;
}
.section-warpper.prodcut .patients-grid > ._4-col {
	margin-top: 0 !important;
}
@media screen and (max-width: 991px) {
	.section-warpper.prodcut .patients-grid {
		grid-template-columns: 1fr 1fr;
	}
	.section-warpper.prodcut .patients-grid > ._4-col {
		margin-top: 0 !important;
	}
}
@media screen and (max-width: 479px) {
	.section-warpper.prodcut .patients-grid {
		grid-template-columns: 1fr !important;
	}
	.section-warpper.prodcut .patients-grid > ._4-col {
		margin-top: 0 !important;
	}
	.section-warpper.prodcut .patients-grid > .prodcut-cta {
		grid-column: 1 / span 1 !important;
	}
}
/* CTA placement within the grid */
.section-warpper.prodcut .patients-grid > .prodcut-cta {
    grid-column: 1 / span 3;
    margin-top: 40px !important;
}

/* =============================================
   Email Hero Section Bridge (ostro/products-email-hero)
   ============================================= */
.section-warpper.attribute .section-grid.attibute--no-cut > * {
    margin-top: 0 !important;
}
/* Desktop (≥992px): Webflow w-node grid-area values */
@media screen and (min-width: 992px) {
    .section-warpper.attribute .section-grid.attibute--no-cut > .div-block-16 {
        grid-area: 1 / 1 / 3 / 6;
    }
    .section-warpper.attribute .section-grid.attibute--no-cut > .ipad-group {
        grid-area: 1 / 8 / 5 / 12;
    }
}
/* Intermediate (480–991px): simple 2-col layout; constrain ipad-group width */
@media screen and (min-width: 480px) and (max-width: 991px) {
    .section-warpper.attribute .section-grid.attibute--no-cut {
        grid-template-columns: 1fr 1fr !important;
    }
    .section-warpper.attribute .section-grid.attibute--no-cut > .div-block-16 {
        grid-area: 1 / 1 / 2 / 2;
    }
    .section-warpper.attribute .section-grid.attibute--no-cut > .ipad-group {
        grid-area: 1 / 2 / 2 / 3;
        width: auto !important;
        margin-top: auto !important;
    }
}
/* Mobile: restore Webflow's width/left that our blanket width:100% overrides */
@media screen and (max-width: 479px) {
    .section-warpper.attribute .section-grid.attibute--no-cut > .ipad-group {
        width: 60vw !important;
        left: 25% !important;
        margin-top: 15.9em !important;
    }
}
.div-block-12 > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =============================================
   Email for HCPs Section Bridge (ostro/products-email-hcps)
   ============================================= */
.section-warpper.attribute-intro .section-grid.attribute-intro > * {
	margin-top: 0 !important;
}
@media screen and (min-width: 992px) {
	.section-warpper.attribute-intro .section-grid.attribute-intro > .prodcut-intro-group {
		grid-area: 1 / 1 / 2 / 8;
	}
	.section-warpper.attribute-intro .section-grid.attribute-intro > .email-hcp-grid {
		grid-area: 2 / 4 / 4 / 13;
	}
}

.section-warpper.attribute-intro .email-hcp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 25px;
}
.section-warpper.attribute-intro .email-hcp-grid > ._4-col {
	margin-top: 0 !important;
}
/* Intermediate (480–991px): stack intro above columns, single-col feature list */
@media screen and (min-width: 480px) and (max-width: 991px) {
    .section-warpper.attribute-intro .section-grid.attribute-intro {
        display: flex !important;
        flex-direction: column !important;
    }
    .section-warpper.attribute-intro .section-grid.attribute-intro > * {
        grid-area: auto !important;
        width: 100% !important;
    }
    .section-warpper.attribute-intro .email-hcp-grid {
        grid-template-columns: 1fr !important;
    }
    .section-warpper.attribute-intro .email-hcp-grid > .prodcut-cta {
        grid-column: 1 / span 1 !important;
    }
}
/* Mobile (≤479px): same stacked layout */
@media screen and (max-width: 479px) {
    .section-warpper.attribute-intro .section-grid.attribute-intro > .prodcut-intro-group {
        grid-area: 1 / 1 / 2 / 13;
    }
	.section-warpper.attribute-intro .email-hcp-grid {
		display: block !important;
	}
	.section-warpper.attribute-intro .email-hcp-grid > ._4-col {
		margin-top: 0 !important;
	}
}
/* CTA placement within the grid */
.section-warpper.attribute-intro .email-hcp-grid > .prodcut-cta {
    grid-column: 1 / span 3;
    margin-top: 40px !important;
}

/* =============================================
   Engage Hero Section Bridge (ostro/products-engage-hero)
   Webflow hides newsublcasslikethis via display:none — show it.
   ============================================= */
.section-warpper.engageai.newsublcasslikethis {
    display: block !important;
}

/* Show the Engage hero product image (Webflow hides .iphone-group by default) */
.section-warpper.engageai .iphone-group {
    display: block !important;
}

/* =============================================
   Anchor Nav Bridge (ostro/products-anchor-nav)
   Production ostro-site.css has background-color + correct top.
   Our local CSS lacks background-color and has wrong top.
   Webflow top:90px = production's 90px nav (no announcement bar).
   We have: 48px announcement + 90px nav = 138px (logged-out).
   WP admin bar adds 32px when logged in → body.admin-bar variant.
   Both Sites + Email links are visible (matches production).
   ============================================= */
.anchor-link {
    background-color: rgb(43, 43, 43) !important;
    top: 138px !important; /* homepage: 48px announcement + 90px nav */
}
/* Interior pages — no announcement bar → just the nav height */
body:not(.home) .anchor-link {
    top: 90px !important;
}
/* Neutralize WP owl margin-block-start on flex children */
.prodcut-link-group > .prodcut-link {
    margin-block-start: 0 !important;
}
/* Admin bar (+32px) variants */
body.admin-bar .anchor-link {
    top: 170px !important; /* 32px admin bar + 138px header */
}
body.admin-bar:not(.home) .anchor-link {
    top: 122px !important; /* 32px admin bar + 90px nav */
}
@media screen and (max-width: 991px) {
    .anchor-link {
        top: 128px !important; /* 48px announcement + 80px nav */
    }
    body:not(.home) .anchor-link {
        top: 90px !important;
    }
    body.admin-bar .anchor-link {
        top: 160px !important;
    }
    body.admin-bar:not(.home) .anchor-link {
        top: 112px !important;
    }
}
@media screen and (max-width: 479px) {
    .anchor-link {
        top: 108px !important; /* 48px announcement + 60px nav */
    }
    body.admin-bar .anchor-link {
        top: 140px !important;
    }
    body.admin-bar:not(.home) .anchor-link {
        top: 92px !important;
    }
}

/* =============================================
   Announcement Bar — homepage only
   WordPress adds .home to <body> on the front page.
   Hide the bar on all other pages.
   ============================================= */
body:not(.home) .section-2.announcements {
    display: none !important;
}

/* =============================================
   Email sections intermediate viewport fix
   Webflow's .product-screen { width: 280px } at ≤991px is intended for
   the GIF image element, but the section wrappers also carry .product-screen
   and get squished. Override sections to full width at this breakpoint.
   ============================================= */
@media screen and (max-width: 991px) {
    .section-warpper.attribute.product-screen,
    .section-warpper.attribute-intro.product-screen {
        width: 100%;
    }
}

/* =============================================
   Solutions page — bento grid placement + image fit
   Replaces the Webflow #w-node-…-8b95442e grid-area rules with readable
   className bridges. Container classes (.section-grid-solutions-hero,
   .section-grid-aucidence[.partner]) are reused from ostro-site.css, which
   already defines the 12-col templates and their responsive behavior
   (both flip to flex-column at <=479px, so placement is inert there).
   ============================================= */

/* core/image fit inside the square .solution-box (used by all three sections).
   Mimics the original absolutely-positioned .content-block-* div; the higher
   specificity nulls the inherited background-image so artwork renders once. */
.solution-box .wp-block-image { position: absolute; inset: 0; margin: 0; background-image: none; }
.solution-box .wp-block-image img { width: 100%; height: 100%; object-fit: contain; }

/* --- Desktop placement (also applies 481–991px; containers stay grid) --- */
.sol-hero-title        { grid-area: 1 / 1 / 4 / 7; }
.sol-card-pharma       { grid-area: 1 / 7 / 7 / 13; }
.sol-card-devices      { grid-area: 6 / 1 / 9 / 5; }
.sol-card-diagnostics  { grid-area: 8 / 7 / 10 / 11; }

.sol-aud-title         { grid-area: 1 / 1 / 5 / 7; }
.sol-aud-patients-img  { grid-area: 1 / 7 / 7 / 13; }
.sol-aud-patients-text { grid-area: 5 / 1 / 7 / 7; align-self: end; }
.sol-aud-hcp-img       { grid-area: 8 / 1 / 12 / 7; align-self: end; }
.sol-aud-hcp-text      { grid-area: 8 / 7 / 11 / 13; align-self: end; }

.sol-partner-title     { grid-area: 1 / 1 / 2 / 11; }
.sol-partner-quote     { grid-area: 2 / 1 / 6 / 7; align-self: start; }
.sol-partner-img       { grid-area: 2 / 8 / 7 / 13; }
.sol-partner-slider    { grid-area: 6 / 1 / 11 / 7; }

/* --- <=991px: only the testimonial slider repositions (source L9418) --- */
@media screen and (max-width: 991px) {
    .sol-partner-slider { grid-area: 6 / 1 / 12 / 9; }
}

/* --- <=479px: containers are flex-column; neutralize grid placement +
   align-self so items stack full-width in DOM order --- */
@media screen and (max-width: 479px) {
    .sol-hero-title, .sol-card-pharma, .sol-card-devices, .sol-card-diagnostics,
    .sol-aud-title, .sol-aud-patients-img, .sol-aud-patients-text,
    .sol-aud-hcp-img, .sol-aud-hcp-text,
    .sol-partner-title, .sol-partner-quote, .sol-partner-img, .sol-partner-slider {
        grid-area: auto;
        align-self: auto;
    }
}

/* ============================================================
   Schedule-a-Demo
   ============================================================ */

.page-schedule-a-demo .nav-wrapper {
    background-color: var(--wp--preset--color--midnight-indigo);
    height: 100%;

    .wp-block-navigation.ostro-nav .wp-block-navigation__responsive-container-open::before {
      background-color: var(--white, #fff);
      box-shadow: 0 -8px 0 var(--white, #fff), 0 8px 0 var(--white, #fff);
    }
}

/* Body text is black on the gold background (Webflow's section-level
   color: #fff is for dark-background page variants; this page is light). */
.hero-slide-section-demo p,
.hero-slide-section-demo ul,
.hero-slide-section-demo li {
    color: var(--black);
}

/* Submit button: UA stylesheet overrides inherited color on input[type="submit"].
   Force white text on the black pill button. */
.hero-slide-section-demo .submit-button.btn {
    color: var(--white);
}

/* Hide the "Schedule a demo" CTA banner — redundant on this page. */
.page-schedule-a-demo .section-warpper.demo-link {
    display: none;
}

/* ==========================================================================
   News archive (ostro/news-archive interactive block)
   ========================================================================== */

/* Interactivity API hides cards via the `hidden` attribute; ensure they leave
   no grid gap. */
.collection-item[hidden] {
	display: none !important;
}

/* Empty-state visibility mirrors the hidden attribute. */
.w-dyn-empty[hidden] {
	display: none;
}

/* Pagination buttons are real <button>s here; match the Webflow anchor look
   and show a disabled state driven by data-wp-bind--disabled. */
.pagination-button {
	cursor: pointer;
}

.pagination-button:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Filter labels are <label>s toggled with .is-active by the store; keep them
   clickable and reset native button/label chrome. */
.fs-radio_field-4 {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

/* Events tab in filter - different than other filter links in dynamic filter. */
a.fs-radio_label-4.event_link {
  font-size: 2.2em;
  font-family: "NHG DS Medium", sans-serif;
  color: var(--dark-grey);
}

a.fs-radio_label-4.event_link:hover,
a.fs-radio_label-4.event_link:focus {
  color: var(--black);
}


/* ==========================================================================
   News card typography — match production's explicit 18px overrides that
   the Webflow export omits (export lacks the class-level font-size; the
   built bundle adds them, overriding h4/p element rules).
   ========================================================================== */

.heading-9,
.cms-body-text,
.paragraph-3 {
	font-size: 18px;
}

/* ==========================================================================
   News filter bar — match production font sizes
   Local ostro-site.css puts font-size: 2.2em only on .is-active; production's
   built bundle puts it on the base .fs-radio_field-4 so all labels are equal.
   ========================================================================== */

.fs-radio_field-4 {
	font-size: 2.2em;
	font-family: "NHG DS Medium", sans-serif;
}

/* News filter bar spacing — production uses em-based margins (0.3em / 0.2em)
   relative to the 40px h3; local export has 4px flat. */
.fs-radio_column .h3.space {
	margin-right: 0.3em;
}

.fs-radio_column .h3.breakline {
	margin-left: 0.2em;
	margin-right: 0.2em;
}

/* ==========================================================================
   Solutions — testimonial slider grid placement
   Webflow uses #w-node-* IDs (grid-area: 6/1/11/7); we target by block class.
   ========================================================================== */

.section-grid-aucidence.partner .wp-block-ostro-testimonial-slider {
	grid-column: 1 / 7;
	grid-row: 6 / 11;
}

/* ==========================================================================
   Single post — section-grid-cms-heading grid placement bridges
   Webflow uses #w-node-* ID selectors (ostro-site.css lines 8368-8392);
   WordPress doesn't generate those IDs so we target by class instead.
   ========================================================================== */

/* .hero-slide-section-solutions is display:flex (style.css:2020, to centre the
   solutions/company hero it shares). As a flex item the news header's 12-col
   grid would shrink-wrap and centre; fill the wrapper so its column placement
   reads from the gutter, matching the live single-post layout. */
.hero-slide-section-solutions > .section-grid-cms-heading {
	width: 100%;
	min-width: 0;
}

/* Align the header gutter to the site container primitive so it matches the
   post body below it. .hero-slide-section-solutions ships a stale stepped
   padding (48/0/32/16px) shared with the solutions/company/careers heroes, so
   scope to .single — those heroes are pages, not single posts. --ostro-gutter
   is responsive, so one rule tracks every breakpoint, and the .single compound
   (0,2,0) outranks the wrapper's single-class media-query rules. */
.single .hero-slide-section-solutions {
	padding-left: var(--ostro-gutter);
	padding-right: var(--ostro-gutter);
}

/* Back link / category / date row — spans all 12 columns */
.section-grid-cms-heading .div-block-20 {
	grid-area: 1 / 1 / 2 / 13;
}

/* Post title — spans 10 of 12 columns */
.section-grid-cms-heading .wp-block-post-title {
	grid-column: 1 / 11;
}

/* Author / subtitle area — row 3, columns 1–11 */
.section-grid-cms-heading .news-above-headline {
	grid-area: 3 / 1 / 4 / 11;
}

/* Body content inside section-grid-cms — columns 2–10 (inset from edges) */
.section-grid-cms > .wp-block-post-content,
.section-grid-cms > .blog {
	grid-area: 1 / 2 / 2 / 10;
}

/* Apply .blog typography to WordPress post content blocks.
   .blog rules in ostro-site.css (line 2882) define p, h2, h4, blockquote etc. */
.section-grid-cms .wp-block-post-content {
	color: var(--black);
	line-height: 1.3;
}

.section-grid-cms .wp-block-post-content p {
	margin-bottom: var(--wp--preset--spacing--8);
	font-weight: 400;
	line-height: 1.5;
}

.section-grid-cms .wp-block-post-content h2 {
	color: var(--black);
	margin-bottom: 0;
	padding-top: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--4);
	font-size: 2.2em;
	line-height: 1;
}

.section-grid-cms .wp-block-post-content h3 {
	color: var(--black);
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--4);
	font-family: "NHG DS Medium", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.2;
}

.section-grid-cms .wp-block-post-content a {
	color: var(--orange);
	font-family: "NHG TX Bold", sans-serif;
	font-weight: 700;
}

.section-grid-cms .wp-block-post-content a:hover {
	text-decoration: underline;
}

.section-grid-cms .wp-block-post-content blockquote {
	border-left-style: none;
	margin-top: var(--wp--preset--spacing--16);
	margin-bottom: var(--wp--preset--spacing--16);
	padding-left: 0;
	padding-right: 0;
	font-family: "NHG DS Medium", sans-serif;
	font-size: 2.2em;
	font-weight: 500;
	line-height: 1.1;
}

/* ==========================================================================
   Single post — featured image aspect ratio + heading-19 title sizing
   ========================================================================== */

/* Featured image: wp:post-featured-image renders a <figure> element.
   The _3-2 ratio rule in ostro-site.css uses padding-top:50% which doesn't
   apply to figure elements the same way. Let the img handle the aspect ratio. */
.wp-block-post-featured-image.cms-image._3-2 {
	position: relative;
	overflow: hidden;
	max-width: 1600px;
	margin: var(--wp--preset--spacing--64) auto;
	padding-top: 0;
}

.wp-block-post-featured-image.cms-image._3-2 img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Post title sizing: heading-19 rule in ostro-site.css is empty (line 2857).
   Apply a large display size matching production news article titles. */
.heading-19.wp-block-post-title {
	font-family: "NHG DS Medium", sans-serif;
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 500;
	line-height: 1.05;
	margin-top: var(--wp--preset--spacing--16);
	margin-bottom: var(--wp--preset--spacing--16);
}

/* ==========================================================================
   Single post header — "Back to News" link color + date sizing
   ========================================================================== */

/* The global a { color: var(--black) } overrides the paragraph-level orange.
   Target the anchor directly with matching specificity. */
.cms-back-link a,
.cms-back-link a:visited {
	color: var(--orange);
	font-family: "NHG TX Bold", sans-serif;
	font-weight: 700;
}

.cms-back-link a:hover {
	text-decoration: underline;
}

/* Date on single posts should match the back-link text size (body 1.4vw ~ 20px).
   Our 18px bridge for .cms-body-text (news cards) undersizes it here. */
.div-block-20 .wp-block-post-date {
	font-size: 1em;
	margin-bottom: 0;
}

/* ==========================================================================
   Single post — Previous / Next post navigation
   ========================================================================== */

/* Align both nav links on the same row at the same vertical position */
.section-warpper.next-group .section-grid-demo-link {
	align-items: stretch;
}

/* Prev link: left half, vertically centered */
.section-grid-demo-link .ostro-nav-prev {
	grid-column: span 6;
	display: flex;
	align-items: center;
	padding-top: var(--wp--preset--spacing--32);
	padding-bottom: var(--wp--preset--spacing--32);
	margin: 0;
}

/* Next link: right half, text right-aligned, vertically centered */
.section-grid-demo-link .ostro-nav-next {
	grid-column: span 6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
	padding-top: var(--wp--preset--spacing--32);
	padding-bottom: var(--wp--preset--spacing--32);
	margin: 0;
}

/* Orange link text matching production */
.section-grid-demo-link .wp-block-post-navigation-link a {
	color: var(--orange);
	font-family: "NHG TX Bold", sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	text-decoration: none;
}

.section-grid-demo-link .wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

/* At 991px ostro-site.css collapses the grid to 1fr 1fr (2 cols).
   span 6 clamps to span all columns → items stack. Reset to span 1 each. */
@media screen and (max-width: 991px) {
	.section-grid-demo-link .ostro-nav-prev,
	.section-grid-demo-link .ostro-nav-next {
		grid-column: span 1;
	}
}

/* At 479px ostro-site.css switches to flex with space-between — no changes needed. */

/* =============================================
   News slider — override Webflow .w-slider-mask / .w-slide so Swiper's
   flex layout works correctly inside the ostro-news-slider block.
   ============================================= */
/* Override Webflow .w-slider-mask / .w-slide so Swiper's flex layout works. */
.ostro-news-slider .swiper-wrapper.w-slider-mask {
	display: flex;
	white-space: normal;
	overflow: visible;
	height: auto;
	width: 100%;
}

.ostro-news-slider .swiper-slide.w-slide {
	display: block;
	height: auto;
	flex-shrink: 0;
	width: 100%;
}

/* =============================================
   Author byline — bridge CoAuthors Plus block output to Webflow styles
   ============================================= */
.wp-block-co-authors-plus-coauthor {
  margin-block-start: 0;
}

.wp-block-co-authors-plus-name {
	font-family: "NHG DS Medium", sans-serif;
	font-size: 2em;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
	color: var(--black);
}

/* Adds a breaking line between the "By" and the author name. */
.cms-byline .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus] {
  display: block;
}

.wp-block-co-authors-plus-description {
  color: var(--orange);
}

.wp-block-co-authors-plus-description > p {
  font-size: 2em;
  font-family: "NHG DS Medium", sans-serif;
}

/* =============================================
   Schedule-a-Demo: WPForms Bridge
   Overrides wpforms-full.min.css to match the Webflow form design.
   Scoped to body.page-schedule-a-demo (injected by functions.php)
   to avoid leaking into other pages.
   ============================================= */

/* 1. Restore full-width for the WPForms block itself.
      wpforms-full.min.css resets every element inside wpforms-container-full
      to width:auto via `div.wpforms-container-full, div.wpforms-container-full *`
      (specificity 0,1,1), which prevents the grid item from stretching.
      Our selector (0,2,1) beats it without !important. */
body.page-schedule-a-demo .wpforms-container {
  width: 100%;
}

/* Full-width inputs, selects, and field rows.
   WPForms default: max-width 60% on .wpforms-field-medium.
   Our selector (0,3,1) beats WPForms (0,2,1) — no !important needed. */
body.page-schedule-a-demo .wpforms-container input.wpforms-field-medium,
body.page-schedule-a-demo .wpforms-container select.wpforms-field-medium,
body.page-schedule-a-demo .wpforms-container .wpforms-field-row.wpforms-field-medium {
  max-width: 100%;
  width: 100%;
}

/* 2. Name field (First / Last): keep side-by-side but expand each block
      so both halves fill the now-full-width row. */
body.page-schedule-a-demo .wpforms-container .wpforms-field-name .wpforms-field-row-block {
  flex: 1;
  max-width: 50%;
}

body.page-schedule-a-demo .wpforms-container .wpforms-field-name .wpforms-field-row-block input {
  width: 100%;
}

/* 3. Textarea height.
      WPForms compound rule div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium
      (specificity 0,2,2) beats our scoped rule (0,3,1), so !important is required. */
body.page-schedule-a-demo .wpforms-container textarea.wpforms-field-medium {
  height: 300px !important;
  min-height: 300px;
  background-color: transparent;
  border-style: none none solid;
  border-width: 0 0 2px;
  border-color: transparent transparent black;
  padding: 4px 0 0;
}

/* 4. Submit button: override WPForms variable-driven text colour (#666) and
      default grey border. Re-apply Webflow .submit-button.btn properties since
      .wpforms-submit does not carry those Webflow classes. */
body.page-schedule-a-demo .wpforms-container {
  --wpforms-button-text-color: #fff;
}

body.page-schedule-a-demo .wpforms-container button.wpforms-submit {
  background-color: #000;
  border: none;
  border-radius: 25px;
  color: #fff !important; /* WPForms uses :not(:hover):not(:active) — needs !important */
  cursor: pointer;
  font-family: "NHG TX Regular", sans-serif;
  font-size: 1em;
  font-weight: 500;
  padding: 0 16px;
}

body.page-schedule-a-demo .wpforms-container button.wpforms-submit:hover {
  color: #fff;
  background-color: #222;
}

/* 5. Focus: remove WPForms default browser outline and box-shadow. */
body.page-schedule-a-demo .wpforms-form input:focus,
body.page-schedule-a-demo .wpforms-form textarea:focus {
  outline: none;
  box-shadow: none;
}

/* 6. Product checkbox field (.ostro-select).
      WPForms renders checkboxes in a <ul> — strip list chrome and space rows. */
body.page-schedule-a-demo .wpforms-container .ostro-select fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

body.page-schedule-a-demo .wpforms-container .ostro-select ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

body.page-schedule-a-demo .wpforms-container .ostro-select li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-schedule-a-demo .wpforms-container .ostro-select .wpforms-field-label-inline {
  font-weight: 400;
}

/* 7. Field spacing: match Webflow form's natural vertical rhythm. */
body.page-schedule-a-demo .wpforms-container .wpforms-field {
  padding-bottom: 0;
  margin-bottom: 16px;
}

/* 8. Error messages: keep them legible against the gold background. */
body.page-schedule-a-demo .wpforms-container .wpforms-error {
  color: #c00;
  font-size: 0.85em;
  margin-top: 4px;
}

/* Fidelity refresh 2026-08-17: mobile spacing — Webflow lays these section
   containers out as CSS grid / flexbox, spacing them via their own gap plus
   element margin-bottom (defined in the frozen ostro-site.css). WordPress also
   tags them is-layout-flow and injects a blockGap margin-block-start (24px) onto
   every child; when the grids collapse to fewer columns on mobile those margins
   stack up and inflate page height well past production (e.g. Solutions ~4321px
   local vs ~3469px production at 500px wide). Production has 0 margin on these
   grid/flex children. Neutralize only that injected margin, only under Webflow's
   tablet breakpoint, so desktop (>991px, already signed off) is untouched.
   Scoped to the specific grid/flex section classNames — never bare elements.
   The partner grid is intentionally excluded to preserve its Webflow
   margin-top on .partner-quote-group. */
@media (max-width: 991px) {
  ._4-col > *,
  ._4-col .is-layout-flow > *,
  ._3-col-group > *,
  ._3-col-group .is-layout-flow > *,
  .section-grid > *,
  .section-grid .is-layout-flow > *,
  .section-grid-solutions-hero > *,
  .section-grid-solutions-hero .is-layout-flow > *,
  .section-grid-aucidence:not(.partner) > *,
  .section-grid-aucidence:not(.partner) .is-layout-flow > * {
    margin-block-start: 0 !important;
  }
}

/* Hero section centering 2026-08-17: production serves
   `.hero-slide-section-solutions { display: flex }`, but the theme's vendored
   css/ostro-site.css predates that and still says `display: block`. As a block
   container the inner grid honours its fixed 3em side margins and stays pinned
   left, while every other section's grid centres inside its padded wrapper —
   so past ~1700px the hero visibly drifts left of the rest of the page.
   `justify-content: center` is already in the vendored rule and takes effect
   once the container is flex. */
.hero-slide-section-solutions {
  display: flex;
}

/* Company hero 2026-08-17: `.section-grid-text` items are CSS-grid children
   with `grid-auto-columns: 1fr` — without `min-width: 0`, a child's min-content
   size (e.g. an unbreakable inline run in the founders paragraph) can force the
   1fr tracks past their rendered width, causing page-level horizontal overflow
   at narrow (≤479px) viewports even though nothing visibly sticks out. */
@media (max-width: 479px) {
  .section-grid-text > * {
    min-width: 0;
  }

  /* The theme's vendored css/ostro-site.css has an EMPTY `.heading1 {}` rule at
     this breakpoint (the source Webflow export defines font-size: 2.8em here,
     but that update never made it into the frozen local copy). Scoped to the
     Company hero only — other `.heading1` headings currently fit their
     containers fine at 6.5em and are left untouched to avoid regressions. */
  .hero-slide-section-solutions.company-page .heading1 {
    font-size: 2.8em;
  }
}

/* ── Animation system 2026-08-17 ─────────────────────────────────────────────
   className-driven scroll reveals. Initial-hidden state is gated behind
   `.ostro-js` (set by an inline <head> script, front end only) so no-JS and the
   Site Editor show content normally. The IntersectionObserver in ostro-custom.js
   adds `.anim--in` to reveal. Reveal once. Honors prefers-reduced-motion. */
.ostro-js .anim {
	opacity: 0;
	transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.ostro-js .anim--fade-up   { transform: translateY(24px); }
.ostro-js .anim--fade-down { transform: translateY(-24px); }
.ostro-js .anim--slide-left  { transform: translateX(40px); }  /* enters from right */
.ostro-js .anim--slide-right { transform: translateX(-40px); } /* enters from left */
.ostro-js .anim--scale     { transform: scale(0.94); }
/* .anim--fade has no transform (opacity only). */

/* Entered state (observer adds .anim--in). */
.ostro-js .anim.anim--in {
	opacity: 1;
	transform: none;
}

/* Delay modifiers. */
.ostro-js .anim--delay-1 { transition-delay: 100ms; }
.ostro-js .anim--delay-2 { transition-delay: 200ms; }
.ostro-js .anim--delay-3 { transition-delay: 300ms; }

/* Stagger: a container's direct .anim children reveal in sequence.
   Capped at 6 so late items don't lag. */
.ostro-js .anim--stagger > .anim:nth-child(1) { transition-delay: 0ms; }
.ostro-js .anim--stagger > .anim:nth-child(2) { transition-delay: 80ms; }
.ostro-js .anim--stagger > .anim:nth-child(3) { transition-delay: 160ms; }
.ostro-js .anim--stagger > .anim:nth-child(4) { transition-delay: 240ms; }
.ostro-js .anim--stagger > .anim:nth-child(5) { transition-delay: 320ms; }
.ostro-js .anim--stagger > .anim:nth-child(n+6) { transition-delay: 400ms; }

/* Reduced motion: show everything immediately, no motion. */
@media (prefers-reduced-motion: reduce) {
	.ostro-js .anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Events single 2026-08-17: internal event post (no external URL) renders
   single.html; style the event meta injected by patterns/news-single-header.php.
   Reuses vendored .cms-body-text and .button/.w-button; scoped to .cms-event-* */
.cms-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 0.75rem;
}

.cms-body-text.cms-event-location,
.cms-body-text.cms-event-date {
	color: rgba(0, 0, 0, 0.7);
	margin: 0;
}

.cms-event-description {
	margin-top: 1rem;
	max-width: 70ch;
	line-height: 1.6;
}

.cms-event-cta {
	margin-top: 1.25rem;
}

/* OneTrust cookie script */
.wp-site-blocks #ot-sdk-btn.ot-sdk-show-settings,
.wp-site-blocks #ot-sdk-btn.optanon-show-settings {
  color: var(--grey);
  padding: 0;
  line-height: 1.3;
  background-color: transparent;
  font-size: 16px;
  display: inline-block;
  align-self: flex-end;

  &:hover {
    color: var(--grey);
    background-color: transparent;
    text-decoration: underline;
  }
}