/* hd01 — approved by Simon 5 Oct 2026 */
/* hd01  Heavier at the same size
   Family: headings (round 3) - homepage ideas gallery, 5 Oct 2026.
   Every heading below the hero gains weight with no size change: h2 500 to 700 (Bodoni), h3 600 to 700, h4 700 to 800 (Manrope). Tracking is tightened to -0.024em / -0.017em / -0.010em so the extra ink of the heavier weight is paid for and no heading renders wider than live. This is t02 without t02's growth: the same look, none of the wrapping.

   Original: type/t02 "Tight display tracking, fluid scale". Simon liked the look
   but t02 also grew the headings, which pushed several from one line to two. So
   every rule here works the other way: the headings POP, and the rendered width
   and LINE COUNT stay at or below the live site at 1440, 820 and 390.

   No rule in this file targets h1, so the hero headline cannot change.
   Live baseline measured before writing: h2 Bodoni 40px/500 ls -0.01em, h3
   Manrope 22px/600 ls normal, h3 18px/600 (operation counts), h4 18px/700.
   Verified by tools/headings/lines.py - see status/headings.md.
   No wording, links, images or layout changed. All motion is static. */

/* heavier at the same size, with tracking tightened to hold the width */
html:not(._):not(._) body.home.home main#main:not(#vx-none) h2:not(#site-search-title){font-weight:700 !important;letter-spacing:-0.024em !important;}
html:not(._):not(._) body.home.home main#main:not(#vx-none) h3{font-weight:700 !important;letter-spacing:-0.017em !important;}
html:not(._):not(._) body.home.home main#main:not(#vx-none) h4{font-weight:800 !important;letter-spacing:-0.010em !important;}

/* the numbers band and the appointment band keep their own colours */
html:not(._):not(._) body.home.home main#main:not(#vx-none) section#trust.band.hs :is(h2,h3){color:#ffffff !important;}
html:not(._):not(._) body.home.home main#main:not(#vx-none) section.booking-band :is(h2,h3){color:#14212e !important;}

/* wp02 — approved by Simon 5 Oct 2026 */
@layer vx {
  /* wp02 · Softer navy, lifted at both ends
     Family: wipe (round 3). Where wp01 only changes the wipe, this one lightens
     the whole button family by a step, so the darkest thing on the page stops
     being the appointment buttons:

       .hs-btn-fill   #1c3656  ->  #24567f at rest, wipes to #2a5f92
       outlined       wipes to #2a5f92

     #2a5f92 is a step lighter and a little less saturated than the Meet Dr
     Chen blue of wp01, which reads softer against the ivory page. The solid
     pills no longer look like holes in the page.

     Resting filled : #fff on #24567f = 7.7:1  (was 11.8:1 on #1c3656)
     Wiped          : #fff on #2a5f92 = 6.4:1
     Outlined rest  : #183d69 on #f6f5ef = 10.1:1
     Same targets, geometry, timing and reduced-motion handling as b20. */

  html:not(._) .hs-btn-line,
  html:not(._) .hs-btn-sm,
  html:not(._) .hs-btn-fill,
  html:not(._) .hr-call {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease !important;
  }

  html:not(._) .hs-btn-line::before,
  html:not(._) .hs-btn-sm::before,
  html:not(._) .hs-btn-fill::before,
  html:not(._) .hr-call::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: #2a5f92 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1) !important;
  }

  html:not(._) .hs-btn-line > span,
  html:not(._) .hs-btn-sm > span,
  html:not(._) .hs-btn-fill > span,
  html:not(._) .hr-call > span,
  html:not(._) .hr-call > svg {
    position: relative !important;
    z-index: 1 !important;
    transition: color .2s ease !important;
  }

  html:not(._) .hs-btn-line:hover,
  html:not(._) .hs-btn-line:focus-visible,
  html:not(._) .hs-btn-sm:hover,
  html:not(._) .hs-btn-sm:focus-visible,
  html:not(._) .hr-call:hover,
  html:not(._) .hr-call:focus-visible {
    color: #fffaf2 !important;
    border-color: #2a5f92 !important;
    background-color: transparent !important;
  }
  html:not(._) .hs-btn-line:hover::before, html:not(._) .hs-btn-line:focus-visible::before,
  html:not(._) .hs-btn-sm:hover::before,  html:not(._) .hs-btn-sm:focus-visible::before,
  html:not(._) .hr-call:hover::before,     html:not(._) .hr-call:focus-visible::before,
  html:not(._) .hs-btn-fill:hover::before, html:not(._) .hs-btn-fill:focus-visible::before { transform: scaleX(1) !important; }

  html:not(._) .hs-btn-fill { background: #24567f !important; border-color: #24567f !important; color: #fff !important; }
  html:not(._) .hs-btn-fill:hover,
  html:not(._) .hs-btn-fill:focus-visible { background: #24567f !important; border-color: #2a5f92 !important; }

  html:not(._) .hs-btn:focus-visible { outline: 3px solid #2a5f92 !important; outline-offset: 3px !important; }

  @media (prefers-reduced-motion: reduce) {
    html:not(._) .hs-btn-line, html:not(._) .hs-btn-sm, html:not(._) .hs-btn-fill, html:not(._) .hr-call { transition: none !important; }
    html:not(._) .hs-btn-line::before, html:not(._) .hs-btn-sm::before,
    html:not(._) .hs-btn-fill::before, html:not(._) .hr-call::before { transition: none !important; }
    html:not(._) .hs-btn-line > span, html:not(._) .hs-btn-sm > span,
    html:not(._) .hs-btn-fill > span, html:not(._) .hr-call > span, html:not(._) .hr-call > svg { transition: none !important; }
  }
}

/* pf02 — approved by Simon 5 Oct 2026 */
/* pf02 - Portrait card that sticks, paragraphs left on the paper
   Only the portrait, the credentials and Meet Dr Chen sit in the frosted
   card; the two introduction paragraphs stay on the ivory paper below it, so
   the card is short (about 300px) and can stay stuck beside the six reasons
   while they scroll. No blur on the text, no rule through anything. */
html:not(._) #why-choose .hs-why-intro{position:sticky;top:120px;padding-bottom:0}
html:not(._) #why-choose .hs-why-intro h2{margin:0 0 22px}
html:not(._) #why-choose .mm-card{
  display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:18px;align-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.94),var(--fg-surface,rgba(250,248,242,.62)));
  border-radius:22px;padding:16px;margin:0 0 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 32px -26px rgba(24,61,96,.45),
    inset 0 0 0 1px rgba(255,255,255,.75)}
html:not(._) #why-choose .mm-photo{
  width:120px!important;height:146px!important;max-width:none!important;border-radius:14px;
  box-shadow:0 0 0 1px rgba(24,61,96,.12),0 8px 16px -10px rgba(24,61,96,.4)}
html:not(._) #why-choose .mm-card-text{display:flex;flex-direction:column;gap:12px}
html:not(._) #why-choose .mm-name{display:flex;flex-direction:column;gap:2px;margin:0}
html:not(._) #why-choose .mm-name b{font-size:20px;line-height:1.25}
html:not(._) #why-choose .mm-name span{font-size:16px;line-height:1.45}
html:not(._) #why-choose .mm-card a.pill{align-self:flex-start;margin:0;min-height:44px}
html:not(._) #why-choose .hs-why-intro > p{margin:0 0 14px}
html:not(._) #why-choose .hs-why-intro > p:last-child{margin-bottom:0}
@media (max-width:1000px){
  html:not(._) #why-choose .hs-why-intro{position:static}
  html:not(._) #why-choose .mm-card{grid-template-columns:108px minmax(0,1fr);padding:14px}
  html:not(._) #why-choose .mm-photo{width:108px!important;height:130px!important}}
@media (max-width:560px){
  html:not(._) #why-choose .mm-card{grid-template-columns:96px minmax(0,1fr);column-gap:14px}
  html:not(._) #why-choose .mm-photo{width:96px!important;height:118px!important}
  html:not(._) #why-choose .mm-name b{font-size:19px}}

/* mf14 — approved by Simon 5 Oct 2026 */
/* mf14 - Dot grid behind the four steps (Round 3 motif 14/24)
   Anchor: the four-step grid in "What to expect at your visit". A dot grid runs
   behind all four columns so the steps sit on one continuous measured field
   instead of four separate blocks of text. Two mask layers are intersected: a
   vertical fade so the grid never crowds the numbers, and a horizontal fade so
   it dissolves before the outer margins. */
html:not(._) body.home #main #journey .hs-steps{position:relative;isolation:isolate}
html:not(._) body.home #main #journey .hs-steps::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,rgba(24,61,96,.17) .9px,rgba(24,61,96,0) 1.4px);background-size:15px 15px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000 28%,#000 64%,rgba(0,0,0,0)),linear-gradient(90deg,rgba(0,0,0,0),#000 10%,#000 90%,rgba(0,0,0,0));-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,rgba(0,0,0,0),#000 28%,#000 64%,rgba(0,0,0,0)),linear-gradient(90deg,rgba(0,0,0,0),#000 10%,#000 90%,rgba(0,0,0,0));mask-composite:intersect}
html:not(._) body.home #main #journey .hs-steps > li{z-index:1}

/* sh06 — approved by Simon 5 Oct 2026 */
/* sh06 - Drifting gradient text (Round 3 sheen 06/14)
   Not a moving bar at all: the numerals are filled with a gold gradient that
   drifts slowly across the glyphs, so the light source appears to be inside the
   type. A solid #e9d49b background-clip colour is declared first, so if
   background-clip:text is ever unsupported the figure still renders solid gold at
   9.1:1 rather than vanishing. The drift is 18s per cycle - slower than any other
   variant here - and under reduced motion the gradient is frozen at its mid
   point, which is a flat, fully readable gold.
   NOTE: background-clip:text is excluded from the standard pixel-sampling
   contrast walk, so this variant is additionally measured by
   tools/sheen/gradient-text-check.py (see status/sheen.md). */
html:not(._) body.home #main section#trust .hs-big > span{background-image:linear-gradient(100deg,#e9d49b 0%,#e9d49b 26%,#fdf3d6 42%,#e9d49b 58%,#dcc189 78%,#e9d49b 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sh06-drift 18s ease-in-out infinite alternate}
@keyframes sh06-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){html:not(._) body.home #main section#trust .hs-big > span{animation:none;background-position:38% 50%}}

/* sh12 — approved by Simon 5 Oct 2026 */
/* sh12 - Staggered cascade, once (Round 3 sheen 12/14)
   One trigger, a sequence: the light crosses the 190+ first, and 520ms later a
   second, wider pass crosses the six figures below it. Sequencing is what makes
   this different from sh03, where one band crosses the whole row at once - here
   the eye is led from the headline number down to the evidence. Two passes total,
   both finished inside 3.4s, then the band is completely still. */
html:not(._) body.home #main section#trust .hs-big{position:relative;isolation:isolate;overflow:hidden}
html:not(._) body.home #main section#trust .hs-big::after{content:"";position:absolute;top:-16%;bottom:-16%;left:0;width:130px;pointer-events:none;z-index:2;transform:translateX(-180px) skewX(-14deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 34%,rgba(255,255,255,.36) 50%,rgba(255,255,255,.2) 66%,rgba(255,255,255,0));opacity:0}
html:not(._) body.home #main section#trust .hs-big.sh-pass::after{animation:sh12-a 1.6s cubic-bezier(.3,0,.22,1) 1 both}
html:not(._) body.home #main section#trust .hs-num-grid{position:relative;isolation:isolate;overflow:hidden}
html:not(._) body.home #main section#trust .hs-num-grid::after{content:"";position:absolute;top:-26%;bottom:-26%;left:0;width:260px;pointer-events:none;z-index:0;transform:translateX(-320px);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 38%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.1) 62%,rgba(255,255,255,0));opacity:0}
html:not(._) body.home #main section#trust .hs-num-grid.sh-pass::after{animation:sh12-b 2s cubic-bezier(.3,0,.22,1) 1 both}
@keyframes sh12-a{0%{transform:translateX(-180px) skewX(-14deg);opacity:0}14%{opacity:1}70%{opacity:1}100%{transform:translateX(600px) skewX(-14deg);opacity:0}}
@keyframes sh12-b{0%{transform:translateX(-320px);opacity:0}14%{opacity:1}70%{opacity:1}100%{transform:translateX(1300px);opacity:0}}
html:not(._) body.home #main section#trust .hs-stat{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){html:not(._) body.home #main section#trust .hs-big::after,html:not(._) body.home #main section#trust .hs-num-grid::after{display:none!important}}

/* s06 — approved by Simon 5 Oct 2026 */
/* s06 - Focus-pull panel
   Source: Magic UI - Blur Fade
   The panel's own eyebrow and paragraph resolve out of blur on load while the
   heading is already sharp, so the eye lands on the promise first and the small
   print follows. One pass, 1.1s, then static. Under reduced motion everything is
   simply sharp from the start. */
@media (prefers-reduced-motion: no-preference) {
html:not(._) .cinema .hero-copy .kicker {
  animation: s06-pull 1.1s cubic-bezier(.2, .7, .3, 1) .15s both;
}
html:not(._) .cinema .hero-copy .hero-intro {
  animation: s06-pull 1.1s cubic-bezier(.2, .7, .3, 1) .32s both;
}
html:not(._) .cinema .hero-pills {
  animation: s06-pull 1.1s cubic-bezier(.2, .7, .3, 1) .46s both;
}
@keyframes s06-pull {
  from { opacity: 0; filter: blur(7px); transform: translateY(5px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
}
html:not(._) body.home .cinema #hero-qualifications small { opacity: 1; color: #3d5474; }
@media (max-width: 1100px) {
}
@media (max-width: 760px) {
}

/* s32 — approved by Simon 5 Oct 2026 */
/* s32 - Qualifications lift on hover
   Source: Aceternity UI - Card Hover Effect
   Each qualification sits in its own cell inside the rail. On hover or focus
   the cell lights, its crest gains a ring, and the qualification's name goes
   from the site's soft navy to full navy - a lift you can see without any
   movement at all. The rail's own scroll and its pause button are untouched.

   The rail surface is 0.96 opaque: the live rail is 50% opaque over the
   photograph's dark pixels and its 13px captions measure 2.48:1. */
html:not(._) body.home .cinema #hero-qualifications .hr-view { padding: 3px 0; }
html:not(._) body.home .cinema #hero-qualifications .hr-track > div {
  border-radius: 12px;
  padding: 8px 12px;
  transition: background-color .18s ease, box-shadow .18s ease;
}
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:hover,
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:focus-within {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 18px -12px rgba(24, 61, 96, .6), inset 0 0 0 1px rgba(24, 61, 105, .18);
}
html:not(._) body.home .cinema #hero-qualifications .stat-mark.crest {
  border-radius: 8px;
  transition: box-shadow .18s ease;
}
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:hover .stat-mark.crest,
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:focus-within .stat-mark.crest {
  box-shadow: 0 0 0 2px rgba(24, 61, 105, .3), 0 0 0 5px rgba(201, 162, 39, .22);
}
html:not(._) body.home .cinema #hero-qualifications .stat-text b { color: #2b4d72; }
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:hover .stat-text b,
html:not(._) body.home .cinema #hero-qualifications .hr-track > div:focus-within .stat-text b { color: #102c48; }
html:not(._) body.home .cinema #hero-qualifications small { opacity: 1; color: #3d5474; }
html:not(._) body.home .cinema #hero-qualifications .qual-link:focus-visible {
  outline: 3px solid #285581;
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html:not(._) body.home .cinema #hero-qualifications .hr-track > div,
html:not(._) body.home .cinema #hero-qualifications .stat-mark.crest { transition: none; }
}
@media (max-width: 1100px) {
}
@media (max-width: 1100px) {
}
@media (max-width: 760px) {
}

/* The rail is below the fold on the phone, so the same lift is given to the
   condition links, which are not. At rest each is a white plate with its own
   shadow; on touch a press lifts it. Same idea, same lift, different surface. */
html:not(._) .cinema .hero-pills a:hover,
html:not(._) .cinema .hero-pills a:focus-visible,
html:not(._) .cinema .hero-pills a:active {
  transform: translateY(-2px);
  background: #fff !important;
  box-shadow: 0 2px 2px rgba(24, 61, 96, .08), 0 16px 24px -14px rgba(24, 61, 96, .6),
  inset 0 0 0 1px rgba(201, 162, 39, .7) !important;
}
html:not(._) .cinema .hero-pills a:focus-visible {
  outline: 3px solid #285581;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html:not(._) .cinema .hero-pills a:hover,
  html:not(._) .cinema .hero-pills a:active { transform: none; }
}

/* w30 — approved by Simon 5 Oct 2026 */

html:not(._) body:not(#a1):not(#a2) #journey .section-top{margin-bottom:6px!important}
html:not(._) body:not(#a1):not(#a2) #journey .section-top h2{max-width:20ch}

html:not(._) body:not(#a1):not(#a2) #journey .band-inner{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:0 72px;align-items:start;
}
html:not(._) body:not(#a1):not(#a2) #journey .section-top{grid-column:1/-1}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps{
  display:block;list-style:none;margin:34px 0 0;padding:0;
}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li{
  display:grid;grid-template-columns:60px minmax(0,1fr);gap:0 28px;
  align-items:start;position:relative;
  padding:0 0 42px;margin:0!important;
}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li:last-child{padding-bottom:0 !important}
/* one hairline threads bead to bead */
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li::after{
  content:""!important;position:absolute!important;
  left:29px!important;top:68px!important;bottom:8px!important;
  width:2px!important;height:auto!important;
  background:linear-gradient(180deg,rgba(24,61,105,.28),rgba(24,61,105,.07))!important;
  border-radius:2px;
}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li:last-child::after{display:none!important}
/* the dropped gradient bead */
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps .hs-step-n{
  grid-column:1;grid-row:1 / span 2;align-self:start;
  width:60px;height:60px;font-size:20px!important;font-weight:700;color:#ffffff;
  background:linear-gradient(155deg,#16365d 0%,#245d93 56%,#2f7bb4 100%)!important;
  box-shadow:0 15px 26px -14px rgba(18,48,86,.85),
             inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -2px 7px rgba(9,32,60,.34);
}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps h3{
  grid-column:2;grid-row:1;font-size:25px!important;line-height:1.24;margin:11px 0 10px;
}
html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps p{grid-column:2;grid-row:2;margin:0;max-width:40ch}
/* the prep panel keeps one position beside the list */
html:not(._) body:not(#a1):not(#a2) #journey .hs-prep{
  grid-column:2;grid-row:2;align-self:start;
  position:sticky !important;top:120px;margin:34px 0 0;display:block;
  padding:30px 32px 28px;border-radius:22px;
  border:1px solid rgba(24,61,105,.16)!important;
  background:linear-gradient(180deg,#ffffff 0%,var(--fg-surface,rgba(250,248,242,.62)) 100%);
  box-shadow:0 22px 48px -36px rgba(24,61,105,.6);
}
html:not(._) body:not(#a1):not(#a2) #journey .hs-prep h3{margin:0 0 18px;white-space:normal;font-size:22px}
html:not(._) body:not(#a1):not(#a2) #journey .hs-prep ul{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:16px!important;padding:0!important;margin:0 0 22px!important;
  border-top:0!important;
}
html:not(._) body:not(#a1):not(#a2) #journey .hs-prep li{
  grid-template-columns:30px minmax(0,1fr)!important;padding:0!important;
  font-size:17px!important;line-height:1.5;
}
html:not(._) body:not(#a1):not(#a2) #journey .hs-prep .hs-btn{width:100%;justify-content:space-between}
@media (max-width:1080px){
  html:not(._) body:not(#a1):not(#a2) #journey .band-inner{grid-template-columns:minmax(0,1fr);gap:0}
  html:not(._) body:not(#a1):not(#a2) #journey .hs-prep{
    grid-column:1;grid-row:auto;position:static;margin-top:36px;
  }
}
@media (max-width:900px){
  html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li{
    grid-template-columns:52px minmax(0,1fr);gap:0 18px;padding:0 0 34px;
  }
  html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps li::after{left:25px!important;top:60px!important}
  html:not(._) body:not(#a1):not(#a2) #journey ol.hs-steps .hs-step-n{width:52px;height:52px;font-size:18px}
  html:not(._) body:not(#a1):not(#a2) #journey .hs-prep{padding:24px 22px}
  html:not(._) body:not(#a1):not(#a2) #journey .hs-prep ul{grid-template-columns:minmax(0,1fr);gap:14px}
}


/* ===================== warmth/wm06 ===================== */

/* ---- the wash: everything below the hero ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none){
  background-color:#f8f5ec;
  background-image:radial-gradient(48% 36% at 8% 17%,rgba(40,91,129,0.325),rgba(40,91,129,0) 72%),radial-gradient(44% 34% at 90% 23%,rgba(21,49,79,0.25),rgba(21,49,79,0) 72%),radial-gradient(50% 38% at 73% 74%,rgba(203,168,104,0.25),rgba(203,168,104,0) 72%),radial-gradient(46% 34% at 13% 66%,rgba(40,91,129,0.188),rgba(40,91,129,0) 72%);
  background-repeat:no-repeat;
  background-attachment:fixed, fixed, fixed, fixed;
  background-size:auto, auto, auto, auto;
}

/* ---- hero: flat live ivory. The photograph covers this, so it is invisible;
   it is here only so no pool can bleed up into the glass panel. ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) section.cinema{background:#f6f5ef !important;}

/* ---- the light bands let the canvas through ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(section#why-choose,section#two-specialties,
  section#tailored,section#journey,section#watch){background:rgba(255,255,255,0) !important;}

/* ---- painted cards go translucent and warm. These four are the ones the
   live site paints and no approved variant restyles, so a flat translucent
   white is the faithful warm version of what is already there. ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,details.hs-path,details.hr-tfold,
  button[id^='hr-tab-']){
  background:rgba(255,248,232,0.56) !important;
  border-color:rgba(24,61,105,.16) !important;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-fold{background:rgba(255,248,232,0.56) !important;}

/* ---- the four surfaces the approved base DOES restyle keep their shape and
   get warmed instead: l21's #fbfbf8 chooser card, l21's pale-blue summary
   plate, pf02's portrait card gradient and w30's prep panel gradient. Their
   borders, shadows and geometry from the approved base are left alone. ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-ihave{background:rgba(255,248,232,0.56) !important;}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) details.hs-path>summary{background:#edf0e4 !important;}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) div.mm-card{
  background:linear-gradient(160deg,rgba(255,248,232,.60),rgba(233,235,219,.54)) !important;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) #journey .hs-prep{
  background:linear-gradient(180deg,#fffdf4 0%,#eef0e0 100%) !important;
}

/* ---- how the bands join: the live 1px hairline, navy on every step so the
   rules never turn dingy ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(section#why-choose,section#two-specialties,
  section#tailored,section#journey,section#watch){
  border-top:1px solid rgba(24,61,105,.12) !important;
}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) section#watch{
  border-bottom:1px solid rgba(24,61,105,.12) !important;
}

/* ---- numbers band left exactly as the approved base has it: the site navy
   and the site 0.035 panel. Last, so nothing above can reach into it. ---- */
html:not(._):not(.__) body.home.home main#main:not(#vx-none) section#trust.band.hs{background:#15314f !important;}
html:not(._):not(.__) body.home.home main#main:not(#vx-none) section#trust.band.hs .hs-num-top{
  background:rgba(255,255,255,.035) !important;
}

/* ---- phone: the same four pools at the same relative places, carried on much
   wider radii so they still cover a 390px column instead of shrinking into the
   middle of it, and the pale surfaces opened up so the wash can be seen through
   them. The hero is untouched here too: the 390 shot of the hero is identical
   to the approved base's. ---- */
@media (max-width:760px){
  html:not(._):not(.__) body.home.home main#main:not(#vx-none){
    background-image:radial-gradient(82% 58% at 8% 14%,rgba(40,91,129,0.325),rgba(40,91,129,0) 72%),
      radial-gradient(76% 54% at 90% 20%,rgba(21,49,79,0.25),rgba(21,49,79,0) 72%),
      radial-gradient(86% 60% at 73% 76%,rgba(203,168,104,0.25),rgba(203,168,104,0) 72%),
      radial-gradient(80% 56% at 13% 66%,rgba(40,91,129,0.188),rgba(40,91,129,0) 72%);
  }
  html:not(._):not(.__) body.home.home main#main:not(#vx-none) :is(li#vr-expertise,details.hs-path,details.hr-tfold,
    button[id^='hr-tab-']){background:rgba(255,253,247,0.68) !important;}
}


/* ===================== symptom/sy03 ===================== */
html:not(._) #two-specialties ul.hs-ihave-list li a{
  margin:0 -4px;padding:16px 8px;border-radius:12px;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
html:not(._) #two-specialties ul.hs-ihave-list .hs-go{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
html:not(._) #two-specialties ul.hs-ihave-list .hs-q,
html:not(._) #two-specialties ul.hs-ihave-list .hs-d{
  transition:color .22s ease;
}
@media (hover:hover){
html:not(._) #two-specialties ul.hs-ihave-list li a:hover{background:#285581 !important;}
}
html:not(._) #two-specialties ul.hs-ihave-list li a:focus-visible{background:#285581 !important;}
html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-q,
html:not(._) #two-specialties ul.hs-ihave-list li a:active .hs-q,
html:not(._) #two-specialties ul.hs-ihave-list li a:focus-visible .hs-q{color:#ffffff !important;}
html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-d,
html:not(._) #two-specialties ul.hs-ihave-list li a:active .hs-d,
html:not(._) #two-specialties ul.hs-ihave-list li a:focus-visible .hs-d{color:#d7e3f0 !important;}
html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-go,
html:not(._) #two-specialties ul.hs-ihave-list li a:active .hs-go,
html:not(._) #two-specialties ul.hs-ihave-list li a:focus-visible .hs-go{
  color:#ffffff !important;border-color:rgba(255,255,255,.75) !important;
}
html:not(._) #two-specialties ul.hs-ihave-list li a:focus-visible{
  outline:2px solid #15314f;outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  html:not(._) #two-specialties ul.hs-ihave-list li a,
  html:not(._) #two-specialties ul.hs-ihave-list .hs-go,
  html:not(._) #two-specialties ul.hs-ihave-list .hs-q,
  html:not(._) #two-specialties ul.hs-ihave-list .hs-d{transition:none}
}
/* ---- touch: undo :hover, keep :active ---------------------------------
   Added after the independent review found white-on-ivory at 1.04:1 on
   touch in sy03. See tools/symptom/gen.py:touch_reset(). */
@media (hover:none){
  html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-q{color:#183d69 !important;}
  html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-d{color:#40597a !important;}
  html:not(._) #two-specialties ul.hs-ihave-list li a:hover .hs-go{
    color:#183d69 !important;background:transparent !important;
    border-color:rgba(24,61,105,.45) !important;
  }
}