/* HWB Website V4.2 — the approved Website V1 brand system, in motion. */
:root {
  --hwb-red: #e98a52;
  --hwb-red-deep: #d8795d;
  --hwb-moss: #263c33;
  --hwb-moss-soft: #52685d;
  --hwb-sun: #d8ca91;
  --hwb-cream: #f0ddb8;
  --hwb-focus: #263c33;
  --accent-readable: #a74627;
  --paper: #fbf7ef;
  --surface: #ffffff;
  --surface-alt: #f2ede2;
  --ink: #18251f;
  --ink-soft: #526159;
  --sage: #52685d;
  --sage-dark: #263c33;
  --terracotta: #e98a52;
  --coral: #d8795d;
  --wheat: #d8ca91;
  --cream: #f0ddb8;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow: 0 28px 80px rgba(23, 36, 31, .11);
  --max: 1240px;
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 38px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] {
  --paper: #101814;
  --surface: #17231d;
  --surface-alt: #1e2d25;
  --ink: #f4f2e8;
  --ink-soft: #c9d0ca;
  --sage: #d8ca91;
  --sage-dark: #f0ddb8;
  --hwb-focus: #f0ddb8;
  --accent-readable: #f1a873;
  --line: rgba(255, 255, 255, .16);
  --shadow: 0 32px 90px rgba(0, 0, 0, .34);
}

html { scroll-padding-top: 96px; }

body {
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--hwb-sun) 10%, transparent), transparent 30rem),
    var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.hwb-entry-open { overflow: hidden; }

::selection { color: #18251f; background: var(--terracotta); }

:focus-visible {
  outline: 3px solid var(--hwb-focus);
  outline-offset: 4px;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.container { width: min(var(--max), calc(100% - clamp(36px, 7vw, 104px))); }
.section { padding-block: clamp(84px, 11vw, 160px); }
.section-tight { padding-block: clamp(64px, 8vw, 108px); }

/* Navigation: quiet until needed, clear when opened. */
.site-header { min-height: 78px; }
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border-color: transparent;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.site-header.is-scrolled::after { opacity: 1; }
.nav-wrap { min-height: 78px; width: min(var(--max), calc(100% - clamp(28px, 5vw, 76px))); }
.brand img { width: clamp(128px, 13vw, 168px); }
.primary-nav a { font-size: .86rem; font-weight: 760; letter-spacing: -.01em; }
.primary-nav a:hover,
.primary-nav a[aria-current="page"] { background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: none; }

.language-button,
.menu-button,
.icon-button {
  border-color: transparent;
  background: transparent;
  transition: background .2s ease, transform .2s ease;
}
.language-button:hover,
.menu-button:hover,
.icon-button:hover { background: var(--surface-alt); transform: translateY(-1px); }

/* Buttons feel tactile without becoming glossy. */
.button {
  min-height: 54px;
  padding-inline: 23px;
  border-radius: 999px;
  font-weight: 820;
  letter-spacing: -.012em;
  transition: transform .24s var(--ease-out), background .24s ease, color .24s ease, box-shadow .24s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(21, 36, 29, .14); }
.button:active { transform: translateY(0) scale(.98); }
.button-primary { color: #18251f; background: var(--terracotta); }
.button-primary:hover { color: #18251f; background: var(--coral); }
.button-secondary { background: transparent; border-color: var(--line); }

.eyebrow {
  color: var(--sage);
  font-size: .74rem;
  letter-spacing: .18em;
}
.eyebrow::before { width: 22px; background: var(--terracotta); }

/* Cinematic welcome. It runs once per browser session and remains skippable. */
.hwb-entry {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  isolation: isolate;
}
html:not(.hwb-entry-ready) .hwb-entry { visibility: hidden; }
.hwb-entry[hidden] { display: none; }
.hwb-entry::before,
.hwb-entry::after {
  content: "";
  position: absolute;
  inset: 0 38% 0 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(251,247,239,.92), rgba(251,247,239,.78) 62%, rgba(251,247,239,.2)),
    url("/assets/images/hwb-watercolour-swoosh.png") left bottom / min(900px, 110%) auto no-repeat,
    #fbf7ef;
  transform-origin: left;
}
.hwb-entry::after {
  content: "CYMRU";
  inset: 0 0 0 62%;
  padding: 0 2vw 3vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: rgba(240,221,184,.15);
  background:
    radial-gradient(circle at 50% 24%, rgba(216,202,145,.2), transparent 28%),
    #263c33;
  font-size: clamp(5rem, 13vw, 12rem);
  font-weight: 950;
  letter-spacing: -.08em;
  line-height: .75;
  writing-mode: vertical-rl;
  transform-origin: right;
}
.hwb-entry-inner {
  width: min(1240px, calc(100% - clamp(38px, 8vw, 120px)));
  display: grid;
  justify-items: start;
  gap: 18px;
  text-align: left;
  animation: hwb-entry-rise .8s var(--ease-out) both;
}
.hwb-entry-mark {
  width: clamp(118px, 16vw, 188px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.hwb-entry-mark img { width: 100%; }
.hwb-entry-kicker { margin: 12px 0 -10px; font-size: .78rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.hwb-entry h2 { max-width: 720px; margin: 0; color: #18251f; font-size: clamp(3rem, 8vw, 7rem); line-height: .86; letter-spacing: -.075em; }
.hwb-entry p { max-width: 510px; margin: 0 0 10px; color: #526159; font-size: clamp(1rem, 2vw, 1.22rem); }
.hwb-entry-button {
  min-width: 190px;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  color: #18251f;
  background: #e98a52;
  font-weight: 900;
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
  transition: transform .22s var(--ease-out), box-shadow .22s ease;
}
.hwb-entry-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 24px 62px rgba(0,0,0,.28); }
.hwb-entry-sound { padding: 4px 8px; border-radius: 8px; color: #52685d; background: rgba(251,247,239,.88); font-size: .78rem; font-weight: 700; }
.hwb-entry.is-leaving .hwb-entry-inner { animation: hwb-entry-fade .48s ease both; }
.hwb-entry.is-leaving::before { animation: hwb-wipe-left .9s .24s var(--ease-out) both; }
.hwb-entry.is-leaving::after { animation: hwb-wipe-right .9s .24s var(--ease-out) both; }

@keyframes hwb-entry-rise { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes hwb-entry-fade { to { opacity: 0; transform: scale(.96); } }
@keyframes hwb-wipe-left { to { transform: translateX(-102%); } }
@keyframes hwb-wipe-right { to { transform: translateX(102%); } }

/* Homepage: editorial scale, Welsh warmth, and fewer visual containers. */
.v2-hero {
  min-height: calc(100svh - 78px);
  background:
    radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--terracotta) 16%, transparent), transparent 28%),
    radial-gradient(circle at 85% 84%, color-mix(in srgb, var(--hwb-sun) 20%, transparent), transparent 26%),
    var(--paper);
}
.v2-hero-grid { padding-block: clamp(62px, 9vw, 118px); }
.v2-hero-copy h1.v29-hero-title { font-size: clamp(4rem, 7vw, 7.4rem); line-height: .87; }
.v29-hero-title > span:nth-child(2) { color: var(--coral); }
.v2-hero-copy .lead { max-width: 660px; font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.v2-proof-strip {
  gap: 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.v2-proof-strip span { padding: 12px 0; border-top: 1px solid var(--line); background: transparent; }
.v2-hero-map { border: 0; background: color-mix(in srgb, var(--surface) 64%, transparent); box-shadow: none; }
.map-core { color: #fbf7ef; background: #263c33; }

.v2-routes { padding-block: clamp(74px, 9vw, 124px); }
.v2-route-grid { gap: 0; border-block: 1px solid var(--line); }
.v2-route-card {
  min-height: 340px;
  padding: clamp(24px, 3.2vw, 44px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.v2-route-card:last-child { border-right: 0; }
.v2-route-card:hover { transform: none; background: color-mix(in srgb, var(--surface-alt) 70%, transparent); box-shadow: none; }
.v2-route-card h3 { font-size: clamp(2rem, 3.2vw, 3.55rem); }

.v21-horizontal { background: var(--hwb-moss); }
.v21-panel { border-radius: 0; }

.creator-proof-strip {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  padding-block: 28px;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.creator-proof-strip img { width: 120px; height: 120px; border-radius: 50%; }
.home-creator-proof { padding-block: clamp(42px, 5vw, 70px) clamp(12px, 1.3vw, 20px); }
.home-creator-proof + .v2-pathway-preview { padding-top: clamp(24px, 2.4vw, 36px); }

.v2-pathway-preview { color: var(--ink); background: var(--surface-alt); }
.v2-pathway-preview h2 { color: var(--ink); }
.v2-pathway-preview .v2-section-head > p,
.v2-pathway-preview .v2-disclaimer { color: var(--ink-soft); }
.product-journey.four-tools { gap: 0; border-block: 1px solid var(--line); }
.product-stage,
.product-stage.live {
  min-height: 470px;
  padding: clamp(23px, 2.6vw, 36px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
}
.product-stage:last-child { border-right: 0; }
.product-stage .stage-number,
.product-stage.live .stage-number { color: color-mix(in srgb, var(--ink) 12%, transparent); }
.product-stage h3,
.product-stage.live h3 { color: var(--hwb-red); }
.product-stage p,
.product-stage.live p { color: var(--ink-soft); }
.product-stage .product-actions { display: grid; grid-template-columns: 1fr; }
.product-stage .product-actions .button { width: 100%; }

.grant-v2,
.v2-programme-summary,
.v2-updates-preview,
.instagram-v2,
.v2-trust { color: var(--ink); background: var(--paper); }
.grant-v2 { background: var(--hwb-moss); color: #fffdf6; }
.grant-v2 h2, .grant-v2 .eyebrow { color: #fffdf6; }
.grant-v2 p { color: #d8e4de; }
.grant-v2-card { border: 0; background: rgba(255,255,255,.09); box-shadow: none; }
.v2-updates-preview { background: var(--surface-alt); }
.updates-grid { gap: 0; border-top: 1px solid var(--line); }
.update-card {
  padding: clamp(26px, 3vw, 42px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.update-card:last-child { border-right: 0; }
.update-card:hover { transform: none; background: color-mix(in srgb, var(--surface) 54%, transparent); box-shadow: none; }
.social-preview-grid { gap: 8px; }
.instagram-v2 .social-preview-grid a { border-radius: 0; }
.v2-trust { border-top: 1px solid var(--line); }
.trust-links-v2 a { border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.trust-links-v2 a:hover { background: var(--surface-alt); }

.wales-signoff {
  position: relative;
  overflow: hidden;
  padding-block: clamp(86px, 12vw, 168px);
  color: #fffdf6;
  background: var(--hwb-red);
}
.wales-signoff::after {
  content: "CYMRU";
  position: absolute;
  right: -2vw;
  bottom: -.3em;
  color: rgba(255,255,255,.1);
  font-size: clamp(7rem, 24vw, 24rem);
  font-weight: 950;
  line-height: .75;
  letter-spacing: -.08em;
}
.wales-signoff .container { position: relative; z-index: 1; }
.wales-signoff .eyebrow { color: #fff; }
.wales-signoff .eyebrow::before { background: #fff; }
.wales-signoff h2 { max-width: 900px; margin: .1em 0 .32em; color: #fff; font-size: clamp(3rem, 7vw, 7rem); }
.wales-signoff p { max-width: 650px; color: rgba(255,255,255,.84); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.wales-signoff .button-secondary { color: #fff; border-color: rgba(255,255,255,.65); }
.wales-signoff .button-secondary:hover { color: var(--hwb-red); background: #fff; }

/* Inner pages use one strong editorial rhythm. */
.page-hero,
.service-hero,
.career-pathway-hero,
.programme-hero,
.licensing-page-hero {
  min-height: min(72svh, 720px);
  display: grid;
  align-items: end;
  padding-block: clamp(96px, 12vw, 160px) clamp(68px, 9vw, 112px);
  background:
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--hwb-red) 13%, transparent), transparent 27rem),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-hero .container { width: min(1100px, calc(100% - clamp(36px, 7vw, 104px))); margin-left: max(clamp(18px, 3.5vw, 52px), calc((100vw - var(--max)) / 2)); }
.page-hero h1 { max-width: 1040px; margin: .08em 0 .3em; font-size: clamp(3.3rem, 7vw, 7.6rem); line-height: .9; letter-spacing: -.065em; }
.page-hero .lead { max-width: 760px; font-size: clamp(1.08rem, 1.8vw, 1.38rem); }

.content-card,
.side-card,
.info-card,
.programme-offer-card,
.licensing-summary-card,
.licensing-page-form-card {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.content-layout { gap: clamp(42px, 8vw, 110px); }
.prose { max-width: 820px; }
.prose > h2 { margin-top: 2em; font-size: clamp(2rem, 4vw, 3.8rem); }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose blockquote { border-left-color: var(--hwb-red); }

.card-grid,
.board-grid,
.programme-offer-grid,
.support-needed-grid { gap: 1px; background: var(--line); }
.card-grid > article,
.board-card,
.programme-offer-card,
.support-needed-grid article {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

/* Career page: the founder story breathes and the four tools read as one set. */
.career-founder-section { background: var(--paper); }
.career-founder-card {
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.career-founder-card img { min-height: 560px; border-radius: var(--radius-lg); }
.career-founder-card > div { padding: clamp(28px, 6vw, 88px); }
.career-apps-section { background: var(--surface-alt); }
.career-app-grid { gap: 0; border-block: 1px solid var(--line); }
.career-app-tile {
  min-height: 500px;
  padding: clamp(24px, 2.6vw, 38px);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.career-app-tile:last-child { border-right: 0; }
.career-app-number { font-size: clamp(2.8rem, 4vw, 4.6rem); color: var(--hwb-red); }
.career-app-tile h3 { font-size: clamp(1.8rem, 2.3vw, 2.65rem); }
.career-app-status { background: color-mix(in srgb, var(--surface) 72%, transparent); }

/* Footer and controls. */
.site-footer { padding-top: clamp(78px, 10vw, 128px); background: #10271f; }
.footer-grid { gap: clamp(36px, 7vw, 96px); }
.footer-links a { opacity: .78; transition: opacity .2s ease, transform .2s ease; }
.footer-links a:hover { opacity: 1; transform: translateX(3px); }
.accessibility-dock {
  right: 18px;
  bottom: 18px;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 14px 48px rgba(14, 28, 22, .16);
  backdrop-filter: blur(18px);
}
.accessibility-dock button,
.accessibility-dock a { border: 0; background: transparent; }
.sound-toggle[aria-pressed="true"] { color: #fff; background: var(--hwb-red); }
.scroll-progress { height: 3px; background: var(--hwb-red); }

/* Keep long labels, addresses and translated copy inside their layouts. */
:where(main, .site-footer) :where(h1,h2,h3,h4,p,li,dt,dd,label,summary,a,button) {
  overflow-wrap: anywhere;
}
.button { white-space: normal; text-align: center; line-height: 1.25; }
.status-pill { width: fit-content; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; }
.content-layout > *, .card-grid > *, .document-grid > *, .board-grid > * { min-width: 0; }

/* Motion is progressive: content is always readable without JavaScript. */
.v4-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.v4-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .primary-nav {
    inset: 78px 0 0;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(22px);
  }
  .primary-nav.is-open { align-content: start; padding-top: clamp(38px, 8vh, 90px); }
  .primary-nav a { font-size: clamp(1.35rem, 4vw, 2rem); }
  .v2-hero-map { max-width: 560px; }
  .career-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-app-tile:nth-child(2) { border-right: 0; }
  .career-app-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 820px) {
  .section { padding-block: clamp(68px, 18vw, 104px); }
  .v2-section-head { grid-template-columns: 1fr; gap: 18px; }
  .v2-route-grid,
  .updates-grid { grid-template-columns: 1fr; }
  .v2-route-card,
  .update-card { min-height: auto; padding-block: 38px; border-right: 0; border-bottom: 1px solid var(--line); }
  .v2-route-card:last-child,
  .update-card:last-child { border-bottom: 0; }
  .creator-proof-strip { grid-template-columns: 84px 1fr; }
  .creator-proof-strip img { width: 84px; height: 84px; }
  .creator-proof-strip .button { grid-column: 1 / -1; }
  .career-founder-card { grid-template-columns: 1fr; }
  .career-founder-card img { min-height: 380px; max-height: 520px; border-radius: var(--radius-md); }
  .career-founder-card > div { padding-inline: 0; }
  .page-hero,
  .service-hero,
  .career-pathway-hero,
  .programme-hero,
  .licensing-page-hero { min-height: 60svh; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 30px, var(--max)); }
  .nav-wrap { width: calc(100% - 24px); }
  .brand img { width: 126px; }
  .language-button { min-width: 50px; padding-inline: 9px; }
  .v2-hero > .container,
  .v2-hero .v2-hero-grid { width: calc(100% - 30px); }
  .v2-hero-copy h1.v29-hero-title { font-size: clamp(3.2rem, 16vw, 5rem); }
  .v2-proof-strip { grid-template-columns: 1fr; gap: 0; }
  .v2-hero-map { min-height: 330px; }
  .product-journey.four-tools,
  .career-app-grid { grid-template-columns: 1fr; }
  .product-stage,
  .product-stage:last-child,
  .career-app-tile,
  .career-app-tile:nth-child(2),
  .career-app-tile:last-child { min-height: 410px; border-right: 0; border-bottom: 1px solid var(--line); }
  .career-app-tile:last-child,
  .product-stage:last-child { border-bottom: 0; }
  .career-app-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .button-row { display: grid; grid-template-columns: 1fr; }
  .button-row .button { width: 100%; }
  .accessibility-dock { right: 10px; bottom: 10px; }
  .accessibility-dock button,
  .accessibility-dock a { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .page-hero .container { width: calc(100% - 30px); margin-inline: auto; }
  .page-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .hwb-entry h2 { font-size: clamp(3.6rem, 18vw, 5.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hwb-entry-inner,
  .hwb-entry.is-leaving .hwb-entry-inner,
  .hwb-entry.is-leaving::before,
  .hwb-entry.is-leaving::after { animation-duration: .01ms !important; }
  .v4-reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
  .hwb-entry,
  .sound-toggle { display: none !important; }
  .v4-reveal { opacity: 1; transform: none; }
}

/* V4.1 — interaction rhythm inspired by excellent editorial web experiences. */
.v2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--hwb-pointer-x, 76%) var(--hwb-pointer-y, 38%), color-mix(in srgb, var(--hwb-sun) 24%, transparent), transparent 72%);
  opacity: var(--hwb-pointer-opacity, 0);
  transition: opacity .5s ease;
}

.hwb-marquee {
  overflow: hidden;
  padding-block: 13px;
  color: #fff;
  background: var(--hwb-red);
  border-block: 1px solid rgba(255,255,255,.22);
}
.hwb-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  animation: hwb-marquee 34s linear infinite;
}
.hwb-marquee:hover .hwb-marquee-track { animation-play-state: paused; }
.hwb-marquee span { font-size: clamp(.74rem, 1.1vw, .92rem); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.hwb-marquee i { font-style: normal; opacity: .62; }
@keyframes hwb-marquee { to { transform: translateX(-50%); } }

@media (min-width: 821px) and (hover: hover) {
  .v2-route-grid { transition: grid-template-columns .55s var(--ease-out); }
  .v2-route-grid:has(.v2-route-card:nth-child(1):is(:hover,:focus-within)) { grid-template-columns: 1.24fr .88fr .88fr; }
  .v2-route-grid:has(.v2-route-card:nth-child(2):is(:hover,:focus-within)) { grid-template-columns: .88fr 1.24fr .88fr; }
  .v2-route-grid:has(.v2-route-card:nth-child(3):is(:hover,:focus-within)) { grid-template-columns: .88fr .88fr 1.24fr; }
}

.career-app-tile,
.product-stage {
  position: relative;
  overflow: hidden;
  transition: color .35s ease, background .35s ease;
}
.career-app-tile::before,
.product-stage::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: var(--hwb-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.career-app-tile:hover::before,
.career-app-tile:focus-within::before,
.product-stage:hover::before,
.product-stage:focus-within::before { transform: scaleX(1); }
.career-app-tile:hover,
.career-app-tile:focus-within,
.product-stage:hover,
.product-stage:focus-within { background: color-mix(in srgb, var(--surface) 78%, transparent); }

.hwb-chapter {
  position: fixed;
  left: 14px;
  top: 50%;
  z-index: 800;
  width: 154px;
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 12px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-10px,-50%);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.hwb-chapter.is-visible { opacity: 1; transform: translate(0,-50%); }
.hwb-chapter-rail { height: 74px; overflow: hidden; border-radius: 99px; background: var(--line); }
.hwb-chapter-rail::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--hwb-chapter-progress, .1) * 100%);
  border-radius: inherit;
  background: var(--hwb-red);
  transition: height .45s var(--ease-out);
}
.hwb-chapter-copy { display: grid; gap: 3px; }
.hwb-chapter-count { color: var(--hwb-red); font-size: .66rem; font-weight: 950; letter-spacing: .12em; }
.hwb-chapter-title { max-width: 130px; color: var(--ink); font-size: .71rem; font-weight: 850; line-height: 1.25; }

.hwb-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}
.hwb-page-transition-panel {
  position: absolute;
  inset: 0 50% 0 0;
  z-index: -1;
  background: var(--hwb-moss);
  transform: translateX(-102%);
  transition: transform .52s var(--ease-out);
}
.hwb-page-transition-panel:last-of-type {
  inset: 0 0 0 50%;
  background: var(--hwb-red);
  transform: translateX(102%);
}
.hwb-page-transition img {
  width: 96px;
  padding: 19px;
  border-radius: 50%;
  background: #fffdf6;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .22s .28s ease, transform .32s .24s var(--ease-out);
}
.hwb-page-transition.is-covering .hwb-page-transition-panel,
.hwb-page-transition.is-covered .hwb-page-transition-panel { transform: translateX(0); }
.hwb-page-transition.is-covering img,
.hwb-page-transition.is-covered img { opacity: 1; transform: scale(1); }
.hwb-page-transition.is-revealing .hwb-page-transition-panel:first-child { transform: translateX(-102%); }
.hwb-page-transition.is-revealing .hwb-page-transition-panel:nth-child(2) { transform: translateX(102%); }
.hwb-page-transition.is-revealing img { opacity: 0; transform: scale(.86); transition-delay: 0s; }

@media (max-width: 1500px) { .hwb-chapter { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hwb-marquee-track { animation: none; }
  .hwb-page-transition { display: none; }
  .v2-hero::after { display: none; }
}

/* V4.2 — brand-guideline and contrast corrections. */
.eyebrow,
.update-meta,
.product-stage h3,
.product-stage.live h3,
.hwb-chapter-count { color: var(--accent-readable); }

.hwb-marquee {
  color: #18251f;
  background: #e98a52;
  border-color: rgba(24,37,31,.18);
}
.hwb-marquee i { color: #263c33; opacity: .62; }

.page-hero,
.service-hero,
.career-pathway-hero,
.programme-hero,
.licensing-page-hero {
  background:
    linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 94%, transparent) 56%, transparent 82%),
    url("/assets/images/hwb-watercolour-swoosh.png") right bottom / min(760px, 62vw) auto no-repeat,
    var(--paper);
}

.wales-signoff {
  color: #fbf7ef;
  background:
    linear-gradient(90deg, rgba(38,60,51,.96), rgba(38,60,51,.82)),
    url("/assets/images/hwb-watercolour-swoosh.png") right bottom / min(820px, 68vw) auto no-repeat,
    #263c33;
}
.wales-signoff::after { color: rgba(240,221,184,.1); }
.wales-signoff .button-secondary:hover { color: #18251f; background: #f0ddb8; }

.sound-toggle[aria-pressed="true"] { color: #18251f; background: #e98a52; }
.career-app-tile::before,
.product-stage::before,
.hwb-chapter-rail::after { background: #e98a52; }
.hwb-page-transition-panel:last-of-type { background: #e98a52; }

.instagram-v2 h2 { color: var(--ink); }
.instagram-v2-grid > div:first-child > p:not(.eyebrow) { color: var(--ink-soft); }

.grant-v2 { color: #fbf7ef; background: #263c33; }
.grant-v2 h2 { color: #fbf7ef; }
.grant-v2 p { color: #d9e1dc; }
.grant-v2 .button-primary { color: #18251f; }
.grant-v2 .button-secondary { color: #fbf7ef; border-color: rgba(251,247,239,.48); }

[data-theme="dark"] .page-hero,
[data-theme="dark"] .service-hero,
[data-theme="dark"] .career-pathway-hero,
[data-theme="dark"] .programme-hero,
[data-theme="dark"] .licensing-page-hero {
  background:
    radial-gradient(circle at 82% 24%, rgba(233,138,82,.13), transparent 28rem),
    radial-gradient(circle at 92% 84%, rgba(216,202,145,.08), transparent 22rem),
    #101814;
}

[data-theme="dark"] .hwb-entry { color: #f4f2e8; background: #101814; }
[data-theme="dark"] .hwb-entry::before {
  background:
    linear-gradient(rgba(16,24,20,.64), rgba(16,24,20,.82)),
    url("/assets/images/hwb-watercolour-swoosh.png") left bottom / min(900px, 110%) auto no-repeat,
    #101814;
}

/* V5.0.3 app-information contrast corrections.
   The Career Quiz intentionally uses a dark hero, so it must not inherit the
   generic light watercolour page-hero background. */
html[data-theme="light"] body.career-quiz-page .career-quiz-hero {
  color: #fffaf0;
  background:
    radial-gradient(circle at 78% 22%, rgba(233,138,82,.22), transparent 28%),
    linear-gradient(135deg, #172b22, #2e4b3e);
}
html[data-theme="light"] body.career-quiz-page .career-quiz-hero h1,
html[data-theme="light"] body.career-quiz-page .career-quiz-note strong {
  color: #fffaf0;
}
html[data-theme="light"] body.career-quiz-page .career-quiz-hero .lead,
html[data-theme="light"] body.career-quiz-page .career-quiz-note p {
  color: #dce7e0;
}
html[data-theme="light"] body.career-quiz-page .career-quiz-note {
  color: #fffaf0;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.28);
}
html[data-theme="light"] body.career-quiz-page .quiz-proof-row span {
  color: #fff5e7;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

html[data-theme="light"] .career-app-tile .button-secondary,
html[data-theme="light"] .career-founder-actions .button-secondary {
  color: #18251f;
  background: rgba(82,104,93,.08);
  border-color: rgba(38,60,51,.38);
}
html[data-theme="light"] .career-app-tile .button-secondary:hover,
html[data-theme="light"] .career-app-tile .button-secondary:focus-visible,
html[data-theme="light"] .career-founder-actions .button-secondary:hover,
html[data-theme="light"] .career-founder-actions .button-secondary:focus-visible {
  color: #fffaf0;
  background: #52685d;
  border-color: #52685d;
}
html[data-theme="dark"] .career-app-tile .button-secondary,
html[data-theme="dark"] .career-founder-actions .button-secondary {
  color: #fffaf0;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.34);
}
[data-theme="dark"] .hwb-entry::after {
  color: rgba(240,221,184,.13);
  background:
    radial-gradient(circle at 50% 24%, rgba(216,202,145,.13), transparent 28%),
    #17231d;
}
[data-theme="dark"] .hwb-entry h2 { color: #f4f2e8; }
[data-theme="dark"] .hwb-entry p { color: #c9d0ca; }
[data-theme="dark"] .hwb-entry-kicker,
[data-theme="dark"] .hwb-entry-sound { color: #d8ca91; }
[data-theme="dark"] .hwb-entry-sound { background: rgba(16,24,20,.82); }
[data-theme="dark"] [data-theme="dark"] .v21-panel:not(.v21-panel-intro):not(.v21-panel-dark) {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 24%, rgba(233,138,82,.1), transparent 28%),
    var(--surface);
}
[data-theme="dark"] .v21-panel-wheat:not(.v21-panel-intro):not(.v21-panel-dark) { background: var(--surface-alt); }
[data-theme="dark"] .v21-panel:not(.v21-panel-intro):not(.v21-panel-dark) > p:not(.eyebrow) { color: var(--ink-soft); }
[data-theme="dark"] .v21-panel:not(.v21-panel-intro):not(.v21-panel-dark) .v21-skill-tags span {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--line);
}
[data-theme="dark"] .instagram-v2,
[data-theme="dark"] .v2-programme-summary,
[data-theme="dark"] .v2-updates-preview,
[data-theme="dark"] .v2-trust { color: var(--ink); background: var(--paper); }
[data-theme="dark"] .instagram-v2 h2 { color: var(--ink); }
[data-theme="dark"] .v2-updates-preview { background: var(--surface-alt); }

@media (max-width: 820px) {
  .hwb-entry::before { inset: 0 18% 0 0; background-size: min(760px, 145%) auto; }
  .hwb-entry::after { inset: 0 0 0 82%; padding-inline: 0; font-size: 5rem; }
  .hwb-entry-inner { width: calc(100% - 34px); padding-right: 17%; }
  .hwb-entry-mark { width: clamp(94px, 28vw, 138px); }
  .hwb-entry h2 { font-size: clamp(3.2rem, 16vw, 5.4rem); }
  .hwb-entry-sound { display: none; }
  .page-hero,
  .service-hero,
  .career-pathway-hero,
  .programme-hero,
  .licensing-page-hero { background-size: auto, min(820px, 125vw) auto, auto; }
}


/* V6.3 exact primary-button contrast. */
html:not([data-theme="dark"]) .button-primary,
html:not([data-theme="dark"]) .hwb-entry-button { color:#fff !important; }
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .hwb-entry-button { color:#18251f !important; }