/* 01-base.css — extracted from main.css */

/* ========== BASE ========== */

/* ====== HARD STOP: no full-width leaks on top sections ====== */
:where(html){ overflow-x: hidden; scrollbar-gutter: stable both-edges; }
:where(body){ overflow-x: clip; max-width: 100%; }

/* Top-level bands: force normal flow width, kill centering hacks */
:where(.site-header, main, .section, .site-footer,
       .hero, .promos, .work, .contact){
  position: relative;
  width: 100% !important;      /* beats width:100vw */
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;  /* beats translateX(-50%) patterns */
  margin-inline: 0 !important; /* beats calc(50% - 50vw) tricks */
  overflow-x: clip;            /* if a child still tries to spill */
}

/* Any “full-bleed background” utilities – keep them contained */
:where(.bg-skin, .bg-mesh-left, .bg-dots, .bg-band-center,
       .bg-spot-right, .bg-slope-top, .bg-slope-bottom){
  width: 100% !important;
  overflow-x: clip;
}

/* If those utilities use pseudos, this keeps them inside */
:where(.bg-skin, .bg-mesh-left, .bg-dots, .bg-band-center,
       .bg-spot-right, .bg-slope-top, .bg-slope-bottom)::before,
:where(.bg-skin, .bg-mesh-left, .bg-dots, .bg-band-center,
       .bg-spot-right, .bg-slope-top, .bg-slope-bottom)::after{
  position: absolute !important;
  inset: 0 !important;         /* replaces width:100vw/left:50%/translate */
  transform: none !important;
  margin: 0 !important;
}

/* ====== Drawer: must be hidden with transform (doesn't grow page) ====== */
#ws-mobile-drawer.ws-mobile-drawer{
  position: fixed;
  inset: 0 0 0 auto;           /* anchor to right edge */
  width: min(90dvw, 340px);
  transform: translateX(100%) !important;
  will-change: transform;
  left: auto !important;
  right: 0 !important;         /* no left:100%, no right:-340px */
}
#ws-mobile-drawer.ws-mobile-drawer.is-open{
  transform: translateX(0) !important;
}



*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  line-height:1.6;
  background:#eaf3ff;
}
img,svg{ max-width:100%; height:auto; display:block; }

.container{ width:min(1100px, 92vw); margin:0 auto; }
.section{ padding:32px 0; }

h1,h2,h3{ margin:0 0 .5rem; line-height:1.15; }
h2{ font-size: clamp(24px, 3vw, 32px); }
h3{ font-size: clamp(18px, 2.2vw, 22px); }

.btn{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue-700); color:var(--white); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }



/* ========== GENERIC CARDS & SECTIONS ========== */
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }

.section-title{ text-align:center; margin-bottom:26px; font-weight:800; color:#0f1a2b; }
.services, .promos{
  background:
    radial-gradient(circle at 2px 2px, rgba(30,115,190,.05) 1px, transparent 1.5px) 0 0/22px 22px,
    linear-gradient(180deg, #f1f7ff 0%, #ffffff 100%);
}
html { overflow-x: hidden; scrollbar-gutter: stable; } /* <-- right side only */
body { overflow-x: clip; max-width: 100%; }