/* STENTON brand tokens extracted from brandbook.pdf */
:root {
  --stenton-navy: #1D2043;
  --stenton-white: #FFFFFF;
  --stenton-purple: #5E0046;
  --stenton-black: #000000;

  --stenton-bg: var(--stenton-white);
  --stenton-text: var(--stenton-navy);
  --stenton-primary: var(--stenton-navy);
  --stenton-accent: var(--stenton-purple);

  --stenton-font: "Montserrat", "Inter", "Arial", sans-serif;
  --stenton-container: 1200px;
  --stenton-radius-sm: 8px;
  --stenton-radius-md: 14px;
  --stenton-radius-lg: 22px;
  --stenton-section-y: clamp(56px, 7vw, 112px);
  --stenton-transition: 180ms ease;
}

html, body {
  font-family: var(--stenton-font);
  color: var(--stenton-text);
  background: var(--stenton-bg);
}

body {
  margin: 0;
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, h4, .heading {
  font-family: var(--stenton-font);
  color: var(--stenton-navy);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(44px, 7vw, 92px); }
h2 { font-size: clamp(32px, 5vw, 64px); }
h3 { font-size: clamp(24px, 3vw, 36px); }

.stenton-container {
  width: min(100% - 32px, var(--stenton-container));
  margin-inline: auto;
}

.stenton-hero {
  background: var(--stenton-navy);
  color: var(--stenton-white);
  padding-block: clamp(72px, 10vw, 150px);
}

.stenton-hero h1,
.stenton-on-dark,
.stenton-on-dark h1,
.stenton-on-dark h2,
.stenton-on-dark h3 {
  color: var(--stenton-white);
}

.stenton-accent {
  color: var(--stenton-purple);
}

.stenton-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--stenton-radius-md);
  background: var(--stenton-purple);
  color: var(--stenton-white);
  border: 1px solid var(--stenton-purple);
  font-family: var(--stenton-font);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--stenton-transition), opacity var(--stenton-transition);
}

.stenton-button-primary:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.stenton-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--stenton-radius-md);
  background: transparent;
  color: var(--stenton-navy);
  border: 1px solid rgba(29, 32, 67, 0.24);
  font-family: var(--stenton-font);
  font-weight: 700;
  text-decoration: none;
}

.stenton-card {
  border: 1px solid rgba(29, 32, 67, 0.12);
  border-radius: var(--stenton-radius-lg);
  background: var(--stenton-white);
  padding: clamp(20px, 3vw, 36px);
}

.stenton-logo {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Logo rules from brandbook:
   - do not stretch, skew, recolor outside approved colors, add shadows, gradients, textures or effects;
   - keep safe area around logo >= 25% of logo/name height;
   - use white logo on navy/purple/dark backgrounds, navy logo on white/light backgrounds.
*/