/* ============================================================
   Omega XP brand system, for Elementor.
   Loaded after Elementor's own CSS so brand rules win without
   !important. Do not add colours here that are not in the palette.
   ============================================================ */

/* ---- Self-hosted variable fonts. Subsetted latin, ~90KB total. ------- */
@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-var.woff2) format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-var.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-var.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

/* ---- Tokens ---------------------------------------------------------- */
:root{
  --oxp-base:#FFFFFF;
  --oxp-contrast:#0A0A0A;
  --oxp-accent:#FFB615;
  --oxp-muted:#6E6E6E;
  --oxp-line:#E4E4E4;
  --oxp-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --oxp-body:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --oxp-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --oxp-ease:cubic-bezier(.22,.61,.36,1);
  --oxp-dur:400ms;
}

/* ---- Base ------------------------------------------------------------ */
body{background:var(--oxp-base);color:var(--oxp-contrast);font-family:var(--oxp-body);font-size:1.0625rem;line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6,.elementor-heading-title{font-family:var(--oxp-display);font-weight:700;line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
h1{font-size:clamp(2.125rem,5vw,3.25rem)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
h3{font-size:clamp(1.3125rem,2.6vw,1.625rem);letter-spacing:-.02em}
h4{font-size:1.25rem;letter-spacing:-.015em}
p{text-wrap:pretty}
img,svg,video{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--oxp-contrast);outline-offset:3px}

/* ---- Eyebrow: mono, uppercase. The "data-driven" tell. --------------- */
.oxp-eyebrow{font-family:var(--oxp-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--oxp-muted)}

/* ---- Yellow is a surface colour, never a text colour. ----------------
   #FFB615 on white is 1.8:1 and fails every threshold. Black on #FFB615
   is 11.9:1. Fill a shape, put black on top of it. There is deliberately
   no .oxp-text--accent class. ------------------------------------------ */
.oxp-mark{background:var(--oxp-accent);color:var(--oxp-contrast);padding:.08em .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- Buttons --------------------------------------------------------- */
.elementor-button,.oxp-btn{
  font-family:var(--oxp-body);font-size:.875rem;font-weight:500;line-height:1;letter-spacing:.005em;
  background:var(--oxp-contrast);color:var(--oxp-base);
  padding:1.05rem 1.75rem;border-radius:2px;border:0;text-decoration:none;display:inline-block;
  transition:background var(--oxp-dur) var(--oxp-ease),color var(--oxp-dur) var(--oxp-ease)
}
.elementor-button:hover,.elementor-button:focus,.oxp-btn:hover,.oxp-btn:focus{background:var(--oxp-accent);color:var(--oxp-contrast)}
.oxp-btn--ghost{background:transparent;color:var(--oxp-contrast);box-shadow:inset 0 0 0 1px var(--oxp-contrast)}

/* ---- Black card: the signal that a number is coming. ----------------- */
.oxp-card--dark{background:var(--oxp-contrast);color:var(--oxp-base);padding:clamp(1.75rem,4vw,2.75rem);border-radius:3px}
.oxp-card--dark .oxp-eyebrow{color:rgba(255,255,255,.62)}

/* ---- Metric: one component, many datasets. --------------------------- */
.oxp-metric{display:grid;gap:.35rem}
.oxp-metric__label{font-family:var(--oxp-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.62)}
.oxp-metric__row{display:flex;align-items:baseline;gap:.6rem;font-family:var(--oxp-mono);font-variant-numeric:tabular-nums;line-height:1;flex-wrap:wrap}
.oxp-metric__from{font-size:1.5rem;color:rgba(255,255,255,.45)}
.oxp-metric__arrow{width:1.1em;height:1.1em;flex:0 0 auto;fill:var(--oxp-accent);align-self:center}
.oxp-metric__to{font-size:clamp(2.125rem,5vw,3rem);font-weight:600;color:var(--oxp-accent)}
.oxp-metric__unit{font-size:1.25rem;color:var(--oxp-accent)}
.oxp-metric__scope{font-family:var(--oxp-mono);font-size:.75rem;color:rgba(255,255,255,.55);letter-spacing:.02em}

/* ---- Video facade: poster only until clicked. ------------------------ */
.oxp-video{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--oxp-contrast);border:0;padding:0;border-radius:3px;overflow:hidden;cursor:pointer}
.oxp-video img{width:100%;height:100%;object-fit:cover;display:block}
.oxp-video__play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:var(--oxp-accent);display:grid;place-items:center;transition:transform var(--oxp-dur) var(--oxp-ease)}
.oxp-video:hover .oxp-video__play{transform:scale(1.06)}
.oxp-video__play svg{width:26px;height:26px;fill:var(--oxp-contrast);margin-left:3px}
.oxp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- FAQ: native details/summary, no JS. ----------------------------- */
.oxp-faq details{border-bottom:1px solid var(--oxp-line)}
.oxp-faq summary{cursor:pointer;list-style:none;padding-block:1.35rem;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-family:var(--oxp-display);font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.oxp-faq summary::-webkit-details-marker{display:none}
.oxp-faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--oxp-dur) var(--oxp-ease)}
.oxp-faq details[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.oxp-faq details>div{padding-bottom:1.5rem;max-width:62ch;color:var(--oxp-muted)}

/* ---- Static map ------------------------------------------------------ */
.oxp-map{display:block;border-radius:3px;overflow:hidden;border:1px solid var(--oxp-line)}

/* ---- Floating contact ------------------------------------------------ */
.oxp-float{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:90;display:grid;gap:.6rem}
.oxp-float a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--oxp-contrast);color:var(--oxp-base);text-decoration:none;transition:background var(--oxp-dur) var(--oxp-ease)}
.oxp-float a:hover{background:var(--oxp-accent);color:var(--oxp-contrast)}
.oxp-float svg{width:22px;height:22px;fill:currentColor}

/* ---- Motion: one curve, one duration, everywhere. -------------------- */
[data-reveal]{opacity:0;transform:translate3d(0,14px,0)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--oxp-dur) var(--oxp-ease),transform var(--oxp-dur) var(--oxp-ease)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- Elementor container defaults ------------------------------------
   Elementor's stock 20px gap and full-bleed sections fight the type
   scale. These set a sane rhythm so every section does not need manual
   padding entered by hand. -------------------------------------------- */
.e-con{--container-max-width:1240px}
.oxp-section{padding-block:clamp(4.5rem,9vw,7rem)}
.oxp-section--tight{padding-block:clamp(3rem,6vw,4.5rem)}
/* ============================================================
   Paste at the END of assets/css/brand.css
   Appearance > Theme File Editor > Omega XP > assets/css/brand.css

   Elementor writes its kit CSS as `.elementor-kit-19 h1` (specificity
   0,1,1), which outranks a plain `h1` rule. Matching on the body class
   attribute puts us above it without a single !important.
   ============================================================ */

body[class*="elementor-kit-"]{
  --e-global-color-primary:#0A0A0A;
  --e-global-color-secondary:#6E6E6E;
  --e-global-color-text:#0A0A0A;
  --e-global-color-accent:#FFB615;
  --e-global-typography-primary-font-family:"Space Grotesk";
  --e-global-typography-primary-font-weight:700;
  --e-global-typography-secondary-font-family:"Space Grotesk";
  --e-global-typography-secondary-font-weight:600;
  --e-global-typography-text-font-family:"Geist";
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:"Geist Mono";
  --e-global-typography-accent-font-weight:500;
  color:var(--oxp-contrast);
  font-family:var(--oxp-body);
}

body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] .elementor-heading-title{
  font-family:var(--oxp-display);
  color:var(--oxp-contrast);
}

/* Elementor puts custom classes on the widget wrapper, not the heading
   itself, so the eyebrow needs both selectors. */
body[class*="elementor-kit-"] .oxp-eyebrow,
body[class*="elementor-kit-"] .oxp-eyebrow .elementor-heading-title{
  font-family:var(--oxp-mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oxp-muted);
}

/* Buttons: black by default, yellow on hover. Never yellow with white
   text on top — that is 1.8:1 and unreadable. */
body[class*="elementor-kit-"] .elementor-button{
  background:var(--oxp-contrast);
  color:var(--oxp-base);
  font-family:var(--oxp-body);
  font-size:.875rem;
  font-weight:500;
  border-radius:2px;
  width:auto;
}
body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus{
  background:var(--oxp-accent);
  color:var(--oxp-contrast);
}
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button{
  background:transparent;
  color:var(--oxp-contrast);
  box-shadow:inset 0 0 0 1px var(--oxp-contrast);
}
/* Button widgets stretch to fill their flex container by default, which
   is what produces the empty bordered box beside each one. */
body[class*="elementor-kit-"] .elementor-widget-button{width:auto}
body[class*="elementor-kit-"] .elementor-widget-button .elementor-button-wrapper{display:inline-block}

/* Black cards keep their own text colours regardless of the global
   text colour. */
body[class*="elementor-kit-"] .oxp-card--dark{color:var(--oxp-base)}
body[class*="elementor-kit-"] .oxp-metric__label,
body[class*="elementor-kit-"] .oxp-metric__scope{color:rgba(255,255,255,.6)}
body[class*="elementor-kit-"] .oxp-metric__from{color:rgba(255,255,255,.45)}
body[class*="elementor-kit-"] .oxp-metric__to,
body[class*="elementor-kit-"] .oxp-metric__unit{color:var(--oxp-accent)}

/* ============================================================
   Header and footer
   Built as plain HTML widgets rather than a nav plugin, so they
   render the same regardless of which Header Footer builder is
   installed. Mobile drawer is a checkbox — no JavaScript.
   ============================================================ */

/* ---- Header ---------------------------------------------------------- */
.oxp-hdr__logo{display:block;flex:0 0 auto;line-height:0}
.oxp-hdr__logo img{height:32px;width:auto}

.oxp-hdr__toggle{position:absolute;opacity:0;pointer-events:none}
.oxp-hdr__burger{display:none}
.oxp-hdr__scrim{display:none}

.oxp-hdr__list{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.oxp-hdr__list a{font-size:.9375rem;text-decoration:none;color:var(--oxp-contrast);white-space:nowrap}
.oxp-hdr__list a:hover{text-decoration:underline;text-underline-offset:4px}

/* Dropdown: opens on hover and on keyboard focus. */
.oxp-hdr__has-sub{position:relative}
.oxp-hdr__has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.45rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.oxp-hdr__sub{position:absolute;top:100%;left:-1rem;min-width:270px;background:var(--oxp-base);border:1px solid var(--oxp-line);border-radius:3px;padding:.5rem 0;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--oxp-dur) var(--oxp-ease),transform var(--oxp-dur) var(--oxp-ease),visibility var(--oxp-dur)}
.oxp-hdr__has-sub:hover .oxp-hdr__sub,
.oxp-hdr__has-sub:focus-within .oxp-hdr__sub{opacity:1;visibility:visible;transform:none}
.oxp-hdr__sub a{display:block;padding:.65rem 1.25rem}
.oxp-hdr__sub a:hover{background:var(--oxp-accent);text-decoration:none}

.oxp-hdr__cta{display:inline-block;background:var(--oxp-contrast);color:var(--oxp-base);font-size:.875rem;font-weight:500;padding:.85rem 1.35rem;border-radius:2px;text-decoration:none;white-space:nowrap;transition:background var(--oxp-dur) var(--oxp-ease),color var(--oxp-dur) var(--oxp-ease)}
.oxp-hdr__cta:hover{background:var(--oxp-accent);color:var(--oxp-contrast);text-decoration:none}

@media(max-width:900px){
  .oxp-hdr__inner{min-height:60px}
  .oxp-hdr__logo img{height:26px}
  .oxp-hdr__burger{display:grid;gap:5px;width:44px;height:44px;place-content:center;cursor:pointer;margin-left:auto}
  .oxp-hdr__burger span{display:block;width:22px;height:2px;background:var(--oxp-contrast);transition:transform var(--oxp-dur) var(--oxp-ease),opacity var(--oxp-dur) var(--oxp-ease)}
  .oxp-hdr__nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--oxp-base);border-left:1px solid var(--oxp-line);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:5.5rem 1.75rem 2rem;transform:translateX(100%);transition:transform var(--oxp-dur) var(--oxp-ease);overflow-y:auto;z-index:110}
  .oxp-hdr__list{flex-direction:column;align-items:stretch;gap:0}
  .oxp-hdr__list>li{border-bottom:1px solid var(--oxp-line)}
  .oxp-hdr__list>li>a{display:block;padding:1rem 0;font-size:1.0625rem}
  .oxp-hdr__has-sub>a::after{float:right;margin-top:.55rem}
  /* Sub-menu is always open on mobile — a nested tap target is worse. */
  .oxp-hdr__sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 .75rem;min-width:0;background:transparent}
  .oxp-hdr__sub a{padding:.5rem 0 .5rem 1rem;font-size:.9375rem;color:var(--oxp-muted)}
  .oxp-hdr__sub a:hover{background:transparent;color:var(--oxp-contrast)}
  .oxp-hdr__cta{margin-top:1.5rem;text-align:center}
  .oxp-hdr__toggle:checked ~ .oxp-hdr__nav{transform:none}
  .oxp-hdr__toggle:checked ~ .oxp-hdr__scrim{display:block;position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:105}
  .oxp-hdr__toggle:checked ~ .oxp-hdr__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .oxp-hdr__toggle:checked ~ .oxp-hdr__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* ============================================================
   Links — restored permanently.
   Elementor's kit CSS sets a pink default that outranks a plain
   `a` rule. Matching on the body class attribute beats it.
   ============================================================ */
body[class*="elementor-kit-"] a:not(:where(.elementor-button,.oxp-hdr__cta,.oxp-float a,.oxp-map,.oxp-ftr__social a,.oxp-hold__btn,.oxp-hero__btn)){
  color:var(--oxp-contrast);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--oxp-line);
  transition:text-decoration-color var(--oxp-dur) var(--oxp-ease);
}
body[class*="elementor-kit-"] a:not(:where(.elementor-button,.oxp-hdr__cta,.oxp-hold__btn,.oxp-hero__btn)):hover{
  text-decoration-color:var(--oxp-contrast);
}
body[class*="elementor-kit-"] .oxp-card--dark a{color:var(--oxp-base);text-decoration-color:rgba(255,255,255,.35)}
body[class*="elementor-kit-"] .oxp-card--dark a:hover{text-decoration-color:var(--oxp-base)}
/* Nav and footer links carry their own treatment. */
body[class*="elementor-kit-"] .oxp-hdr a,
body[class*="elementor-kit-"] .oxp-ftr a{text-decoration:none}
body[class*="elementor-kit-"] .oxp-hdr__list>li>a:hover,
body[class*="elementor-kit-"] .oxp-ftr__col a:hover,
body[class*="elementor-kit-"] .oxp-ftr__legal a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:currentColor}

/* ============================================================
   Glass header
   Logo left · nav centred · CTA right, on a 3-column grid so the
   nav stays optically centred whatever the logo and CTA measure.

   backdrop-filter only shows when something passes beneath it, so
   at the top of a white page this reads as a plain white bar and
   frosts as you scroll. That is the point — not an effect on
   display, a material that responds to content.
   ============================================================ */
.oxp-hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(10,10,10,.07);
  transition:background var(--oxp-dur) var(--oxp-ease),border-color var(--oxp-dur) var(--oxp-ease);
}
/* No blur support, or reduced transparency requested: solid white. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .oxp-hdr{background:#fff}
}
@media(prefers-reduced-transparency:reduce){
  .oxp-hdr{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

.oxp-hdr__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
  max-width:1240px;margin-inline:auto;
  padding:0 clamp(1rem,4vw,2rem);
  min-height:74px;
}
.oxp-hdr__logo{grid-column:1;justify-self:start}
.oxp-hdr__nav{grid-column:2;justify-self:center;display:flex;align-items:center}
.oxp-hdr__cta{grid-column:3;justify-self:end}

/* Dropdown panel gets the same glass treatment. */
.oxp-hdr__sub{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-color:rgba(10,10,10,.08);
  box-shadow:0 12px 32px -12px rgba(10,10,10,.16);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .oxp-hdr__sub{background:#fff}
}

@media(max-width:900px){
  .oxp-hdr__inner{grid-template-columns:auto 1fr;min-height:62px}
  .oxp-hdr__logo{grid-column:1}
  .oxp-hdr__burger{grid-column:2;justify-self:end}
  .oxp-hdr__nav{
    grid-column:auto;justify-self:stretch;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    backdrop-filter:blur(24px) saturate(180%);
  }
  .oxp-hdr__cta{grid-column:auto;justify-self:stretch}
}

/* Two CTAs in the markup: one in the grid for desktop, one inside the
   drawer for mobile. Each is hidden where the other applies, so the
   button is always reachable without duplicating a tap target. */
.oxp-hdr__cta--drawer{display:none}
@media(max-width:900px){
  .oxp-hdr__inner>.oxp-hdr__cta:not(.oxp-hdr__cta--drawer){display:none}
  .oxp-hdr__cta--drawer{display:block}
}

/* ============================================================
   UAE (Ultimate Addons for Elementor) header wrapper

   UAE prints the template inside <header id="masthead">, so the
   sticky position must sit there. An inner element cannot stick
   beyond its own wrapper, which is why .oxp-hdr alone did nothing.
   ============================================================ */
header#masthead,
.ehf-header header#masthead{
  position:sticky;
  top:0;
  z-index:100;
}

/* Sticky fails silently if any ancestor clips overflow, and Elementor
   containers default to hidden in some configurations. */
.ehf-header,
header#masthead,
header#masthead > .elementor,
header#masthead .e-con,
header#masthead .e-con-inner,
header#masthead .elementor-widget-html{overflow:visible}

/* The bar itself no longer needs to stick — the wrapper does it. */
.oxp-hdr{position:relative;top:auto}

/* The glass has to sit on whichever element is actually pinned, or
   the blur is computed against the wrong stacking context. */
header#masthead{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(10,10,10,.07);
}
.oxp-hdr{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  header#masthead{background:#fff}
}
@media(prefers-reduced-transparency:reduce){
  header#masthead{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Logged-in admin bar pushes the viewport down; without this the
   header hides underneath it while you are editing. */
.admin-bar header#masthead{top:32px}
@media screen and (max-width:782px){
  .admin-bar header#masthead{top:46px}
}

/* ============================================================
   Mobile header fixes
   ============================================================ */

/* overflow-x:hidden anywhere in the ancestor chain creates a scroll
   container, and position:sticky silently stops working inside one.
   `clip` prevents horizontal scroll without that side effect. */
html,body{overflow-x:clip}
.elementor-page,.elementor,.ehf-header{overflow-x:clip}

@media(max-width:900px){

  /* backdrop-filter makes an element the containing block for any
     position:fixed descendant. With it on the wrapper, the drawer was
     being positioned against a 62px header instead of the viewport —
     so it opened, clipped to nothing. Glass moves to the inner bar,
     which has no fixed children. */
  header#masthead{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:transparent;
    border-bottom:0;
  }
  .oxp-hdr{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid rgba(10,10,10,.07);
  }

  /* Reassert sticky at this breakpoint in case a plugin rule lands
     later in the cascade. */
  header#masthead{position:sticky;top:0;z-index:100}
  .admin-bar header#masthead{top:46px}

  /* Drawer and scrim sit above everything, including the floating
     WhatsApp buttons. */
  .oxp-hdr__nav{z-index:120}
  .oxp-hdr__toggle:checked ~ .oxp-hdr__scrim{z-index:115}
  .oxp-hdr__burger{z-index:125;position:relative}

  /* Stop the page scrolling behind the open drawer. */
  .oxp-hdr__toggle:checked ~ .oxp-hdr__scrim{touch-action:none}
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(max-width:900px){ .oxp-hdr{background:#fff} }
}

/* ============================================================
   Mobile drawer — containing block, properly this time.

   backdrop-filter, filter, transform, perspective and will-change
   all make an element the containing block for its position:fixed
   descendants. v1.5.0 moved the blur off the wrapper and onto
   .oxp-hdr, which is still an ancestor of the drawer — so it stayed
   clipped to the header's own height.

   Below 900px the bar is 62px tall and the glass is barely
   perceptible, so it is dropped rather than engineered around.
   !important is used deliberately: this has to beat both my own
   earlier cascade and anything UAE or Elementor adds later.
   ============================================================ */
@media(max-width:900px){
  header#masthead,
  header#masthead > .elementor,
  header#masthead .e-con,
  header#masthead .e-con-inner,
  header#masthead .elementor-widget-html,
  header#masthead .elementor-widget-container,
  .oxp-hdr,
  .oxp-hdr__inner{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    transform:none !important;
    perspective:none !important;
    will-change:auto !important;
    contain:none !important;
  }

  .oxp-hdr{
    background:#fff !important;
    border-bottom:1px solid rgba(10,10,10,.08) !important;
  }

  /* Full viewport height. dvh accounts for mobile browser chrome
     appearing and disappearing on scroll. */
  .oxp-hdr__nav{
    height:100vh;
    height:100dvh;
    max-height:none;
  }
  .oxp-hdr__toggle:checked ~ .oxp-hdr__scrim{
    height:100vh;
    height:100dvh;
  }
}

/* ============================================================
   Services dropdown — collapsible on mobile

   "Services" is a label, not a link, because it is not a page. On
   desktop the panel opens on hover and on keyboard focus; on mobile
   the label drives a checkbox that expands the list in place.
   ============================================================ */
.oxp-hdr__subtoggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.oxp-hdr__subhead{
  display:inline-flex;align-items:center;
  font-size:.9375rem;color:var(--oxp-contrast);
  cursor:pointer;user-select:none;
}
.oxp-hdr__subhead::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--oxp-dur) var(--oxp-ease);
}
.oxp-hdr__subhead:hover{text-decoration:underline;text-underline-offset:4px}
.oxp-hdr__subhead:focus-visible{outline:2px solid var(--oxp-contrast);outline-offset:4px}

/* The old anchor-based chevron is retired. */
.oxp-hdr__has-sub>a::after{content:none}

@media(max-width:900px){
  .oxp-hdr__subhead{
    display:flex;justify-content:space-between;width:100%;
    padding:1rem 0;font-size:1.0625rem;
  }
  .oxp-hdr__subhead::after{margin-top:.35rem}

  /* Collapsed by default. max-height animates; height:auto cannot. */
  .oxp-hdr__sub{
    max-height:0;overflow:hidden;padding:0;
    transition:max-height var(--oxp-dur) var(--oxp-ease);
  }
  .oxp-hdr__subtoggle:checked ~ .oxp-hdr__sub{
    max-height:520px;padding:0 0 .75rem;
  }
  .oxp-hdr__subtoggle:checked ~ .oxp-hdr__subhead::after{
    transform:rotate(-135deg) translateY(2px);
  }
}

/* ============================================================
   v1.8 — glass on mobile, restored properly

   The conflict was never the blur, it was where the blur lived.
   backdrop-filter on .oxp-hdr made it the containing block for the
   fixed drawer inside it. On a ::before pseudo-element the filter
   still paints, but the pseudo-element is not an ancestor of the
   drawer — so nothing gets clipped.

   position:relative and isolation:isolate are safe here: neither
   creates a containing block for position:fixed. Only transform,
   filter, backdrop-filter, perspective, will-change and contain do.
   ============================================================ */
@media(max-width:900px){
  header#masthead{
    background:transparent !important;
    border-bottom:0 !important;
  }

  .oxp-hdr{
    position:relative;
    isolation:isolate;
    background:transparent !important;
    border-bottom:1px solid rgba(10,10,10,.07) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .oxp-hdr::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
    pointer-events:none;
  }
  .oxp-hdr__inner{position:relative;z-index:1}

  /* The drawer itself stays opaque — text over a blurred page is
     unreadable, and this one covers the full screen. */
  .oxp-hdr__nav{
    background:#fff !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Submenu was inheriting the desktop dropdown's panel — background,
     border and shadow — which reads as a floating card inside a
     drawer. Flush and borderless is correct here. */
  .oxp-hdr__sub{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .oxp-hdr__sub a{background:transparent !important}
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(max-width:900px){ .oxp-hdr::before{background:#fff} }
}
@media(prefers-reduced-transparency:reduce){
  @media(max-width:900px){
    .oxp-hdr::before{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  }
}

/* Hover styles only where a real pointer exists. On touch they stick
   after a tap, which is why "Services" kept its underline. */
@media(hover:none){
  .oxp-hdr__subhead:hover,
  .oxp-hdr__list a:hover,
  .oxp-hdr__sub a:hover{text-decoration:none;background:transparent}
}

/* 6px radius on every call to action. */
.oxp-hdr__cta,
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] .oxp-btn{border-radius:6px}

/* ============================================================
   Footer — inset card
   ============================================================ */
.oxp-ftr{
  position:relative;
  overflow:hidden;
  padding:0 clamp(1rem,4vw,2rem) 0;
  background:linear-gradient(to bottom,var(--oxp-base) 0%,var(--oxp-base) 58%,#FCFCFC 80%,#F7F7F6 100%);
}

.oxp-ftr__card{
  position:relative;z-index:2;
  max-width:1240px;margin:0 auto;
  background:var(--oxp-base);
  border:1px solid var(--oxp-line);
  border-radius:16px;
  padding:clamp(2rem,4.5vw,3.25rem);
}

.oxp-ftr__top{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);
  gap:clamp(2rem,5vw,4rem);
}

.oxp-ftr__logo{display:block;line-height:0}
.oxp-ftr__logo img{height:28px;width:auto}
.oxp-ftr__desc{
  margin:1.25rem 0 0;max-width:38ch;
  font-size:.875rem;line-height:1.65;color:var(--oxp-muted);
}
.oxp-ftr__social{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.5rem}
.oxp-ftr__social a{
  display:grid;place-items:center;width:32px;height:32px;
  border-radius:6px;color:var(--oxp-muted);
  transition:color var(--oxp-dur) var(--oxp-ease),background var(--oxp-dur) var(--oxp-ease);
}
.oxp-ftr__social svg{width:16px;height:16px;fill:currentColor}

.oxp-ftr__cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.oxp-ftr__ch{
  margin:0 0 1rem;
  font-family:var(--oxp-body);
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  color:var(--oxp-contrast);text-transform:none;
  text-wrap:balance;line-height:1.35;
}
.oxp-ftr__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.oxp-ftr__col a{font-size:.8125rem;color:var(--oxp-muted);text-decoration:none;line-height:1.4}

.oxp-ftr__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:1rem;margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.5rem;border-top:1px solid var(--oxp-line);
}
.oxp-ftr__legal p{margin:0;font-size:.75rem;color:var(--oxp-muted)}
.oxp-ftr__legal-links{display:flex;flex-wrap:wrap;gap:1.5rem}
.oxp-ftr__legal-links a{
  font-size:.75rem;color:var(--oxp-muted);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--oxp-line);
}

@media(hover:hover){
  .oxp-ftr__col a:hover,
  .oxp-ftr__legal-links a:hover{color:var(--oxp-contrast)}
  .oxp-ftr__legal-links a:hover{text-decoration-color:var(--oxp-contrast)}
  .oxp-ftr__social a:hover{color:var(--oxp-contrast);background:var(--oxp-accent)}
}

/* ---- Ghost wordmark --------------------------------------------------
   Crisp, gradient-filled, and cropped at the baseline rather than
   blurred out. The gradient is painted into the glyphs with
   background-clip:text, so the letterforms keep their edges while
   still fading down the height. The bottom is cut by the wrapper,
   which is what gives it the sunk-into-the-page read. ---------------- */
.oxp-ftr__ghostwrap{display:block}
.oxp-ftr__ghost{
  position:relative;z-index:1;
  margin-top:50px;
  height:.60em;
  overflow:hidden;
  font-family:var(--oxp-display);
  font-weight:700;
  font-size:clamp(5.5rem,20vw,18rem);
  line-height:.86;
  letter-spacing:-.045em;
  text-align:center;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,.20) 0%,rgba(10,10,10,.11) 55%,rgba(10,10,10,.06) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

@media(max-width:640px){
  .oxp-ftr__top{grid-template-columns:1fr;gap:2.5rem}
  .oxp-ftr__cols{grid-template-columns:1fr 1fr}
  .oxp-ftr__legal{flex-direction:column;align-items:flex-start}
  .oxp-ftr__legal-links{gap:1rem}
  .oxp-ftr__ghost{margin-top:32px}
}
@media(max-width:480px){
  .oxp-ftr__card{border-radius:12px}
  .oxp-ftr__cols{grid-template-columns:1fr;gap:2rem}
}

/* ============================================================
   v2.5 Ghost wordmark on narrow screens

   clamp()'s 5.5rem floor beat the vw value below ~440px, pushing the
   wordmark past the padding box and clipping the P. "OMEGAXP" in
   Space Grotesk Bold measures 4.34em at -0.045em tracking, so the
   size is derived from that: 21.5vw x 4.34 = 93vw, which sits inside
   the viewport with a little air either side.

   The negative margins cancel the footer's horizontal padding so the
   wordmark can use the full width, which is what makes it read as
   bleeding rather than boxed.
   ============================================================ */
@media(max-width:640px){
  .oxp-ftr__ghost{
    font-size:21.5vw;
    margin-top:32px;
    margin-left:calc(-1 * clamp(1rem,4vw,2rem));
    margin-right:calc(-1 * clamp(1rem,4vw,2rem));
  }
}
@media(max-width:380px){
  .oxp-ftr__ghost{font-size:20.5vw}
}

/* ============================================================
   v2.6 Ghost button: one outline, not two

   .oxp-btn--ghost lands on Elementor's widget wrapper rather than
   the <a> itself. The wrapper was drawing its own square inset
   outline while the inner button drew a rounded one, so both showed.
   The outline belongs on the button; the wrapper carries nothing.
   ============================================================ */
body[class*="elementor-kit-"] .elementor-widget-button.oxp-btn--ghost,
body[class*="elementor-kit-"] .oxp-btn--ghost > .elementor-widget-container,
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button-wrapper{
  box-shadow:none;
  background:transparent;
  border:0;
  border-radius:6px;
}

body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button{
  background:transparent;
  color:var(--oxp-contrast);
  border:1px solid var(--oxp-contrast);
  box-shadow:none;
  border-radius:6px;
}
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button:hover,
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button:focus{
  background:var(--oxp-accent);
  color:var(--oxp-contrast);
  border-color:var(--oxp-accent);
}

/* Standalone ghost button outside an Elementor widget. */
.oxp-btn--ghost.oxp-btn{
  background:transparent;
  color:var(--oxp-contrast);
  border:1px solid var(--oxp-contrast);
  box-shadow:none;
  border-radius:6px;
}

/* ============================================================
   Button height parity

   The ghost button carries a 1px border and the solid one did not,
   so the two rendered at different heights whenever they sit side by
   side. Giving the solid button a transparent border of the same
   width equalises them regardless of how box-sizing resolves, which
   is safer than trying to compensate with padding.
   ============================================================ */
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] .oxp-btn,
.oxp-hdr__cta{
  box-sizing:border-box;
  border:1px solid transparent;
}
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button{
  border:1px solid var(--oxp-contrast);
}

/* Same line-height on both, so the text box is identical before
   padding is applied. */
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] .oxp-btn{line-height:1.2}

/* Buttons sitting in a row stretch to match the tallest, so a longer
   label wrapping to two lines no longer leaves a short sibling. */
body[class*="elementor-kit-"] .e-con-inner > .elementor-widget-button,
body[class*="elementor-kit-"] .e-con > .elementor-widget-button{align-self:stretch}
body[class*="elementor-kit-"] .elementor-widget-button .elementor-button-wrapper,
body[class*="elementor-kit-"] .elementor-widget-button .elementor-button{height:100%}

/* ============================================================
   Button height parity

   The ghost variant carries a 1px border and the solid one did not,
   so the ghost rendered 2px taller and sat lower in the row. Giving
   the solid button a transparent border of the same width puts both
   on an identical box model.
   ============================================================ */
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] .oxp-btn,
.oxp-hdr__cta{
  border:1px solid transparent;
}
body[class*="elementor-kit-"] .oxp-btn--ghost .elementor-button,
.oxp-btn--ghost.oxp-btn{
  border-color:var(--oxp-contrast);
}
body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus{
  border-color:var(--oxp-accent);
}

/* Buttons sitting side by side should align on their tops, not
   stretch to different heights inside the flex row. */
body[class*="elementor-kit-"] .e-con-inner > .elementor-widget-button,
body[class*="elementor-kit-"] .e-con > .elementor-widget-button{
  align-self:flex-start;
}

/* ============================================================
   Holding section

   White ground with a faint grid, masked so the lines dissolve
   toward the edges rather than stopping at a hard boundary. The
   grid is drawn with gradients rather than an image, so it costs
   nothing to load and stays crisp at any density.
   ============================================================ */
.oxp-hold{
  position:relative;
  background:var(--oxp-base);
  padding-block:clamp(5rem,14vw,9rem);
  padding-inline:clamp(1rem,4vw,2rem);
  text-align:center;
  overflow:hidden;
}
.oxp-hold::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(10,10,10,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.055) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 65% at 50% 50%, #000 35%, transparent 100%);
  pointer-events:none;
}
.oxp-hold__inner{position:relative;z-index:1;display:grid;justify-items:center;gap:1.75rem}

.oxp-hold__btn{
  display:inline-block;
  background:var(--oxp-contrast);
  color:var(--oxp-base);
  font-family:var(--oxp-body);
  font-size:.9375rem;
  font-weight:500;
  line-height:1;
  padding:1.15rem 2rem;
  border:1px solid transparent;
  border-radius:6px;
  text-decoration:none;
  transition:background var(--oxp-dur) var(--oxp-ease),color var(--oxp-dur) var(--oxp-ease),border-color var(--oxp-dur) var(--oxp-ease);
}
@media(hover:hover){
  .oxp-hold__btn:hover{background:var(--oxp-accent);color:var(--oxp-contrast);border-color:var(--oxp-accent)}
}

.oxp-hold__note{
  margin:0;
  font-family:var(--oxp-mono);
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--oxp-contrast);
}

@media(max-width:560px){
  .oxp-hold::before{background-size:40px 40px}
  .oxp-hold__btn{width:100%;max-width:340px;text-align:center}
}

/* Exclusions above are wrapped in :where() so they contribute no
   specificity. The previous chain of five :not() selectors scored
   (0,6,4), which quietly outranked every component rule written
   afterwards. Any future element that should keep its own link
   colour goes in that :where() list, not into an !important. */

/* ============================================================
   Hero

   Centred, on a white ground carrying two textures: a faint grid
   drawn with gradients, and a grain layer generated by an inline SVG
   turbulence filter. Both are code rather than image files, so they
   cost nothing to download and stay sharp at any pixel density.

   The grid is masked to fade toward the edges so it reads as a
   surface the content sits on, rather than a boxed panel.
   ============================================================ */
.oxp-hero{
  position:relative;
  background:var(--oxp-base);
  overflow:hidden;
}

/* Grid */
.oxp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(10,10,10,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 42%, #000 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 42%, #000 30%, transparent 100%);
  pointer-events:none;
}

/* Grain. feTurbulence rendered inline, so there is no texture file. */
.oxp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045;
  pointer-events:none;
}

.oxp-hero__inner{
  position:relative;z-index:1;
  max-width:900px;
  margin-inline:auto;
  padding:clamp(4rem,10vw,7rem) clamp(1rem,4vw,2rem) clamp(3.5rem,7vw,5rem);
  text-align:center;
  display:grid;
  justify-items:center;
  gap:clamp(1.25rem,2.4vw,1.75rem);
}

/* ---- Pill ------------------------------------------------------------ */
.oxp-hero__pill{
  margin:0;
  display:inline-flex;align-items:center;
  padding:.5rem 1rem;
  border:1px solid var(--oxp-line);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-family:var(--oxp-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oxp-muted);
}

/* ---- Headline -------------------------------------------------------- */
.oxp-hero__h1{
  margin:0;
  max-width:16ch;
  font-family:var(--oxp-display);
  font-size:clamp(2.125rem,5.2vw,3.75rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
  color:var(--oxp-contrast);
}
/* Yellow is a surface, never a text colour. The highlight fills behind
   the phrase and the type stays off-black on top of it, which is
   11.9:1 rather than the 1.8:1 of yellow text on white. */
.oxp-hero__h1 mark{
  background:var(--oxp-accent);
  color:var(--oxp-contrast);
  padding:.04em .18em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---- Sub ------------------------------------------------------------- */
.oxp-hero__sub{
  margin:0;
  max-width:58ch;
  font-size:clamp(1rem,1.55vw,1.125rem);
  line-height:1.6;
  color:var(--oxp-muted);
  text-wrap:pretty;
}

/* ---- Buttons --------------------------------------------------------- */
.oxp-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.35rem}
.oxp-hero__btn{
  display:inline-block;
  padding:1.05rem 1.9rem;
  border:1px solid transparent;
  border-radius:6px;
  background:var(--oxp-contrast);
  color:var(--oxp-base);
  font-family:var(--oxp-body);
  font-size:.9375rem;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:background var(--oxp-dur) var(--oxp-ease),color var(--oxp-dur) var(--oxp-ease),border-color var(--oxp-dur) var(--oxp-ease);
}
.oxp-hero__btn--ghost{
  background:transparent;
  color:var(--oxp-contrast);
  border-color:var(--oxp-contrast);
}
@media(hover:hover){
  .oxp-hero__btn:hover{background:var(--oxp-accent);color:var(--oxp-contrast);border-color:var(--oxp-accent)}
}

/* ---- Friction reducers ----------------------------------------------- */
.oxp-hero__reducers{
  list-style:none;margin:.5rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.6rem;
}
.oxp-hero__reducers li{
  display:flex;align-items:center;gap:.45rem;
  font-size:.875rem;
  color:var(--oxp-muted);
}
.oxp-hero__reducers li::before{
  content:"";
  flex:0 0 auto;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--oxp-tick,#16A34A);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media(max-width:480px){
  .oxp-hero__h1{max-width:none}
  .oxp-hero__btn{width:100%;max-width:320px;text-align:center}
  .oxp-hero__reducers{flex-direction:column;align-items:center;gap:.55rem}
  .oxp-hero::before{background-size:42px 42px}
}

/* Anchor scrolling for the "Our services" button. Without the padding
   offset the sticky header covers the section heading on arrival. */
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}