/* ===========================================================================
   OmniGrowth Widgets — component styles for the plugin's Elementor widgets.

   Every colour, size, radius and easing below resolves to a --og-* token
   declared in the omnigrowthx theme's style.css (which mirrors the static
   build's assets/css/tokens.css — data/ai/02-design-tokens.md). Nothing here
   invents a colour; if a value is not a token it is a documented derivative
   of one (the rgba() forms of --og-white / --og-obsidian the theme itself
   already uses for scrims and watermarks).

   Class prefix is `ogw-`, not the theme's `og-`, on purpose: these classes
   sit on plain markup the widgets print themselves, never on an Elementor
   wrapper, so they need none of the theme's `.elementor .elementor-element.og-x`
   specificity games — and a shared name could otherwise be caught by one of
   the theme's own rules (theme gotchas #3 and #20).
   =========================================================================== */

.ogw-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ogw-empty { color: var(--og-steel); margin: 0; }

/* ---------------------------------------------------------------------------
   Chips — filter / sort buttons and the sector tabs
   --------------------------------------------------------------------------- */
.ogw-chip,
.ogw-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius);
  background: transparent;
  color: var(--og-white);
  font-family: var(--og-font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.18s var(--og-ease), background 0.18s var(--og-ease), color 0.18s var(--og-ease);
}
.ogw-chip:hover,
.ogw-tabs__tab:hover { border-color: var(--og-gold-rule); }
.ogw-chip[aria-pressed="true"],
.ogw-tabs__tab[aria-selected="true"] {
  background: var(--og-gradient);
  border-color: transparent;
}
.ogw-chip__count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--og-steel);
}
.ogw-chip[aria-pressed="true"] .ogw-chip__count { color: var(--og-white); opacity: 0.75; }

/* ---------------------------------------------------------------------------
   Portfolio — toolbar
   --------------------------------------------------------------------------- */
.ogw-pf--grid { position: relative; }

.ogw-pf__toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--og-hairline);
}
/* Sticky under the site header on desktop, the way the reference keeps its
   filters in reach through a 28-card grid. 72px is .og-site-header's
   min-height; the admin bar variable is WordPress's own. */
@media (min-width: 1025px) {
  .ogw-pf__toolbar {
    position: sticky;
    top: var(--og-header-bottom, calc(72px + var(--wp-admin--admin-bar--height, 0px)));
    z-index: 20;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.ogw-pf__control {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}
/* line-height = chip height, so the label sits on the first row of chips
   however many rows they wrap to. */
.ogw-pf__label {
  flex: 0 0 auto;
  min-width: 3.5rem;
  line-height: 40px;
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-pf__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.ogw-pf__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.ogw-pf__search { position: relative; flex: 0 1 300px; min-width: 220px; }
.ogw-pf__search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--og-steel); pointer-events: none;
}
.ogw-pf__search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius);
  background: var(--og-surface);
  color: var(--og-white);
  font-family: var(--og-font-body);
  font-size: 0.9375rem;
  transition: border-color 0.18s var(--og-ease);
}
.ogw-pf__search input::placeholder { color: var(--og-steel); opacity: 1; }
.ogw-pf__search input:focus { border-color: var(--og-gold-rule); }
.ogw-pf__search input::-webkit-search-cancel-button { filter: invert(0.6); }

.ogw-pf__count {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}

.ogw-pf__empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--og-steel);
}
.ogw-pf__empty[hidden] { display: none; }
.ogw-pf__reset {
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--og-white);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--og-gold);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ogw-pf__reset:hover { color: var(--og-gold); }

/* ---------------------------------------------------------------------------
   Portfolio — grid and card
   --------------------------------------------------------------------------- */
.ogw-pf__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ogw-gap, var(--og-gap));
}
/* Three-up at the 1136px content width, a 25px gap (not the token's 24px)
   makes each card (1136 − 2×25) / 3 = 362px, so the picture inside its 1px
   border is exactly 360px — the preview videos' native width, drawn 1:1 at
   whole-pixel positions instead of resampled at 360.66px (2026-10-07).
   Grid (og-widgets.js reads this gap) and carousel alike. */
@media (min-width: 1081px) {
  .ogw-pf__grid,
  .ogw-carousel { --ogw-gap: 25px; }
}
.ogw-pf__item { min-width: 0; }
.ogw-pf__item[hidden] { display: none; }

/* Animated layout (og-widgets.js initPortfolio, after antlerinsights.com's
   portfolio grid). The script adds --js and positions every card with
   `transform`; the entrance and exit use the separate `translate` / `scale`
   properties so they compose with it. Without the script, the plain CSS grid
   above is what renders. */
.ogw-pf__grid--js {
  display: block;
  position: relative;
  /* No height transition on purpose: the page height has to settle in the
     same frame as the layout, or the scroll anchoring measures against a
     height that is still shrinking. */
}
.ogw-pf__grid--js .ogw-pf__item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  translate: 0 22px;
  transition:
    transform 0.55s var(--og-ease),
    opacity 0.4s var(--og-ease),
    translate 0.5s var(--og-ease),
    scale 0.35s var(--og-ease);
  will-change: transform;
}
.ogw-pf__grid--js .ogw-pf__item.is-in { opacity: 1; translate: 0 0; }
.ogw-pf__grid--js .ogw-pf__item.is-hidden { opacity: 0; scale: 0.94; pointer-events: none; }
/* The first placement is a jump, not a move. */
.ogw-pf__grid--booting .ogw-pf__item,
.ogw-pf__grid--no-motion .ogw-pf__item { transition: none; }

.ogw-pf__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease);
}
.ogw-pf__card:hover { transform: translateY(-4px); box-shadow: var(--og-glow-soft); }
/* Maroon gradient left edge on hover — the same accent as .og-card::before. */
.ogw-pf__card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  z-index: 3;
  background: var(--og-gradient-v);
  opacity: 0;
  transition: opacity 0.18s var(--og-ease);
  pointer-events: none;
}
.ogw-pf__card:hover::before { opacity: 1; }

/* Thumbnail: a browser frame around either the screenshot or a monogram on a
   palette surface. The dot matrix is the Part 3.4 hero texture, at the same
   5% / 24px as the hero scrim. */
.ogw-pf__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--og-border);
  background-color: var(--og-graphite);
  background-image: radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--og-white);
}
.ogw-pf__thumb--obsidian { background-color: var(--og-obsidian); }
.ogw-pf__thumb--maroon {
  background-image: radial-gradient(rgba(245, 245, 245, 0.06) 1px, transparent 1px), var(--og-gradient);
  background-size: 24px 24px, cover;
}
.ogw-pf__thumb--gold .ogw-pf__mono { color: var(--og-gold); }

.ogw-pf__shot,
.ogw-pf__video {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 30px;
  width: 100%;
  height: calc(100% - 30px);
  max-width: none;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--og-ease);
}
/* The still zooms on hover; the video does not — a 1.03 scale would resample
   the 360px video the card is sized to show 1:1. */
.ogw-pf__thumb:hover .ogw-pf__shot { transform: scale(1.03); }

/* Preview video: video > screenshot > monogram. It sits over both (later in
   the markup) but stays invisible until it is actually playing, so the still
   underneath is the card while it loads, with JS off, under reduced motion /
   Save-Data, and if the file fails. og-widgets.js adds .is-playing. */
.ogw-pf__video {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--og-ease), transform 0.6s var(--og-ease);
}
.ogw-pf__video.is-playing { opacity: 1; }

.ogw-pf__browser {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  background: rgba(10, 10, 10, 0.78);
  border-bottom: 1px solid var(--og-border);
}
.ogw-pf__dots { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.ogw-pf__dots i {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(245, 245, 245, 0.18);
}
.ogw-pf__url {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--og-steel);
}

.ogw-pf__mono {
  position: absolute;
  inset: 30px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--og-font-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--og-white);
}

.ogw-pf__hint {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid var(--og-border);
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.85);
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--og-white);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--og-ease), transform 0.18s var(--og-ease);
}
.ogw-pf__thumb:hover .ogw-pf__hint,
.ogw-pf__thumb:focus-visible .ogw-pf__hint { opacity: 1; transform: none; }

.ogw-pf__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  padding: 1.5rem 1.5rem 1.375rem;
}
.ogw-pf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.ogw-pf__sector {
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}
/* Gradient, not gold: nine of these share one grid, and gold is a signal
   capped at ~2 per composition (data/ai/06-invariants.md #3). Badges are one
   of the named uses of the maroon gradient (02-design-tokens.md). */
.ogw-pf__badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--og-gradient);
  font-family: var(--og-font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--og-white);
}
.ogw-pf__title {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--og-white);
}
.ogw-pf__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--og-steel);
}
.ogw-pf__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.ogw-pf__tags li {
  padding: 3px 9px;
  border: 1px solid var(--og-border);
  border-radius: 4px;
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--og-steel);
}
.ogw-pf__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--og-hairline);
}
.ogw-pf__link,
.ogw-pf__visit,
.ogw-case__visit,
.ogw-case__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--og-white);
  transition: color 0.16s var(--og-ease);
}
.ogw-pf__link::after { content: "\2192"; transition: transform 0.16s var(--og-ease); }
.ogw-pf__link:hover { color: var(--og-gold); }
.ogw-pf__link:hover::after { transform: translateX(3px); }
.ogw-pf__visit { margin-left: auto; color: var(--og-steel); }
.ogw-pf__visit:hover { color: var(--og-white); }

/* ---------------------------------------------------------------------------
   Carousel — native scroll-snap; the script only adds prev / next / dots
   --------------------------------------------------------------------------- */
.ogw-carousel {
  --ogw-cols: var(--ogw-per, 3);
  position: relative;
}
.ogw-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ogw-cols) - 1) * var(--ogw-gap, var(--og-gap))) / var(--ogw-cols));
  gap: var(--ogw-gap, var(--og-gap));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the cards' 4px hover lift inside the scroll box, which would
     otherwise clip it. */
  padding-block: 6px 4px;
  margin-block: -6px -4px;
}
.ogw-carousel__track::-webkit-scrollbar { display: none; }
.ogw-carousel__track > * { scroll-snap-align: start; min-width: 0; }
.ogw-carousel__track:focus-visible { outline-offset: 6px; }

.ogw-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.ogw-carousel.is-static .ogw-carousel__nav { display: none; }
.ogw-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius);
  background: var(--og-surface);
  color: var(--og-white);
  cursor: pointer;
  transition: border-color 0.16s var(--og-ease), color 0.16s var(--og-ease), opacity 0.16s var(--og-ease);
}
.ogw-carousel__btn:hover:not(:disabled) { border-color: var(--og-gold); color: var(--og-gold); }
.ogw-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.ogw-carousel__btn svg { display: block; }

.ogw-carousel__dots { display: flex; align-items: center; gap: 2px; }
/* The button is a 24px target; the visible dot is its ::before. */
.ogw-carousel__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ogw-carousel__dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 4px;
  background: var(--og-border);
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--og-ease), background 0.2s var(--og-ease);
}
.ogw-carousel__dot:hover::before { background: var(--og-steel); }
.ogw-carousel__dot[aria-current="true"]::before { width: 22px; background: var(--og-gradient); }

/* The portfolio card stretches to the tallest card in view. */
.ogw-pf--carousel .ogw-pf__item { height: 100%; }

/* ---------------------------------------------------------------------------
   Card carousel card (OG Card Carousel)
   --------------------------------------------------------------------------- */
.ogw-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  height: 100%;
  padding: 2rem 1.75rem 2.125rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease);
}
.ogw-ccard::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  border-radius: var(--og-radius-lg) 0 0 var(--og-radius-lg);
  background: var(--og-gradient-v);
  opacity: 0;
  transition: opacity 0.18s var(--og-ease);
  pointer-events: none;
}
.ogw-ccard:hover { transform: translateY(-4px); box-shadow: var(--og-glow-soft); }
.ogw-ccard:hover::before { opacity: 1; }
/* Elementor icons (Icons_Manager::render_icon) arrive either as an inline
   <svg class="e-font-icon-svg"> (painted by `fill`, not `color` — theme
   gotcha #15) or as an <i> font glyph; colour and size both. */
.ogw-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.ogw-icon svg { width: 1em; height: 1em; fill: currentColor; }
.ogw-icon i { font-size: 1em; color: currentColor; }
/* align-self: the card is a flex column, so the icon box would stretch to the
   card's width and .ogw-icon's justify-content would centre the glyph in it.
   Left-aligned with the title and text (2026-10-08). */
.ogw-ccard__icon { align-self: flex-start; color: var(--og-gold); font-size: 1.75rem; }
.ogw-ccard__title {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--og-white);
}
.ogw-ccard__title a:hover { color: var(--og-gold); }
.ogw-ccard__text { margin: 0; color: var(--og-steel); line-height: var(--og-lh-body); }

/* ---------------------------------------------------------------------------
   Case studies
   --------------------------------------------------------------------------- */
.ogw-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--og-gap);
  align-items: start;
}
.ogw-case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  padding: 2.25rem 2.25rem 1.75rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  /* Anchor jumps land below the sticky header, not under it. */
  /* On top of the theme's html scroll-padding-top (the sticky header). */
  scroll-margin-top: 24px;
}
/* Gradient line divider across the top — Part 3.4's maroon-to-crimson rule. */
.ogw-case::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--og-gradient);
}
.ogw-case:target { box-shadow: var(--og-glow-soft); border-color: var(--og-gold-rule); }

.ogw-case__head { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; align-items: start; }
/* Same numeral treatment as Enterprise's operator-model principles
   (.og-principle__num) — Cormorant italic, gold. */
.ogw-case__num {
  font-family: var(--og-font-accent);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--og-gold);
}
.ogw-case__heading { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ogw-case__sector {
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-case__title {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--og-white);
}
.ogw-case__kicker {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--og-steel);
}
.ogw-case__relevance { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--og-white); }
.ogw-case__list-title {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--og-hairline);
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-case__features { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ogw-case__features li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 0 0.875rem 1.5rem;
}
.ogw-case__features li + li { border-top: 1px solid var(--og-hairline); }
.ogw-case__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.875rem + 0.62em);
  width: 10px;
  height: 2px;
  background: var(--og-gradient);
}
.ogw-case__feature {
  font-family: var(--og-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--og-white);
}
.ogw-case__feature-text { font-size: 0.9375rem; line-height: 1.6; color: var(--og-steel); }
.ogw-case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--og-hairline);
}
.ogw-case__visit:hover { color: var(--og-gold); }
.ogw-case__back { color: var(--og-steel); }
.ogw-case__back:hover { color: var(--og-white); }

/* ---------------------------------------------------------------------------
   Portfolio stats
   --------------------------------------------------------------------------- */
.ogw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ogw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 2rem;
  text-align: center;
  border-left: 1px solid var(--og-gold-rule);
}
.ogw-stat:first-child { border-left: 0; }
.ogw-stat__num {
  font-family: var(--og-font-display);
  font-size: var(--og-size-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--og-gold);
}
.ogw-stat__label {
  font-family: var(--og-font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--og-steel);
}

/* ---------------------------------------------------------------------------
   Sector tabs
   --------------------------------------------------------------------------- */
.ogw-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.75rem;
}
/* Six sectors fit one row inside the 1136px wrap at this size. */
.ogw-tabs__tab { min-height: 44px; gap: 0.45rem; padding: 0 0.85rem; font-size: 0.8125rem; }
.ogw-tabs__icon { color: var(--og-gold); font-size: 1rem; }
.ogw-tabs__tab[aria-selected="true"] .ogw-tabs__icon { color: var(--og-white); }

.ogw-tabs__panel {
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
}
.ogw-tabs__panel[hidden] { display: none; }
.ogw-tabs__panel:focus-visible { outline-offset: 4px; }
.ogw-tabs__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 500;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-tabs__heading {
  max-width: 780px;
  margin: 0 0 2rem;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--og-white);
}
.ogw-tabs__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.ogw-tabs__col--fix { padding-left: 2.5rem; border-left: 1px solid var(--og-hairline); }
.ogw-tabs__col-title {
  margin: 0 0 1.125rem;
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-tabs__items { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ogw-tabs__items li { position: relative; padding-left: 1.625rem; line-height: 1.6; }
.ogw-tabs__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 1px;
  background: var(--og-steel);
}
.ogw-tabs__items--pain li { color: var(--og-steel); }
.ogw-tabs__items--fix li { color: var(--og-white); }
.ogw-tabs__items--fix li::before { height: 2px; background: var(--og-gradient); }

.ogw-tabs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--og-hairline);
}
.ogw-tabs__note { margin: 0; font-size: 0.875rem; color: var(--og-steel); }

/* ---------------------------------------------------------------------------
   Links to the detail pages (2026-10-07)
   --------------------------------------------------------------------------- */
.ogw-pf__title a { color: inherit; transition: color 0.16s var(--og-ease); }
.ogw-pf__title a:hover { color: var(--og-gold); }
.ogw-case__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--og-white);
  transition: color 0.16s var(--og-ease);
}
.ogw-case__more:hover { color: var(--og-gold); }

/* ---------------------------------------------------------------------------
   OG Case Detail — the portfolio detail page, one widget per section.
   Layout after the reference the maintainer chose (webvio.co case study);
   every colour, size and face is an --og-* token. Gold appears twice per
   page — the title's descriptor and the takeaway quote (invariant #3).
   --------------------------------------------------------------------------- */
.ogw-cd__head { display: flex; flex-direction: column; gap: 1rem; }
.ogw-cd__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 500;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__rule { flex: 0 0 32px; height: 1px; background: var(--og-gradient); }
.ogw-cd__h2 {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h2);
  font-weight: 700;
  line-height: var(--og-lh-heading);
  letter-spacing: -0.02em;
  color: var(--og-white);
  text-wrap: balance;
}
.ogw-cd__text { display: flex; flex-direction: column; gap: 1.1rem; }
.ogw-cd__text p { margin: 0; font-size: var(--og-size-lead); line-height: var(--og-lh-body); color: var(--og-steel); }
.ogw-cd__text p:first-child { color: var(--og-white); }

/* Two columns: head left, copy right (the project, process, outcome). */
.ogw-cd--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 4rem;
  align-items: start;
}
.ogw-cd--narrow { display: flex; flex-direction: column; gap: 2rem; max-width: 820px; }

/* Hero */
.ogw-cd--hero { display: flex; flex-direction: column; gap: 1.5rem; }
.ogw-cd__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--og-font-display);
  font-size: 0.8125rem;
  color: var(--og-steel);
}
.ogw-cd__crumbs a { color: var(--og-steel); transition: color 0.16s var(--og-ease); }
.ogw-cd__crumbs a:hover { color: var(--og-white); }
.ogw-cd__crumbs [aria-current] { color: var(--og-white); }
.ogw-cd__title {
  max-width: 980px;
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h1);
  font-weight: 700;
  line-height: var(--og-lh-display);
  letter-spacing: -0.022em;
  color: var(--og-white);
  text-wrap: balance;
}
.ogw-cd__bar { font-weight: 300; color: var(--og-steel); }
.ogw-cd__lead { max-width: 720px; margin: 0; font-size: var(--og-size-lead); line-height: var(--og-lh-body); color: var(--og-steel); }

.ogw-cd__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.5rem 0 0;
  padding: 1.75rem 0 0;
  list-style: none;
  border-top: 1px solid var(--og-border);
}
.ogw-cd__stats li { display: flex; flex-direction: column; gap: 0.5rem; padding-right: 1.5rem; }
.ogw-cd__stats li + li { padding-left: 1.5rem; border-left: 1px solid var(--og-border); }
.ogw-cd__stat-num {
  font-family: var(--og-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--og-white);
}
.ogw-cd__stat-label { font-size: 0.9375rem; color: var(--og-steel); }

.ogw-cd__metabar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--og-border);
  border-bottom: 1px solid var(--og-border);
}
.ogw-cd__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; }
.ogw-cd__visit > span[aria-hidden] { margin-left: 0.4em; }
.ogw-cd__meta div { display: flex; flex-direction: column; gap: 0.25rem; }
.ogw-cd__meta dt {
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__meta dd { margin: 0; font-family: var(--og-font-display); font-size: 0.9375rem; font-weight: 500; color: var(--og-white); }

/* Browser frame — the card's thumbnail, at page size. */
.ogw-cd__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  background-color: var(--og-graphite);
  background-image: radial-gradient(rgba(245, 245, 245, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ogw-cd--hero .ogw-cd__frame { margin-top: 1rem; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.ogw-cd__frame .ogw-pf__browser { height: 34px; }
.ogw-cd__shot,
.ogw-cd__video {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 34px;
  width: 100%;
  height: calc(100% - 34px);
  max-width: none;
  object-fit: cover;
  object-position: top center;
}
.ogw-cd__frame .ogw-pf__mono { inset: 34px 0 0 0; font-size: clamp(3rem, 2rem + 4vw, 6rem); }

.ogw-cd__tech { display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--og-border); }
.ogw-cd__subhead {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 500;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__tags li { padding: 6px 12px; font-size: 0.8125rem; color: var(--og-white); }

/* Every screen: desktop video + a phone whose screenshot scrolls. */
.ogw-cd__devices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: end;
  margin-top: 3rem;
}
.ogw-cd__devices--single { grid-template-columns: minmax(0, 1fr); }
.ogw-cd__device { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.ogw-cd__caption {
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
  text-align: center;
}
.ogw-cd__phone {
  padding: 10px;
  border: 1px solid var(--og-border);
  border-radius: 36px;
  background: var(--og-graphite);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.ogw-cd__screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 26px; background: var(--og-obsidian); }
.ogw-cd__mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0%;
  animation: ogw-cd-scroll 26s ease-in-out 1.5s infinite alternate;
}
.ogw-cd__phone:hover .ogw-cd__mobile { animation-play-state: paused; }
@keyframes ogw-cd-scroll {
  0%, 8% { object-position: 50% 0%; }
  92%, 100% { object-position: 50% 100%; }
}

/* Build highlights */
.ogw-cd__build {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--og-gap);
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.ogw-cd__build-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 1.75rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
}
.ogw-cd__num {
  grid-row: span 2;
  font-family: var(--og-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--og-steel);
}
.ogw-cd__build-title,
.ogw-cd__card-title {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: var(--og-size-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--og-white);
}
.ogw-cd__build-text,
.ogw-cd__card-text { margin: 0; color: var(--og-steel); line-height: var(--og-lh-body); }

/* Challenges & solutions */
.ogw-cd__pairs { display: flex; flex-direction: column; gap: var(--og-gap); margin-top: 3rem; }
.ogw-cd__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--og-gap); }
.ogw-cd__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  overflow: hidden;
}
.ogw-cd__card--solution::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--og-gradient-v);
}
.ogw-cd__card-label {
  margin: 0;
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__card-label span { color: var(--og-white); }

/* Outcome / takeaway */
.ogw-cd__more { margin: 1.5rem 0 0; }
.ogw-cd__more a {
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--og-white);
}
.ogw-cd__more a:hover { color: var(--og-gold); }
.ogw-cd__quote {
  margin: 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 1px solid var(--og-gold-rule);
}
.ogw-cd__quote p {
  margin: 0;
  font-family: var(--og-font-accent);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--og-gold);
}

/* Next project */
.ogw-cd__next-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ogw-cd__all {
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__all:hover { color: var(--og-white); }
.ogw-cd__next {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  color: var(--og-white);
  transition: transform 0.18s var(--og-ease), box-shadow 0.18s var(--og-ease), border-color 0.18s var(--og-ease);
}
.ogw-cd__next:hover { transform: translateY(-4px); box-shadow: var(--og-glow-soft); border-color: rgba(176, 32, 64, 0.5); }
.ogw-cd__next-body { display: flex; flex-direction: column; gap: 1rem; }
.ogw-cd__next-sector {
  font-family: var(--og-font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-cd__next-title {
  font-family: var(--og-font-display);
  font-size: var(--og-size-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.ogw-cd__next-desc { color: var(--og-steel); font-weight: 600; }
.ogw-cd__next-cta {
  font-family: var(--og-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ogw-cd__next:hover .ogw-cd__next-cta { color: var(--og-gold); }

@media (max-width: 1080px) {
  .ogw-cd--split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .ogw-cd__devices { grid-template-columns: minmax(0, 1fr) 220px; gap: 1.75rem; }
}
@media (max-width: 900px) {
  .ogw-cd__build,
  .ogw-cd__pair { grid-template-columns: minmax(0, 1fr); }
  .ogw-cd__next { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
  .ogw-cd__stats { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ogw-cd__stats li,
  .ogw-cd__stats li + li { padding: 0; border-left: 0; }
  .ogw-cd__devices { grid-template-columns: minmax(0, 1fr); }
  .ogw-cd__device--mobile { width: min(260px, 100%); margin-inline: auto; }
  .ogw-cd__build-item { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
  .ogw-cd__num { grid-row: auto; font-size: 1.125rem; }
  .ogw-cd__card { padding: 1.5rem; }
  .ogw-cd__frame .ogw-pf__browser { height: 28px; }
  .ogw-cd__shot, .ogw-cd__video { top: 28px; height: calc(100% - 28px); }
}

/* ---------------------------------------------------------------------------
   OG Funnel Kit + OG Countdown (2026-10-07, /sme-velocity/)
   A page carrying .ogw-funnel loses the header's navigation and header CTA
   (the maintainer's brief: one exit, the buy button) and gets a fixed alert
   bar on top; the header sits below it. --ogw-bar-h is measured by the script.
   --------------------------------------------------------------------------- */
body:has(.ogw-funnel) .elementor-location-header .elementor-element.og-nav,
body:has(.ogw-funnel) .elementor-location-header .elementor-element.og-site-header__cta { display: none; }

body:has(.ogw-funnel__bar) { padding-top: var(--ogw-bar-h, 40px); }
body:has(.ogw-funnel__bar) .elementor-location-header { top: var(--ogw-bar-h, 40px); }
.admin-bar:has(.ogw-funnel__bar) .elementor-location-header { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ogw-bar-h, 40px)); }
html:has(.ogw-funnel__bar) { scroll-padding-top: calc(var(--og-header-bottom, 72px) + 8px); }

.ogw-funnel__bar {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 101;
  padding: 0.6rem var(--og-gutter);
  background: var(--og-gradient);
  color: var(--og-white);
  text-align: center;
  font-family: var(--og-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.admin-bar .ogw-funnel__bar { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { .admin-bar .ogw-funnel__bar { top: 0; } }
.ogw-funnel__bar p { margin: 0; }
.ogw-funnel__when { white-space: nowrap; }
.ogw-funnel__timer {
  display: inline-block;
  margin-left: 0.35em;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.35);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/* In the editor the bar stays in the flow, where it can be clicked. */
.ogw-funnel__bar--edit { position: relative; }

.ogw-funnel__progress { position: fixed; left: 0; right: 0; top: 0; z-index: 102; height: 3px; pointer-events: none; }
.ogw-funnel__progress span {
  display: block;
  height: 100%;
  background: var(--og-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.ogw-funnel__dialog {
  width: min(520px, calc(100vw - 2 * var(--og-gutter)));
  padding: 2.5rem 2.25rem 2.25rem;
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  background: var(--og-surface);
  color: var(--og-white);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), var(--og-glow-soft);
}
.ogw-funnel__dialog::backdrop { background: rgba(10, 10, 10, 0.78); backdrop-filter: blur(4px); }
.ogw-funnel__dialog[open] { animation: ogw-fn-in 0.28s var(--og-ease); }
@keyframes ogw-fn-in { from { opacity: 0; transform: translateY(12px); } }
.ogw-funnel__close-form { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
.ogw-funnel__close {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--og-steel);
  font-size: 1.75rem; line-height: 1;
  cursor: pointer;
}
.ogw-funnel__close:hover { color: var(--og-white); }
.ogw-funnel__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--og-font-display);
  font-size: var(--og-size-label);
  font-weight: 500;
  letter-spacing: var(--og-track-label);
  text-transform: uppercase;
  color: var(--og-gold);
}
.ogw-funnel__title { margin: 0 0 0.875rem; font-family: var(--og-font-display); font-size: var(--og-size-h3); font-weight: 700; line-height: 1.2; color: var(--og-white); }
.ogw-funnel__text { margin: 0 0 1.75rem; color: var(--og-steel); font-size: var(--og-size-lead); }
.ogw-funnel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ogw-funnel__alt { color: var(--og-steel); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.ogw-funnel__alt:hover { color: var(--og-white); }

.ogw-countdown__units {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--og-font-display);
  color: var(--og-white);
}
.ogw-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 4.5rem; }
.ogw-countdown__unit b {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ogw-countdown__unit small {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--og-steel);
}
.ogw-countdown__sep { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 300; line-height: 1.25; color: var(--og-steel); }
.ogw-countdown__after { margin: 0; color: var(--og-steel); }
@media (max-width: 480px) {
  .ogw-countdown__units { gap: 0.35rem; }
  .ogw-countdown__unit { min-width: 3.5rem; }
}

/* ---------------------------------------------------------------------------
   Reduced motion — the theme already zeroes transition durations; the hover
   lifts are transforms, so switch those off outright too.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ogw-pf__card:hover,
  .ogw-ccard:hover,
  .ogw-pf__thumb:hover .ogw-pf__shot { transform: none; }
  /* Autoplaying motion is exactly what this setting asks to avoid: the script
     never loads the video, and this keeps it out even if something else does. */
  .ogw-pf__video,
  .ogw-cd__video { display: none; }
  .ogw-cd__mobile { animation: none; }
  .ogw-cd__next:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Responsive — the theme's breakpoints (1080 / 900 / 640).
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ogw-pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ogw-carousel { --ogw-cols: min(var(--ogw-per, 3), 2); }
}

@media (max-width: 1024px) {
  .ogw-chip { min-height: 44px; }
  .ogw-pf__label { line-height: 44px; }
}

@media (max-width: 900px) {
  .ogw-cases { grid-template-columns: 1fr; }
  .ogw-tabs__cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .ogw-tabs__col--fix { padding-left: 0; padding-top: 1.75rem; border-left: 0; border-top: 1px solid var(--og-hairline); }
}

@media (max-width: 640px) {
  .ogw-pf__grid { grid-template-columns: 1fr; }
  .ogw-pf__search { flex-basis: 100%; }
  .ogw-pf__control { flex-direction: column; gap: 0.5rem; }
  .ogw-pf__label { line-height: 1.4; }
  /* One card and a sliver of the next, so the track reads as swipeable. */
  .ogw-carousel__track { grid-auto-columns: 86%; }
  .ogw-case { padding: 1.75rem 1.5rem 1.5rem; }
  .ogw-case__head { grid-template-columns: 40px 1fr; gap: 1rem; }
  .ogw-case__num { font-size: 2rem; }
  .ogw-stats { grid-template-columns: 1fr; gap: 1.75rem; }
  .ogw-stat { border-left: 0; padding: 0; }
  .ogw-stat + .ogw-stat { padding-top: 1.75rem; border-top: 1px solid var(--og-gold-rule); }
  /* Six stacked tab buttons would push the panel a full screen down; on a
     phone they become one swipeable row instead, bled to the screen edges. */
  .ogw-tabs__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--og-gutter));
    padding-inline: var(--og-gutter);
  }
  .ogw-tabs__list::-webkit-scrollbar { display: none; }
  .ogw-tabs__tab { flex: 0 0 auto; }
  .ogw-tabs__foot .og-btn { width: 100%; }
}