/* alegreya-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/alegreya-sans-v28-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/alegreya-sans-v28-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/alegreya-sans-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/alegreya-sans-v28-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/alegreya-sans-v28-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/alegreya-sans-v28-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/alegreya-sans-v28-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* alegreya-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/alegreya-sans-v28-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ==========================================================================
   Sarah Fenn Consulting
   style.css

     1. Tokens ......... light theme. Change things here first.
     2. Dark theme ..... the same tokens, redefined
     3. Reset & base
     4. Typography
     5. Layout helpers
     6. Components
     7. Page sections
     8. Responsive
     9. Motion & print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — LIGHT THEME
   ========================================================================== */

:root {

  /* --- Brand ---------------------------------------------------------------
     teal and mint are your two given colours. Everything else is derived
     from them so the palette stays coherent.

     Note on the mint: #00E2A7 on a light background is only ~1.7:1 contrast,
     so in LIGHT mode it is used for bars, rules and accents only, never for
     text. In DARK mode it sits on deep teal and becomes readable, so it is
     allowed to carry text there.
  ------------------------------------------------------------------------ */
  --teal:        #076365;
  --teal-deep:   #04403F;
  --mint:        #00E2A7;

  /* --- Surfaces ------------------------------------------------------------
     Warm paper, cool ink. The creams give the teal something to sit against.
     Previously every colour on the page was the same hue.
  ------------------------------------------------------------------------ */
  --surface:      #FAF6F1;   /* page                                     */
  --surface-alt:  #F2EAE0;   /* deeper cream for alternating bands       */
  --surface-deep: #04403F;   /* Your dark green band          */
  --surface-input:#FFFDFA;   /* the only near-white on the site          */

  /* --- Text ---------------------------------------------------------------- */
  --ink:        #0E3435;
  --ink-strong: #04403F;
  --ink-soft:   #3F6564;
  --ink-invert: #E4F7F2;
  --ink-invert-soft: #9BD3CA;

  /* --- Lines & accents ------------------------------------------------------ */
  --line:        #E3D9CC;   /* warm hairline, was pale mint             */
  --accent:      #00E2A7;   /* the bar device */
  --accent-text: #076365;   /* readable accent for links on light */

  /* --- Interactive ---------------------------------------------------------- */
  --btn-bg:       #076365;
  --btn-fg:       #FFFDFA;
  --btn-bg-hover: #04403F;

  /* --- Typography ----------------------------------------------------------- */
  --font: "Alegreya Sans", "Candara", "Optima", "Segoe UI", system-ui, sans-serif;

  --w-light:  300;
  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   700;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.3125rem;
  --step-2:  clamp(1.5rem,  1.3rem + 0.9vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem);
  --step-4:  clamp(2.3rem,  1.7rem + 2.8vw, 3.4rem);
  --step-5:  clamp(2.6rem,  1.7rem + 4.2vw, 4.6rem);

  /* --- Spacing -------------------------------------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --band-y:   clamp(3.5rem, 8vw, 6.5rem);

  /* --- Layout --------------------------------------------------------------- */
  --container: 1140px;
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --measure:   64ch;

  /* --- Other ---------------------------------------------------------------- */
  --rule-h:     6px;
  --radius:     2px;
  --transition: 180ms ease;

  color-scheme: light;
}


/* ==========================================================================
   2. DARK THEME
   Applied when <html data-theme="dark">. The inline script in each page's
   <head> sets that from your saved choice, or from your system setting.
   ========================================================================== */

:root[data-theme="dark"] {

  /* Three clearly separated surface levels. Each step is roughly 2.5x the
     brightness of the one below, so bands read as distinct rather than
     blending into each other. All lean turquoise rather than grey-teal. */
  --surface:      #06302F;   /* base                                       */
  --surface-alt:  #114F4D;   /* lighter turquoise band                     */
  --surface-deep: #021D1E;   /* darkest band                               */
  --surface-input:#0D4241;

  --ink:        #D9F2EC;
  --ink-strong: #F5FFFC;
  --ink-soft:   #93C7BF;
  --ink-invert: #E4F7F2;
  --ink-invert-soft: #93C7BF;

  --line:        #1D6B68;
  --accent:      #00E2A7;
  --accent-text: #4DEFC2;   /* on dark, the mint is finally legible as text */

  --btn-bg:       #00E2A7;
  --btn-fg:       #042B2A;
  --btn-bg-hover: #7FF3D8;

  /* A properly visible gradient — starts at a mid turquoise, not near-black */
  --hero-from: #12615F;
  --hero-to:   #06302F;

  color-scheme: dark;
}


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: var(--w-normal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 200ms ease, color 200ms ease;
}

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

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-strong); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface-deep); color: var(--ink-invert);
  padding: var(--space-sm) var(--space-md); z-index: 200;
}
.skip-link:focus { left: 0; }

.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;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: var(--w-light);
  line-height: 1.14;
  color: var(--ink-strong);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: var(--w-medium); letter-spacing: 0; }
h4 { font-size: var(--step-0); font-weight: var(--w-bold); letter-spacing: 0; }

p { margin: 0 0 var(--space-sm); max-width: var(--measure); }

.lede {
  font-size: var(--step-1);
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 54ch;
}

.small { font-size: var(--step--1); color: var(--ink-soft); }

ul, ol { max-width: var(--measure); padding-left: 1.15em; }
li { margin-bottom: var(--space-xs); }

blockquote { margin: 0; }


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); background: var(--surface); }
.band--alt  { background: var(--surface-alt); }
.band--deep { background: var(--surface-deep); color: var(--ink-invert); }
.band--deep h1, .band--deep h2, .band--deep h3, .band--deep h4 { color: #FFFFFF; }
.band--deep .lede, .band--deep .small { color: var(--ink-invert-soft); }
.band--deep .accent { color: var(--mint); }
.band--deep a { color: var(--mint); }
.band--deep a:hover { color: #FFFFFF; }
.band--tight { padding-block: calc(var(--band-y) * 0.62); }

.hero + .band,
.page-hero + .band { padding-top: calc(var(--band-y) * 0.7); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- The mint bar. The site's repeating device, from your banner. -------- */
.rule {
  display: block;
  width: 3.5rem;
  height: var(--rule-h);
  background: var(--accent);
  border: 0;
  margin: 0 0 var(--space-md);
}
.rule--wide { width: 7rem; }

.section-head { margin-bottom: var(--space-lg); }
.section-head p { margin-bottom: 0; }


/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: var(--w-medium);
  line-height: 1;
  padding: 0.95em 1.6em;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg); }

.btn--ghost { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.btn--ghost:hover { background: var(--accent-text); color: var(--surface-alt); border-color: var(--accent-text); }
:root[data-theme="dark"] .btn--ghost:hover { color: #042B2A; }

.band--deep .btn { background: var(--mint); border-color: var(--mint); color: #042B2A; }
.band--deep .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: #042B2A; }
.band--deep .btn--ghost { background: transparent; color: var(--mint); border-color: var(--mint); }
.band--deep .btn--ghost:hover { background: var(--mint); color: #042B2A; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }


/* --- Header --------------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: 76px;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink-strong); flex-shrink: 0; }
.brand__mark { width: 42px; height: 42px; }
.brand__name { font-size: var(--step-1); font-weight: var(--w-light); white-space: nowrap; }

.header-tools { display: flex; align-items: center; gap: var(--space-md); }


/* --- Navigation ----------------------------------------------------------- */
.site-nav ul {
  display: flex; align-items: center; gap: var(--space-md);
  list-style: none; margin: 0; padding: 0; max-width: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  position: relative; display: block; padding: 0.4rem 0;
  color: var(--ink-strong); text-decoration: none; font-weight: var(--w-normal);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 4px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }


/* --- Theme toggle --------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-strong);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { border-color: var(--accent); background: var(--surface-alt); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none; font-family: inherit; font-size: var(--step-0);
  background: transparent; border: 2px solid var(--accent-text);
  border-radius: var(--radius); color: var(--accent-text);
  padding: 0.5em 0.9em; cursor: pointer;
}


/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--surface-deep);
  color: var(--ink-invert-soft);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--step--1);
}
.site-footer a { color: var(--ink-invert); text-decoration: none; }
.site-footer a:hover { color: var(--mint); text-decoration: underline; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-lg); padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.13);
}
.footer-grid h4 { color: #FFFFFF; margin-bottom: var(--space-xs); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--space-sm); }
.footer-brand img { width: 46px; height: 46px; }
.footer-brand span { color: #FFFFFF; font-size: var(--step-1); font-weight: var(--w-light); }
.footer-bottom {
  padding-top: var(--space-md);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
}

/* --- Form ------------------------------------------------------------------ */
.field { margin-bottom: var(--space-md); max-width: 34rem; }
.field label { display: block; margin-bottom: 0.35rem; font-weight: var(--w-medium); color: var(--ink-strong); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: var(--step-0);
  color: var(--ink); background: var(--surface-input);
  padding: 0.75em 0.85em;
  border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--transition);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 9rem; resize: vertical; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); margin: 0.3rem 0 0; }


/* --- Tag list (software you work with) ------------------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; max-width: none; }
.tags li {
  margin: 0;
  font-size: var(--step--1);
  padding: 0.4em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--surface-alt);
}
.band--deep .tags li { border-color: rgba(255,255,255,0.18); background: transparent; color: var(--ink-invert-soft); }


/* --- Note / disclaimer ------------------------------------------------------ */
.note {
  border-left: var(--rule-h) solid var(--accent);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }


/* ==========================================================================
   7. PAGE SECTIONS
   ========================================================================== */

.hero {
  background: var(--surface);
  padding-block: clamp(3.5rem, 9vw, 6.5rem) 0;
  overflow: hidden;
}
.hero h1 { max-width: 17ch; margin-bottom: var(--space-md); }
.hero__bar {
  height: var(--rule-h); background: var(--accent);
  width: calc(100% + 50vw);
  margin-bottom: var(--space-lg);
  transform-origin: left;
}
.hero__body { padding-bottom: clamp(2rem, 4vw, 3.25rem); }

.page-hero {
  background: var(--surface-alt);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero h1 { font-size: var(--step-4); max-width: 20ch; }


/* --- Figures row (the numbers) ---------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.figure__n {
  font-size: var(--step-3); font-weight: var(--w-light);
  color: var(--mint); line-height: 1; margin-bottom: 0.4rem; display: block;
}
.figure p { margin: 0; font-size: var(--step-0); max-width: 30ch; }


/* --- Service summary (home) — no boxes, just rule + text -------------------- */
.service .rule { width: 2.5rem; margin-bottom: var(--space-sm); }
.service h3 { margin-bottom: var(--space-xs); }
.service p { margin-bottom: 0; }


/* --- Service detail (services page) ---------------------------------------- */
.service-detail {
  display: grid; grid-template-columns: 1fr 1.7fr;
  gap: var(--space-lg); padding-block: var(--space-lg);
  border-top: 1px solid var(--line);
}
.service-detail:last-of-type { border-bottom: 1px solid var(--line); }
.service-detail h3 { font-size: var(--step-2); font-weight: var(--w-light); }
.service-detail h4 { margin-top: var(--space-sm); }


/* --- Testimonials ----------------------------------------------------------- */
.quote { border-top: var(--rule-h) solid var(--accent); padding-top: var(--space-md); }
.quote blockquote {
  font-size: var(--step-1); font-weight: var(--w-light);
  line-height: 1.5; color: var(--ink-strong); margin-bottom: var(--space-sm);
}
.quote figcaption { font-size: var(--step--1); color: var(--ink-soft); }
.quote figcaption strong { color: var(--ink-strong); font-weight: var(--w-medium); display: block; }
.band--deep .quote blockquote { color: #FFFFFF; }
.band--deep .quote figcaption { color: var(--ink-invert-soft); }
.band--deep .quote figcaption strong { color: #FFFFFF; }


/* --- Statement band --------------------------------------------------------- */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.statement .big {
  font-size: var(--step-2); font-weight: var(--w-light);
  line-height: 1.35; color: #FFFFFF; max-width: 22ch; margin: 0;
}


/* --- Contact ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); align-items: start; }
.contact-detail { margin-bottom: var(--space-md); }
.contact-detail h4 { margin-bottom: 0.15rem; }
.contact-detail p { margin-bottom: 0; }


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 940px) {
  .grid--4 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .split, .statement, .contact-grid, .service-detail { grid-template-columns: 1fr; gap: var(--space-md); }
  .figures { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-header__inner { flex-wrap: wrap; min-height: 68px; }
  .site-nav {
    display: none; flex-basis: 100%;
    border-top: 1px solid var(--line); padding-block: var(--space-sm);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 0.7rem 0; }
  .site-nav a::after { height: 3px; }
  .brand__name { font-size: var(--step-0); }
  .brand__mark { width: 36px; height: 36px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr; }
  .header-tools { gap: var(--space-sm); }
}


/* ==========================================================================
   9. MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero__bar { animation: draw-bar 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; }
}
@keyframes draw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

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

@media print {
  .site-header, .site-footer, .btn-row, .nav-toggle, .theme-toggle { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}
/* ==========================================================================
   TESTIMONIALS
  
   Each testimonial gets a full-width row: who said it in a left rail, the quote set to a
   comfortable measure on the right. Stacks to one column below 880px.

   This uses new class names, so the existing .quote rules are untouched.
   ========================================================================== */

.testimonials {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.25rem);
}

.testimonial {
  display: grid;
  gap: 1.1rem;
  margin: 0;                      /* figure carries a browser default margin */
}

@media (min-width: 880px) {
  .testimonial {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
  }
}

/* ---------- Who said it ---------- */

.testimonial__who .rule {
  margin-bottom: 0.85rem;
}

.testimonial__name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-strong);
}

.testimonial__role {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- The quote ---------- */

.testimonial blockquote {
  margin: 0;
  max-width: 64ch;                /* keeps the measure readable on wide screens */
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Kills any decorative quote glyph inherited from a base blockquote rule,
   since the quotes now carry their own typographic marks. */
.testimonial blockquote::before,
.testimonial blockquote::after {
  content: none;
}

.testimonial blockquote p {
  margin: 0 0 1em;
}

.testimonial blockquote p:last-child {
  margin-bottom: 0;
}

/* Emphasis inside a quote. 500 rather than 700 so the highlighted phrases
   lift off the page without shouting. If 500 isn't among your self-hosted
   Alegreya Sans weights, change this to 700 and drop the colour line. */
.testimonial blockquote b {
  font-weight: 500;
  color: var(--ink-strong);
}

/* Optional: hangs the opening quote mark into the left margin so the text
   edge lines up cleanly. Uncomment to try it.

.testimonial blockquote p:first-child {
  text-indent: -0.42em;
}
*/
/* ---------- Icons for contact page ---------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.2em;
}

/* The LinkedIn glyph has no stroke, so it reads lighter than the outlined
   icons at the same size. A touch smaller evens them out. */
.icon--solid {
  width: 1.15em;
  height: 1.15em;
}

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.55;
}

.icon-list .icon {
  color: var(--accent-text);
  margin-top: 0.15em;
}

.contact-detail h4 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.contact-detail h4 .icon {
  color: var(--accent-text);
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact .icon {
  color: var(--accent);
}

/* ---------- Software word cloud (home page) ---------- */
.cloud {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  line-height: 1.2;
}
.cloud li { font-size: 1.05rem; font-weight: 400; }
.cloud .sm { font-size: 0.9rem; }
.cloud .lg { font-size: 1.4rem; font-weight: 500; }
.cloud .xl {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 700;
}

/* Mint bar: always on key (xl) words, plus any word that's a link */
.cloud .xl,
.cloud li:has(a) {
  position: relative;
  padding-bottom: 0.35rem;
}
.cloud .xl::after,
.cloud li:has(a)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(2rem, 100%);
  height: 3px;
  background: var(--mint, #00E2A7);
  transition: width 0.2s ease;
}

/* Links keep the cloud's colours; bar stretches on hover or keyboard focus */
.cloud a { color: inherit; text-decoration: none; }
.cloud li:has(a:hover)::after,
.cloud li:has(a:focus-visible)::after { width: 100%; }
.cloud {
  list-style: none;
  max-width: none;   /* opts out of the site-wide list width cap */
  margin: 2rem 0 0;
}