/* =========================================================
   BASE — design tokens, resets, typographic foundation
   U.S Direct E-commerce U.K Limited
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ---- Brand palette (fixed) ---- */
  --primary:#0D2F6F;
  --secondary:#6486A4;
  --accent:#94AEC6;
  --background:#EEF2F7;
  --surface:#FFFFFF;
  --text:#0D2F6F;
  --text-light:#FFFFFF;
  --border:#D3DCE5;

  /* ---- Derived working tones ---- */
  --ink:#101B33;              /* long-form body copy, higher contrast than --text */
  --ink-muted:#4C5B76;        /* secondary copy, captions */
  --line:#D3DCE5;             /* alias of --border, used for hairlines */
  --line-strong:#B7C4D6;
  --panel-shadow: 0 1px 2px rgba(13,47,111,.04), 0 12px 32px -16px rgba(13,47,111,.18);
  --panel-shadow-hover: 0 4px 10px rgba(13,47,111,.06), 0 24px 48px -20px rgba(13,47,111,.24);
  --status-ok:#2F7A5C;
  --status-ok-bg:#E4F2EC;
  --grid-line: rgba(13,47,111,.08);

  /* ---- Type ---- */
  --font-display:'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-ui:'Geist', 'IBM Plex Sans', sans-serif;
  --font-mono:'Geist Mono', 'IBM Plex Mono', monospace;

  /* ---- Scale ---- */
  --step-2xl: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);
  --step-xl: clamp(2.1rem, 1.75rem + 1.6vw, 3.1rem);
  --step-lg: clamp(1.5rem, 1.32rem + .8vw, 2rem);
  --step-md: 1.25rem;
  --step-base: 1rem;
  --step-sm: .875rem;
  --step-xs: .75rem;

  /* ---- Layout ---- */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --header-h: 84px;
}

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

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  font-weight:600;
}
h1{ font-size:var(--step-2xl); letter-spacing:-.02em; }
h2{ font-size:var(--step-xl); letter-spacing:-.015em; }
h3{ font-size:var(--step-lg); }
h4{ font-size:1.15rem; }

p{ margin:0 0 1em; color:var(--ink-muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--secondary);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px;
  background:var(--primary);
  border-radius:1px;
  transform:rotate(45deg);
  flex:none;
}

.lede{
  font-size:1.15rem;
  color:var(--ink-muted);
  max-width:52ch;
}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--primary); color:var(--text-light);
  padding:10px 16px; border-radius:var(--radius-sm);
  font-family:var(--font-ui); font-size:var(--step-sm);
  z-index:1000; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

::selection{ background:var(--primary); color:var(--text-light); }