/* =========================
   GLOBAL (tokens + base + primitives)
   Static, rebuild-safe
   ========================= */

/* ---------- Tokens ---------- */
:root{
  --accent:#0f5b7a;         /* coastal teal */
  --accent-2:#1c7ea6;       /* lighter teal */
  --sand:#f2c86a;           /* warm highlight */

  --bg:#f7f9fb;
  --card:#ffffff;

  --text:#0b1220;
  --muted:#556;

  --border: rgba(11,18,32,.10);

  --shadow-sm: 0 10px 24px rgba(11,18,32,.06);
  --shadow:    0 18px 60px rgba(11,18,32,.10);

  --ring: 0 0 0 4px rgba(15,91,122,.18);

  --radius: 18px;
  --radius-lg: 26px;

  --max: 1120px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

a{ color: inherit; text-decoration:none; }
a:focus{
  outline:none;
  box-shadow: var(--ring);
  border-radius: 12px;
}

.muted{ color: var(--muted); }
.lead{
  font-size: clamp(1.05rem, 1.1vw, 1.22rem);
  color: var(--muted);
}

/* Headings */
h1,h2,h3{ line-height:1.12; letter-spacing:-.02em; }
h1{
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}
h2{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
}

/* Links */
.text-link{ font-weight: 900; color: var(--accent); }
.text-link:hover{ text-decoration: underline; }

/* ---------- Wrap ---------- */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

/* IMPORTANT:
   No global padding on <main>.
   All vertical rhythm comes from .band. */
main{ padding: 0; }

/* ---------- Bands (full width, content wrapped inside) ---------- */
.band{
  position: relative;
  padding: clamp(40px, 5vw, 78px) 0;
  background: transparent;
}

/* Subtle alternation */
.band-mist{
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(191,232,234,.42), rgba(191,232,234,0) 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(234,245,251,.78), rgba(234,245,251,0) 60%),
    linear-gradient(180deg, rgba(234,245,251,.55), rgba(234,245,251,.26));
}

/* No automatic hairlines */
.band::after{ content:none; }

/* Generic hero-band skin (used across site) */
.band-hero{
  background:
    radial-gradient(1100px 620px at 20% 10%, rgba(191,232,234,.58), rgba(191,232,234,0) 62%),
    radial-gradient(900px 620px at 82% 0%, rgba(242,200,106,.20), rgba(242,200,106,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(247,250,252,1));
}

/* Make hero bands a stacking context (safe for any ::before motifs) */
.band-hero{
  position: relative;
  overflow: hidden;
}
.band-hero .wrap{
  position: relative;
  z-index: 2;
}

/* ---------- Cards / Grids ---------- */
.card{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow);
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 860px){
  .grid-2{ grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* Slightly “lighter” cards for grid tiles */
.grid-2 > .card{
  box-shadow: var(--shadow-sm);
}

/* CTA row (used site-wide) */
.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* Trust pills (used site-wide) */
.trust{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.trust li{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(11,18,32,.68);
  font-weight: 800;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- Split sections (text + “image” block) ---------- */
.split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

@media (min-width: 860px){
  .split{
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
  }

  .split--reverse{
    grid-template-columns: .95fr 1.05fr;
  }

  .split--reverse .split-media{ order: -1; }

  /* Text breathing room away from centre */
  .split-copy{ max-width: 520px; }
  .split--reverse .split-copy{ margin-left: auto; }
}

.split-copy h2{ margin-top:0; }

.split-media{
  min-height: 320px;
  border-radius: 28px;
  border: 1px solid rgba(15,91,122,.10);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;

  background:
    radial-gradient(140px 120px at 25% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    radial-gradient(180px 150px at 70% 40%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
    radial-gradient(900px 520px at 20% 10%, rgba(191,232,234,.70), rgba(191,232,234,0) 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(242,200,106,.18), rgba(242,200,106,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.76));
}

/* Crisp wave overlay inside split-media */
.split-media::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.40;
  pointer-events:none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='600' viewBox='0 0 1400 600'%3E%3Cpath d='M0 360 C 210 310 420 410 630 360 C 840 310 1050 410 1400 360' fill='none' stroke='%230f5b7a' stroke-opacity='0.22' stroke-width='2'/%3E%3Cpath d='M0 420 C 210 370 420 470 630 420 C 840 370 1050 470 1400 420' fill='none' stroke='%230f5b7a' stroke-opacity='0.18' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: 50% 55%;
  background-size: 1400px auto;
}

/* ---------- Page-level helpers (keep minimal) ---------- */
.stack{
  display:grid;
  gap:16px;
}
@media (min-width: 860px){
  .stack{ gap:18px; }
}