/* ==========================================================================
   service.css — the three service pages only:
     /online-maths-tutoring/  /school-maths-tutoring/  /maths-olympiad-coaching/
   A 1:1 port of the client's "Heyoku Service Pages" design, which builds on
   the homepage's Heyoku v0 token set. Its class names (.lp-hero, .lp-quote,
   .lp-cta …) overlap landing.css but style differently, so these pages load
   this file instead of landing.css or main.css. Fonts are the same
   self-hosted variable files the homepage uses — no Google Fonts request.
   ========================================================================== */

/* --- Webfonts: the design's exact variable fonts, latin + latin-ext
       (latin-ext carries the ₹ sign). Self-hosted, no third-party request. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/varela-round-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/varela-round-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens lifted from heyoku.ai ─────────────────────────── */
:root{
  --accent-3:#fff2c3; --accent-4:#ffe9a0; --accent-5:#ffde7f; --accent-7:#e9c16e;
  --accent-9:#ffca2f; --accent-10:#fac137; --accent-11:#9b6f00; --accent-contrast:#2b2009;
  --gray-1:#fdfdfc; --gray-2:#fbf9f6; --gray-3:#f3f0e9; --gray-4:#ece7dd; --gray-5:#e5ded0;
  --gray-6:#ddd5c1; --gray-7:#d3c7ad; --gray-8:#c2b28e; --gray-11:#6f6449;
  --gray-surface:#faf8f4cc;
  --ink:#2a230e; --ink-cta:#060501; --ink-body:#443c1f; --paper-cta-text:#efeee9;
  --paper-warm:#fefcf9; --paper-border:#6e594f;
  --font-display:'Bricolage Grotesque','Nunito',system-ui,sans-serif;
  --font-interface:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-numeric:'Varela Round','Nunito',system-ui,sans-serif;
  --radius-card:10px; --radius-frame:24px; --radius-pill:24px;
  --text-3:14px; --text-4:16px; --text-5:18px;
  --lp-max:1200px; --lp-gutter:clamp(16px,4vw,32px);
  --lp-section-pad:clamp(48px,6vw,88px); --lp-split-gap:clamp(32px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gray-2);color:var(--ink);
     font-family:var(--font-interface);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-11);outline-offset:3px;border-radius:4px}
.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding-inline:var(--lp-gutter)}
.lp-narrow{max-width:760px}

/* ── buttons ──────────────────────────────────────────────── */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-interface);font-weight:800;line-height:1.2;
  border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;transition:background 120ms,transform 80ms}
.lp-btn:active{transform:translateY(1px)}
.lp-btn svg{flex:0 0 auto}
.lp-btn--primary,.lp-btn--primary:hover{color:var(--accent-contrast)}
.lp-btn--primary{background:var(--accent-9)}
.lp-btn--primary:hover{background:var(--accent-10)}
.lp-btn--ink,.lp-btn--ink:hover{color:var(--paper-cta-text)}
.lp-btn--ink{background:var(--ink-cta)}
.lp-btn--ink:hover{background:var(--ink)}
.lp-btn--sm{padding:6px 14px;font-size:var(--text-3);min-height:32px}
.lp-btn--md{padding:10px 20px;font-size:var(--text-4);min-height:44px}
.lp-btn--lg{padding:14px 28px;font-size:var(--text-5);min-height:52px}
.lp-btn--full{width:100%}

/* ── header ───────────────────────────────────────────────── */
.lp-header{position:sticky;top:0;z-index:10;background:var(--gray-surface);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--gray-5)}
.lp-header__inner{max-width:var(--lp-max);margin:0 auto;padding:14px var(--lp-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lp-logo,.lp-logo:hover{color:var(--ink);text-decoration:none}
.lp-logo{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.5px}
.lp-tagline{font-weight:800;font-size:12px;letter-spacing:1px;color:var(--gray-11)}
.lp-nav-label--narrow{display:none}

/* ── hero ─────────────────────────────────────────────────── */
.lp-hero{padding-block:clamp(36px,5vw,64px) clamp(32px,4vw,52px)}
.lp-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);align-items:center}
.lp-hero__copy{min-width:0}
.lp-hero__art{min-width:0;color:var(--ink)}
.lp-hero__art svg{width:100%;height:auto;display:block;max-width:470px;margin-inline:auto}
.lp-eyebrow{margin:0 0 18px;font-weight:800;font-size:12px;letter-spacing:1px;color:var(--accent-11)}
.lp-hero h1{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(38px,6.4vw,74px);line-height:.98;letter-spacing:-1.5px;
  text-wrap:balance;max-width:16ch}
.lp-hook{margin:20px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(21px,2.6vw,30px);line-height:1.15;letter-spacing:-.4px;
  text-wrap:balance;max-width:24ch}
.lp-lede{margin:18px 0 0;font-size:19px;line-height:1.55;color:var(--ink-body);max-width:56ch}
.lp-hero .lp-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-note{margin:14px 0 0;font-size:15px;color:var(--gray-11);max-width:52ch;line-height:1.5}

/* ── article sections ─────────────────────────────────────── */
.lp-sec{padding-block:var(--lp-section-pad);border-top:1px solid var(--gray-5)}
.lp-sec > h2{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(27px,3.6vw,42px);line-height:1.04;letter-spacing:-1px;
  text-wrap:balance;max-width:20ch}
.lp-sec > .lp-standfirst{margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--ink-body);max-width:60ch}
.lp-prose{margin-top:24px;max-width:64ch;font-size:17.5px;line-height:1.68;color:var(--ink-body)}
.lp-prose p{margin:0 0 20px}
.lp-prose p:last-child{margin-bottom:0}
.lp-prose h3{margin:34px 0 10px;font-family:var(--font-display);font-weight:800;
  font-size:22px;line-height:1.2;letter-spacing:-.4px;color:var(--ink)}
.lp-prose h3:first-child{margin-top:0}
.lp-prose h3 .tag{display:block;font-family:var(--font-interface);font-weight:800;
  font-size:11px;letter-spacing:1px;color:var(--accent-11);margin-bottom:5px}
.lp-prose strong{color:var(--ink);font-weight:700}
.lp-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-9);
  text-underline-offset:3px;text-decoration-thickness:2px}
.lp-prose a:hover{color:var(--accent-11)}
mark{background:linear-gradient(transparent 56%, var(--accent-5) 56%);color:inherit;padding:0 1px}
.lp-pull{margin:26px 0;padding:4px 0 4px 20px;border-left:4px solid var(--accent-9);
  font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1.25;
  letter-spacing:-.3px;color:var(--ink);max-width:48ch}

/* ── steps ────────────────────────────────────────────────── */
.lp-steps{margin-top:30px;display:grid;gap:0}
.lp-step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--gray-4);align-items:start}
.lp-step:last-child{border-bottom:0}
.lp-step__num{width:32px;height:32px;border-radius:50%;background:var(--accent-9);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-numeric);
  font-size:15px;color:var(--accent-contrast)}
.lp-step h3{margin:3px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:20px;line-height:1.2;letter-spacing:-.3px}
.lp-step p{margin:8px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-body);max-width:62ch}

/* ── quote ────────────────────────────────────────────────── */
.lp-quote__lead{margin:34px 0 -16px;font-weight:800;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent-11);max-width:640px}
.lp-quote{margin-top:30px;max-width:640px;background:var(--paper-warm);
  border:1.5px solid var(--gray-6);border-radius:var(--radius-frame);padding:26px 28px}
.lp-quote p{margin:0;font-size:17.5px;line-height:1.6;color:var(--ink)}
.lp-quote cite{display:block;margin-top:14px;font-style:normal;font-weight:800;
  font-size:13px;letter-spacing:.6px;color:var(--gray-11)}

/* ── figures ──────────────────────────────────────────────── */
.lp-figpoint{display:grid;grid-template-columns:112px 1fr;gap:24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--gray-4)}
.lp-figpoint:last-of-type{border-bottom:0}
.lp-figpoint__fig{color:var(--ink)}
.lp-figpoint__fig svg{width:100%;height:auto;display:block}
.lp-figpoint__body{min-width:0;font-size:17px;line-height:1.65;color:var(--ink-body);max-width:60ch}
.lp-figpoint__body p{margin:0 0 16px}
.lp-figpoint__body p:last-child{margin:0}
.lp-figpoint__body strong{color:var(--ink);font-weight:700}
.lp-figpoint__body a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent-9);text-underline-offset:3px;text-decoration-thickness:2px}
.lp-figure{margin:28px 0 0;max-width:600px;background:var(--paper-warm);
  border:1.5px solid var(--gray-6);border-radius:var(--radius-frame);padding:24px 26px;color:var(--ink)}
.lp-figure svg{width:100%;height:auto;display:block}
.lp-figure figcaption{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--gray-11)}
.fill-a{fill:var(--accent-9)}
@media (max-width:640px){
  .lp-figpoint{grid-template-columns:76px 1fr;gap:16px}
}

/* ── callout ──────────────────────────────────────────────── */
.lp-callout{margin-top:26px;display:flex;gap:16px;align-items:flex-start;max-width:540px;
  background:var(--paper-warm);border:1.5px solid var(--paper-border);
  border-radius:var(--radius-frame);padding:20px 22px}
.lp-callout__icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--accent-9);
  display:flex;align-items:center;justify-content:center}
.lp-callout__icon svg{width:21px;height:21px;fill:var(--accent-contrast)}
.lp-callout__text{display:flex;flex-direction:column;gap:5px;min-width:0}
.lp-callout__title{font-family:var(--font-display);font-weight:800;font-size:19px;
  line-height:1.2;letter-spacing:-.3px;color:var(--ink)}
.lp-callout__desc{font-size:15.5px;line-height:1.5;color:var(--gray-11)}

/* ── faq ──────────────────────────────────────────────────── */
.lp-faq{margin-top:26px;border-top:1px solid var(--gray-5);max-width:820px}
.lp-faq details{border-bottom:1px solid var(--gray-4)}
.lp-faq summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.3;
  letter-spacing:-.3px;color:var(--ink)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:24px;
  font-weight:400;line-height:1;color:var(--accent-11)}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq summary:hover{color:var(--accent-11)}
.lp-faq .lp-ans{padding:0 44px 22px 0;font-size:16.5px;line-height:1.65;color:var(--ink-body);max-width:66ch}
.lp-faq .lp-ans p{margin:0 0 12px}
.lp-faq .lp-ans p:last-child{margin:0}
.lp-faq .lp-ans a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-9);
  text-underline-offset:3px;text-decoration-thickness:2px}

/* ── closing CTA (matches the homepage block) ─────────────── */
.lp-cta{background:var(--accent-9);color:var(--accent-contrast)}
.lp-cta__inner{max-width:var(--lp-max);margin:0 auto;padding:clamp(56px,8vw,104px) var(--lp-gutter);
  display:flex;flex-wrap:wrap;gap:var(--lp-split-gap);align-items:center;justify-content:space-between}
.lp-cta__copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:16px}
.lp-cta__title{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(36px,6vw,68px);line-height:.98;letter-spacing:-1.5px;text-wrap:balance}
.lp-cta__sub{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(20px,2.4vw,26px);line-height:1.2}
.lp-cta__text{margin:0;font-size:19px;line-height:1.5;max-width:520px}
.lp-trial{flex:1 1 360px;min-width:0;max-width:440px;display:flex;flex-direction:column;gap:20px;
  padding:28px;background:var(--paper-warm);border:1.5px solid var(--paper-border);
  border-radius:var(--radius-frame);color:var(--ink)}
.lp-trial__eyebrow{font-weight:800;font-size:12px;letter-spacing:1px;color:var(--accent-11)}
.lp-trial__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.lp-trial__step{display:flex;gap:14px;align-items:flex-start}
.lp-trial__num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--accent-9);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-numeric);font-size:16px}
.lp-trial__text{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.lp-trial__title{font-weight:800;font-size:17px}
.lp-trial__desc{font-size:14px;color:var(--gray-11)}

/* ── helpful reads ────────────────────────────────────────── */
.lp-reads{background:var(--gray-2)}
.lp-reads__inner{max-width:var(--lp-max);margin:0 auto;padding:clamp(44px,5vw,72px) var(--lp-gutter)}
.lp-reads h2{margin:0 0 6px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.8px}
.lp-read{display:grid;grid-template-columns:1fr auto;gap:10px 24px;padding:18px 0;
  border-bottom:1px solid var(--gray-4);align-items:baseline}
.lp-read:first-of-type{border-top:1px solid var(--gray-5);margin-top:22px}
.lp-read h3{margin:0;font-family:var(--font-display);font-weight:800;font-size:18.5px;
  line-height:1.25;letter-spacing:-.3px}
.lp-read h3 a{text-decoration:none}
.lp-read h3 a:hover{color:var(--accent-11)}
.lp-read p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--gray-11);max-width:64ch}
.lp-read .mins{font-weight:800;font-size:12px;letter-spacing:.8px;color:var(--gray-11);white-space:nowrap}

/* ── footer ───────────────────────────────────────────────── */
.lp-footer{background:var(--gray-2);border-top:1px solid var(--gray-5)}
.lp-footer__inner{max-width:var(--lp-max);margin:0 auto;padding:32px var(--lp-gutter);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.lp-footer__brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lp-footer__logo{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px}
.lp-footer__tagline{font-size:14px;color:var(--gray-11)}
.lp-footer__nav{display:flex;gap:28px;flex-wrap:wrap;font-weight:700;font-size:16px}
.lp-footer__nav a{text-decoration:none}
.lp-footer__nav a:hover{color:var(--accent-11)}
/* social profile icons - same three URLs as the Organization's sameAs */
.lp-footer__social{display:flex;gap:16px;align-items:center}
.lp-footer__social a{display:inline-flex;color:var(--gray-11)}
.lp-footer__social a:hover{color:var(--accent-11)}
.lp-footer__social svg{width:20px;height:20px}

/* --- skip link (same as the homepage's) ------------------------------ */
.lp-skip { position: absolute; left: -9999px; top: 0; }
.lp-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--gray-1); padding: 8px 12px; border-radius: var(--radius-card); }

/* --- inline-SVG colour hooks. The design wrote these as hex attributes;
       as classes they resolve to tokens (CSS beats presentation attrs). */
.svg-accent-stroke{stroke:var(--accent-11)}
.svg-accent-fill{fill:var(--accent-11)}
.svg-contrast-stroke{stroke:var(--accent-contrast)}
.svg-accent-text{fill:var(--accent-11)}

/* --- "coming soon" helpful read: a post not written yet, so no link --- */
.lp-read--soon h3{color:var(--gray-11)}

@media (max-width:880px){
  .lp-hero__grid{grid-template-columns:1fr;gap:34px}
  .lp-hero__art svg{max-width:360px}
}
@media (max-width:819px){
  .lp-tagline{display:none}
  .lp-btn--nav{padding:6px 14px;font-size:var(--text-3);min-height:32px}
  .lp-nav-label--wide{display:none}
  .lp-nav-label--narrow{display:inline}
  .lp-step{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Reading column: the article sections and "Helpful reads" sit in the
       same centred column as a /blog/<slug>/ post (main.css .wrap--text:
       38rem, 1.5x that from 900px, 24px gutter), and the text inside fills
       it rather than stopping at the design's shorter ch measures. The
       hero, closing CTA, header and footer keep the design's 1200px width. */
:root { --lp-text: 38rem; --lp-text-gutter: 24px; }
@media (min-width: 900px) { :root { --lp-text: calc(38rem * 1.5); } }
.lp-sec > .lp-wrap,
.lp-reads__inner { max-width: var(--lp-text); padding-inline: var(--lp-text-gutter); }
.lp-prose, .lp-standfirst, .lp-pull, .lp-step p, .lp-quote__lead, .lp-quote,
.lp-figpoint__body, .lp-figure, .lp-faq, .lp-faq .lp-ans, .lp-read p { max-width: none; }

/* --- Reading type: matches a /blog/<slug>/ post (main.css .prose) — same
       ink, weight, fluid size and line height, and the same article h2/h3
       scale. The design's lighter #443c1f body ink at weight 400 read
       noticeably duller than the blog, and its `.lp-sec > h2` rule never
       matched the markup (the h2 sits inside .lp-wrap), so section headings
       fell back to plain Nunito. */
:root {
  --lp-t-prose: clamp(1.0625rem, 1.0rem + 0.25vw, 1.1875rem);   /* 17 → 19px */
  --lp-lh-prose: 1.65;
  --lp-t-h2: clamp(1.375rem, 1.2rem + 1.0vw, 1.875rem);         /* 22 → 30px */
  --lp-t-h3: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);        /* 18 → 22px */
}
body { font-weight: 500; }
.lp-prose, .lp-standfirst, .lp-figpoint__body, .lp-step p, .lp-faq .lp-ans, .lp-quote p, .lp-lede {
  color: var(--ink);
  font-size: var(--lp-t-prose);
  line-height: var(--lp-lh-prose);
  font-weight: 500;
}
.lp-prose strong, .lp-figpoint__body strong, .lp-step p strong, .lp-faq .lp-ans strong { font-weight: 700; }
.lp-sec .lp-wrap > h2, .lp-reads h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--lp-t-h2);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}
.lp-standfirst { margin: 16px 0 0; }
.lp-prose h3, .lp-step h3 { font-size: var(--lp-t-h3); letter-spacing: 0; }
.lp-faq summary { font-size: var(--lp-t-h3); letter-spacing: 0; }

/* --- Highlighted phrases (<mark>). The design's version only coloured the
       lower 44% of the line, so it read as a thick, offset underline rather
       than a highlight. This covers the full x-height-to-descender band of
       the text, with a little side padding and rounded ends, and
       box-decoration-break: clone gives every wrapped line its own padded,
       rounded segment instead of a hard cut at the line break. */
mark {
  background: var(--accent-4);
  color: inherit;
  padding: 0.08em 0.28em;
  margin: 0 -0.08em;
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Visible breadcrumb (mirrors the BreadcrumbList schema exactly:
       Home › this page). Sits above the hero, aligned to its 1200px wrap. */
.breadcrumb ol { list-style: none; margin: 0 auto; padding-top: 20px; padding-bottom: 0;
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; color: var(--gray-11); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--gray-8); }
.breadcrumb a { color: var(--gray-11); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-11); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb + .lp-hero { padding-top: clamp(20px, 3vw, 40px); }