:root{
  --bg:#f5f7fb;
  --bg2:#ffffff;
  --bg3:#eef2fb;
  --text:#0a1a2f;
  --muted:#5f6b80;
  --primary:#0a1a2f;
  --accent:#f2c94c;
  --accentSoft:rgba(242,201,76,.16);
  --border:#dde2ee;

  --shadow:0 18px 45px rgba(15,23,42,.12);
  --shadow2:0 10px 28px rgba(15,23,42,.10);

  --radius:22px;
  --radiusSm:16px;

  --fontBase:16px;

  --max:1240px;
  --pad:1.25rem;
}

body.dark{
  --bg:#050811;
  --bg2:#0b1220;
  --bg3:#0a1020;
  --text:#e5ecff;
  --muted:#a9b3d6;
  --primary:#f2c94c;
  --border:#1f2937;
}

body.high-contrast{
  --bg:#000;
  --bg2:#000;
  --bg3:#000;
  --text:#fff;
  --muted:#e5e7eb;
  --border:#fff;
  --accent:#ff0;
  --accentSoft:rgba(255,255,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:1rem;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  width:100%;
}

.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  left:1rem;top:1rem;width:auto;height:auto;z-index:9999;
  background:var(--bg2);border:1px solid var(--border);padding:.65rem .9rem;border-radius:999px
}

/* Accessibility bar */
.accessibility-bar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  font-size:.9rem;
}
.accessibility-bar-inner{
  display:flex;flex-wrap:wrap;gap:.7rem;
  align-items:center;justify-content:space-between;
  padding:.55rem 0;
}
.accessibility-controls{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.accessibility-controls span{color:var(--muted)}
.font-value{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;
  padding:.2rem .55rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
  font-size:.85rem;
}
.btn-small{
  border:1px solid var(--border);
  background:var(--bg);
  padding:.28rem .7rem;
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
  font-weight:800;
}
.btn-small:hover{background:var(--accentSoft)}
.btn-small:focus{outline:3px solid var(--accent);outline-offset:2px}

/* Header / Nav */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
body.dark header{background:rgba(5,8,17,.88)}
body.high-contrast header{background:#000;backdrop-filter:none}

nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem 0;gap:1rem
}

.brand{display:flex;align-items:center;gap:.7rem;font-weight:900;letter-spacing:.02em}

/* Logo integration (supports brand image + old mark/text structure) */
.brand img{
  display:block;
  height:38px;
  width:auto;
  max-width:min(260px, 56vw);
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 10px 22px rgba(15,23,42,.12));
}
body.dark .brand img{
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.35));
}
body.high-contrast .brand img{filter:none}

.brand-mark{
  width:40px;height:40px;border-radius:16px;
  background:radial-gradient(circle at 20% 20%, var(--accent), var(--primary));
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}
.brand-text span{display:block;font-size:.72rem;text-transform:uppercase;color:var(--muted)}
.brand-text strong{font-size:1.02rem}

/* NAV FIX: never wrap; scroll if needed; collapse earlier to avoid "in-between" ugly widths */
.nav-links{
  display:flex;
  gap:.9rem;
  align-items:center;
  flex-wrap:nowrap;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}

.nav-links a{
  font-size:.95rem;color:var(--muted);
  padding:.36rem .5rem;border-radius:12px;
  white-space:nowrap;
  flex:0 0 auto;
}
.nav-links a:hover{color:var(--text);background:var(--accentSoft)}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--accentSoft);font-weight:900}

.nav-actions{display:flex;gap:.6rem;align-items:center;flex:0 0 auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.68rem 1.18rem;border-radius:999px;
  border:1px solid transparent;font-size:.95rem;
  cursor:pointer;white-space:nowrap;gap:.35rem;
  font-weight:900;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#0b1020;border-color:var(--primary);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{
  border-color:var(--border);
  background:var(--bg2);
  color:var(--muted)
}
.btn-ghost:hover{background:var(--accentSoft);color:var(--text)}
.btn:focus{outline:3px solid var(--accent);outline-offset:2px}

.theme-toggle-icon{
  width:20px;height:20px;border-radius:999px;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:900;
}

.nav-toggle{
  display:none;border:1px solid var(--border);background:var(--bg2);
  border-radius:999px;padding:.48rem .75rem;font-size:.9rem;
  cursor:pointer;font-weight:900;
}
.nav-toggle:focus{outline:3px solid var(--accent);outline-offset:2px}

/* Layout base */
main{min-height:60vh}

/* Sections */
.section{padding:3rem 0;}
.section-alt{background:linear-gradient(180deg,var(--bg3),rgba(255,255,255,0));}
body.dark .section-alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));}

.hero{padding:3.4rem 0 2.6rem}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:2rem;align-items:center
}

.eyebrow{
  font-size:.86rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);font-weight:900;margin-bottom:.55rem
}

h1{
  font-size:clamp(2.15rem,4vw,3.0rem);
  line-height:1.06;margin:0 0 .75rem;
  letter-spacing:-.02em;
}
.gradient-text{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

.lead{
  margin:0 0 1.25rem;color:var(--muted);
  max-width:60rem;font-size:1.06rem
}

.badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.25rem}
.badge{
  padding:.36rem .78rem;border-radius:999px;border:1px solid var(--border);
  font-size:.88rem;color:var(--muted);background:var(--bg2)
}
.badge-strong{
  border-color:rgba(242,201,76,.45);
  background:var(--accentSoft);
  color:var(--text);
  font-weight:900;
}

.proof-strip{
  display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;
  padding:.85rem 1rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:radial-gradient(circle at top, var(--accentSoft), var(--bg2));
  box-shadow:var(--shadow2);
  margin:1.15rem 0 0;
}
.proof-item{
  display:flex;gap:.5rem;align-items:center;
  color:var(--muted);
  font-weight:800;
  font-size:.92rem;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  flex:0 0 auto;
}

.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:.95rem 0 .6rem}
.note{font-size:.92rem;color:var(--muted);max-width:62rem}

.card{
  background:var(--bg2);
  border-radius:var(--radiusSm);
  border:1px solid var(--border);
  padding:1.15rem;
  box-shadow:var(--shadow2);
  min-width:0;
}
.hero-card{
  background:radial-gradient(circle at top,var(--accentSoft),var(--bg2));
  border-radius:var(--radius);
  padding:1.35rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  min-width:0;
}
.hero-card-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;margin-bottom:1rem
}

/* Pill contrast fix (theme-safe) */
.hero-card-pill{
  font-size:.82rem;
  padding:.28rem .68rem;
  border-radius:999px;
  background:var(--accentSoft);
  border:1px solid rgba(242,201,76,.45);
  color:var(--text);
  white-space:nowrap;
  font-weight:900;
}
body.high-contrast .hero-card-pill{
  background:#000;
  border-color:#fff;
  color:#fff;
}

.mini{color:var(--muted);font-size:.92rem}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;margin-top:.65rem;font-size:.9rem
}
.hero-metric{
  background:rgba(11,17,32,.06);
  border-radius:18px;padding:.72rem .78rem;
  min-width:0;
}
.hero-metric strong{display:block;font-size:1.02rem;letter-spacing:-.01em}
.hero-metric span{
  color:var(--muted);font-size:.85rem;
  overflow-wrap:anywhere;
  word-break:break-word;
}

h2{font-size:1.75rem;margin:0 0 .55rem;letter-spacing:-.01em}
h3{margin:.1rem 0 .35rem;letter-spacing:-.01em}
.section-intro{margin:0 0 1.7rem;color:var(--muted);max-width:65rem;font-size:1.02rem}

.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}

.list{padding-left:1.05rem;font-size:1rem;color:var(--muted);margin:.65rem 0 0}
.list li{margin-bottom:.46rem}

.pill-row{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.8rem}
.pill{
  padding:.2rem .62rem;border-radius:999px;border:1px solid var(--border);
  font-size:.84rem;color:var(--muted);font-weight:800;
}

.divider{height:1px;background:var(--border);margin:1.35rem 0}

.callout{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg2),rgba(255,255,255,.4));
  padding:1.25rem;
  box-shadow:var(--shadow2);
}
.callout p{margin:.2rem 0 0;color:var(--muted)}
.callout .actions{margin-top:1rem}

.feature{display:flex;gap:.85rem;align-items:flex-start}
.icon{
  width:44px;height:44px;border-radius:16px;
  background:radial-gradient(circle at 25% 25%, var(--accent), var(--primary));
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  flex:0 0 auto;
}

.price{font-size:1.55rem;font-weight:950;margin:.25rem 0 .1rem;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:.95rem;margin:0 0 .95rem}
.popular{position:relative;overflow:hidden;}
.popular::before{
  content:"Most Popular";
  position:absolute;top:12px;right:12px;
  font-size:.82rem;font-weight:950;
  padding:.3rem .65rem;
  border-radius:999px;
  background:var(--accentSoft);
  border:1px solid rgba(242,201,76,.45);
  color:var(--text);
}

.faq{display:flex;flex-direction:column;gap:.7rem}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radiusSm);
  background:var(--bg2);
  overflow:hidden;
  box-shadow:var(--shadow2);
}
.faq-q{
  width:100%;
  text-align:left;
  padding:1rem 1rem;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-weight:950;
  color:var(--text);
  font-size:1rem;
}
.faq-q span{color:var(--muted);font-weight:950}
.faq-q:focus{outline:3px solid var(--accent);outline-offset:2px}
.faq-a{
  padding:0 1rem 1rem;
  color:var(--muted);
  font-size:1rem;
  display:none;
}
.faq-item.open .faq-a{display:block}

.form{
  background:var(--bg2);
  border-radius:var(--radiusSm);
  border:1px solid var(--border);
  padding:1.15rem;
  box-shadow:var(--shadow2);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-group{margin-bottom:.9rem}
label{display:block;margin-bottom:.25rem;font-size:.92rem;font-weight:900}
input,textarea,select{
  width:100%;
  padding:.62rem .72rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-family:inherit;
  font-size:1rem;
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:3px solid var(--accent);outline-offset:2px}

.contact-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}
.contact-card{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:0;
}
.contact-card p{margin:.35rem 0 0;color:var(--muted);font-size:.98rem}
.contact-card .btn{width:100%;margin-top:auto}
.contact-card a{
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:center;
}

footer{
  border-top:1px solid var(--border);
  padding:1.65rem 0 1.2rem;
  font-size:.92rem;color:var(--muted)
}
.footer-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.9rem;align-items:center
}
.footer-links{display:flex;flex-wrap:wrap;gap:.95rem}
.footer-links a:hover{color:var(--text)}

.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--bg2);
  border-top:1px solid var(--border);
  box-shadow:0 -14px 40px rgba(15,23,42,.12);
  padding:1rem 0;
}
.cookie-inner{
  display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between
}
.cookie-text{color:var(--muted);font-size:.95rem;max-width:70rem}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}

.smallprint{font-size:.95rem;color:var(--muted);margin:.8rem 0 0}
hr{border:none;border-top:1px solid var(--border);margin:1.3rem 0}

/* Collapse grid layout for smaller screens */
@media (max-width: 980px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.form-row,.contact-cards,.hero-metrics{grid-template-columns:1fr}
}

@media (max-width: 760px){
  :root{--pad:1rem}
  .hero{padding-top:2.2rem}
  .brand img{height:34px;max-width:min(240px, 64vw)}
}

/* MENU COLLAPSE EARLIER (prevents “Google & Visibility” pushing nav into weird layouts) */
@media (max-width: 1120px){
  nav{flex-wrap:wrap}
  .nav-links{display:none;width:100%;justify-content:flex-start;padding-top:.25rem}
  .nav-links.show{display:flex}
  .nav-toggle{display:inline-flex}
}

/* ==============================
   CONTACT PAGE FIXES (OVERRIDES)
   Paste at very bottom of styles.css
   ============================== */

.page-contact main,
.page-contact .main,
.page-contact .page,
.page-contact .wrap {
  min-height: 0;
}

.page-contact .hero,
.page-contact .page-hero,
.page-contact .contact-hero,
.page-contact header.hero {
  padding-top: clamp(20px, 4vw, 48px) !important;
  padding-bottom: clamp(24px, 4vw, 56px) !important;
  margin-top: 0 !important;
}

.page-contact .hero,
.page-contact .page-hero,
.page-contact .contact-hero {
  min-height: unset !important;
}

.page-contact .hero .hero-inner,
.page-contact .page-hero .hero-inner,
.page-contact .contact-hero .hero-inner,
.page-contact .hero .container,
.page-contact .page-hero .container,
.page-contact .contact-hero .container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.page-contact .card,
.page-contact .panel,
.page-contact .box,
.page-contact .contact-card,
.page-contact .contact-box,
.page-contact .grid-card,
.page-contact .feature-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.page-contact .card *,
.page-contact .panel *,
.page-contact .box *,
.page-contact .contact-card *,
.page-contact .contact-box *,
.page-contact .grid-card *,
.page-contact .feature-card * {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

.page-contact .card a,
.page-contact .card button,
.page-contact .panel a,
.page-contact .panel button,
.page-contact .contact-card a,
.page-contact .contact-card button,
.page-contact .contact-box a,
.page-contact .contact-box button {
  white-space: normal !important;
  line-height: 1.25 !important;
  height: auto !important;
  min-height: 44px;
}

.page-contact .contact-methods,
.page-contact .contact-grid,
.page-contact .grid,
.page-contact .cards,
.page-contact .cards-grid {
  flex-wrap: wrap !important;
}

.page-contact .contact-grid,
.page-contact .cards-grid,
.page-contact .grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

@media (max-width: 720px) {
  .page-contact .hero,
  .page-contact .page-hero,
  .page-contact .contact-hero {
    padding-top: 18px !important;
  }
}

.page-contact .hero-grid,
.page-contact .contact-hero-grid {
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: start !important;
}

.page-contact .hero-points,
.page-contact .contact-points {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

.page-contact :is(.hero-points,.contact-points,.points,.pill-list,.hero-bullets,.contact-bullets){
  height: auto !important;
  min-height: 0 !important;
  padding-block: 10px !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.page-contact :is(ul.hero-points,ul.contact-points,ul.points,ul.pill-list,ul.hero-bullets,ul.contact-bullets,
                  ol.hero-points,ol.contact-points,ol.points,ol.pill-list,ol.hero-bullets,ol.contact-bullets){
  margin: 0 !important;
  padding-left: 1.1em !important;
  list-style-position: outside;
}

.page-contact :is(.hero-points,.contact-points,.points,.pill-list,.hero-bullets,.contact-bullets) > *{
  margin: 0 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}

.page-contact :is(.hero-points,.contact-points,.points,.pill-list,.hero-bullets,.contact-bullets):not(ul):not(ol){
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.page-contact :is(.card,.tile,.info-card,.feature-card,.contact-card,.package-card,.faq-card){
  min-height: 0 !important;
  min-width: 0 !important;
}