/* ==========================================================================
   ONLY UPWARDS — cream/ink editorial override theme
   Loaded AFTER the Webflow stylesheet on every site page (never /admin/).
   The Webflow :root tokens are INVERTED (--white is black, --black is white);
   section 1 remaps them so most of the site flips in one stroke, then the
   rest of this sheet pins every selector the audit flagged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE + WEBFLOW TOKEN REMAP
   -------------------------------------------------------------------------- */
:root {
  --ou-cream: #F4F0EB;        /* page background */
  --ou-cream-light: #FBF9F5;  /* cards, nav surface */
  --ou-cream-deep: #E7E0D6;   /* hovers, dividers, subtle fills */
  --ou-ink: #0B0B0B;          /* text, buttons, dark sections */
  --ou-ink-soft: #37342E;     /* secondary headings */
  --ou-muted: #6E6960;        /* muted body text */

  /* Remap the (inverted) Webflow variables onto the new palette.
     --white was black, --black was white — names read backwards. */
  --white: var(--ou-cream);
  --black: var(--ou-ink);
  --dark-grey: var(--ou-muted);
  --blue: var(--ou-ink);                 /* retire the electric blue accent */
  --black-second: rgba(11, 11, 11, .06); /* was translucent grey fills */
  --alice-blue: var(--ou-cream-light);
  --honeydew-section: var(--ou-cream);
  --green-light: var(--ou-cream-deep);
}

/* --------------------------------------------------------------------------
   2. BASE CANVAS, SELECTION, SCROLLBAR, FOCUS
   -------------------------------------------------------------------------- */
html {
  scrollbar-color: var(--ou-ink) var(--ou-cream);
}

body {
  background-color: var(--ou-cream) !important;
  color: var(--ou-ink) !important;
}

::selection {
  background-color: var(--ou-ink);
  color: var(--ou-cream);
}
.ou-dark ::selection {
  background-color: var(--ou-cream);
  color: var(--ou-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.w-button:focus-visible,
.button-with-animation:focus-visible {
  outline: 2px solid var(--ou-ink);
  outline-offset: 3px;
}
.ou-dark a:focus-visible,
.ou-dark button:focus-visible,
.ou-dark .button:focus-visible,
.ou-dark .w-button:focus-visible,
.ou-dark .button-with-animation:focus-visible {
  outline-color: var(--ou-cream);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — ink headings, warm muted body
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.main-display,
.item-heading,
.step-main-title,
.blog-title,
.qa-text-main,
.main-pricing-title {
  color: var(--ou-ink);
}

h1, .display-1, .main-display { letter-spacing: -0.03em; }
h2, h3 { letter-spacing: -0.02em; }

/* .display-1 is gradient text via background-clip:text — overriding color
   alone does nothing because -webkit-text-fill-color stays transparent. */
.display-1,
.display-1.biger,
.display-1.smaller {
  color: var(--ou-ink);
  background-image: linear-gradient(90deg, var(--ou-ink) 34%, rgba(11, 11, 11, .55) 85%) !important;
}

p { color: var(--ou-muted); }
.paragraph, .paragraph-product { color: var(--ou-muted); }
.subhead { color: var(--ou-ink-soft); }
.subhead-center { color: var(--ou-ink-soft); }
.small-text,
.qa-text-main,
.feature-second,
.badge-paragraph { color: var(--ou-muted); }
.qa-text-main { color: var(--ou-ink); } /* FAQ questions read as headings */
.subhead-testi, .subhead-testi.small { color: var(--ou-ink-soft); }
.caption, .caption.margined { color: var(--ou-muted); }
figcaption { color: var(--ou-muted); }
blockquote { border-left-color: var(--ou-cream-deep); color: var(--ou-ink-soft); }
.blue-color { color: var(--ou-ink-soft); }
.italic-text { color: inherit; }
.category-tag,
.category-tag-main {
  color: var(--ou-muted);
  border-color: rgba(11, 11, 11, .25);
}

/* 1440px re-declarations in the Webflow sheet must lose */
@media (min-width: 1440px) {
  .paragraph-2, .paragraph-3 { color: var(--ou-muted) !important; }
  .footer-link-main:hover { color: var(--ou-cream) !important; }
}
.paragraph-2, .paragraph-3 { color: var(--ou-muted); }

/* Text-link buttons */
.button-underline,
.button-underline-2,
.button-first-line,
.button-first-line-2,
.button-line,
.button-line-main,
.link { color: var(--ou-ink); }
.button-underline-2:hover,
.button-line:hover { color: var(--ou-ink-soft); border-bottom-color: var(--ou-ink); }
.button-line-main:hover { border-bottom-color: var(--ou-ink); }
.white-link { color: var(--ou-ink); }

/* --------------------------------------------------------------------------
   4. HERO — kill the photo + blue gradient, warm cream wash
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--ou-cream) !important;
  background-image: linear-gradient(180deg, var(--ou-cream-light), var(--ou-cream)) !important;
}
.hero.for-inner,
.hero.for-account {
  background-color: var(--ou-cream) !important;
  background-image: linear-gradient(180deg, var(--ou-cream-light), var(--ou-cream)) !important;
}

/* --------------------------------------------------------------------------
   5. SECTIONS & PAGE SHELLS — no more dark bands unless .ou-dark says so
   -------------------------------------------------------------------------- */
.section,
.section.white,
.section.add-top-margin,
.utility-page-wrap {
  background-color: var(--ou-cream);
}
.section.ovetflow.gray {
  background-color: var(--ou-cream) !important;
  background-image: none !important;
}
.checkout-form {
  background-color: var(--ou-cream-light);
  color: var(--ou-ink);
}
/* Decorative band on all /post/ pages — pin to ink so it reads as a
   deliberate editorial block (it is an empty div, no text inside). */
.color-parallax { background-color: var(--ou-ink) !important; }

/* Fade at the bottom of blog/work images now melts into the cream card */
.overlay-bottom {
  background-image: linear-gradient(rgba(244, 240, 235, 0), var(--ou-cream-light) 94%) !important;
}

/* --------------------------------------------------------------------------
   6. NAVBAR — translucent cream, hairline ink border
   -------------------------------------------------------------------------- */
.w-nav { background: transparent; }
.navbar-component {
  background-color: rgba(251, 249, 245, .78) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11, 11, 11, .08);
}
.nav-link,
.navbar-link,
.navbar-link.w--current,
.dropdown-toggle,
.menu-left,
.icon-wrapper,
.svg-icon { color: var(--ou-ink); }
.nav-link:hover,
.navbar-link:hover { color: var(--ou-ink-soft); }
.nav-link.w--current { color: var(--ou-ink); }
.w-dropdown-link.w--current,
.w-nav-link.w--current { color: var(--ou-ink); }

/* Desktop dropdown — the .auto variant is the one the HTML uses */
.navbar-drodpdown-list.auto.w--open,
.navbar-drodpdown-list.w--open {
  background-color: var(--ou-cream-light) !important;
  border-color: var(--ou-cream-deep) !important;
  box-shadow: 0 24px 48px -24px rgba(20, 16, 8, .18);
}
.dropdown-link:hover { background-color: var(--ou-cream-deep) !important; }
.dropdown-link .item-heading { color: var(--ou-ink); }
.dorpdown-link-list { background-color: transparent; }

/* Mobile menu (≤991px) — re-pin every lurking Webflow default */
@media (max-width: 991px) {
  [data-nav-menu-open] { background-color: var(--ou-cream-light) !important; }
  .navbar-menu {
    background-color: var(--ou-cream-light) !important;
    border-top: 1px solid rgba(11, 11, 11, .08) !important;
  }
  .w-nav-button.w--open,
  .menu-button-new.w--open {
    background-color: transparent !important;
    color: var(--ou-ink) !important;
  }
  .navbar-link,
  .dropdown-toggle,
  .menu-left,
  .svg-icon { color: var(--ou-ink) !important; }
  .line-top,
  .line-midddle,
  .line-bottom { background-color: var(--ou-ink) !important; }
  .line-middle-inner { background-color: var(--ou-ink) !important; }
  .dropdown-link:hover { background-color: transparent !important; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS — ink pill, cream text; gradients killed on base AND hover
   -------------------------------------------------------------------------- */
.button,
.button.full,
.button.full.margin,
.w-button,
.button-with-animation,
.button-arrow-link {
  background-color: var(--ou-ink) !important;
  background-image: none !important;
  color: var(--ou-cream) !important;
  border: none;
  border-radius: 999px !important;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.button:hover,
.w-button:hover,
.button-with-animation:hover,
.button-arrow-link:hover {
  background-color: #2A2119 !important; /* slightly warmer ink */
  background-image: none !important;
  color: var(--ou-cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(20, 16, 8, .45);
}
.button:active,
.w-button:active,
.button-with-animation:active,
.button-arrow-link:active {
  transform: scale(.97);
  box-shadow: none;
}
.button-with-animation .text-button { color: var(--ou-cream); }
/* The sliding arrow icon is a white SVG — correct on an ink pill; leave its
   inline transform/opacity alone (Webflow IX2 animates it). */
.button-with-animation .arrow-button { filter: none; }

/* Slider arrows */
.arrow-slider-left,
.arrow-slider-right {
  color: var(--ou-ink) !important;
  background-color: var(--ou-cream-light) !important;
  border: 1px solid var(--ou-cream-deep);
}

/* --------------------------------------------------------------------------
   8. CARDS — cream-light surfaces, tilt-ready
   -------------------------------------------------------------------------- */
.card-testimonial,
.step-box-main,
.service-item,
.blog-content,
.option-wrapper,
.toggle-main,
.pricing-card,
.color-block,
.ou-tilt {
  background-color: var(--ou-cream-light) !important;
  background-image: none !important;
  color: var(--ou-ink);
  border: 1px solid var(--ou-cream-deep);
  border-radius: 20px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: none;
  transition: box-shadow .35s ease;
}
.card-testimonial:hover,
.step-box-main:hover,
.service-item:hover,
.blog-content:hover,
.option-wrapper:hover,
.toggle-main:hover,
.pricing-card:hover,
.ou-tilt:hover {
  box-shadow: 0 24px 48px -24px rgba(20, 16, 8, .18);
}
.color-block._2 {
  background-color: var(--ou-cream-deep) !important;
  color: var(--ou-ink) !important;
}
.logo-main { border-color: var(--ou-cream-deep); }
.social-circle { background-color: rgba(11, 11, 11, .06); }

/* Navy-gradient chips inside cards become solid ink coins (their glyphs are
   light images, so they stay legible on ink). */
.step-icon,
.toggle-icon {
  background-color: var(--ou-ink) !important;
  background-image: none !important;
}

/* CTA photo cards → ink editorial bands (photos retired with the old brand) */
.cta-wrapper,
.left-part {
  background-color: var(--ou-ink) !important;
  background-image: none !important;
  border-radius: 20px;
  color: var(--ou-cream);
}

/* FAQ accordion divider was near-invisible #333438 */
.drodpwdown-toggle-main { border-bottom-color: rgba(11, 11, 11, .12) !important; }
.toggle-content { background-color: transparent; }

/* Contact circles */
.contact-link { background-color: var(--ou-ink) !important; }
.contact-link-cta { background-color: var(--ou-cream-deep) !important; }

/* --------------------------------------------------------------------------
   9. ICON / LOGO FILTERS — the old dark theme inverted black PNGs to white
   -------------------------------------------------------------------------- */
.ou-invert { filter: invert(1) !important; }

/* Social/brand glyph PNGs: render at their native ink on cream… */
.animation-image,
.social-icon-main,
.social-icon-main.no-invert { filter: none; }
/* …and re-invert to white inside dark bands */
.ou-dark .animation-image,
.ou-dark .social-icon-main,
.footer .animation-image,
.footer .social-icon-main { filter: invert(1); }

/* --------------------------------------------------------------------------
   10. MARQUEE — client-logo strip + edge fades
   -------------------------------------------------------------------------- */
@keyframes ou-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ou-marquee-track {
  display: flex;
  width: max-content;
  animation: ou-marquee 32s linear infinite;
}
.ou-marquee-track:hover { animation-play-state: paused; }

/* Edge fades follow the --white remap to cream automatically; re-pin them
   to ink when the band is flipped dark. */
.ou-dark .left-part-shadow {
  background-image: linear-gradient(90deg, var(--ou-ink) 10%, rgba(11, 11, 11, 0)) !important;
}
.ou-dark .left-part-shadow.right {
  background-image: linear-gradient(90deg, rgba(11, 11, 11, 0), var(--ou-ink) 90%) !important;
}

/* --------------------------------------------------------------------------
   11. FORMS — contact fields, newsletter, feedback states
   -------------------------------------------------------------------------- */
.w-input,
.w-select,
.contact-field,
.contact-field.area,
.form-input,
.input {
  background-color: var(--ou-cream-light) !important;
  color: var(--ou-ink) !important;
  border: 1px solid rgba(11, 11, 11, .15) !important;
  border-radius: 12px !important;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.w-input:focus,
.w-select:focus,
.contact-field:focus,
.contact-field:active,
.form-input:focus,
.input:focus,
.input:hover {
  border-color: var(--ou-ink) !important;
  box-shadow: 0 0 0 3px rgba(11, 11, 11, .08);
  outline: none;
}
.w-input::placeholder,
.contact-field::placeholder,
.form-input::placeholder,
.input::placeholder { color: var(--ou-muted) !important; }
.field-label-2 { color: var(--ou-ink); }

.chekcbox { border-color: rgba(11, 11, 11, .4) !important; }
.chekcbox.w--redirected-checked {
  background-color: var(--ou-ink) !important;
  border-color: var(--ou-ink) !important;
}

/* Success: ink on deep cream (both the Webflow wrapper and the site layer) */
.w-form-done,
.success-message,
.success-message-3 {
  background-color: var(--ou-cream-deep) !important;
  background-image: none !important;
  color: var(--ou-ink) !important;
  border-radius: 12px;
}
/* Error: legible warm red on cream (both layers) */
.w-form-fail,
.error-message,
.error-message-3 {
  background-color: #F3DBD2 !important;
  color: #8A2A19 !important;
  border: 1px solid rgba(138, 42, 25, .3);
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   12. FOOTER — permanent ink band (its children are hard-coded light)
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--ou-ink);
  color: var(--ou-cream);
}
.footer-title,
.footer .copyright-2,
.footer .link,
.footer .white-link,
.footer .button-underline-2 { color: var(--ou-cream) !important; }
.footer-link-main { color: rgba(244, 240, 235, .55) !important; }
.footer-link-main:hover { color: var(--ou-cream) !important; }
.footer .form-input {
  background-color: rgba(244, 240, 235, .08) !important;
  color: var(--ou-cream) !important;
  border-color: rgba(244, 240, 235, .25) !important;
}
.footer .form-input::placeholder { color: rgba(244, 240, 235, .55) !important; }

/* --------------------------------------------------------------------------
   13. .OU-DARK — full inverted band
   -------------------------------------------------------------------------- */
.ou-dark {
  background-color: var(--ou-ink) !important;
  background-image: none !important;
  color: var(--ou-cream) !important;
}
.ou-dark h1, .ou-dark h2, .ou-dark h3,
.ou-dark h4, .ou-dark h5, .ou-dark h6,
.ou-dark .main-display,
.ou-dark .item-heading,
.ou-dark .step-main-title,
.ou-dark .blog-title,
.ou-dark .qa-text-main,
.ou-dark .subhead,
.ou-dark .subhead-center,
.ou-dark .subhead-testi,
.ou-dark .field-label-2 { color: var(--ou-cream) !important; }
.ou-dark .display-1 {
  background-image: linear-gradient(90deg, var(--ou-cream) 34%, rgba(244, 240, 235, .6) 85%) !important;
}
.ou-dark p,
.ou-dark .paragraph,
.ou-dark .paragraph-2,
.ou-dark .paragraph-3,
.ou-dark .small-text,
.ou-dark .caption,
.ou-dark figcaption,
.ou-dark .feature-second,
.ou-dark .category-tag-main { color: rgba(244, 240, 235, .55) !important; }
.ou-dark .category-tag-main { border-color: rgba(244, 240, 235, .3); }
.ou-dark a,
.ou-dark .link,
.ou-dark .white-link,
.ou-dark .button-underline,
.ou-dark .button-underline-2,
.ou-dark .button-first-line,
.ou-dark .button-first-line-2,
.ou-dark .nav-link,
.ou-dark .navbar-link { color: var(--ou-cream); }
.ou-dark a:hover { color: rgba(244, 240, 235, .8); }

/* Inverted buttons: cream pill, ink text */
.ou-dark .button,
.ou-dark .w-button,
.ou-dark .button-with-animation,
.ou-dark .button-arrow-link {
  background-color: var(--ou-cream) !important;
  background-image: none !important;
  color: var(--ou-ink) !important;
}
.ou-dark .button:hover,
.ou-dark .w-button:hover,
.ou-dark .button-with-animation:hover,
.ou-dark .button-arrow-link:hover {
  background-color: var(--ou-cream-deep) !important;
  color: var(--ou-ink) !important;
}
.ou-dark .button-with-animation .text-button { color: var(--ou-ink); }
.ou-dark .button-with-animation .arrow-button { filter: invert(1); } /* white svg → ink */

/* Cards sitting inside a dark band become translucent cream panels */
.ou-dark .card-testimonial,
.ou-dark .step-box-main,
.ou-dark .service-item,
.ou-dark .blog-content,
.ou-dark .option-wrapper,
.ou-dark .toggle-main {
  background-color: rgba(244, 240, 235, .06) !important;
  border-color: rgba(244, 240, 235, .16);
  color: var(--ou-cream);
}
.ou-dark .step-icon,
.ou-dark .toggle-icon { background-color: rgba(244, 240, 235, .12) !important; }
.ou-dark .drodpwdown-toggle-main { border-bottom-color: rgba(244, 240, 235, .16) !important; }

/* Forms inside dark bands */
.ou-dark .w-input,
.ou-dark .contact-field,
.ou-dark .form-input,
.ou-dark .input {
  background-color: rgba(244, 240, 235, .08) !important;
  color: var(--ou-cream) !important;
  border-color: rgba(244, 240, 235, .25) !important;
}
.ou-dark .w-input::placeholder,
.ou-dark .contact-field::placeholder,
.ou-dark .form-input::placeholder,
.ou-dark .input::placeholder { color: rgba(244, 240, 235, .55) !important; }

/* Preserve generous editorial breathing room on flipped bands */
.ou-dark.section,
section.ou-dark,
div.ou-dark { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }

/* --------------------------------------------------------------------------
   14. UTILITIES — reveal, counters, cursor
   -------------------------------------------------------------------------- */
/* Scroll reveal (interactions.js toggles .is-in). NEVER applied by CSS to
   Webflow data-w-id elements — those keep their inline IX2 opacity. */
.ou-js .ou-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
              transform .8s cubic-bezier(.22, 1, .36, 1);
}
.ou-js .ou-reveal.is-in {
  opacity: 1;
  transform: none;
}
.ou-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Count-up stats */
.ou-counter {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ou-ink);
}
.ou-dark .ou-counter { color: var(--ou-cream); }
.ou-counter-label {
  color: var(--ou-muted);
  font-size: .8em;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ou-dark .ou-counter-label { color: rgba(244, 240, 235, .55); }

/* Custom cursor accent (positioned by interactions.js). The native cursor
   stays visible — this is an accent, not a replacement. */
.ou-cursor,
.ou-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: normal;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
.ou-cursor {
  width: 8px;
  height: 8px;
  background-color: var(--ou-ink);
}
.ou-cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(11, 11, 11, .4);
  background: transparent;
}
@media (hover: none), (pointer: coarse) {
  .ou-cursor,
  .ou-cursor-ring { display: none !important; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION — silence everything this sheet animates
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ou-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ou-marquee-track { animation: none; }
  .button:hover,
  .w-button:hover,
  .button-with-animation:hover,
  .button-arrow-link:hover,
  .button:active,
  .w-button:active,
  .button-with-animation:active,
  .button-arrow-link:active { transform: none; }
  .card-testimonial,
  .step-box-main,
  .service-item,
  .blog-content,
  .option-wrapper,
  .toggle-main,
  .pricing-card,
  .ou-tilt {
    will-change: auto;
    transform: none !important;
    transition: none;
  }
  .ou-cursor,
  .ou-cursor-ring { display: none !important; }
}

/* == Post-QA fixes ============================================== */
/* Empty CMS-bound pills (missing category/date) render as stray outlines */
.category-tag-main.w-dyn-bind-empty,
.category-0.w-dyn-bind-empty { display: none; }

/* Template-vendor ad badge */
.templates-badge-wrapper { display: none !important; }

/* Logo band: was absolutely positioned over the hero (overlay on the old
   dark design) — pull it into normal flow as a rounded ink panel */
.hero .absolut-logo.ou-dark {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: 48px;
  border-radius: 28px;
  overflow: hidden;
}

/* Webflow's mouse-parallax keeps writing inline opacity on the hero text
   (rest state ~0.54). !important beats inline styles, so pin the revealed
   state; the .ou-reveal entrance still animates 0 -> 1. */
.hero-title-flex .ou-reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* The .left-part panel was a baked-in template photo; as a plain ink band
   it sat empty. Center a cream OU mark in it via mask. */
.left-part {
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-part::after {
  content: "";
  width: 62%;
  aspect-ratio: 1 / 1;
  background: url(../brand/ou-growth.svg) center / contain no-repeat;
}

/* Nav logo: the horizontal lockup PNG scales to ~98vw on small screens
   (Webflow srcset sizing) and blows up the navbar — cap it */
.navbar-component .logotype {
  height: 44px;
  width: auto;
  max-width: none;
}
@media (max-width: 767px) {
  .navbar-component .logotype { height: 34px; }
}

/* The logo band inherits overlay-era width rules from the template and its
   2000px carousel track pushed the page wider than the viewport on mobile */
.hero .absolut-logo.ou-dark {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.absolut-logo .carousel,
.absolut-logo .logo-carousel-wrap { max-width: none; }
body { overflow-x: clip; }

/* Webflow staging badge (injected at runtime by webflow.js) */
.w-webflow-badge { display: none !important; }

/* ==========================================================================
   V2 "ASCENT" ADDITIONS — appended after the v1 sheet, same load order
   (theme.css still loads AFTER the Webflow stylesheet on every page).
   Scope: stat-card equalization, card breathing room, split-text styles,
   scroll progress bar, back-to-top, ticker guardrails, logo caps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   V2.1 EQUAL STAT CARDS — the two quick-stack grids (home + about).
   Webflow sizes these grids with #w-node ID rules (1.25fr 1fr at desktop),
   so the override matches ID specificity and wins on source order.
   Home grid:  #w-node-_0b734165-e6cf-f08a-eb1f-eaa6b604af6b-b201e134
   About grid: #w-node-_97fdcd3d-5cf4-f2ab-d969-3b5a7d71d000-b201e193
   Layout: cell 1 (.left-part ink panel) keeps Webflow's grid-row: span 2;
   the two .service-item stat cards fill column 2, one per row. 1fr rows
   make the two cards equal height — half the panel each, same gap.
   -------------------------------------------------------------------------- */
#w-node-_0b734165-e6cf-f08a-eb1f-eaa6b604af6b-b201e134,
#w-node-_97fdcd3d-5cf4-f2ab-d969-3b5a7d71d000-b201e193 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 28px;
  grid-row-gap: 28px;
}
/* Class-level backstop for any future quick-stack without those IDs */
.w-layout-layout.quick-stack {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  padding: 0;
}
/* Cells stop hugging content — cards stretch to fill their track */
.quick-stack > .w-layout-cell {
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
}
/* Both stat cards: identical padding + min-height, full cell fill */
.quick-stack .service-item {
  width: 100%;
  height: 100%;
  min-height: 250px;
  padding: 40px 36px;
  justify-content: center;
}
@media (max-width: 767px) {
  /* Re-assert Webflow's single-column stack (the base rule above would
     otherwise beat Webflow's own 767px ID rule on source order) */
  #w-node-_0b734165-e6cf-f08a-eb1f-eaa6b604af6b-b201e134,
  #w-node-_97fdcd3d-5cf4-f2ab-d969-3b5a7d71d000-b201e193 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .quick-stack .service-item {
    min-height: 220px;
    padding: 32px 28px;
  }
}

/* --------------------------------------------------------------------------
   V2.2 BREATHING ROOM — cards were set tight to their borders
   (.step-box-main ships with NO padding in the Webflow sheet).
   -------------------------------------------------------------------------- */
.step-box-main { padding: 40px 36px; }
.card-testimonial { padding: 40px 36px; } /* was 50/48/25 — cramped bottom */
.blog-content { padding: 28px 28px 32px; } /* was padding-top:20px only */

/* /blog/ wraps each item in .w-dyn-item.ou-tilt (already a card surface) —
   drop the inner card chrome so it doesn't render as a card-in-a-card */
.w-dyn-item.ou-tilt .blog-content {
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
}

/* Card paragraphs: taller line, capped measure */
.step-box-main p,
.card-testimonial p,
.blog-content p,
.service-item p {
  line-height: 1.65;
  max-width: 46ch;
}
/* Stat cards are center-aligned — keep the capped text centered */
.service-item p {
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

/* Card headings: consistent 12px below */
.step-main-title { margin-bottom: 12px; }
.blog-title { display: block; margin-bottom: 12px; }

/* Icon chips */
.step-icon { margin-bottom: 24px; }

/* Grid air: .grid-3-columns (six feature cards) and .blog-grid already sit
   at >=28px gaps; .team-grid (team + pricing client cards) dips to 15px at
   tablet — pin every breakpoint to a consistent 28px floor */
.team-grid {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
}
/* Client/team photo cards: name + role were touching the card border */
.team-wrapper { padding-bottom: 24px; }

/* --------------------------------------------------------------------------
   V2.3 SPLIT-TEXT — word-mask reveal (ascent.js wraps words in
   .ou-split-w > .ou-split-i and toggles .is-in on the .ou-split root).
   Hidden state is gated on .ou-js exactly like the v1 reveals.
   -------------------------------------------------------------------------- */
.ou-split-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.ou-split-i { display: inline-block; }
.ou-js .ou-split-i {
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--ou-si, 0) * 55ms);
}
.ou-js .ou-split.is-in .ou-split-i { transform: none; }

/* --------------------------------------------------------------------------
   V2.4 SCROLL PROGRESS BAR — transparent track, ink fill, above the navbar
   (.w-nav is z-index 1000, .navbar-component 999; cursor stays top at 9999)
   -------------------------------------------------------------------------- */
#ou-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}
#ou-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ou-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   V2.5 BACK-TO-TOP — ink circle, cream arrow, revealed via .is-visible
   -------------------------------------------------------------------------- */
#ou-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: var(--ou-ink);
  color: var(--ou-cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  box-shadow: 0 14px 28px -14px rgba(11, 11, 11, .45);
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
#ou-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#ou-top:hover {
  background-color: #2A2119;
  transform: translateY(-3px);
}
#ou-top:active { transform: scale(.96); }
#ou-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   V2.6 TICKER GUARDRAILS — sizing/typography that hold up even before
   ascent.css arrives (ticker markup exists only on the homepage, but these
   selectors are scoped and safe everywhere)
   -------------------------------------------------------------------------- */
/* .ou-ticker visual styles live in ascent.css (homepage only) */
.ou-dark .ou-ticker { color: rgba(244, 240, 235, .7); }

/* --------------------------------------------------------------------------
   V2.7 LOGO CAPS — the new nav wordmark is WIDE; cap by height so the
   navbar never overflows, and cap the footer lockup by width
   -------------------------------------------------------------------------- */
.ou-logo-nav {
  height: 40px;
  width: auto;
  max-width: none;
}
@media (max-width: 1200px) {
  /* 991-1200px: nav links + wide wordmark get tight — shrink the mark */
  .ou-logo-nav { height: 34px; }
}
@media (max-width: 767px) {
  .ou-logo-nav { height: 32px; }
}
.ou-logo-footer {
  width: 150px;
  height: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   V2.8 REDUCED MOTION + PRINT — silence everything V2 animates
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ou-split-i,
  .ou-js .ou-split-i {
    transform: none !important;
    transition: none !important;
  }
  #ou-top {
    transition: none;
    transform: none;
  }
  #ou-top:hover,
  #ou-top:active { transform: none; }
  #ou-progress span { transition: none; }
}
@media print {
  #ou-progress,
  #ou-top,
  .ou-ticker { display: none !important; }
}

/* About-page brand tile (replaced old PNG content image) */
.ou-wordmark-tile { width: 100%; max-width: 420px; height: auto; padding: 12%; }

/* == FAQ accordion breathing room ===================================== */
.faq-grid { grid-row-gap: 18px; grid-column-gap: 28px; }
.toggle-main .drodpwdown-toggle-main {
  padding: 26px 28px;
  align-items: center;
}
.toggle-main .drodpwdown-toggle-main > div:first-child {
  line-height: 1.4;
  padding-right: 16px;
}
.toggle-main .toggle-content > *,
.toggle-main .toggle-content p {
  padding: 22px 30px 30px;
  margin: 0;
  line-height: 1.75;
  max-width: 62ch;
}
.toggle-main .toggle-content {
  border-top: 1px solid rgba(11, 11, 11, 0.07);
}
.toggle-main .toggle-icon { flex-shrink: 0; }

/* Clients-grid monogram placeholder (players awaiting a headshot) */
.ou-player-mono {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ou-ink);
  color: var(--ou-cream);
  font-size: clamp(56px, 9vw, 104px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* "Our Clients" homepage section — stripped to heading + button, centered */
.ou-clients-strip {
  display: block !important;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.ou-clients-strip .button-flex { justify-content: center; }

/* Hide Netlify's edge-injected "Powered by Netlify" HUD badge (free-plan
   iframe appended to <body>; not part of our source). */
#nl-badge-frame,
#nl-hud-frame,
iframe[title="Powered by Netlify"],
iframe[title="Netlify"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}