/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/tokens/fonts.css */
/* font-latin.woff2: the shipped faces are Latin subsets, cut 2026-08-29 from
   the 507-codepoint originals which carried Greek, Cyrillic and more that an
   en-GB site never renders. 52.1 -> 35.0 KB and 52.3 -> 35.6 KB, and both are
   preloaded on the critical path (IdealistSansLight draws the hero h1, which
   is the LCP element). Verified: every character appearing anywhere in the
   served pages is present, all 407 advance widths are unchanged, and the em,
   ascender and descender match — so nothing reflows. The kept range covers
   Latin-1, Latin Ext-A/B, punctuation, superscripts, currency, arrows and
   maths, so European names typed into the enquiry form still render.
   Regenerate from font.woff2 (kept alongside) if a new script is ever needed. */
/* Idealist Sans family — licensed via MyFonts (Glen Jan Foundry). */
@font-face{font-family:'IdealistSans';src:url('/_ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/assets/fonts/IdealistSans/font-latin.woff2') format('woff2'),url('/_ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/assets/fonts/IdealistSans/font.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IdealistSansLight';src:url('/_ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/assets/fonts/IdealistSansLight/font-latin.woff2') format('woff2'),url('/_ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/assets/fonts/IdealistSansLight/font.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}

/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/tokens/colors.css */
:root{
--teal-50:#d1ddd9;--teal-100:#bfd1cd;--teal-200:#a2beba;--teal-300:#8dafac;--teal-400:#7FA6A3;--teal-500:#59817e;--teal-600:#436c69;--teal-700:#2d5754;--teal-800:#1d4745;--teal-900:#123C3A;--teal-950:#0c2726;
--yellow-50:#fdf8e7;--yellow-100:#fbf0c7;--yellow-200:#f8e59e;--yellow-300:#f6db7b;--yellow-400:#F4D35E;--yellow-500:#dab54b;--yellow-600:#bf9738;--yellow-700:#a87c27;
--neutral-50:#F4F5F0;--neutral-100:#e3e4e0;--neutral-200:#cdcfcb;--neutral-300:#afb2ae;--neutral-400:#8c918e;--neutral-500:#6e7371;--neutral-600:#545a58;--neutral-700:#3f4544;--neutral-800:#29312f;--neutral-900:#1C2423;--neutral-950:#0f1413;
--white:#ffffff;
--success-100:#e4eee9;--success-500:#4C8B6E;--success-700:#35614d;
--error-100:#f6e5e2;--error-500:#C1503F;--error-700:#87382c;
--warning-100:var(--yellow-100);--warning-500:var(--yellow-600);--warning-700:var(--yellow-700);
--info-100:var(--teal-50);--info-500:var(--teal-500);--info-700:var(--teal-700);

--brand-primary:var(--teal-900);
--brand-primary-hover:var(--teal-800);
--brand-primary-press:var(--teal-950);
--coral-400:#ff9c87;--coral-500:#FF8066;--coral-600:#e8624a;--coral-700:#a83c28;/* darkened from #c94e38 2026-08-28: Badge tone="accent" applies it as text
   over --surface-accent-tint, where #c94e38 reached only 3.9:1 (AA needs
   4.5:1). #a83c28 gives 5.4:1 there. Also --brand-accent-press, where a
   deeper press state is correct. Used by the marketing pages and the
   dashboard, so it lives here rather than in one page stylesheet. */

--brand-accent:var(--coral-500);
--brand-accent-hover:var(--coral-600);
--brand-accent-press:var(--coral-700);
--brand-secondary:var(--teal-400);

--surface-page:var(--neutral-50);
--surface-card:var(--white);
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--teal-900);
--surface-inverse-raised:var(--teal-800);
--surface-accent-tint:#ffe9e3;
--surface-brand-tint:var(--teal-50);

--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-muted:var(--neutral-400);
--text-on-brand:var(--neutral-50);
--text-on-accent:var(--teal-900);
--text-link:var(--teal-700);
--text-link-hover:var(--teal-900);

--border-default:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-on-inverse:rgba(244,245,240,0.22);
--focus-ring:var(--teal-500);
}

/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/tokens/typography.css */
:root{
--font-display:'IdealistSansLight','Newsreader',ui-serif,Georgia,serif;
--font-display-fallback:'Newsreader',ui-serif,Georgia,serif;
--font-body:'IdealistSans','Manrope',ui-sans-serif,system-ui,sans-serif;
--font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:21px;--text-xl:26px;--text-2xl:32px;--text-3xl:40px;--text-4xl:52px;--text-5xl:68px;

--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.65;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

--tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-wider:0.09em;
}

/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/tokens/spacing.css */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-pill:999px;

--shadow-sm:0 1px 2px rgba(18,60,58,0.08);
--shadow-md:0 4px 10px rgba(18,60,58,0.10),0 1px 2px rgba(18,60,58,0.06);
--shadow-lg:0 12px 28px rgba(18,60,58,0.14),0 2px 6px rgba(18,60,58,0.08);
--shadow-focus:0 0 0 3px rgba(89,129,126,0.35);

--container-max:1200px;
--ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
--ease-out:cubic-bezier(0,0,.2,1);/* @kind other */
--duration-fast:120ms;/* @kind other */--duration-base:200ms;/* @kind other */--duration-slow:320ms;/* @kind other */
}

/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/base.css */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-color:var(--teal-300);text-underline-offset:2px}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--yellow-300);color:var(--teal-950)}
.notebook-rule{background-image:repeating-linear-gradient(to bottom,transparent,transparent 27px,var(--border-default) 27px,var(--border-default) 28px)}
.grid-paper{background-image:linear-gradient(var(--border-default) 1px,transparent 1px),linear-gradient(90deg,var(--border-default) 1px,transparent 1px);background-size:24px 24px}

/* _ds/volare-tutors-design-system-31ce05f4-bcb5-447b-872a-1c2069a008bf/styles.css */
/* Google Fonts  self-host the file if the faces are ever
   actually needed. */

/* landing-v3.css */
/* ── Accessible accent inks (WCAG AA) ────────────────────────────────────
   --brand-accent (#FF8066) is a coral tuned for BACKGROUNDS — accent
   buttons paint it behind dark teal text. As TEXT on a pale surface it
   only reaches 2.5:1, well under the 4.5:1 AA needs, so small coral text
   got its own darker ink. Use --accent-ink for coral text on light
   surfaces and --accent-ink-on-dark for coral text on the inverse ones.
   Do not swap either back to --brand-accent. The accent Badge's own
   contrast fix lives in the design system's tokens/colors.css, because the
   dashboard renders that Badge too. */
:root{
  --accent-ink:#a83c28;          /* 6.3:1 on white, 4.5:1 on the teal tint */
  --accent-ink-on-dark:#ff9c87;  /* 5.1:1 on --surface-inverse-raised */
}

html{scroll-behavior:smooth}
section,header,footer{scroll-margin-top:76px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.wrap{max-width:var(--container-max,1200px);margin:0 auto;padding:0 var(--space-6)}

/* ── Keyboard focus ──────────────────────────────────────────────────────
   Nothing in the stylesheets or the design system defined a focus ring, so
   keyboard users were relying on the browser default, which is close to
   invisible on dark teal. :focus-visible keeps it off for mouse clicks.
   Coral reads against both the pale page and the inverse surfaces. */
:focus-visible{outline:3px solid var(--coral-500);outline-offset:3px;border-radius:2px}
.section-dark :focus-visible,.footer :focus-visible,.nav :focus-visible,.hero :focus-visible{outline-color:var(--coral-500)}

/* Skip link: first thing in the tab order, invisible until focused. */
.skip-link{position:absolute;left:var(--space-6);top:-100px;z-index:100;background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:12px 20px;font-family:var(--font-body);font-size:var(--text-base);font-weight:600;text-decoration:none;transition:top var(--duration-fast) var(--ease-out)}
.skip-link:focus{top:var(--space-4)}
.eyebrow{font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--teal-700);font-weight:600}
.eyebrow.on-dark{color:var(--teal-300)}
h1,h2,h3{text-wrap:pretty}
.h-display{font-family:var(--font-display);font-size:var(--text-5xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:300}
.h-section{font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--leading-snug);font-weight:300}
.lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:56ch}
.lede.on-dark{color:var(--teal-100)}
.section{padding:var(--space-20) 0}
.section-dark{background:var(--surface-inverse);color:var(--text-on-brand)}
.section-tint{background:var(--surface-brand-tint)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.grid{display:grid;gap:var(--space-5)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.stack{display:flex;flex-direction:column}
.nav{position:sticky;top:0;z-index:20;background:var(--surface-inverse);border-bottom:1px solid var(--border-on-inverse)}
.nav-inner{display:flex;align-items:center;gap:var(--space-6);height:68px}
/* font-size on .wordmark IS the symbol height (set inline from JSX); every
   other measurement here is em, so the mark scales as one piece. The .25em
   padding is the clear space the pack asks for (a quarter of symbol height);
   the negative margin keeps it from pushing neighbours around. */
.wordmark{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;padding:.25em;margin:-.25em;flex:none}
.wordmark:visited,.wordmark:active,.wordmark:hover{text-decoration:none}
/* aspect-ratio belt-and-braces: width:auto on an SVG needs the file's own
   width/height to resolve, and collapses to zero without them. */
.wordmark img{height:1em;width:auto;aspect-ratio:1/1;display:block;flex:none}
/* 0.86em matches the wordmark-to-symbol ratio in the pack's own lockup. */
.wordmark-text{font-family:var(--font-display);font-size:.86em;font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-on-brand);line-height:1;white-space:nowrap}
/* Narrow screens: quills only. The pack allows the symbol alone down to
   16px, so this stays compliant where the full mark wouldn't fit. */
@media (max-width:420px){.wordmark-text{display:none}}
/* .nav-links carries the margin-left:auto that pushes the actions right, so
   when it's hidden below 980px the actions need to take that job over. */
@media (max-width:980px){.nav-actions{margin-left:auto}}
.nav-links{display:flex;gap:var(--space-5);margin-left:auto;align-items:center}
.nav-links a{color:var(--teal-100);text-decoration:none;font-size:var(--text-sm);font-weight:500}
.nav-links a:hover{color:var(--white);text-decoration:underline;text-decoration-color:var(--brand-accent);text-underline-offset:4px}
.nav-actions{display:flex;align-items:center;gap:var(--space-4)}
.btn-on-dark{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--text-on-brand);background:transparent;border:1px solid var(--border-on-inverse);border-radius:var(--radius-md);padding:14px 22px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--duration-base) var(--ease-out)}
.btn-on-dark:hover{background:var(--surface-inverse-raised);color:var(--white);text-decoration:none}
.btn-on-dark.sm{font-size:var(--text-sm);padding:8px 14px}
/* Anchor styled as the design system's secondary Button, for real links
   between pages — the DS Button renders a <button> and can't navigate. */
.btn-secondary{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--brand-primary);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:13px 22px;text-decoration:none;white-space:nowrap;transition:background var(--duration-base) var(--ease-out)}
.btn-secondary:hover{background:var(--surface-brand-tint);text-decoration:none}
.hero{background:var(--surface-inverse);color:var(--text-on-brand);position:relative;overflow:hidden}
.hero .rules{position:absolute;inset:0;opacity:0;background-image:repeating-linear-gradient(to bottom,transparent,transparent 27px,var(--teal-300) 27px,var(--teal-300) 28px);pointer-events:none;animation:rulesIn 1.2s var(--ease-out) .15s forwards}
@keyframes rulesIn{from{opacity:0;transform:translateY(-14px)}to{opacity:.16;transform:none}}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .8fr;gap:var(--space-12);padding:var(--space-20) var(--space-6) var(--space-16)}
.hero-margin{position:absolute;top:0;bottom:0;left:max(var(--space-6),calc((100vw - var(--container-max,1200px))/2 + var(--space-6) - 22px));width:1px;background:var(--coral-500);opacity:.55;transform-origin:top;animation:drawDown 1s var(--ease-out) .25s both}
@keyframes drawDown{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rotator{display:inline-grid;vertical-align:top}
.rotator-line{position:relative;color:var(--brand-accent);white-space:nowrap}
.rotator-line.enter{animation:wordIn .5s var(--ease-out) both}
.rotator-line.exit{animation:wordOut .38s var(--ease-out) both;position:absolute;inset:0}
@keyframes wordIn{from{opacity:0;transform:translateY(0.35em) rotate(-1.2deg)}to{opacity:1;transform:none}}
@keyframes wordOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-0.35em) rotate(1deg)}}
.underline-draw{display:block;height:2px;background:var(--brand-accent);transform-origin:left;animation:drawRight .7s var(--ease-out) .5s both;opacity:.75}
@keyframes drawRight{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ticker{position:relative;border-top:1px solid var(--border-on-inverse);border-bottom:1px solid var(--border-on-inverse);background:var(--surface-inverse);overflow:hidden;padding:var(--space-4) 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:var(--space-8);width:max-content;animation:ticker 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:var(--space-8);font-family:var(--font-display);font-size:var(--text-lg);font-weight:300;letter-spacing:var(--tracking-tight);color:var(--teal-100);white-space:nowrap}
.ticker-item i{font-style:normal;color:var(--brand-accent)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--brand-accent);z-index:40;transform-origin:left;transition:transform 90ms linear;width:100%}
/* Scoped to .js (set by an inline script in <head>) so the fade-in only
   applies when JavaScript is running. Without it the prerendered HTML would
   sit at opacity:0 forever for anyone whose JS fails or is switched off. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.hover-lift{transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.hover-lift:hover{transform:translateY(-4px)}
.hover-lift:hover .rule-grow{transform:scaleX(1)}
.rule-grow{display:block;height:2px;background:var(--brand-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-base) var(--ease-out)}
.faq-a{animation:faqIn .3s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
.credit-line{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--teal-200);border-top:1px solid var(--border-on-inverse);padding-top:var(--space-4)}
.callout{border:1px solid var(--border-on-inverse);border-radius:var(--radius-lg);padding:var(--space-6);background:var(--surface-inverse-raised)}
.stat-value{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:300;line-height:1;color:var(--brand-accent)}
.stat-label{font-size:var(--text-sm);color:var(--teal-100);line-height:var(--leading-normal)}
.step-no{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300;color:var(--brand-accent)}
.faq-item{border-top:1px solid var(--border-default)}
.faq-q{width:100%;background:none;border:0;padding:var(--space-5) 0;display:flex;gap:var(--space-4);align-items:baseline;justify-content:space-between;cursor:pointer;font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--text-primary);text-align:left}
.faq-a{padding:0 0 var(--space-5);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:70ch}
.sign{color:var(--accent-ink-on-dark);font-size:var(--text-lg);line-height:1}
.footer{background:var(--surface-inverse);color:var(--teal-100);padding:var(--space-16) 0 var(--space-10)}
.footer h3{font-size:var(--text-sm);color:var(--white);letter-spacing:var(--tracking-wide);text-transform:uppercase;font-family:var(--font-body);font-weight:600}
.footer a{color:var(--teal-100);text-decoration:none;font-size:var(--text-sm)}
.footer a:hover{color:var(--white);text-decoration:underline}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:var(--space-10)}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid var(--border-on-inverse);display:flex;justify-content:space-between;gap:var(--space-5);font-size:var(--text-xs);color:var(--teal-300);flex-wrap:wrap}
.phone-link{font-family:var(--font-display);font-size:var(--text-xl);color:var(--white);text-decoration:none;letter-spacing:var(--tracking-tight)}
.phone-link:hover{color:var(--brand-accent)}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;padding:var(--space-16) var(--space-6)}.hero-margin{display:none}.rotator-line{white-space:normal}.g-4{grid-template-columns:repeat(2,1fr)}.g-3,.g-2{grid-template-columns:1fr}.footer-cols{grid-template-columns:1fr 1fr}.nav-links{display:none}.h-display{font-size:var(--text-4xl)}}
/* Phone footer: the consult card's nowrap button gives it a ~253px min-content
   width, which pushed the two 1fr columns past a 375px viewport. Brand and card
   take the full row; the two short link lists stay side by side. */
@media(max-width:560px){.footer-cols{gap:var(--space-8)}.footer-cols>*{min-width:0}.footer-cols>:first-child,.footer-cols>:last-child{grid-column:1/-1}}

/* ── Consultation booking (Enquire in landing-page-v3.jsx) ─────────────── */
/* Matches the DS Input, which the design system has no textarea for. */
.enq-textarea{padding:10px 12px;font-size:var(--text-base);font-family:var(--font-body);color:var(--text-primary);line-height:var(--leading-relaxed);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-card);outline:none;resize:vertical;min-height:84px;transition:box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.enq-textarea:focus{border-color:var(--teal-500);box-shadow:var(--shadow-focus)}
.enq-textarea:disabled{background:var(--surface-sunken)}
/* Day strip scrolls sideways on a phone rather than wrapping into a wall. */
.enq-days{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);margin:0 calc(-1 * var(--space-1));padding-left:var(--space-1);padding-right:var(--space-1);scrollbar-width:thin}
.enq-day,.enq-time{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.enq-day{flex:0 0 auto;padding:var(--space-2) var(--space-4)}
.enq-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--space-2)}
.enq-time{padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);font-variant-numeric:tabular-nums}
.enq-day:hover,.enq-time:hover{border-color:var(--teal-500)}
.enq-day.on,.enq-time.on{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--white)}
.enq-day:focus-visible,.enq-time:focus-visible,.enq-link:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.enq-day:disabled,.enq-time:disabled{cursor:not-allowed;opacity:.6}
.enq-link{background:none;border:0;padding:0;font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.enq-link:hover{color:var(--text-primary)}
/* DS inputs have an intrinsic width of ~310px (size=20 at body size), which
   set the card's min-content wider than a 375px phone's column and pushed
   the page sideways. A percentage width makes them compressible. */
#enquire input:not([name="botcheck"]),#enquire select,#enquire textarea{width:100%;min-width:0;box-sizing:border-box}
#enquire .grid>*{min-width:0}

/* landing-v3-motif.css */
/* The -400 suffix: these were variable fonts with a wght 400-700 axis, but
   every element that renders in Caveat computes to weight 400, so the
   variation data was dead weight. Pinned to 400 on 2026-08-29 with
   fontTools instancer, taking the latin file 73.2 KB -> 47.8 KB. All 226
   advance widths are byte-identical to the original, so nothing reflows.
   The suffix is in the filename because .htaccess caches woff2 for a year
   as immutable — reusing the old name would have stranded returning
   visitors on the 73 KB file. Do NOT reintroduce a bold Caveat without
   regenerating these from the variable original. */
/* Caveat is self-hosted rather than loaded from Google Fonts, so visitors'
   IP addresses are never sent to Google. It's a variable font: one file
   covers weights 400–700. Licensed under the SIL Open Font License 1.1 —
   the licence travels with the files, in /fonts/OFL.txt.

   Paths are root-relative (/fonts/…) rather than relative to this
   stylesheet. The files previously lived in assets/fonts/caveat/, which the
   host served as 403 because that directory ended up owned by another user
   and could not be chmod'ed. If /fonts/ ever does the same, the symptom is
   handwriting text rendering as Comic Sans — the browser falling through to
   the generic `cursive` family. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/caveat-latin-400.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:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/caveat-latin-ext-400.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}
:root{--hand:'Caveat',ui-rounded,cursive;--ink-hand:var(--teal-800);--rule:34px}
.hero3{position:relative;background:var(--surface-page);overflow:hidden;border-bottom:1px solid var(--border-default)}
.hero3::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(var(--rule) - 1px),var(--teal-100) calc(var(--rule) - 1px),var(--teal-100) var(--rule));opacity:0;animation:rulesFade 1.1s var(--ease-out) .1s forwards;pointer-events:none}
@keyframes rulesFade{to{opacity:.5}}
.hero3-inner{position:relative;display:grid;grid-template-columns:0.92fr 1.08fr;gap:var(--space-12);align-items:center;padding:var(--space-16) var(--space-6) var(--space-16)}
.hero3-copy{position:relative;padding-left:var(--space-8)}
.hero3-copy::before{content:"";position:absolute;left:0;top:-8px;bottom:-8px;width:1px;background:var(--coral-500);opacity:.6;transform-origin:top;animation:drawDown 1s var(--ease-out) .3s both}
.hero3-copy h1{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,4.6vw,var(--text-5xl));line-height:1.14;letter-spacing:var(--tracking-tight)}
.hero3-copy h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero3-copy h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:3px;background:var(--coral-500);transform:scaleX(0);transform-origin:left;animation:drawRight .6s var(--ease-out) 1.1s both}
.sheet-wrap{position:relative}
.sheet{position:relative;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-6) var(--space-6) var(--space-8);transform:rotate(-.5deg);animation:sheetIn .7s var(--ease-out) both}
@keyframes sheetIn{from{opacity:0;transform:rotate(-2deg) translateY(18px)}to{opacity:1;transform:rotate(-.5deg)}}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--border-default);padding-bottom:var(--space-3);margin-bottom:var(--space-4);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}
.sheet-q{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);border-left:2px solid var(--teal-200);padding-left:var(--space-4);margin-bottom:var(--space-5)}
.work{display:grid;gap:6px}
.wline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:var(--space-4);opacity:0;animation:lineIn .4s var(--ease-out) both}
@keyframes lineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hand{font-family:var(--hand);font-size:27px;line-height:1.35;color:var(--ink-hand)}
.hand sub{font-size:.62em}
.circled{position:relative;display:inline-block;padding:0 2px}
.circled svg{position:absolute;left:-9px;top:-7px;width:calc(100% + 18px);height:calc(100% + 14px);overflow:visible}
.circled svg ellipse{fill:none;stroke:var(--coral-500);stroke-width:2;stroke-linecap:round;stroke-dasharray:230;stroke-dashoffset:230;animation:circleDraw .75s var(--ease-out) 1.9s forwards}
@keyframes circleDraw{to{stroke-dashoffset:0}}
.note{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--coral-700);opacity:0;animation:lineIn .45s var(--ease-out) both}
.note::before{content:"";flex:0 0 22px;height:1px;background:var(--coral-500);transform:scaleX(0);transform-origin:left;animation:drawRight .35s var(--ease-out) both;animation-delay:inherit}
.fix{font-family:var(--hand);font-size:25px;color:var(--accent-ink)}/* --accent-ink, not --coral-600: at 25px the line itself only needs 3:1 and
   scraped it, but `.hand sub` drops to .62em (~15px) for the u<sub>y</sub>
   subscript, which needs 4.5:1. The darker ink clears both. */
.tick{display:flex;align-items:center;gap:10px;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border-strong);opacity:0;animation:lineIn .4s var(--ease-out) 3.7s both}
.tick svg path{fill:none;stroke:var(--coral-500);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:circleDraw .5s var(--ease-out) 3.8s forwards}
.tick span{font-size:var(--text-sm);color:var(--text-secondary)}
.comment{position:relative;margin:calc(var(--space-6) * -1) 0 0 var(--space-10);background:var(--surface-inverse);color:var(--text-on-brand);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-lg);opacity:0;animation:lineIn .5s var(--ease-out) 4.1s both;max-width:520px}
.comment p{font-family:var(--font-display);font-weight:300;font-size:var(--text-lg);line-height:var(--leading-snug)}
.comment .who{font-size:var(--text-sm);color:var(--teal-200);margin-top:var(--space-2);display:block}
.comment-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.replay{margin-top:var(--space-5);background:none;border:0;padding:0;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--text-link);cursor:pointer;text-decoration:underline;text-decoration-color:var(--teal-300);text-underline-offset:3px}
.replay:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
.hero3-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);color:var(--text-secondary);border-top:1px solid var(--border-default);padding-top:var(--space-4);margin-top:var(--space-2)}
.margin-list{display:grid;gap:var(--space-8)}
.margin-step{display:grid;grid-template-columns:112px 1fr;gap:var(--space-6);align-items:start;padding-bottom:var(--space-6);border-bottom:1px solid var(--border-default)}
.margin-step:last-child{border-bottom:0}
.margin-step .ann{font-family:var(--hand);font-size:26px;color:var(--accent-ink);text-align:right;line-height:1.2;padding-top:2px}
.gradetable{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.gradetable caption{text-align:left;font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--teal-300);padding-bottom:var(--space-4)}
.gradetable th,.gradetable td{text-align:left;padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--border-on-inverse)}
.gradetable th{font-weight:600;font-size:var(--text-sm);color:var(--teal-200);letter-spacing:var(--tracking-wide)}
.gradetable td:first-child{color:var(--text-on-brand)}
.gradetable td.num{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:300;color:var(--brand-accent);line-height:1}
.paper-faq{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);box-shadow:var(--shadow-sm)}
.paper-faq .faq-item{border-top:1px solid var(--border-default)}
.paper-faq .faq-item:first-child{border-top:0}
.qno{font-family:var(--font-display);font-size:var(--text-lg);font-weight:300;color:var(--accent-ink);min-width:32px}
.faq-q3{width:100%;background:none;border:0;padding:var(--space-5) 0;display:grid;grid-template-columns:32px 1fr auto;gap:var(--space-4);align-items:baseline;cursor:pointer;font-family:var(--font-body);font-size:var(--text-md);font-weight:600;color:var(--text-primary);text-align:left}
.faq-a3{padding:0 0 var(--space-5) calc(32px + var(--space-4));color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:68ch}
.faq-ans{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s var(--ease-out),opacity .24s var(--ease-out)}
.faq-ans>div{overflow:hidden;min-height:0}
.faq-ans.open{grid-template-rows:1fr;opacity:1}
.faq-sign{color:var(--accent-ink);font-weight:400;display:inline-block;transition:transform var(--duration-base) var(--ease-out)}
.faq-sign.open{transform:rotate(45deg)}
.marks-label{font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:var(--tracking-wide);white-space:nowrap}
@media(max-width:1080px){.hero3-inner{grid-template-columns:1fr;gap:var(--space-10);padding:var(--space-12) var(--space-6)}.comment{margin-left:0;max-width:none}.sheet{transform:none}}
@media(max-width:720px){.wline{grid-template-columns:1fr;gap:2px}.hand{font-size:24px}.margin-step{grid-template-columns:1fr;gap:var(--space-2)}.margin-step .ann{text-align:left}.gradetable td.num{font-size:var(--text-xl)}.paper-faq{padding:var(--space-4)}}
@media(prefers-reduced-motion:reduce){.hero3::before{opacity:.5}.wline,.note,.tick,.comment,.sheet{opacity:1;animation:none}.circled svg ellipse,.tick svg path{stroke-dashoffset:0;animation:none}.hero3-copy h1 em::after,.hero3-copy::before{transform:none;animation:none}}
.board-strip{background:var(--surface-inverse);border-top:1px solid var(--border-on-inverse)}
.board-strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);padding:var(--space-5) var(--space-6)}
.board-list{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.board{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--teal-100);border:1px solid var(--border-on-inverse);border-radius:var(--radius-pill);padding:5px 14px}
@media(prefers-reduced-motion:reduce){.faq-ans,.faq-sign{transition:none}}