@font-face { font-family: "Domine"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/domine-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }

:root {
  --brand-text: #403237;
  --brand-ink: #1d1e20;
  --brand-grey: #56585e;
  --brand-bg: #f3f0e9;
  --brand-orange: #ff952b;
  --brand-green: #98a869;
  --brand-dark: #31231b;
  --brand-blue: #0281d1;
  --brand-forest: #007a2b;
  --brand-yellow: #e8b928;
  --brand-lime: #6ec725;
  --brand-peach: #fbc290;

  --bs-body-font-family: "Lato", sans-serif;
  --bs-body-color: var(--brand-text);
  --bs-body-color-rgb: 64, 50, 55;
  --bs-body-bg: var(--brand-bg);
  --bs-body-bg-rgb: 243, 240, 233;
  --bs-body-line-height: 1.8;
  --bs-heading-color: var(--brand-text);
  --bs-link-color: var(--brand-text);
  --bs-link-color-rgb: 64, 50, 55;
  --bs-link-hover-color: var(--brand-dark);
  --bs-link-hover-color-rgb: 49, 35, 27;
  --brand-flame: #ff8001;
  --brand-hero: #ff8000;

  --bs-primary: var(--brand-orange);
  --bs-primary-rgb: 255, 149, 43;

  /* Measured type scale: phone (390px) first, desktop (1440px) from 921px. */
  --n-h1: 40;
  --n-h2: 36;
  --n-h3: 32;
  --n-h4: 24;
  --n-h6: 20;
  --n-star: 20;
  --n-name: 20;
}
@media (min-width: 921px) {
  :root { --n-h1: 64; --n-h2: 56; --n-h3: 48; --n-h4: 40; --n-h6: 24; --n-star: 24; --n-name: 16; }
}
:root { --fs-h1: calc(var(--n-h1) * 1px); --fs-h2: calc(var(--n-h2) * 1px); --fs-h3: calc(var(--n-h3) * 1px); --fs-h4: calc(var(--n-h4) * 1px); --fs-h6: calc(var(--n-h6) * 1px); }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Domine", serif; font-weight: 400; line-height: 1.3; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5, h6, .h6 { font-size: var(--fs-h6); }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p { margin: 0; }

.text-orange { color: var(--brand-orange); }
/* Three accents on live Home are not the #ff952b used everywhere else: #ff8000 and #ff8001. */
.text-hero { color: var(--brand-hero); }
.text-flame { color: var(--brand-flame); }
.text-green { color: var(--brand-green); }

/* The header's container drops Bootstrap's width cap and padding; .site-header .navbar below sets the header's width.
   Page content in main keeps Bootstrap's container, with side padding so text never touches the screen edge. */
.site-header .container { max-width: none; margin-inline: auto; padding: 0; }
main .container { padding-inline: 16px; }
.policy { max-width: 46rem; }
.policy p, .policy ul { margin-top: 0.75rem; }
.policy code { color: inherit; }
/* Bootstrap's navbar-expand-lg starts at 992px; the live layout switches at 921px, so it is repeated for 921-991px. */
@media (min-width: 921px) and (max-width: 991.98px) {
  .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; }
  .navbar-expand-lg .navbar-toggler { display: none; }
  .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
}

.btn-brand, .btn-outline-brand, .btn-promo {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-line-height: 1.5;
}
/* Button colours are the live ones, read in their hover state; every type goes to #403237 except FREE Consultation. */
.btn { transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-text);
  --bs-btn-hover-border-color: var(--brand-text);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-text);
  --bs-btn-active-border-color: var(--brand-text);
  --bs-btn-focus-shadow-rgb: 64, 50, 55;
}
.btn-hero { --bs-btn-bg: var(--brand-hero); --bs-btn-border-color: var(--brand-hero); }
.btn-outline-brand {
  --bs-btn-color: #0d141a;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-ink);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-ink);
  --bs-btn-active-border-color: #fff;
  --bs-btn-border-width: 2px;
  --bs-btn-padding-y: 0.6875rem;
}
.btn-promo {
  --bs-btn-color: var(--brand-text);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-text);
  --bs-btn-hover-border-color: var(--brand-text);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-text);
  --bs-btn-active-border-color: var(--brand-text);
}
.btn-outline-brand, .btn-promo { font-weight: 700; }
.btn.at { --bs-btn-padding-x: 0; white-space: nowrap; }

/* Header: 82px at lg and up, 110px below; the nav is centred on the page, not on the space beside the logo. */
.site-header .navbar { --bs-navbar-color: var(--brand-text); --bs-navbar-hover-color: var(--brand-flame); --bs-navbar-active-color: var(--brand-flame); position: relative; width: 100%; min-height: 110px; padding: 0; }
.site-header .navbar-brand { margin: 0 0 0 32px; padding: 0; }
.site-header .navbar-brand img { width: 62px; height: 62px; }
.site-header .navbar-nav .nav-link { padding: 0; line-height: 28.8px; }
.site-header .nav-link:hover, .site-header .nav-link:focus-visible, .site-header .nav-link.active { text-decoration: underline; }
/* The phone menu is the live one: a full-width cream panel under the header that grows open, with a three-bar icon that
   turns into a cross. nav.js toggles .show; the links are visibility:hidden while it is closed, so they leave the tab order. */
.site-header .navbar-toggler { position: relative; width: 24px; height: 18px; margin-right: 32px; padding: 0; border: 0; }
.site-header .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }
.nav-bar { position: absolute; left: 0; width: 24px; height: 2px; background: var(--brand-text); transform-origin: 0 0; transition: transform 0.25s ease-in-out 0.1s, opacity 0.25s ease-in-out 0.1s, width 0.25s ease-in-out 0.1s; }
.nav-bar:nth-child(1) { top: 0; }
.nav-bar:nth-child(2) { top: 8px; }
.nav-bar:nth-child(3) { top: 16px; }
[aria-expanded="true"] > .nav-bar:nth-child(1) { top: -1px; transform: rotate(45deg); }
[aria-expanded="true"] > .nav-bar:nth-child(2) { width: 0; opacity: 0; }
[aria-expanded="true"] > .nav-bar:nth-child(3) { transform: rotate(-45deg); }
@media (max-width: 920.98px) {
  .site-header .navbar-collapse { position: absolute; top: 100%; left: 0; z-index: 1030; width: 100%; max-height: 0; padding: 0 16px; overflow: hidden; visibility: hidden; background: var(--brand-bg); transition: max-height 0.3s ease-out 0.1s, padding 0.5s 0.1s, visibility 0.6s; }
  .site-header .navbar-collapse.show { max-height: 422px; padding: 24px 16px; visibility: visible; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.1); }
  .site-header .navbar-nav { align-items: flex-end; gap: 20px; }
}
@media (min-width: 921px) {
  .site-header .navbar { width: min(100%, 1224px); min-height: 82px; }
  .site-header .navbar-brand { margin-left: 16px; }
  .site-header .navbar-brand img { width: 58px; height: 58px; }
  .site-header .navbar-collapse { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-grow: 0; }
  .site-header .navbar-nav { gap: 45.5px; }
}

/* The page grid. Every section is a grid with the live site's column and row templates (grid.css, generated by
   tools/gridcss.mjs): columns are percentages of a box that fills the viewport up to 1224px, rows are px up to 1224px
   and vw from 921px, each "at least this tall, or as tall as the content". Elements are placed by grid lines. */
.gl { display: grid; width: 100%; max-width: 1224px; margin-inline: auto; grid-template-columns: var(--c); grid-template-rows: var(--r); min-height: var(--mh); }
@media (min-width: 921px) and (max-width: 1224px) { .gl { grid-template-rows: var(--sr); min-height: 0; } }
@media (max-width: 920px) { .gl { max-width: 360px; padding-inline: 16px; grid-template-columns: var(--mc); grid-template-rows: var(--tr); min-height: var(--tmh); } }
@media (max-width: 360px) { .gl { padding-inline: 4.444vw; grid-template-rows: var(--mr); min-height: 0; } }
.ge { display: none; position: relative; grid-template-columns: 100%; width: 100%; height: 100%; }
.ge > * { align-self: start; }
.ge-text { overflow-wrap: break-word; }
/* The builder's text boxes use break-spaces, so a space at a line end takes room and can push the next word down. */
.ge-text :is(h1, h2, h3, h4, h5, h6, p, blockquote, address) { white-space: break-spaces; }
.ge-text > * { width: 100%; }
.t14 { font-size: 14px; line-height: 1.8; }
.t16 { font-size: 16px; line-height: 1.8; }
.t18 { font-size: 18px; line-height: 1.8; }
.ink { color: var(--brand-ink); }
.w700 { font-weight: 700; }

/* The builder gives its justified paragraphs normal white-space. */
.ge-text.ws-normal :is(p) { white-space: normal; }

/* Components */
.ge > .btn { min-height: var(--bmh); display: flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; height: 100%; padding: 0; white-space: nowrap; }
@media (max-width: 1191px) { .ge > .btn { white-space: normal; } }
.pic { position: relative; overflow: hidden; width: var(--wd, 100%); max-width: 100%; height: var(--ht, 100%); max-height: var(--maxh); }
@media (min-width: 921px) and (max-width: 1224px) { .pic { --wd: var(--sw); --ht: var(--sht); } }
.pic picture { display: contents; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic.crop img { inset: auto; max-width: none; left: var(--cl); top: var(--ct); width: var(--cw); height: var(--ch); transform: scale(var(--cs)); transform-origin: 0 0; }
.mask { mask-size: 100% 100%; mask-repeat: no-repeat; }
.mask-drawing { mask-image: url("../img/blob-drawing.svg"); }
.mask-graduate { mask-image: url("../img/blob-graduate.svg"); }
.skew { clip-path: polygon(0 0, 74% 0, 100% 100%, 26% 100%); }
.round { border-radius: 30px; }
.avatar { border-radius: 50%; }
.soft { border-radius: 12px; }
.shape { display: block; width: 100%; height: var(--th, 100%); background: var(--fill); }
@media (min-width: 921px) { .shape { height: var(--sh, 100%); } }
@media (min-width: 921px) and (max-width: 1224px) { .shape { height: var(--ssh, var(--sh, 100%)); } }
@media (max-width: 360px) { .shape { height: var(--msh, var(--th, 100%)); } }
.leaf { border-radius: 0 43.33% 0 43.33%; }
.circle { border-radius: 50%; }
.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hline { background: linear-gradient(var(--fill), var(--fill)) center / 100% 4px no-repeat; }
.vline { background: linear-gradient(var(--fill), var(--fill)) center / 4px 100% no-repeat; }
.stripe-v { background: repeating-linear-gradient(to bottom, var(--fill) 0 var(--d), transparent var(--d) calc(var(--d) * 2)) center / 4px 100% no-repeat; }
.stripe-h { background: repeating-linear-gradient(to right, var(--fill) 0 var(--d), transparent var(--d) calc(var(--d) * 2)) center / 100% 4px no-repeat; }

/* Home */
.hero-h1 strong { font-weight: 700; }
/* The live icon is an emoji with its own side bearing; the SVG has none, so it gets a gap, and on desktop the cell
   (sized to the text exactly) grows by the same amount so the line does not wrap. */
.chip-icon { margin-right: 5px; }
@media (min-width: 921px) { .ge-text:has(> .chip) { width: calc(100% + 6px); } }
.chip-icon svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; stroke-width: 2; }
.stat-value { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; font: 56px/1 serif; color: #fff; }
.stat { color: #fff; }
.level-title { color: #fff; }
.word { white-space: break-spaces; font-family: "Domine", serif; font-size: 48px; line-height: 1.3; }
.promo-title { color: var(--brand-ink); }
.promo-title strong, .level-title strong { font-weight: 700; }
.legal { color: #fff; font-size: 14px; line-height: 1.3; }
@media (max-width: 920px) { .legal { font-size: 16px; line-height: 1.8; } }

/* Footer */
.site-footer { background: var(--brand-dark); color: #fff; }
@media (max-width: 920px) { .site-footer { margin-top: 48px; } }
.site-footer a { color: #fff; }
.footer-col h2 { margin: 0 0 16px; color: var(--brand-bg); }
.footer-col p, .footer-col address { margin: 0 0 8px; line-height: 1.8; }
.footer-brand { color: var(--brand-bg); }
.footer-social { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0; margin: 0; padding: 0; list-style: none; line-height: 1; }
@media (max-width: 920px) { .footer-social { justify-content: center; gap: 26px; } }
.footer-social svg { display: block; width: 20px; height: 20px; }

/* Decorative ornaments: the live site's emoji as icons and glyphs, in their live grid cells (desktop only). */
.deco { font-size: 44px; line-height: 1; pointer-events: none; }
.deco svg { width: 1em; height: 1em; stroke-width: 1.75; }
.deco-glyph { font-family: "Domine", serif; font-weight: 700; }

/* About */
.maths { font-size: 16px; line-height: 1.8; font-weight: 700; color: var(--brand-grey); text-align: center; }

/* FAQ */
.faq-q { font-size: 20px; line-height: 1.3; color: var(--brand-orange); font-weight: 700; }

/* Forms (U5 fills these boxes) */
/* Forms: sizes, colours and spacing measured on the live forms (capture/measurements, form-* records). Labels, a
   48px field with 16px padding and a 6px radius, 22px between fields, a centred 8px-radius button. */
.ge-form { align-content: start; }
.site-form { --form-label: var(--brand-text); --form-text: #242424; --form-radius: 6px; --form-hover: #ff51ee; --form-error: #b02050; display: grid; gap: 22px; width: 100%; text-align: left; }
#tutor-form { --form-label: #1a1a1a; --form-text: #1a1a1a; --form-radius: 0; --form-hover: #403237; }
.site-form .field { margin: 0; padding: 0; border: 0; min-width: 0; }
.site-form .form-label { float: none; width: auto; margin: 0; padding: 0; font-size: 16px; line-height: 1.8; color: var(--form-label); }
.site-form :is(.form-control, .form-select) { height: 48px; padding: 16px; border: 0; border-radius: var(--form-radius); background-color: #fff; color: var(--form-text); font-size: 16px; line-height: normal; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.site-form textarea.form-control { height: 96px; resize: none; margin-bottom: 8.8px; }
.site-form :is(.form-control, .form-select):hover, .site-form :is(.form-control, .form-select):focus { background-color: #f1f1f1; color: var(--form-text); box-shadow: none; }
.site-form :is(.form-control, .form-select):focus-visible, .site-form .form-check-input:focus-visible, .site-form .btn:focus-visible { outline: 2px solid #357df9; outline-offset: 0; box-shadow: none; }
.site-form :is(.form-control, .form-select).is-invalid { border: 1px solid var(--form-error); }
.site-form .form-control.is-invalid { background-image: none; padding: 16px; }
/* The select keeps its chevron and room for it when invalid; Bootstrap's own invalid icon is dropped, as on the inputs. */
.site-form .form-select, .site-form .form-select.is-invalid { padding-block: 0; padding-right: 40px; --bs-form-select-bg-icon: none; background-position: right 0.75rem center; background-size: 16px 12px; }
.site-form .form-select:required:invalid { color: var(--bs-secondary-color); }
.site-form .invalid-feedback { display: block; margin: 0; font-size: 16px; line-height: 1.8; color: var(--form-error); }
.site-form .invalid-feedback:empty { display: none; }
.site-form .options { display: block; }
.site-form .field-row .options { display: flex; flex-wrap: wrap; column-gap: 24px; }
.site-form .form-check { display: flex; align-items: center; gap: 4.5px; min-height: 0; margin: 4px 0 0; padding: 0; line-height: 1.8; }
.site-form .form-check-input { float: none; flex: none; width: 13px; height: 13px; margin: 0; appearance: auto; accent-color: var(--brand-text); }
.site-form .form-check-label, .site-form .form-check-input.is-invalid ~ .form-check-label { color: var(--form-text); cursor: pointer; }
.site-form .btn { justify-self: center; height: 51px; padding: 16px 40px; border: 0; line-height: normal; }
@media (max-width: 920px) { .site-form .btn { justify-self: stretch; height: 47px; padding: 14px 36px; } }
.site-form .btn:disabled { opacity: 0.65; }
.site-form .btn, .site-form .btn:hover { color: #fff; }
.site-form .btn:hover { background-color: var(--form-hover); }
.form-status:not(:empty) { margin-bottom: 12px; }

main { position: relative; overflow: clip; }
/* Scroll-in animations. The timings and distances are the live builder's own (0.65s ease after 0.1s): "slide" rises 20% of
   the element's height, "scale" grows from 90%, "fade" only fades, "image" slides the photo inside its box. reveal.js adds
   .reveal-pending to every displayed element and removes it as the element enters the viewport, so without JS, or with reduced motion, all is visible. */
[data-reveal] { transition: opacity 0.65s ease 0.1s, transform 0.65s ease 0.1s; }
[data-reveal].reveal-pending { opacity: 0; transform: translateY(20%); }
[data-reveal="scale"].reveal-pending { transform: scale(0.9); }
[data-reveal="fade"].reveal-pending { transform: none; }
[data-reveal="image"] { transition: none; }
[data-reveal="image"] .pic { transition: opacity 0.65s ease 0.1s, transform 0.65s ease 0.1s; }
[data-reveal="image"].reveal-pending { opacity: 1; transform: none; }
[data-reveal="image"].reveal-pending .pic { opacity: 0; transform: translateY(20%); }

/* Ornaments scatter in from a different side each, with a small overshoot, then move gently by kind (data-motion). */
[data-reveal="scatter"] { --sx: -28px; --sy: 30px; --scatter-r: -18deg; transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-reveal="scatter"]:nth-child(3n + 2) { --sx: 26px; --sy: -24px; --scatter-r: 16deg; }
[data-reveal="scatter"]:nth-child(3n) { --sx: 0px; --sy: 36px; --scatter-r: 8deg; }
[data-reveal="scatter"].reveal-pending { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--scatter-r)) scale(0.6); }
[data-motion] > :is(svg, span) { animation: var(--motion) 6s ease-in-out infinite; }
[data-motion]:nth-child(3n + 1) > :is(svg, span) { animation-delay: -1.7s; }
[data-motion]:nth-child(3n + 2) > :is(svg, span) { animation-delay: -3.9s; animation-duration: 7s; }
[data-motion="float"] { --motion: float; }
[data-motion="bob"] { --motion: bob; }
[data-motion="sway"] { --motion: sway; }
[data-motion="twinkle"] { --motion: twinkle; }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px) rotate(-4deg); } 75% { transform: translateY(2px) rotate(4deg); } }
@keyframes sway { 50% { transform: rotate(7deg); } 0%, 100% { transform: rotate(-7deg); } }
@keyframes twinkle { 50% { transform: scale(1.14) rotate(8deg); } }

/* Home word strip: every word runs the same endless cycle, each offset by a negative delay set in the template (--i of --n,
   in a fixed shuffled order), so it is moving from first paint and a word is always rising as another settles. Only
   transform and opacity change, so nothing reflows. The highlight window is the first 28% of the cycle, about 2s at 7s. */
.word { --cycle: 7s; --n: 10; --lift-scale: 1.04; --lift-rise: -2px; --rest-opacity: 0.82;
  opacity: var(--rest-opacity);
  animation: word-lift var(--cycle) ease-in-out infinite; animation-delay: calc(var(--cycle) * var(--i) / var(--n) * -1); }
@keyframes word-lift {
  14% { opacity: 1; transform: translateY(var(--lift-rise)) scale(var(--lift-scale)); }
  28%, 100% { opacity: var(--rest-opacity); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion] > :is(svg, span), .word { animation: none; opacity: 1; }
}

.whatsapp-button {
  position: fixed; right: 20px; bottom: 24px; z-index: 1030;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #008361; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Text roles */
.chip { color: var(--brand-text); }
@media (max-width: 920px) {
  .chip { color: var(--brand-bg); }
  /* The chips sit over the dark photo: the icons take the text colour (inline brand colours vanish there) and are larger and heavier. */
  .chip-icon { color: var(--brand-bg) !important; }
  .chip-icon svg { width: 18px; height: 18px; stroke-width: 2.5; }
}
.grey { color: var(--brand-grey); }
.card-text { margin: 0; color: var(--brand-text); }
.stars { font-family: "Domine", serif; font-size: calc(var(--n-star) * 1px); line-height: 1.3; color: var(--brand-ink); }
.name { font-family: "Domine", serif; font-weight: 400; font-size: calc(var(--n-name) * 1px); line-height: 1.3; color: #0d141a; margin: 0; }
.feature { font-size: 24px; line-height: 1.3; color: var(--brand-text); }
@media (max-width: 920px) { .ge-text p.feature { white-space: normal; } }
@media (min-width: 921px) { .feature { font-size: 18px; line-height: 1.8; } }
@media (min-width: 921px) { .maths { font-size: 48px; line-height: 1.3; } }
.paras p + p { margin-top: 32px; }
.stripe-v, .stripe-h { --d: 4px; }
.stripe-wide { --d: 10px; }
/* No live element carries these links (the live footer has no policy row), so the grid lines are placed by hand
   and not generated: row 15 / column 1-10 on desktop, row 40 / column 1-7 on phone, below the footer content. */
.footer-policy { font-size: 14px; line-height: 1.3; grid-row: 15 / 16; grid-column: 1 / 11; text-align: left; }
@media (min-width: 921px) { .footer-policy { display: grid; } }
@media (max-width: 920px) { .footer-policy { font-size: 16px; line-height: 1.8; display: grid; grid-row: 40 / 41; grid-column: 1 / 8; text-align: center; } }
.footer-col > div { width: 100%; }
.deco > svg { align-self: start; justify-self: center; margin-block: 9.2px; }
.deco > span { align-self: start; justify-self: center; line-height: 62.4px; }
/* The tagline is one line on the live phone layout, about 5px narrower than Lato 900 renders here; the tracking brings it
   inside its cell without nowrap, so it still wraps like the live break-spaces text if the viewport narrows. */
@media (max-width: 920px) { .tagline { letter-spacing: -0.12px; } }

/* Cookie banner: CookieConsent's own structure, themed through its variables with the site's tokens. The live orange keeps
   its colour but takes the dark text (5.6:1) so the banner passes axe; white on this orange is only 2.2:1. */
#cc-main {
  --cc-font-family: "Lato", sans-serif;
  --cc-bg: var(--brand-bg);
  --cc-primary-color: var(--brand-text);
  --cc-secondary-color: var(--brand-text);
  --cc-link-color: var(--brand-text);
  --cc-btn-border-radius: 0.5rem;
  --cc-btn-primary-bg: var(--brand-orange);
  --cc-btn-primary-border-color: var(--brand-orange);
  --cc-btn-primary-color: var(--brand-text);
  --cc-btn-primary-hover-bg: var(--brand-text);
  --cc-btn-primary-hover-border-color: var(--brand-text);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-secondary-bg: var(--brand-orange);
  --cc-btn-secondary-border-color: var(--brand-orange);
  --cc-btn-secondary-color: var(--brand-text);
  --cc-btn-secondary-hover-bg: var(--brand-text);
  --cc-btn-secondary-hover-border-color: var(--brand-text);
  --cc-btn-secondary-hover-color: #fff;
  --cc-toggle-on-bg: var(--brand-text);
  --cc-toggle-off-bg: var(--brand-grey);
  --cc-toggle-readonly-bg: #d9d4c8;
  --cc-footer-bg: #ebe7dc;
  --cc-footer-color: var(--brand-text);
  --cc-separator-border-color: #d9d4c8;
  --cc-cookie-category-block-bg: #ebe7dc;
  --cc-cookie-category-block-border: #d9d4c8;
  --cc-cookie-category-block-hover-bg: #e3dfd2;
  --cc-cookie-category-block-hover-border: #d9d4c8;
  --cc-cookie-category-expanded-block-bg: #ebe7dc;
  --cc-cookie-category-expanded-block-hover-bg: #e3dfd2;
  --cc-overlay-bg: rgba(49, 35, 27, 0.5);
}
#cc-main .cm__title, #cc-main .pm__title, #cc-main .pm__section-title { font-family: "Domine", serif; font-weight: 400; }
/* On a phone the banner spans the bottom of the screen where the WhatsApp button sits, so the button waits behind it. */
@media (max-width: 920px) { .show--consent .whatsapp-button { visibility: hidden; } }
.footer-policy .btn-link {
  --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-font-size: inherit; --bs-btn-line-height: inherit;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
  vertical-align: baseline; text-decoration: underline;
}