/* ==========================================================================
   Base typography setup
   ========================================================================== */

body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p, li {
  /* font-size: 1rem; */
  line-height: 1.4;
  /* max-width: var(--max-w); */
}

p + p { margin-top: var(--space-m); }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.7; }




/* Base heading look (applied to all visual sizes) */
.heading-xxl,
.heading-xl,
.heading-l,
.heading-m,
.heading-s,
.heading-xs {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin-block-start: 0;       /* Removes top margin */
  /* margin-block: var(--space-m); */
  color: var(--text);
}

/* XXL
   48px @ 375px  →  72px @ 1440px
   Letter spacing: -4% = -0.04em
*/
.heading-xxl {
  font-size: clamp(48px, calc(39.55px + 2.25vw), 72px);
  margin-block-end: 0.6em;
}

/* XL 44px @ 375px  →  68px @ 1440px
*/
.heading-xl{
  font-size: clamp(44px, calc(35.55px + 2.25vw), 68px);
  margin-block-end: 0.55em;
}

/* L
   40px @ 375px  →  56px @ 1440px
*/
.heading-l {
  font-size: clamp(40px, calc(34.37px + 1.5vw), 56px);
  margin-block-end: 0.5em;
}

/* M
   36px @ 375px  →  48px @ 1440px
*/
.heading-m  {
  letter-spacing: -0.03em;
  font-size: clamp(36px, calc(31.77px + 1.13vw), 48px);
  margin-block-end: 0.45em;
}

/* S
   28px @ 375px  →  32px @ 1440px
*/

.heading-s {
  font-weight: 500;            /* Medium */
  letter-spacing: -0.03em;     /* you had -3% on desktop, -2% on mobile – this is a nice middle ground */
  font-size: clamp(28px, calc(26.59px + 0.38vw), 32px);
  margin-block-end: 0.4em;
}

/* XS
   20px @ 375px  →  20px @ 1440px (fixed)
*/
.heading-xs {
  font-weight: 500;            /* Medium */
  letter-spacing: -0.02em;
  font-size: 20px;             /* stays constant across viewports */
  margin-block-end: 0.35em;
}

/* ==========================================================================
   Body text scale (fluid between 375px → 1440px)
   ========================================================================== */

.body-xxl,
.body-xl,
.body-l,
.body-m,
.body-s,
.body-xs {
  font-family: var(--font-sans);
  color: var(--text);
  text-wrap: pretty;
  max-width: var(--max-w);
  /* margin-block: var(--space-l); */
}

/* Body XXL
   32px → 42px, 160% LH, –0.03em tracking
*/
.body-xxl {
  font-size: clamp(32px, calc(28px + 0.7vw), 42px);
  line-height: 1.6;
  letter-spacing: -0.04em;
}

/* Body XL
   22px → 28px, 160% LH, –0.03em tracking
*/
.body-xl {
  font-size: clamp(22px, calc(19.7px + 0.4vw), 28px);
  line-height: 1.6;
  letter-spacing: -0.03em;
}

/* Body L
   20px → 24px, 160% LH, –0.035 average tracking
*/
.body-l {
  font-size: clamp(20px, calc(18.6px + 0.28vw), 24px);
  line-height: 1.6;
  letter-spacing: -0.035em;
}

/* Body M
   18px → 20px, 160% LH, –0.03 tracking
*/
.body-m,
.case-study-content p,
.case-study-content ul,
.case-study-content ol
 {
  font-size: clamp(18px, calc(17.3px + 0.14vw), 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
}

/* Body S
   16px → 18px, 140% LH, –0.03 tracking
*/
.body-s {
  font-size: clamp(16px, calc(15.3px + 0.14vw), 18px);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* Body XS
   14px → 16px, 140% LH, –0.03 tracking
*/
.body-xs,
.case-study-content small {
  font-size: clamp(14px, calc(13.3px + 0.14vw), 16px);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* Default paragraph inherits body-m behaviour */
/* p {
  font-size: clamp(18px, calc(17.3px + 0.14vw), 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  max-width: var(--max-w);
} */
/* p + p { margin-top: var(--space-m); } */

/* Inline emphasis and links for testing */
/* strong { font-weight: 600; }
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease; */
/* } */
/* a:hover { opacity: 0.7; } */


.muted-1 { color: var(--muted-1); }
.muted-2 { color: var(--muted-2); }
.muted-3 { color: var(--muted-3); }

/* ==========================================================================
   Blockquotes
   ========================================================================== */

.blockquote {
  border-left: 2px solid var(--muted);
  /*padding-left: var(--space-m);
  margin-block: var(--space-l);*/
  max-width: var(--max-w);
}

/* Reset internal defaults */
.blockquote blockquote {
  margin: 0;
  font-weight: 300; /* Work Sans Light */
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: pretty;
}

/* Author line */
.blockquote figcaption {
  margin-top: var(--space-xs);
  font-style: normal;
  font-weight: 500;
  opacity: 0.8;
}

/* Quote L
   28 px → 32 px, 160 % LH, –0.02 em tracking
*/
.blockquote--l blockquote {
  font-size: clamp(28px, calc(26.9px + 0.14vw), 32px);
  line-height: 1.6;
}

/* Quote M
   24 px → 28 px, 160 % LH, –0.02 em tracking
*/
.blockquote--m blockquote {
  font-size: clamp(24px, calc(22.9px + 0.14vw), 28px);
  line-height: 1.6;
}

/* Author text scaled down to harmonise with each quote size */
.blockquote--l figcaption {
  font-size: clamp(16px, calc(15.3px + 0.14vw), 18px); /* like body-s */
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.blockquote--m figcaption {
  font-size: clamp(14px, calc(13.3px + 0.14vw), 16px); /* like body-xs */
  line-height: 1.4;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   Lists (inherit body sizing, e.g. .body-m)
   ========================================================================== */

/* Base lists: inherit font-size / line-height from parent (.body-m, .body-s, etc) */
ul, ol {
  margin-block: var(--space-m);
}

/* Unordered: left-aligned bullets */
ul {
    list-style-type: disc;
    list-style-position: outside;   /* bullets sit flush on the left */
    padding-left: 1rem;
}

/* Ordered: standard decimal list */
ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.3rem;
}

/* Extra spacing between list items */
li + li {
  margin-top: var(--space-s);     /* a bit more breathing room */
}

/* Added to control case study markdown */
.case-study-content ul,
.case-study-content ol {
  margin-block: var(--space-m);
  padding-left: 1.25rem;
}

.case-study-content li + li {
  margin-top: var(--space-xs);
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colour-light-0);  /* white background */
  font-size: clamp(16px, calc(15.3px + 0.14vw), 18px); /* same as .body-s */
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--colour-text);
}

/* Header row */
thead th {
  background-color: var(--colour-light-100);
  font-weight: 500;
  text-align: left;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--colour-light-200);
}

/* Table body cells */
tbody td {
  font-weight: 400;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--colour-light-200);
}

/* Remove border from last row if desired */
tbody tr:last-child td {
  border-bottom: none;
}



/* lighter “label” line */
.intro-label {
  display: block; /* puts it on its own line */
  color: var(--colour-light-400); /* lighter tone */
  font-weight: 400;
}

/* BACK ARROW */
.link--back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: 1.8em;
  text-decoration: none;
  color: var(--text);
}

.link--back::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;

  -webkit-mask-image: url("/img/icons/ArrowLeft.svg");
  mask-image: url("/img/icons/ArrowLeft.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  background-color: currentColor;
}

.link--back:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* FORWARD ARROW */
.link--forward {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-right: 1.8em;
  text-decoration: none;
  color: var(--text);
}

.link--forward::after {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;

  -webkit-mask-image: url("/img/icons/ArrowRight.svg");
  mask-image: url("/img/icons/ArrowRight.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  background-color: currentColor;
}

.link--forward:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}




/* BUTTONS */

.button-demo-dark {
  background: var(--colour-dark-0); /* or var(--bg-dark) if you define one */
  padding: var(--space-l);
  border-radius: var(--space-xs);
}

/* ============================================================
   BUTTON SYSTEM — Updated
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px; /* FULLY ROUND BUTTON */
  border: 1px solid transparent;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  line-height: 1;
  white-space: nowrap;
}

/* ===========================
   SIZE VARIANTS
   =========================== */

.button--medium {
  font-size: clamp(18px, calc(14px + 0.6vw), 24px);
  padding-block: clamp(12px, calc(9px + 0.3vw), 16px);
  padding-inline: clamp(16px, calc(14px + 0.6vw), 24px);
}

.button--small {
  font-size: clamp(14px, calc(12px + 0.4vw), 18px);
  padding-block: clamp(10px, calc(7px + 0.3vw), 12px);
  padding-inline: clamp(14px, calc(12px + 0.5vw), 18px);
}


/* ===========================
   SOLID BUTTONS
   =========================== */

.button--solid {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.button--solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color:  var(--colour-light-0);
}

/* DARK MODE solid buttons = white */
.dark .button--solid {
  background: var(--text);      /* WHITE */
  color: var(--bg);         /* BLACK TEXT */
  border-color: var(--colour-dark-0);
}

.dark .button--solid:hover {
  background: var(--accent);              /* ACCENT ON HOVER */
  border-color: var(--accent);
  color: var(--colour-dark-0);
}


/* ===========================
   OUTLINE BUTTONS
   =========================== */

.button--outline {
  background: transparent;
  border-color: rgba(0,0,0,0.3);          /* 50% BORDER OPACITY */
  color: var(--text);
}

.button--outline:hover {
  background: var(--colour-light-0);    /* SOLID BACKGROUND */
  border-color: var(--accent);
  color: var(--accent);
}

/* DARK MODE OUTLINE */
.dark .button--outline {
  border-color: rgba(255,255,255,0.4);    /* 50% white border */
  color: var(--text);
}

.dark .button--outline:hover {
  background: var(--colour-dark-0);     /* subtle dark bg */
  border-color: var(--accent);
  color: var(--accent);
}


/* ===========================
   FOCUS STYLES
   =========================== */

.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===========================
   DISABLED
   =========================== */

.button[disabled],
.button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}