/* ===================================================================
   OptiRanked Elementor Section Widgets — shared stylesheet
   LIGHT THEME. Brand tokens: #0A1B2F (navy, used as ink/dark-accent
   only — never as a full section background) · #1565FF (blue) ·
   #3AA0FF (teal, used for fills/borders/icons — see --orw-tl-tx for
   the readable-on-white text variant).
   All selectors are prefixed with .orw- to avoid collisions with
   Astra / other plugins. Custom properties are prefixed --orw-.
=================================================================== */

:root {
  /* RGB triplet (no alpha) behind every rgba(var(--orw-ink-rgb), X) ink
     tone in this file — keeping it as one token means a single override
     (see .orw-sec.orw-brand below) flips every one of those tones from
     "dark ink on light" to "light ink on dark" in one place. */
  --orw-ink-rgb: 10, 27, 47;
  --orw-nv: #0A1B2F;
  --orw-nv2: #0D2240;
  --orw-nv3: #112950;
  --orw-nv4: #0C1E35;
  --orw-bl: #1565FF;
  --orw-bl2: #0E52D6;
  --orw-bl3: #0A3FA8;
  --orw-tl: #3AA0FF;
  --orw-tl2: #0E52D6;
  /* Text-safe variant of --orw-tl — #3AA0FF fails contrast on white,
     this darker sky-blue keeps the teal identity while staying readable. */
  --orw-tl-tx: #0C7CC4;
  --orw-tl-hover: #0B5ED7;
  /* Readable variant of the orange accent — same idea as --orw-tl-tx,
     the original pale dark-theme orange fails contrast on white. */
  --orw-or-tx: #B35900;
  --orw-st: #6B7280;
  /* Base body ink color (was #fff for the dark theme). */
  --orw-wh: #0A1B2F;
  /* Sequential light section backgrounds — each step is a whisper of
     blue-tint apart so adjacent sections never read as a hard dark/light
     break, just a gentle rhythm. */
  --orw-bg: #FFFFFF;
  --orw-bg2: #F6F9FF;
  --orw-bg3: #EEF3FC;
  --orw-bg4: #FAFCFF;
  --orw-bd: rgba(var(--orw-ink-rgb), .09);
  --orw-bd2: rgba(var(--orw-ink-rgb), .05);
  --orw-bdb: rgba(21, 101, 255, .22);
  --orw-bdt: rgba(58, 160, 255, .22);
}

.orw-section-wrap,
.orw-section-wrap * {
  box-sizing: border-box;
}

.orw-section-wrap {
  font-family: 'DM Sans', sans-serif;
  color: var(--orw-wh);
  line-height: 1.6;
  overflow-x: clip;
  background: var(--orw-bg);
}

.orw-section-wrap a {
  text-decoration: none;
}

/* Elementor's Icon control can render either <i class="fa-..."> or an inline
   <svg> (Font Awesome SVG core) depending on site settings — constrain both
   so custom icon sizing rules below apply consistently regardless of which
   one gets output. */
.orw-section-wrap svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ═══ UTILITIES ═══ */
.orw-sec {
  padding: 100px 2.5rem;
  background: var(--orw-bg);
}

.orw-sec.orw-s2 {
  background: var(--orw-bg2);
}

.orw-sec.orw-s3 {
  background: var(--orw-bg3);
}

/* Brand Color (Navy) — the colorful, on-brand section used to break up
   the light/white rhythm. Re-derives the site's original dark-theme look:
   overriding --orw-ink-rgb (and the few tokens that aren't built from it)
   flips every ink/subtitle/border tone in this file from "dark on light"
   to "light on dark" for every widget, with no per-widget CSS needed. */
.orw-sec.orw-brand {
  --orw-ink-rgb: 255, 255, 255;
  --orw-nv: #FFFFFF;
  --orw-wh: #FFFFFF;
  --orw-tl-tx: #7FD4FF;
  --orw-or-tx: #FFC670;
  --orw-st: rgba(255, 255, 255, .68);
  background:
    radial-gradient(ellipse 60% 55% at 84% 10%, rgba(58, 160, 255, .25), transparent 60%),
    radial-gradient(ellipse 45% 45% at 8% 95%, rgba(21, 101, 255, .2), transparent 60%),
    linear-gradient(160deg, var(--orw-nv4) 0%, var(--orw-nv2) 48%, var(--orw-nv3) 100%);
}

.orw-sec.orw-brand .orw-hlb,
.orw-sec.orw-brand .orw-h1b {
  color: #8FB8FF;
}

.orw-sec.orw-has-divider {
  border-top: 1px solid var(--orw-bd);
}

.orw-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.orw-stag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--orw-tl-tx);
  margin-bottom: 18px;
}

.orw-stag i,
.orw-stag svg {
  font-size: 10px;
  width: 10px;
  height: 10px;
}

.orw-sh2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1.5px;
  color: var(--orw-nv);
  margin: 0 0 18px;
}

.orw-hlt {
  color: var(--orw-tl-tx);
}

.orw-hlb {
  color: var(--orw-bl);
}

.orw-ssub {
  font-size: 16.5px;
  line-height: 1.76;
  color: rgba(var(--orw-ink-rgb), .71);
  max-width: 620px;
  margin: 0 0 60px;
}

/* Now a WYSIWYG (TinyMCE) field — its own <p> wrapper needs its browser-
   default margin zeroed out so it doesn't add to .orw-ssub's own margin;
   a second reset handles multi-paragraph subtitles gracefully. */
.orw-ssub p {
  margin: 0;
}

.orw-ssub p + p {
  margin-top: 12px;
}

/* Centers the shared eyebrow/heading/subtitle header block (left-aligned
   by default above) — opt in per-section by wrapping render_header() in
   a `.orw-hdr-c` div. */
.orw-hdr-c {
  text-align: center;
}

.orw-hdr-c .orw-stag {
  justify-content: center;
}

.orw-hdr-c .orw-sh2,
.orw-hdr-c .orw-ssub {
  margin-left: auto;
  margin-right: auto;
}

/* Buttons (shared) */
.orw-btn-p,
.orw-btn-tl,
.orw-btn-gh,
.orw-sol-btn,
.orw-ac-btn,
.orw-cta-wh,
.orw-cta-tr,
.orw-fab {
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  transition: all .25s;
}

.orw-btn-p {
  padding: 15px 32px;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
}

.orw-btn-p:hover {
  background: var(--orw-bl2);
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(21, 101, 255, .4);
  color: #fff;
}

/* The hero's background is now the same blue family as this button, so the
   normal hover (a blue glow + a one-shade-darker blue fill) was nearly
   invisible against it — flip to white on hover instead, for a hover state
   that actually reads against a blue backdrop. */
.orw-hero .orw-btn-p {
  box-shadow: 0 10px 30px rgba(10, 27, 47, .25);
}

.orw-hero .orw-btn-p:hover {
  background: #fff;
  color: var(--orw-bl3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}

.orw-btn-tl {
  padding: 14px 28px;
  background: rgba(58, 160, 255, .1);
  color: var(--orw-tl-tx);
  border: 1px solid rgba(58, 160, 255, .28);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
}

.orw-btn-tl:hover {
  background: var(--orw-tl);
  /* Always dark on this bright teal fill — not the flipped-to-white
     --orw-nv the hero's dark gradient sets, which would be unreadable here. */
  color: #0A1B2F;
  border-color: var(--orw-tl);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(58, 160, 255, .35);
}

.orw-btn-gh {
  padding: 14px 22px;
  background: transparent;
  color: rgba(var(--orw-ink-rgb), .73);
  border: 1px solid rgba(var(--orw-ink-rgb), .12);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
}

.orw-btn-gh:hover {
  border-color: var(--orw-bl);
  color: var(--orw-bl);
  background: rgba(21, 101, 255, .07);
}

@keyframes orwBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

@keyframes orwFabUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orwMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ═══ HERO ═══ */
/* Hero is now a permanent dark blue-to-navy gradient — the same family of
   colors as the .orw-hcform lead-form card — instead of the light theme's
   white section fill, so every ink/subtitle/border token in this file
   flips from "dark on light" to "light on dark" for the whole hero. */
.orw-hero {
  position: relative;
  overflow: hidden;
  padding: 118px 2.5rem 130px;
  background:
    radial-gradient(ellipse 55% 50% at 95% 100%, rgba(58, 160, 255, .3), transparent 55%),
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(127, 212, 255, .28), transparent 55%),
    linear-gradient(160deg, var(--orw-bl) 0%, var(--orw-bl3) 55%, var(--orw-nv) 100%);
  --orw-ink-rgb: 255, 255, 255;
  --orw-nv: #FFFFFF;
  --orw-wh: #FFFFFF;
  --orw-tl-tx: #7FD4FF;
}

/* Same dot-texture the lead-form card uses, at low opacity, so the whole
   hero reads as one cohesive "premium" surface instead of a flat fill. */
.orw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.orw-h-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 88% 0%, rgba(255, 255, 255, .08), transparent 62%), radial-gradient(ellipse 45% 50% at 6% 100%, rgba(255, 255, 255, .05), transparent 62%);
}

.orw-hero .orw-h1b {
  color: #8FB8FF;
}

/* Optional background photo (Hero widget "Background Image" control).
   The photo sits behind everything, .orw-h-bg becomes a colorful
   navy-to-brand-blue wash on top of it so the left-column text stays
   readable no matter what the photo looks like. */
.orw-h-photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.orw-hero.orw-has-photo .orw-h-bg {
  background:
    linear-gradient(100deg, rgba(10, 27, 47, .88) 0%, rgba(10, 27, 47, .74) 35%, rgba(21, 101, 255, .55) 68%, rgba(58, 160, 255, .32) 100%),
    radial-gradient(ellipse 65% 65% at 80% 40%, rgba(58, 160, 255, .3), transparent 60%);
}

/* The Live Audit Card stays a clean white card regardless of the dark hero
   behind it, so re-pin the ink tokens back to their normal light-card
   values just for its subtree. */
.orw-hero .orw-acard {
  --orw-ink-rgb: 10, 27, 47;
  --orw-nv: #0A1B2F;
  --orw-wh: #0A1B2F;
  --orw-tl-tx: #0C7CC4;
}

.orw-h-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(var(--orw-ink-rgb), .04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--orw-ink-rgb), .04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

.orw-h-ring {
  position: absolute;
  top: 80px;
  right: 3rem;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(21, 101, 255, .12);
  border-radius: 50%;
  pointer-events: none;
}

.orw-h-ring::after {
  content: '';
  position: absolute;
  inset: 36px;
  border: 1px solid rgba(58, 160, 255, .1);
  border-radius: 50%;
}

.orw-hw {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 488px;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.orw-ey {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(58, 160, 255, .28);
  background: rgba(58, 160, 255, .07);
  color: var(--orw-tl-tx);
  padding: 5px 16px 5px 6px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 28px;
}

.orw-ey-pill {
  background: var(--orw-tl);
  color: #001a14;
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.orw-ey-dot {
  width: 5px;
  height: 5px;
  background: var(--orw-tl);
  border-radius: 50%;
  animation: orwBlink 2s infinite;
}

.orw-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -2.5px;
  color: var(--orw-nv);
  margin: 0 0 26px;
}

.orw-h1t {
  color: var(--orw-tl-tx);
}

.orw-h1b {
  color: var(--orw-bl);
}

.orw-h1o {
  -webkit-text-stroke: 1.5px rgba(var(--orw-ink-rgb), .22);
  color: transparent;
}

.orw-h1-rot {
  /* Plain inline layout, not inline-flex — a flex line box's height is
     recalculated from its content's actual glyph metrics, so swapping in
     words with different ascenders/descenders (e.g. "Traffic" vs "Revenue")
     shifted the whole heading line up/down on every rotation. Inline text
     with a fixed line-height on the cursor doesn't have that problem. */
  display: inline;
  line-height: 1;
}

.orw-h1-rot-text {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}

.orw-h1-rot-cursor {
  display: inline-block;
  width: 3px;
  height: .78em;
  margin-left: 5px;
  background: currentColor;
  animation: orwBlink .9s steps(1) infinite;
  vertical-align: bottom;
}

.orw-hero-sub {
  font-size: 17px;
  color: rgba(var(--orw-ink-rgb), .71);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 0 44px;
}

.orw-hero-sub strong {
  color: rgba(var(--orw-ink-rgb), .82);
  font-weight: 500;
}

.orw-hero-sub p {
  margin: 0;
}

.orw-hero-sub p + p {
  margin-top: 12px;
}

.orw-hbtns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.orw-h-badges {
  display: flex;
  gap: 12px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.orw-hb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .70);
}

.orw-hb i,
.orw-hb svg {
  font-size: 11px;
  width: 11px;
  height: 11px;
  color: var(--orw-tl-tx);
}

.orw-acard {
  background: linear-gradient(150deg, #ffffff, #f9fbff);
  border: 1px solid var(--orw-bd);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 30px 80px rgba(var(--orw-ink-rgb), .12), 0 8px 24px rgba(var(--orw-ink-rgb), .06);
  position: relative;
  overflow: hidden;
}

.orw-acard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orw-tl), rgba(21, 101, 255, .6), transparent);
}

.orw-ac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.orw-ac-lbl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(var(--orw-ink-rgb), .67);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.orw-ac-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--orw-tl-tx);
  font-weight: 500;
}

.orw-ld {
  width: 6px;
  height: 6px;
  background: var(--orw-tl);
  border-radius: 50%;
  animation: orwBlink 1.5s infinite;
}

.orw-ac-url {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

.orw-ac-url i,
.orw-ac-url svg {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .64);
}

.orw-ac-url span {
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .65);
}

.orw-ac-url strong {
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .74);
  font-weight: 500;
}

.orw-arows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.orw-ar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid rgba(var(--orw-ink-rgb), .045);
  border-radius: 11px;
  padding: 14px 15px;
  transition: all .2s;
}

.orw-ar:hover {
  border-color: rgba(58, 160, 255, .22);
}

.orw-aico {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-aico i,
.orw-aico svg {
  font-size: 14px;
}

.orw-aico.orw-ag {
  background: rgba(58, 160, 255, .1);
}

.orw-aico.orw-ag i {
  color: var(--orw-tl-tx);
}

.orw-aico.orw-ab {
  background: rgba(21, 101, 255, .12);
}

.orw-aico.orw-ab i {
  color: var(--orw-bl);
}

.orw-aico.orw-ao {
  background: rgba(21, 101, 255, .08);
}

.orw-aico.orw-ao i {
  color: #2F7DE0;
}

.orw-aico.orw-aw2 {
  background: rgba(255, 165, 0, .08);
}

.orw-aico.orw-aw2 i {
  color: var(--orw-or-tx);
}

.orw-ai2 {
  flex: 1;
}

.orw-ai2 strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--orw-ink-rgb), .82);
  margin-bottom: 1px;
}

.orw-ai2 span {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .63);
}

.orw-abar {
  width: 100%;
  height: 3px;
  background: rgba(var(--orw-ink-rgb), .05);
  border-radius: 2px;
  margin-top: 7px;
  overflow: hidden;
}

.orw-afill {
  height: 100%;
  border-radius: 2px;
}

.orw-asc {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.orw-asc.orw-cg {
  color: var(--orw-tl-tx);
}

.orw-asc.orw-cb {
  color: var(--orw-bl);
}

.orw-asc.orw-co {
  color: var(--orw-or-tx);
}

.orw-ac-btn {
  margin-top: 20px;
  width: 100%;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 11px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
}

.orw-ac-btn:hover {
  background: var(--orw-bl2);
  box-shadow: 0 8px 28px rgba(21, 101, 255, .4);
}

.orw-ac-note {
  text-align: center;
  margin-top: 9px;
  font-size: 10.5px;
  color: rgba(var(--orw-ink-rgb), .61);
}

/* Hero — premium lead-capture form card (Right Panel = "Contact / Lead Form").
   Frosted-glass card: a translucent brand-blue gradient + backdrop-filter
   blur, so whatever sits behind it (the hero's own gradient, or its
   optional background photo) shows through softly instead of the card
   being a flat opaque fill. */
.orw-hcform {
  background:
    linear-gradient(160deg, rgba(58, 160, 255, .38) 0%, rgba(21, 101, 255, .30) 45%, rgba(10, 27, 47, .38) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  padding: 34px 32px;
  box-shadow: 0 30px 80px rgba(10, 27, 47, .35), 0 8px 24px rgba(10, 27, 47, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
  position: relative;
  overflow: hidden;
  color: #fff;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.33);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.7px);
-webkit-backdrop-filter: blur(6.7px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.orw-hcform::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .4;
}

.orw-hcform::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
}

.orw-hcf-h {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
  /* Explicit, not inherited from .orw-hcform's `color:#fff` — Astra's global
     Customizer typography sets `h1..h6 { color: var(--ast-global-color-2) }`
     directly on the element, which beats an ancestor's inherited color
     regardless of that ancestor's own specificity. Every other heading in
     this stylesheet already sets its own color for the same reason; this
     one was the one exception, which is why it rendered Astra's default
     dark navy instead of white. */
  color: #fff;
}

.orw-hcf-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}

/* Now a WYSIWYG (TinyMCE) field on every widget reusing this class — see
   .orw-ssub above for why the nested <p> needs its margin reset. */
.orw-hcf-sub p {
  margin: 0;
}

.orw-hcf-sub p + p {
  margin-top: 10px;
}

.orw-hcf-form {
  position: relative;
  z-index: 1;
}

.orw-hcf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.orw-hcf-field {
  margin-bottom: 14px;
}

/* Optional 2-up field pairing (e.g. Name/Email, Phone/Subject) — used by
   the OR — Contact widget's form. Zeroes out the child fields' own
   margin-bottom so the row itself controls the vertical gap instead. */
.orw-hcf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.orw-hcf-row .orw-hcf-field {
  margin-bottom: 0;
}

.orw-hcf-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.orw-hcf-field input,
.orw-hcf-field textarea,
.orw-hcf-field select {
  width: 100%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  transition: background .15s, border-color .15s;
}

.orw-hcf-field textarea {
  resize: vertical;
  min-height: 60px;
}

.orw-hcf-field select {
  /* Tells the browser to render this control's native UI — including the
     options popup, which can't otherwise be styled — using its dark-mode
     palette. Without it the popup used its default white background,
     while `option` below sets white text for readability against the
     card's dark background, making every unselected row invisible
     (white-on-white) except whichever one the browser itself happened to
     highlight. */
  color-scheme: dark;
}

.orw-hcf-field select option {
  color: #fff;
  background-color: #10254a;
}

.orw-hcf-field input::placeholder,
.orw-hcf-field textarea::placeholder {
  color: rgba(255, 255, 255, .45);
}

.orw-hcf-field input:focus,
.orw-hcf-field textarea:focus,
.orw-hcf-field select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .2);
}

.orw-hcf-submit {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(135deg, #ffffff, #E8F1FF);
  color: var(--orw-bl3);
  border: none;
  border-radius: 11px;
  padding: 14px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}

.orw-hcf-submit:hover {
  /* Was just a subtle lift + shadow on the same white fill — barely read
     as "hovering" at all. Flipping the fill to solid blue is an obvious,
     unmissable state change instead. */
  background: linear-gradient(135deg, var(--orw-bl), var(--orw-bl2));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(21, 101, 255, .45);
}

.orw-hcf-submit:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
}

.orw-hcf-msg {
  display: none;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
}

.orw-hcf-msg.orw-ok {
  display: block;
  background: rgba(58, 160, 255, .2);
  color: #DCEFFF;
}

.orw-hcf-msg.orw-err {
  display: block;
  background: rgba(255, 90, 90, .2);
  color: #FFDCDC;
}

.orw-hcf-note {
  text-align: center;
  margin-top: 14px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .58);
  position: relative;
  z-index: 1;
}

/* ═══ PAGE HERO (OR — Page Header widget) ═══
   Same gradient recipe as .orw-sec.orw-brand / .orw-cf-panel above — kept
   as its own literal declaration (not the shared .orw-brand class) since
   this widget has no bg_variant control; it's always this treatment,
   the same way .orw-hero itself isn't a togglable-background widget. */
.orw-pgh {
  position: relative;
  overflow: hidden;
  padding: 76px 2.5rem 54px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 84% 10%, rgba(58, 160, 255, .25), transparent 60%),
    radial-gradient(ellipse 45% 45% at 8% 95%, rgba(21, 101, 255, .2), transparent 60%),
    linear-gradient(160deg, #0C1E35 0%, #0D2240 48%, #112950 100%);
}

.orw-pgh-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 14px;
}

.orw-pgh-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 620px;
  margin: 0 auto 22px;
}

.orw-pgh-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.orw-pgh-crumbs a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  transition: color .15s;
}

.orw-pgh-crumbs a:hover {
  color: #fff;
}

.orw-pgh-sep {
  color: rgba(255, 255, 255, .32);
  font-size: 12px;
}

.orw-pgh-current {
  color: #8FD3FF;
}

@media screen and (max-width: 680px) {
  .orw-pgh {
    padding: 56px 1.25rem 40px;
  }
}

/* Optional background photo — same two-layer approach as the Hero's
   .orw-h-photo/.orw-h-bg (see above): the photo sits behind everything,
   .orw-pgh-wash is a dark brand-gradient scrim on top of it so the title/
   breadcrumbs (and the form card, if shown) stay readable no matter what
   the photo looks like. Both are position:absolute and painted before
   .orw-wrap in the DOM, so .orw-wrap needs an explicit stacking context
   (position + z-index) below to render above them — without it, CSS
   paints positioned z-index:auto siblings above plain in-flow content
   regardless of source order. */
.orw-pgh-photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.orw-pgh-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(10, 27, 47, .92) 0%, rgba(13, 34, 64, .82) 45%, rgba(21, 101, 255, .5) 100%);
}

.orw-pgh-has-photo > .orw-wrap {
  position: relative;
  z-index: 1;
}

/* Two-column variant — title/breadcrumbs on the left, the shared
   .orw-hcform lead-form card (same markup as the Hero's) on the right.
   A true 50/50 split (unlike the Hero's 1fr/488px), since here both
   columns carry comparable weight — a heading vs. a full form card. */
.orw-pgh-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.orw-pgh-has-form {
  text-align: left;
}

.orw-pgh-grid .orw-pgh-sub {
  margin-left: 0;
  margin-right: 0;
}

.orw-pgh-grid .orw-pgh-crumbs {
  justify-content: flex-start;
}

.orw-pgh-grid .orw-hcform {
  text-align: left;
}

@media screen and (max-width: 900px) {
  .orw-pgh-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .orw-pgh-has-form {
    text-align: center;
  }

  .orw-pgh-grid .orw-pgh-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .orw-pgh-grid .orw-pgh-crumbs {
    justify-content: center;
  }
}

/* ═══ CONTACT (OR — Contact widget) ═══
   Panel reuses the exact .orw-sec.orw-brand gradient recipe (see UTILITIES
   above) so it reads as the same "brand navy" surface used elsewhere on the
   site, regardless of what the section's own background is set to. Its
   left column reuses .orw-hcf-* (form heading/fields/submit/message) as-is
   — same visual language as the Hero's lead-form, just a different form
   element and AJAX action (see optiranked-widgets.js / inc/forms.php). */
.orw-cf-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 48px;
  background:
    radial-gradient(ellipse 60% 55% at 84% 10%, rgba(58, 160, 255, .25), transparent 60%),
    radial-gradient(ellipse 45% 45% at 8% 95%, rgba(21, 101, 255, .2), transparent 60%),
    linear-gradient(160deg, var(--orw-nv4) 0%, var(--orw-nv2) 48%, var(--orw-nv3) 100%);
  box-shadow: 0 40px 90px rgba(var(--orw-ink-rgb), .18);
}

.orw-cf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
}

.orw-cf-right {
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 48px;
}

.orw-cf-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
  transition: transform .15s;
}

.orw-cf-info-item:first-child {
  padding-top: 0;
}

.orw-cf-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

a.orw-cf-info-item:hover {
  transform: translateX(3px);
}

.orw-cf-info-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #DCEFFF;
  font-size: 16px;
}

.orw-cf-info-text {
  display: block;
  padding-top: 3px;
}

.orw-cf-info-text strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  margin-bottom: 3px;
  transition: color .15s;
}

a.orw-cf-info-item:hover .orw-cf-info-text strong {
  color: #8FD3FF;
}

.orw-cf-info-text span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
}

.orw-cf-map {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  line-height: 0;
}

.orw-cf-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
}

/* ═══ BOOK A CALL (OR — Book a Call widget) ═══
   Lives inside the same .orw-cf-panel dark surface as the Contact/Audit
   widgets (see above) — only the panel's *contents* are specific to
   scheduling. All interactivity (fetching slots, submitting) is
   optiranked-widgets.js; the calendar itself is Flatpickr, re-themed
   further down (search "Flatpickr"). */
.orw-book-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 44px;
}

/* Flatpickr (loaded only on pages with this widget — see
   get_style_depends() in class-orw-book-call.php) renders its own markup
   into [data-orw-cal-mount]; everything below re-themes that default
   light/boxed look into this panel's dark glass style rather than
   reimplementing a calendar grid by hand. Every color/spacing value here
   intentionally matches what the old hand-rolled .orw-cal-day markup used,
   so the visual result is the same — only the underlying implementation
   (and its correctness at month boundaries) changed.
   `!important` throughout this block isn't stylistic — Elementor enqueues
   a widget's get_style_depends() handles late (after the main theme/plugin
   styles, confirmed by inspecting the actual <link> order at runtime), so
   orw-flatpickr's own CSS reliably prints AFTER optiranked-widgets.css
   despite orw-flatpickr being listed first in that array. Same class of
   problem as the documented Astra button-leak issue — a third-party
   stylesheet whose load order we don't control and that keeps winning on
   equal specificity — and the same fix applies. */
/* Adjacent-sibling, not descendant — Flatpickr's inline mode converts
   [data-orw-cal-mount] itself into an empty hidden "flatpickr-input" and
   appends the actual .flatpickr-calendar right after it as a SIBLING, not
   a child (verified in the live DOM). Every rule below that targets
   .flatpickr-calendar or something inside it has to key off that sibling
   relationship, then normal descendant selectors from there. */
.orw-cal-mount + .flatpickr-calendar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 100% !important;
  font-family: 'DM Sans', sans-serif !important;
}

.orw-cal-mount + .flatpickr-calendar.inline {
  display: block !important;
}

.orw-cal-mount + .flatpickr-calendar::before,
.orw-cal-mount + .flatpickr-calendar::after {
  display: none !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-innerContainer,
.orw-cal-mount + .flatpickr-calendar .flatpickr-rContainer,
.orw-cal-mount + .flatpickr-calendar .flatpickr-days,
.orw-cal-mount + .flatpickr-calendar .dayContainer {
  width: 100% !important;
  max-width: none !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-months {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px !important;
  position: relative;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-month {
  color: #fff !important;
  fill: #fff !important;
  height: auto !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-current-month {
  /* Flatpickr's own CSS absolutely-positions this (left/right: 12.5%,
     top: 5px) to center it between the two nav arrows — that fights the
     .flatpickr-months flex layout above, landing it off in the wrong spot
     entirely rather than just looking unstyled. Taking it fully out of
     absolute positioning is what actually fixes that, not just resetting
     left/right. */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  font-size: 15px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  width: auto !important;
  left: auto !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0 !important;
  cursor: pointer;
}

.orw-cal-mount + .flatpickr-calendar .numInputWrapper {
  width: 4.2ch !important;
}

.orw-cal-mount + .flatpickr-calendar .numInputWrapper input.cur-year {
  background: transparent !important;
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0 !important;
}

.orw-cal-mount + .flatpickr-calendar .numInputWrapper span.arrowUp,
.orw-cal-mount + .flatpickr-calendar .numInputWrapper span.arrowDown {
  display: none !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-prev-month,
.orw-cal-mount + .flatpickr-calendar .flatpickr-next-month {
  position: static !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-prev-month:hover,
.orw-cal-mount + .flatpickr-calendar .flatpickr-next-month:hover {
  background: rgba(255, 255, 255, .16) !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-prev-month svg,
.orw-cal-mount + .flatpickr-calendar .flatpickr-next-month svg {
  width: 12px !important;
  height: 12px !important;
  fill: #fff !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-weekdays {
  margin-bottom: 6px !important;
  background: transparent !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-weekday {
  background: transparent !important;
  color: rgba(255, 255, 255, .45) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day {
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  max-width: none !important;
  height: 34px !important;
  line-height: 34px !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.prevMonthDay,
.orw-cal-mount + .flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: rgba(255, 255, 255, .3) !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.today {
  border-color: transparent !important;
  position: relative;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orw-tl);
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.today:hover {
  border-color: transparent !important;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.orw-cal-mount + .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  background: transparent !important;
  color: rgba(255, 255, 255, .22) !important;
  cursor: default;
}

.orw-cal-mount + .flatpickr-calendar .flatpickr-day.selected,
.orw-cal-mount + .flatpickr-calendar .flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--orw-bl), var(--orw-tl)) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(21, 101, 255, .4) !important;
}

.orw-cal-tz {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
}

.orw-book-slots-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  margin-bottom: 16px;
}

.orw-book-slots-label span {
  font-weight: 600;
  color: var(--orw-tl-tx);
}

.orw-book-slots-label span:not(:empty)::before {
  content: ' — ';
  color: rgba(255, 255, 255, .4);
}

.orw-book-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  min-height: 44px;
}

.orw-book-slots-empty {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, .5);
}

.orw-book-slot {
  padding: 10px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.orw-book-slot:hover {
  background: rgba(255, 255, 255, .16) !important;
}

.orw-book-slot.orw-book-slot-sel {
  background: linear-gradient(135deg, var(--orw-bl), var(--orw-tl)) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(21, 101, 255, .4);
}

.orw-book-form {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.orw-book-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(58, 160, 255, .14);
  border: 1px solid rgba(58, 160, 255, .3);
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 22px;
}

.orw-book-chosen i {
  color: var(--orw-tl-tx);
}

.orw-book-change {
  margin-left: auto !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, .68) !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.orw-book-change:hover {
  color: #fff !important;
}

.orw-book-success {
  text-align: center;
  padding: 30px 10px 6px;
}

.orw-book-success-ico {
  font-size: 52px;
  color: var(--orw-tl-tx);
  margin-bottom: 16px;
}

.orw-book-success h1,
.orw-book-success h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  margin: 0 0 10px;
}

.orw-book-success p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 440px;
  margin: 0 auto;
}

.orw-book-success p strong {
  color: #fff;
}

.orw-ty-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* .orw-btn-gh's default ink-on-transparent styling assumes a light
   section background (see UTILITIES above) — explicit override here since
   these buttons sit on the dark .orw-cf-panel instead. Scoped to
   .orw-ty-btns only, so it doesn't touch .orw-btn-gh anywhere else. */
.orw-ty-btns .orw-btn-gh {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
}

.orw-ty-btns .orw-btn-gh:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .14);
}

/* ═══ STATS BAR ═══ */
.orw-stats-bar {
  border-top: 1px solid var(--orw-bd);
  border-bottom: 1px solid var(--orw-bd);
  background: var(--orw-bg2);
  padding: 30px 2.5rem;
}

.orw-sbi {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.orw-st {
  text-align: center;
  padding: 8px 16px;
  position: relative;
}

.orw-st::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background: var(--orw-bd);
}

.orw-st:last-child::after {
  display: none;
}

.orw-st-n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--orw-nv);
  line-height: 1;
  margin-bottom: 5px;
}

.orw-st-n sup {
  font-size: 14px;
  vertical-align: super;
  color: var(--orw-tl-tx);
}

.orw-st-l {
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .65);
}

/* ═══ MARQUEE ═══ */
.orw-mq-wrap {
  overflow: hidden;
  background: var(--orw-bg2);
  border-bottom: 1px solid var(--orw-bd);
  padding: 16px 0;
}

.orw-mq-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 13px;
}

.orw-mql {
  height: 1px;
  width: 50px;
  background: var(--orw-bd);
}

.orw-mq-lbl {
  font-size: 10px;
  color: rgba(var(--orw-ink-rgb), .61);
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

.orw-mq {
  display: flex;
  gap: 56px;
  animation: orwMarquee 32s linear infinite;
  width: max-content;
}

.orw-mqi {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: rgba(var(--orw-ink-rgb), .60);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 20px;
}

.orw-mqs {
  font-size: 7px;
  color: var(--orw-tl-tx);
  opacity: .5;
}

/* ═══ MISSION / VISION BAND ═══ */
.orw-mv-band {
  background: var(--orw-bg2);
  border-top: 1px solid var(--orw-bd);
  border-bottom: 1px solid var(--orw-bd);
  padding: 40px 2.5rem;
}

.orw-mv-in {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.orw-mv {
  padding: 12px 28px;
  position: relative;
}

.orw-mv::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  background: var(--orw-bd);
}

.orw-mv:last-child::after {
  display: none;
}

.orw-mvi {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(58, 160, 255, .1);
  border: 1px solid rgba(58, 160, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.orw-mvi i,
.orw-mvi svg {
  font-size: 18px;
  color: var(--orw-tl-tx);
}

.orw-mv h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 5px;
}

.orw-mv p {
  font-size: 13px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.6;
  margin: 0;
}

/* ═══ RECOGNITION ═══ */
.orw-rec-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 56px;
}

.orw-rc {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s;
}

.orw-rc:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .04);
}

.orw-rc-ico {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 11px;
  background: rgba(58, 160, 255, .1);
  border: 1px solid rgba(58, 160, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-rc-ico i,
.orw-rc-ico svg {
  font-size: 21px;
  color: var(--orw-tl-tx);
}

.orw-rc strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 2px;
}

.orw-rc span {
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .65);
}

/* ═══ PROBLEM + SOLUTION ═══ */
.orw-prob-w {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 64px;
  align-items: start;
}

.orw-prob-l {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orw-pc2 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(var(--orw-ink-rgb), .02);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 22px;
  transition: all .22s;
}

.orw-pc2:hover {
  border-color: rgba(255, 90, 90, .2);
  background: rgba(255, 90, 90, .03);
  transform: translateX(5px);
}

.orw-pc-ico {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 11px;
  background: rgba(255, 90, 90, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-pc-ico i,
.orw-pc-ico svg {
  font-size: 17px;
  color: #D93636;
}

.orw-pc2 h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 5px;
}

.orw-pc2 p {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.62;
  margin: 0;
}

.orw-sol {
  background: linear-gradient(160deg, rgba(21, 101, 255, .1), rgba(58, 160, 255, .04));
  border: 1px solid rgba(21, 101, 255, .2);
  border-radius: 28px;
  padding: 38px;
  position: sticky;
  top: 90px;
}

.orw-sol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orw-tl), var(--orw-bl), transparent);
  border-radius: inherit;
}

.orw-sol h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--orw-nv);
  margin: 0 0 8px;
}

.orw-sol p {
  font-size: 14px;
  color: rgba(var(--orw-ink-rgb), .69);
  margin: 0 0 28px;
  line-height: 1.65;
}

.orw-sol-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.orw-sp {
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 12px;
  padding: 18px;
  transition: all .2s;
}

.orw-sp:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .05);
}

.orw-sp-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--orw-bl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
}

.orw-sp-ico i,
.orw-sp-ico svg {
  font-size: 15px;
  color: #fff;
}

.orw-sp strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 3px;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.orw-sp-txt {
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .65);
  line-height: 1.5;
}

.orw-sp-txt p {
  margin: 0;
}

.orw-sol-btn {
  margin-top: 22px;
  width: 100%;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 11px;
  padding: 14px;
  font-size: 14.5px;
  font-weight: 600;
  justify-content: center;
}

.orw-sol-btn:hover {
  background: var(--orw-bl2);
  box-shadow: 0 8px 28px rgba(21, 101, 255, .4);
}

/* ═══ SERVICES ═══ */
.orw-tab-row {
  display: flex;
  gap: 6px;
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 14px;
  padding: 5px;
  width: fit-content;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.orw-tb {
  /* !important on all four: see .orw-nav-toggle above — Astra's global
     button styling otherwise wins on background/border/color/padding
     despite this rule's higher specificity. */
  padding: 10px 22px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(var(--orw-ink-rgb), .68) !important;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.orw-tb i,
.orw-tb svg {
  font-size: 13px;
}

.orw-tb.orw-on {
  background: var(--orw-bl);
  color: #fff;
  font-weight: 600;
}

.orw-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.orw-sc {
  background: rgba(var(--orw-ink-rgb), .022);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 30px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}

.orw-sc::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}

.orw-sc:hover {
  border-color: var(--orw-bdb);
  background: rgba(21, 101, 255, .04);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px rgba(var(--orw-ink-rgb), .12);
}

.orw-sc:hover::before {
  transform: scaleX(1);
}

.orw-sc.orw-ft {
  background: linear-gradient(150deg, rgba(21, 101, 255, .12), rgba(58, 160, 255, .03));
  border-color: rgba(21, 101, 255, .22);
}

.orw-sc.orw-tf {
  background: linear-gradient(150deg, rgba(58, 160, 255, .1), rgba(58, 160, 255, .02));
  border-color: rgba(58, 160, 255, .22);
}

.orw-sc.orw-tf::before {
  background: linear-gradient(90deg, var(--orw-tl), var(--orw-bl));
}

.orw-s-ico {
  width: 52px;
  height: 52px;
  background: rgba(21, 101, 255, .12);
  border: 1px solid rgba(21, 101, 255, .15);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .25s;
}

.orw-s-ico i,
.orw-s-ico svg {
  font-size: 21px;
  color: var(--orw-tl-tx);
}

.orw-sc:hover .orw-s-ico {
  background: var(--orw-bl);
  border-color: var(--orw-bl);
}

.orw-sc:hover .orw-s-ico i {
  color: #fff;
}

.orw-sc.orw-tf .orw-s-ico {
  background: rgba(58, 160, 255, .1);
  border-color: rgba(58, 160, 255, .2);
}

.orw-s-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 10px;
}

.orw-s-dsc {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .67);
  line-height: 1.68;
  margin-bottom: 20px;
}

.orw-s-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 20px;
  padding: 0;
}

.orw-s-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .69);
}

.orw-s-list li i {
  font-size: 10px;
  color: var(--orw-bl);
}

.orw-s-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.orw-stg {
  padding: 3px 11px;
  background: rgba(21, 101, 255, .1);
  border: 1px solid rgba(21, 101, 255, .18);
  color: rgba(107, 163, 255, .85);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
}

.orw-sc.orw-tf .orw-stg {
  background: rgba(58, 160, 255, .08);
  border-color: rgba(58, 160, 255, .2);
  color: rgba(58, 160, 255, .85);
}

.orw-s-lnk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orw-tl-tx);
  transition: gap .2s;
}

.orw-s-lnk:hover {
  gap: 10px;
}

/* ═══ BENTO PILLARS ═══ */
.orw-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.orw-bn {
  background: rgba(var(--orw-ink-rgb), .022);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 30px 26px;
  transition: all .25s;
}

.orw-bn:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .04);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(var(--orw-ink-rgb), .1);
}

.orw-bn-ico {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: rgba(58, 160, 255, .08);
  border: 1px solid rgba(58, 160, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .25s;
}

.orw-bn-ico i,
.orw-bn-ico svg {
  font-size: 24px;
  color: var(--orw-tl-tx);
}

.orw-bn:hover .orw-bn-ico {
  background: var(--orw-tl);
  border-color: var(--orw-tl);
}

.orw-bn:hover .orw-bn-ico i {
  color: var(--orw-nv);
}

.orw-bn-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 10px;
}

.orw-bn-dsc {
  font-size: 13px;
  color: rgba(var(--orw-ink-rgb), .67);
  line-height: 1.68;
  margin-bottom: 16px;
}

.orw-bn-pts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
}

.orw-bn-pts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .66);
}

.orw-bn-pts li i {
  font-size: 9px;
  color: var(--orw-tl-tx);
}

/* ═══ PROCESS ═══ */
.orw-proc-tl {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  margin-top: 70px;
}

.orw-proc-tl::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 9%;
  right: 9%;
  height: 1px;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl), rgba(58, 160, 255, .1));
  z-index: 0;
}

.orw-ps {
  text-align: center;
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.orw-ps-n {
  width: 50px;
  height: 50px;
  background: var(--orw-bg);
  border: 2px solid var(--orw-bdb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--orw-tl-tx);
  margin: 0 auto 18px;
}

.orw-ps.orw-on .orw-ps-n {
  background: var(--orw-bl);
  color: #fff;
  border-color: var(--orw-bl);
  box-shadow: 0 0 22px rgba(21, 101, 255, .4);
}

.orw-ps-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 4px;
}

.orw-ps-sub {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .65);
  line-height: 1.5;
}

.orw-proc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}

.orw-pcc {
  background: rgba(var(--orw-ink-rgb), .022);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 30px;
  transition: all .25s;
}

.orw-pcc:hover {
  border-color: var(--orw-bdb);
  transform: translateY(-3px);
}

.orw-pcc-ph {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orw-tl-tx);
  margin-bottom: 8px;
}

.orw-pcc-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--orw-nv);
  margin-bottom: 18px;
}

.orw-pcc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.orw-pcc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .69);
}

.orw-pcc-list li i {
  font-size: 11px;
  color: var(--orw-bl);
  min-width: 14px;
}

.orw-pcc-note {
  margin-top: 22px;
  padding: 13px;
  background: rgba(58, 160, 255, .06);
  border: 1px solid rgba(58, 160, 255, .14);
  border-radius: 9px;
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.orw-pcc-note i {
  color: var(--orw-tl-tx);
  margin-top: 2px;
  font-size: 11px;
}

.orw-pcc-note p {
  margin: 0;
}

/* ═══ METHODOLOGY ═══ */
.orw-meth-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.orw-mc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(var(--orw-ink-rgb), .022);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 24px;
  transition: all .22s;
}

.orw-mc:hover {
  border-color: var(--orw-bdb);
  background: rgba(21, 101, 255, .04);
  transform: translateX(4px);
}

.orw-mc-ico {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: rgba(21, 101, 255, .1);
  border: 1px solid rgba(21, 101, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-mc-ico i,
.orw-mc-ico svg {
  font-size: 19px;
  color: var(--orw-tl-tx);
}

.orw-mc h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 5px;
}

.orw-mc p {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.65;
  margin: 0;
}

/* ═══ INDUSTRIES ═══ */
.orw-ind-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.orw-ic {
  background: rgba(var(--orw-ink-rgb), .022);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  color: var(--orw-nv);
  transition: all .25s;
  display: block;
  position: relative;
  overflow: hidden;
}

.orw-ic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orw-tl), var(--orw-bl));
  transform: scaleX(0);
  transition: transform .3s;
  transform-origin: center;
}

.orw-ic:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .05);
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(var(--orw-ink-rgb), .14);
  color: var(--orw-nv);
}

.orw-ic:hover::after {
  transform: scaleX(1);
}

.orw-ic-ico {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(58, 160, 255, .08);
  border: 1px solid rgba(58, 160, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: all .25s;
}

.orw-ic-ico i,
.orw-ic-ico svg {
  font-size: 23px;
  color: var(--orw-tl-tx);
}

.orw-ic:hover .orw-ic-ico {
  background: var(--orw-tl);
  border-color: var(--orw-tl);
}

.orw-ic:hover .orw-ic-ico i {
  color: var(--orw-nv);
}

.orw-ic-nm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 4px;
}

.orw-ic-sb {
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .65);
}

/* ═══ LOCATIONS ═══ */
.orw-loc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 56px;
}

.orw-loc-st {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  transition: all .2s;
}

.orw-loc-st:hover {
  border-color: var(--orw-bdt);
}

.orw-loc-st strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--orw-nv);
  line-height: 1;
  margin-bottom: 5px;
}

.orw-loc-st strong sup {
  font-size: 15px;
  vertical-align: super;
  color: var(--orw-tl-tx);
}

.orw-loc-st span {
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .66);
}

.orw-loc-sec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.orw-loc-country-card {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 24px;
  transition: all .2s;
}

.orw-loc-country-card:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .03);
}

.orw-lcc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--orw-bd);
}

.orw-lcc-head .orw-flag {
  font-size: 22px;
}

.orw-lcc-head h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0;
}

.orw-lcc-head span {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .65);
  margin-left: auto;
}

.orw-lcc-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.orw-lcity {
  padding: 5px 13px;
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .71);
  transition: all .15s;
}

.orw-lcity:hover {
  background: rgba(58, 160, 255, .1);
  border-color: rgba(58, 160, 255, .25);
  color: var(--orw-tl-tx);
}

.orw-loc-country-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══ RESULTS ═══ */
.orw-results-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.orw-rn-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.orw-rn {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 26px;
  transition: all .2s;
}

.orw-rn:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .04);
}

.orw-rn-big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--orw-nv);
  line-height: 1;
  margin-bottom: 6px;
}

.orw-rn-big sup {
  font-size: 20px;
  vertical-align: super;
  color: var(--orw-tl-tx);
}

.orw-rn-lbl {
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .66);
}

.orw-rn-lbl p {
  margin: 0;
}

.orw-rt-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.orw-rt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(var(--orw-ink-rgb), .02);
  border: 1px solid var(--orw-bd);
  border-radius: 12px;
  transition: all .2s;
}

.orw-rt:hover {
  border-color: var(--orw-bdb);
  background: rgba(21, 101, 255, .04);
}

.orw-rt-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  background: rgba(21, 101, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-rt-ico i,
.orw-rt-ico svg {
  font-size: 17px;
  color: var(--orw-tl-tx);
}

.orw-rt h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 4px;
}

.orw-rt p {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.6;
  margin: 0;
}

/* ═══ CASE STUDIES ═══ */
.orw-cs-g {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}

.orw-csc {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  overflow: hidden;
  transition: all .25s;
}

.orw-csc:hover {
  border-color: var(--orw-bdb);
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(var(--orw-ink-rgb), .14);
}

.orw-csc.orw-ft {
  background: linear-gradient(160deg, rgba(21, 101, 255, .1), rgba(58, 160, 255, .03));
  border-color: rgba(21, 101, 255, .22);
}

.orw-cs-top {
  padding: 28px 28px 0;
}

.orw-cs-ind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(58, 160, 255, .1);
  color: var(--orw-tl-tx);
  margin-bottom: 14px;
}

.orw-cs-ind i {
  font-size: 10px;
}

.orw-cs-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 9px;
}

.orw-cs-dsc {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.65;
  margin: 0 0 22px;
}

.orw-cs-dsc p {
  margin: 0;
}

.orw-cs-met {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--orw-bd);
}

.orw-csm {
  padding: 16px;
  text-align: center;
  border-right: 1px solid var(--orw-bd);
}

.orw-csm:last-child {
  border-right: none;
}

.orw-csm strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--orw-tl-tx);
  line-height: 1;
  margin-bottom: 4px;
}

.orw-csm span {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .64);
}

/* ═══ PORTFOLIO ═══ */
.orw-port-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.orw-pgc {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  overflow: hidden;
  transition: all .25s;
}

.orw-pgc:hover {
  border-color: var(--orw-bdt);
  transform: translateY(-5px);
  box-shadow: 0 28px 60px rgba(var(--orw-ink-rgb), .14);
}

.orw-pt {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.orw-pt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--orw-ink-rgb), .05), transparent);
}

.orw-pt i,
.orw-pt svg {
  font-size: 46px;
  opacity: .45;
  position: relative;
  z-index: 1;
  color: #fff;
}

.orw-pt1 {
  background: linear-gradient(135deg, #0A1B2F, #1565FF);
}

.orw-pt2 {
  background: linear-gradient(135deg, #061A18, #3AA0FF);
}

.orw-pt3 {
  background: linear-gradient(135deg, #0A1530, #1565FF 70%, #3AA0FF);
}

.orw-pt4 {
  background: linear-gradient(135deg, #0D1A30, #0A52CC);
}

.orw-pt5 {
  background: linear-gradient(135deg, #06201C, #2F80ED);
}

.orw-pt6 {
  background: linear-gradient(135deg, #081425, #1565FF 60%, #3AA0FF);
}

.orw-pt-img {
  background-size: cover;
  background-position: center;
}

.orw-pt-img::before {
  background: linear-gradient(180deg, rgba(var(--orw-ink-rgb), 0) 40%, rgba(var(--orw-ink-rgb), .55) 100%);
}

.orw-pt-body {
  padding: 22px;
}

.orw-pt-body h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 4px;
}

.orw-pt-body p {
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .66);
  margin: 0 0 14px;
}

.orw-pt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.orw-ptg {
  padding: 3px 11px;
  border-radius: 100px;
  background: rgba(58, 160, 255, .08);
  color: rgba(58, 160, 255, .75);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(58, 160, 255, .15);
}

/* ═══ PORTFOLIO SCROLL (scroll-to-preview gallery, OR — Portfolio Showcase) ═══ */
.orw-psg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.orw-psc {
  background: var(--orw-bg);
  border: 1px solid var(--orw-bd);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.orw-psc:hover,
.orw-psc:focus-visible {
  transform: translateY(-5px);
  border-color: var(--orw-bdt);
  box-shadow: 0 28px 60px rgba(var(--orw-ink-rgb), .14);
}

.orw-psc:focus-visible {
  outline: 2px solid var(--orw-bl);
  outline-offset: 2px;
}

.orw-psc-win {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--orw-bg3);
}

.orw-psc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .35s ease;
}

.orw-psc:hover .orw-psc-img,
.orw-psc:focus-visible .orw-psc-img,
.orw-psc:focus-within .orw-psc-img {
  transform: scale(1.05);
}

.orw-psc-ph {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--orw-ink-rgb), .28);
}

.orw-psc-ph i {
  font-size: 40px;
}

.orw-psc-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--orw-ink-rgb), .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}

.orw-psc:hover .orw-psc-zoom,
.orw-psc:focus-visible .orw-psc-zoom {
  opacity: 1;
  transform: scale(1);
}

.orw-psc-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--orw-bd);
}

.orw-psc-nm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--orw-nv);
}

.orw-psc-ct {
  font-size: 11px;
  font-weight: 600;
  color: var(--orw-tl-tx);
  text-align: right;
}

.orw-psc-empty {
  cursor: default;
}

.orw-psc-empty:hover {
  transform: none;
  box-shadow: none;
}

/* Popup opened on click — shows the same image at full size, scrollable if
   it's taller than the viewport. Built once by JS and reused for every
   .orw-psc trigger on the page, so it's appended outside any single
   widget's .orw-section-wrap and styled with its own dark-agnostic tokens. */
.orw-psc-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: 'DM Sans', sans-serif;
}

.orw-psc-modal.orw-open {
  display: flex;
}

.orw-psc-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 26, .82);
}

.orw-psc-modal-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}

.orw-psc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--orw-bd);
  flex: 0 0 auto;
}

.orw-psc-modal-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--orw-nv);
}

.orw-psc-modal-cat {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--orw-tl-tx);
  margin-top: 2px;
}

.orw-psc-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  border: 1px solid var(--orw-bd) !important;
  background: var(--orw-bg2) !important;
  color: var(--orw-nv) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .2s;
}

.orw-psc-modal-close:hover {
  background: var(--orw-bg3) !important;
}

.orw-psc-modal-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

body.orw-psc-lock {
  overflow: hidden;
}

/* Popup gallery — 60% main shot / 40% up to 3 side thumbs (with a "+N"
   badge on the last one if there are more images than that), all of which
   open the shared .orw-psc-lightbox below. Card buttons, not <a>/<div>,
   so they're keyboard-reachable and get free :focus-visible handling. */
.orw-psc-gallery {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 14px;
  padding: 20px;
}

.orw-psc-gmain,
.orw-psc-gthumb {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--orw-bg3) !important;
  position: relative;
}

.orw-psc-gmain img,
.orw-psc-gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.orw-psc-gmain:hover img,
.orw-psc-gthumb:hover img {
  transform: scale(1.05);
}

.orw-psc-gmain {
  height: 420px;
}

.orw-psc-gside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 420px;
}

.orw-psc-gthumb {
  flex: 1 1 0;
  min-height: 0;
}

.orw-psc-gmore {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 27, 47, .62);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.orw-psc-details {
  padding: 4px 20px 24px;
  color: rgba(var(--orw-ink-rgb), .78);
  font-size: 14.5px;
  line-height: 1.75;
}

.orw-psc-details p {
  margin: 0 0 14px;
}

.orw-psc-details p:last-child {
  margin-bottom: 0;
}

.orw-psc-details h1,
.orw-psc-details h2,
.orw-psc-details h3,
.orw-psc-details h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--orw-nv);
  margin: 20px 0 10px;
}

.orw-psc-details ul,
.orw-psc-details ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.orw-psc-details a {
  color: var(--orw-tl-tx);
}

@media screen and (max-width: 680px) {
  .orw-psc-gallery {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .orw-psc-gmain {
    height: 260px;
  }

  .orw-psc-gside {
    flex-direction: row;
    height: 90px;
  }
}

/* Shared full-size viewer for any gallery image — opens on top of
   .orw-psc-modal (higher z-index), so it stacks correctly when a gallery
   image is clicked from inside an already-open project popup. */
.orw-psc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.orw-psc-lightbox.orw-open {
  display: flex;
}

.orw-psc-lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 26, .92);
}

.orw-psc-lightbox-img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

.orw-psc-lightbox-close,
.orw-psc-lightbox-nav {
  position: absolute;
  z-index: 2;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}

.orw-psc-lightbox-close:hover,
.orw-psc-lightbox-nav:hover {
  background: rgba(255, 255, 255, .22) !important;
}

.orw-psc-lightbox-close {
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.orw-psc-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.orw-psc-lightbox-prev {
  left: 20px;
}

.orw-psc-lightbox-next {
  right: 20px;
}

.orw-psc-lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .1);
  padding: 6px 14px;
  border-radius: 999px;
}

@media screen and (max-width: 480px) {
  .orw-psc-lightbox {
    padding: 16px;
  }

  .orw-psc-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

/* ═══ WHY US ═══ */
.orw-why-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.orw-why-pts {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.orw-wp {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 22px;
  transition: all .2s;
}

.orw-wp:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .04);
}

.orw-wp-ico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--orw-bl);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.orw-wp-ico i,
.orw-wp-ico svg {
  font-size: 14px;
  color: #fff;
}

.orw-wp h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 5px;
}

.orw-wp p {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .68);
  line-height: 1.6;
  margin: 0;
}

.orw-why-vis {
  background: rgba(var(--orw-ink-rgb), .02);
  border: 1px solid var(--orw-bd);
  border-radius: 28px;
  padding: 38px;
}

.orw-wv-l {
  font-size: 10.5px;
  color: rgba(var(--orw-ink-rgb), .62);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 28px;
}

.orw-sbars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.orw-sbi-h {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(var(--orw-ink-rgb), .73);
  margin-bottom: 8px;
}

.orw-sbi-h span:last-child {
  color: var(--orw-tl-tx);
  font-weight: 600;
}

.orw-sbi-tr {
  height: 4px;
  background: rgba(var(--orw-ink-rgb), .05);
  border-radius: 3px;
  overflow: hidden;
}

.orw-sbi-fl {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
}

/* ═══ TOOLS ═══ */
.orw-tools-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.orw-tc2 {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s;
}

.orw-tc2:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .04);
  transform: translateY(-2px);
}

.orw-tli {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-tli i,
.orw-tli svg {
  font-size: 20px;
}

.orw-tli.orw-ta {
  background: rgba(255, 107, 53, .1);
}

.orw-tli.orw-ta i {
  color: #D9581E;
}

.orw-tli.orw-tbb {
  background: rgba(255, 122, 0, .1);
}

.orw-tli.orw-tbb i {
  color: #B36B00;
}

.orw-tli.orw-ttc {
  background: rgba(58, 160, 255, .1);
}

.orw-tli.orw-ttc i {
  color: var(--orw-tl-tx);
}

.orw-tli.orw-td {
  background: rgba(66, 133, 244, .1);
}

.orw-tli.orw-td i {
  color: #1D74D6;
}

.orw-tli.orw-te {
  background: rgba(255, 152, 0, .1);
}

.orw-tli.orw-te i {
  color: #A66A00;
}

.orw-tli.orw-tf2 {
  background: rgba(100, 120, 200, .1);
}

.orw-tli.orw-tf2 i {
  color: #4C6FC4;
}

.orw-tli.orw-tg {
  background: rgba(33, 150, 243, .1);
}

.orw-tli.orw-tg i {
  color: #1E7FD1;
}

.orw-tli.orw-th {
  background: rgba(58, 160, 255, .08);
}

.orw-tli.orw-th i {
  color: var(--orw-tl-tx);
}

.orw-tc2 h5 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 2px;
}

.orw-tc2 span {
  font-size: 12px;
  color: rgba(var(--orw-ink-rgb), .64);
}

/* ═══ TESTIMONIALS ═══ */
.orw-test-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.orw-tec {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 30px;
  transition: all .25s;
}

.orw-tec:hover {
  border-color: var(--orw-bdt);
  background: rgba(58, 160, 255, .03);
  transform: translateY(-3px);
}

.orw-tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(58, 160, 255, .08);
  border: 1px solid rgba(58, 160, 255, .18);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--orw-tl-tx);
  margin-bottom: 12px;
}

.orw-tc-stars {
  color: var(--orw-tl-tx);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.orw-tc-q {
  font-size: 14.5px;
  color: rgba(var(--orw-ink-rgb), .72);
  line-height: 1.74;
  margin-bottom: 22px;
  font-style: italic;
}

.orw-tc-q p {
  margin: 0;
}

.orw-tc-q::before {
  content: '\201C';
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 40px;
  color: var(--orw-tl-tx);
  line-height: .65;
  display: block;
  margin-bottom: 10px;
  font-style: normal;
}

.orw-tc-auth {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--orw-bd);
}

.orw-tc-av {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(135deg, var(--orw-bl), var(--orw-tl));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.orw-tc-nm {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--orw-nv);
  margin-bottom: 2px;
}

.orw-tc-rl {
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .65);
}

/* ═══ FAQ — smooth Bootstrap-style animated accordion ═══
   Two real column containers (not a flat CSS grid) — each column stacks its
   own items independently, so opening one never changes the other column's
   height or leaves a gap next to it. */
.orw-faq-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  align-items: start;
}

.orw-faq-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.orw-fq {
  background: rgba(var(--orw-ink-rgb), .025);
  border: 1px solid var(--orw-bd);
  border-radius: 12px;
  overflow: hidden;
  height: fit-content;
  transition: border-color .25s;
}

.orw-fq.orw-on {
  border-color: var(--orw-bdb);
}

.orw-fq-q {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: rgba(var(--orw-ink-rgb), .82);
  gap: 14px;
  transition: all .2s;
  user-select: none;
}

.orw-fq-q:hover {
  background: rgba(58, 160, 255, .06);
  color: var(--orw-nv);
}

.orw-fq-ic {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(58, 160, 255, .1);
  border: 1px solid rgba(58, 160, 255, .2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.orw-fq-ic i {
  font-size: 11px;
  color: var(--orw-tl-tx);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.orw-fq.orw-on .orw-fq-ic {
  background: var(--orw-tl);
  border-color: var(--orw-tl);
}

.orw-fq.orw-on .orw-fq-ic i {
  transform: rotate(135deg);
  color: var(--orw-nv);
}

/* Animated height — JS measures the real content height (scrollHeight) and
   transitions the exact pixel value, then releases to height:auto once open
   (same technique Bootstrap's own collapse component uses). The height:auto
   rule below is only the pre-JS / fallback state for server-rendered
   default-open items. */
.orw-fq-a {
  height: 0;
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.orw-fq.orw-on .orw-fq-a {
  height: auto;
}

.orw-fq-a-inner {
  padding: 16px 22px 20px;
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .66);
  line-height: 1.75;
  border-top: 1px solid var(--orw-bd);
}

.orw-fq-a-inner p {
  margin: 0;
}

.orw-fq-a-inner p + p {
  margin-top: 10px;
}

/* ═══ CTA BAND ═══ */
.orw-cta-band {
  background: linear-gradient(135deg, var(--orw-bg2), var(--orw-bg3));
  padding: 110px 2.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.orw-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(21, 101, 255, .1), transparent);
  pointer-events: none;
}

.orw-cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 70px, rgba(var(--orw-ink-rgb), .022) 70px, rgba(var(--orw-ink-rgb), .022) 71px);
  pointer-events: none;
}

.orw-cta-in {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

.orw-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(58, 160, 255, .12);
  border: 1px solid rgba(58, 160, 255, .25);
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 12px;
  color: var(--orw-tl-tx);
  margin-bottom: 24px;
  font-weight: 600;
}

.orw-cta-band h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(30px, 4.5vw, 58px);
  font-weight: 800;
  color: var(--orw-nv);
  letter-spacing: -1.5px;
  margin: 0 0 16px;
  line-height: 1.05;
}

.orw-cta-band p {
  font-size: 17px;
  color: rgba(var(--orw-ink-rgb), .74);
  margin: 0 0 44px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.72;
}

.orw-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.orw-cta-wh {
  padding: 15px 34px;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 36px rgba(21, 101, 255, .32);
}

.orw-cta-wh:hover {
  background: var(--orw-bl2);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(21, 101, 255, .4);
  color: #fff;
}

.orw-cta-tr {
  padding: 15px 28px;
  background: transparent;
  color: var(--orw-nv);
  border: 1px solid rgba(var(--orw-ink-rgb), .2);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
}

.orw-cta-tr:hover {
  background: rgba(var(--orw-ink-rgb), .05);
  border-color: rgba(var(--orw-ink-rgb), .32);
  color: var(--orw-nv);
}

.orw-cta-proof {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 44px;
  flex-wrap: wrap;
}

.orw-ctap {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(var(--orw-ink-rgb), .73);
}

.orw-ctap i {
  font-size: 11px;
  color: var(--orw-tl-tx);
}

/* ═══ FLOATING AUDIT BUTTON ═══ */
.orw-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 888;
  background: var(--orw-bl);
  color: #fff;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(21, 101, 255, .5);
  animation: orwFabUp .9s .5s both;
}

.orw-fab:hover {
  background: var(--orw-bl2);
  transform: translateY(-2px);
  color: #fff;
}

.orw-fab.orw-fab-left {
  right: auto;
  left: 28px;
}

/* Fixed-position FAB otherwise permanently overlaps whatever scrolls
   beneath it — on mobile that's most often the footer's small legal links
   (Privacy Policy / Cookie Policy row), which it can end up sitting
   directly on top of since there's no room to scroll past it. Hidden
   instead once the footer is in view (see initFabFooterHide() in
   optiranked-widgets.js). */
.orw-fab.orw-fab-hide {
  /* .orw-fab's own entrance animation (orwFabUp, fill-mode "both") holds
     its filled opacity/transform values with animation-level cascade
     priority, which otherwise beats these plain declarations regardless
     of specificity — resetting it to none first lets them actually apply. */
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media screen and (max-width: 680px) {
  .orw-fab {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }

  .orw-fab.orw-fab-left {
    left: 16px;
  }
}

.orw-fab-dot {
  width: 8px;
  height: 8px;
  background: var(--orw-tl);
  border-radius: 50%;
  animation: orwBlink 1.5s infinite;
}

/* ═══ GRAIN OVERLAY (site-wide film-grain texture, matches original design) ═══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .015;
}

/* ═══ TOP BAR ═══ */
.orw-topbar {
  background: var(--orw-bl);
  padding: 9px 2rem;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .92);
  position: relative;
  overflow: hidden;
}

.orw-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 50%, transparent);
  animation: orwShine 3.5s infinite;
}

@keyframes orwShine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.orw-topbar a {
  color: var(--orw-tl-tx);
  font-weight: 700;
  text-decoration: none;
  margin-left: 8px;
}

.orw-topbar a:hover {
  text-decoration: underline;
}

.orw-tbc {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  /* !important on all four: see .orw-nav-toggle above — Astra's global
     button styling otherwise wins on background/border/color/padding
     despite this rule's higher specificity, both bloating the click target
     (padding, breaking the translateY(-50%) centering) and painting Astra's
     solid brand color over what's meant to be an invisible icon button. */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: rgba(var(--orw-ink-rgb), .69) !important;
  cursor: pointer;
  font-size: 14px;
}

/* ═══ NAVBAR ═══ */
/* Reserves the nav's own height in normal document flow. Needed because
   .orw-nav below is `position: fixed` (removed from flow), so without this
   the section right after it would slide up underneath it. */
.orw-navwrap {
  height: 70px;
}

.orw-nav {
  /* Astra's base theme sets `body { overflow-x: hidden }`, which per the
     CSS Overflow spec forces the paired overflow-y to compute as "auto"
     instead of "visible" — silently turning <body> into its own scroll
     container. `position: sticky` resolves against the nearest *scrolling*
     ancestor, so it ends up sticking relative to that (mostly inert) body
     scroll box instead of the viewport, and visually just scrolls away
     with the page. `position: fixed` sidesteps the whole problem — it's
     always relative to the viewport — at the cost of needing JS
     (updateNavFixedTop() in optiranked-widgets.js) to manually slide it
     down to sit below the top bar and lock to top:0 once that's scrolled
     past, which `sticky` would otherwise have handled on its own.
     .orw-navwrap above reserves this bar's height in normal flow. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Higher than .orw-nul's 950 and .orw-nav-backdrop's 940 (below) — on
     mobile the off-canvas panel and its backdrop are both fixed overlays
     that would otherwise render on top of the bar itself, hiding the
     hamburger/✕ toggle with no visible way left to close the menu. */
  z-index: 960;
  /* Nav is always a dark bar regardless of the light-theme default, so it
     needs its own permanent light-ink override — without this, every
     rgba(var(--orw-ink-rgb), X) link/label in the nav (and inside the mega
     menu, which inherits this since it's a DOM descendant) renders dark
     text on a dark bar and is effectively invisible. */
  --orw-ink-rgb: 255, 255, 255;
  --orw-nv: #FFFFFF;
  --orw-wh: #FFFFFF;
  --orw-tl-tx: #7FD4FF;
  background: rgba(10, 27, 47, .93);
  backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--orw-bd);
  transition: box-shadow .2s;
}

.orw-nav.orw-scrolled {
  /* Fixed dark shadow regardless of the nav's ink-rgb flip above — a
     "light" drop shadow would be invisible. */
  box-shadow: 0 8px 30px rgba(10, 27, 47, .18);
}

.orw-nw {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 2.5rem;
  gap: 16px;
}

.orw-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Uploaded logo image (see OptiRanked_Widget_Navbar::render_logo_mark()) —
   height is set inline per the widget's "Logo Image Height" control; width
   just follows the image's own aspect ratio, capped so an unusually wide
   upload can't push the rest of the navbar off-screen. */
.orw-logo-img {
  display: block;
  width: auto;
  max-width: 220px;
}

.orw-lmk {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--orw-bl), var(--orw-bl2));
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(21, 101, 255, .35);
}

.orw-lmk i,
.orw-lmk svg {
  font-size: 19px;
  color: #fff;
}

.orw-ltx strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  display: block;
  line-height: 1.1;
}

.orw-ltx strong .orw-op {
  color: #fff;
}

.orw-ltx strong .orw-rk {
  color: var(--orw-bl);
}

.orw-ltx small {
  font-size: 8.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--orw-ink-rgb), .64);
  display: block;
}

.orw-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  /* Astra's dynamic Customizer CSS (the #astra-theme-css-inline-css <style>
     block) sets background-color/border-color/padding on every bare
     <button> via `.menu-toggle, button, .ast-button, ... { ... }`. That
     selector's `button` clause is lower specificity (0,0,0,1) than this
     class rule (0,0,1,0) and carries no !important, so by the ordinary
     cascade rules this rule should always win outright — but empirically,
     confirmed by disabling that inline stylesheet in DevTools, it doesn't:
     Astra's background-color/border-color still won. Rather than rely on
     understanding that fully, !important on the exact longhands Astra sets
     guarantees this button always renders our own translucent style, not
     Astra's solid global button color. */
  padding: 0 !important;
  background-color: rgba(var(--orw-ink-rgb), .05) !important;
  border: 1px solid var(--orw-bd) !important;
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
  /* Higher than .orw-nul's z-index (950 below): both are inside the same
     .orw-nav stacking context, and an element with a set z-index (.orw-nul)
     paints above same-context siblings that don't have one — regardless of
     .orw-nav's own z-index — so without this the open panel buries the
     toggle, leaving no visible way to close the menu. */
  position: relative;
  z-index: 970;
}

.orw-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: all .25s;
}

.orw-nav-toggle.orw-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.orw-nav-toggle.orw-active span:nth-child(2) {
  opacity: 0;
}

.orw-nav-toggle.orw-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Wraps .orw-mnav-head + .orw-nul. On desktop it's `display:contents` —
   invisible to layout, so .orw-nul still sits directly in .orw-nw's flex
   row exactly as before. On mobile (see media query below) this wrapper
   becomes the actual sliding off-canvas panel, with the drill-down header
   pinned above the scrollable .orw-nul list inside it. */
.orw-nul-wrap {
  display: contents;
}

/* Drill-down header — mobile only (hidden here, shown in the media query
   below). Back is hidden at the root level; Close is always visible so the
   menu can be dismissed from any depth without walking back out first. */
.orw-mnav-head {
  display: none;
}

.orw-mnav-back {
  display: none;
  align-items: center;
  gap: 6px;
  /* !important: see .orw-nav-toggle above — Astra's global button styling
     otherwise wins on background/border/color/padding despite this rule's
     higher specificity. */
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 9px 7px 6px !important;
  margin-left: -6px;
  border-radius: 8px;
  transition: background .15s;
}

.orw-mnav-back:hover {
  background: rgba(255, 255, 255, .08);
}

.orw-mnav-back i,
.orw-mnav-back span {
  /* Same reasoning as .orw-nl .orw-arr above — keeps every tap on this
     button resolving to .orw-mnav-back itself, not its icon/text nodes. */
  pointer-events: none;
}

.orw-mnav-back i {
  font-size: 12px;
}

.orw-nul-wrap[data-orw-level="mega"] .orw-mnav-back,
.orw-nul-wrap[data-orw-level="col"] .orw-mnav-back {
  display: inline-flex;
}

.orw-mnav-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orw-mnav-close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* !important: see .orw-nav-toggle above. */
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--orw-bd) !important;
  border-radius: 9px;
  color: #fff !important;
  cursor: pointer;
  margin-left: auto;
  transition: background .15s, border-color .15s;
}

.orw-mnav-close:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--orw-bdt);
}

.orw-mnav-close i {
  font-size: 13px;
  pointer-events: none;
}

.orw-nul {
  display: flex;
  /* Stretch (not center) so each .orw-ni fills the full 70px nav row —
     otherwise there's a dead strip between the link and .orw-mega-fw
     (which sits at top:70px) that isn't part of either element, and the
     mouse loses :hover crossing it before it reaches the menu. */
  align-items: stretch;
  align-self: stretch;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.orw-ni {
  position: relative;
  display: flex;
}

.orw-nl {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(var(--orw-ink-rgb), .73);
  transition: all .2s;
  white-space: nowrap;
}

.orw-nl .orw-arr {
  font-size: 8px;
  color: rgba(var(--orw-ink-rgb), .62);
  transition: transform .2s;
  /* Purely decorative — without this, a tap landing on the icon's own box
     can resolve its click target to the icon element rather than the
     .orw-nl link (Font Awesome renders it as a small nested element, and on
     some mobile browsers the two don't share hit-testing/bubbling as
     cleanly as the icon's visual position suggests). That mismatch is what
     let tapping the arrow reach the desktop hover-toggle branch instead of
     the mobile drill-down branch in optiranked-widgets.js, since that
     branch relies on `.closest('.orw-nl')` resolving reliably. Disabling
     pointer-events here forces every tap anywhere in the row, arrow
     included, to resolve to the link itself. */
  pointer-events: none;
}

/* :hover-driven mega-menu opening is restricted to devices that actually
   have a mouse (see the @media block right after .orw-mega-fw below for
   the full explanation) — touchscreens can apply a "sticky hover" after a
   tap that never clears until something else is tapped, which opened the
   mega menu as an uncontrolled, JS-independent ghost state alongside (or
   instead of) the real drill-down level the click handler sets up. */
@media (hover: hover) and (pointer: fine) {
  .orw-nl:hover {
    color: #fff;
    background: rgba(var(--orw-ink-rgb), .055);
  }

  .orw-ni:hover>.orw-nl .orw-arr {
    transform: rotate(180deg);
  }
}

.orw-ni.orw-mega-open>.orw-nl .orw-arr {
  transform: rotate(180deg);
}

.orw-mega-fw {
  display: none;
  position: fixed;
  top: 70px !important;
  left: 0;
  width: 100%;
  background: var(--orw-nv2);
  border-top: 1px solid var(--orw-bdt);
  border-bottom: 1px solid var(--orw-bd);
  box-shadow: 0 24px 80px rgba(10, 27, 47, .35), inset 0 1px 0 rgba(58, 160, 255, .1);
  z-index: 899;
  animation: orwFwIn .22s ease both;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.orw-ni.orw-mega-open>.orw-mega-fw {
  display: block;
}

/* Desktop-only hover-to-open. `hover:hover` is false on touchscreens (no
   real hover capability) even though many mobile browsers still MATCH
   `:hover` itself once a finger has tapped an element — that mismatch is
   exactly the bug this guards against: without it, a tap anywhere in
   .orw-ni (not just the link) could flip .orw-mega-fw to visible via pure
   CSS, completely bypassing the mobile drill-down state machine in
   optiranked-widgets.js (data-orw-level, hiding sibling items, moving the
   title into .orw-mnav-head) — the exact "half-open, still shows Menu/root
   header" bug reported from a real device. `pointer:fine` is the second
   half of the same guard: a device can technically report `hover:hover`
   while still being touch-first (some hybrid laptops), so both are
   required together. */
@media (hover: hover) and (pointer: fine) {
  .orw-ni:hover>.orw-mega-fw {
    display: block;
  }
}

@keyframes orwFwIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.orw-mega-fw-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 2.5rem;
}

.orw-mega-fw::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orw-tl) 30%, var(--orw-bl) 70%, transparent);
}

.orw-mgfw-cols {
  display: grid;
  gap: 28px;
}

.orw-mgfw-cols.orw-c2 {
  grid-template-columns: repeat(2, 1fr);
}

.orw-mgfw-cols.orw-c3 {
  grid-template-columns: repeat(3, 1fr);
}

.orw-mgfw-cols.orw-c4 {
  grid-template-columns: repeat(4, 1fr);
}

.orw-mgfw-cols.orw-c5 {
  grid-template-columns: repeat(5, 1fr);
}

.orw-mgfw-col-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orw-tl-tx);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.orw-mgfw-par {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(var(--orw-ink-rgb), .02);
  border: 1px solid var(--orw-bd2);
  border-radius: 12px;
  padding: 13px 14px 11px;
  margin-bottom: 8px;
  transition: border-color .2s;
}

.orw-mgfw-par:hover {
  border-color: var(--orw-bdt);
}

.orw-mgfw-par-ico {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(58, 160, 255, .1);
  border: 1px solid rgba(58, 160, 255, .18);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-mgfw-par-ico i {
  font-size: 14px;
  color: var(--orw-tl-tx);
}

.orw-mgfw-par strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.orw-mgfw-par p {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .65);
  margin: 0;
}

.orw-mgfw-ch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding-left: 2px;
}

.orw-mgc {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  color: rgba(var(--orw-ink-rgb), .69);
  transition: all .15s;
}

.orw-mgc i {
  font-size: 9px;
  color: rgba(58, 160, 255, .45);
}

.orw-mgc:hover {
  color: var(--orw-tl-hover);
  background: rgba(58, 160, 255, .12);
}

.orw-mgfw-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .17s;
  margin-bottom: 4px;
}

.orw-mgfw-q:hover {
  background: rgba(21, 101, 255, .09);
  border-color: rgba(21, 101, 255, .2);
}

.orw-mgfw-q-ico {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: rgba(21, 101, 255, .1);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-mgfw-q-ico i {
  font-size: 13px;
  color: var(--orw-tl-tx);
}

.orw-mgfw-q:hover .orw-mgfw-q-ico {
  background: var(--orw-bl);
}

.orw-mgfw-q:hover .orw-mgfw-q-ico i {
  color: #fff;
}

.orw-mgfw-q strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1px;
}

.orw-mgfw-q span {
  font-size: 11px;
  color: rgba(var(--orw-ink-rgb), .65);
}

.orw-loc-country {
  margin-bottom: 16px;
}

.orw-lcc-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.orw-loc-city {
  padding: 4px 12px;
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 100px;
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .69);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}

.orw-loc-city:hover {
  background: rgba(58, 160, 255, .1);
  border-color: rgba(58, 160, 255, .25);
  color: var(--orw-tl-tx);
}

.orw-mega-feat {
  background: linear-gradient(135deg, rgba(21, 101, 255, .12), rgba(58, 160, 255, .05));
  border: 1px solid rgba(58, 160, 255, .18);
  border-radius: 14px;
  padding: 20px;
  margin-top: 8px;
}

.orw-mega-feat h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.orw-mega-feat p {
  font-size: 13px;
  color: rgba(var(--orw-ink-rgb), .69);
  margin: 0 0 16px;
  line-height: 1.6;
}

.orw-mega-feat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}

.orw-mega-feat-btn:hover {
  background: var(--orw-bl2);
}

/* Persistent logo + social + CTA bar shown at the bottom of every mega menu. */
.orw-mega-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 2.5rem;
  border-top: 1px solid var(--orw-bd);
  background: rgba(var(--orw-ink-rgb), .015);
}

.orw-mega-bar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.orw-mega-bar-logo .orw-lmk-sm {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
}

.orw-mega-bar-logo .orw-lmk-sm i,
.orw-mega-bar-logo .orw-lmk-sm svg {
  font-size: 13px;
}

.orw-mega-bar-logo strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.orw-mega-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.orw-mega-bar-social {
  display: flex;
  gap: 6px;
}

.orw-mega-bar-social .orw-ftsc {
  width: 30px;
  height: 30px;
}

.orw-mega-bar-social .orw-ftsc i {
  font-size: 12px;
}

.orw-mega-bar-cta {
  padding: 8px 16px;
  font-size: 12.5px;
}

.orw-nact {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.orw-n-ghost {
  padding: 8px 18px;
  border: 1px solid rgba(var(--orw-ink-rgb), .12);
  color: rgba(var(--orw-ink-rgb), .75);
  background: transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}

.orw-n-ghost:hover {
  border-color: var(--orw-tl);
  color: #fff;
  background: rgba(58, 160, 255, .16);
}

.orw-n-cta {
  padding: 9px 22px;
  background: var(--orw-bl);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .2s;
}

.orw-n-cta:hover {
  background: var(--orw-bl2);
  box-shadow: 0 6px 22px rgba(21, 101, 255, .4);
  color: #fff;
}

/* ═══ FOOTER ═══ */
.orw-footer {
  /* Footer is always a dark navy bar — same reasoning as .orw-nav above,
     needs its own permanent light-ink override so every
     rgba(var(--orw-ink-rgb), X) label/link in it isn't dark-on-dark. */
  --orw-ink-rgb: 255, 255, 255;
  --orw-nv: #FFFFFF;
  --orw-wh: #FFFFFF;
  --orw-tl-tx: #7FD4FF;
  background: var(--orw-nv2);
  padding: 80px 2.5rem 0;
  border-top: 1px solid var(--orw-bd);
}

.orw-ft-w {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  /* 2fr (About) + 4 narrow 1fr tracks — the 3 default Link Columns plus
     the dedicated Contact Column at the end. If a page's Link Columns
     repeater still has an old 4th/5th entry saved from before the Contact
     Column existed, delete it in Elementor (Footer widget → Link Columns)
     so the row stays a clean 5 across; leaving a stale extra column will
     just overflow this fixed 5-track grid rather than resize around it. */
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 64px;
}

.orw-ft-ab p {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .63);
  line-height: 1.72;
  margin: 18px 0 22px;
}

.orw-ft-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.orw-fts {
  background: rgba(var(--orw-ink-rgb), .03);
  border: 1px solid var(--orw-bd);
  border-radius: 9px;
  padding: 10px 14px;
  text-align: center;
}

.orw-fts strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.orw-fts span {
  font-size: 10.5px;
  color: rgba(var(--orw-ink-rgb), .63);
}

.orw-ft-soc {
  display: flex;
  gap: 8px;
}

.orw-ftsc {
  width: 38px;
  height: 38px;
  background: rgba(var(--orw-ink-rgb), .04);
  border: 1px solid var(--orw-bd);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}

.orw-ftsc i {
  font-size: 15px;
  color: rgba(var(--orw-ink-rgb), .65);
}

.orw-ftsc:hover {
  background: var(--orw-bl);
  border-color: var(--orw-bl);
}

.orw-ftsc:hover i {
  color: #fff;
}

.orw-ft-col h5 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(var(--orw-ink-rgb), .63);
  margin: 0 0 20px;
}

.orw-ft-ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* Sub-grouped column (e.g. Services = SEO Services + Web Development
   merged into one column via the "##Sub-heading" line convention in
   parse_column_groups()). Plain single-group columns render one .orw-ft-grp
   with no heading, so this doesn't change their spacing. */
.orw-ft-grp + .orw-ft-grp {
  margin-top: 22px;
}

.orw-ft-grp-h {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(var(--orw-ink-rgb), .4);
  margin-bottom: 12px;
}

.orw-ft-ul a {
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .64);
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.orw-ft-ul a:hover {
  color: var(--orw-tl-hover);
}

.orw-ft-ul a i {
  font-size: 9px;
  color: rgba(58, 160, 255, .35);
}

/* Last footer column — contact details + booking button, replacing a
   plain link list since these entries need an icon + two-line label/value,
   not a single link. */
.orw-ft-cinfo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.orw-ft-ci {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  transition: transform .15s;
}

a.orw-ft-ci:hover {
  transform: translateX(3px);
}

.orw-ft-ci-ico {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--orw-tl-tx);
}

.orw-ft-ci-txt {
  display: block;
  padding-top: 3px;
}

.orw-ft-ci-txt strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(var(--orw-ink-rgb), .9);
  margin-bottom: 2px;
  transition: color .15s;
}

a.orw-ft-ci:hover .orw-ft-ci-txt strong {
  color: var(--orw-tl-tx);
}

.orw-ft-ci-txt span {
  display: block;
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .6);
  line-height: 1.5;
}

.orw-ft-cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--orw-bl);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.orw-ft-cbtn:hover {
  background: var(--orw-bl2);
  transform: translateY(-2px);
  color: #fff;
}

.orw-ft-bar {
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--orw-bd);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .60);
  flex-wrap: wrap;
  gap: 12px;
}

.orw-ft-br {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.orw-ft-br a {
  font-size: 12.5px;
  color: rgba(var(--orw-ink-rgb), .60);
  text-decoration: none;
  transition: color .2s;
}

.orw-ft-br a:hover {
  color: rgba(var(--orw-ink-rgb), .72);
}

/* ═══ RESPONSIVE ═══ */
@media screen and (max-width: 1024px) {

  .orw-hw,
  .orw-prob-w,
  .orw-results-g,
  .orw-why-g,
  .orw-cf-grid {
    grid-template-columns: 1fr;
  }

  .orw-cf-right {
    border-left: none;
    padding-left: 0;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .orw-book-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .orw-cal-mount + .flatpickr-calendar .flatpickr-day {
    font-size: 13.5px !important;
  }

  .orw-sg,
  .orw-bento,
  .orw-ind-g,
  .orw-meth-g,
  .orw-tools-g,
  .orw-test-g,
  .orw-cs-g,
  .orw-port-g,
  .orw-psg,
  .orw-faq-g,
  .orw-loc-sec-grid,
  .orw-rn-g {
    grid-template-columns: repeat(2, 1fr);
  }

  .orw-sbi,
  .orw-mv-in,
  .orw-proc-tl,
  .orw-loc-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .orw-mgfw-cols.orw-c3,
  .orw-mgfw-cols.orw-c4,
  .orw-mgfw-cols.orw-c5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .orw-ft-w {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

@media screen and (max-width: 900px) {

  /* Nav collapses to a hamburger-triggered off-canvas panel. The panel
     itself is now .orw-nul-wrap (header + list together sliding as one
     unit) — .orw-nul used to carry all of this directly, back when it was
     just a flat accordion list with no header bar. */
  .orw-nav-toggle {
    display: flex;
  }

  .orw-nul-wrap {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 86vw);
    background: var(--orw-nv2);
    border-left: 1px solid var(--orw-bd);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 950;
    box-shadow: -20px 0 60px rgba(var(--orw-ink-rgb), .14);
  }

  .orw-nul-wrap.orw-nav-open {
    transform: translateX(0);
  }

  .orw-mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 18px 20px;
    border-bottom: 1px solid var(--orw-bd);
  }

  .orw-nul {
    /* Without an explicit column direction here, this falls back to the
       base (non-mobile) .orw-nul rule's row + wrap — each 100%-wide .orw-ni
       then forms its own single-item "line", and with .orw-nul stretched
       to fill the panel's remaining height (flex:1 1 auto) the browser
       distributes that leftover height AS SPACE BETWEEN those lines rather
       than shrinking to fit content, which is what actually produced the
       huge gaps between menu rows. */
    flex-direction: column;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-start;
    padding: 14px 20px 30px;
    gap: 4px;
    overflow-y: auto;
  }

  .orw-ni {
    width: 100%;
  }

  .orw-nl {
    width: 100%;
    justify-content: space-between;
  }

  .orw-mega-fw {
    position: static;
    width: auto;
    margin-left: 0;
    box-shadow: none;
    border: none;
    background: rgba(var(--orw-ink-rgb), .03);
    border-radius: 10px;
    margin: 4px 0 8px;
    animation: none;
  }

  .orw-mega-fw::before {
    display: none;
  }

  /* Desktop's 32px/2.5rem (40px) side padding is sized for a full-viewport
     mega dropdown — inside the ~280px-wide mobile panel (.orw-nul already
     contributes its own 20px side padding) that left almost no room for
     the actual cards, which is why they read as cramped/squeezed in from
     both edges. */
  .orw-mega-fw-inner {
    padding: 10px 14px 16px;
  }

  .orw-mgfw-cols,
  .orw-mgfw-cols.orw-c2,
  .orw-mgfw-cols.orw-c3,
  .orw-mgfw-cols.orw-c4,
  .orw-mgfw-cols.orw-c5 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .orw-mgfw-ch {
    grid-template-columns: 1fr;
  }

  .orw-nact {
    display: none;
  }

  /* ─── Drill-down levels ───
     "root"  → just the plain menu list (default).
     "mega"  → one item's mega menu fills the whole panel; its columns
               collapse to a tappable list of just their headings.
     "col"   → one of those columns fills the whole panel with its full
               listing (links / quick cards / flag+cities), replacing the
               heading list. Back always steps up exactly one level; Close
               (in .orw-mnav-head) exits from any level. */

  /* Past root level, every top-level item is hidden except the open one,
     and that item's own link collapses too — its whole row is now just the
     mega content, since the item's name has moved into .orw-mnav-title. */
  .orw-nul-wrap:not([data-orw-level="root"]) .orw-ni:not(.orw-mega-open) {
    display: none;
  }

  .orw-nul-wrap:not([data-orw-level="root"]) .orw-ni.orw-mega-open {
    width: 100%;
  }

  .orw-nul-wrap:not([data-orw-level="root"]) .orw-ni.orw-mega-open>.orw-nl {
    display: none;
  }

  /* Level "mega": columns become a flat list of tappable headings — every
     other block inside each column (parent/child links, quick cards,
     flag+cities) stays in the DOM but hidden, so level "col" can reveal it
     later for the same column with no extra markup. Only the FIRST child
     is kept — some columns (e.g. Locations, when a column bundles more
     than one country) render a second, third, etc. .orw-mgfw-col-label
     internally for each FLAG block; those aren't this column's own heading
     and must stay hidden here too, or the heading list shows every
     country name twice. The column's own heading is always PHP's first
     child of the column div when present, so :first-child reliably tells
     the two apart. */
  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-cols {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-cols>div>* {
    display: none;
  }

  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-cols>div>*:first-child.orw-mgfw-col-label {
    display: flex;
  }

  /* Tappable row for each column — styled as a proper card (icon chip +
     label + chevron) matching the .orw-mgfw-par / .orw-mgfw-q card
     language used one level deeper, instead of the bare all-caps
     section-label look .orw-mgfw-col-label has on desktop (fine as a
     small caption there, but not readable/tappable enough as this level's
     only content on mobile). */
  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-col-label {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--orw-bd2);
    border-radius: 12px;
    background: rgba(var(--orw-ink-rgb), .025);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }

  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-col-label:active {
    border-color: var(--orw-bdt);
    background: rgba(58, 160, 255, .1);
  }

  /* The column's own icon (COL|Label|icon-class) — boxed to match
     .orw-mgfw-q-ico / .orw-mgfw-par-ico elsewhere. Columns without one
     (e.g. plain-text Locations headings) just show label + chevron. */
  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-col-label>i:first-child {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 160, 255, .12);
    border: 1px solid rgba(58, 160, 255, .2);
    border-radius: 9px;
    font-size: 13px;
    color: var(--orw-tl-tx);
    /* Same reasoning as .orw-nl .orw-arr — keeps every tap on this row
       resolving to .orw-mgfw-col-label itself, not this icon. */
    pointer-events: none;
  }

  .orw-nul-wrap[data-orw-level="mega"] .orw-mgfw-col-label::after {
    content: '\f105';
    font: 900 13px 'Font Awesome 6 Free';
    opacity: .5;
    margin-left: auto;
  }

  /* Level "col": only the tapped column stays in the DOM's visible flow —
     its own heading is hidden (it's now .orw-mnav-title instead; see the
     :first-child note above — a later .orw-mgfw-col-label from a FLAG
     block, e.g. a second country sharing this column, is real content and
     must stay visible here), every other column is hidden outright. */
  .orw-nul-wrap[data-orw-level="col"] .orw-mgfw-cols>div {
    display: none;
  }

  .orw-nul-wrap[data-orw-level="col"] .orw-mgfw-cols>div.orw-mnav-active-col {
    display: block;
  }

  .orw-nul-wrap[data-orw-level="col"] .orw-mgfw-cols>div.orw-mnav-active-col>*:first-child.orw-mgfw-col-label {
    display: none;
  }
}

@media screen and (min-width: 901px) {
  .orw-nav-backdrop {
    display: none !important;
  }
}

.orw-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--orw-ink-rgb), .14);
  z-index: 940;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.orw-nav-backdrop.orw-nav-open {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (max-width: 680px) {
  .orw-sec {
    padding: 46px 1.25rem;
  }

  .orw-sg,
  .orw-meth-g,
  .orw-loc-sec-grid,
  .orw-cs-g,
  .orw-port-g,
  .orw-psg,
  .orw-faq-g {
    grid-template-columns: repeat(1, 1fr);
  }

  .orw-ind-g,
  .orw-tools-g,
  .orw-rn-g,
  .orw-sbi,
  .orw-mv-in,
  .orw-proc-tl,
  .orw-loc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .orw-psc-win {
    height: 320px;
  }

  .orw-cf-panel {
    padding: 30px 22px;
    border-radius: 20px;
  }

  .orw-hcf-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .orw-hcf-row .orw-hcf-field {
    margin-bottom: 14px;
  }

  .orw-hcf-row .orw-hcf-field:last-child {
    margin-bottom: 0;
  }

  .orw-hero {
    padding: 80px 1.25rem 70px;
  }

  .orw-footer {
    padding: 80px 1.25rem 0;
  }

  .orw-topbar {
    padding: 9px 1rem;
    font-size: 11.5px;
  }

  .orw-nw {
    padding: 0 1.25rem;
  }

  .orw-ft-w {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 0 40px;
  }

  .orw-ft-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .orw-cta-band {
    padding: 64px 1.25rem;
  }

  .orw-proc-cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .orw-tc2 {
    align-items: flex-start;
    flex-direction: column;
  }

}

@media screen and (max-width: 480px) {

  .orw-mv-band {
    padding: 40px 0px;
  }

  .orw-footer {
    padding: 80px 1.25rem 0;
  }

  .orw-sg,
  .orw-bento,
  .orw-meth-g,
  .orw-faq-g {
    grid-template-columns: repeat(1, 1fr);
  }

  .orw-sol {
    padding: 38px 20px 20px 20px;
  }

  .orw-section-wrap .orw-sec .orw-wrap .orw-rc {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Keep 2 columns even on small phones (rather than stacking to 1) to cut
     down total scroll length — trim padding/font so cards stay comfortable. */

  .orw-proc-cards,
  .orw-loc-sec-grid,
  .orw-cs-g,
  .orw-port-g,
  .orw-psg,
  .orw-test-g {
    grid-template-columns: repeat(1, 1fr);
  }

  .orw-psc-win {
    height: 260px;
  }

  .orw-ind-g,

  .orw-tools-g,
  .orw-rn-g,
  .orw-sbi,
  .orw-mv-in,
  .orw-proc-tl,
  .orw-loc-stats,
  .orw-rec-g {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .orw-tc2 {
    align-items: flex-start;
    flex-direction: column;
  }

  .orw-sc,
  .orw-bn,
  .orw-pcc,
  .orw-tec,
  .orw-csc,
  .orw-mc,
  .orw-pc2,
  .orw-wp,
  .orw-rt,
  .orw-rn {
    padding: 16px;
  }

  .orw-s-ico,
  .orw-bn-ico {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
  }

  .orw-s-ico i,
  .orw-bn-ico i {
    font-size: 16px;
  }

  .orw-s-ttl,
  .orw-bn-ttl {
    font-size: 15px;
  }

  .orw-s-dsc,
  .orw-bn-dsc {
    font-size: 12.5px;
  }

  .orw-tc2 {
    padding: 12px;
  }

  .orw-ic {
    padding: 18px 12px;
  }

  .orw-ic-ico {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
  }

  .orw-pt {
    height: 110px;
  }

  .orw-mv-in,
  .orw-sbi,
  .orw-proc-tl,
  .orw-loc-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .orw-tab-row {
    width: 100%;
  }

  .orw-tb {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES DETAIL PAGE — new widgets built to match a reference page's
   UI/UX exactly (hero/trust-bar/problem-solution/zigzag/services-
   accordion/AI-GEO/comparison-table/process-steps/tools/industries/
   stats-band/areas-served/portfolio/testimonials/pricing/faq/cta),
   restyled with our own --orw- brand tokens instead of the reference's
   own palette. Several reference sections reuse existing widgets
   (Hero, Problem+Solution, Tools, Industries, Case Studies as Portfolio,
   Testimonials, FAQ, CTA Band) since their layout already matched
   closely enough — only the sections below are genuinely new patterns.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SHARED CHECKLIST (Zigzag / AI-GEO) ═══ */
.orw-chk-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 22px 0 0;
  list-style: none;
  padding: 0;
}

.orw-chk-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(var(--orw-ink-rgb), .78);
  line-height: 1.5;
}

.orw-chk-list li i {
  color: var(--orw-bl);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.orw-zz-text .orw-btn-p,
.orw-zz-text .orw-btn-tl,
.orw-ai-geo .orw-btn-p,
.orw-ai-geo .orw-btn-tl {
  margin-top: 28px;
}

/* ═══ TRUST BAR ═══ */
.orw-trust {
  background: var(--orw-nv2);
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.orw-trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.orw-trust-item {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .01em;
}

/* ═══ ZIGZAG CONTENT BLOCK ═══ */
.orw-zz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.orw-zz-rev .orw-zz-text {
  order: 2;
}

.orw-zz-rev .orw-zz-fig {
  order: 1;
}

.orw-zz-fig {
  background: var(--orw-bg2);
  border-radius: 20px;
  padding: 20px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-zz-fig img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.orw-zz-fig-dark {
  background: var(--orw-nv2);
}

.orw-zz-ph {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orw-nv2), var(--orw-bl3));
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-zz-ph i,
.orw-zz-ph svg {
  font-size: 52px;
  color: rgba(255, 255, 255, .5);
}

/* ═══ SERVICES ACCORDION ═══ */
.orw-svcacc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.orw-svcacc-item {
  background: var(--orw-bg);
  border: 1px solid var(--orw-bd);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.orw-svcacc-item.orw-on {
  border-color: var(--orw-bdt);
  box-shadow: 0 18px 40px -20px rgba(21, 101, 255, .35);
}

.orw-svcacc-head {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  background: none;
  border: none;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}

.orw-svcacc-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  color: var(--orw-bl);
  font-size: 13px;
  flex: 0 0 30px;
}

.orw-svcacc-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--orw-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-svcacc-ico i,
.orw-svcacc-ico svg {
  font-size: 19px;
  color: var(--orw-bl);
}

.orw-svcacc-tw {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.orw-svcacc-ttl {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--orw-nv);
}

.orw-svcacc-badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.orw-svcacc-sub {
  font-size: 13px;
  color: var(--orw-st);
}

.orw-svcacc-bar {
  width: 100px;
  height: 6px;
  border-radius: 4px;
  background: var(--orw-bg3);
  overflow: hidden;
  flex: 0 0 100px;
  display: none;
}

@media screen and (min-width: 640px) {
  .orw-svcacc-bar {
    display: block;
  }
}

.orw-svcacc-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
  border-radius: 4px;
}

.orw-svcacc-chev {
  flex: 0 0 20px;
  color: var(--orw-bl);
  font-size: 16px;
  transition: transform .25s;
}

.orw-svcacc-item.orw-on .orw-svcacc-chev {
  transform: rotate(45deg);
}

/* Animated height — same JS technique as .orw-fq-a (see optiranked-widgets.js
   setAccOpen()): measure real content height, transition the exact pixel
   value, then release to height:auto once fully open. */
.orw-svcacc-body {
  height: 0;
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.orw-svcacc-item.orw-on .orw-svcacc-body {
  height: auto;
}

.orw-svcacc-body-in {
  padding: 0 22px 26px 98px;
  color: var(--orw-st);
  font-size: 14.5px;
}

.orw-svcacc-body-in p {
  margin: 0 0 12px;
  line-height: 1.65;
}

.orw-svcacc-ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.orw-svcacc-ul li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: rgba(var(--orw-ink-rgb), .72);
}

.orw-svcacc-ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orw-bl);
}

/* ═══ AI / GEO SECTION ═══ */
.orw-ai-geo {
  position: relative;
  overflow: hidden;
}

.orw-ai-geo-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}

.orw-ai-geo-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.orw-ai-geo-card {
  background: var(--orw-nv2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color .2s, transform .2s;
}

.orw-ai-geo-card:hover {
  border-color: var(--orw-tl);
  transform: translateY(-3px);
}

.orw-ai-geo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orw-tl);
  box-shadow: 0 0 0 4px rgba(58, 160, 255, .18);
  flex: 0 0 auto;
}

/* ═══ COMPARISON TABLE ═══ */
.orw-cmp-table {
  border: 1px solid var(--orw-bd);
  border-radius: 18px;
  overflow: hidden;
}

.orw-cmp-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
}

.orw-cmp-row>div {
  padding: 18px 22px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.orw-cmp-row.orw-cmp-head {
  background: var(--orw-nv);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
}

.orw-cmp-row.orw-cmp-head .orw-cmp-us {
  color: var(--orw-tl-tx);
}

.orw-cmp-row:not(.orw-cmp-head) {
  border-top: 1px solid var(--orw-bd);
}

.orw-cmp-row:not(.orw-cmp-head) .orw-cmp-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--orw-nv);
  font-weight: 600;
}

.orw-cmp-row:not(.orw-cmp-head) .orw-cmp-us {
  background: var(--orw-bg2);
  color: var(--orw-nv);
  font-weight: 500;
}

.orw-cmp-row:not(.orw-cmp-head) .orw-cmp-them {
  color: var(--orw-st);
}

.orw-cmp-row .orw-cmp-us i {
  color: var(--orw-bl);
}

.orw-cmp-row .orw-cmp-them i {
  color: var(--orw-st);
}

/* ═══ PROCESS STEPS GRID ═══ */
.orw-pstep-g {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.orw-pstep {
  background: var(--orw-bg2);
  border: 1px solid var(--orw-bd);
  border-radius: 16px;
  padding: 22px 18px;
}

.orw-pstep b {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--orw-bl);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.orw-pstep h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--orw-nv);
  font-size: 15.5px;
  margin: 10px 0 8px;
  font-weight: 700;
}

.orw-pstep p {
  font-size: 13.5px;
  color: var(--orw-st);
  margin: 0;
}

/* ═══ STATS BAND (cards) ═══ */
.orw-stband {
  position: relative;
  overflow: hidden;
}

.orw-stband-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.orw-stband-c {
  background: var(--orw-nv2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 26px 22px;
}

.orw-stband-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.orw-stband-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(58, 160, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orw-stband-ico i {
  font-size: 16px;
  color: var(--orw-tl-tx);
}

.orw-stband-trend {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #FFC670;
}

.orw-stband-c b {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(90deg, #fff, var(--orw-tl-tx));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orw-stband-lbl {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, .68);
  margin-top: 6px;
}

.orw-stband-track {
  margin-top: 16px;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.orw-stband-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
}

/* ═══ AREAS SERVED ═══ */
.orw-areas-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.orw-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--orw-bd);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  color: var(--orw-nv);
  font-weight: 500;
  background: var(--orw-bg);
  transition: border-color .15s, background .15s;
}

.orw-area-chip i {
  color: var(--orw-bl);
  font-size: 12px;
}

.orw-area-chip:hover {
  border-color: var(--orw-bl);
  background: var(--orw-bg2);
}

.orw-area-chip:hover i {
  color: var(--orw-tl);
}

/* ═══ PRICING TIERS ═══ */
.orw-price-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.orw-price-c {
  background: var(--orw-bg);
  border: 1px solid var(--orw-bd);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.orw-price-c.orw-ft {
  background: var(--orw-nv);
  border-color: var(--orw-nv);
  transform: translateY(-10px);
  box-shadow: 0 24px 50px -20px rgba(10, 27, 47, .4);
}

.orw-price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--orw-bl), var(--orw-tl));
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.orw-price-c h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--orw-nv);
  margin: 0 0 6px;
}

.orw-price-c.orw-ft h3 {
  color: #fff;
}

.orw-price-tag {
  font-size: 13px;
  color: var(--orw-st);
  margin-bottom: 18px;
}

.orw-price-c.orw-ft .orw-price-tag {
  color: rgba(255, 255, 255, .68);
}

.orw-price-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(var(--orw-ink-rgb), .68);
  margin: -10px 0 18px;
}

.orw-price-c.orw-ft .orw-price-desc {
  color: rgba(255, 255, 255, .68);
}

.orw-price-desc p {
  margin: 0;
}

.orw-price-list-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(var(--orw-ink-rgb), .45);
  margin-bottom: 12px;
}

.orw-price-c.orw-ft .orw-price-list-lbl {
  color: rgba(255, 255, 255, .5);
}

.orw-price-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11.5px;
  color: rgba(var(--orw-ink-rgb), .55);
}

.orw-price-c.orw-ft .orw-price-timeline {
  color: rgba(255, 255, 255, .58);
}

.orw-price-note {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--orw-st);
  margin-bottom: 4px;
}

.orw-price-c.orw-ft .orw-price-note {
  color: rgba(255, 255, 255, .58);
}

.orw-price-amt {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--orw-bd);
}

.orw-price-c.orw-ft .orw-price-amt {
  border-bottom-color: rgba(255, 255, 255, .14);
}

.orw-price-cur {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--orw-nv);
}

.orw-price-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--orw-nv);
}

.orw-price-num.orw-price-custom {
  font-size: 24px;
  letter-spacing: -.5px;
}

.orw-price-per {
  font-size: 12.5px;
  color: var(--orw-st);
}

.orw-price-c.orw-ft .orw-price-cur,
.orw-price-c.orw-ft .orw-price-num {
  color: #fff;
}

.orw-price-c.orw-ft .orw-price-per {
  color: rgba(255, 255, 255, .65);
}

.orw-price-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  flex: 1;
}

.orw-price-list li {
  font-size: 13.5px;
  display: flex;
  gap: 9px;
  color: var(--orw-st);
}

.orw-price-c.orw-ft .orw-price-list li {
  color: rgba(255, 255, 255, .78);
}

.orw-price-list li i {
  color: var(--orw-bl);
  font-weight: 700;
  margin-top: 3px;
  font-size: 11px;
}

.orw-price-c.orw-ft .orw-price-list li i {
  color: var(--orw-tl-tx);
}

.orw-price-cta {
  margin-top: auto;
  padding-top: 22px;
}

/* ═══ SERVICES DETAIL PAGE — RESPONSIVE ═══ */
@media screen and (max-width: 1024px) {

  .orw-zz-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .orw-zz-rev .orw-zz-text,
  .orw-zz-rev .orw-zz-fig {
    order: 0;
  }

  .orw-ai-geo-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .orw-pstep-g {
    grid-template-columns: repeat(3, 1fr);
  }

  .orw-stband-g {
    grid-template-columns: repeat(2, 1fr);
  }

  .orw-price-g {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .orw-price-c.orw-ft {
    transform: none;
  }

  .orw-cmp-row {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 680px) {

  .orw-svcacc-body-in {
    padding: 0 20px 22px;
  }

  .orw-svcacc-ul {
    grid-template-columns: 1fr;
  }

  .orw-svcacc-head {
    padding: 16px 18px;
    gap: 12px;
  }

  .orw-svcacc-ico {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .orw-svcacc-ico i,
  .orw-svcacc-ico svg {
    font-size: 16px;
  }

  .orw-svcacc-ttl {
    font-size: 15px;
  }

  .orw-pstep-g {
    grid-template-columns: 1fr 1fr;
  }

  .orw-trust-row {
    justify-content: center;
    gap: 14px 26px;
    text-align: center;
  }

  .orw-cmp-row>div {
    padding: 14px 18px;
  }
}

@media screen and (max-width: 480px) {

  .orw-stband-g,
  .orw-pstep-g {
    grid-template-columns: 1fr;
  }

  .orw-svcacc-num {
    display: none;
  }

  .orw-svcacc-head {
    gap: 10px;
  }
}