/* ==========================================================================
   OMA PREMIUM PASS  v3  —  13 Sep 2026
   Homepage only. Loaded in <head> of index.php, BEFORE the page's own inline
   <style> blocks, so every rule that has to beat one of those carries both
   `html` (for specificity) and `!important`. Measured, not guessed.

   Fixes, in the order they were measured against therealworldportal.com:
     1  type scale        13 sizes -> 9, no fractional sizes
     2  tracking          5 values on one face -> 1
     3  line length       capped at ~62ch
     4  radius family     7 values -> 8px / 4px / 50%
     5  glows             coloured blue glows removed
     6  blue text         25 blue elements -> ~8 deliberate ones
     7  vertical rhythm   every section was 56/56 -> a real beat
     8  client logos      re-cut to one visual family
     9  carousel edges    hard clip -> soft mask
    10  hero              subject no longer half-lit behind the headline
    11  focus rings       none -> visible
    12  pill badge        removed (AI-design tell #1 in his own checklist)

   Roll back: delete the <link> line in index.php. Nothing else changed.
   ========================================================================== */

:root{
  --oma-fs-micro : 14px;   /* was 12 / 13 / 13.5  */
  --oma-fs-small : 15px;   /* was 15 / 15.5       */
  --oma-fs-body  : 16px;
  --oma-fs-lead  : 18px;   /* was 17 / 18 / 19    */
  --oma-fs-stat  : 28px;   /* was 26 / 27         */
  --oma-r-card   : 8px;
  --oma-r-btn    : 4px;
  --oma-shadow   : 0 18px 40px rgba(0,0,0,.42);
  --oma-track    : -.014em;
  --oma-track-xl : -.032em;   /* 16 Sep: display sizes need more than body sizes.
                                 The reference runs -.05em at 54px; one flat value
                                 left a 74px headline as loose as a 21px one. */
  --oma-label    : rgba(255,255,255,.52);
  --oma-pad-lg   : clamp(88px, 8vw, 140px);
  --oma-pad-md   : clamp(72px, 6.6vw, 116px);
}

/* --------------------------------------------------------------------------
   1. TYPE SCALE
   -------------------------------------------------------------------------- */
html .cs-service_desc      { font-size: var(--oma-fs-small) !important; line-height:1.62 !important; }
html .pf-cap               { font-size: var(--oma-fs-body)  !important; line-height:1.62 !important; }
html .pf-lab               { font-size: var(--oma-fs-micro) !important; line-height:1.5  !important; }
html .pf-num               { font-size: var(--oma-fs-stat)  !important; }
html .pf-link              { font-size: var(--oma-fs-small) !important; }
html .hb-micro             { font-size: var(--oma-fs-micro) !important; }
html .hb-rest              { font-size: var(--oma-fs-micro) !important; }
html .hb-link              { font-size: var(--oma-fs-small) !important; }
html .hb-kicker            { font-size: var(--oma-fs-micro) !important; }
html .hb-sub               { font-size: var(--oma-fs-lead)  !important; line-height:1.62 !important; }
html .hb-lead              { font-size: var(--oma-fs-lead)  !important; }
html .hb-lead b            { font-size: 20px !important; }
html .wy-sub               { font-size: var(--oma-fs-body)  !important; line-height:1.62 !important; }
html .wy-list li           { font-size: var(--oma-fs-small) !important; line-height:1.62 !important; }
html .oma-process-desc     { font-size: var(--oma-fs-micro) !important; line-height:1.62 !important; }
html .oma-process-cta p    { font-size: var(--oma-fs-body)  !important; }
html .oma-faq-tab          { font-size: var(--oma-fs-micro) !important; }
html .oma-ww p, html .oma-wwd p,
html .oma-faq p, html .oma-faq li{ font-size: var(--oma-fs-small) !important; line-height:1.62 !important; }

/* every small-caps label on the page is now ONE size and ONE colour */
html .oma-ww-eyebrow, html .oma-wwd-eyebrow, html .oma-why-eyebrow,
html .oma-faq-eyebrow, html .oma-process-badge, html .oma-wwd-label,
html .wy-tag{
  font-size: var(--oma-fs-micro) !important;
  letter-spacing: .16em !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   2. ONE TRACKING VALUE  (was -2.7px / -0.74px / -0.4px / +0.5px / +0.2px)
   -------------------------------------------------------------------------- */
html .cs-section_title, html .cs-cta_title, html .hb-h1,
html .pf-big, html .oma-why-title, html .oma-wwd-title, html h1, html h2{
  letter-spacing: var(--oma-track-xl) !important;
  line-height: 1.1 !important;
}
/* the same classes are reused at 21-26px, where -.032em would crowd */
html .cs-section_title.pb-5, html .cs-widget_title,
html .oma-faq h2, html .cs-cta-subtext{ letter-spacing: var(--oma-track) !important; }
html h3, html .oma-process-title,
html .oma-ww h3, html .oma-wwd h3{ letter-spacing: 0 !important; }

/* one display face — a stray H3 was rendering in Inter beside Oswald H3s */
html .oma-process-title, html .oma-ww h3,
html .oma-wwd h3, html .oma-faq h3{
  font-family:'Oswald','Arial Narrow',Arial,sans-serif !important;
  font-weight:600 !important;
}

/* --------------------------------------------------------------------------
   3. LINE LENGTH — nothing wider than ~62 characters
   -------------------------------------------------------------------------- */
html .pf-cap, html .wy-sub, html .hb-sub,
html .oma-process-desc, html .oma-process-cta p,
html .cs-service_desc, html .oma-ww p, html .oma-wwd p{ max-width: 52ch !important; }
html .oma-process-cta p, html .hb-sub{ margin-left:auto !important; margin-right:auto !important; }

/* --------------------------------------------------------------------------
   4. ONE RADIUS FAMILY  (was 3 / 9 / 10 / 12 / 14 / 15 / 16 / 20 / 50 / 999px)
   -------------------------------------------------------------------------- */
html .oma-banner-card,
html .wy-cols, html .oma-ww [class*="card"], html .oma-wwd [class*="card"],
html .oma-faq-item, html .oma-faq [class*="item"], html .logo-slide.cs-style33,
html .cs-accordian, html .tabs-lists, html .cs-cta.cs-style1,
html .cs-newsletter_form, html .cs-text_btn,
html .cs-service_item, html .cs-service_icon{ border-radius: var(--oma-r-card) !important; }

html .hb-btn, html .oma-banner-cta, html .cs-services_view_all,
html .oma-faq-tab, html input, html textarea,
html button, html .cs-btn{ border-radius: var(--oma-r-btn) !important; }

html .oma-process-marker, html .cs-left_arrow, html .cs-right_arrow,
html .cs-social_btn a, html a.float{ border-radius: 50% !important; }

/* --------------------------------------------------------------------------
   5. NO COLOURED GLOWS  (AI-design tell #5 in his own checklist)
   -------------------------------------------------------------------------- */
/* 16 Sep: .oma-process-num / -card / -icon are gone — the section is a
   timeline strip now, and its marker carries no coloured glow either. */
html .oma-process-marker{ box-shadow: none !important; }
html .oma-banner-card{ box-shadow: var(--oma-shadow) !important; }
html .custom-blur-bg { opacity:.22 !important; }
html .bg-shape-3, html .bg-shape-4, html .bg-shape-6{ opacity:.5 !important; }

/* --------------------------------------------------------------------------
   6. THE PILL BADGE — tell #1 and #8 on his own list. Kill the chrome,
      keep the words.
   -------------------------------------------------------------------------- */
html .oma-process-badge{
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--oma-label) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   7. LESS BLUE TEXT — 25 blue elements down to the handful that mean something
      (kept: the hero rotator, the 4x stat, "momentum.", the comparison tag)
   -------------------------------------------------------------------------- */
html .oma-ww-eyebrow, html .oma-wwd-eyebrow,
html .oma-why-eyebrow, html .oma-faq-eyebrow{ color: var(--oma-label) !important; }

html .oma-wwd-num,
html .oma-ww .oma-ww-card > span,
html .oma-ww [class*="num"]{ color: rgba(255,255,255,.38) !important; }

html .pf-link, html .hb-lead a, html .hb-link,
html .cs-services_view_all, html .oma-wwd-link, html .wy-foot a{
  color: rgba(255,255,255,.94) !important;
  text-decoration-color: rgba(41,141,255,.9) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 5px !important;
}
html .pf-link:hover, html .hb-lead a:hover, html .hb-link:hover,
html .cs-services_view_all:hover, html .oma-wwd-link:hover,
html .wy-foot a:hover{
  color:#fff !important; text-decoration-color:#fff !important;
}
/* one blue word in a heading is emphasis; three is a pattern */
html .logo-section .cs-section_title span[style],
html .cs-cta_title span[style]{ color:#fff !important; }

/* --------------------------------------------------------------------------
   8. VERTICAL RHYTHM — every section was 56/56.
      (Theme forces `section{padding:60px 0 !important}` under 1024px, so this
      is deliberately desktop-only.)
   -------------------------------------------------------------------------- */
@media (min-width:1025px){
  html section.customer-sec.mt-2{ padding-top: var(--oma-pad-lg) !important; }
  html section.logo-section{
    padding-top: var(--oma-pad-md) !important;
    padding-bottom: var(--oma-pad-lg) !important;
  }
  html section.oma-ww { padding-top: var(--oma-pad-lg) !important;
                        padding-bottom: var(--oma-pad-md) !important; }
  html section.oma-wwd{ padding-top: var(--oma-pad-md) !important;
                        padding-bottom: var(--oma-pad-lg) !important; }
  html section.oma-why.wy{ padding-top: var(--oma-pad-lg) !important;
                           padding-bottom: var(--oma-pad-lg) !important; }
  html section.oma-process{ padding-top: var(--oma-pad-md) !important;
                            padding-bottom: var(--oma-pad-md) !important; }
  html section.oma-faq{ padding-top: var(--oma-pad-lg) !important;
                        padding-bottom: var(--oma-pad-md) !important; }
  html .cs-cta.cs-style1{ padding-top: var(--oma-pad-md) !important;
                          padding-bottom: var(--oma-pad-md) !important; }
  html .wy-head        { margin-bottom: 52px !important; }
  html .oma-process-cta{ margin-top: 60px !important; }
}

/* --------------------------------------------------------------------------
   9. CLIENT LOGO ROW — one family, equal optical weight
   -------------------------------------------------------------------------- */
html .logo-slide.cs-style33{
  background: #131a25 !important;          /* solid, so the blue glow behind
                                              stops washing random cards */
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding: 26px !important;
  overflow: hidden !important;
}
html .logo-slide.cs-style33 img{
  /* The <img> keeps its box (so the card height never moves) but is hidden;
     the re-cut file is painted as the card's background instead.
     Why not content:url() — Chrome sizes a content-replaced image through the
     ORIGINAL src's aspect ratio, which drew every mark at ~50% of its box.
     Measured on the live preview, not guessed. */
  visibility: hidden !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
}
html .logo-slide.cs-style33{
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* 16 Sep: `98% auto` sized every mark off the card's WIDTH, so a wide logo
     filled the card edge to edge while a tall one sat small in the middle —
     Uns read the row as "be-tarteeb". `contain` inside the padding box gives
     each mark the same optical room whatever its shape. */
  background-size: contain !important;
  background-origin: content-box !important;
  padding: 52px 44px !important;
}

/* the row used to be chopped mid-card at both ends; now it fades out */
html .logo-slider{
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%) !important;
}
html .logo-slide.cs-style33:has(img[src$="logos/logo1.png"]) {background-image:url(../img/logos-mono/logo1.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo2.png"]) {background-image:url(../img/logos-mono/logo2.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo3.png"]) {background-image:url(../img/logos-mono/logo3.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo4.png"]) {background-image:url(../img/logos-mono/logo4.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo5.png"]) {background-image:url(../img/logos-mono/logo5.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo6.png"]) {background-image:url(../img/logos-mono/logo6.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo7.png"]) {background-image:url(../img/logos-mono/logo7.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo8.png"]) {background-image:url(../img/logos-mono/logo8.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo9.png"]) {background-image:url(../img/logos-mono/logo9.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo10.png"]){background-image:url(../img/logos-mono/logo10.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo11.png"]){background-image:url(../img/logos-mono/logo11.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo12.png"]){background-image:url(../img/logos-mono/logo12.png) !important}
html .logo-slide.cs-style33:has(img[src$="logos/logo13.png"]){background-image:url(../img/logos-mono/logo13.png) !important}


/* --------------------------------------------------------------------------
   10. CAROUSEL EDGES — cards were hard-clipped at both sides
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  html .customer-sec .cs-slider_container .slick-list{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   11. HERO — the video subject sat half-lit behind the headline
   -------------------------------------------------------------------------- */
html .omaVid-vignette{ box-shadow: inset 0 0 220px 70px rgba(0,0,0,.72) !important; }
html .omaVid-scrim{
  background:
    radial-gradient(120% 88% at 50% 46%, rgba(4,9,16,.80) 0%, rgba(4,9,16,.55) 46%, rgba(4,9,16,.30) 78%, rgba(4,9,16,.22) 100%),
    linear-gradient(180deg, rgba(4,9,16,.66) 0%, rgba(4,9,16,.34) 34%, rgba(4,9,16,.62) 100%) !important;
}

/* --------------------------------------------------------------------------
   12. FOCUS RINGS — there were none
   -------------------------------------------------------------------------- */
html a:focus-visible, html button:focus-visible,
html input:focus-visible, html textarea:focus-visible,
html .oma-faq-tab:focus-visible{
  outline: 2px solid #5aa9ff !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   13. THE "VIEW FULL CASE STUDIES" BUTTON
       It was the whole AI-tell stack in one element: 50px pill + 10% tinted
       blue fill + blue border + blue all-caps tracked 13px label + an arrow
       glyph inside. Now a quiet outline button in the page's own type.
   -------------------------------------------------------------------------- */
html .oma-home-cs-cta > a{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.94) !important;
  border-radius: var(--oma-r-btn) !important;
  font-size: var(--oma-fs-small) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  text-decoration: none !important;
}
html .oma-home-cs-cta > a:hover{
  border-color: rgba(255,255,255,.5) !important;
  background: rgba(255,255,255,.05) !important;
  color:#fff !important;
}
html .oma-home-cs-cta > a svg{ display:none !important; }

/* --------------------------------------------------------------------------
   14. LAST TWO GAPS FOUND ON RE-MEASURE
   -------------------------------------------------------------------------- */
html .oma-ww-num span{ color: rgba(255,255,255,.38) !important; }

@media (min-width:1025px){
  html section[style*="padding-bottom"]{
    padding-top: var(--oma-pad-lg) !important;
    padding-bottom: var(--oma-pad-md) !important;
  }
}

/* --------------------------------------------------------------------------
   15. TWO THINGS THE VISUAL AUDIT CAUGHT (run at 1440 / 1024 / 768 / 500)
   -------------------------------------------------------------------------- */

/* Oswald's ascenders are tall: at line-height 1.1 the "Business" line rode up
   into "First". 1.14 clears it and still reads tighter than the old 1.2. */
html .cs-cta_title{ line-height: 1.14 !important; }

/* "Read how it happened" was a 23px-tall tap target (pre-existing, all widths).
   Padding plus a matching negative margin gets it to 44px without moving a
   single pixel of layout. Below 900px it becomes its own line, which also
   clears the overlap with "251 leads in 30 days". */
html .hb-lead a{
  display: inline-block !important;
  padding: 11px 0 !important;
  margin: -11px 0 !important;
}
@media (max-width:900px){
  html .hb-lead a{ display:block !important; margin: 4px 0 -11px !important; }
}

/* --------------------------------------------------------------------------
   13. SOFT SEAMS + SOFTER ENTRANCES — 16 Sep 2026
   Uns: "ek section se dusre section me jao to bohot hard lagta hai, reference
   pe smooth hai." Two causes, both measured:
     a) .oma-why carries its artwork as the section's own background and the
        section is overflow:hidden, so the art stops dead on a straight line
        top and bottom. The art now sits on its own layer, masked to fade out
        at both edges, so it melts into the page instead of ending.
     b) the WOW entrance ran on plain `ease`, which starts fast and stops
        abruptly. A decelerating curve reads as "settling" instead of "popping".
   -------------------------------------------------------------------------- */
html .oma-why{ background: #04060a !important; }
html .oma-why::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url(../img/why-bg-v2.webp) center center / cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%);
}
html .oma-why > .container{ position:relative; z-index:1; }

html .wow.animated{
  animation-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  animation-duration: 1s !important;
  will-change: opacity, transform;
}
/* someone scrolling fast should not sit in front of blank space */
@media (prefers-reduced-motion: reduce){
  html .wow.animated{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   14. NO STRAIGHT EDGES BETWEEN SECTIONS — 16 Sep 2026
   Uns sent three screenshots of the same defect: a blue glow ending on a
   dead-straight horizontal line. Cause, measured: every section painted its
   own glow INSIDE its own box, and the next section painted its own solid
   background straight over the top of it. A gradient that is clipped by a box
   edge reads as a drawn line, which is exactly what a "hard" transition is.

   Fix: the page keeps ONE background (body, #04060a). Sections are
   transparent, and each glow moves to its own ::before layer that is masked
   to fade out before it reaches the section's top and bottom edges. Nothing
   can clip anything now.
   -------------------------------------------------------------------------- */
html body{ background:#04060a !important; }

html .oma-ww,
html .oma-wwd,
html .oma-process,
html .oma-faq,
html .cs-fooer{ background: transparent !important; position: relative; }

html .oma-ww::before,
html .oma-faq::before,
html .cs-fooer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%);
}
html .oma-ww::before{
  background: radial-gradient(120% 90% at 12% 14%, rgba(10,99,201,.26) 0%, rgba(10,99,201,0) 55%);
}
html .oma-faq::before{
  background: radial-gradient(90% 70% at 88% 88%, rgba(10,99,201,.22) 0%, rgba(10,99,201,0) 60%);
}
html .cs-fooer::before{
  background: radial-gradient(120% 90% at 6% 0%, rgba(10,99,201,.30) 0%, rgba(10,99,201,0) 55%);
}

/* the content has to sit on top of that layer */
html .oma-ww > .container,
html .oma-faq > .container,
html .cs-fooer > div,
html .cs-fooer > .container{ position: relative; z-index: 1; }

/* the blurred blobs behind "Trusted by" are allowed to bleed into the
   neighbouring sections — that bleed is what blends them. Keeping them inside
   the box is what made the join visible in the first place. */
html .logo-section{ overflow: visible !important; }

/* --------------------------------------------------------------------------
   15. THE HERO HAS TO END IN THE PAGE'S OWN COLOUR — 16 Sep 2026
   Copied from the reference, which lays a scrim in its own background colour
   (rgb(19,18,18)) over every photo so the image dissolves instead of stopping.
   Here the hero scrim was built out of #060c14 and only reached 86% opacity at
   the bottom, while the page underneath is #04060a — so the photo was still
   14% visible at the exact line where the next section began. Same colour,
   fully opaque by the last 10%, and the join disappears.
   -------------------------------------------------------------------------- */
html .omaVid-scrim{
  background:
    radial-gradient(105% 78% at 50% 44%, rgba(4,6,10,.80) 0%, rgba(4,6,10,.56) 40%, rgba(4,6,10,.24) 72%, rgba(4,6,10,.10) 100%),
    linear-gradient(180deg, rgba(4,6,10,.66) 0%, rgba(4,6,10,.10) 26%, rgba(4,6,10,.16) 58%, rgba(4,6,10,.88) 90%, #04060a 100%)
    !important;
}
