/* ==========================================================================
   base.css — tokens, reset, typography, layout, utilities
   Ported from the "Soft Clay" theme (selected_theme/mock-5-softclay.html)
   ========================================================================== */

:root{
  --bg:#eaedf7;
  --bg-2:#f1f3fa;
  --surface:#eff1f9;
  --hi:#ffffff;
  --lo:#c6cbe2;
  --ink:#2b3050;
  --ink-soft:#4a5075;
  --muted:#5f668a;          /* was #7b81a3 (3.3:1) — now 4.8:1 on --bg */
  --peri:#7b8cf5;
  --peri-deep:#5566e0;      /* fills, shadows and large text */
  --peri-ink:#4a5ad6;       /* small text in the periwinkle hue (4.8:1) */
  --coral:#ff8a7a;
  --coral-ink:#b93c2b;      /* coral / Rx text */
  --mint:#5fcfae;
  --mint-ink:#19735a;       /* mint text */
  --butter:#ffd28a;
  --lilac:#c4a6f7;
  --wa:#25d366;
  --wa-ink:#063f2f;
  /* text-safe gradient: white text is 4.8:1 at the start, 6.3:1 at the end */
  --grad:linear-gradient(140deg,#5566e0,#4453c9);
  --r-lg:32px;
  --r-md:22px;
  --r-sm:16px;
  --raise:8px 8px 20px rgba(154,161,197,.55), -8px -8px 20px rgba(255,255,255,.95);
  --raise-sm:5px 5px 12px rgba(154,161,197,.45), -5px -5px 12px rgba(255,255,255,.9);
  --raise-lg:16px 16px 36px rgba(154,161,197,.55), -14px -14px 32px rgba(255,255,255,.95);
  --press:inset 6px 6px 14px rgba(154,161,197,.55), inset -6px -6px 14px rgba(255,255,255,.95);
  --press-sm:inset 4px 4px 9px rgba(154,161,197,.5), inset -4px -4px 9px rgba(255,255,255,.92);
  --focus:rgba(85,102,224,.45);
  --nav-h:80px;             /* sticky header: .9rem offset + pill bar */
  --ease:cubic-bezier(.22,.9,.3,1);
  --spring:cubic-bezier(.34,1.42,.5,1);
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 2rem)}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;font-weight:700;
  line-height:1.08;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

/* ---- layout ---- */
.wrap{width:min(1180px,92vw);margin-inline:auto;position:relative;z-index:2}
.sec{padding:clamp(3.5rem,7vw,6rem) 0;position:relative;z-index:2}
.sec-head{max-width:46rem;margin-bottom:2.8rem}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:1rem 0 .8rem}
.sec-head p{color:var(--muted)}

/* ---- utilities ---- */
.soft{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--raise)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- keyboard focus: one ring for every interactive element ---- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[tabindex="-1"]:focus-visible{outline:none}

/* ---- skip link ---- */
.skip-link{position:fixed;left:1rem;top:1rem;z-index:300;padding:.75rem 1.2rem;border-radius:999px;
  background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;box-shadow:var(--raise);
  transform:translateY(-200%);transition:transform .3s var(--ease)}
.skip-link:focus,.skip-link:focus-visible{transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}