.elementor-kit-12{--e-global-color-primary:#3B9FE8;--e-global-color-secondary:#E6EDF3;--e-global-color-text:#8B9BB4;--e-global-color-accent:#1A1F26;--e-global-color-86b4fcd:#02010100;--e-global-color-7a2c42b:#0D1117;--e-global-color-6732ca2:#10141A;--e-global-color-6587865:#2D333B;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:4em;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:3.2em;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:28px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0em;--e-global-typography-accent-word-spacing:0em;background-color:#0D1117;color:#E6EDF3;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.6em;}.elementor-kit-12 button,.elementor-kit-12 input[type="button"],.elementor-kit-12 input[type="submit"],.elementor-kit-12 .elementor-button{background-color:#3B9FE8;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:15px 28px 15px 28px;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-kit-12 a{color:var( --e-global-color-accent );}.elementor-kit-12 a:hover{color:var( --e-global-color-primary );}.elementor-kit-12 h4{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-12{--e-global-typography-primary-font-size:7vw;--e-global-typography-secondary-font-size:5vw;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-12{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:40px;--e-global-typography-text-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   MatchdayLab — CSS layer  (v2)
   Paste into: Elementor → Site Settings → Custom CSS

   WHAT CHANGED FROM v1, AND WHY YOUR FIRST IMPORT LOOKED BAD:
   v1 put ALL the styling here and left the JSON with no style
   properties at all. If this stylesheet lost a specificity fight
   with the Elementor kit — or simply didn't save — you got raw,
   unstyled widgets. That's the "text sizing looks poor" you saw.

   v2 bakes typography, colour, padding and backgrounds directly
   into the widget settings in the JSON. The page now renders
   correctly with NO custom CSS at all. This file only adds the
   handful of things Elementor's controls can't express:
   grid layout, the hero overlay, equal-height cards, and a few
   list treatments. If it fails to load, the site degrades to
   "slightly off", not "broken".
   ============================================================ */

/* Fonts: Elementor auto-enqueues Google Fonts for widget typography.
   This @import is a safety net in case Google Fonts is disabled in
   Elementor → Settings → Advanced. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --mdl-blue:#3B9FE8; --mdl-blue-dark:#2A86CC;
  --mdl-bg:#0D1117; --mdl-bg-alt:#10141A; --mdl-surface:#1A1F26;
  --mdl-border:#2D333B; --mdl-text:#E6EDF3; --mdl-muted:#8B9BB4;
}

/* `clip`, not `hidden` — overflow-x:hidden makes <body> a scroll
   container and silently kills position:sticky on the header. */
html, body{ max-width:100%; overflow-x:clip; background:var(--mdl-bg); }

/* ---------- Layout shell ----------
   IMPORTANT, and the source of a bug I hit: the .mdl-inner containers are
   BOXED, and Elementor renders a boxed container as
       <div class="e-con e-con-boxed"><div class="e-con-inner">…children…</div></div>
   so the children are one level deeper than you'd think. Any layout rule for a
   boxed container must target `> .e-con-inner`, NOT the element itself.
   The grid-4 / grid-3 containers are FULL, so they're targeted directly.
   Belt and braces below: both .elementor-kit-12s are listed for each. */

.mdl-inner > .e-con-inner{ max-width:1200px; margin-inline:auto; }

/* Elementor drives container display from --display, so these need to
   out-specify .e-con. Doubling the class + !important does it. */
.e-con.e-con.mdl-grid-4,
.e-con.e-con.mdl-grid-3{
  display:grid !important;
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:768px){
  .e-con.e-con.mdl-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1025px){
  .e-con.e-con.mdl-grid-4{ grid-template-columns:repeat(4,1fr); }
  .e-con.e-con.mdl-grid-3{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- Hero ---------- */
/* Set the background image on this container in Elementor:
   Style → Background → Classic → Choose Image.
   This overlay keeps the text legible over any photo. */
.e-con.mdl-hero-c{
  position:relative; isolation:isolate;
  background-size:cover; background-position:center;
}
.e-con.mdl-hero-c::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,17,23,.70), rgba(13,17,23,.93)),
    radial-gradient(45% 45% at 20% 25%, rgba(59,159,232,.20), transparent 70%),
    radial-gradient(40% 40% at 85% 15%, rgba(59,159,232,.14), transparent 70%);
}
.e-con.mdl-hero-c > *{ position:relative; z-index:1; }

.mdl-lead-narrow{ max-width:640px; margin-inline:auto; }

.e-con.mdl-hero-actions{ justify-content:center; align-items:center; }
@media (max-width:767px){
  .e-con.mdl-hero-actions{ width:100%; max-width:340px; margin-inline:auto; }
  .mdl-hero-actions .elementor-widget-button,
  .mdl-hero-actions .elementor-button{ width:100%; }
}

/* Trust strip (plain <ul> inside a text widget) */
.mdl-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  list-style:none; margin:8px 0 0; padding:0;
}
.mdl-trust li::before{
  content:"✓"; color:var(--mdl-blue); font-weight:700; margin-right:8px;
}

/* ---------- Cards ---------- */
/* Card chrome lives here because icon-box has no container styling of
   its own. Typography and colours are already in the JSON. */
.elementor-element.mdl-card{
  background:var(--mdl-surface);
  border:1px solid var(--mdl-border);
  border-radius:8px;
  padding:24px;
  height:100%;
  transition:border-color .2s, transform .2s;
}
.elementor-element.mdl-card:hover{
  border-color:rgba(59,159,232,.5);
  transform:translateY(-2px);
}
.mdl-card .elementor-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:8px;
  background:rgba(59,159,232,.12);
}

/* ---------- Services note ---------- */
.mdl-note p{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:16px 0 0; padding:16px 20px;
  border:1px dashed var(--mdl-border); border-radius:8px;
}
.mdl-tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#FFB94D; background:rgba(255,185,77,.12);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}

/* ---------- About / kit ----------  (boxed -> target > .e-con-inner) */
.e-con.mdl-about-grid > .e-con-inner,
.e-con.e-con.mdl-about-grid:not(.e-con-boxed){
  display:grid !important; grid-template-columns:1fr; align-items:center; gap:48px;
}
.e-con.e-con.mdl-about-media{ display:grid !important; grid-template-columns:1fr; }
@media (min-width:1025px){
  .e-con.mdl-about-grid > .e-con-inner,
  .e-con.e-con.mdl-about-grid:not(.e-con-boxed){ grid-template-columns:6fr 5fr; }
  .e-con.e-con.mdl-about-media{ grid-template-columns:1fr 1fr; align-items:start; }
  .mdl-about-img--kit{ grid-column:1 / -1; }
}
.mdl-about-img img{
  width:100%; height:auto; display:block;
  border-radius:8px; border:1px solid var(--mdl-border);
  aspect-ratio:4/3; object-fit:cover;
}
.mdl-about-img--kit img{ aspect-ratio:16/9; }

/* ---------- Pricing ---------- */
.e-con.mdl-price-card{ height:100%; }
.mdl-feats{ margin-top:8px; margin-bottom:auto; padding-bottom:20px; }
.mdl-feats .elementor-icon-list-item{ align-items:flex-start; }
.mdl-price-card .elementor-widget-button,
.mdl-price-card .elementor-button{ width:100%; }
@media (min-width:1025px){
  .e-con.mdl-price-card.is-featured{ box-shadow:0 0 0 1px rgba(59,159,232,.35); }
}

/* ---------- Booking ----------  (boxed -> target > .e-con-inner) */
.e-con.mdl-book-grid > .e-con-inner,
.e-con.e-con.mdl-book-grid:not(.e-con-boxed){
  display:grid !important; grid-template-columns:1fr; gap:56px;
}
@media (min-width:1025px){
  .e-con.mdl-book-grid > .e-con-inner,
  .e-con.e-con.mdl-book-grid:not(.e-con-boxed){ grid-template-columns:5fr 7fr; align-items:start; }
}
.mdl-form .elementor-field-textual{ min-height:48px; padding:12px 14px; }
.mdl-form .elementor-field-textual:focus{
  border-color:var(--mdl-blue) !important;
  box-shadow:0 0 0 3px rgba(59,159,232,.18);
  outline:none;
}
.mdl-form .elementor-field-textual::placeholder{ color:#5C6B80; }
.mdl-form textarea.elementor-field-textual{ min-height:110px; }
.mdl-form .elementor-button{ min-height:52px; }

/* ---------- Header ---------- */
.e-con.mdl-nav-c{
  position:sticky; top:0; z-index:900;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
/* Logo left, menu + CTA right. This is now ALSO set in the JSON
   (flex_justify_content: space-between), so the header is correct even
   with this stylesheet missing — that was the "aligned left" bug. */
.e-con.mdl-nav-inner > .e-con-inner{
  display:flex; flex-direction:row;
  align-items:center; justify-content:space-between; gap:16px;
}
.mdl-logo img{ max-height:40px; width:auto; }
.mdl-logo--foot img{ max-height:36px; width:auto; }
/* the burger menu already contains a Book link, so hide the duplicate CTA */
@media (max-width:1024px){ .mdl-nav-cta{ display:none; } }

/* ---------- Footer ----------  (boxed -> target > .e-con-inner) */
.e-con.mdl-foot-grid > .e-con-inner,
.e-con.e-con.mdl-foot-grid:not(.e-con-boxed){
  display:grid !important; grid-template-columns:1fr; gap:36px;
}
@media (min-width:768px){
  .e-con.mdl-foot-grid > .e-con-inner,
  .e-con.e-con.mdl-foot-grid:not(.e-con-boxed){ grid-template-columns:2fr 1fr 1fr; gap:48px; }
}
.mdl-foot-links .elementor-icon-list-item a,
.mdl-foot-links .elementor-icon-list-item{ min-height:36px; display:flex; align-items:center; }
.mdl-foot-links .elementor-icon-list-item:hover .elementor-icon-list-text{ color:var(--mdl-blue); }
.e-con.mdl-foot-c{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
.mdl-foot-bottom p{ border-top:1px solid var(--mdl-border); padding-top:24px; margin:16px 0 0; }

/* ---------- Buttons: kill Hello/browser defaults ---------- */
.mdl-btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; cursor:pointer;
}
.mdl-btn-full .elementor-button{ width:100%; }

@media (prefers-reduced-motion:reduce){
  .elementor-element.mdl-card{ transition:none; }
  .elementor-element.mdl-card:hover{ transform:none; }
}/* End custom CSS */