@import url('../../../../plugins/wpo-google-fonts-manager/fonts/fonts.css');

:root{
  --wpo-bg:#ffffff;
  --wpo-surface:#f6f7f7;
  --wpo-text:#1d2327;
  --wpo-muted:#50575e;
  --wpo-border:rgba(0,0,0,.08);
  --wpo-accent:#2271b1;
  --wpo-accent-contrast:#ffffff;
  --wpo-radius:14px;
  --wpo-shadow:0 12px 30px rgba(0,0,0,.10);
  --wpo-font-base:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  /* Use Montserrat if available (from plugin), otherwise fallback to base */
  /* --wpo-font-headings:var(--wpo-font-montserrat, var(--wpo-font-base)); */
  --wpo-gutter:50px;
  --wpo-gutter-mobile:20px;
  --wpo-gutter-mobile-vw:5;
  --wpo-footer-bg:#0b1d2a;
  --wpo-footer-text:rgba(255,255,255,.86);
  --wpo-footer-link:#ffffff;
}

*{box-sizing:border-box}
body{margin:0;background:var(--wpo-bg);color:var(--wpo-text);font-family:var(--wpo-font-base);line-height:1.55}
a{color:var(--wpo-accent);text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;height:auto}

/* Remove underline from content links */
.wpo-content a,
.wpb_wrapper a,
.wpb_text_column a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
}
.wpo-content a:hover,
.wpb_wrapper a:hover,
.wpb_text_column a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration: none;
}

:where(a,button,summary):focus-visible{outline:3px solid rgba(34,113,177,.35);outline-offset:3px;border-radius:10px}

.wpo-container{max-width:1140px;margin:0 auto;padding:0 min(var(--wpo-gutter), 5vw)}
.wpo-main{min-height:60vh}
.wpo-stack>*+*{margin-top:18px}

.wpo-shell{container-type:inline-size;container-name:page}

/* Mobile container-query overrides are generated via wp_add_inline_style so the cutoff is configurable in admin. */

.wpo-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--wpo-border);padding-left:min(var(--wpo-gutter-mobile, 20px), 5vw);padding-right:min(var(--wpo-gutter-mobile, 20px), 5vw)}
.wpo-header__inner{display:flex;align-items:center;padding:14px 0;gap:16px;flex-wrap:wrap;container-type:inline-size;container-name:header}
.wpo-site-title{font-weight:700;text-decoration:none;color:var(--wpo-text)}
.wpo-menu{list-style:none;margin:0;padding:0;display:flex;gap:16px;row-gap:10px;align-items:center;flex-wrap:wrap}
.wpo-menu a{text-decoration:none;color:var(--wpo-text);font-weight:600}
.wpo-menu a:hover{text-decoration:underline}

/* Sub-menus (WordPress) */
.wpo-menu li{position:relative}
.wpo-menu .sub-menu{list-style:none;margin:0;padding:8px;display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:40;background:var(--wpo-bg);border:1px solid var(--wpo-border);border-radius:12px;box-shadow:var(--wpo-shadow);min-width:240px}
.wpo-menu .sub-menu a{display:block;padding:10px 12px;border-radius:10px;font-weight:700}
.wpo-menu .sub-menu a:hover{text-decoration:none;background:var(--wpo-surface)}
.wpo-menu li:hover>.sub-menu,.wpo-menu li:focus-within>.sub-menu{display:block}
.wpo-menu li.menu-item-has-children>a{display:inline-flex;align-items:center;gap:8px}
.wpo-menu li.menu-item-has-children>a::after{content:"▾";font-size:12px;line-height:1;color:var(--wpo-muted)}

.wpo-nav-details{position:relative;margin-left:auto}
.wpo-nav-summary{display:none;list-style:none;cursor:pointer;user-select:none;border:1px solid var(--wpo-border);background:var(--wpo-bg);border-radius:10px;padding:10px 12px;font-weight:800;color:var(--wpo-text)}
.wpo-nav-summary::-webkit-details-marker{display:none}

/* Desktop/default: always show full navbar, no hamburger */
.wpo-nav-details:not([open]) > .wpo-nav{display:block;position:static;padding:0;border:0;box-shadow:none;background:transparent;min-width:auto}

/* Hamburger icon */
.wpo-nav-summary__label{display:inline-flex;align-items:center;gap:10px}
.wpo-nav-summary__label::before{content:"";width:18px;height:2px;background:var(--wpo-text);border-radius:999px;box-shadow:0 -6px 0 var(--wpo-text), 0 6px 0 var(--wpo-text)}

/* Header mobile dropdown rules are generated via wp_add_inline_style so the cutoff is configurable in admin. */

.wpo-hero{position:relative;overflow:hidden;background:linear-gradient(135deg, var(--wpo-text), #0b1d2a)}
.wpo-hero__slides{position:relative}
.wpo-hero__slide{display:none;color:#fff;padding:clamp(48px, 7vw, 78px) 0}
.wpo-hero__slide.is-active{display:block}
.wpo-hero__title{margin:0 0 10px;font-size:clamp(28px, 3.6vw + 10px, 46px);letter-spacing:-.02em;line-height:1.1}
.wpo-hero__lead{margin:0 0 22px;font-size:clamp(16px, 0.8vw + 14px, 18px);color:rgba(255,255,255,.85);max-width:56ch}
.wpo-hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.wpo-hero__controls{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:10px}
.wpo-dot{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.35);cursor:pointer}
.wpo-dot.is-active{background:rgba(255,255,255,.9)}

.wpo-btn{display:inline-block;text-decoration:none;border-radius:999px;padding:11px 16px;font-weight:800;border:1px solid transparent}
.wpo-btn--primary{background:var(--wpo-accent);color:var(--wpo-accent-contrast)}
.wpo-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.wpo-btn--block{display:block;text-align:center}

.wpo-jumbotron{background:var(--wpo-surface);border-bottom:1px solid var(--wpo-border)}
.wpo-jumbotron__inner{padding:44px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wpo-jumbotron__title{margin:0;font-size:28px}
.wpo-jumbotron__text{margin:0;color:var(--wpo-muted);max-width:70ch}
.wpo-jumbotron__actions{display:flex;gap:12px;flex-wrap:wrap}

.wpo-section{padding:54px 0}
.wpo-section--alt{background:var(--wpo-surface);border-top:1px solid var(--wpo-border);border-bottom:1px solid var(--wpo-border)}
.wpo-section__title{margin:0 0 22px;font-size:28px;letter-spacing:-.01em}
.wpo-lead{font-size:18px;margin:0 0 8px}
.wpo-muted{color:var(--wpo-muted)}

.wpo-grid{display:grid;gap:18px}
.wpo-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.wpo-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}

.wpo-card{background:var(--wpo-bg);border:1px solid var(--wpo-border);border-radius:var(--wpo-radius);padding:18px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.wpo-card--soft{background:linear-gradient(180deg,#ffffff, var(--wpo-surface))}
.wpo-card__title{margin:0 0 8px;font-size:18px}
.wpo-card__text{margin:0;color:var(--wpo-muted)}

.wpo-price{background:var(--wpo-bg);border:1px solid var(--wpo-border);border-radius:var(--wpo-radius);padding:20px;box-shadow:var(--wpo-shadow)}
.wpo-price--featured{border-color:rgba(34,113,177,.45)}
.wpo-price__name{margin:0 0 4px;font-size:18px}
.wpo-price__tag{margin:0 0 10px;color:var(--wpo-muted)}
.wpo-price__amount{font-size:34px;font-weight:900;margin:10px 0 14px}
.wpo-price__period{font-size:14px;font-weight:700;color:var(--wpo-muted)}

.wpo-list{margin:0 0 16px;padding-left:18px;color:var(--wpo-muted)}
.wpo-list li{margin:6px 0}

.wpo-content{padding:30px 0}
.wpo-content:not(.wpo-container){padding-left:min(var(--wpo-gutter), 5vw);padding-right:min(var(--wpo-gutter), 5vw)}
.wpo-page-title{margin:0 0 16px;font-size:clamp(24px, 2vw + 16px, 32px);letter-spacing:-.01em}
.wpo-meta{margin-bottom:14px}

.wpo-footer{background:var(--wpo-footer-bg);color:var(--wpo-footer-text);margin-top:40px}
.wpo-footer a{color:var(--wpo-footer-link)}
.wpo-footer--stripe{padding:14px 0}
.wpo-footer__stripe{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.wpo-social{display:flex;gap:10px;align-items:center}
.wpo-social__link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.22);text-decoration:none}
.wpo-social__link:hover{border-color:rgba(255,255,255,.45)}
.wpo-social__icon{font-weight:900;font-size:12px;line-height:1;color:#fff}

.wpo-footer__copy{font-weight:700;font-size:13px;color:rgba(255,255,255,.80)}

/* ============================================
   FLUID TYPOGRAPHY - No media queries needed
   Uses CSS clamp() to scale fonts smoothly
   between min and max viewport sizes
   ============================================ */

/* Fluid text sizing utility classes */
.fluid-text { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.fluid-text-lg { font-size: clamp(1.125rem, 3vw, 1.5rem); }
.fluid-text-xl { font-size: clamp(1.25rem, 4vw, 2rem); }

/* Fluid headings - automatically scale with container using modern CSS */
h1, .h1, .wpo-heading h1,
.wpb_wrapper h1,
.wpb_text_column h1,
.wpo-cms-heading h1 {
  font-size: min(clamp(1.5rem, 5cqi, 2.25rem), 8vh);
  line-height: 1.1;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
  margin-bottom: 0.25em;
  max-width: 100%;
}

.wpo-cms-heading h1 {
  font-size: min(clamp(1.2rem, 3.6cqi, 1.85rem), 6vh);
}

.wpo-heading-keep-words h1 {
  font-size: min(clamp(0.9rem, 2.4cqi, 1.35rem), 5vh);
}

.wpo-cms-heading h1,
.wpb_wrapper h1,
.wpb_text_column h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.wpo-no-break {
  white-space: nowrap;
  font-size: 0.92em;
}


h2, .h2, .wpo-heading h2,
.wpb_wrapper h2,
.wpb_text_column h2 {
  font-size: min(clamp(1.25rem, 4cqi, 1.85rem), 6vh);
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
  max-width: 100%;
}

@container page (max-width: 768px) {
  h1, .h1, .wpo-heading h1,
  .wpb_wrapper h1,
  .wpb_text_column h1,
  .wpo-cms-heading h1,
  h1[style*="font-size"],
  span[style*="font-size"] {
    font-size: min(clamp(1.2rem, 4.5cqi, 1.9rem), 7vh) !important;
  }

  h2, .h2, .wpo-heading h2,
  .wpb_wrapper h2,
  .wpb_text_column h2,
  h2[style*="font-size"] {
    font-size: min(clamp(1.05rem, 3.8cqi, 1.5rem), 6vh) !important;
  }
}

@container page (max-width: 1024px) {
  .wpo-heading-keep-words h1 {
    font-size: min(clamp(0.78rem, 1.7cqi, 1rem), 3.8vh);
  }
}

@container page (max-width: 768px) {
  .wpo-heading-keep-words h1 {
    font-size: min(clamp(0.74rem, 2.2cqi, 1rem), 3.6vh);
  }
}

/* Reduce gap between heading and following image/divider */
h1 + p img,
h1 + img,
.wpo-cms-heading + *,
.wpb_text_column h1,
.wpb_content_element h1 {
  margin-bottom: 0;
}

/* Remove top margin from paragraphs with images following headings */
.wpb_wrapper h1 + p,
.wpb_wrapper h1 + p:has(img),
.wpb_text_column + .wpb_single_image,
.wpb_content_element + .wpb_single_image,
.wpb_text_column + p,
.wpb_content_element + p {
  margin-top: 0;
}

h3, .h3, .wpo-heading h3,
.wpb_wrapper h3,
.wpb_text_column h3 {
  font-size: clamp(1rem, 3vw + 0.25rem, 2rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h4, .h4, .wpo-heading h4,
.wpb_wrapper h4,
.wpb_text_column h4 {
  font-size: clamp(0.9rem, 2.5vw + 0.125rem, 1.5rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}

h5, .h5, h6, .h6,
.wpb_wrapper h5,
.wpb_wrapper h6 {
  font-size: clamp(0.85rem, 2vw + 0.125rem, 1.25rem);
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* Override WPBakery inline font-size for fluid scaling on mobile */
/* Removed aggressive font-size override */

/* Reduce container padding on mobile for more content space */
.vc_column-inner,
.wpb_column,
.vc_column_container {
  padding-left: min(10px, 2vw) !important;
  padding-right: min(10px, 2vw) !important;
}

/* WPO heading elements */
.wpo-heading,
.wpo-text,
.wpb_text_column,
.wpb_wrapper {
  max-width: 100%;
  word-break: normal;
  hyphens: none;
}

/* Ensure text doesn't overflow container */
.wpo-content,
.wpo-element {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Fluid container text - scales with container width */
@supports (font-size: 1cqi) {
  .wpo-shell .wpo-heading h1,
  .wpo-shell .wpo-heading h2 {