/* Design round, 17 Oct 2026. Loaded last so these rules win.
   Motion tokens, one hairline, one radius, one grid, scale, and the cream section. */

@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
}
:root {
  --font-serif: Lora, "Lora Fallback", serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --rule: rgba(141, 141, 141, .35);
  --border: var(--rule);
  --border-col: var(--rule);
  --grey-3: var(--rule);
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
}

@keyframes mc-rule { to { transform: scaleX(1); } }
@keyframes mc-draw-y { to { transform: scaleY(1); } }
@keyframes mc-logo { from { opacity: 0; } to { opacity: 1; } }
@keyframes mc-line { from { transform: translateY(calc(105% + .55em)); } to { transform: none; } }
@keyframes mc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mc-rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mc-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes mc-stroke { to { stroke-dashoffset: 0; } }
@keyframes mc-frame {
  0% { clip-path: inset(0 calc(100% - 1px) calc(100% - 1px) 0); }
  30% { clip-path: inset(0 0 calc(100% - 1px) 0); }
  65% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0); }
}
@keyframes mc-vt-out { to { opacity: 0; } }
@keyframes mc-vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Header hairline, drawn on the first visit ── */
.site-header {
  background: rgba(17, 17, 17, .88) !important;
  border-bottom: 0 !important;
}
.site-header.over-cream { background: rgba(17, 17, 17, .96) !important; }
#guarantee { --rule: rgba(17, 17, 17, .2); }
#guarantee details.guarantee-fine,
#guarantee details.guarantee-fine summary { border-color: var(--rule); }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-logo { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.draw-rule .site-header::after {
    transform: scaleX(0);
    animation: mc-rule 600ms var(--ease-draw) forwards;
  }
  html.draw-rule .nav-logo { opacity: 0; animation: mc-logo 300ms var(--ease-out) both; }
}
.site-header .nav {
  max-width: 1200px;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}
.nav-logo img { margin-left: 0 !important; }

/* ── Hero: line reveal, real fade, call-panel stroke ── */
.h1-lines { font-size: clamp(2.75rem, 5.2vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.h1-v4 .line {
  display: block;
  overflow: clip;
  overflow-clip-margin: .2em;
  padding-bottom: .2em;
}
.h1-lines .line > span { display: block; padding-bottom: .14em; }
.hero-main .h1-v4 { max-width: 16ch; }
@media (min-width: 901px) {
  .hero-grid--split { grid-template-columns: minmax(0, 2.25fr) minmax(260px, 1fr); }
}
.hero-cta-box { position: relative; }
.hero:has(.h1-lines) .hero-cta-box { border-color: transparent; }
.hero-cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  html.draw-rule:not(.seen) .h1-lines .line > span { transform: translateY(calc(105% + .55em)); }
  html.hero-ready.draw-rule:not(.seen) .h1-lines .line > span {
    animation: mc-line 800ms var(--ease-out) both;
  }
  html.hero-ready.draw-rule:not(.seen) .h1-lines .line:nth-child(2) > span { animation-delay: 90ms; }
  html:has(.h1-lines).draw-rule:not(.seen) .hero .lede,
  html:has(.h1-lines).draw-rule:not(.seen) .hero .hero-caps { opacity: 0; }
  html.hero-ready:has(.h1-lines).draw-rule:not(.seen) .hero .lede {
    animation: mc-rise 600ms var(--ease-out) 240ms both;
  }
  html.hero-ready:has(.h1-lines).draw-rule:not(.seen) .hero .hero-caps {
    animation: mc-rise 600ms var(--ease-out) 320ms both;
  }
  html:has(.h1-lines) .hero h1,
  html:has(.h1-lines) .hero .lede,
  html:has(.h1-lines) .hero .hero-caps,
  html:has(.h1-lines) .hero .hero-cta-box,
  html:has(.h1-lines) .hero .hero-points { animation: none; }
  html.draw-rule:not(.seen) .hero-cta-box::after { clip-path: inset(0 100% 100% 0); }
  html.hero-ready.draw-rule:not(.seen) .hero-cta-box::after {
    animation: mc-frame 900ms var(--ease-draw) 300ms forwards;
  }
  html.draw-rule:not(.seen) .hero-cta-box > * { opacity: 0; }
  html.hero-ready.draw-rule:not(.seen) .hero-cta-box > * {
    animation: mc-rise 400ms var(--ease-out) 700ms both;
  }
  .proof-stat { font-size: clamp(48px, 5vw, 72px); }
}

.proof-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 6.2ch;
}
.proof-stat--live { position: relative; display: inline-block; }
.proof-stat--live::after { content: none; }
.proof-list > li + li a { border-left-color: transparent; }
.proof-list > li + li { position: relative; }
.proof-list > li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
  transform: scaleY(1);
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .proof-list:not(.is-on) > li + li::before { transform: scaleY(0); }
  .proof-list.is-on > li + li::before { animation: mc-draw-y 600ms var(--ease-draw) both; }
  .proof-list.is-on > li:nth-child(3)::before { animation-delay: 80ms; }
}
@media (max-width: 640px) {
  .proof-list > li + li::before { display: none; }
  .proof-list > li + li { border-top: 1px solid var(--rule); }
}

/* Section headlines, then body, then cards.
   The mask has to keep Lora's descenders (about 0.3em). */
.line {
  display: block;
  overflow: clip;
  overflow-clip-margin: .2em;
  padding-bottom: .2em;
}
.line > span { display: block; padding-bottom: .14em; }
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal:not(.in-view) .line > span { transform: translateY(calc(105% + .55em)); }
  html.js-reveal .reveal.in-view .line > span { animation: mc-line 700ms var(--ease-out) both; }
  html.js-reveal .reveal.in-view .line:nth-child(2) > span { animation-delay: 80ms; }
  html.js-reveal .reveal.in-view .lede,
  html.js-reveal .reveal.in-view .symptoms-hint { transition-delay: 160ms; }
  .doors .door.reveal:nth-child(2) { transition-delay: 80ms; }
  .cases-three.in-view > .case-card { animation: cellIn 700ms var(--ease-out) both; }
.diag-list--loud.in-view .diag-row { animation: none; }
  .cases-three.in-view > .case-card:nth-child(2) { animation-delay: 80ms; }
  .cases-three.in-view > .case-card:nth-child(3) { animation-delay: 160ms; }
}

/* Problem rows. Number, statement, then the issue, with a hairline that draws. */
.diag-list--loud .diag-row { border-bottom-color: transparent !important; }
.diag-row { position: relative; }
.diag-list--loud .diag-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}
.diag-list--loud .diag-num,
.diag-list--loud .diag-text,
.diag-list--loud .diag-result {
  opacity: 1;
  transform: none;
  transition: opacity 280ms var(--ease-ui), color 280ms var(--ease-ui);
}
.diag-list--loud .diag-result {
  opacity: 1;
  gap: 2px !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  align-items: flex-start;
}
.diag-list--loud .diag-result-k {
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  color: #8D8D8D !important;
  font-weight: 400;
  line-height: 1.3;
}
.diag-list--loud .diag-result-v {
  font-weight: 500 !important;
  color: #F0EDE8 !important;
  font-size: clamp(1.12rem, 1.5vw, 1.35rem) !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .diag-list--loud .diag-row:not(.is-on)::after { transform: scaleX(0); }
  .diag-list--loud .diag-row.is-on::after { animation: mc-rule 720ms var(--ease-draw) 40ms forwards; }
  html.js-reveal .diag-list--loud .diag-row:not(.is-on) .diag-num,
  html.js-reveal .diag-list--loud .diag-row:not(.is-on) .diag-text,
  html.js-reveal .diag-list--loud .diag-row:not(.is-on) .diag-result { opacity: 0; transform: translateY(8px); }
  .diag-list--loud .diag-row.is-on .diag-num { animation: mc-rise-sm 520ms var(--ease-out) backwards; }
  .diag-list--loud .diag-row.is-on .diag-text { animation: mc-rise-sm 560ms var(--ease-out) 80ms backwards; }
  .diag-list--loud .diag-row.is-on .diag-result { animation: mc-rise-sm 560ms var(--ease-out) 170ms backwards; }
  /* Homepage symptoms: the line rises, then the issue, then the next row. */
  html.js-reveal .symptoms-section .diag-list--loud .diag-row:not(.is-on) .diag-num,
  html.js-reveal .symptoms-section .diag-list--loud .diag-row:not(.is-on) .diag-text,
  html.js-reveal .symptoms-section .diag-list--loud .diag-row:not(.is-on) .diag-result {
    opacity: 0;
    transform: translateY(10px);
  }
  .symptoms-section .diag-list--loud .diag-row.is-on .diag-num,
  .symptoms-section .diag-list--loud .diag-row.is-on .diag-text {
    animation: mc-rise-sm 460ms var(--ease-out) both;
  }
  /* The issue name follows the symptom line. Hold it at 0 until the
     same .is-on that reveals .diag-text, then fade it 250ms later. */
  .symptoms-section .diag-list--loud .diag-row.is-on .diag-result {
    animation: none;
  }
  .js #diagList .diag-row .diag-result-k,
  .js #diagList .diag-row .diag-result-v {
    opacity: 0;
    transition: opacity .3s ease .25s;
  }
  .js #diagList .diag-row.is-on .diag-result-k,
  .js #diagList .diag-row.is-on .diag-result-v {
    opacity: 1;
  }
  .diag-list--loud.has-focus .diag-row:not(.is-active) .diag-text { opacity: 0.55; }
  .diag-list--loud.has-focus .diag-row:not(.is-active) .diag-num { opacity: 0.38; }
  .diag-list--loud.has-focus .diag-row:not(.is-active) .diag-result { opacity: 0.42; }
  .diag-list--loud .diag-row.is-active .diag-num { color: #F0EDE8; }
  .diag-list--loud .diag-row.is-active::after { background: rgba(240, 237, 232, .72); }
}
.diag-text { text-wrap: pretty; }
.diag-list--loud .diag-text { text-wrap: balance; }
.diag-list--loud .diag-row { grid-template-columns: 40px minmax(0, 1fr) 210px !important; }
.diag-result { align-self: stretch; border-left: 0 !important; }
@media (max-width: 767px) {
  .diag-row,
  .diag-list--loud .diag-row { grid-template-columns: 32px minmax(0, 1fr) !important; }
  .diag-result { grid-column: 2; }
}
@media (min-width: 768px) {
  .diag-list--loud .diag-result { grid-column: auto; }
}
a.concept-link { border-bottom-color: var(--rule) !important; color: inherit; }

/* Homepage hero matches the live site: picture, sector line, runway box, results strip. */

/* Built to Bought, under the symptoms. The section pins while you scroll.
   --b2b draws the line and lights Built, the five stops, and Bought.
   Fully drawn and fully lit without JS and under reduced motion. */
.b2b-section {
  height: auto;
  background: #111111;
  padding: 72px 0;
}
.b2b-pin {
  position: static;
  height: auto;
  display: flex;
  align-items: center;
  overflow: visible;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .b2b-section {
    height: 250vh;
    padding: 0 !important;
  }
  html.js .b2b-pin {
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow: hidden;
  }
}
.b2b-pin > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
}
.b2b-kicker {
  margin: 0 0 14px;
  color: #D2D2D2;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.b2b-title {
  max-width: 18em;
  margin: 0;
  color: #F0EDE8;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.b2b-art {
  width: 100%;
  flex: 1 1 auto;
  min-height: 72px;
  max-height: 32vh;
  margin-top: 18px;
  aspect-ratio: auto;
  overflow: hidden;
  background: #111111;
}
.b2b-art picture {
  display: block;
  width: 112%;
  height: 100%;
  max-width: none;
  margin-left: -6%;
}
.b2b-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}
.b2b-diagram {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: 20px;
}
.deck-end {
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0 12px;
  background: #111111;
  color: #F0EDE8;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}
.deck-end--built { left: 0; padding-left: 0; padding-right: 0; }
.deck-end--bought { right: 0; padding-right: 0; padding-left: 0; text-align: left; }
.deck-rail {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 0;
  height: 1px;
}
.deck-svg { display: block; overflow: visible; }
.deck-svg--x { width: 100%; height: 1px; }
.deck-svg--y { display: none; width: 1px; height: 100%; }
.deck-stroke {
  stroke: #F0EDE8;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--b2b, 1));
}
.deck-rail { background: rgba(141, 141, 141, .35); }
.deck-stops {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.deck-stop {
  min-width: 0;
  position: relative;
  padding-top: 24px;
  text-align: center;
}
.deck-tick {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #D2D2D2;
  border-radius: 50%;
  background: #111111;
  transform: translateX(-50%);
}
.deck-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F0EDE8;
  vertical-align: middle;
  transform: translateY(-1.5px);
}
.deck-end--built .deck-dot { margin-left: 12px; }
.deck-end--bought .deck-dot { margin-right: 12px; }
.deck-name {
  display: block;
  color: #F0EDE8;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}
.deck-def {
  display: block;
  margin: 8px 0 0;
  color: #D2D2D2;
  font-family: Lora, Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}
.deck-end span { display: inline-block; }
html.js-reveal .symptoms-head.reveal,
html.js-reveal .symptoms-head.reveal:not(.in-view) {
  opacity: 1;
  transform: none;
  filter: none;
  visibility: visible;
}
html.js-reveal .symptoms-head.reveal .line > span {
  transform: none;
  animation: none;
}
.cases-section .proof-strip { margin-top: 0; padding-top: 0; padding-bottom: 40px; border-bottom: 0; }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.js .b2b-section { height: 200vh; }
  html.js .b2b-pin {
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 76px;
  }
}
@media (max-width: 767px) {
  .b2b-title { font-size: 1.7rem; }
  .b2b-kicker { margin-bottom: 8px; }
  .b2b-art { min-height: 56px; max-height: 14vh; margin-top: 12px; aspect-ratio: auto; }
  .b2b-diagram {
    display: block;
    margin-top: 12px;
    padding-left: 28px;
  }
  .deck-end {
    position: static;
    transform: none;
    display: block;
    padding: 0;
    background: transparent;
    text-align: left;
    font-size: 24px;
    line-height: 1;
  }
  .deck-end--built { margin: 0 0 12px; }
  .deck-end--bought { margin: 12px 0 0; text-align: left; }
  .deck-end--built .deck-dot,
  .deck-end--bought .deck-dot {
    position: absolute;
    left: 5px;
    width: 10px;
    height: 10px;
    margin: 0;
  }
  .deck-end--built .deck-dot { top: 12px; transform: translate(-50%, -50%); }
  .deck-end--bought .deck-dot { top: auto; bottom: 12px; transform: translate(-50%, 50%); }
  .deck-rail {
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    height: auto;
    min-height: 0;
    overflow: visible;
    /* start would size this to its content and drop bottom. */
    align-self: auto;
  }
  .deck-svg--x { display: none; }
  .deck-svg--y {
    position: absolute;
    inset: 0;
    display: block;
    width: 1px;
    height: 100%;
  }
  .deck-stops {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .deck-stop { padding-top: 0; text-align: left; }
  .deck-tick {
    left: -27px;
    top: 0.35em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: none;
  }
  .deck-def { margin: 4px 0 0; }
}
/* Hero picture, from the live stylesheet. Desktop: under the copy. Mobile: full bleed, title over it. */
.hero-art-wrap {
  border: 0 !important;
  background: #111111 !important;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.hero-art-wrap picture, .hero-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  display: block;
}
.hero-art-wrap::after { display: none !important; }
@media (min-width: 768px) {
  .hero.hero--v4 { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero > .container { order: 1; width: 100%; }
  .hero > .hero-art { order: 2; width: 100%; margin-top: clamp(28px, 4vw, 40px); }
}
@media (max-width: 767px) {
  .hero.hero--v4 { position: relative; padding-top: 0 !important; }
  .hero-art { display: block; }
  .hero-art-wrap { aspect-ratio: 4 / 5; }
  .hero-art-wrap img { object-position: center bottom; }
  .hero-art .parallax-target { transform-origin: center bottom; }
  .hero > .container { padding-top: 32px; }
  .hero-main .h1-lines {
    position: absolute;
    top: clamp(18px, 3.2vw, 36px);
    left: clamp(20px, 5vw, 64px);
    right: clamp(20px, 5vw, 64px);
    z-index: 2;
    margin: 0;
    color: #F0EDE8;
  }
  .hero--v4::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 45%;
    background: linear-gradient(#111111cc, transparent);
    pointer-events: none;
    z-index: 1;
  }
  .hero--v4 .h1-v4 { z-index: 2; }
}
.symptoms-layout {
  grid-template-columns: 480px minmax(0, 1fr) !important;
  gap: 64px;
  align-items: start;
}
.symptoms-art { grid-column: auto; width: 480px; max-width: 100%; position: sticky; top: 84px; }
.symptoms-main { grid-column: auto; }
.symptoms-art-wrap { aspect-ratio: 4 / 5; overflow: hidden; background: #111111; }
.symptoms-art-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
@media (max-width: 1180px) {
  .symptoms-layout { grid-template-columns: 1fr !important; }
  .symptoms-art, .symptoms-main { grid-column: auto; position: static; width: auto; }
}

/* Parallax frames. Transform only, overflow hidden so scale does not scroll. */
.hero-art, .case-card-media, .concept-visual-wrap { overflow: hidden; }
.parallax-target { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); transform-origin: center center; will-change: auto; }

/* Depth and scale */
.hero-main .h1-v4, .h1-lines { font-size: clamp(2.75rem, 5.2vw, 5.25rem) !important; line-height: 1.02 !important; }
@media (max-width: 430px) {
  .hero-main .h1-v4, .h1-lines { font-size: 2.15rem !important; }
}
.proof-stat { font-family: Lora, "Lora Fallback", serif; }
/* The clamp sits on the link so .72em is 72% of the stat size.
   A bare em on .proof-stat--live would be 72% of the body size. */
.proof-list a { font-size: clamp(48px, 5vw, 72px); }
.proof-stat { font-size: 1em !important; }
.proof-stat--live { font-size: .72em !important; line-height: inherit; }
.proof-list .proof-more { white-space: nowrap; }
.symptoms-section { padding-top: 96px !important; padding-bottom: 96px !important; }
.pathway-section { padding-top: 136px !important; padding-bottom: 136px !important; }
.guarantee-section { padding-top: 200px !important; padding-bottom: 200px !important; }
.cases-section { padding-top: 136px !important; padding-bottom: 96px !important; }
.about-section { padding-top: 96px !important; padding-bottom: 96px !important; }
.contact-section { padding-top: 200px !important; padding-bottom: 136px !important; }
@media (max-width: 640px) {
  .symptoms-section, .pathway-section, .cases-section, .about-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .guarantee-section, .contact-section { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* One cream section */
.guarantee-section {
  background: #F0EDE8 !important;
  color: #111111 !important;
  border: 0 !important;
}
.guarantee-section .eyebrow,
.guarantee-section h2,
.guarantee-section .lede,
.guarantee-section li,
.guarantee-section summary,
.guarantee-section p { color: #111111 !important; }
.guarantee-stamp {
  color: #111111 !important;
  mix-blend-mode: normal !important;
  opacity: 0.92;
  transform: rotate(-9deg) scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .guarantee-stamp {
    opacity: 0;
    transform: rotate(-14deg) scale(1.08);
    transition: transform 400ms cubic-bezier(0.2, 0.9, 0.1, 1), opacity 400ms var(--ease-out);
  }
  html.js .guarantee-stamp.is-in { opacity: 0.92; transform: rotate(-9deg) scale(1); }
  html.js .guarantee-stamp circle {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  html.js .guarantee-stamp.is-in circle { animation: mc-stroke 400ms var(--ease-draw) forwards; }
}
.guarantee-fine, .guarantee-body, details.guarantee-fine summary { max-width: none; width: 100%; }

/* Line system */
hr.rule { border: 0; border-top: 1px solid var(--rule); background: none; }
nav.breadcrumb-nav { border: 0 !important; }
.concept-visual-wrap, section.concept-visual { border-top: 0; border-bottom: 0; }
.footer-one { border-top: 1px solid var(--rule) !important; }
.footer-bottom, .aoc-wrap { border-top: 0 !important; }
.footer-social a, .about-links a, .case-tile-pill { border-radius: 2px !important; }
.case-tile-pill { border-color: var(--rule) !important; background: transparent; }
.aidn-badge { border-radius: 2px !important; }
a.contact-email, a.contact-phone, .callout-left .contact-email, .callout-left .contact-phone {
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}
a.contact-email:hover, a.contact-phone:hover,
a.contact-email:focus-visible, a.contact-phone:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
#enquiry-form button.btn-primary, .contact-form button.btn-primary, form button.btn-primary {
  border-color: #F0EDE8 !important;
  color: #F0EDE8 !important;
  background: transparent !important;
}
ul.diag-dims { counter-reset: dim; border: 0; gap: 0 16px; }
ul.diag-dims li {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 0 !important;
  background: none !important;
}
ul.diag-dims li::before {
  counter-increment: dim;
  content: counter(dim, decimal-leading-zero) " ";
  color: #8D8D8D;
}
.acc-item, .insight-row, .case-tile, table, th, td,
.readiness-priority, #clearAll, .legend chip, .lf-card-list li {
  border-color: var(--rule) !important;
}
.about-nav, .about-footer, .priv-nav, hr.priv-rule { border-color: var(--rule) !important; }
.about .container, .privacy .container, nav.about-nav, footer.about-footer { margin-left: auto; margin-right: auto; }

/* Cursor grid: 24px, tied to the page, not a fixed overlay */
#grid-cursor {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: min(100vh, 920px);
  background-size: 24px 24px !important;
  background-position: 0 0 !important;
  z-index: 0;
}
.hero-cta-box::before,
.callout::before { background-size: 24px 24px !important; }
body { position: relative; }
#scroll-progress { display: none !important; }
body.long-note #scroll-progress {
  display: block !important;
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  height: 1px;
  background: #8D8D8D;
  transform-origin: left center;
  z-index: 120;
}

/* Hover feedback that is not motion of the page */
.btn-primary, .btn-outline { transition: background 200ms var(--ease-ui), color 200ms var(--ease-ui), border-color 200ms var(--ease-ui); }
.btn-primary:hover, .btn-outline:hover { transform: none; }
.btn-arrow, .case-card-link, .door-link .arrow { display: inline-block; transition: transform 200ms var(--ease-ui); }
.btn-primary:hover .btn-arrow, .btn-primary:focus-visible .btn-arrow,
.case-card:hover .case-card-link, .case-card:focus-visible .case-card-link,
.door:hover .arrow { transform: translateX(4px); }
.nav-links a:not(.btn-primary) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 0 1px;
  transition: background-size 240ms var(--ease-ui), background-position 0s linear 240ms;
}
.nav-links a:not(.btn-primary):hover,
.nav-links a:not(.btn-primary):focus-visible {
  background-position: left bottom;
  background-size: 100% 1px;
  transition: background-size 240ms var(--ease-ui), background-position 0s;
}
.form-field input, .form-field textarea, .enquiry-form input, .enquiry-form textarea {
  background-image: linear-gradient(#F0EDE8, #F0EDE8);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  transition: background-size 240ms var(--ease-ui);
}
.form-field input:focus, .form-field textarea:focus,
.enquiry-form input:focus, .enquiry-form textarea:focus { background-size: 100% 1px; }
.diag-row { transition: color 200ms var(--ease-ui); }
.diag-row:hover .diag-num { color: #F0EDE8; }
.why-step { position: relative; }
.why-step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .why-ladder:not(.is-on) .why-step::before { transform: scaleX(0); }
  .why-ladder.is-on .why-step::before { animation: mc-rule 700ms var(--ease-draw) forwards; }
  .why-ladder.is-on .why-step:nth-child(2)::before { animation-delay: 100ms; }
  .why-ladder.is-on .why-step:nth-child(3)::before { animation-delay: 200ms; }
  .why-ladder.is-on .why-step:nth-child(4)::before { animation-delay: 300ms; }
  .why-ladder.is-on .why-step:nth-child(5)::before { animation-delay: 400ms; }
}
.eyebrow { transition: none !important; letter-spacing: 0.02em !important; }

.case-card .case-card-img,
.cases-three .case-card-photo,
.case-card:hover .case-card-img,
.case-card:focus-visible .case-card-img,
.cases-three .case-card:hover .case-card-photo,
.cases-three .case-card:focus-visible .case-card-photo { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .case-card:hover .case-card-img,
  .case-card:focus-visible .case-card-img,
  .cases-three .case-card:hover .case-card-photo,
  .cases-three .case-card:focus-visible .case-card-photo {
    transform: scale(1.03);
    filter: none;
    transition: transform 400ms var(--ease-out);
  }
  /* The shared sheet hides these titles on any hover device. Keep that
     for JS, and leave them in the card when scripts do not run. */
  html:not(.js) .cases-three .case-card h3 {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    aspect-ratio: auto;
    margin: 12px 0 0;
    padding: 0;
    display: block;
    opacity: 1;
    text-shadow: none;
    pointer-events: auto;
  }
}

/* Floating conversation button. Bottom-right on a wide screen, centred on a phone. */
a.sticky-cta,
a.sticky-cta.is-on,
a.sticky-cta.is-hidden {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  z-index: 90;
  left: auto !important;
  right: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: calc(100vw - 40px);
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden;
  padding: 12px 14px !important;
  padding-inline: 14px !important;
  border-radius: 2px !important;
  border: 1px solid #F0EDE8 !important;
  background: #F0EDE8 !important;
  color: #111111 !important;
  font-family: Lora, "Lora Fallback", serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  transform: translateY(calc(100% + 24px));
  opacity: 1;
  pointer-events: none;
  visibility: visible;
  white-space: nowrap;
  transition: transform 320ms var(--ease-out);
}
a.sticky-cta.is-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
a.sticky-cta.is-hidden,
a.sticky-cta:not(.is-on) {
  transform: translateY(calc(100% + 24px));
  opacity: 1;
  pointer-events: none;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  a.sticky-cta,
  a.sticky-cta.is-on,
  a.sticky-cta.is-hidden {
    transition: transform 320ms var(--ease-out) !important;
  }
}
@media (max-width: 767px) {
  a.sticky-cta,
  a.sticky-cta.is-on,
  a.sticky-cta.is-hidden {
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translate(-50%, calc(100% + 24px));
  }
  a.sticky-cta.is-on { transform: translate(-50%, 0); }
  a.sticky-cta.is-hidden,
  a.sticky-cta:not(.is-on) { transform: translate(-50%, calc(100% + 24px)); }
  body:has(a.sticky-cta) { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  body:has(.path-strip-sticky) a.sticky-cta,
  body:has(.path-strip-sticky) a.sticky-cta.is-on,
  body:has(.path-strip-sticky) a.sticky-cta.is-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:has(.path-strip-sticky) { padding-bottom: 0 !important; }
  .symptoms-section,
  .cases-section,
  .pathway-section,
  .guarantee-section,
  .about-section,
  .faq-section,
  .contact-section,
  .b2b-section { padding-bottom: 96px !important; }
}
.door-price { text-wrap: balance; }
.footer-nav { row-gap: 4px; column-gap: 22px; }
@media (max-width: 940px) {
  .footer-nav { row-gap: 0; column-gap: 18px; }
  .footer-nav a { margin-top: -8px; margin-bottom: -8px; }
}
@media (max-width: 767px) {
  .footer-copy .fc-link { padding-bottom: 2px; }
  .footer-copy { row-gap: 8px; }
  .footer-nav { justify-content: flex-start; column-gap: 18px; }
}
h1, h2, h3, .door-title, .hero-cta-title, .diag-result-v, .cred-note, .deck-name, .deck-note { text-wrap: balance; }
.lede, .deck-def, .symptoms-hint, .symptoms-box-body, .door-body, .door-best, .callout-note, .cred-note { text-wrap: pretty; }
.cred-note { text-wrap: balance; }

/* Page transitions. The header stays put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 160ms var(--ease-exit) both mc-vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both mc-vt-in; }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header::after, .nav-logo, .h1-lines .line > span, .line > span,
  .proof-list > li + li::before, .diag-row::after, .diag-list--loud .diag-row::after,
  .diag-list--loud .diag-num, .diag-list--loud .diag-text, .diag-list--loud .diag-result,
  .why-step::before, .deck-stroke, .parallax-target, .guarantee-stamp, .guarantee-stamp circle,
  .hero-cta-box::after, .hero .lede, .hero .hero-caps, .hero-cta-box > *,
  a.sticky-cta, a.sticky-cta.is-on, a.sticky-cta.is-hidden {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    clip-path: none !important;
  }
  .site-header::after, .nav-logo, .h1-lines .line > span, .line > span,
  .proof-list > li + li::before, .diag-row::after, .diag-list--loud .diag-row::after,
  .diag-list--loud .diag-num, .diag-list--loud .diag-text, .diag-list--loud .diag-result,
  .diag-result-k, .diag-result-v,
  .why-step::before, .parallax-target, .guarantee-stamp circle,
  .hero .lede, .hero .hero-caps, .hero .hero-cta, .hero .hero-results, .hero-cta-box > *,
  .deck-end span, .deck-stop {
    transform: none !important;
    opacity: 1 !important;
  }
  .deck-dot, .deck-tick { opacity: 1 !important; }
  .deck-end { opacity: 1 !important; }
  a.sticky-cta.is-on { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  a.sticky-cta.is-hidden, a.sticky-cta:not(.is-on) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  .guarantee-stamp { transform: rotate(-9deg) !important; opacity: 0.92 !important; }
  .parallax-target { transform: none !important; }
  .deck-stroke { stroke-dashoffset: 0 !important; transition: none !important; }
  .b2b-section { height: auto !important; padding: 72px 0 !important; }
  .b2b-pin { position: static; height: auto; overflow: visible; display: block; }
  .b2b-art { max-height: none; aspect-ratio: 21 / 9; }
  .deck-end span, .deck-name { color: #F0EDE8 !important; }
  .deck-def { color: #D2D2D2 !important; }
  .seq-item { opacity: 1 !important; transform: none !important; animation: none !important; }
  .proof-count { min-width: 0; }
  #grid-cursor { display: none !important; }
}
@media (max-width: 767px) {
  .parallax-target { --py-limit: 20; }
}

/* Bridge pan. The picture is wider than the frame, so ±3% stays inside the overscan. */
.b2b-art picture { backface-visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.can-pan .b2b-art picture {
    transform: translate3d(3%, 0, 0);
    animation-name: mc-pan;
    animation-duration: 36s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    will-change: transform;
  }
}
@keyframes mc-pan {
  from { transform: translate3d(3%, 0, 0); }
  to { transform: translate3d(-3%, 0, 0); }
}
/* Talk cards. The body takes the spare height so the hairline and meta share a baseline. */
.topics .topic { display: flex; flex-direction: column; }
.topics .topic > p { flex: 1 1 auto; }
.topics .topic p + .topic-format { margin-top: auto; }
@media (max-width: 900px) {
  .topics .topic p + .topic-format { margin-top: 18px; }
}
/* Testimonial logos. Each mark has its own height, left aligned under the quote. */
.speak-quotes .speak-quote cite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.speak-logo { display: block; line-height: 0; max-width: 100%; }
.speak-logo picture { display: block; height: 100%; }
.speak-logo img { display: block; height: 100%; width: auto; max-width: 100%; }
.speak-logo--ignite { height: 32px; }
.speak-logo--unltd { height: 26px; }
.speak-logo--tomorrow { height: 24px; }
@media (max-width: 899px) {
  .speak-logo { height: 28px; }
  .pod-thumb,
  .pod-thumb img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 480px) {
  .pod-thumb { align-self: flex-start; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .hero-grid--split { align-items: start; }
}

/* Scroll-progress lighting for the new diagram. No JS leaves the final state. */
html.js .b2b-section { --b2b: 0; }
html.js .b2b-section .deck-end span,
html.js .b2b-section .deck-name,
html.js .b2b-section .deck-def { color: #8D8D8D; }
html.js .b2b-section .deck-dot,
html.js .b2b-section .deck-tick { opacity: 0.28; }
html.js .b2b-section .deck-end.is-on span,
html.js .b2b-section .deck-stop.is-on .deck-name { color: #F0EDE8; }
html.js .b2b-section .deck-stop.is-on .deck-def { color: #D2D2D2; }
html.js .b2b-section .deck-end.is-on .deck-dot,
html.js .b2b-section .deck-stop.is-on .deck-tick { opacity: 1; }

/* One-shot section sequences. About 120ms apart. Reduced motion and no JS stay painted. */
@media (prefers-reduced-motion: no-preference) {
  html.js .seq-item { opacity: 0; }
  html.js .is-seq .seq-item {
    animation: mc-rise-sm 420ms var(--ease-out) both;
    animation-delay: var(--seq, 0ms);
  }
  html.js .seq-item .line > span {
    transform: none !important;
    animation: none !important;
  }
  html.js #symptoms .reveal:not(.seq-item),
  html.js #case-studies .reveal:not(.seq-item),
  html.js #pathway .reveal:not(.seq-item),
  html.js #guarantee .reveal:not(.seq-item),
  html.js #about .reveal:not(.seq-item),
  html.js #faq .reveal:not(.seq-item),
  html.js #contact .reveal:not(.seq-item) {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html.js #diagList .diag-row .diag-num,
  html.js #diagList .diag-row .diag-text,
  html.js #diagList .diag-row .diag-result {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html.js #diagList .diag-result-k,
  html.js #diagList .diag-result-v {
    opacity: 0;
    transition: opacity .3s ease;
    transition-delay: calc(var(--seq, 0ms) + 120ms);
  }
  html.js #symptoms.is-seq #diagList .diag-result-k,
  html.js #symptoms.is-seq #diagList .diag-result-v { opacity: 1; }
  .symptoms-section .diag-list--loud.has-focus .diag-row .diag-text,
  .symptoms-section .diag-list--loud.has-focus .diag-row .diag-num,
  .symptoms-section .diag-list--loud.has-focus .diag-row .diag-result { opacity: 1; }
}

/* Live hero polish. These rules sit last on main and set the fold. */
.hero.hero--v4 { padding-top: clamp(48px, 5vw, 72px); }
.h1-lines { line-height: 1.04 !important; }
.h1-v4 .line, .line { padding-bottom: .2em; margin-bottom: -.2em; }
.h1-lines .line > span, .line > span { padding-bottom: 0; }
.proof-list a { font-size: clamp(34px, 3.3vw, 48px); }
.proof-stat, .proof-stat--live { font-size: 1em !important; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.proof-stat--live { font-variant-numeric: normal; }
.proof-count { font-variant-numeric: lining-nums proportional-nums; min-width: 5.2ch; display: inline-block; }
@media (max-width: 767px) {
  .proof-list a { font-size: clamp(32px, 9vw, 38px); }
}
.hero-main .h1-lines { line-height: 1.05 !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .case-card h3 { opacity: 1 !important; transform: none !important; }
}
/* Bridge pan on the hero picture, the same compositor move as the live site. */
.hero-art picture {
  display: block;
  backface-visibility: hidden;
}
.hero-art .parallax-target {
  transform: translate3d(0, 0, 0) scale(1.08);
  backface-visibility: hidden;
  will-change: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art picture {
    transform: translate3d(3%, 0, 0);
    animation-name: mc-pan;
    animation-duration: 36s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    will-change: transform;
  }
}

/* Underline is the only hover change on text links. */
.nav-links a:not(.btn-primary),
.nav-links a:not(.btn-primary):hover,
.nav-links a:not(.btn-primary):focus-visible {
  background-image: none;
}
a:not(.btn-primary):not(.nav-logo):not(.sticky-cta):not(.door):not(.case-card):not(.case-tile):not(.insight-row):not(.nav-cta):not(.nav-cta-mobile):hover,
a:not(.btn-primary):not(.nav-logo):not(.sticky-cta):not(.door):not(.case-card):not(.case-tile):not(.insight-row):not(.nav-cta):not(.nav-cta-mobile):focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  background-image: none;
}
.tl-item a:hover .tl-title,
.tl-item a:focus-visible .tl-title,
.footer-nav a:hover,
.footer-copy .fc-link:hover,
.footer-social a:hover,
.footer-aidn:hover,
.about-links a:hover,
.about-back:hover {
  color: inherit;
  border-bottom-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Text links underline only. Buttons may invert, and they do not lift.
   Card lift, carousel scale, and opacity or saturation shifts are off.
   Keep-exploring tiles stay full colour. The homepage sheet is not rehashed;
   these rules win on the properties they set. */
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible,
a.btn-primary:hover,
a.btn-outline:hover,
button.btn-primary:hover {
  transform: none !important;
}
.case-card:hover,
.case-card:hover:nth-child(2),
.case-card:hover:nth-child(3),
.case-tile:hover,
.pod:hover,
.door:hover,
.note-card:hover,
.gallery-tile:hover {
  transform: none !important;
}
.case-card-img,
.case-card:hover .case-card-img,
.case-tile-img,
.case-tile:hover .case-tile-img,
.pod-thumb img,
.pod:hover .pod-thumb img,
.sc-main,
.gallery-tile img,
.gallery-tile:hover img {
  filter: none !important;
}
.case-tile:hover .case-tile-img,
.case-card:hover .case-card-img,
.pod:hover .pod-thumb img,
.gallery-tile:hover img {
  transform: none !important;
}
.footer-aidn:hover,
.footer-aidn:focus-visible,
.detail-site-link:hover,
.detail-site-link:focus-visible { color: var(--grey-2) !important; }
.case-next-all:hover,
.case-next-all:focus-visible { color: var(--grey-1) !important; border-color: var(--grey-3) !important; }
.footer-copy .fc-link:hover,
.footer-copy .fc-link:focus-visible { border-color: var(--border-col, #2A2A2A) !important; }
.pod:hover .pod-go { color: var(--grey-2) !important; }
.nav-links a:not(.btn-primary):not([aria-current="page"]):not(.active):hover,
.nav-links a:not(.btn-primary):not([aria-current="page"]):not(.active):focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible,
.insights-list a:hover,
.insights-list a:focus-visible,
.about-press a:hover,
.scorecard-list li a:hover,
.hero-audit-cta:hover,
.hero-audit-cta:focus-visible,
.hero-alt a:hover,
.hero-alt a:focus-visible {
  color: var(--grey-1) !important;
  border-color: var(--border-col, #2A2A2A) !important;
}
.nav-links a[aria-current="page"],
.nav-links a.active { color: var(--cream) !important; }
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--grey-2) !important;
  border-color: var(--border-col, #2A2A2A) !important;
}
.insights-list a:hover .arrow,
.hero-door a:hover .btn-arrow { transform: none !important; }
.card:hover { transform: none !important; }
.spb-media img,
.spb-media:hover img { filter: none !important; transform: none !important; }
.pod:hover .pod-thumb img,
.video-embed:hover .video-play {
  transform: none !important;
}
.sc-arrow:hover,
.sc-arrow:focus-visible {
  transform: translateY(-50%) !important;
  background: rgba(240, 237, 232, 0.92) !important;
}
.video-embed:hover .video-play { transform: translate(-50%, -50%) !important; }
.aidn-badge:hover,
.aidn-badge:focus-visible { opacity: 1 !important; }
.sc-thumb:hover { opacity: 0.45 !important; }
.sc-thumb.active,
.sc-thumb.active:hover { opacity: 1 !important; }
.case-card:hover .case-card-logo { opacity: 0.8 !important; }
.nav-links a:not(.btn-primary):hover,
.nav-links a:not(.btn-primary):focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-copy a:hover,
.footer-copy a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible,
.footer-aidn:hover,
.footer-aidn:focus-visible,
.breadcrumb-nav a:hover,
.breadcrumb-nav a:focus-visible,
.about-links a:hover,
.about-back:hover,
p a:hover,
li a:hover,
.lede a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Primary buttons keep the cream fill. Hover adds an underline only. */
a.sticky-cta:hover,
a.sticky-cta:focus-visible {
  background: #F0EDE8 !important;
  color: var(--black, #111111) !important;
  border-color: #F0EDE8 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible,
a.nav-cta.btn-primary:hover,
a.nav-cta.btn-primary:focus-visible,
a.nav-cta-mobile.btn-primary:hover,
a.nav-cta-mobile.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible {
  background: var(--cream, #F0EDE8) !important;
  color: var(--black, #111111) !important;
  border-color: var(--cream, #F0EDE8) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  box-shadow: none !important;
  transform: none !important;
}

/* These labels underline. Colour, border and background stay put. */
a.concept-link:hover,
a.concept-link:focus-visible {
  color: var(--grey-1, #D2D2D2) !important;
  border-color: rgba(176, 179, 196, 0.3) !important;
  text-shadow: 0 0 14px rgba(240, 237, 232, 0.22) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
a.concept-link:hover .arrow,
a.concept-link:focus-visible .arrow { transform: none !important; }
.callout-note a:hover,
.callout-note a:focus-visible {
  color: var(--cream, #F0EDE8) !important;
  border-color: var(--grey-3, #3A3A3A) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.pp-check:hover,
.pp-check:focus-within,
.pp-preset:hover,
.pp-preset:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-clear:hover,
.pp-clear:focus-visible {
  color: var(--grey-2, #8D8D8D) !important;
  border-color: var(--border-2, rgba(141, 141, 141, .35)) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.journey-skip:hover,
.journey-skip:focus-visible {
  color: var(--grey-2, #8D8D8D) !important;
  border-bottom-color: var(--grey-3, #3A3A3A) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aoc-btn:hover,
.aoc-btn:focus-visible {
  color: var(--grey-2, #8D8D8D) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aoc-btn:hover .faq-icon::before,
.aoc-btn:hover .faq-icon::after,
.aoc-btn:focus-visible .faq-icon::before,
.aoc-btn:focus-visible .faq-icon::after {
  background: var(--grey-3, #3A3A3A) !important;
}

/* Home offer cards: no border, background or lift. Underline the CTA only. */
a.door:hover,
a.door:focus-visible {
  border-color: var(--grey-3, #3A3A3A) !important;
  background: var(--surface, #161616) !important;
  transform: none !important;
}
a.door:hover .door-num,
a.door:focus-visible .door-num { color: var(--grey-2, #8D8D8D) !important; }
a.door:hover .door-link,
a.door:focus-visible .door-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.door:hover .door-link .arrow,
a.door:focus-visible .door-link .arrow { transform: none !important; }
.mode-card:hover,
.mode-card:focus-visible {
  border-color: var(--border-col, #2A2A2A) !important;
  background: transparent !important;
  transform: none !important;
}

.hero-art-wrap img,
.symptoms-art-wrap img { filter: none !important; }