/*
Theme Name: Glowth Mindset
Theme URI: https://glowthmindset.com
Author: Glowth Mindset
Description: Custom block theme for Glowth Mindset (Version C design). Colours, fonts and section backgrounds are set in Appearance > Editor > Styles; every page is built from native blocks.
Version: 1.24.24
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glowth-mindset
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, editor-style
*/

/* =========================================================
   TOKENS
   Every colour points at a palette colour from Appearance > Editor > Styles > Colours,
   and every font at the Headings or Text font chosen there, so changing a colour or font
   in the Styles panel changes it everywhere, including the wheel and the finder.
   ========================================================= */
:root {
  --bg: var(--wp--preset--color--warm-white);
  --text: var(--wp--preset--color--paris-noir);
  --accent: var(--wp--preset--color--cognac);
  --accent-hover: var(--wp--preset--color--cognac-deep);
  --support: var(--wp--preset--color--atelier-beige);
  --rule: var(--wp--preset--color--trench);
  --rule-c: var(--rule);                  /* hairlines; lighter on dark backgrounds */
  --label: var(--wp--preset--color--deep-taupe);   /* small labels (Deep Taupe, palette B, 27 Oct 2026); text colour on non-white backgrounds */
  --focus: var(--accent);
  --soft: color-mix(in srgb, currentColor 80%, transparent);   /* secondary text, follows the section's text colour */
  --field-border: color-mix(in srgb, var(--text) 62%, var(--bg));

  /* --glowth-font-heading and --glowth-font-body are written by functions.php from the Styles panel */
  --serif: var(--glowth-font-heading, var(--wp--preset--font-family--noto-serif-display));
  --sans: var(--glowth-font-body, var(--wp--preset--font-family--poppins));

  --container: 1320px;
  --gutter: clamp(20px, 4.2vw, 60px);
  --sp-section: clamp(88px, 9vw, 136px);
  --sp-block: clamp(56px, 6vw, 96px);
  --sp-head: 26px;
  --fs-h2: clamp(40px, 5vw, 72px);
  --fs-h3: clamp(26px, 2.3vw, 32px);
  --fs-lead: clamp(18px, 1.4vw, 20px);
  --fs-label: 13px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* any section given a background other than Warm White: labels switch to the text colour for contrast */
.has-background:not(.has-warm-white-background-color) { --label: currentColor; }
/* dark backgrounds: softer hairlines and a light focus ring */
.has-paris-noir-background-color, .has-cognac-background-color, .has-cognac-deep-background-color {
  --rule-c: color-mix(in srgb, var(--rule) 45%, transparent);
  --soft: color-mix(in srgb, currentColor 84%, transparent);
  --focus: currentColor;
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
figure { margin: 0; }
figure.wp-block-image { margin: 0; }
/* WordPress's own spacing rule (:root :where(.is-layout-flow) > *) zeroes paragraph margins at 0-1-0;
   these match it and come later, while every component rule below still overrides them by order */
:where(p):not(.\_) { margin: 0 0 1.1em; text-wrap: pretty; }
:where(p):not(.\_):last-child { margin-bottom: 0; }
strong { font-weight: 600; }
h1, h2, h3 { margin: 0; hyphens: none; text-wrap: balance; color: inherit; }
em { font-style: italic; }
.wp-site-blocks, .wp-site-blocks > main { padding: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- shared pieces ---------- */
.eyebrow { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 18px; line-height: 1.4; }
p.eyebrow--accent { color: var(--label); }

/* buttons: colours and type come from Styles > Blocks > Button; this adds the shape */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 54px; text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); border: 1px solid transparent; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: currentColor; border: 1px solid currentColor; padding: 18px 34px; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background: var(--text); border-color: var(--text); color: var(--bg); }

/* text links with a drawn arrow */
.text-link { margin: 0; }
.text-link a, .offer__cta a { text-decoration: none; }
.text-link a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 10px 0; }
.text-link a::after, .offer__cta a::after, .main-nav .nav-cta a::after {
  content: ""; flex: none; width: 21px; height: 9px; margin-left: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.text-link a:hover::after, .offer__cta a:hover::after { transform: translateX(6px); }

.tool-head { border-top: 1px solid var(--rule-c); padding-top: 18px; margin-bottom: 4px; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- social icons (native Social Icons block) ---------- */
.wp-block-social-links.social { gap: 4px; margin: 22px 0 0 -11px; padding: 0; }
.wp-block-social-links.social .wp-social-link { background: none !important; margin: 0; }
.wp-block-social-links.social .wp-block-social-link-anchor { display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0 !important; transition: color .25s; }
.wp-block-social-links.social .wp-block-social-link-anchor svg { width: 22px; height: 22px; }
.wp-block-social-links.social .wp-social-link:hover { transform: none; }
.wp-block-social-links.social .wp-social-link a:hover { color: var(--accent) !important; }
.site-footer .wp-block-social-links.social .wp-social-link a:hover { color: color-mix(in srgb, var(--accent) 55%, var(--bg)) !important; }

/* ---------- forms (unconnected until an email service is chosen; never claim success) ---------- */
.glowth-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; letter-spacing: .4px; }
.field input { min-height: 52px; padding: 12px 16px; border: 1px solid var(--field-border); border-radius: 0; background: var(--bg); color: var(--text); font-size: 15px; width: 100%; }
.field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.form-small { font-size: 13px; color: var(--soft); margin: 0; }
.form-status { margin: 14px 0 0; font-size: 14px; min-height: 1.4em; }
.form-status.is-warn { border-left: 2px solid var(--accent); padding-left: 12px; }
.form-status.is-ok { border-left: 2px solid var(--accent); padding-left: 12px; color: var(--text); }
.form-status:empty { display: none; }
.field select { min-height: 52px; padding: 12px 44px 12px 16px; border: 1px solid var(--field-border); border-radius: 0; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23181512' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 18px center; color: var(--text); font: inherit; font-size: 15px; width: 100%; appearance: none; }
.field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent-hover); }
p.field-error { margin: 2px 0 0; font-size: 13px; color: var(--accent-hover); }
.glowth-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.glowth-form .wp-element-button:disabled { opacity: .6; cursor: progress; }
.glowth-form .wp-element-button { justify-self: start; cursor: pointer; }

/* =========================================================
   HEADER · centred logo above a separate navigation row
   ========================================================= */
.site-header { position: relative; z-index: 40; }
.masthead { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 30px var(--gutter) 24px; display: flex; justify-content: center; align-items: center; }
.masthead .wp-block-site-logo { margin: 0; line-height: 0; }
.masthead .wp-block-site-logo img { height: auto; }
.nav-row { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin: 0 auto; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }

.main-nav.wp-block-navigation { justify-content: center; min-height: 54px; }
.main-nav .wp-block-navigation__container { gap: 34px; justify-content: center; align-items: center; }
.main-nav .wp-block-navigation-item__content { font-size: 12.5px; font-weight: 400; letter-spacing: 1.7px; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
.main-nav .wp-block-navigation-item__content:hover,
.main-nav .current-menu-item > .wp-block-navigation-item__content,
.main-nav .is-current > .wp-block-navigation-item__content,
.main-nav .nav-cta .wp-block-navigation-item__content { color: var(--label); }
.main-nav .nav-cta a { display: inline-flex; align-items: center; }
.main-nav .nav-cta a::after { width: 16px; margin-left: 8px; }
.main-nav .wp-block-navigation__submenu-icon { width: 10px; height: 10px; margin-left: 6px; }
/* submenu panel */
.main-nav .wp-block-navigation__submenu-container { background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--rule) !important; padding: 12px 0 !important; min-width: 300px !important; left: -22px !important; top: 100% !important; }
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 9px 22px !important; letter-spacing: 1.2px; }
.main-nav .wp-block-navigation__submenu-container .sub-nav__child .wp-block-navigation-item__content { padding-left: 40px !important; text-transform: none; letter-spacing: .2px; font-size: 13px; font-weight: 400; color: var(--soft); }
.main-nav .wp-block-navigation__submenu-container em { font-style: normal; color: var(--accent); }

/* mobile menu panel (the menu block's own overlay, styled to the site) */
.main-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg) !important; color: var(--text) !important; padding: 24px var(--gutter) 36px; }
.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; align-items: flex-start; }
.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; text-transform: none; font-weight: 400; padding: 8px 0; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding: 0 0 8px 2px !important; min-width: 0 !important; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 7px 0 !important; font-size: 14px; letter-spacing: .4px; text-transform: none; color: var(--soft); }
.main-nav .is-menu-open .wp-block-navigation__submenu-container .sub-nav__child .wp-block-navigation-item__content { padding-left: 18px !important; }
.main-nav .wp-block-navigation__responsive-container-open, .main-nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; place-items: center; }
.main-nav .wp-block-navigation__responsive-container-open svg, .main-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* =========================================================
   HERO · portrait left, text right, on warm white
   ========================================================= */
.hero__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 4.5vw, 64px) var(--gutter); display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: clamp(40px, 6.5vw, 96px); align-items: center; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 53% 25%; }
.hero__copy { container-type: inline-size; }
/* sized from the column so the longest rotating phrase always fits on one line */
h1.hero__title { font-size: min(80px, 12.4cqi); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 28px; }
.hero__title em { color: var(--accent); }
.hero__line { display: block; }
/* every phrase shares one grid cell, so the line keeps its height and width: no layout jump */
.rotator { display: grid; }
.rotator__item { grid-area: 1 / 1; display: block; white-space: nowrap; font-style: italic; color: var(--accent); opacity: 0; transition: opacity .6s ease; }
.rotator__item.is-active { opacity: 1; transition: opacity .9s ease .55s; }
.rotator-phrases { display: none; }   /* the extra headline phrases: edited in the page, shown one at a time by the script */
p.hero__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 520px; margin-bottom: 34px; }
.hero__actions { display: flex; align-items: center; gap: 20px; }
.rotator-pause { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.rotator-pause:hover { border-color: currentColor; }
.rotator-pause span { width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.rotator-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .rotator-pause { display: none; } .rotator__item { transition: none; } }

/* =========================================================
   CREDIBILITY · static, compact, between fine rules
   ========================================================= */
/* =========================================================
   MOVING STRIP (homepage, under the hero)
   The phrases are a list in the page (one per line); the script repeats them so they loop without a gap,
   adds the small marks between them through CSS, pauses on hover, on focus and with its button, and
   leaves them still, wrapped and centred for visitors who ask for reduced motion.
   ========================================================= */
.marquee { position: relative; overflow: hidden; padding: 0; color: var(--bg); --strip-bg: var(--wp--preset--color--cognac); }
.marquee.has-atelier-beige-background-color, .marquee.has-warm-white-background-color, .marquee.has-trench-background-color { color: var(--text); }
.marquee.has-atelier-beige-background-color { --strip-bg: var(--wp--preset--color--atelier-beige); }
.marquee.has-warm-white-background-color { --strip-bg: var(--wp--preset--color--warm-white); }
.marquee.has-trench-background-color { --strip-bg: var(--wp--preset--color--trench); }
.marquee.has-cognac-deep-background-color { --strip-bg: var(--wp--preset--color--cognac-deep); }
.marquee.has-paris-noir-background-color { --strip-bg: var(--wp--preset--color--paris-noir); }
/* soft fades at both ends; the pause button sits in the right-hand one */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 7vw, 110px); z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--strip-bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--strip-bg) 30%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 40s) linear infinite; }
ul.marquee__items { list-style: none; margin: 0; padding: 28px 0; display: flex; flex: none; align-items: center; }
.marquee__items li { display: flex; align-items: center; white-space: nowrap; font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; }
.marquee__items li::after { content: "\2726"; font-family: var(--sans); font-size: .55em; margin: 0 1.6em; opacity: .85; }
@keyframes marquee { to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); } }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2; background-color: transparent; border-color: currentColor; color: inherit; }
.marquee__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; justify-content: center; }
  .marquee__track > [aria-hidden="true"] { display: none; }
  ul.marquee__items { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 6px; padding: 22px var(--gutter); }
  .marquee__items li { white-space: normal; text-align: center; }
}

.facts { padding: var(--sp-block) var(--gutter); }
.hero + .facts { padding-block: 0; }          /* homepage: sits straight under the hero, as approved */
.feature + .facts { padding-top: 0; }
.facts__list { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-around; gap: 24px; padding: 26px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
.facts__item { text-align: center; }
p.facts__num { white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -.018em; margin: 0 0 6px; }
p.facts__label { font-size: 12.5px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soft); line-height: 1.45; margin: 0; }

/* =========================================================
   RECOGNITION
   ========================================================= */
.recognition { padding: var(--sp-section) var(--gutter); }
.recognition__inner { max-width: 1080px; margin: 0 auto; text-align: center; }
h2.recognition__title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 52px; }
ul.recognition__list { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 80px; text-align: left; }
.recognition__list li { border-top: 1px solid var(--rule-c); padding-top: 24px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -.02em; }
p.recognition__bridge { max-width: 560px; margin: 0 auto; color: var(--soft); }

/* =========================================================
   WHY GLOWTH · editorial photo + restrained dark panel
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }   /* no automatic padding from the background colour */
.wp-block-image.split__photo { position: relative; min-height: 760px; }
.split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__panel { display: flex; align-items: center; padding: var(--sp-section) clamp(32px, 6vw, 96px); }
.split__content { max-width: 580px; }
h2.split__title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.025em; margin-bottom: var(--sp-head); }
.split__content > p:not(.eyebrow) { color: var(--soft); }
.method { margin: 32px 0 36px; padding: 22px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
p.method__name { font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
ol.method__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.method__phases li { display: flex; flex-direction: column; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: var(--soft); }
/* the letter takes the panel's full text colour back from the softened label colour */
.method__phases li strong { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: 0; text-transform: none; margin-bottom: 8px; font-weight: 400; color: inherit; color: rgb(from currentColor r g b / 1); }
p.method__note { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--soft); }

/* =========================================================
   THREE WAYS TO WORK TOGETHER · aligned cards, no shadows
   ========================================================= */
.offers { padding: var(--sp-section) var(--gutter); }
.offers > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.offers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 56px; }
h2.offers__title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.025em; }
.offers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.6vw, 52px); align-items: stretch; }
.offer { display: flex; flex-direction: column; }
.wp-block-image.offer__media { overflow: hidden; margin-bottom: 24px; }
.offer__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.offer:hover .offer__media img { transform: scale(1.03); }
p.offer__meta { font-size: var(--fs-label); font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.offer__meta strong { display: inline-block; margin: -5px 8px -5px 0; padding: 4px 8px; border: 1px solid currentColor; font-weight: 500; color: var(--text); }
.offer--waitlist p.offer__meta { color: var(--soft); }
h3.offer__name { font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px; }
p.offer__text { margin-bottom: 14px; }
p.offer__programmes { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
p.offer__cta { margin: auto 0 0; border-top: 1px solid var(--rule-c); }
.offer__cta a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 6px; font-size: 12.5px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; }

.resources-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin-top: 64px; padding: 28px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
.resources-row p.eyebrow { margin-bottom: 6px; }
p.resources-row__text { margin: 0; font-size: 17px; max-width: 640px; }

/* =========================================================
   PROGRAMME FINDER · built from the questions and results in the page
   ========================================================= */
.finder { padding: 0 var(--gutter) var(--sp-section); }
.finder__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.wp-block-image.finder__photo { position: sticky; top: 32px; }
.finder__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.finder__main { max-width: 800px; }
h2.finder__title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.025em; margin: 14px 0; }
p.finder__intro { color: var(--soft); margin-bottom: 36px; }
.finder-card { border: 1px solid var(--rule-c); padding: clamp(24px, 3.6vw, 48px); }
.finder-progress { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 6px; margin-bottom: 14px; }
.finder-progress span { height: 3px; background: var(--support); transition: background-color .3s; }
.finder-progress span.is-done { background: var(--accent); }
.finder-count { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }
.js .finder-step { display: none; }
.js .finder-step.is-active { display: block; animation: finder-in .45s var(--ease); }
p.finder-step__q { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 24px; outline: none; }
ul.finder-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.finder-option { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 16px 20px; border: 1px solid var(--field-border); background: var(--bg); cursor: pointer; font-size: 15.5px; line-height: 1.45; transition: border-color .25s, background-color .25s; }
.finder-option input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--text); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.finder-option input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .2s var(--ease); }
.finder-option input:checked::after { transform: scale(1); }
.finder-option:hover { border-color: var(--text); }
.finder-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--support) 40%, var(--bg)); box-shadow: inset 3px 0 0 var(--accent); }
.finder-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.js .finder-result { display: none; outline: none; }
.js .finder-result.is-active { display: block; animation: finder-in .45s var(--ease); }
h3.finder-result__name { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 16px; }
.finder-result p:not(.eyebrow) { max-width: 560px; margin-bottom: 28px; }
.finder-result p.eyebrow { font-size: 12px; margin-bottom: 10px; }
@keyframes finder-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .finder-step.is-active, .js .finder-result.is-active { animation: none; } }
.finder-nav { display: flex; align-items: center; gap: 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-c); }
.js .finder-nav p { display: none; }   /* labels for the buttons the script builds */
.finder-next { margin-left: auto; cursor: pointer; }
.finder-next:disabled { opacity: .45; cursor: not-allowed; }
.finder-back, .finder-restart { background: none; border: 0; padding: 12px 0; cursor: pointer; font-size: 12.5px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.finder-nav [hidden] { display: none !important; }

/* =========================================================
   CAREER WHEEL (homepage preview and full page share these)
   ========================================================= */
.wheel-section { padding: var(--sp-section) var(--gutter); }
/* four brand tones around the wheel, repeated, so neighbouring areas never share a colour; they follow the
   palette chosen in Styles (Cognac, Trench and mixes of Cognac with Paris Noir and Warm White) */
.wheel-tool {
  --wheel-1: var(--accent);
  --wheel-2: var(--rule);
  --wheel-3: color-mix(in srgb, var(--accent) 50%, var(--text));
  --wheel-4: color-mix(in srgb, var(--accent) 60%, var(--bg));
}
.wheel-tool { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
h2.wheel-copy__title { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.025em; margin: 14px 0 var(--sp-head); }
.js ul.wheel-areas { display: none; }   /* the area names: edited in the page, turned into sliders by the script */
.js .wheel-data { display: none; }   /* the shared "Career Wheel areas" block: names, meanings and first steps, read by the script */
.wheel-area { margin-bottom: 14px; }
p.wheel-area__name { font-weight: 600; margin: 0; }
.wheel-area p { margin: 0 0 4px; }
.wheel-panel { border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); padding: 20px 0; margin-bottom: 18px; }
.wheel-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid currentColor; margin-bottom: 18px; }
.wheel-toggle__btn { min-height: 48px; padding: 12px 14px; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wheel-toggle__btn.is-active { background: var(--text); color: var(--bg); }
.wheel-toggle__btn.is-active .swatch--want { border-color: var(--bg); }
.wheel-sliders { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wheel-sliders label { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 18px; min-height: 44px; cursor: pointer; }
.wheel-sliders__name { font-size: 15px; font-weight: 500; display: flex; align-items: baseline; line-height: 1.3; }
.wheel-sliders__meaning { grid-column: 1 / -1; margin: -10px 0 6px 19px; font-size: 12.5px; line-height: 1.45; color: var(--soft); cursor: default; }
.wheel-sliders output { font-family: var(--serif); font-size: 24px; line-height: 1; min-width: 26px; text-align: right; }
.wheel-sliders .pair { font-size: 13px; color: var(--soft); white-space: nowrap; text-align: right; min-width: 124px; }
.wheel-sliders .pair b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--text); margin: 0 2px 0 4px; }
.wheel-sliders input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; }
.wheel-sliders input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: color-mix(in srgb, var(--text) 35%, transparent); }
.wheel-sliders input[type="range"]::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--text) 35%, transparent); }
.wheel-sliders input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); }
.wheel-sliders input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); }
/* "where I'd like to be": square thumbs, so the views differ by shape as well as colour */
.is-want .wheel-sliders input[type="range"]::-webkit-slider-thumb { border-radius: 2px; background: var(--text); }
.is-want .wheel-sliders input[type="range"]::-moz-range-thumb { border-radius: 2px; background: var(--text); }
.wheel-summary { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.3; letter-spacing: -.01em; margin: 18px 0 0; min-height: 2.6em; }
p.wheel-privacy { font-size: 13.5px; color: var(--soft); margin-bottom: 26px; max-width: 480px; }
.wheel-visual { position: relative; }
.wheel { width: 100%; max-width: 700px; margin: 0 auto; display: block; overflow: visible; touch-action: manipulation; }
.wheel__grid, .wheel__spoke { fill: none; stroke: var(--rule); stroke-width: 1; }
.wheel__now { fill: var(--wheel-1); transition: d .45s var(--ease); }
.wheel__now:nth-child(4n+2) { fill: var(--wheel-2); }
.wheel__now:nth-child(4n+3) { fill: var(--wheel-3); }
.wheel__now:nth-child(4n+4) { fill: var(--wheel-4); }
/* a dot in the same colour beside each slider name */
.wheel-sliders__name::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; transform: translateY(-1px); background: var(--wheel-1); }
.wheel-sliders li:nth-child(4n+2) .wheel-sliders__name::before { background: var(--wheel-2); }
.wheel-sliders li:nth-child(4n+3) .wheel-sliders__name::before { background: var(--wheel-3); }
.wheel-sliders li:nth-child(4n+4) .wheel-sliders__name::before { background: var(--wheel-4); }
.wheel__want { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-dasharray: 6 4; transition: d .45s var(--ease); pointer-events: none; }
.wheel__hit { fill: transparent; cursor: pointer; }
.wheel__label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; fill: var(--text); }
.wheel__centre { fill: var(--bg); stroke: var(--rule); }
.wheel__avg { font-family: var(--serif); font-size: 28px; fill: var(--text); }
.is-want .wheel__now { opacity: .55; }
.wheel-legend { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin: 20px 0 0; font-size: 12.5px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; }
.wheel-legend li { display: flex; align-items: center; gap: 10px; }
.swatch { width: 22px; height: 12px; flex: none; display: inline-block; }
.swatch--now { background: linear-gradient(90deg, var(--wheel-1) 25%, var(--wheel-2) 25% 50%, var(--wheel-3) 50% 75%, var(--wheel-4) 75%); }
.swatch--want { border: 2px dashed var(--text); }
.wheel-tool--full p.wheel-privacy { margin-bottom: 0; }
/* First steps: written in the page, one line per area; the script shows the two for the lowest scores */
.wheel-steps { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-c); }
h2.wheel-steps__title { font-family: var(--sans); font-size: var(--fs-label); font-weight: 400; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 6px; }
p.wheel-steps__intro { font-size: 13.5px; color: var(--soft); margin-bottom: 12px; }
.wheel-steps__out p, p.wheel-steps__all-high { font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; }
.wheel-steps__out strong { font-weight: 600; }
.js ul.wheel-steps__tips, .js p.wheel-steps__all-high { display: none; }
.js p.wheel-steps__all-high.is-shown { display: block; }
ul.wheel-steps__tips { margin: 0; padding-left: 18px; font-size: 15px; }
.wheel-reset { display: block; align-self: flex-start; margin-top: 6px; background: none; border: 0; padding: 10px 0; cursor: pointer; font-size: 12.5px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }

/* warm-white breathing space between two beige sections */
.section-break { padding: 64px var(--gutter); }
.section-break .wp-block-separator { max-width: var(--container); margin: 0 auto; border: 0; border-top: 1px solid var(--rule-c); opacity: 1; height: 0; background: none; }

/* =========================================================
   ABOUT JULIA · text left, photo right
   ========================================================= */
.about { padding: var(--sp-section) var(--gutter); }
.about__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.about__copy { max-width: 560px; }
h1.about__title, h2.about__title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: var(--sp-head); }
p.about__italic { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 24px; line-height: 1.3; letter-spacing: -.02em; margin: 26px 0 20px; }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 58% 15%; }

/* =========================================================
   THE EDIT
   ========================================================= */
.edit { padding: var(--sp-section) 0; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.edit__head { text-align: center; padding: 0 var(--gutter); margin-bottom: 60px; }
h2.edit__title { font-size: clamp(48px, 5.8vw, 86px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: 18px; }
.edit__title em { text-transform: none; }
p.edit__kicker { font-size: 13px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 12px; }
.edit-track { --gap: clamp(20px, 3.4vw, 48px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap) - 2 * var(--gutter)) / 3); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
.edit-track::-webkit-scrollbar { display: none; }
.edit-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.article-card { scroll-snap-align: start; position: relative; text-align: center; }
.wp-block-image.article-card__media { overflow: hidden; margin-bottom: 24px; }
.article-card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); pointer-events: none; }
.article-card:hover img { transform: scale(1.03); }
p.article-card__cat { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
h3.article-card__title { font-weight: 400; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.02em; padding: 0 12px; }
.article-card__title a { text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is one link */
.edit-controls { display: flex; align-items: center; gap: 22px; padding: 44px var(--gutter) 0; }
.edit-controls__btn { width: 52px; height: 52px; border: 1px solid currentColor; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .3s, color .3s; padding: 0; }
.edit-controls__btn::after { content: ""; width: 21px; height: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.edit-controls__btn[data-dir="-1"]::after { transform: scaleX(-1); }
.edit-controls__btn:hover { background: var(--text); color: var(--bg); }
.edit-controls__btn:disabled { opacity: .35; cursor: default; background: transparent; color: inherit; }
.edit-controls__bar { flex: 1; height: 1px; background: var(--rule-c); position: relative; }
.edit-controls__bar span { position: absolute; left: 0; top: -1px; height: 3px; background: currentColor; width: 30%; transition: left .3s var(--ease), width .3s var(--ease); }

/* =========================================================
   FREE GUIDE
   ========================================================= */
.guide { padding: var(--sp-section) var(--gutter); }
.guide__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.cover { aspect-ratio: 3 / 4; padding: 44px 40px; display: flex; flex-direction: column; border: 1px solid var(--rule); }
.wp-block-image.cover__logo { width: 140px; margin-bottom: 24px; }
.cover__logo::after { content: ""; display: block; width: 52px; height: 1px; background: var(--accent); margin-top: 24px; }
p.cover__title { font-family: var(--serif); font-weight: 400; font-size: 68px; line-height: .94; letter-spacing: -.025em; margin: auto 0 20px; }
p.cover__sub { font-size: 11.5px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); line-height: 1.5; max-width: 240px; margin: 0; }
h2.guide__title { font-size: clamp(42px, 4.4vw, 64px); line-height: 1; letter-spacing: -.025em; margin-bottom: 20px; }
p.guide__text { font-size: var(--fs-lead); line-height: 1.55; max-width: 540px; margin-bottom: 30px; }
.guide-form { max-width: 560px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* =========================================================
   THE GLOWTH LETTER
   ========================================================= */
.letter { padding: var(--sp-block) var(--gutter); }
.letter__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 32px 80px; align-items: end; padding: 44px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
h2.letter__title { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 10px; }
.letter__copy p { margin: 0; color: var(--soft); max-width: 480px; }
.letter-form { gap: 14px; }
.letter-form .wp-element-button { min-height: 52px; padding-block: 16px; }
/* a dark band with light type by default; giving the section its own background in the editor overrides this */
.letter:not(.has-background) { background: var(--text); color: var(--bg); --soft: color-mix(in srgb, currentColor 80%, transparent); --rule-c: color-mix(in srgb, var(--rule) 40%, transparent); --focus: currentColor; --label: currentColor; padding-block: clamp(56px, 6vw, 88px); border-bottom: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); }
.letter:not(.has-background) .letter__inner { border-top: 0; border-bottom: 0; padding: 0; }
.letter:not(.has-background) .field input { border-color: transparent; }
.letter:not(.has-background) p.field-error { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.letter:not(.has-background) .field [aria-invalid="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--bg)); box-shadow: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { padding: 90px var(--gutter) 40px; }
.site-footer__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.2fr; gap: 40px; }
.site-footer .wp-block-image.footer-logo { margin: 0; }
.footer-logo img { height: 54px; width: auto; }
.site-footer__brand p { font-size: 14px; margin: 20px 0 0; max-width: 340px; color: var(--soft); }
.site-footer__brand p a { text-decoration: none; border-bottom: 1px solid var(--rule-c); color: var(--wp--preset--color--warm-white); color: inherit; }
.site-footer__brand p.footer-email { color: inherit; }
.site-footer .wp-block-social-links.social { margin-top: 14px; }
.footer-nav.wp-block-navigation { border-left: 1px solid var(--rule-c); padding-left: 28px; align-items: flex-start; align-self: start; gap: 0; }
.footer-nav .wp-block-navigation__container { gap: 0; }
.footer-nav .wp-block-navigation-item__content { display: inline-block; padding: 6px 0; font-size: 12.5px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; }
.footer-nav .wp-block-navigation-item__content:hover { color: var(--soft); }
p.site-footer__tag { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.05; letter-spacing: -.025em; margin: 0; }
p.site-footer__tag--italic { font-style: italic; }
p.site-footer__legal { max-width: var(--container); margin: 64px auto 0; padding-top: 24px; border-top: 1px solid var(--rule-c); font-size: 12px; letter-spacing: 1.2px; color: var(--soft); }

/* =========================================================
   INNER PAGES (Career Wheel, Private 1:1 Coaching, Group Coaching)
   ========================================================= */
.page-intro { padding: var(--sp-block) var(--gutter) 0; }
.page-intro__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 96px; align-items: end; padding-bottom: 8px; }
.page-intro h1 { font-size: clamp(46px, 5.8vw, 84px); line-height: 1; letter-spacing: -.025em; margin-top: 14px; }
.page-intro p { color: var(--soft); }
.page-intro__inner p:last-child { margin-bottom: 1.1em; }
.wheel-section--full, .page-intro + .wp-block-group.has-background { margin-top: 56px; }   /* room under a page title before a coloured section */
.wheel-notes { padding: var(--sp-block) var(--gutter); }
.wheel-notes__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-c); }
.wheel-notes__inner > div { padding: 32px 32px 0 0; }
.wheel-notes__inner > div + div { padding-left: 32px; border-left: 1px solid var(--rule-c); }
.wheel-notes h2 { font-weight: 400; font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; }
.wheel-notes p { color: var(--soft); font-size: 15px; }
.cta-band { padding: var(--sp-block) var(--gutter); }
.cta-band__inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; max-width: 680px; }
.cta-band p { color: var(--soft); margin-top: 14px; max-width: 560px; }
.programmes { padding: var(--sp-block) var(--gutter) var(--sp-section); }
.programmes__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.6vw, 52px); align-items: stretch; }
.programmes .offer__media img { aspect-ratio: 3 / 2; }
.programmes .offer { scroll-margin-top: 24px; }
.programmes h3.offer__name, .programmes h2.offer__name { font-weight: 400; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px; }
.programmes .offer:target .offer__name { color: var(--accent); }
.waitlist-page { padding: var(--sp-block) var(--gutter) var(--sp-section); }
.waitlist-page__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.waitlist-page__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.waitlist-page__copy h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 16px; }
.waitlist-page__copy > p:not(.eyebrow) { color: var(--soft); }
.waitlist-form { max-width: 520px; }
.waitlist-form .form-small { margin-bottom: 1.1em; }
p.waitlist-page__alt { margin-top: 32px; }

/* programme and session pages: "Is this for you?" */
.feature { padding: var(--sp-block) var(--gutter) var(--sp-section); }
.feature__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.feature__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.feature__copy { max-width: 640px; }
p.feature__lead { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.25; letter-spacing: -.02em; margin: 14px 0 28px; }
ul.feature__points { list-style: none; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--rule-c); }
.feature__points li { border-top: 1px solid var(--rule-c); padding: 14px 0; font-size: 15.5px; line-height: 1.5; }
.feature__points li::before { content: "\201C"; }
.feature__points li::after { content: "\201D"; }
p.feature__text { max-width: 560px; margin-bottom: 20px; }

/* The Edit: published articles, listed automatically */
.edit-index { padding: var(--sp-block) var(--gutter); }
.edit-index__query { max-width: var(--container); margin: 0 auto; }
.edit-index .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px clamp(20px, 3.4vw, 48px); }
.edit-index .wp-block-post { position: relative; text-align: center; margin: 0; }
.edit-index .wp-block-post-featured-image { margin: 0 0 24px; overflow: hidden; }
.edit-index .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.edit-index .wp-block-post-terms { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.edit-index .wp-block-post-terms a { color: var(--label); text-decoration: none; position: relative; z-index: 1; }
.edit-index h2.wp-block-post-title { font-weight: 400; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.02em; padding: 0 12px; }
.edit-index .wp-block-post-title a { text-decoration: none; }
.edit-index .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is one link */
p.edit-index__empty { text-align: center; color: var(--soft); margin: 0; padding: 48px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }

/* Resources: the store row as its own section */
.store { padding: var(--sp-block) var(--gutter); }
.store .resources-row { max-width: var(--container); margin: 0 auto; }

/* Contact: message box */
.field textarea { min-height: 150px; padding: 12px 16px; border: 1px solid var(--field-border); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; width: 100%; resize: vertical; }
.field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.contact .wp-block-social-links.social { margin-top: 28px; }

/* Privacy policy and other long text */
.legal { padding: var(--sp-block) var(--gutter) var(--sp-section); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal h2 { font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.02em; margin: 44px 0 14px; }
.legal h3 { font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin: 28px 0 10px; }
.legal ul { margin: 0 0 1.1em; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }

/* =========================================================
   INNER PAGES · editorial components (1.2)
   One family for About, Work With Me, the session and programme pages:
   a fine rule above each block, serif headings, soft supporting text.
   ========================================================= */
/* heading on the left, text on the right */
.text-section { padding: var(--sp-block) var(--gutter); }
.text-section__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px clamp(40px, 7vw, 110px); padding-top: 32px; border-top: 1px solid var(--rule-c); }
.text-section h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.text-section__body { max-width: 660px; }
.text-section__body > p { font-size: 17px; }
.text-section__body > p.lead { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -.02em; }

/* grid of short topics, each under a fine rule */
.topics { padding: var(--sp-block) var(--gutter); }
.topics__inner { max-width: var(--container); margin: 0 auto; }
.topics__head { max-width: 760px; margin-bottom: 40px; }
.topics__head h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; }
.topics__head p:not(.eyebrow) { color: var(--soft); margin-top: 16px; }
.topics__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 3.6vw, 52px); }
/* a seventh topic would sit alone on its row, so the last one takes the full width */
.topics:not(.topics--two):not(.topics--four) .topics__grid > .topic:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.topics--two .topics__grid { grid-template-columns: 1fr 1fr; }
.topics--four .topics__grid { grid-template-columns: repeat(4, 1fr); }
.topic { border-top: 1px solid var(--rule-c); padding: 24px 0 34px; }
h3.topic__title { font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.topic p { color: var(--soft); font-size: 15.5px; }
ul.topic__list { list-style: none; margin: 0; padding: 0; }
.topic__list li { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); font-size: 15px; line-height: 1.45; }
.topic__list li:last-child { border-bottom: 0; }
.topic .text-link { margin-top: 12px; }

/* list with a short Cognac rule before each line */
ul.rule-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule-c); }
.rule-list li { position: relative; border-top: 1px solid var(--rule-c); padding: 15px 0 15px 34px; font-size: 16px; line-height: 1.55; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 18px; height: 1px; background: var(--accent); }

/* two columns side by side */
.duo { padding: var(--sp-block) var(--gutter); }
.duo__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(40px, 7vw, 110px); align-items: start; }
.duo h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin-bottom: 24px; }
.duo h3 { font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; }
.duo__col > p:not(.eyebrow) { font-size: 16px; }
.duo .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* numbered steps */
.steps { padding: var(--sp-block) var(--gutter); }
.steps__inner { max-width: var(--container); margin: 0 auto; }
.steps__inner > h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 40px; }
.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(24px, 3vw, 44px); counter-reset: step; }
.steps--three .steps__grid { grid-template-columns: repeat(3, 1fr); }
.step { counter-increment: step; border-top: 1px solid var(--rule-c); padding: 22px 0 30px; }
.step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: var(--accent); margin-bottom: 18px; }
h3.step__title { font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; }
.step p { color: var(--soft); font-size: 15px; }

/* a single statement */
.statement { padding: var(--sp-block) var(--gutter); }
.statement__inner { max-width: 980px; margin: 0 auto; text-align: center; padding: 40px 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
p.statement__text { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.18; letter-spacing: -.02em; margin: 0; }
p.statement__by { margin: 18px 0 0; font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }

/* the six GLOWTH phases in plain language */
.phases { padding: var(--sp-section) var(--gutter); }
.phases__inner { max-width: var(--container); margin: 0 auto; }
.phases__head { max-width: 760px; margin-bottom: 48px; }
.phases__head h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; }
.phases__head p:not(.eyebrow) { color: var(--soft); margin-top: 16px; }
.phases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 3.6vw, 52px); }
.phase { border-top: 1px solid var(--rule-c); padding: 26px 0 36px; }
p.phase__letter { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1; margin: 0 0 14px; }
h3.phase__name { font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 10px; }
.phase p:not(.phase__letter) { color: var(--soft); font-size: 15.5px; }

/* programme and session pages: who it's for, beside a photograph */
h2.feature__title { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin: 14px 0 22px; }
.feature__copy > p:not(.eyebrow):not(.feature__lead):not(.text-link) { font-size: 16.5px; }

/* About: portrait introduction */
.about-intro { padding: var(--sp-block) var(--gutter) var(--sp-section); }
.about-intro__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.about-intro h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 28px; }
.about-intro p.lead { font-size: var(--fs-lead); line-height: 1.55; }
.about-intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }

/* private coaching cards: what she is working towards */
p.offer__towards { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.offer__towards strong { display: block; font-size: 11.5px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }

/* The Edit: departments and intro image */
ul.departments { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.5px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.edit-hero { padding: var(--sp-block) var(--gutter) 0; }
.edit-hero__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.edit-hero h1 { font-size: clamp(48px, 5.8vw, 86px); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; margin: 14px 0 22px; }
.edit-hero h1 em { text-transform: none; }
.edit-hero__copy > p:not(.eyebrow) { color: var(--soft); font-size: 17px; max-width: 520px; }
.edit-hero__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* single article */
.article { padding: var(--sp-block) var(--gutter) var(--sp-block); }
.article__head { max-width: 860px; margin: 0 auto 40px; text-align: center; }
.article__head .wp-block-post-terms { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.article__head .wp-block-post-terms a { color: var(--label); text-decoration: none; }
.article__head .wp-block-post-title { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.025em; }
.article__head .wp-block-post-date { margin-top: 18px; font-size: 13px; letter-spacing: 1px; color: var(--soft); }
.article .wp-block-post-featured-image { max-width: var(--container); margin: 0 auto 56px; }
.article .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__body { max-width: 700px; margin: 0 auto; font-size: 17.5px; line-height: 1.75; }
.article__body > * + * { margin-top: 1.1em; }
.article__body h2 { font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin-top: 1.8em; }
.article__body h3 { font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-top: 1.6em; }
.article__body a { color: var(--accent); }
.article__body blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.35; }
.article__body ul, .article__body ol { padding-left: 22px; }
.article__author { max-width: 700px; margin: 64px auto 0; padding-top: 28px; border-top: 1px solid var(--rule-c); display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; }
.article__author .wp-block-image img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 15%; border-radius: 50%; }
.article__author p { font-size: 15px; color: var(--soft); margin: 0; }
.article__author p strong { color: var(--text); }
.more-edit { padding: var(--sp-block) 0 0; }
.more-edit > h2 { max-width: var(--container); margin: 0 auto 32px; padding: 0 var(--gutter); font-size: var(--fs-h2); letter-spacing: -.025em; }

/* page introductions with a long, outcome-led heading */
.page-intro--long .page-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.page-intro--long h1 { max-width: 1080px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.025em; }
.page-intro--long .page-intro__inner > :last-child { max-width: 700px; }
.page-intro .wp-block-buttons { margin: 6px 0 1.1em; }

/* Work With Me: the three routes without a section heading */
.offers--page { padding-top: var(--sp-block); }
.offers h2.offer__name { font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px; }
p.topic__note { margin-top: 22px; font-size: 15px; color: var(--soft); }
.topic__note a, .topic p a, .rule-list a, .text-section__body a { text-underline-offset: 3px; }

/* photographs inside two-column sections */
.duo--media .duo__inner { align-items: center; }
.duo--portrait .duo__inner { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.duo--portrait.duo--reverse .duo__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.duo__photo--portrait { max-width: 520px; }
.duo .wp-block-image.duo__photo--portrait img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
.duo--reverse .duo__photo--portrait { margin-left: auto; }
p.duo__note { margin-top: 22px; font-size: 14.5px; color: var(--soft); }
.duo .rule-list { margin-bottom: 4px; }
.duo .text-link { margin-top: 10px; }
.duo .wp-block-buttons { margin-top: 26px; }
.cta-band .wp-block-social-links.social, .about-intro .wp-block-social-links.social { margin-top: 24px; }
.about-intro__copy > p:not(.eyebrow):not(.lead) { color: var(--soft); }

/* The Edit: empty state before the first article is published */
.edit-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: 40px 0; border-top: 1px solid var(--rule-c); }
.edit-index .wp-block-query-pagination { margin-top: 56px; gap: 18px; font-size: 13px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; }
.edit-index .wp-block-query-pagination a { text-decoration: none; }
.edit-empty__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.edit-empty h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin-bottom: 18px; }
.edit-empty__copy > p:not(.eyebrow):not(.text-link) { color: var(--soft); max-width: 520px; }

/* Resources: Before You Quit with what is inside */
.guide--page .guide__inner { align-items: start; }
.guide--page .guide__cover { position: sticky; top: 32px; }
p.guide__sub { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -.02em; margin: -6px 0 22px; }
p.guide__label { font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin: 6px 0 10px; }
.guide--page .rule-list { margin-bottom: 34px; max-width: 620px; }
.guide--page p.guide__text { margin-bottom: 26px; }

/* Before You Quit: the guide moves to the resource store */
.guide .wp-block-buttons { margin-top: 4px; }
p.guide__note { margin-top: 14px; font-size: 13px; color: var(--soft); }
/* Before You Quit: the mockup with the phone replaces the drawn cover on Home and The Edit */
.guide__inner--mockup { max-width: 1240px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); }
.guide__inner--mockup .guide__cover { max-width: none; }
.guide__mockup { margin: 0; }
.guide__mockup img { display: block; width: 100%; height: auto; }

/* Contact */
.contact .rule-list { margin: 4px 0 24px; }
p.contact__direct { color: var(--soft); margin-bottom: 24px; }

/* two buttons in a call-to-action band sit side by side on wide screens */
@media (min-width: 1101px) { .cta-band .wp-block-buttons { flex-wrap: nowrap; flex-shrink: 0; } }

/* archive pages (categories) */
.archive-intro h1 { text-transform: none; }

/* posts and other pages that use the default templates */
.page-default { max-width: 760px; margin: 0 auto; padding: var(--sp-block) var(--gutter) var(--sp-section); }
.page-default .wp-block-post-title { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 32px; }
.page-default .wp-block-post-content > * + * { margin-top: 1.1em; }

/* "coming soon" note for links to pages that are not built yet */
.glowth-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 12px 18px; font-size: 13px; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.glowth-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .main-nav .wp-block-navigation__container { gap: 22px; }
  .hero__inner { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .offers__grid, .programmes__grid { gap: 28px; }
  /* reserve two lines for card eyebrows so titles stay level when one wraps */
  .offers__grid p.offer__meta { display: flex; flex-wrap: wrap; align-content: flex-end; align-items: center; line-height: 1.6; min-height: 3.2em; }
}

@media (max-width: 1100px) {
  /* compact centred logo; the navigation row becomes the menu button */
  .masthead { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-c); }
  .masthead .wp-block-site-logo img { width: 150px !important; }
  .footer-logo img { height: 44px; }
  .nav-row { position: absolute; top: 0; right: var(--gutter); width: auto; height: 100%; display: flex; align-items: center; border: 0; }
  .main-nav.wp-block-navigation { min-height: 0; }
  .main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid !important; }
  .main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; position: fixed; inset: 0; z-index: 100000; overflow: auto; }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: grid !important; position: absolute; top: 14px; right: var(--gutter); }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; flex-wrap: nowrap; }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; background: transparent !important; left: auto !important; }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: none; }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { display: block; }

  .offers { padding-left: 0; padding-right: 0; }
  .offers__head, .resources-row { margin-left: var(--gutter); margin-right: var(--gutter); }
  .offers__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 20px; scroll-padding: 0 var(--gutter); scrollbar-width: none; max-width: none; }
  .offers__grid::-webkit-scrollbar { display: none; }
  .offer { scroll-snap-align: start; }
  .programmes__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__copy { order: -1; }
  .hero__photo img { aspect-ratio: 1 / 1; object-position: 50% 25%; }
  .facts__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 24px 0; }
  ul.recognition__list { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
  h2.recognition__title { margin-bottom: 40px; }
  .split { grid-template-columns: 1fr; }
  .wp-block-image.split__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .split__panel { padding: 64px var(--gutter) 72px; }
  ol.method__phases { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .offers__head { flex-direction: column; align-items: flex-start; }
  .resources-row { grid-template-columns: 1fr; }
  .finder__inner { grid-template-columns: 1fr; }
  .wp-block-image.finder__photo { display: none; }
  /* heading first, then the wheel, then its controls */
  .wheel-tool { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .wheel-copy { display: contents; }
  .wheel-tool > .wheel-visual { order: 1; margin: 0 0 28px; }
  .wheel-panel, .wheel-privacy, .wheel-copy > .wp-block-buttons, .wheel-copy > .wheel-reset { order: 2; }
  .about__inner { grid-template-columns: 1fr; }
  .wp-block-image.about__photo { order: -1; max-width: 520px; }
  .edit-track { grid-auto-columns: 62%; }
  .guide__inner { grid-template-columns: 1fr; }
  .guide__cover { max-width: 260px; }
  .cover { padding: 30px 26px; }
  .wp-block-image.cover__logo { width: 110px; }
  p.cover__title { font-size: 48px; }
  .letter__inner { grid-template-columns: 1fr; align-items: start; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand, .site-footer__sign { grid-column: 1 / -1; }
  .page-intro__inner { grid-template-columns: 1fr; }
  .wheel-notes__inner { grid-template-columns: 1fr; }
  .wheel-notes__inner > div, .wheel-notes__inner > div + div { padding: 28px 0; border-left: 0; }
  .wheel-notes__inner > div + div { border-top: 1px solid var(--rule-c); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .programmes__grid { grid-template-columns: 1fr; }
  .waitlist-page__inner, .feature__inner { grid-template-columns: 1fr; }
  .text-section__inner, .duo__inner, .duo--portrait .duo__inner, .duo--portrait.duo--reverse .duo__inner, .about-intro__inner, .edit-hero__inner { grid-template-columns: 1fr; }
  .wp-block-image.about-intro__photo { order: -1; max-width: 480px; }
  .edit-empty { grid-template-columns: 1fr; }
  .guide--page .guide__cover { position: static; }
  .duo--reverse .duo__photo--portrait { margin-left: 0; }
  .topics__grid, .topics--four .topics__grid, .phases__grid { grid-template-columns: 1fr 1fr; }
  .topics:not(.topics--two):not(.topics--four) .topics__grid > .topic:last-child:nth-child(3n+1) { grid-column: auto; }
  .topics:not(.topics--two):not(.topics--four) .topics__grid > .topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps__grid, .steps--three .steps__grid { grid-template-columns: 1fr 1fr; }
  .wp-block-image.feature__photo { max-width: 420px; }
  .edit-index .wp-block-post-template { grid-template-columns: 1fr 1fr; }
  .wp-block-image.waitlist-page__photo { max-width: 420px; }
}

@media (max-width: 640px) {
  :root { --sp-section: 80px; --sp-block: 56px; }
  .masthead { padding-top: 14px; padding-bottom: 14px; min-height: 73px; }   /* room for the 44px menu button */
  .masthead .wp-block-site-logo img { width: 128px !important; }
  .footer-logo img { height: 38px; }
  p.hero__lead { font-size: 18px; margin-bottom: 26px; }
  .hero__actions .wp-block-buttons { flex: 1; }
  .hero__actions .wp-block-button, .hero__actions .wp-block-button__link { width: 100%; }
  p.facts__num { font-size: 20px; white-space: normal; }
  p.facts__label { font-size: 11px; letter-spacing: 1.1px; }
  .recognition__list li { font-size: 22px; padding-top: 20px; }
  .method__phases li strong { font-size: 30px; }
  .offers__head { margin-bottom: 36px; }
  .offers__grid { grid-auto-columns: 82%; gap: 18px; }
  .finder-card { padding: 22px 16px; }
  .finder-option { padding: 14px; font-size: 15px; }
  .finder-nav { flex-wrap: wrap; gap: 12px 20px; }
  .finder-next { width: 100%; order: -1; margin-left: 0; }
  .wheel-sliders label { grid-template-columns: 1fr auto; grid-template-areas: "name value" "meaning meaning" "range range"; gap: 0 12px; padding: 6px 0; }
  .wheel-sliders__meaning { grid-area: meaning; margin: 2px 0 0 19px; }
  .wheel-sliders__name { grid-area: name; }
  .wheel-sliders output, .wheel-sliders .pair { grid-area: value; }
  .wheel-sliders input[type="range"] { grid-area: range; height: 40px; }
  .wheel-toggle { grid-template-columns: auto 1fr; }
  .wheel-toggle__btn { padding: 10px 14px; letter-spacing: 1px; font-size: 12px; gap: 8px; }
  .wheel__label { font-size: 15px; }
  .section-break { padding: 40px var(--gutter); }
  .edit__head { margin-bottom: 40px; }
  .edit-track { grid-auto-columns: 80%; }
  .edit-controls { padding-top: 28px; }
  .field-row { grid-template-columns: 1fr; }
  .glowth-form .wp-element-button { width: 100%; }
  .programmes h3.offer__name, .programmes h2.offer__name { font-size: 25px; }
  .edit-index .wp-block-post-template { grid-template-columns: 1fr; gap: 44px; }
  .topics__grid, .topics--two .topics__grid, .topics--four .topics__grid, .phases__grid, .steps__grid, .steps--three .steps__grid { grid-template-columns: 1fr; }
  .article__author { grid-template-columns: 64px 1fr; }
  .article__author .wp-block-image img { width: 64px; height: 64px; }
  .cta-band .wp-block-buttons, .cta-band .wp-block-button, .cta-band .wp-block-button__link { width: 100%; }
  .footer-nav.wp-block-navigation { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .offer__media img, .article-card__media img { transition: none; }
}

/* =========================================================
   COPY UPDATE (26 October 2026): hero proof line, the six situations, wheel prompts, FAQs
   ========================================================= */
.hero__actions { flex-wrap: wrap; row-gap: 6px; }
p.hero__proof { margin-top: 30px; max-width: 520px; font-size: 12px; font-weight: 400; line-height: 1.7; letter-spacing: 1.6px; text-transform: uppercase; color: var(--soft); }
/* "Does this sound familiar?": each situation opens with the reader's own thought, in italics */
p.recognition__intro { max-width: 560px; margin: -28px auto 52px; font-size: var(--fs-lead); color: var(--soft); }
.recognition__list--thoughts li { font-family: var(--sans); font-size: 16px; line-height: 1.65; letter-spacing: 0; color: var(--soft); }
.recognition__list--thoughts li > em:first-child { font-weight: 400; display: block; margin-bottom: 12px; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 27px); line-height: 1.25; letter-spacing: -.02em; color: var(--text); }
/* homepage Career Wheel: how to use the sliders, and what the full wheel adds */
p.wheel-instruction { margin: -8px 0 14px; font-size: 14px; color: var(--soft); }
p.wheel-note { margin-bottom: 18px; }
p.page-intro__note { margin-top: 14px; font-size: 15px; color: var(--soft); }
/* questions on the programme pages */
.faq .text-section__body h3.faq__q { font-weight: 400; margin: 0 0 8px; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.02em; }
.faq .text-section__body h3.faq__q ~ h3.faq__q { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rule-c); }
.faq .text-section__body > p { margin: 0; }
@media (max-width: 900px) {
  .wheel-copy > .wheel-instruction, .wheel-copy > .wheel-note { order: 2; }
}
@media (max-width: 640px) {
  .hero__actions .text-link { flex-basis: 100%; }
  p.recognition__intro { margin: -20px auto 36px; }
  .recognition__list--thoughts li { font-size: 15.5px; }
  .recognition__list--thoughts li > em:first-child { font-size: 21px; }
}

/* =========================================================
   DESIGN UPDATE (27 October 2026): homepage Career Wheel card, programme finder, "Does this sound familiar?"
   ========================================================= */
/* Career Wheel (homepage): heading across the top, then the wheel and the sliders on a warm-white card with
   dark type, whatever background the section is given (dark on the homepage) */
.wheel-tool--home { --card: var(--wp--preset--color--warm-white); }
.wheel-tool--home .tool-head { border-top: 0; padding-top: 0; }
.wheel-tool--home h2.wheel-copy__title { margin: 16px 0 20px; }
.wheel-tool--home .wheel-copy > p:not(.wheel-instruction, .wheel-privacy, .wheel-note) { font-size: 17px; color: var(--soft); }
.wheel-tool--home .wheel-instruction,
.wheel-tool--home .wheel-panel,
.wheel-tool--home .wheel-note,
.wheel-tool--home .wheel-copy > .wp-block-buttons,
.wheel-tool--home > .wheel-visual {
  --text: var(--wp--preset--color--paris-noir);
  --bg: var(--wp--preset--color--warm-white);
  --rule-c: color-mix(in srgb, var(--rule) 60%, transparent);
  --soft: color-mix(in srgb, currentColor 80%, transparent);
  --focus: var(--accent);
  color: var(--wp--preset--color--paris-noir);
  position: relative; z-index: 1;
}
.wheel-tool--home p.wheel-instruction { margin: 0 0 12px; font-size: 13.5px; color: color-mix(in srgb, var(--wp--preset--color--paris-noir) 72%, transparent); }
.wheel-tool--home .wheel-panel { margin: 0 0 22px; padding: 0; border: 0; }
.wheel-tool--home .wheel-sliders__name { font-size: 15.5px; }
.wheel-tool--home .wheel-sliders output { font-size: 26px; }
.wheel-tool--home .wheel-summary { margin-top: 18px; padding: 18px 22px; min-height: 0; background: color-mix(in srgb, var(--support) 70%, var(--card)); font-size: 21px; }
.wheel-tool--home p.wheel-note { margin: 0 0 18px; font-size: 16px; }
.wheel-tool--home p.wheel-privacy { font-size: 12.5px; color: var(--soft); }
.wheel-tool--home .wheel__label { font-size: 13px; letter-spacing: 1.6px; }
.wheel-tool--home .wheel__avg { font-size: 30px; }
@media (min-width: 901px) {
  .wheel-tool--home { grid-template-columns: clamp(28px, 4vw, 60px) minmax(0, 1fr) minmax(0, 1fr) clamp(28px, 4vw, 60px); column-gap: 0; row-gap: 0; align-items: start; }
  .wheel-tool--home > .wheel-copy { display: contents; }
  .wheel-tool--home .wheel-copy > .tool-head { grid-row: 1; }
  .wheel-tool--home .wheel-copy > h2 { grid-row: 2; }
  .wheel-tool--home .wheel-copy > p:not(.wheel-instruction, .wheel-privacy, .wheel-note) { grid-row: 3; margin-bottom: 52px; }
  .wheel-tool--home .wheel-copy > .tool-head,
  .wheel-tool--home .wheel-copy > h2,
  .wheel-tool--home .wheel-copy > p:not(.wheel-instruction, .wheel-privacy, .wheel-note) { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 680px; }
  /* the card, drawn behind rows 4 to 7 across all four columns */
  .wheel-tool--home::before { content: ""; grid-column: 1 / -1; grid-row: 4 / 8; align-self: stretch; background: var(--card); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
  .wheel-tool--home > .wheel-visual { grid-column: 2; grid-row: 4 / 8; align-self: center; padding: 48px 40px 48px 0; }
  .wheel-tool--home .wheel { max-width: 560px; }
  .wheel-tool--home .wheel-copy > .wheel-instruction { grid-column: 3; grid-row: 4; padding-top: 52px; }
  .wheel-tool--home .wheel-copy > .wheel-panel { grid-column: 3; grid-row: 5; }
  .wheel-tool--home .wheel-copy > .wheel-note { grid-column: 3; grid-row: 6; }
  .wheel-tool--home .wheel-copy > .wp-block-buttons { grid-column: 3; grid-row: 7; padding-bottom: 52px; }
  .wheel-tool--home .wheel-copy > .wheel-privacy { grid-column: 1 / -1; grid-row: 8; justify-self: center; text-align: center; max-width: 620px; margin: 22px 0 0; }
}
@media (max-width: 900px) {
  /* phones: the same card, made of the wheel, the sliders and the button stacked with no gaps */
  .wheel-tool--home > .wheel-visual,
  .wheel-tool--home .wheel-copy > .wheel-instruction,
  .wheel-tool--home .wheel-copy > .wheel-panel,
  .wheel-tool--home .wheel-copy > .wheel-note,
  .wheel-tool--home .wheel-copy > .wp-block-buttons { background: var(--card); margin: 0; padding-inline: 20px; }
  .wheel-tool--home > .wheel-visual { padding-top: 24px; padding-bottom: 16px; }
  .wheel-tool--home .wheel-copy > .wheel-panel { padding-bottom: 18px; }
  .wheel-tool--home .wheel-copy > .wp-block-buttons { padding-bottom: 28px; }
  .wheel-tool--home .wheel-copy > .wheel-privacy { order: 3; margin-top: 20px; }
}

/* Programme finder: a full-height photo, a large 01 / 04 counter, a bigger question and four answer tiles */
.finder { padding: 0; }
.finder__inner { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; }
.wp-block-image.finder__photo { position: relative; top: 0; margin: 0; min-height: 100%; }
.finder__photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.finder__main { max-width: 920px; padding: clamp(72px, 7vw, 120px) clamp(32px, 6vw, 110px); }
.finder .tool-head { border-top: 0; padding-top: 0; }
h2.finder__title { margin: 12px 0 14px; }
p.finder__intro { font-size: 17px; margin-bottom: 44px; }
.finder-card { border: 0; padding: 0; min-height: 560px; }   /* a steady height from question to question */
/* the script keeps "Question 1 of 4" for screen readers and shows the large counter */
.finder-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p.finder-number { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--soft); }
.finder-number[hidden] { display: none; }
.finder-number span { font-size: clamp(48px, 4.4vw, 64px); font-weight: 400; letter-spacing: -.025em; color: var(--accent); }
.finder-progress { margin-bottom: 34px; }
.finder-progress span { height: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
p.finder-step__q { font-weight: 400; font-size: clamp(32px, 3.1vw, 46px); line-height: 1.08; letter-spacing: -.025em; margin-bottom: 30px; }
ul.finder-options { grid-template-columns: 1fr 1fr; gap: 14px; counter-reset: answer; }
ul.finder-options > li { counter-increment: answer; }
.finder-option {
  position: relative; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 26px;
  height: 100%; min-height: 156px; padding: 22px 24px 24px; border: 1px solid transparent; box-shadow: none;
  background: var(--wp--preset--color--warm-white); font-size: 16px;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.finder-option::before { content: counter(answer, upper-alpha); font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--accent); }
/* the radio button stays for keyboards and screen readers, stretched invisibly over the whole tile */
.finder-option input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; opacity: 0; }
@media (hover: hover) { .finder-option:hover { border-color: var(--accent); transform: translateY(-2px); } }
.finder-option:has(input:checked) { background: var(--wp--preset--color--paris-noir); color: var(--wp--preset--color--warm-white); border-color: var(--wp--preset--color--paris-noir); box-shadow: none; }
.finder-option:has(input:checked)::before { color: color-mix(in srgb, var(--accent) 55%, var(--wp--preset--color--warm-white)); }
.finder-option:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
.finder-nav { margin-top: 24px; padding-top: 0; border-top: 0; min-height: 52px; }
.finder-next:disabled { visibility: hidden; }   /* appears once an answer is chosen with the keyboard */
.finder-result.is-active { background: var(--wp--preset--color--warm-white); padding: clamp(28px, 4vw, 52px); }
h3.finder-result__name { font-size: clamp(36px, 3.4vw, 50px); }
@media (max-width: 900px) {
  .finder__inner { grid-template-columns: 1fr; }
  .finder__main { padding: var(--sp-block) var(--gutter); }
  .finder-card { min-height: 0; }
}
@media (max-width: 640px) {
  ul.finder-options { grid-template-columns: 1fr; gap: 10px; }
  .finder-option { flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 18px; }
  .finder-option::before { font-size: 26px; flex: none; width: 22px; }
  .finder-card { padding: 0; }
}

/* "Does this sound familiar?": heading, photo and a way forward on the left; the six situations as cards on the
   right, each with a topic label and where to start (no numbers: they're equally important) */
.recognition__inner--cards { max-width: var(--container); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(48px, 6vw, 110px); align-items: start; text-align: left; }
.recognition__inner--cards h2.recognition__title { margin-bottom: 20px; }
.recognition__inner--cards p.recognition__intro { margin: 0 0 30px; max-width: 440px; font-size: var(--fs-lead); color: var(--text); }
.wp-block-image.recognition__photo { margin: 0 0 30px; }
.recognition__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.recognition__inner--cards p.recognition__bridge { margin: 0 0 28px; max-width: 440px; }
.situations { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.situation { display: flex; flex-direction: column; padding: 26px 28px 24px; background: color-mix(in srgb, var(--support) 55%, var(--bg)); color: color-mix(in srgb, var(--text) 86%, transparent); }
.situation p { margin: 0; font-size: 16px; }
.situation p.situation__topic { margin-bottom: 16px; font-size: 12px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; color: var(--label); }
.situation p.situation__thought { margin-bottom: 12px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.25; letter-spacing: -.01em; color: var(--text); }
.situation p.situation__start { margin-top: auto; padding-top: 18px; }
.situation__start a { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; color: var(--text); }
.situation__start a::after { content: "\2192"; font-size: 15px; transition: transform .3s var(--ease); }
.situation__start a:hover::after { transform: translateX(5px); }
@media (max-width: 900px) {
  /* phones: heading, photo, the six situations, then the reassurance and the button */
  .recognition__inner--cards { display: flex; flex-direction: column; }
  .recognition__aside { display: contents; }
  .recognition__aside > .wp-block-image { order: 1; }
  .situations { order: 2; margin-bottom: 28px; }
  .recognition__aside > .recognition__bridge { order: 3; }
  .recognition__aside > .wp-block-buttons { order: 4; }
}
@media (max-width: 640px) { .situations { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .finder-option { transition: none; }
  .finder-option:hover { transform: none; }
  .situation__start a::after { transition: none; }
}

/* =========================================================
   UX PASS (27 October 2026): service buttons, a clearer Career Wheel, the welcome pop-up
   Feedback: titles hard to read (fixed above: heading weight 400 in Styles, looser letter-spacing,
   bigger section titles and labels), service links that didn't look clickable, a wheel without
   explanations and a call to action that came too late.
   ========================================================= */

/* service cards (homepage, Work With Me, Private 1:1 Coaching): the link at the foot of each card is a real button */
p.offer__cta { border-top: 0; padding-top: 10px; }
.offer__cta a { justify-content: center; gap: 12px; min-height: 54px; padding: 16px 24px; border: 1px solid currentColor; font-size: 13px; letter-spacing: 2px; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.offer__cta a::after { margin-left: 0; }
.offer__cta a:hover, .offer__cta a:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--wp--preset--color--warm-white); }

/* Career Wheel: one line explains the area being scored, hovered or tapped */
.wheel-explain { display: flex; flex-direction: column; gap: 2px; min-height: 5.6em; margin: 0 0 16px; padding: 12px 16px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--support) 60%, transparent); font-size: 15px; line-height: 1.5; }
.wheel-explain strong { font-weight: 600; }
.wheel-sliders li.is-current .wheel-sliders__name { font-weight: 600; }
.wheel__now.is-current { stroke: var(--text); stroke-width: 1.5; }
.wheel-sliders output { font-family: var(--serif); font-size: 24px; line-height: 1; min-width: 26px; text-align: right; white-space: nowrap; }
.wheel-tool--home p.wheel-instruction { font-size: 15px; }

/* full Career Wheel page: controls and results on the left, the wheel beside them and kept in view */
.wheel-tool--full { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.wheel-tool--full > .wheel-visual { position: sticky; top: 32px; }
.wheel-tool--full .wheel-panel { border: 0; padding: 0; margin: 0; }
.wheel-tool--full .wheel-panel p.wheel-privacy { margin: 0 0 14px; font-size: 14.5px; max-width: none; }
.wheel-tool--full .wheel-explain { background: var(--bg); }
.wheel-results { display: grid; gap: 14px; margin-top: 18px; }
.wheel-tool--full .wheel-results { grid-template-columns: 1fr 1fr; margin-top: 24px; }
.wheel-results__card, .wheel-tool--full .wheel-steps { margin: 0; padding: 20px 22px; border: 0; background: var(--bg); }
p.wheel-results__label, .wheel-tool--full h2.wheel-steps__title { font-family: var(--sans); font-size: var(--fs-label); font-weight: 400; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: var(--label); margin: 0 0 8px; }
.wheel-tool--full .wheel-summary { margin: 0; min-height: 0; font-size: 19px; line-height: 1.35; }
.wheel-tool--full .wheel-steps__out p, .wheel-tool--full p.wheel-steps__all-high { font-size: 15px; }

/* "talk it through": written in the Career Wheel page, moved by the script to just under the results */
.wheel-cta { margin-top: 14px; padding: 24px 26px; background: var(--wp--preset--color--paris-noir); color: var(--wp--preset--color--warm-white); --soft: color-mix(in srgb, currentColor 84%, transparent); --focus: currentColor; }
p.wheel-cta__title { font-weight: 400; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; }
.wheel-cta p:not(.wheel-cta__title):not(.text-link) { color: var(--soft); margin-bottom: 18px; }
.wheel-tool--full .wheel-reset { margin-top: 10px; }

/* Career Wheel page introduction: what it's for, the three steps and the way in, before any scrolling */
ol.intro-steps { list-style: none; counter-reset: intro-step; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
ol.intro-steps li { counter-increment: intro-step; position: relative; padding-left: 40px; }
ol.intro-steps li::before { content: counter(intro-step); position: absolute; left: 0; top: -2px; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent); }
.page-intro__inner:has(.intro-steps) { align-items: start; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.intro-actions .text-link { margin: 0; }

@media (max-width: 900px) {
  /* phones and tablets: the explanation stays in view while scrolling down the sliders */
  .wheel-explain { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--support) 60%, var(--bg)); }
  .wheel-tool--full > .wheel-visual { position: static; }
  .wheel-tool--full .wheel-results { grid-template-columns: 1fr; }
  .wheel-cta, .wheel-results, .wheel-tool--full .wheel-reset { order: 2; }
}

/* welcome pop-up: the "Welcome pop-up" pattern in the footer, shown in a dialog built by the script */
.welcome-popup { display: none; }
dialog.welcome-dialog { width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; background: var(--bg); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); overflow: auto; }
dialog.welcome-dialog::backdrop { background: rgb(24 21 18 / .6); }
dialog.welcome-dialog[open] { animation: welcome-in .5s var(--ease); }
.welcome-dialog .welcome-popup { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.welcome-popup__cover { display: flex; align-items: center; justify-content: center; padding: 40px 36px; background: var(--support); }
.welcome-popup__cover .cover { width: 100%; padding: 30px 26px; background: var(--bg); }
.welcome-popup__cover .wp-block-image.cover__logo { width: 110px; margin-bottom: 18px; }
.welcome-popup__cover p.cover__title { font-size: 50px; }
.welcome-popup__copy { padding: 52px 48px 40px; display: flex; flex-direction: column; justify-content: center; }
h2.welcome-popup__title { font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 16px; }
.welcome-popup__copy > p:not(.eyebrow) { color: var(--soft); }
.welcome-popup__copy .wp-block-buttons { margin-top: 10px; }
p.welcome-popup__small { font-size: 13px; color: var(--soft); margin: 14px 0 0; }
.welcome-dialog__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; font-size: 28px; line-height: 1; color: var(--text); }
.welcome-dialog__no { align-self: flex-start; margin-top: 8px; padding: 10px 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: var(--soft); }
.welcome-dialog__close:hover, .welcome-dialog__no:hover { color: var(--accent); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* phones: a sheet from the bottom of the screen, without the cover, so the page stays in view */
@media (max-width: 640px) {
  dialog.welcome-dialog { width: 100%; max-height: 85vh; margin: auto 0 0; }
  .welcome-dialog .welcome-popup { grid-template-columns: 1fr; }
  .welcome-popup__cover { display: none; }
  .welcome-popup__copy { padding: 40px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) { dialog.welcome-dialog[open] { animation: none; } }

/* =========================================================
   UX PASS, ROUND 2 (27 October 2026): Lorraine's type scale, calmer homepage, one main action
   (the Career Strategy Session), the wheel invitation, testimonials and the newsletter pop-up
   ========================================================= */

/* "Does this sound familiar?": label, a bolder question, then softer supporting text */
.situation { padding: 28px 30px 30px; }
.situation p.situation__thought { font-size: clamp(22px, 1.8vw, 26px); margin-bottom: 14px; }
.situation p:not(.situation__topic):not(.situation__thought) { font-size: 15px; line-height: 1.6; color: var(--soft); }

/* homepage Career Wheel invitation: a still picture of the wheel beside a short invitation */
.wheel-tool--invite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.wheel-tool--invite > .wheel-visual { order: -1; }
.wheel-tool--invite .wheel { max-width: 560px; }
.wheel-tool--invite .wheel__label { font-size: 13px; letter-spacing: 1.6px; }
.wheel-tool--invite h2.wheel-copy__title { margin: 14px 0 22px; }
.wheel-tool--invite .wheel-copy > p:not(.eyebrow):not(.wheel-privacy) { font-size: 17px; color: var(--soft); max-width: 560px; }
ul.wheel-invite__points { list-style: none; margin: 26px 0 34px; padding: 0; display: grid; gap: 10px; }
ul.wheel-invite__points li { position: relative; padding-left: 28px; }
ul.wheel-invite__points li::before { content: ""; position: absolute; left: 0; top: .8em; width: 16px; height: 1px; background: var(--accent); }
.wheel-tool--invite p.wheel-privacy { margin: 16px 0 0; font-size: 13px; color: var(--soft); }
@media (max-width: 900px) {
  .wheel-tool--invite > .wheel-visual { order: 1; margin: 6px 0 28px; }
  .wheel-tool--invite .wheel-copy > .wp-block-buttons, .wheel-tool--invite .wheel-copy > .wheel-privacy { order: 2; }
}

/* testimonials: three quotes on light cards, then the Strategy Session */
.testimonials { padding: var(--sp-section) var(--gutter); }
.testimonials__inner { max-width: var(--container); margin: 0 auto; }
.testimonials__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
h2.testimonials__title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.025em; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.testimonial { display: flex; flex-direction: column; padding: 38px 34px 32px; background: color-mix(in srgb, var(--support) 55%, var(--bg)); }
.testimonial::before { content: "\201C"; font-family: var(--serif); font-size: 76px; line-height: .55; color: var(--accent); margin-bottom: 14px; }
p.testimonial__quote { margin: 0 0 28px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.4; letter-spacing: -.01em; }
p.testimonial__name { margin: auto 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
p.testimonial__role { margin: 0; font-size: 14px; color: var(--soft); }
.wp-block-buttons.testimonials__cta { justify-content: center; margin-top: 48px; }
@media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } .testimonials__head { margin-bottom: 36px; } }

/* the newsletter pop-up: a photo beside the sign-up form */
.welcome-dialog .welcome-popup--letter { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.welcome-popup--letter .wp-block-image.welcome-popup__photo { margin: 0; position: relative; min-height: 100%; }
.welcome-popup__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-popup--letter .glowth-form { margin-top: 8px; gap: 12px; }
.welcome-popup--letter .glowth-form .wp-element-button { justify-self: stretch; }
@media (max-width: 640px) {
  .welcome-dialog .welcome-popup--letter { grid-template-columns: 1fr; }
  .welcome-popup--letter .welcome-popup__photo { display: none; }
}

/* =========================================================
   CAREER WHEEL, MODERN STYLE (27 October 2026, round 3)
   After the Chapter template: a light background, four clear warm tones, a pale full-length track per area
   with white gaps between areas, sentence-case labels, Poppins numbers, softer controls and light result cards.
   The four tones (caramel, champagne, taupe, blush) repeat around the wheel, so neighbouring areas never match.
   ========================================================= */
.wheel-tool {
  --wheel-1: #CF9A74;
  --wheel-2: #DCC394;
  --wheel-3: #A99D90;
  --wheel-4: #E4B7A3;
  --wheel-track: #F2EDE6;
  --wheel-card: #F6F2EC;
  --wheel-gap: var(--wp--preset--color--warm-white);
}
.wheel__track { fill: var(--wheel-track); }
.wheel__grid { fill: none; stroke: var(--wheel-gap); stroke-width: 1; stroke-dasharray: 2 5; }
.wheel__spoke { stroke: var(--wheel-gap); stroke-width: 5; stroke-linecap: round; }
.wheel__label, .wheel-tool--home .wheel__label, .wheel-tool--invite .wheel__label { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: none; fill: var(--text); }
.wheel__centre { fill: var(--wheel-gap); stroke: none; filter: drop-shadow(0 2px 6px rgb(24 21 18 / .12)); }
.wheel__avg, .wheel-tool--home .wheel__avg { font-family: var(--sans); font-weight: 600; font-size: 22px; fill: var(--text); }
.wheel__want { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 7 5; }
.is-want .wheel__now { opacity: .5; }
.wheel__now.is-current { stroke: var(--text); stroke-width: 1.5; }
.wheel-legend { font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
.swatch--want { border-color: var(--accent); }

/* sliders: a soft rounded track, round handles for today and square cognac-edged handles for the aim */
.wheel-sliders label { grid-template-columns: 150px 1fr 54px; }
.wheel-sliders__name { font-size: 15px; font-weight: 500; }
.wheel-sliders output { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.wheel-sliders input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #E8E1D7; }
.wheel-sliders input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #E8E1D7; }
.wheel-sliders input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 3px solid var(--wp--preset--color--paris-noir); background: var(--wp--preset--color--warm-white); box-shadow: 0 2px 6px rgb(24 21 18 / .15); }
.wheel-sliders input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--wp--preset--color--paris-noir); background: var(--wp--preset--color--warm-white); }
.is-want .wheel-sliders input[type="range"]::-webkit-slider-thumb { border-radius: 4px; border-color: var(--accent); background: var(--wp--preset--color--warm-white); }
.is-want .wheel-sliders input[type="range"]::-moz-range-thumb { border-radius: 4px; border-color: var(--accent); background: var(--wp--preset--color--warm-white); }

/* the full page: everything on one light card inside the beige band */
.wheel-tool--full { padding: clamp(24px, 3.6vw, 56px); background: var(--wp--preset--color--warm-white); box-shadow: 0 30px 60px -40px rgb(24 21 18 / .35); }
.wheel-toggle { border: 0; padding: 4px; gap: 4px; background: var(--wheel-track); }
.wheel-toggle__btn { min-height: 44px; font-size: 13px; letter-spacing: 1.2px; }
.wheel-toggle__btn.is-active { background: var(--wp--preset--color--paris-noir); color: var(--wp--preset--color--warm-white); }
.wheel-tool--full .wheel-explain, .wheel-explain { background: var(--wheel-card); }
.wheel-results__card, .wheel-tool--full .wheel-steps { background: var(--wheel-card); }
.wheel-tool--full .wheel-summary { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; letter-spacing: 0; }
.wheel-summary b { font-weight: 600; }

/* homepage invitation: on the light page, the wheel picture large beside the words */
.wheel-section:has(.wheel-tool--invite) { padding-block: var(--sp-section); }
.wheel-tool--invite .wheel { max-width: 540px; }
.wheel-tool--invite .wheel-copy > p:not(.eyebrow):not(.wheel-privacy) { color: var(--soft); }
@media (max-width: 640px) { .wheel-sliders label { grid-template-columns: 1fr auto; } .wheel__label, .wheel-tool--invite .wheel__label { font-size: 16px; } }


/* testimonials on a photo (round 3, after Lorraine): the photo is the section's background image, set in the block's
   Styles; a dark veil keeps the words readable whatever photo is chosen */
.testimonials--photo { position: relative; isolation: isolate; padding: clamp(96px, 10vw, 150px) var(--gutter); background-color: var(--wp--preset--color--paris-noir); background-size: cover; --soft: color-mix(in srgb, currentColor 84%, transparent); --focus: currentColor; --rule-c: rgb(255 253 249 / .45); }
.testimonials--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(24 21 18 / .62); }
h2.testimonials__label { margin: 0 0 52px; font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; letter-spacing: .28em; text-transform: uppercase; }
.testimonials--photo .testimonial { align-items: center; padding: 44px 34px 36px; text-align: center; background: transparent; border: 1px solid var(--rule-c); }
.testimonials--photo .testimonial::before { color: currentColor; opacity: .75; }
.testimonials--photo p.testimonial__quote { font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.32; }
.testimonials--photo .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--warm-white); border-color: currentColor; }
.testimonials--photo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.testimonials--photo .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background: var(--wp--preset--color--warm-white); border-color: var(--wp--preset--color--warm-white); color: var(--wp--preset--color--paris-noir); }

/* =========================================================
   SHARED PAGE DESIGN (27 October 2026, after the site audit)
   Photo-led openings, full-width photo bands, folding FAQs, a testimonial on the service pages,
   Work With Me as the single services page and The Edit with the free resources.
   ========================================================= */

/* the opening: copy on the left, a large photo on the right, like About */
.page-intro--photo { padding-bottom: var(--sp-block); }
.page-intro--photo .page-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-rows: auto 1fr; gap: 0 clamp(40px, 7vw, 110px); align-items: start; padding-bottom: 0; }
.page-intro--photo .page-intro__inner > :nth-child(1) { grid-column: 1; grid-row: 1; }
.page-intro--photo .page-intro__inner > :nth-child(2) { grid-column: 1; grid-row: 2; max-width: 620px; margin-top: 26px; }
.page-intro--photo .page-intro__inner > .page-intro__photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.page-intro--photo h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; }
.page-intro__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.page-intro__photo img.wp-image-41 { object-position: 78% 50%; }
.page-intro--photo .wp-block-buttons { align-items: center; margin: 22px 0 0; }

/* a full-width photograph between sections */
.wp-block-image.photo-band { margin: 0; }
.photo-band img { display: block; width: 100%; height: clamp(300px, 40vw, 580px); object-fit: cover; }

/* one testimonial on a service page */
.testimonial-single { padding: var(--sp-block) var(--gutter); }
.testimonial-single .testimonial { max-width: 860px; margin: 0 auto; padding: 0; text-align: center; align-items: center; background: transparent; }
.testimonial-single p.testimonial__quote { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.3; }

/* questions that fold open */
.faq .wp-block-details.faq__item { border-top: 1px solid var(--rule-c); padding: 0; margin: 0; }
.faq .wp-block-details.faq__item:last-child { border-bottom: 1px solid var(--rule-c); }
.wp-block-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: "+"; flex: none; font-family: var(--sans); font-weight: 300; font-size: 26px; line-height: 1; color: var(--accent); transition: transform .3s var(--ease); }
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary { padding: 20px 0; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.01em; }
.faq__item > p { margin: 0 0 20px; max-width: 620px; color: var(--soft); }

/* Work With Me: the Strategy Session, the three programmes, the group waitlist */
p.list-label { margin: 22px 0 8px; font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--label); }
.feature--offer { padding-top: var(--sp-section); }
.feature--offer .wp-block-buttons { margin-top: 28px; }
.programmes-head { padding: var(--sp-section) var(--gutter) 48px; }
.programmes-head__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px clamp(40px, 7vw, 110px); align-items: end; }
.programmes-head h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -.025em; margin: 14px 0 18px; }
.programmes-head__copy > p:not(.eyebrow) { color: var(--soft); max-width: 600px; }
.programmes-head__fit p.list-label { margin-top: 0; }
.programmes--hub { padding-top: 0; }
.programmes--hub .offer { background: var(--wp--preset--color--warm-white); padding: 0 0 26px; }
.programmes--hub .offer > :not(.offer__media) { padding-inline: 24px; }
.wp-block-details.programmes__good { max-width: var(--container); margin: 40px auto 0; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
.programmes__good > summary { padding: 18px 0; font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.programmes__good > ul.rule-list { margin-bottom: 18px; border-bottom: 0; }
.waitlist-page--group { padding-top: var(--sp-section); }
.page-intro p.page-intro__note { margin-top: 10px; }

/* The Edit: the free resources follow the articles */
.free-resources { padding-top: var(--sp-section); }

@media (max-width: 900px) {
  .page-intro--photo .page-intro__inner { display: flex; flex-direction: column; gap: 0; }
  .page-intro--photo .page-intro__inner > .page-intro__photo { order: 3; margin-top: 32px; }
  .programmes-head__inner { grid-template-columns: 1fr; }
}

/* the header's "Book a session" is the site's main action, so it keeps the Cognac accent (labels moved to Deep Taupe) */
.main-nav .nav-cta .wp-block-navigation-item__content, .main-nav .nav-cta a { color: var(--accent); }
.main-nav .nav-cta .wp-block-navigation-item__content:hover { color: var(--accent-hover); }

/* ==========================================================================
   ROUND 4 (27 October 2026): clearer sign-up thanks, header icons, slimmer photo strips, Lorraine-style openings
   ========================================================================== */

/* a sent form makes way for the server's thank-you, so nobody wonders whether it worked */
.glowth-form.is-sent > :not(.form-status) { display: none; }
/* (in the section's own text colour, so it shows on the dark Letter band too) */
.glowth-form.is-sent .form-status.is-ok { margin: 0; padding: 0; border: 0; color: inherit; font-family: var(--glowth-font-heading); font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
/* the pop-up: its "thank you" group takes the place of the words and the form */
.welcome-popup__thanks { display: none; }
.welcome-popup.is-thanked .welcome-popup__copy > * { display: none; }
.welcome-popup.is-thanked .welcome-popup__copy > .welcome-popup__thanks { display: block; }
.welcome-popup__thanks h2:focus { outline: none; }
.welcome-popup__thanks > p:not(.eyebrow) { color: var(--soft); }
.welcome-popup__thanks .welcome-dialog__no { margin-top: 18px; }

/* header: the social icons at the far left of the navigation row, the menu stays centred */
.nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.nav-row > .main-nav { grid-column: 2; }
.wp-block-social-links.header-social { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 0 -12px; gap: 0; }
.wp-block-social-links.header-social .wp-block-social-link-anchor { width: 40px; height: 40px; }
.wp-block-social-links.header-social .wp-block-social-link-anchor svg { width: 17px; height: 17px; }
@media (max-width: 1100px) {
  .nav-row { display: flex; }
  .wp-block-social-links.header-social { display: none; }   /* the footer keeps them on smaller screens */
}

/* full-width photos: thin, wide strips; a strip never sits right against a coloured section */
/* (WordPress's own image styles load later, hence the two classes) */
.wp-block-image.photo-band img { height: clamp(150px, 15vw, 230px); }
.photo-band:has(+ .has-background), .photo-band:has(+ .letter) { margin-bottom: var(--sp-section); }
.has-background + .photo-band { margin-top: var(--sp-section); }

/* ---------- page openings in three styles, after the Lorraine template, rotated across the pages ----------
   opening--dark   a black band; the photo on the left runs past its bottom edge
                   (Home, The Next Chapter, Career Wheel)
   opening--left   a beige band; the photo on the left runs past its bottom edge, the words on the right (Home)
   opening--beige  a beige band; centred words on the left, the photo on the right runs past its bottom edge
                   (About, Career Strategy Session, Interview Confidence, The Edit)
   opening--split  the words on a beige half, the photo filling the other half from edge to edge
                   (Work With Me, Job Search Strategy, Contact)
   Each opening is the page's first group: change its class in the editor (Advanced → Additional CSS class) to
   switch style. */
.opening { --overhang: clamp(44px, 5vw, 76px); --band: var(--support); --photo-ratio: 125%; }   /* every opening photo is 4:5 */
.opening--dark { --band: var(--text); color: var(--bg); --label: var(--wp--preset--color--trench); --rule-c: color-mix(in srgb, var(--bg) 30%, transparent); --focus: currentColor; }
.opening--dark, .opening--left, .opening--beige { padding: clamp(44px, 5vw, 76px) var(--gutter) 0; background: linear-gradient(var(--band), var(--band)) top / 100% calc(100% - var(--overhang)) no-repeat; }
.opening--dark > .wp-block-group, .opening--left > .wp-block-group, .opening--beige > .wp-block-group { max-width: var(--container); margin: 0 auto; padding: 0; display: grid; grid-template-rows: minmax(32px, 1fr) auto auto minmax(32px, 1fr) var(--overhang); gap: 0 clamp(40px, 5.5vw, 80px); align-items: start; justify-content: center; }
:is(.opening--dark, .opening--left) > .wp-block-group { grid-template-columns: minmax(0, 520px) minmax(0, 600px); }
.opening--beige > .wp-block-group { grid-template-columns: minmax(0, 600px) minmax(0, 520px); }
.opening > .wp-block-group > :not(figure) { grid-row: 2; margin: 0; max-width: none; }
.opening > .wp-block-group > :not(figure) ~ :not(figure) { grid-row: 3; margin-top: 24px; }
:is(.opening--dark, .opening--left) > .wp-block-group > :not(figure) { grid-column: 2; }
.opening--beige > .wp-block-group > :not(figure) { grid-column: 1; }
/* the photo keeps its 4:5 shape and sits on the bottom edge, running past the band; long words beside it make the
   band taller above it instead of stretching the photo */
.opening > .wp-block-group > figure.wp-block-image { grid-row: 1 / -1; margin: 0; align-self: end; position: relative; }
.opening:is(.opening--dark, .opening--left, .opening--beige) > .wp-block-group > figure img { position: absolute; inset: 0; height: 100%; }
:is(.opening--dark, .opening--left) > .wp-block-group > figure.wp-block-image { grid-column: 1; }
.opening--beige > .wp-block-group > figure.wp-block-image { grid-column: 2; }
/* the photo's shape: 4:5, as most of the photos were taken */
.opening:is(.opening--dark, .opening--left, .opening--beige) > .wp-block-group > figure.wp-block-image::before { content: ""; display: block; padding-top: var(--photo-ratio); }
.opening:is(.opening--dark, .opening--left, .opening--beige) > .wp-block-group > figure img { width: 100%; object-fit: cover; }
.opening + .marquee { margin-top: clamp(40px, 5vw, 72px); }

/* words on the black band */
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) p:not(.eyebrow), .opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) li { color: color-mix(in srgb, var(--bg) 82%, transparent); }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) .eyebrow { color: var(--wp--preset--color--trench) !important; }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) :is(em, .rotator__item), .opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) mark.has-cognac-color { color: var(--wp--preset--color--trench) !important; }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) a:not(.wp-element-button) { color: var(--bg); }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) .is-style-outline .wp-element-button { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 60%, transparent); }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) .is-style-outline .wp-element-button:hover { border-color: var(--bg); }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) .rotator-pause { border-color: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--bg); }
.opening:is(.opening--dark, .has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) ol.intro-steps li::before { color: var(--wp--preset--color--trench); }

/* the beige styles: centred words, as in the template; small labels in black for contrast on beige */
.opening--beige > .wp-block-group > :not(figure), .opening--split > .wp-block-group > :not(figure) { text-align: center; }
:is(.opening--beige, .opening--split) .eyebrow { color: var(--text) !important; }
:is(.opening--beige, .opening--split) :is(.wp-block-buttons, .wp-block-social-links, ul.departments, .intro-actions) { justify-content: center; }
:is(.opening--beige, .opening--split) p { margin-inline: auto; }
:is(.opening--beige, .opening--split) h1 { font-size: clamp(38px, 3.9vw, 58px); line-height: 1.05; letter-spacing: -.025em; margin: 14px 0 22px; }
.opening--beige.edit-hero h1 { font-size: clamp(46px, 4.8vw, 72px); }

/* split: a beige half and a photo half, edge to edge */
.opening--split { padding: 0; }
.opening--split > .wp-block-group { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); grid-template-rows: minmax(32px, 1fr) auto auto minmax(32px, 1fr); gap: 0; align-items: start; min-height: 0; background: linear-gradient(var(--band), var(--band)) left top / 57% 100% no-repeat; }
.opening--split > .wp-block-group > :not(figure) { grid-column: 1; justify-self: center; width: min(100%, 660px); padding-inline: var(--gutter); }
.opening--split > .wp-block-group > figure.wp-block-image { grid-column: 2; position: relative; align-self: stretch; }
.opening--split > .wp-block-group > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening--split > .wp-block-group > figure.wp-block-image::before { content: ""; display: block; padding-top: var(--photo-ratio); }

@media (max-width: 900px) {
  .opening--dark > .wp-block-group, .opening--left > .wp-block-group, .opening--beige > .wp-block-group, .opening--split > .wp-block-group { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .opening > .wp-block-group > figure.wp-block-image { order: 3; margin-top: 36px; align-self: stretch; }
  .opening:is(.opening--dark, .opening--left, .opening--beige) { --photo-ratio: min(125%, 72vh); }
  .opening--beige > .wp-block-group > :not(figure) { text-align: center; }
  .opening--split > .wp-block-group { background: var(--band); }
  .opening--split > .wp-block-group > :first-child { padding-top: 48px; }
  .opening--split > .wp-block-group > figure.wp-block-image { margin-top: 40px; }
  .opening--split > .wp-block-group > figure.wp-block-image::before { display: none; }
  .opening--split > .wp-block-group > figure img { position: static; aspect-ratio: 4 / 5; max-height: 72vh; }
}

/* Contact: the photo moved up into the opening, so the form runs on its own, centred */
.waitlist-page.contact .waitlist-page__inner:not(:has(> figure)) { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* "Does this sound familiar?", compact: the heading, a line and a way forward beside six short thoughts */
.recognition:has(.recognition__inner--compact) { padding-block: var(--sp-block); }
.recognition__inner--compact { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
.recognition__inner--compact h2.recognition__title { font-size: clamp(36px, 3.6vw, 54px); }
.recognition__inner--compact .situations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recognition__inner--compact .situation { padding: 24px 24px 26px; }
.recognition__inner--compact .situation p.situation__topic { margin-bottom: 12px; }
.recognition__inner--compact .situation p.situation__thought { margin: 0; font-size: clamp(20px, 1.6vw, 23px); }
@media (max-width: 1100px) { .recognition__inner--compact .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .recognition__inner--compact .situations { margin-bottom: 28px; } }
@media (max-width: 640px) { .recognition__inner--compact .situations { grid-template-columns: 1fr; } .recognition__inner--compact .situation { padding: 20px 22px; } }
.opening--dark.page-intro h1 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.04; }

/* opening portraits centred on Julia (her position in each photo, measured) */
.opening img.wp-image-6 { object-position: 44% 50%; }
.opening img.wp-image-195 { object-position: 71% 50%; }
.opening img.wp-image-7 { object-position: 58% 15%; }   /* the white-blazer portrait, About: centred on Julia's face, as on the homepage (3 Nov; 82% left her off-centre) */

/* About: the GLOWTH Method heading with a landscape photo at its top right */
.phases__head:has(.phases__photo) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: auto auto 1fr; gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.phases__head:has(.phases__photo) > :not(.phases__photo) { grid-column: 1; max-width: 680px; }
.phases__head > .wp-block-image.phases__photo { grid-column: 2; grid-row: 1 / -1; margin: 0; }
.wp-block-image.phases__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 900px) {
  .phases__head:has(.phases__photo) { display: block; }
  .phases__head > .wp-block-image.phases__photo { margin-top: 32px; }
}

/* ==========================================================================
   ARTICLES AS MAGAZINE FEATURES (28 October 2026): templates/single.html and the parts built by
   wp-build/edit-magazine.mjs, also available as "Article: …" patterns for new articles
   ========================================================================== */

/* the opening: category, title, standfirst and byline on a beige half; the article's featured photo fills the other */
.article.mag { padding: 0; }
.mag-opener { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); min-height: clamp(520px, 44vw, 700px); background: linear-gradient(var(--support), var(--support)) left top / 57% 100% no-repeat; }
.mag-opener__copy { align-self: center; justify-self: center; width: min(100%, 760px); padding: clamp(56px, 6vw, 96px) var(--gutter); text-align: center; }
.mag-opener .wp-block-post-terms { margin-bottom: 22px; font-size: var(--fs-label); font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
.mag-opener .wp-block-post-terms a { color: var(--text); text-decoration: none; }
h1.mag-opener__title { margin: 0 0 26px; font-weight: 400; font-size: clamp(40px, 4.6vw, 70px); line-height: 1.03; letter-spacing: -.025em; }
.mag-standfirst p { max-width: 560px; margin: 0 auto; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; color: var(--text); }
.mag-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 30px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.mag-byline > * { margin: 0; font-size: inherit; }
.mag-byline > * + *::before { content: "\00B7"; margin-right: 14px; }
.mag-opener .wp-block-post-featured-image { position: relative; max-width: none; height: 100%; margin: 0; }
.mag-opener .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* the body: one readable column; photos, pull quotes, spreads and two-column passages break out of it */
.mag-wrap { padding: clamp(64px, 7vw, 112px) var(--gutter) var(--sp-block); container-type: inline-size; }
.article__body.mag-body { --wide: min(1120px, 100cqw); --mid: min(960px, 100cqw); max-width: 680px; font-size: 17.5px; line-height: 1.8; }
.mag-body > * + * { margin-top: 1.15em; }
p.mag-lede { margin-bottom: 1.3em; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.22; letter-spacing: -.02em; }
p.mag-lede + p::first-letter { float: left; margin: .07em .12em 0 0; font-family: var(--serif); font-weight: 400; font-size: 5.2em; line-height: .8; color: var(--accent); }
.mag-body h2 { margin-top: 2.3em; font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.mag-body h2 .mag-num { display: block; margin-bottom: 8px; font-style: italic; font-size: .82em; color: var(--accent); }
.mag-body h3 { font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.mag-body ul { list-style: none; padding-left: 0; }
.mag-body ul > li { position: relative; padding-left: 30px; }
.mag-body li + li { margin-top: .55em; }
.mag-body ul > li::before { content: ""; position: absolute; left: 0; top: .9em; width: 16px; height: 1px; background: var(--accent); }
.mag-body ol { padding-left: 1.5em; }
.mag-body ol > li::marker { font-family: var(--serif); font-style: italic; color: var(--accent); }
.mag-body .wp-block-quote { margin: 2em 0; padding: 4px 0 4px 28px; border-left: 1px solid var(--accent); font-size: 22px; line-height: 1.45; }

/* pull quotes: a line from the article, large; the band version runs edge to edge on beige */
.wp-block-pullquote.mag-pull { margin: 2.4em 0; padding: 0; border: 0; text-align: center; }
.mag-body .wp-block-pullquote.mag-pull { width: var(--wide); margin-left: calc((100% - var(--wide)) / 2); }
.mag-pull blockquote { max-width: 880px; margin: 0 auto; padding: 0; border: 0; }
.mag-pull blockquote::before { content: "\201C"; display: block; margin-bottom: 14px; font-family: var(--serif); font-size: 80px; line-height: .7; color: var(--accent); }
.mag-pull blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.14; letter-spacing: -.025em; }
.wp-block-pullquote.mag-pull--band { padding: clamp(64px, 7vw, 112px) var(--gutter); background: var(--support); }
.mag-body .wp-block-pullquote.mag-pull--band { width: calc(100cqw + 2 * var(--gutter)); margin-top: 3em; margin-bottom: 3em; margin-left: calc((100% - 100cqw) / 2 - var(--gutter)); }

/* photos: wide, a staggered pair, or beside the text */
.wp-block-image.mag-wide { margin: 2.6em 0; }
.mag-body .wp-block-image.mag-wide { width: var(--wide); margin-left: calc((100% - var(--wide)) / 2); }
.wp-block-image.mag-wide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wp-block-group.mag-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.8vw, 28px); align-items: start; margin: 2.6em 0; }
.mag-body .wp-block-group.mag-pair { width: var(--mid); margin-left: calc((100% - var(--mid)) / 2); }
.mag-pair > .wp-block-image { margin: 0; }
.mag-pair > .wp-block-image + .wp-block-image { margin-top: clamp(40px, 7vw, 110px); }
.wp-block-image.mag-pair__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wp-block-group.mag-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin: 2.4em 0; }
.mag-body .wp-block-group.mag-split { width: var(--wide); margin-left: calc((100% - var(--wide)) / 2); }
.mag-split--right > .mag-split__photo { order: 2; }
.mag-split > .wp-block-image { margin: 0; }
.wp-block-image.mag-split__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mag-split__text > * { margin: 0; }
.mag-split__text > * + * { margin-top: 1.15em; }

/* a passage set in two columns, with a fine rule between */
.wp-block-group.mag-columns { margin: 2.2em 0; column-count: 2; column-gap: clamp(32px, 5vw, 72px); column-rule: 1px solid var(--rule-c); }
.mag-body .wp-block-group.mag-columns { width: var(--mid); margin-left: calc((100% - var(--mid)) / 2); }
.mag-columns > * { margin: 0 0 1.1em; break-inside: avoid; }
.mag-columns > ul { break-inside: auto; }
.mag-columns li { break-inside: avoid; }
.mag-columns h3 { margin-top: 0; break-after: avoid; }
.mag-columns > :last-child { margin-bottom: 0; }

/* a beige panel for a checklist or questions */
.wp-block-group.mag-panel { margin: 2.2em 0; padding: clamp(28px, 3.6vw, 52px); background: var(--support); }
.mag-panel > * { margin: 0; }
.mag-panel > * + * { margin-top: 1em; }

/* the author note and the next articles */
.mag-wrap .article__author { max-width: 680px; }
.mag-more { padding-top: var(--sp-block); border-top: 1px solid var(--rule-c); }
.mag-more:not(:has(.wp-block-post)) { display: none; }
h2.mag-more__title { margin: 0 0 48px; font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; }
.mag-more .wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); justify-content: center; }
.mag-more .wp-block-post-featured-image { max-width: none; margin: 0 0 24px; }
.mag-more .wp-block-post-featured-image img { aspect-ratio: 4 / 5; }
.mag-more h3.wp-block-post-title { font-weight: 400; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.02em; padding: 0 12px; }
.mag-more h3.wp-block-post-title a { text-decoration: none; }
.mag-more h3.wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 900px) {
  .mag-opener { display: flex; flex-direction: column; min-height: 0; background: var(--support); }
  .mag-opener .wp-block-post-featured-image { height: auto; }
  .mag-opener .wp-block-post-featured-image img { position: static; aspect-ratio: 4 / 5; max-height: 80vh; }
  .wp-block-group.mag-split { grid-template-columns: 1fr; gap: 28px; }
  .mag-split--right > .mag-split__photo { order: 0; }
  .wp-block-group.mag-columns { column-count: 1; column-rule: 0; }
  .wp-block-image.mag-wide img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .article__body.mag-body { font-size: 17px; }
  .mag-pair > .wp-block-image + .wp-block-image { margin-top: 36px; }
}
p.mag-lede + p { display: flow-root; }   /* the drop cap never runs into what follows */
.mag-split__text > h2 { margin-top: 1.6em; }

/* ==========================================================================
   ROUND 5 (28 October 2026): recommendations carousel, "Does this sound familiar?" with its text back
   ========================================================================== */

/* homepage recommendations: one at a time across a wide, readable measure; arrows and a progress line from app.js */
.testimonials--carousel .testimonials__grid { display: flex; gap: 0; max-width: 980px; margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.testimonials--carousel .testimonials__grid::-webkit-scrollbar { display: none; }
.testimonials--carousel .testimonials__grid.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.testimonials--photo.testimonials--carousel .testimonial { flex: 0 0 100%; padding: 4px clamp(4px, 5vw, 72px); border: 0; scroll-snap-align: center; }
.testimonials--photo.testimonials--carousel p.testimonial__quote { font-weight: 400; font-size: clamp(20px, 2vw, 27px); line-height: 1.45; letter-spacing: -.005em; }
.testimonials--carousel .edit-controls { max-width: 560px; margin: 0 auto; padding: 44px 0 0; }

/* "Does this sound familiar?": each thought in Poppins (more room), with its short text back underneath */
.recognition__inner--compact .situation p.situation__thought { margin: 0 0 10px; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.45; letter-spacing: 0; }
.recognition__inner--compact .situation p:not(.situation__topic):not(.situation__thought) { font-size: 15px; line-height: 1.6; color: var(--soft); }

/* ==========================================================================
   HOMEPAGE COPY 2.0 (29 October 2026): the promise line under the rotating title, the method's six phases
   with a line each, a sentence heading for From the Edit, short lines under two headings
   ========================================================================== */

/* hero: "A career you love…" in bold Poppins between the title and the paragraph */
p.hero__subline { font-family: var(--sans); font-weight: 400; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.4; letter-spacing: -.005em; max-width: 520px; margin: -6px 0 14px; }

/* Why Glowth: the Ikigai line, then one phase per line, the letter at the left and the phase name in Poppins */
p.method__intro { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--soft); }
ol.method__phases--described { grid-template-columns: 1fr; gap: 12px; }
.method__phases--described li { display: block; position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; letter-spacing: 0; text-transform: none; }
.method__phases--described li strong { position: absolute; left: 0; top: -2px; width: 28px; font-size: 26px; margin: 0; }
.method__phases--described li em { font-style: normal; font-weight: 600; color: inherit; color: rgb(from currentColor r g b / 1); }

/* the coaching cards: a short line under the heading */
.offers__head p.offers__intro { max-width: 560px; margin: 16px 0 0; color: var(--soft); }

/* From the Edit: a sentence heading instead of the large magazine title */
h2.edit__title--sentence { font-size: var(--fs-h2); line-height: 1.06; text-transform: none; max-width: 860px; margin: 0 auto 18px; }
p.edit__intro { max-width: 600px; margin: 0 auto 14px; color: var(--soft); }

/* The Glowth Letter: the line and the short text under the heading */
.letter__copy p + p { margin-top: 10px; }

/* ==========================================================================
   HOMEPAGE DESIGN (30 October 2026): the hero on beige, the G.L.O.W.T.H.(TM) Method in a section of its own,
   the recommendations one at a time (round 5's carousel, now switched on), and the strip without a background
   ========================================================================== */

/* hero (opening--left): the same layout as the black band, on Atelier Beige; small labels in black for contrast */
.opening--left .eyebrow { color: var(--text) !important; }   /* (a dark band picked in the editor overrides this) */

/* the G.L.O.W.T.H.(TM) Method: a centred heading and line, the six phases three to a row, the note and the button */
.method-section { padding: var(--sp-section) var(--gutter); }
.method-section__inner { max-width: var(--container); margin: 0 auto; }
h2.method-section__title { max-width: 860px; margin: 0 auto 22px; text-align: center; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.025em; }
.method-section p.method__intro { max-width: 640px; margin: 0 auto clamp(44px, 5vw, 64px); text-align: center; font-size: var(--fs-lead); line-height: 1.55; }
ol.method__phases--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(32px, 4.5vw, 72px); }
.method__phases--grid li { display: block; padding-top: 22px; border-top: 1px solid var(--rule-c); font-size: 15.5px; line-height: 1.6; letter-spacing: 0; text-transform: none; }
.method__phases--grid li strong { display: block; margin: 0 0 16px; font-size: clamp(46px, 4.2vw, 64px); font-weight: 400; color: var(--accent); }
.method__phases--grid li em { display: block; margin-bottom: 8px; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
.method-section p.method__note { max-width: 640px; margin: clamp(40px, 4.5vw, 56px) auto 28px; text-align: center; }
.method-section .wp-block-buttons { justify-content: center; }
@media (max-width: 900px) { ol.method__phases--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {   /* one column, each letter beside its phase */
  ol.method__phases--grid { grid-template-columns: 1fr; gap: 22px; }
  .method__phases--grid li { position: relative; padding: 18px 0 0 54px; }
  .method__phases--grid li strong { position: absolute; left: 0; top: 14px; margin: 0; font-size: 42px; }
}

/* the moving strip with no background colour: dark words on the page colour (the fades follow it), framed by
   two hairlines as wide as the header's, like the old credibility strip */
.marquee:not(.has-background) { color: var(--text); --strip-bg: var(--bg); width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin-inline: auto; border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
.marquee:not(.has-background) ul.marquee__items { padding-block: 24px; }

/* ==========================================================================
   HOMEPAGE, ROUND 2 (30 October 2026): space between the header and the hero, the opening's colour from the
   editor's colour picker, the Why Glowth photo, and two editorial layouts for "You know something needs to change."
   ========================================================================== */

/* every page opening starts a little below the header, so the header's bottom line stays visible */
.opening:is(.opening--dark, .opening--left, .opening--beige, .opening--split) { margin-top: clamp(28px, 3vw, 44px); }
/* the band as a framed panel, exactly as wide as the header's lines (class opening--framed; remove it in the
   editor for a band that runs the full width of the page) */
.opening--framed { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin-inline: auto; }

/* an opening's colour can be chosen in the editor (Block → Styles → Color → Background): the band takes that colour
   and the overhanging photo still runs past it; the dark colours switch the words to light automatically */
.opening.has-background { background-color: transparent !important; }
.opening.has-warm-white-background-color { --band: var(--wp--preset--color--warm-white); }
.opening.has-atelier-beige-background-color { --band: var(--wp--preset--color--atelier-beige); }
.opening.has-trench-background-color { --band: var(--wp--preset--color--trench); }
.opening.has-mushroom-taupe-background-color { --band: var(--wp--preset--color--mushroom-taupe); }
.opening.has-cognac-background-color { --band: var(--wp--preset--color--cognac); }
.opening.has-cognac-deep-background-color { --band: var(--wp--preset--color--cognac-deep); }
.opening.has-deep-taupe-background-color { --band: var(--wp--preset--color--deep-taupe); }
.opening.has-paris-noir-background-color { --band: var(--wp--preset--color--paris-noir); }
.opening:is(.has-paris-noir-background-color, .has-cognac-deep-background-color, .has-deep-taupe-background-color, .has-cognac-background-color) { color: var(--bg); --label: var(--wp--preset--color--trench); --rule-c: color-mix(in srgb, var(--bg) 30%, transparent); --focus: currentColor; }

/* Why Glowth: the desk with the blazer, centred on the chair and the leather pad */
.split__photo img.wp-image-8 { object-position: 62% 50%; }

/* "You know something needs to change.", editorial (class recognition__inner--editorial): the heading and line
   centred, the six thoughts as large serif lines under hairlines, two to a row (three with recognition__inner--three),
   then the cost line and the button */
.recognition__inner--editorial { max-width: var(--container); display: flex; flex-direction: column; align-items: center; text-align: center; }
.recognition__inner--editorial .recognition__aside { display: contents; }
.recognition__inner--editorial h2.recognition__title { order: 1; max-width: 860px; margin: 0 auto 22px; font-size: var(--fs-h2); line-height: 1.06; }
.recognition__inner--editorial p.recognition__intro { order: 2; max-width: 640px; margin: 0 auto clamp(44px, 5vw, 64px); font-size: var(--fs-lead); line-height: 1.55; color: var(--soft); }
.recognition__inner--editorial .situations { order: 3; width: 100%; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(40px, 6vw, 96px); margin: 0; text-align: left; }
.recognition__inner--editorial .situation { padding: 22px 0 0; background: none; border-top: 1px solid var(--rule-c); }
.recognition__inner--editorial .situation p.situation__topic { margin: 0 0 14px; }
.recognition__inner--editorial .situation p.situation__thought { margin: 0; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.22; letter-spacing: -.025em; color: var(--text); }
.recognition__inner--editorial p.recognition__bridge { order: 4; max-width: 600px; margin: clamp(44px, 5vw, 64px) auto 28px; }
.recognition__inner--editorial > .recognition__aside > .wp-block-buttons { order: 5; justify-content: center; }
.recognition__inner--editorial.recognition__inner--three .situations { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(32px, 4.5vw, 72px); }
.recognition__inner--editorial.recognition__inner--three .situation p.situation__thought { font-size: clamp(22px, 1.9vw, 27px); }
@media (max-width: 900px) { .recognition__inner--editorial.recognition__inner--three .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .recognition__inner--editorial .situations, .recognition__inner--editorial.recognition__inner--three .situations { grid-template-columns: 1fr; gap: 28px; }
  .recognition__inner--editorial .situation p.situation__thought { font-size: 23px; }
}


/* ==========================================================================
   FRAMED OPENINGS (30 October 2026): the article opening matches the pages' framed openings (below the header,
   as wide as its lines); the pages themselves carry the class opening--framed
   ========================================================================== */
.mag-opener { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin: clamp(28px, 3vw, 44px) auto 0; }

/* ==========================================================================
   ROUND 3 (30 October 2026): Why Glowth easier to read on black, and coloured sections as framed panels
   ========================================================================== */

/* Why Glowth keeps its photo and black panel; the words get a shorter measure and larger type: the first paragraph
   as a lead, "Glowth Mindset brings them together." as a serif line, the two halves as numbered steps under
   hairlines, and the last line as a serif pull quote (classes why__lead, why__bridge, why__step, why__close) */
.why .split__panel { padding-block: clamp(80px, 8vw, 128px); }
.why .split__content { max-width: 540px; counter-reset: why; }
.why h2.split__title { font-size: clamp(40px, 4.2vw, 62px); margin-bottom: 30px; }
.why .split__content > p.why__lead { margin: 0 0 30px; font-size: 18px; line-height: 1.65; color: color-mix(in srgb, currentColor 90%, transparent); }
.why .split__content > p.why__bridge { margin: 0 0 34px; font-family: var(--serif); font-size: clamp(25px, 2.1vw, 31px); line-height: 1.2; letter-spacing: -.02em; color: currentColor; }
.why .split__content > p.why__step { position: relative; margin: 0 0 30px; padding: 24px 0 0 58px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 16px; line-height: 1.75; counter-increment: why; }
.why .split__content > p.why__step::before { content: counter(why, decimal-leading-zero); position: absolute; left: 0; top: 21px; font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--wp--preset--color--trench); }
.why .split__content > p.why__step strong { display: block; margin-bottom: 6px; font-weight: 600; font-size: 17px; color: var(--bg); }
.why .split__content > p.why__close { margin: 40px 0 0; padding-top: 30px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 28px); line-height: 1.3; letter-spacing: -.01em; color: currentColor; }
@media (max-width: 640px) { .why .split__content > p.why__step { padding-left: 46px; } .why .split__content > p.why__step::before { font-size: 24px; } }

/* a coloured section as a framed panel, as wide as the header's lines, like the openings (class section--framed;
   photo-led sections such as Why Glowth, Kind words and the programme finder stay full width, like magazine spreads) */
.section--framed { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin-inline: auto; }
.section--framed:has(+ :is(.letter, .testimonials--photo, .split, .has-background:not(.section--framed))) { margin-bottom: clamp(56px, 6vw, 96px); }

/* ==========================================================================
   ROUND 4 (30 October 2026): a wider Why Glowth, two homepage gaps, and the new About page
   ========================================================================== */

/* a split with more room for the words (class split--wide): the photo takes 42%, the words 58% */
.split.split--wide { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.split--wide .split__panel { padding: clamp(72px, 7vw, 112px) clamp(32px, 5.5vw, 88px); }
.split--wide .split__content { max-width: 720px; }
/* Why Glowth: the two steps side by side, each with its number above */
.why.split--wide .split__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px); }
.why.split--wide .split__content > * { grid-column: 1 / -1; }
.why.split--wide .split__content > p.why__lead { max-width: 640px; }
.why.split--wide .split__content > p.why__step { grid-column: auto; margin: 0; padding: 22px 0 0; }
.why.split--wide .split__content > p.why__step::before { position: static; display: block; margin-bottom: 14px; }
.why.split--wide .split__content > p.why__close { margin-top: 44px; }
@media (max-width: 900px) {
  .split.split--wide { grid-template-columns: 1fr; }
  .why.split--wide .split__content { display: block; }
  .why.split--wide .split__content > p.why__step { margin-bottom: 26px; padding-left: 0; }
}

/* homepage gaps: white space between the recommendations and the programme finder; less between the Career Wheel
   and The Edit (the thin line between them stays) */
.testimonials--photo + .finder { margin-top: clamp(56px, 6vw, 96px); }
.wheel-section:has(+ .section-break) { padding-bottom: clamp(56px, 6vw, 88px); }
.wheel-section + .section-break { padding-block: 0; }
.section-break + .edit { padding-top: clamp(56px, 6vw, 88px); }

/* ---------- About (30 October 2026) ---------- */
.about-intro h1 em { color: var(--accent); }
.duo__col > p.lead { font-size: var(--fs-lead); line-height: 1.55; }

/* the insider view: a black panel, the heading and story on the left, the credentials under hairlines on the right */
.insider { padding: var(--sp-section) clamp(24px, 5vw, 80px); }
.insider__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.insider h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 26px; }
.insider__story > p:not(.eyebrow) { color: var(--soft); }
.insider .eyebrow { color: var(--wp--preset--color--trench) !important; }
ul.insider__credentials { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.insider__credentials li { padding: 18px 0 18px 34px; position: relative; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 16px; line-height: 1.55; }
.insider__credentials li::before { content: "\2726"; position: absolute; left: 2px; top: 20px; font-size: 11px; color: var(--wp--preset--color--trench); }

/* three things: numbered in cognac, like the method, with a closing line */
.topics--numbered .topics__grid { counter-reset: topic; }
.topics--numbered .topic { counter-increment: topic; }
.topics--numbered h3.topic__title::before { content: counter(topic, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: clamp(40px, 3.6vw, 56px); font-weight: 400; line-height: 1; color: var(--accent); }
.topics--numbered .topics__head { max-width: 860px; }
p.topics__close { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 29px); line-height: 1.3; letter-spacing: -.01em; }

/* Why Glowth Mindset (About): what to expect, two to a row under hairlines, and the pull quote */
p.expect__label { margin: 30px 0 4px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
/* Julia's portrait in this section: keep her head in the frame on phones, where the photo is cropped to a wide strip */
.coaching-like .split__photo img { object-position: 50% 12%; }
ul.expect-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); }
/* with an odd number of points, the last one takes the full width instead of leaving a gap */
.expect-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.expect-list li { padding: 18px 0 20px; border-top: 1px solid var(--rule-c); font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.expect-list li strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text); }
p.split__quote { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--rule-c); font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 29px); line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.split.has-atelier-beige-background-color .split__content > p:not(.eyebrow):not(.split__quote):not(.expect__label) { color: var(--soft); }

/* the closing invitation: a full-width beige band, centred */
.closing { padding: var(--sp-section) var(--gutter); text-align: center; }
.closing__inner { max-width: 720px; margin: 0 auto; }
.closing h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em; margin-bottom: 22px; }
.closing p:not(.text-link) { color: var(--soft); margin: 0 auto 28px; max-width: 620px; }
.closing .wp-block-buttons { justify-content: center; }
.closing p.closing__note { margin: 34px auto 4px; }
.closing p.text-link { display: flex; justify-content: center; }
.closing .wp-block-social-links.social { justify-content: center; margin-top: 30px; }

@media (max-width: 900px) {
  .insider__inner { grid-template-columns: 1fr; }
  ul.expect-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ROUND 5 (30 October 2026): opening photos inside their panel, and Why Glowth redesigned
   ========================================================================== */

/* Openings: the photo sits inside the colour panel, centred beside the words, a little narrower than the words,
   instead of hanging below the panel (Julia: About, Career Wheel and The Next Chapter looked off; the homepage hero
   followed on 30 Oct). Split openings keep their half-width photo. */
.opening:is(.opening--dark, .opening--left, .opening--beige) { --overhang: 0px; padding-block: clamp(48px, 5.5vw, 80px); }
.opening:is(.opening--dark, .opening--left) > .wp-block-group { grid-template-columns: minmax(0, 440px) minmax(0, 600px); }
.opening--beige > .wp-block-group { grid-template-columns: minmax(0, 600px) minmax(0, 440px); }
.opening:is(.opening--dark, .opening--left, .opening--beige) > .wp-block-group > figure.wp-block-image { align-self: center; }

/* Why Glowth, three designs; the section takes one class: why--index, why--standfirst or why--even.
   In all three the words sit in the middle of the black panel (no empty strip on the right of wide screens),
   the paragraphs share one text size, and the two step titles are serif, like the headings. */
.why:is(.why--index, .why--standfirst, .why--even) .split__panel { justify-content: center; }
.why:is(.why--index, .why--standfirst, .why--even) .split__content { width: 100%; max-width: 800px; }
.why:is(.why--index, .why--standfirst, .why--even) .split__content > p:is(.why__lead, .why__step) { font-size: 17px; line-height: 1.7; }
.why:is(.why--index, .why--standfirst, .why--even) .split__content > p.why__lead { max-width: none; }
.why:is(.why--index, .why--standfirst, .why--even) .split__content > p.why__step strong { margin-bottom: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.015em; }

/* why--index: each step is one row across the panel, number and title on the left, the words on the right */
.why.why--index .split__content { display: block; }
.why.why--index .split__content > p.why__step { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); align-items: start; margin: 0; padding: 30px 0; }
.why.why--index .split__content > p.why__step::before { content: none; }
.why.why--index .split__content > p.why__step strong { margin: 0; }
.why.why--index .split__content > p.why__step strong::before { content: counter(why, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: 28px; line-height: 1; color: var(--wp--preset--color--trench); }
.why.why--index .split__content > p.why__close { margin-top: 0; }

/* why--standfirst: the first paragraph as a serif standfirst, the steps one under the other with their numbers in the
   margin, and the last line under them as the pull quote (Julia's pick, 30 Oct; she wants the quote in the panel) */
.why.why--standfirst .split__content { display: block; }
.why.why--standfirst .split__content > p.why__lead { margin-bottom: 40px; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.45; letter-spacing: -.01em; color: currentColor; }
.why.why--standfirst .split__content > p.why__bridge { margin: 0 0 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--trench); }
.why.why--standfirst .split__content > p.why__step { margin: 0; padding: 26px 0 26px 64px; }
.why.why--standfirst .split__content > p.why__step::before { position: absolute; left: 0; top: 27px; margin: 0; }
.why.why--standfirst .split__content > p.why__close { margin-top: 4px; }

/* why--even: the two steps stay side by side, the shorter one in a narrower column so both end level; the number,
   title and words share rows across the two columns, so both texts start on the same line */
.why.why--even .split__content { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.why.why--even .split__content > p.why__step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.why.why--even .split__content > p.why__step strong { align-self: start; }

@media (max-width: 900px) {
  .opening:is(.opening--dark, .opening--left, .opening--beige) > .wp-block-group > figure.wp-block-image { align-self: stretch; }   /* full width under the words; centred, it would shrink to nothing */
  .why:is(.why--index, .why--standfirst, .why--even) .split__content { display: block; }
  .why.why--index .split__content > p.why__step { display: block; padding: 26px 0; }
  .why.why--index .split__content > p.why__step strong { margin-bottom: 10px; }
  .why.why--standfirst .split__content > p.why__step { padding: 24px 0 24px 52px; }
  .why.why--even .split__content > p.why__step { margin-bottom: 26px; }
}

/* ==========================================================================
   WORK WITH ME (30 October 2026): Julia's new page, photo-led like the previous version
   ========================================================================== */

/* the opening: the second sentence in italic cognac, as on About; balanced lines, so no word sits alone */
.opening--split h1 em { color: var(--accent); }
.opening--split h1 { text-wrap: balance; }
.opening--split p.lead { font-size: var(--fs-lead); line-height: 1.55; }

/* which one is right for you: a full-height photo beside the four situations, each with its starting point */
.chooser__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.wp-block-image.chooser__photo { position: relative; min-height: 100%; margin: 0; }
.chooser__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chooser__main { max-width: 920px; padding: clamp(72px, 7vw, 120px) clamp(32px, 6vw, 110px); }
.chooser h2 { margin: 0 0 clamp(28px, 3vw, 40px); font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.025em; }
ul.chooser__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule-c); }
.chooser__list li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 22px 0; border-top: 1px solid var(--rule-c); }
.chooser__list li strong { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; letter-spacing: -.015em; }
.chooser__list li a { display: inline-flex; align-items: center; padding: 4px 0; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--accent); }
.chooser__list li a::after { content: ""; flex: none; width: 21px; height: 9px; margin-left: 12px; background: currentColor; transition: transform .35s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3E%3Cpath d='M0 4.5h20M16 .5l4 4-4 4' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.chooser__list li a:hover::after { transform: translateX(6px); }
p.chooser__note { margin: 28px 0 0; color: var(--soft); }

/* a photo spread with the photo on the right (class split--photo-right), so two spreads in a row alternate */
.split.split--wide.split--photo-right { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.split--photo-right > .split__photo { order: 2; }
/* what coaching with me is like: "What it isn't" as a sub-heading */
.coaching-like h3.coaching-like__sub { margin: 36px 0 12px; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.025em; }

/* the method, with what each step looks like in the sessions: one group per step (method-steps, method-step) */
.method-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(32px, 4.5vw, 72px); }
.method-step { padding-top: 22px; border-top: 1px solid var(--rule-c); }
p.method-step__letter { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(46px, 4.2vw, 64px); font-weight: 400; line-height: 1; color: var(--accent); }
p.method-step__name { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
p.method-step__line { margin: 0 0 10px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.01em; }
p.method-step__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.method-section--detailed p.method__note { margin-bottom: 0; }

/* choose your way in: one beige band, like the previous programmes band. The Strategy Session on a white panel
   beside its photo, the three programmes as photo cards, group coaching on a white panel beside its photo */
.programmes.programmes--ways { padding-top: var(--sp-section); }
.ways__head { max-width: 760px; margin: 0 auto clamp(40px, 4.5vw, 64px); text-align: center; }
.ways__head h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.025em; }
.way-panel { max-width: var(--container); margin: 0 auto; padding: clamp(24px, 3vw, 40px); background: var(--wp--preset--color--warm-white); scroll-margin-top: 24px; }
.way-panel--start { margin-bottom: clamp(28px, 3.6vw, 52px); }
.way-panel--group { margin-top: clamp(28px, 3.6vw, 52px); }
.way-panel .feature__inner, .way-panel .waitlist-page__inner { align-items: center; }
.way-panel h3:is(.feature__title, .waitlist-page__title) { margin: 14px 0 12px; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
p:is(.feature__for, .offer__for) { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; color: var(--accent); }
/* (the :not()s match the older .feature__copy paragraph size rule, so these win) */
.feature__copy > p:is(.feature__for, .feature__outcome):not(.eyebrow):not(.feature__lead):not(.text-link) { font-size: clamp(19px, 1.5vw, 22px); }
.feature__copy > p.feature__format:not(.eyebrow):not(.feature__lead):not(.text-link) { font-size: 12.5px; }
p.feature__outcome { margin: 22px 0 0; font-family: var(--serif); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; }
p:is(.feature__format, .offer__format) { margin: 22px 0 0; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--label); }
.programmes--ways p.offer__text { color: var(--soft); }
.programmes--ways .offer .rule-list li { padding: 12px 0 12px 30px; font-size: 15px; }
.programmes--ways .offer .rule-list li::before { top: 23px; }
.programmes--ways p.offer__format { margin-top: auto; padding-top: 22px; }
.programmes--ways p.offer__cta { margin-top: 14px; }
.way-panel--group .glowth-form { margin-top: 22px; }
.way-panel .wp-block-buttons { margin-top: 26px; }

/* how it works: four steps on a black framed panel */
.how-it-works.section--framed { margin-block: clamp(56px, 6vw, 96px); }
.how-it-works { padding: var(--sp-block) clamp(24px, 5vw, 80px); }
.how-it-works__inner { max-width: 1160px; margin: 0 auto; }
.how-it-works h2 { margin: 0 0 clamp(32px, 4vw, 52px); text-align: center; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.025em; }
ol.how-it-works__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 44px); counter-reset: how; }
.how-it-works__list li { margin: 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 15.5px; line-height: 1.6; color: var(--soft); counter-increment: how; }
.how-it-works__list li::before { content: counter(how); display: block; margin-bottom: 16px; font-family: var(--serif); font-size: clamp(40px, 3.4vw, 52px); font-weight: 400; line-height: 1; color: var(--wp--preset--color--trench); }
.how-it-works__list li strong { display: block; margin-bottom: 6px; font-weight: 600; color: var(--bg); }

/* not ready yet: the four free ways in as photo cards, on a framed beige panel */
.free-start { padding: var(--sp-block) clamp(24px, 5vw, 80px); }
.free-start__inner { max-width: 1160px; margin: 0 auto; }
.free-start p.eyebrow { text-align: center; }
.free-start h2 { margin: 0 0 clamp(32px, 4vw, 52px); text-align: center; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.025em; }
.free-start__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2.4vw, 36px); }
.free-start__item { display: flex; flex-direction: column; }
.wp-block-image.free-start__media { overflow: hidden; margin: 0 0 20px; }
.free-start__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.free-start__item:hover .free-start__media img { transform: scale(1.03); }
.free-start__item > p:not(.text-link) { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.free-start__item > p strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.015em; color: var(--text); }
.free-start__item p.text-link { margin-top: auto; }

@media (max-width: 900px) {
  .chooser__inner { grid-template-columns: 1fr; }
  .chooser__photo img { position: static; height: auto; aspect-ratio: 3 / 2; }
  .chooser__main { padding: var(--sp-block) var(--gutter); }
  .split.split--wide.split--photo-right { grid-template-columns: 1fr; }
  .split--photo-right > .split__photo { order: 0; }
  ol.how-it-works__list, .free-start__grid, .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  ol.how-it-works__list, .free-start__grid, .method-steps { grid-template-columns: 1fr; }
  .free-start__media img { aspect-ratio: 3 / 2; }
  /* 3 November 2026: the Career Wheel photo keeps the reader's face in the wider phone crop */
  .free-start__media img.wp-image-502 { object-position: 50% 18%; }
}

/* ==========================================================================
   CAREER WHEEL (30 October 2026): Julia's design notes
   ========================================================================== */

/* the opening's italic accent, as on the homepage and Work With Me */
.opening--left h1 em { color: var(--accent); }
.page-intro p.hero__subline { margin: 0 0 16px; }

/* the wheel coloured by score, not by area: 8 to 10 cognac, 5 to 7 caramel, 1 to 4 sand */
.wheel-tool { --tier-high: var(--accent); --tier-mid: #C49A74; --tier-low: #E4D3BF; --wheel-track: #F3EDE5; }
.wheel .wheel__now.tier-high { fill: var(--tier-high); }
.wheel .wheel__now.tier-mid { fill: var(--tier-mid); }
.wheel .wheel__now.tier-low { fill: var(--tier-low); }
.wheel-tool .wheel__want { stroke: var(--wp--preset--color--paris-noir); }
.swatch--now { background: linear-gradient(90deg, var(--tier-low) 0 34%, var(--tier-mid) 34% 67%, var(--tier-high) 67%); }
/* the two lowest areas today: outlined on the wheel, their names in cognac, a ringed dot beside their sliders */
.wheel .wheel__now.is-low { stroke: var(--accent); stroke-width: 2; }
.wheel .wheel__label.is-low { fill: var(--accent); font-weight: 600; }
.wheel-sliders li[data-tier="high"] .wheel-sliders__name::before { background: var(--tier-high); }
.wheel-sliders li[data-tier="mid"] .wheel-sliders__name::before { background: var(--tier-mid); }
.wheel-sliders li[data-tier="low"] .wheel-sliders__name::before { background: var(--tier-low); }
.wheel-sliders li.is-low .wheel-sliders__name::before { box-shadow: 0 0 0 2px var(--wp--preset--color--warm-white), 0 0 0 3.5px var(--accent); }

/* the average in the display serif, with "average" in small capitals under it */
.wheel-tool .wheel__avg { font-family: var(--serif); font-weight: 400; font-size: 25px; fill: var(--text); }
.wheel-tool .wheel__avg-label { font-family: var(--sans); font-size: 6.5px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; fill: color-mix(in srgb, var(--wp--preset--color--paris-noir) 72%, transparent); }

/* results: "First steps" on a warmer card than "Your wheel", so it reads as the takeaway; the extra line under the
   summary (all high, or several areas low) in the body font */
.wheel-tool--full .wheel-steps { background: color-mix(in srgb, var(--accent) 13%, var(--wp--preset--color--warm-white)); }
.wheel-summary__note { display: block; margin-top: 10px; font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: 0; }
.wheel-messages { display: none; }
.wheel-cta h3.wheel-cta__title { font-weight: 400; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; color: inherit; }

/* small text on beige darkened for contrast (Paris Noir at about 70%) */
.wheel-tool--full p.wheel-privacy, .wheel-tool--full .wheel-panel p.wheel-privacy, .wheel-tool--full p.wheel-steps__intro,
.wheel-legend, .wheel-sliders .pair { color: color-mix(in srgb, var(--wp--preset--color--paris-noir) 72%, transparent); }

/* sliders: a cognac handle on a sand track, like the buttons; the aim keeps its square espresso handle */
.wheel-sliders input[type="range"]::-webkit-slider-runnable-track { background: var(--tier-low); }
.wheel-sliders input[type="range"]::-moz-range-track { background: var(--tier-low); }
.wheel-sliders input[type="range"]::-webkit-slider-thumb { background: var(--accent); border: 3px solid var(--wp--preset--color--warm-white); box-shadow: 0 0 0 1px var(--accent); }
.wheel-sliders input[type="range"]::-moz-range-thumb { background: var(--accent); border: 3px solid var(--wp--preset--color--warm-white); box-shadow: 0 0 0 1px var(--accent); }
.is-want .wheel-sliders input[type="range"]::-webkit-slider-thumb { background: var(--text); box-shadow: 0 0 0 1px var(--text); }
.is-want .wheel-sliders input[type="range"]::-moz-range-thumb { background: var(--text); box-shadow: 0 0 0 1px var(--text); }

/* phones: the sliders first, then the wheel, then the results, so she watches her wheel take shape */
@media (max-width: 900px) {
  .wheel-tool--full .wheel-copy > .wheel-panel { order: 1; }
  .wheel-tool--full > .wheel-visual { order: 2; margin: 28px 0 8px; }
  .wheel-tool--full .wheel-copy > :is(.wheel-results, .wheel-cta, .wheel-reset) { order: 3; }
}
/* the three steps and the small line, above the tabs in the tool card */
.wheel-tool--full ol.intro-steps { margin: 0 0 14px; gap: 10px; font-size: 15.5px; }
.wheel-tool--full p.wheel-focus-note { margin: 0 0 22px; padding-left: 40px; font-size: 14.5px; font-style: italic; color: color-mix(in srgb, var(--wp--preset--color--paris-noir) 72%, transparent); }
@media (max-width: 900px) {
  .wheel-tool--full .wheel-copy > :is(.intro-steps, .wheel-focus-note) { order: 0; }
}

/* ==========================================================================
   THE EDIT (30 October 2026): Julia's new copy and her editor's notes
   ========================================================================== */

/* the grid: "Latest" above it; each card reads category, headline, standfirst, reading time */
.edit-index__head { max-width: var(--container); margin: 0 auto clamp(28px, 3vw, 40px); padding-top: 22px; border-top: 1px solid var(--rule-c); }
.edit-index__head p.eyebrow { margin: 0; }
.edit-index .wp-block-post-excerpt { margin: 12px 0 0; padding: 0 12px; }
.edit-index .wp-block-post-excerpt__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--soft); }
.edit-index .wp-block-post-excerpt__more-text { display: none; }
.article-card__time { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--label); }

/* the store and the Career Wheel share one slim row, so the page keeps two main asks (the guide and the Letter) */
.edit-more { padding: clamp(48px, 5vw, 72px) var(--gutter); }
.edit-more__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule-c); border-bottom: 1px solid var(--rule-c); }
.edit-more__item { padding: 32px clamp(24px, 4vw, 56px) 30px 0; }
.edit-more__item + .edit-more__item { padding-left: clamp(24px, 4vw, 56px); padding-right: 0; border-left: 1px solid var(--rule-c); }
.edit-more__item h2 { margin: 0 0 12px; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -.025em; }
.edit-more__item > p:not(.eyebrow):not(.text-link) { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.edit-more__item p.text-link { margin-top: 8px; }
@media (max-width: 900px) {
  .edit-more__inner { grid-template-columns: 1fr; }
  .edit-more__item, .edit-more__item + .edit-more__item { padding: 28px 0; border-left: 0; }
  .edit-more__item + .edit-more__item { border-top: 1px solid var(--rule-c); }
}

/* ==========================================================================
   31 OCTOBER 2026: Julia's design comments
   ========================================================================== */

/* Noto Serif Display is now weight 400 with -.025em tracking everywhere, the setting of the footer's "Own your glow."
   (Julia has astigmatism and found the thin titles hard to read); the hero subline dropped from 600 to 400 so it no
   longer competes with the title. Set in the rules above and in theme.json. */

/* Work With Me: white space between the framed opening and the full-bleed photo section under it */
.opening + .chooser { margin-top: clamp(40px, 5vw, 72px); }

/* Career Wheel and The Next Chapter openings (the pages with opening--left and page-intro): a larger photo and a smaller title, so the
   photo fills the beige panel instead of floating in it */
.opening--left.page-intro { padding-block: clamp(40px, 4vw, 56px); }
.opening--left.page-intro > .wp-block-group { grid-template-columns: minmax(0, 520px) minmax(0, 600px); }
.opening--left.page-intro h1 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.04; }

/* an article's sources: small print after the call to action, the same on every new article */
.mag-body p.mag-sources { margin-top: 3em; font-size: 14px; line-height: 1.55; color: var(--soft); }

/* an article's topics (its tags), at the end of the text */
.mag-tags { max-width: 680px; margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--rule-c); font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--label); }
.mag-tags a { color: inherit; text-decoration: none; }
.mag-tags a:hover { color: var(--accent); }

/* the header logo turns cognac on hover or keyboard focus: the logo file (a transparent PNG) is used as a mask over a
   cognac layer, so the colour is exact and follows the Styles palette. If the logo file ever changes, change it here too. */
.masthead .wp-block-site-logo a { position: relative; display: inline-block; }
.masthead .wp-block-site-logo a::after { content: ""; position: absolute; inset: 0; background: var(--accent); -webkit-mask: url("assets/img/logo-glowth-mindset-black.png") center / 100% 100% no-repeat; mask: url("assets/img/logo-glowth-mindset-black.png") center / 100% 100% no-repeat; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.masthead .wp-block-site-logo img { transition: opacity .3s var(--ease); }
.masthead .wp-block-site-logo a:is(:hover, :focus-visible) img { opacity: 0; }
.masthead .wp-block-site-logo a:is(:hover, :focus-visible)::after { opacity: 1; }

/* The homepage's "From the Edit" row now fills itself: a Query Loop shows the latest published articles, in the same
   cards. A card's label is the article's tag ([glowth_card_label], functions.php). The row's list and cards keep the
   slider's classes; these rules only undo WordPress's own list and image styles, so the design doesn't change. */
.edit-slider ul.edit-track { list-style: none; margin: 0; padding: 0 var(--gutter) 10px; justify-content: safe center; }   /* centred while the cards don't fill the row */
.edit-track > li { margin: 0; min-width: 0; }
.edit-track .article-card__media { overflow: hidden; margin: 0 0 24px; }
.edit-controls[hidden] { display: none; }
/* An article with no featured image and no photo in its text keeps its place in the row: a plain panel instead. */
.edit-track .article-card:not(:has(.article-card__media))::before { content: ""; display: block; aspect-ratio: 4 / 5; margin-bottom: 24px; background: var(--wp--preset--color--atelier-beige); }

/* The footer lists every page (31 October 2026): general pages, then Work With Me and its four services. The second
   list is wider so "Career Strategy Session" stays on one line. Privacy and Terms sit beside the copyright. */
@media (min-width: 1261px) { .site-footer__inner { grid-template-columns: 1.2fr .65fr 1.05fr 1.25fr; } }
ul.footer-nav.wp-block-navigation { border-left: 0; padding-left: 0; }   /* WordPress repeats the class on the list, which drew a second line beside each column */
p.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
p.site-footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
p.site-footer__legal a:first-of-type { margin-left: auto; }
p.site-footer__legal a:hover { border-bottom-color: currentColor; }
/* below this width the long names would wrap, so the logo and the line take one row and the two lists the next */
@media (min-width: 901px) and (max-width: 1260px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__inner .footer-nav { order: 2; }
}

/* "Save my wheel" (app.js): under the summary in the "Your wheel" card. */
.wheel-results__card .wheel-save { margin-top: 16px; }

/* Home, Kind words (class testimonials--veil): the photo edge to edge and the words on a pale panel */
.testimonials--photo.testimonials--veil { padding: clamp(72px, 8vw, 120px) var(--gutter); background-color: var(--support); color: var(--text); --soft: color-mix(in srgb, currentColor 84%, transparent); --rule-c: var(--rule); }
.testimonials--veil::before { content: none; }
.testimonials--veil .testimonials__inner { max-width: 1040px; padding: clamp(40px, 4.4vw, 64px) clamp(20px, 4vw, 64px); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.testimonials--veil h2.testimonials__label { margin-bottom: 26px; }
.testimonials--veil .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--text); border-color: currentColor; }
.testimonials--veil .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.testimonials--veil .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Home and The Edit, The Glowth Letter (class letter--photo): a photo with white around it and a pale panel */
.letter.letter--photo { --inset: clamp(32px, 5.4vw, 80px); --veil: color-mix(in srgb, var(--bg) 92%, transparent); padding: var(--sp-block) var(--gutter); background: none; color: var(--text); border: 0; --soft: color-mix(in srgb, currentColor 80%, transparent); --rule-c: var(--rule); --label: currentColor; }
.letter.letter--photo .letter__inner { display: grid; grid-template-columns: minmax(0, 600px); gap: 0; justify-content: start; align-items: stretch; padding: var(--inset); border: 0; background: var(--support) url("assets/img/reading-room-paris.jpg") 100% 50% / cover no-repeat; }
.letter--photo .letter__inner > * { padding-inline: clamp(24px, 3.4vw, 50px); background: var(--veil); }
.letter--photo .letter__copy { padding-top: clamp(32px, 3.4vw, 48px); padding-bottom: 22px; text-align: center; }
.letter--photo .letter__copy p { margin-inline: auto; }
.letter--photo .letter__inner > :last-child { padding-bottom: clamp(32px, 3.4vw, 48px); }
.letter.letter--photo .field input { border-color: var(--rule); }
.letter--photo .letter-form :is(.wp-element-button, button[type="submit"]) { width: 100%; }
@media (max-width: 900px) {   /* the photo on top, the panel lapping over its lower edge */
  .letter.letter--photo { --veil: var(--support); }
  .letter.letter--photo .letter__inner { grid-template-columns: minmax(0, 1fr); padding: calc((100vw - 2 * var(--gutter)) * .5625 - 32px) 14px 0; background-color: transparent; background-position: 0 0; background-size: 100% auto; }
  .letter--photo .letter__inner > * { padding-inline: 20px; }
}
.letter.letter--photo p.field-error { color: var(--accent); }
.letter.letter--photo .field [aria-invalid="true"] { border-color: var(--accent); }