/* =========================================================
   ORIIBRANDS ENERGY THEME — WordPress theme stylesheet
   Reproduces the design tokens from the original Next.js site
   (globals.css) so the same look can be edited with core
   Gutenberg blocks inside the Block Editor.
   ========================================================= */


:root {
  --background: #0a0e0f;
  --background-rgb: 10, 14, 15;
  --foreground: #f4f6f5;
  --card: #101617;
  --primary: #1cb1d6;
  --primary-rgb: 28, 177, 214;
  --primary-foreground: #000000;
  --secondary: #182022;
  --muted-foreground: #9aa7a8;
  --accent: #be5943;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  /* Used for subtle hover/highlight tints (nav items, cards, icons) — a
     light tint in dark mode, a dark tint in light mode, same visual role
     ("a bit of contrast against the current background") either way. */
  --highlight-rgb: 255, 255, 255;

  --button-bg: #182022;
  --button-text: #f4f6f5;
  --button-hover-text: #000000;
  --button-soft-bg: rgba(28,177,214,.14);

  /* Text-safe variants of Primary/Accent — see body.theme-light below for
     why these differ from --primary/--accent in Light mode. */
  --primary-text: var(--primary);
  --accent-text: #c46955;

  --gradient-brand: linear-gradient(
    60deg,
    #14b2da 0%,
    #5b9ba2 28%,
    #799a93 50%,
    #b95b43 74%,
    #be5943 100%
  );
  --gradient-heading: var(--gradient-brand);

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Exo 2", ui-sans-serif, system-ui, sans-serif;
  --font-heading-weight: 700;
  --body-font-weight: 400;
  --logo-font-weight: 800;

  --container: 1280px;
  --content-width: 1200px;
  --reading-width: 760px;
  --content-spacing-top: 72px;
  --content-spacing-bottom: 72px;
  --page-gap: 64px;
}

/* =========================================================
   Light mode — Theme Options → Colours → Color scheme.
   Only the neutral tones (background/foreground/card/border/muted) flip;
   the brand colours (Primary, Accent, the 5-stop gradient) stay exactly
   as set under Colours & Brand Gradient, so the site still reads as the
   same brand in both modes. Applied either by an explicit "Light" choice
   (.theme-light) or, when set to "Auto", by the visitor's own OS/browser

   ========================================================= */
body.theme-light {
  --background: #f7f8f8;
  --background-rgb: 247, 248, 248;
  --foreground: #0d1315;
  --card: #ffffff;
  --secondary: #eef1f1;
  --muted-foreground: #5b6566;
  --border: rgba(10, 14, 15, 0.1);
  --border-strong: rgba(10, 14, 15, 0.18);
  --highlight-rgb: 10, 14, 15;
  --button-bg: #eef1f1;
  --button-text: #0d1315;
  /* Static fallback matching the default brand colours — recomputed from
     whatever Primary/Accent are actually set to by inc/customizer.php's
     dynamic CSS, which loads after this and wins on the cascade. */
  --primary-text: #12738b;
  --accent-text: #a14b38;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

/* Keyboard-navigation focus ring, in the brand Primary colour, applied
   consistently across every interactive element on the site. Only shows
   for keyboard/assistive-tech focus (:focus-visible), never on mouse
   click, so it doesn't add visual noise for mouse/touch users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: var(--body-font-weight);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--foreground);
}
/* Heading colour mode (Design System → Typography → Heading colour).
   Only applies to plain heading text — a heading containing its own
   differently-coloured inline elements (a link, an icon) will show
   those in their own colour rather than the gradient, the same
   trade-off as any background-clip:text technique. */
body.heading-color-gradient h1,
body.heading-color-gradient h2,
body.heading-color-gradient h3,
body.heading-color-gradient h4,
body.heading-color-gradient h5,
body.heading-color-gradient h6 {
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
p { color: var(--muted-foreground); margin: 0 0 1em; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
section { border-bottom: 1px solid var(--border); }

/* Utility: brand gradient text */
.has-oriibrands-gradient-text,
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   Buttons — shared base + 5 selectable hover effects
   (Theme Options → Layout & Buttons → Button hover effect)
   Applies uniformly to hand-written CTAs (.btn-gradient), the native
   Gutenberg Button block (.wp-block-button__link) 
   "Gradient Button" widget (.oriibrands-btn).
   ========================================================= */
.btn-gradient,
.wp-block-button__link,
.oriibrands-btn {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}
.btn-gradient.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.oriibrands-btn.oriibrands-btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--button-text);
}

/* Effect layer: a pseudo-element sitting behind the button's own text
   (negative z-index inside the isolated stacking context created above,
   so it never needs the text to be wrapped in its own <span>). Each
   effect below decides what — if anything — this layer does. */
.btn-gradient::before,
.wp-block-button__link::before,
.oriibrands-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* ---- Effect: Slide fill (default) — gradient sweeps in from the left ---- */
.button-effect-slide .btn-gradient::before,
.button-effect-slide .wp-block-button__link::before,
.button-effect-slide .oriibrands-btn::before {
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.button-effect-slide .btn-gradient:hover::before,
.button-effect-slide .btn-gradient:focus-visible::before,
.button-effect-slide .wp-block-button__link:hover::before,
.button-effect-slide .wp-block-button__link:focus-visible::before,
.button-effect-slide .oriibrands-btn:hover::before,
.button-effect-slide .oriibrands-btn:focus-visible::before { transform: scaleX(1); }
.button-effect-slide .btn-gradient:hover,
.button-effect-slide .btn-gradient:focus-visible,
.button-effect-slide .wp-block-button__link:hover,
.button-effect-slide .wp-block-button__link:focus-visible,
.button-effect-slide .oriibrands-btn:hover,
.button-effect-slide .oriibrands-btn:focus-visible { color: var(--button-hover-text); }

/* ---- Effect: Flowing gradient — slow continuous movement, even idle ---- */
.button-effect-flow .btn-gradient,
.button-effect-flow .wp-block-button__link,
.button-effect-flow .oriibrands-btn {
  background: var(--gradient-brand);
  background-size: 260% 260%;
  color: var(--button-hover-text);
  animation: oriibrands-btn-flow 9s ease-in-out infinite;
}
.button-effect-flow .btn-gradient.btn-outline,
.button-effect-flow .wp-block-button.is-style-outline .wp-block-button__link,
.button-effect-flow .oriibrands-btn.oriibrands-btn-outline {
  background: transparent;
  color: var(--button-text);
  animation: none;
}
.button-effect-flow .btn-gradient:hover,
.button-effect-flow .wp-block-button__link:hover,
.button-effect-flow .oriibrands-btn:hover { animation-duration: 3s; }
@keyframes oriibrands-btn-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Effect: Shine sweep — a light glare passes across on hover ---- */
.button-effect-shine .btn-gradient::before,
.button-effect-shine .wp-block-button__link::before,
.button-effect-shine .oriibrands-btn::before {
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.button-effect-shine .btn-gradient:hover::before,
.button-effect-shine .btn-gradient:focus-visible::before,
.button-effect-shine .wp-block-button__link:hover::before,
.button-effect-shine .wp-block-button__link:focus-visible::before,
.button-effect-shine .oriibrands-btn:hover::before,
.button-effect-shine .oriibrands-btn:focus-visible::before { transform: translateX(120%); }
.button-effect-shine .btn-gradient:hover,
.button-effect-shine .btn-gradient:focus-visible,
.button-effect-shine .wp-block-button__link:hover,
.button-effect-shine .wp-block-button__link:focus-visible,
.button-effect-shine .oriibrands-btn:hover,
.button-effect-shine .oriibrands-btn:focus-visible { background: var(--gradient-brand); color: var(--button-hover-text); }

/* ---- Effect: Pulse glow — a soft glowing ring pulses on hover ---- */
.button-effect-pulse .btn-gradient:hover,
.button-effect-pulse .btn-gradient:focus-visible,
.button-effect-pulse .wp-block-button__link:hover,
.button-effect-pulse .wp-block-button__link:focus-visible,
.button-effect-pulse .oriibrands-btn:hover,
.button-effect-pulse .oriibrands-btn:focus-visible {
  background: var(--gradient-brand);
  color: var(--button-hover-text);
  animation: oriibrands-btn-pulse 1.4s ease-out infinite;
}
@keyframes oriibrands-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(28,177,214,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(28,177,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,177,214,0); }
}

/* ---- Effect: None — instant colour change, no animation ---- */
.button-effect-none .btn-gradient:hover,
.button-effect-none .btn-gradient:focus-visible,
.button-effect-none .wp-block-button__link:hover,
.button-effect-none .wp-block-button__link:focus-visible,
.button-effect-none .oriibrands-btn:hover,
.button-effect-none .oriibrands-btn:focus-visible { background: var(--gradient-brand); color: var(--button-hover-text); }

/* Respect the OS-level "reduce motion" preference regardless of the chosen
   effect — falls back to an instant, non-animated colour change. */
@media (prefers-reduced-motion: reduce) {
  .btn-gradient, .wp-block-button__link, .oriibrands-btn { animation: none !important; transition: color .2s ease, background .2s ease !important; }
  .btn-gradient::before, .wp-block-button__link::before, .oriibrands-btn::before { transition: none !important; transform: none !important; }
  .btn-gradient:hover, .btn-gradient:focus-visible,
  .wp-block-button__link:hover, .wp-block-button__link:focus-visible,
  .oriibrands-btn:hover, .oriibrands-btn:focus-visible { background: var(--gradient-brand); color: var(--button-hover-text); }
}

/* Per-button size variations — pick "Small" / "Large" from the block's
   Styles panel in the editor. Two classes = higher specificity than the
   single-class rule above, so these win without needing !important. */
.wp-block-button.is-style-small .wp-block-button__link { padding: 9px 20px; font-size: 13px; }
.wp-block-button.is-style-large .wp-block-button__link { padding: 16px 34px; font-size: 16px; }

/* Per-button shadow — pick "Shadow" from the block's Styles panel. */
.wp-block-button.is-style-oriibrands-shadow .wp-block-button__link { box-shadow: 0 8px 24px -8px rgba(28,177,214,.45); }

/* ---- Style: Soft (tonal) — a light tinted idle background, then joins
   the same hover-effect system as Fill/Outline (Slide/Flow/Shine/Pulse/
   None), exactly like Outline already does. ---- */
.wp-block-button.is-style-oriibrands-soft .wp-block-button__link,
.btn-gradient.btn-soft,
.oriibrands-btn.oriibrands-btn-soft {
  background: var(--button-soft-bg);
  border-color: transparent;
  color: var(--button-text);
}

/* ---- Style: Ghost — always the most minimal/discreet option. Text only,
   no background or border, ever — deliberately does NOT join the hover
   effect system, so it never "fills in" like the other styles. Only the
   text colour (and an underline) change on hover. Placed after the effect
   rules above and with one extra class, so it reliably wins regardless of
   which global hover effect (Slide/Flow/Shine/Pulse/None) is selected. ---- */
.wp-block-button.is-style-oriibrands-ghost .wp-block-button__link,
.btn-gradient.btn-ghost,
.oriibrands-btn.oriibrands-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary-text);
  padding-left: 6px;
  padding-right: 6px;
  animation: none;
  box-shadow: none;
}
.wp-block-button.is-style-oriibrands-ghost .wp-block-button__link::before,
.btn-gradient.btn-ghost::before,
.oriibrands-btn.oriibrands-btn-ghost::before { display: none; content: none; }
.wp-block-button.is-style-oriibrands-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-oriibrands-ghost .wp-block-button__link:focus-visible,
.btn-gradient.btn-ghost:hover,
.btn-gradient.btn-ghost:focus-visible,
.oriibrands-btn.oriibrands-btn-ghost:hover,
.oriibrands-btn.oriibrands-btn-ghost:focus-visible {
  background: transparent;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  animation: none;
  box-shadow: none;
}

/* ---------- Header ---------- */
:root {
  --header-height-desktop: 80px;
  --header-height-mobile: 64px;
}
html { scroll-padding-top: var(--header-height-desktop); }
.site-header {
  position: sticky;
  inset-inline: 0;
  top: 0;
  z-index: 10000;
  isolation: isolate;
  overflow: visible !important;
  height: var(--header-height-desktop);
  min-height: var(--header-height-desktop);
  padding: 16px 0;
  box-sizing: border-box;
  background: rgba(var(--background-rgb), 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
  will-change: background, border-color, box-shadow;
}
/* Transparent header is a true overlay. When sticky behaviour is enabled,
   keep the header fixed in BOTH visual states. Switching from absolute to
   fixed while the user scrolls back to the top would re-introduce the exact
   layout jump this overlay architecture is designed to eliminate. */
body.has-header-hero-overlay.header-sticky-enabled .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
}
body.has-header-hero-overlay.header-sticky-enabled .site-header[data-header-state="top"] {
  background: linear-gradient(to bottom, rgba(var(--background-rgb),.7), rgba(var(--background-rgb),.2) 70%, transparent);
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.has-header-hero-overlay.header-sticky-enabled .site-header[data-header-state="scrolled"] {
  background: rgba(var(--background-rgb), 0.95);
  backdrop-filter: blur(10px);
  border-color: var(--border);
}
/* Transparent overlay without sticky behaviour should scroll away with the
   page. It remains absolute and therefore never reserves flow space. */
body.has-header-hero-overlay:not(.header-sticky-enabled) .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(var(--background-rgb),.7), rgba(var(--background-rgb),.2) 70%, transparent);
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header.is-scrolled {
  background: rgba(var(--background-rgb), 0.95);
  backdrop-filter: blur(10px);
  border-color: var(--border);
}
.site-header .container {
  overflow: visible !important;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  height: 48px;
  min-height: 48px;
  gap: 24px;
  position: relative;
}

.header-actions { display: none; align-items: center; gap: 20px; flex: none; }

/* Header layout presets (Theme Options → Header → Header layout).
   Only apply at desktop width — below 880px everything always collapses
   to logo + hamburger (.mobile-nav), regardless of the chosen layout. */
@media (min-width: 880px) {
  .header-actions { display: flex; min-width: 0; }
  .site-logo, .primary-nav, .header-actions { min-width: 0; }

  /* Default: logo anchored to the shared container's left edge; navigation
     and actions occupy the remaining right-side tracks. */
  .header-layout-left-grouped .site-logo { grid-column: 1; }
  .header-layout-left-grouped .primary-nav { grid-column: 2; justify-self: end; min-width: 0; }
  .header-layout-left-grouped .header-actions { grid-column: 3; justify-self: end; }

  /* Spread: navigation is centred within the middle track while logo and
     actions remain anchored to the container edges. */
  .header-layout-left-spread .site-logo { grid-column: 1; }
  .header-layout-left-spread .primary-nav { grid-column: 2; justify-self: center; min-width: 0; }
  .header-layout-left-spread .header-actions { grid-column: 3; justify-self: end; }

  /* Centered variants use a real three-track grid rather than absolute
     positioning. This keeps the logo mathematically centred and prevents
     different nav/action widths from shifting it. */
  .header-layout-center-left .site-logo,
  .header-layout-center-right .site-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: static;
    transform: none;
    margin: 0;
  }
  .header-layout-center-left .primary-nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 0;
  }
  .header-layout-center-left .header-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .header-layout-center-right .primary-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
  }
  .header-layout-center-right .header-actions {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Intermediate desktop/tablet widths: keep the three header zones intact
 * without allowing navigation/actions to force the shared container wider. */
@media (min-width: 880px) and (max-width: 1100px) {
  .site-header .container {
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  }
  .primary-nav ul { gap: 2px; }
  .primary-nav a { padding-inline: 10px; font-size: 13px; }
  .header-actions { gap: 12px; }
  .header-actions .header-cta { padding-inline: 14px; }
}

.site-logo {
  font-family: var(--font-heading);
  font-weight: var(--logo-font-weight);
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 0;
}
.site-logo span { margin-left: .25em; }
.site-logo-image { display: flex; align-items: center; }
.site-logo-image img { display: block; height: auto; max-height: 40px; width: auto; }

.primary-nav {
  display: none;
  position: relative;
  z-index: 100;
  overflow: visible !important;
}
.primary-nav ul { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0; padding: 0; }
.primary-nav > ul > li { position: relative; flex: none; }
.primary-nav a {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: background .2s ease, color .2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { background: rgba(var(--highlight-rgb),.1); color: var(--foreground); outline: none; }
.primary-nav > ul > li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
  transition: transform .2s ease;
  flex: none;
}
.primary-nav > ul > li.menu-item-has-children:hover > a::after,
.primary-nav > ul > li.menu-item-has-children:focus-within > a::after,
.primary-nav > ul > li.menu-item-has-children.is-open > a::after {
  transform: rotate(225deg) translateY(1px);
}
.primary-nav .sub-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
  z-index: 1000;
}
.primary-nav .sub-menu .menu-item-has-children { position: relative; }
.primary-nav .sub-menu .sub-menu {
  top: -8px;
  left: calc(100% + 8px);
  margin-top: 0;
  transform: translateX(6px);
}
.primary-nav .sub-menu .menu-item-has-children:hover > .sub-menu,
.primary-nav .sub-menu .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .sub-menu .menu-item-has-children.is-open > .sub-menu {
  transform: translateX(0);
}
.primary-nav > .primary-menu > li > .sub-menu.dropdown-align-right {
  left: auto;
  right: 0;
}
.primary-nav .sub-menu .sub-menu.sub-menu-align-left {
  left: auto;
  right: calc(100% + 8px);
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li.is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.primary-nav .sub-menu a { border-radius: 12px; padding: 10px 14px; display: block; width: 100%; }
.primary-nav .sub-menu a:focus-visible { box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.35); }

.header-cta { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav { display: none; border-top: 1px solid var(--border); padding: 16px 24px 24px; background: var(--background); }
.mobile-nav[aria-hidden="true"] { pointer-events: none; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a { display: block; padding: 10px 4px; font-size: 15px; color: var(--muted-foreground); border-radius: 10px; }
.mobile-nav a:focus-visible, .mobile-nav .submenu-toggle:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.mobile-nav .menu-item-has-children { position: relative; }
.mobile-nav .menu-item-has-children > a { padding-right: 40px; }
.mobile-nav .submenu-toggle {
  position: absolute;
  top: 2px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--foreground);
  cursor: pointer;
}
.mobile-nav .submenu-toggle svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mobile-nav .menu-item-has-children.is-expanded > .submenu-toggle svg { transform: rotate(180deg); }
.mobile-nav .sub-menu {
  padding-left: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.mobile-nav .menu-item-has-children.is-expanded > .sub-menu { max-height: 800px; }
.mobile-nav .header-cta-mobile { margin-top: 16px; display: block; }

@media (min-width: 880px) {
  .primary-nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: none;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--background) 0%, rgba(var(--background-rgb),.6) 55%, rgba(var(--background-rgb),.1) 100%),
    linear-gradient(to right, rgba(var(--background-rgb),.7) 0%, transparent 60%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; padding: 160px 24px 80px; max-width: var(--container); margin-inline: auto; }
.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  margin-bottom: 20px;
}
.hero-inner h1 { max-width: 760px; font-size: clamp(2.2rem, 4.5vw, 3.75rem); margin-bottom: 20px; }
.hero-inner > p { max-width: 560px; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0; }
.trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; padding-top: 32px; margin: 32px 0 0; border-top: 1px solid var(--border); }
.trust-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.trust-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-brand); flex: none; }

/* ---------- Generic section spacing ---------- */
.section { padding: 88px 0; }
.section-alt { background: rgba(var(--highlight-rgb),.03); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.section-head h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.section-link { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary-text); }

/* two-col intro (What we do) */
.split-intro { display: grid; gap: 40px; grid-template-columns: 1fr; }
.split-intro h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.split-intro p { font-size: 18px; max-width: 640px; }
@media (min-width: 992px) { .split-intro { grid-template-columns: 340px 1fr; gap: 64px; } }

/* Why-us pillars */
.pillars { display: grid; gap: 48px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.pillar-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--background); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--primary-text); font-family: var(--font-heading); font-weight: 700; }
.pillars h3 { font-size: 18px; margin-bottom: 12px; }
.pillars p { font-size: 14px; }

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 48px; background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: var(--background); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 190px; transition: background .3s ease; }
.service-card:hover { background: rgba(var(--highlight-rgb),.04); }
.service-card .num { color: var(--primary-text); font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.service-card h3 { font-size: 15px; margin-bottom: 8px; }
.service-card p { font-size: 13px; margin: 0; }

/* How we work steps */
.steps { display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step-number-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.step-number-row span:first-child { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.step-number-row .line { flex: 1; height: 1px; background: var(--border); }
.steps h3 { font-size: 20px; margin-bottom: 12px; }
.steps p { font-size: 14px; }

/* Media + text (Partnerships) */
.media-text { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) { .media-text { grid-template-columns: 1fr 1fr; gap: 64px; } }
.media-text figure { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.media-text figure img { width: 100%; height: 100%; object-fit: cover; }
.media-text .text p { font-size: 18px; max-width: 480px; }

/* CTA banner */
.cta-banner { position: relative; padding: 120px 0; text-align: center; overflow: hidden; border-bottom: none; }
.cta-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .4; }
.cta-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--background) 0%, rgba(var(--background-rgb),.7) 60%, rgba(var(--background-rgb),.9) 100%); }
.cta-banner .container { position: relative; z-index: 1; max-width: 760px; }
.cta-banner h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.cta-banner p { font-size: 18px; margin-inline: auto; }
.cta-banner .hero-actions { justify-content: center; }

/* Generic page hero (for interior pages) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
/* The actual gradient/overlay (shape/colour/intensity, or the image
   itself) is set per-page via an inline style attribute — see
   inc/hero-glow-meta.php — so these rules only ever handle positioning. */
.page-hero-bg-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.page-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .hero-eyebrow { display: block; text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero p { max-width: 640px; margin-inline: auto; font-size: 17px; }

/* Generic content page */
/* Standard vertical breathing room. Header height, hero spacing and content
   spacing are intentionally independent: no section uses negative offsets
   to compensate for the header. */
.page-content { padding: var(--content-spacing-top) 0 var(--content-spacing-bottom); }

/* Elementor owns the internal layout. Keep its sections full-width while
   giving the page itself a predictable 64px breathing space above and below.
   Margins are used here instead of padding so Elementor full-bleed sections
   are not inset horizontally. */
.oriibrands-elementor-page {
  margin-block: var(--page-gap);
}
body.has-header-hero-overlay .oriibrands-elementor-page {
  margin-top: 0;
}
@media (max-width: 767px) {
  .oriibrands-elementor-page { margin-block: 56px; }
  body.has-header-hero-overlay .oriibrands-elementor-page { margin-top: 0; }
}

.page-content > .container { max-width: var(--content-width); }
/* Full Width content layout (Theme Options → Layout & Buttons → Content layout) */
body.content-layout-full-width .page-content > .container { max-width: none; padding-inline: 40px; }
@media (max-width: 600px) {
  body.content-layout-full-width .page-content > .container { padding-inline: 20px; }
}

/* Blog sidebar (Theme Options → Layout & Buttons → Blog sidebar) */
body.has-blog-sidebar .page-content > .container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
body.has-blog-sidebar-left .page-content > .container { grid-template-columns: 320px 1fr; }
body.has-blog-sidebar-left .page-content .entry-content { order: 2; }
body.has-blog-sidebar-left .page-content .blog-sidebar { order: 1; }
@media (max-width: 900px) {
  body.has-blog-sidebar .page-content > .container { grid-template-columns: 1fr; }
  body.has-blog-sidebar-left .page-content .entry-content,
  body.has-blog-sidebar-left .page-content .blog-sidebar { order: initial; }
}
.blog-sidebar-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.blog-sidebar-widget h3 { margin-top: 0; font-size: 16px; font-family: var(--font-heading); }
.blog-sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.blog-sidebar-widget li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.blog-sidebar-widget li:last-child { border-bottom: none; }
.blog-sidebar-widget a { color: var(--muted-foreground); }
.blog-sidebar-widget a:hover { color: var(--primary-text); }
.page-content .entry-content > * { max-width: var(--reading-width); margin-left: auto; margin-right: auto; }
.page-content .entry-content > .alignwide,
.page-content .entry-content > .alignfull { max-width: none; }
.entry-content h2 { margin-top: 2em; font-size: 1.75rem; }
.entry-content h3 { margin-top: 1.5em; font-size: 1.25rem; }
.entry-content ul, .entry-content ol { color: var(--muted-foreground); }
.entry-content a { color: var(--primary-text); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.site-footer-overlay { position: absolute; inset: 0; pointer-events: none; }
.site-footer > .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr); padding: 72px 0; --footer-columns: 4; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(var(--footer-columns, 4), 1fr); } }
.footer-brand { grid-column: span 2; }
@media (min-width: 768px) { .footer-brand { grid-column: span 1; } }
.footer-brand p { max-width: 280px; font-size: 14px; margin-top: 16px; }
.footer-widget-area .widget { margin-bottom: 24px; }
.footer-widget-area .widget:last-child { margin-bottom: 0; }
.footer-empty-hint { font-size: 13px; font-style: italic; border: 1px dashed var(--border-strong); border-radius: 12px; padding: 16px; }
.footer-widget-area .widget h3,
.footer-widget-area .widget .widgettitle { font-size: 14px; margin: 0 0 16px; color: var(--footer-widget-title, var(--foreground)); font-family: var(--font-heading); letter-spacing: .01em; }
.site-footer .wp-block-heading { color: var(--footer-widget-title, var(--foreground)); }
.site-footer .wp-block-latest-posts,
.site-footer .wp-block-categories,
.site-footer .wp-block-page-list,
.site-footer .wp-block-navigation__container { margin: 0; padding: 0; list-style: none; }
.site-footer .wp-block-latest-posts li,
.site-footer .wp-block-categories li,
.site-footer .wp-block-page-list li,
.site-footer .wp-block-navigation-item { margin: 0 0 10px; }
.site-footer .wp-block-latest-posts li:last-child,
.site-footer .wp-block-categories li:last-child { margin-bottom: 0; }
.site-footer .wp-block-latest-posts__featured-image { border-radius: 10px; overflow: hidden; }
.site-footer .wp-block-latest-posts__post-title,
.site-footer .wp-block-categories a,
.site-footer .wp-block-page-list a,
.site-footer .wp-block-navigation-item__content { color: var(--muted-foreground); text-decoration: none; transition: color .2s ease; }
.site-footer .wp-block-latest-posts__post-title:hover,
.site-footer .wp-block-categories a:hover,
.site-footer .wp-block-page-list a:hover,
.site-footer .wp-block-navigation-item__content:hover { color: var(--foreground); }
.site-footer .wp-block-latest-posts__post-date { color: var(--muted-foreground); font-size: 11px; opacity: .8; }
.site-footer .wp-block-search { margin: 0; }
.site-footer .wp-block-search__inside-wrapper { border: 1px solid var(--border-strong); border-radius: 12px; padding: 4px; background: rgba(var(--highlight-rgb), .04); }
.site-footer .wp-block-search__input { min-width: 0; border: 0; background: transparent; color: var(--foreground); padding: 10px 12px; }
.site-footer .wp-block-search__button { border: 0; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); padding: 10px 14px; font-weight: 700; }
.site-footer .wp-block-social-links { margin: 0; }
.site-footer .wp-block-tag-cloud a { color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; text-decoration: none; font-size: 12px !important; }
.site-footer .oriibrands-footer-widget-lead { color: var(--muted-foreground); line-height: 1.8; }
.site-footer .oriibrands-footer-widget-kicker { color: var(--primary-text); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.site-footer .oriibrands-footer-widget-cta { border: 1px solid var(--border-strong); border-radius: 16px; padding: 20px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .13), rgba(var(--highlight-rgb), .03)); }
.site-footer .oriibrands-footer-widget-cta h3 { margin-bottom: 10px; }
.site-footer .oriibrands-footer-widget-cta p:not(.oriibrands-footer-widget-kicker) { color: var(--muted-foreground); font-size: 13px; }
.footer-widget-area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-widget-area a { font-size: 14px; color: var(--muted-foreground); }
.footer-widget-area a:hover { color: var(--foreground); }

/* Social icons (header + footer) */
.social-links { display: flex; align-items: center; gap: 12px; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted-foreground);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-icon svg { width: 16px; height: 16px; }

/* Button icons (Hero, CTA, etc.) — the span can be placed
   either side of the button text in markup; CSS order decides which
   side it visually renders on, so the same markup pattern always works
   regardless of "before"/"after" choice. */
.button-icon { display: inline-flex; align-items: center; flex: none; }
.button-icon svg { width: 16px; height: 16px; }
.button-icon-before { order: -1; }
.button-icon-after { order: 1; }
.social-icon:hover { color: var(--foreground); border-color: var(--border-strong); background: rgba(var(--highlight-rgb),.06); }
.footer-brand .social-links { margin-top: 20px; }
.header-social { margin-right: 4px; }

/* Search icon + expandable form (desktop) */
.header-search { position: relative; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: none;
  background: transparent; color: var(--foreground); cursor: pointer;
}
.search-toggle svg { width: 18px; height: 18px; }
.search-toggle:hover { background: rgba(var(--highlight-rgb),.1); }
.header-search-form {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
}
.header-search.is-open .header-search-form { display: block; }
.oriibrands-search-form { display: flex; align-items: center; gap: 8px; }
.oriibrands-search-form .search-field {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--foreground); font-family: var(--font-sans); font-size: 14px;
  padding: 8px 10px;
}
.oriibrands-search-form .search-field::placeholder { color: var(--muted-foreground); }
.oriibrands-search-form .search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; border: none;
  background: var(--secondary); color: var(--foreground); cursor: pointer; flex: none;
}
.oriibrands-search-form .search-submit svg { width: 15px; height: 15px; }
.oriibrands-search-form .search-submit:hover { background: var(--gradient-brand); }
.mobile-search { margin: 16px 0; }
.mobile-search .oriibrands-search-form {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 4px 4px 8px;
}
.mobile-nav .social-links { margin-top: 16px; }
.footer-col h3 { font-size: 14px; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14px; color: var(--muted-foreground); }
.footer-col a:hover { color: var(--foreground); }
.footer-bottom { border-top: 1px solid var(--border); padding: 28px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted-foreground); }

/* Skip link accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--foreground); color: var(--background); padding: 12px 20px; z-index: 999; }
.skip-link:focus { left: 16px; top: 16px; }
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--foreground);
  color: var(--background);
  display: block;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 12px 20px;
  position: absolute;
  left: 16px;
  top: 16px;
  width: auto;
  z-index: 999;
}

/* Alignment helpers used by Gutenberg */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }

/* ---------- Comments (Insights articles) ---------- */
.oriibrands-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.oriibrands-comments-title { font-size: 1.5rem; margin-bottom: 24px; }
.oriibrands-comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.oriibrands-comment-list .children { list-style: none; margin: 0; padding-left: 32px; }
.oriibrands-comment-list .comment-body {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.oriibrands-comment-list .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.oriibrands-comment-list .comment-author .avatar { border-radius: 999px; display: block; }
.oriibrands-comment-list .comment-author .fn { font-family: var(--font-heading); font-weight: 600; font-style: normal; color: var(--foreground); }
.oriibrands-comment-list .comment-metadata { font-size: 12px; color: var(--muted-foreground); }
.oriibrands-comment-list .comment-metadata a { color: inherit; }
.oriibrands-comment-list .comment-content p { margin: 8px 0 0; }
.oriibrands-comment-list .reply a { font-size: 12px; font-weight: 600; color: var(--primary-text); }
.oriibrands-comments-closed { color: var(--muted-foreground); font-size: 14px; }

.comment-respond { max-width: 640px; }
.comment-reply-title { font-size: 1.25rem; margin-bottom: 16px; }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--foreground); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form .comment-notes,
.comment-form .logged-in-as { font-size: 13px; color: var(--muted-foreground); }
.comment-form .form-submit input[type="submit"] {
  font-family: var(--font-heading);
  cursor: pointer;
}

/* Contact Page template (page-templates/template-contact.php) */
.oriibrands-contact-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .oriibrands-contact-layout { grid-template-columns: 1fr; }
}
.oriibrands-contact-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}
.oriibrands-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
@media (max-width: 560px) {
  .oriibrands-contact-grid { grid-template-columns: 1fr; }
}
.oriibrands-contact-form .oriibrands-field { margin: 0; }
.oriibrands-contact-form .oriibrands-field-wide { grid-column: 1 / -1; margin-top: 20px; }
.oriibrands-contact-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--foreground);
}
.oriibrands-contact-form input[type="text"],
.oriibrands-contact-form input[type="email"],
.oriibrands-contact-form input[type="tel"],
.oriibrands-contact-form input[type="date"],
.oriibrands-contact-form input[type="file"],
.oriibrands-contact-form select,
.oriibrands-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-family: inherit;
  font-size: 14px;
}
.oriibrands-contact-form textarea { resize: vertical; min-height: 120px; }
.oriibrands-contact-form input::placeholder,
.oriibrands-contact-form textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
.oriibrands-contact-form input:focus-visible,
.oriibrands-contact-form select:focus-visible,
.oriibrands-contact-form textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.oriibrands-contact-required-note { margin: 0 0 16px; font-size: 12px; color: var(--muted-foreground); }
.oriibrands-required-mark { color: var(--primary-text); }
.oriibrands-field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }
/* The "Choose File" button is a browser-native sub-element that doesn't
   inherit the page's colours by default — style it explicitly so it
   never falls back to the OS's own light-grey button inside a dark
   field (or vice-versa in light mode). */
.oriibrands-contact-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.oriibrands-contact-form input[type="file"]::file-selector-button:hover {
  background: var(--background);
}
.oriibrands-contact-note { margin: 20px 0 0; font-size: 13px; color: var(--muted-foreground); }
.oriibrands-contact-form button[type="submit"] { margin-top: 16px; }
.oriibrands-contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.oriibrands-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oriibrands-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.oriibrands-contact-card-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--primary-text);
  margin-top: 2px;
}
.oriibrands-contact-card-icon svg { width: 100%; height: 100%; }
.oriibrands-contact-card-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.oriibrands-contact-card a,
.oriibrands-contact-card span:not(.oriibrands-contact-card-label) {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}
.oriibrands-contact-card a:hover { color: var(--primary-text); text-decoration: underline; }

.oriibrands-contact-notice {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 14px;
}
.oriibrands-contact-notice-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #166534; }
.oriibrands-contact-notice-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #b91c1c; }
body.theme-dark .oriibrands-contact-notice-success { color: #4ade80; }
body.theme-dark .oriibrands-contact-notice-error { color: #f87171; }

/* Background Decoration — a global, site-wide decorative glow behind the
   header/hero area (Theme Options → Background Decoration). Separate
   from the per-page "Page Title Background" glow. */
.oriibrands-bg-decoration {
  position: absolute;
  top: -140px;
  width: var(--bg-decoration-size, 900px);
  height: var(--bg-decoration-size, 900px);
  max-width: 140vw;
  pointer-events: none;
  z-index: 0;
  filter: blur(64px);
  background: var(--bg-decoration-color, transparent);
  contain: layout paint;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}
/* Position: horizontal placement uses left/right/margin, never transform
   — that's reserved entirely for animation, so the two never conflict. */
.oriibrands-bg-decoration-pos-center { left: 50%; margin-left: calc(var(--bg-decoration-size, 900px) / -2); }
.oriibrands-bg-decoration-pos-left   { left: -8%; }
.oriibrands-bg-decoration-pos-right  { left: auto; right: -8%; }

/* Shapes */
.oriibrands-bg-decoration-circle   { border-radius: 50%; }
.oriibrands-bg-decoration-blob     { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.oriibrands-bg-decoration-ring {
  border-radius: 50%;
  background: transparent;
  border: calc(var(--bg-decoration-size, 900px) * .12) solid var(--bg-decoration-color, transparent);
}
.oriibrands-bg-decoration-teardrop { border-radius: 0% 50% 50% 50%; }

/* Animations — each keyframe only ever uses transform/opacity/filter,
   never left/top, so it composes cleanly with the position classes
   above regardless of which one is active. */
.oriibrands-bg-decoration-anim-drift { animation: oriibrands-decoration-drift 28s ease-in-out infinite; }
.oriibrands-bg-decoration-anim-pulse { animation: oriibrands-decoration-pulse 12s ease-in-out infinite; }
@keyframes oriibrands-decoration-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(18px, 24px, 0) scale(1.05); }
}
@keyframes oriibrands-decoration-pulse {
  0%, 100% { opacity: .78; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: .58; transform: translate3d(0, 8px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .oriibrands-bg-decoration-anim-drift,
  .oriibrands-bg-decoration-anim-pulse { animation: none !important; }
}

@media (max-width: 782px) {
  .oriibrands-bg-decoration {
    top: -80px;
    width: min(var(--bg-decoration-size, 900px), 120vw);
    height: min(var(--bg-decoration-size, 900px), 120vw);
    filter: blur(52px);
  }
}
/* Ensure the main content visually sits above the decoration rather
   than the browser's default stacking order leaving it on top (the
   header already has its own z-index set earlier in this file). */
#main-content { position: relative; z-index: auto; }

/* Custom Gutenberg blocks (Phase 1 — Service Card, Statistic, Team
   Member, Quote). Dynamic/server-rendered blocks — this CSS is the
   ONLY place their appearance is defined, front end and editor alike,
   since the editor preview (ServerSideRender) reuses this exact markup. */

.oriibrands-block-service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}
.oriibrands-block-service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--primary-text);
  margin-bottom: 20px;
}
.oriibrands-block-service-card-icon svg { width: 22px; height: 22px; }
.oriibrands-block-service-card h3 { font-size: 18px; margin: 0 0 10px; }
.oriibrands-block-service-card p { margin: 0; font-size: 14px; }
.oriibrands-block-service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-text);
  text-decoration: none;
}
.oriibrands-block-service-card-link:hover { text-decoration: underline; }
.oriibrands-block-service-card-link .button-icon svg { width: 14px; height: 14px; }

.oriibrands-block-statistic { text-align: center; }
.oriibrands-block-statistic-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
}
.oriibrands-block-statistic-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted-foreground);
}

.oriibrands-block-team-member { text-align: center; }
.oriibrands-block-team-member-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}
.oriibrands-block-team-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oriibrands-block-team-member-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.oriibrands-block-team-member-role { display: block; margin-top: 4px; font-size: 13px; color: var(--muted-foreground); }

.oriibrands-block-quote {
  border-left: 3px solid var(--primary);
  padding-left: 24px;
}
.oriibrands-block-quote-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--foreground);
  margin: 0 0 16px;
}
.oriibrands-block-quote-author { display: flex; flex-direction: column; }
.oriibrands-block-quote-author-name { font-weight: 700; font-size: 14px; }
.oriibrands-block-quote-author-role { font-size: 13px; color: var(--muted-foreground); }

/* Content Grid/Carousel block */
.oriibrands-block-content-grid-item {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.oriibrands-block-content-grid-item-image { aspect-ratio: 4 / 3; overflow: hidden; }
.oriibrands-block-content-grid-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oriibrands-block-content-grid-item-body { padding: 20px; }
.oriibrands-block-content-grid-item-date {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.oriibrands-block-content-grid-item-body h3 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--foreground);
}
.oriibrands-block-content-grid-item:hover h3 { color: var(--primary-text); }
.oriibrands-block-content-grid-item-body p { margin: 0; font-size: 14px; }

.oriibrands-block-content-grid-grid .oriibrands-block-content-grid-track {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 700px) {
  .oriibrands-block-content-grid-cols-2 .oriibrands-block-content-grid-track { grid-template-columns: repeat(2, 1fr); }
  .oriibrands-block-content-grid-cols-3 .oriibrands-block-content-grid-track { grid-template-columns: repeat(3, 1fr); }
  .oriibrands-block-content-grid-cols-4 .oriibrands-block-content-grid-track { grid-template-columns: repeat(4, 1fr); }
}

/* Carousel — native scroll-snap, no external slider library. The
   prev/next buttons just scroll the track by one card's width; the
   browser's own snap points do the settling, so there's no JS-driven
   animation to keep in sync with card sizing. */
.oriibrands-block-content-grid-carousel { position: relative; }
.oriibrands-block-content-grid-carousel .oriibrands-block-content-grid-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* room for a possible scrollbar without clipping card shadows */
}
.oriibrands-block-content-grid-carousel .oriibrands-block-content-grid-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
.oriibrands-block-content-grid-prev,
.oriibrands-block-content-grid-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.oriibrands-block-content-grid-prev { left: -20px; }
.oriibrands-block-content-grid-next { right: -20px; }
.oriibrands-block-content-grid-prev svg,
.oriibrands-block-content-grid-next svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .oriibrands-block-content-grid-prev,
  .oriibrands-block-content-grid-next { display: none; }
}

/* Text + Image block */
.oriibrands-block-text-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.oriibrands-block-text-image-right .oriibrands-block-text-image-media { order: 2; }
.oriibrands-block-text-image-right .oriibrands-block-text-image-content { order: 1; }
.oriibrands-block-text-image-content:only-child { grid-column: 1 / -1; }
.oriibrands-block-text-image-media img { width: 100%; height: auto; border-radius: 16px; display: block; }
.oriibrands-block-text-image-content h2 { margin: 0 0 16px; }
.oriibrands-block-text-image-content p { margin: 0 0 20px; }
@media (max-width: 700px) {
  .oriibrands-block-text-image { grid-template-columns: 1fr; }
  .oriibrands-block-text-image-right .oriibrands-block-text-image-media,
  .oriibrands-block-text-image-right .oriibrands-block-text-image-content { order: initial; }
}

/* Contact Form block — reuses the same field/notice styling already
   built for the dedicated Contact Page template. */
.oriibrands-block-contact-form { max-width: 480px; }
.oriibrands-block-contact-form h3 { margin: 0 0 20px; }
.oriibrands-block-contact-form-inner .oriibrands-field { margin: 0 0 18px; }


/* Archive cards for Projects, Services and future custom content types. */
.oriibrands-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.oriibrands-archive-card{margin:0;border:1px solid var(--border-color,#dfe5e8);border-radius:18px;overflow:hidden;background:var(--surface,#fff);min-width:0}
.oriibrands-archive-image{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef2f4}
.oriibrands-archive-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.oriibrands-archive-card:hover .oriibrands-archive-image img{transform:scale(1.03)}
.oriibrands-archive-card-body{padding:22px}
.oriibrands-archive-meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.oriibrands-archive-card h2{font-size:22px;line-height:1.2;margin:0 0 10px}
.oriibrands-archive-card h2 a{color:inherit;text-decoration:none}
.oriibrands-archive-card p{margin:0 0 16px;opacity:.78}
.oriibrands-archive-link{font-weight:600;text-decoration:none}
@media(max-width:900px){.oriibrands-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.oriibrands-archive-grid{grid-template-columns:1fr}}

/* ---------- Curated editorial blog sidebar ---------- */
.blog-sidebar {
  position: relative;
  min-width: 0;
}
.blog-sidebar > * { margin-bottom: 20px; }
.blog-sidebar > *:last-child { margin-bottom: 0; }
.blog-sidebar-panel,
.blog-sidebar-custom .blog-sidebar-widget {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}
.blog-sidebar-search {
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--primary) 5%, var(--card)));
}
.blog-sidebar-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.blog-sidebar-panel h2,
.blog-sidebar-cta h2 {
  margin: 0 0 16px;
  color: var(--foreground);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.025em;
}
.blog-sidebar-search .oriibrands-search-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.blog-sidebar-search .search-field {
  min-width: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 13px;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  outline: none;
}
.blog-sidebar-search .search-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.blog-sidebar-search .search-submit {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  background: var(--foreground);
  border: 0;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
}
.blog-sidebar-search .search-submit::after {
  content: '⌕';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--background);
  font-size: 24px;
  line-height: 1;
}
.blog-sidebar-post-list { display: flex; flex-direction: column; }
.blog-sidebar-post {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 13px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.blog-sidebar-post:first-child { padding-top: 0; border-top: 0; }
.blog-sidebar-post:last-child { padding-bottom: 0; }
.blog-sidebar-post-image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--background);
}
.blog-sidebar-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.blog-sidebar-post:hover .blog-sidebar-post-image img { transform: scale(1.05); }
.blog-sidebar-post-body { min-width: 0; align-self: center; }
.blog-sidebar-post-meta {
  display: block;
  margin-bottom: 5px;
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-sidebar-post h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.blog-sidebar-post h3 a {
  color: var(--foreground);
  text-decoration: none;
}
.blog-sidebar-post h3 a:hover { color: var(--primary-text); }
.blog-sidebar-empty { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.6; }
.blog-sidebar-topic-list { list-style: none; padding: 0; margin: 0; }
.blog-sidebar-topic-list li { border-top: 1px solid var(--border); }
.blog-sidebar-topic-list li:first-child { border-top: 0; }
.blog-sidebar-topic-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: var(--foreground);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
.blog-sidebar-topic-list a:hover { color: var(--primary-text); }
.blog-sidebar-topic-count {
  min-width: 24px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 10px;
  text-align: center;
}
.blog-sidebar-cta {
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  background: linear-gradient(145deg, #0b1518, #17333b 70%, #0b1518);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.blog-sidebar-cta::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -95px;
  top: -95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,177,214,.34), transparent 68%);
  pointer-events: none;
}
.blog-sidebar-cta-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 28px;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
}
.blog-sidebar-cta-icon svg { width: 18px; height: 18px; }
.blog-sidebar-cta .blog-sidebar-kicker { color: #65d6f3; }
.blog-sidebar-cta h2 { position: relative; max-width: 230px; color: #fff; font-size: 23px; }
.blog-sidebar-cta p { position: relative; margin: 0 0 20px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; }
.blog-sidebar-cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.blog-sidebar-cta-link:hover { color: #65d6f3; }
.blog-sidebar-cta-link span { transition: transform .2s ease; }
.blog-sidebar-cta-link:hover span { transform: translateX(3px); }
.blog-sidebar-custom { display: flex; flex-direction: column; gap: 20px; }
.blog-sidebar-custom .blog-sidebar-widget { margin: 0; }
.blog-sidebar-custom .blog-sidebar-widget h3 { color: var(--foreground); }
@media (min-width: 901px) {
  body.has-blog-sidebar .blog-sidebar { position: sticky; top: 104px; }
}
@media (max-width: 900px) {
  .blog-sidebar { margin-top: 48px; }
  .blog-sidebar-panel,
  .blog-sidebar-cta { border-radius: 16px; }
}
@media (max-width: 520px) {
  .blog-sidebar-search .oriibrands-search-form { gap: 7px; }
  .blog-sidebar-post { grid-template-columns: 68px minmax(0,1fr); gap: 11px; }
}
.blog-sidebar-search .search-submit::after { display: none; }
.blog-sidebar-search .search-submit svg { display: block; width: 18px; height: 18px; margin: 13px auto; color: var(--background); }

/* Editable Contact Page hero: content comes from Gutenberg, not PHP. */
.oriibrands-contact-hero-content { max-width: 760px; margin-inline: auto; text-align: left; }
.oriibrands-contact-hero-content > * { max-width: 760px; }
.oriibrands-contact-eyebrow { margin: 0 0 18px; color: var(--primary-text); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.oriibrands-contact-hero-title { margin: 0 0 22px; font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.045em; }
.oriibrands-contact-hero-description { margin: 0; max-width: 680px !important; color: var(--muted-foreground); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; }
@media (max-width: 720px) { .oriibrands-contact-hero-content { text-align: left; } .oriibrands-contact-hero-title { font-size: clamp(2.3rem, 12vw, 3.6rem); } }

/* =========================================================
   Production hardening — contrast + responsive navigation
   ========================================================= */
body.theme-light .primary-nav a:hover,
body.theme-light .primary-nav a:focus-visible,
body.theme-light .mobile-nav a:hover,
body.theme-light .mobile-nav a:focus-visible {
  background: rgba(10,14,15,.08);
  color: #0d1315;
}
body.theme-light .primary-nav .sub-menu {
  background: #fff;
  border-color: rgba(10,14,15,.16);
  box-shadow: 0 18px 44px rgba(10,14,15,.16);
}
body.theme-light .primary-nav .sub-menu a:hover,
body.theme-light .primary-nav .sub-menu a:focus-visible {
  background: #eef2f3;
  color: #0d1315;
}
body.theme-light .menu-toggle {
  color: #0d1315;
  border-color: rgba(10,14,15,.16);
}
body.theme-light .menu-toggle:hover,
body.theme-light .menu-toggle:focus-visible {
  background: #eef2f3;
  color: #0d1315;
  border-color: rgba(10,14,15,.28);
}
body.theme-light .btn-gradient:hover,
body.theme-light .btn-gradient:focus-visible,
body.theme-light .wp-block-button__link:hover,
body.theme-light .wp-block-button__link:focus-visible {
  color: #071014;
}
body.theme-light .oriibrands-contact-form input:hover,
body.theme-light .oriibrands-contact-form select:hover,
body.theme-light .oriibrands-contact-form textarea:hover {
  border-color: rgba(10,14,15,.28);
}
body.theme-light .oriibrands-contact-form input[type="file"]::file-selector-button:hover {
  background: #eef2f3;
  color: #0d1315;
  border-color: rgba(10,14,15,.28);
}

/* Mobile header is a fixed-height flex row. The hamburger never grows with
 * its label, so it cannot become clipped or visually drift from the logo. */
@media (max-width: 879px) {
  html { scroll-padding-top: var(--header-height-mobile); }
  .site-header { height: var(--header-height-mobile); min-height: var(--header-height-mobile); padding: 8px 0; }
  .site-header .container { display: flex; height: 48px; min-height: 48px; gap: 12px; }
  .site-logo { max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; }
  .site-logo-image img { max-height: 34px; max-width: 180px; width: auto; }
  .menu-toggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
    background: var(--card);
  }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Mega menu — unified wrapper; CTA/Image/Columns modules combine inside it */
.mega-menu {
  min-width: 460px;
  width: max-content;
  max-width: min(920px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.mega-menu.mega-menu-columns-3 { min-width: 640px; }
.mega-menu.mega-menu-columns-4 { min-width: 760px; }

/* CTA header — always full width, always on top when active */
.mega-menu-header {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}
.mega-menu-header-bg-none {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.16), transparent 65%);
}
.mega-menu-header-bg-gradient-static {
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), var(--gradient-brand);
}
.mega-menu-header-bg-gradient-animated {
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), var(--gradient-brand);
  background-size: auto, 200% 200%;
  animation: oriibrands-gradient-flow 10s ease infinite;
}
/* A gradient header needs light, legible text regardless of the theme's
   current colour scheme — the gradient's own tones vary too much for
   the normal --foreground colour to reliably read well on top of it. */
.mega-menu-header-bg-gradient-static strong,
.mega-menu-header-bg-gradient-animated strong { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.mega-menu-header-bg-gradient-static p,
.mega-menu-header-bg-gradient-animated p { color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* "Fade gradient to transparent" (Mega Menu CTA setting) — masks the
   whole header out toward the right edge, letting whatever sits behind
   it (the dropdown's own background) show through gradually, rather
   than ending in a hard, solid edge. */
.mega-menu-header-fade {
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.mega-menu-header strong { display: block; font-family: var(--font-heading); font-size: 15px; margin-bottom: 4px; color: var(--foreground); }
.mega-menu-header p { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }

a.mega-menu-header-link {
  display: block;
  text-decoration: none;
  transition: filter .2s ease, background .2s ease;
  position: relative;
}
a.mega-menu-header-link.mega-menu-header-bg-none:hover,
a.mega-menu-header-link.mega-menu-header-bg-none:focus-visible {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.26), transparent 65%);
}
a.mega-menu-header-link.mega-menu-header-bg-gradient-static:hover,
a.mega-menu-header-link.mega-menu-header-bg-gradient-static:focus-visible,
a.mega-menu-header-link.mega-menu-header-bg-gradient-animated:hover,
a.mega-menu-header-link.mega-menu-header-bg-gradient-animated:focus-visible {
  filter: brightness(1.12);
}
a.mega-menu-header-link::after {
  content: "→";
  position: absolute;
  top: 22px;
  right: 26px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
a.mega-menu-header-link.mega-menu-header-bg-none::after { color: var(--primary-text); }
a.mega-menu-header-link.mega-menu-header-bg-gradient-static::after,
a.mega-menu-header-link.mega-menu-header-bg-gradient-animated::after { color: #fff; }
a.mega-menu-header-link:hover::after,
a.mega-menu-header-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Body — wraps the Image (if active) and the link list side by side */
.mega-menu-body {
  display: flex;
  align-items: stretch;
}
.mega-image-right { flex-direction: row-reverse; }
.mega-menu-body .mega-menu-image {
  flex: 0 0 42%;
  border-right: 1px solid var(--border);
}
.mega-image-right .mega-menu-image { border-right: none; border-left: 1px solid var(--border); }
.mega-menu-body .mega-menu-image img { width: 100%; height: 100%; display: block; }

.mega-menu-links {
  display: block;
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 14px 18px;
}
.mega-menu-links > li { min-width: 0; position: relative; }
/* Columns only apply when there's no Image sharing the row — with an
   image, the list deliberately stays a single column (see the note in
   the admin fields). */
.mega-menu-body:not(.mega-image-left):not(.mega-image-right) .mega-menu-links {
  display: grid;
  grid-template-columns: repeat(var(--mega-columns, 1), minmax(0, 1fr));
  gap: 4px 20px;
}
.mega-menu-body.mega-image-left .mega-menu-links,
.mega-menu-body.mega-image-right .mega-menu-links {
  align-self: center;
  padding: 10px 18px;
}

@media (min-width: 880px) and (max-width: 1100px) {
  .mega-menu { max-width: calc(100vw - 32px); min-width: min(460px, calc(100vw - 32px)); }
  .mega-menu.mega-menu-columns-4,
  .mega-menu.mega-menu-columns-3 { min-width: min(680px, calc(100vw - 32px)); }
  .mega-menu.mega-menu-columns-4 .mega-menu-links,
  .mega-menu.mega-menu-columns-3 .mega-menu-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Phase B — navigation motion/accessibility guard. */
@media (prefers-reduced-motion: reduce) {
  .primary-nav .sub-menu,
  .mobile-nav .sub-menu,
  .primary-nav > ul > li.menu-item-has-children > a::after,
  .mobile-nav .submenu-toggle svg {
    transition: none !important;
  }
  .mega-menu-header-bg-gradient-animated { animation: none; }
}