/* ==========================================================
   FORHER DESIGN TOKENS + GLOBAL TYPOGRAPHY
   Start here when changing fonts, colours, spacing or type scale.
   ========================================================== */

/* FORHER DESIGN SYSTEM — OCTOBER 2026
   Core identity: PURPLE + TURQUOISE + IVORY.
   Light page backgrounds use ivory. Dark/feature sections remain purple.
   Tonal variations are derived from ivory, not cold greys or white.
   Edit this file first for a site-wide colour/font change.
*/

:root {
  /* EDIT FONTS HERE: change these two variables to restyle the whole site. */
  /* BODY FONT — Paragraphs, navigation, buttons */
  --font-body: "Montserrat", Arial, sans-serif;

  /* HEADING FONT — H1, H2, section headings */
  --font-display: "DM Serif Display", Georgia, serif;
  /* OFFICIAL LOGO-IDENTITY COLOURS */
  --brand-purple: #93278F;
  --brand-turquoise: #40E0D0;
  --brand-ivory: #FFF9C9;

  /* DEEP PURPLE = legible, contrasting brand sections */
  --plum: var(--brand-purple);
  --plum-dark: #361448;
  --plum-ink: #26102F;

  /* Turquoise is decorative; dark teal is used for small readable text. */
  --aqua: var(--brand-turquoise);
  --teal: #147B77;
  --teal-readable: #147B77;

  /* BRAND SURFACES — derived ONLY from purple, turquoise and ivory. 
     No #FFFFFF or almost-white independent creams. Each surface has a
     clear role and enough difference to be perceived next to ivory.
     To retheme the whole site, edit this block—not individual pages. */
  --ivory: var(--brand-ivory);          /* Main website canvas: #FFF9C9 */
  --paper: var(--ivory);                /* Legacy page alias */
  --surface-page: var(--ivory);         /* Neutral light backgrounds */
  --surface-soft: #F2E0C2;             /* Ivory + 12% brand purple */
  --surface-card: #F6E8C4;             /* Ivory +  8% brand purple */
  --surface-raised: #F6E8C4;           /* Cards with clearly visible warmth */
  --surface-inset: #E7CBBC;            /* Ivory + 22% brand purple */
  --surface-field: #F2E0C2;            /* Form controls, no white */
  --surface-aqua: #E2F5CA;             /* Ivory + 15% brand turquoise */
  --surface-border: rgba(54,20,72,.27);
  --surface-border-strong: rgba(54,20,72,.41);
  --cream: var(--surface-soft);        /* Existing component aliases */
  --mint: var(--surface-aqua);
  --purple-soft: var(--surface-card);
  --butter: var(--surface-inset);

  /* TEXT + ELEVATION */
  --ink: #26102F;
  --muted: #635365;
  --text-on-dark-muted: #ECE2C7;
  --line: var(--surface-border);
  --shadow: 0 20px 65px rgba(42,16,58,.10);
  --radius: 24px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,input,select,textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--aqua);
  color: var(--plum-dark);
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 14px;
  background: var(--plum);
  color: var(--ivory);
  padding: 12px 20px;
  z-index: 999;
  border-radius: 8px;
}

.skip-link:focus {
  top: 14px;
}

.scroll-progress {
  height: 3px;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  z-index: 1200;
  background: linear-gradient(90deg,var(--teal),var(--aqua));
  pointer-events: none;
}

.container {
  width: min(1240px,calc(100% - 100px));
  margin-inline: auto;
}

.container-wide {
  width: min(1380px,calc(100% - 64px));
  margin-inline: auto;
}

.section {
  padding: 116px 0;
}

.section-sm {
  padding: 85px 0;
}

.section-bg {
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface-card) 56%, var(--surface-soft) 100%);
}

.section-cream {
  background: var(--surface-soft);
}

.section-plum {
  background: var(--plum-dark);
  color: var(--ivory);
}

.section-mint {
  background: var(--surface-aqua);
}

.section-heading {
  max-width: 770px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 15px;
  font-weight: 800;
  color: var(--teal-readable); /* Accessible text on ivory */
}

/* .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
} */

.eyebrow.white {
  color: var(--aqua);
}

h1,h2,h3,h4,p {
  margin-top: 0;
}

h1,h2,h3 {
  letter-spacing: -.05em;
}

h1,h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

h1 {
  font-size: clamp(68px,8.2vw,132px);
  line-height: .98;
}

h2 {
  font-size: clamp(43px,5.1vw,79px);
  line-height: 1.07;
}

h3 {
  font-size: clamp(23px,2.35vw,34px);
  line-height: 1.15;
}

p {
  line-height: 1.78;
}

.lead {
  font-size: clamp(16px,1.65vw,20px);
  line-height: 1.75;
  color: var(--muted);
}

.text-plum {
  color: var(--plum);
}

.text-teal {
  color: var(--teal);
}

.text-aqua {
  color: var(--aqua);
}

.italic {
  font-style: italic;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
  line-height: 1.7;
}

.section-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
}

.section-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}

.line-accent {
  height: 1px;
  flex: 1;
  background: var(--line);
  max-width: 340px;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 15px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s;
  text-align: center;
  white-space: nowrap;
}

/* Elevation is for filled/outlined buttons, never the editorial text links. */
.btn:not(.btn-text):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(28,14,38,.11);
}

.btn .arr {
  display: inline-grid;
  place-items: center;
  background: rgba(255,249,201,.18);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 16px;
  transition: transform .3s var(--ease);
}

.btn:not(.btn-text):hover .arr {
  transform: rotate(45deg);
}

.btn-plum {
  background: var(--plum);
  color: var(--ivory);
}

.btn-teal {
  background: var(--teal);
  color: var(--ivory);
}

.btn-white {
  background: var(--ivory);
  color: var(--plum-dark);
}

.btn-aqua {
  background: var(--aqua);
  color: var(--plum-dark);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255,249,201,.50);
  color: var(--ivory);
}

.btn-outline-dark {
  border-color: var(--surface-border-strong);
  background: transparent;
  color: var(--plum);
}

.btn-text {
  padding: 0;
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--plum);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  gap: 15px;
  padding-bottom: 6px;
}

.btn:focus-visible,.nav-link:focus-visible {
  outline-color: var(--aqua);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}