/* Homepage refinements, 25 September 2026.
   Loaded last on the three homepages only. Every rule is gated by an
   html class hr-<id>, so each change can be accepted or dropped alone.
   Type sizes reuse the homepage scale (13 15 18 22 25 34.56 40 72); no new sizes. */

/* ---------------------------------------------------------------------
   hv  Hover to expand (desktop pointers only; JS adds the behaviour).
   A smooth height transition where the browser supports it.
   --------------------------------------------------------------------- */
@supports (interpolate-size:allow-keywords){
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    html.hr-hv{interpolate-size:allow-keywords}
    html.hr-hv .hs details.hs-fold::details-content,
    html.hr-hv .hs details.hs-ihave::details-content,
    html.hr-hv .hs details.hs-path::details-content,
    html.hr-hv .hs details.hr-tfold::details-content{
      block-size:0;overflow:hidden;
      transition:block-size .34s cubic-bezier(.22,1,.36,1),content-visibility .34s allow-discrete;
    }
    html.hr-hv .hs details[open].hs-fold::details-content,
    html.hr-hv .hs details[open].hs-ihave::details-content,
    html.hr-hv .hs details[open].hs-path::details-content,
    html.hr-hv .hs details[open].hr-tfold::details-content{block-size:auto}
  }
}
html.hr-hv .hs details.hr-hover-open>summary .hs-plus{background:rgba(24,61,105,.07)}

/* ---------------------------------------------------------------------
   nb  The numbers band, centred and symmetrical.
   The peer panel is split into two equal halves around a centre divider,
   both halves centred; the 20-years heading and the six figures below are
   centred on the same axis. 170+ is gold so the peer figure reads
   differently from the operation counts.
   --------------------------------------------------------------------- */
html.hr-nb #trust.hs-num{background:#15314f!important}
html.hr-nb #trust.hs-num{padding-top:14px!important;padding-bottom:14px!important}
html.hr-nb #trust .band-inner{padding-top:16px;padding-bottom:16px}
html.hr-nb .hs-num-top{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:0!important;align-items:center!important;text-align:center;
  padding:28px 0!important;border:1px solid rgba(255,255,255,.16)!important;
  border-radius:20px;background:rgba(255,255,255,.035);
}
html.hr-nb .hs-num-trust{display:contents}
html.hr-nb .hr-peer,html.hr-nb .hr-blurb{min-width:0;padding:0 44px}
html.hr-nb .hr-peer{grid-column:1}
html.hr-nb .hr-peer h2{margin:0 auto 6px!important;max-width:none!important;font-size:22px!important;line-height:1.3!important;color:#fff!important;font-weight:600;text-wrap:balance}
html.hr-nb .hs-num .hs-big{font-size:72px;color:#e9d49b;margin:4px 0 0;letter-spacing:-.025em;display:flex;justify-content:center;align-items:baseline}
html.hr-nb .hs-num .hs-big .peer-plus{color:#e9d49b;opacity:.85}
html.hr-nb .hr-blurb{grid-column:2;border-left:1px solid rgba(255,255,255,.16);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
html.hr-nb .hr-blurb{text-align:left}
html.hr-nb .hr-blurb p{max-width:none!important;text-wrap:pretty}
html.hr-nb .hr-blurb .peer-statement{font-size:22px;line-height:1.45;font-weight:600;margin:0 0 12px}
html.hr-nb .hr-blurb p:last-child{margin:0}
html.hr-nb #trust.hs-num #experience{margin:32px 0 0!important;text-align:center}
html.hr-nb #trust.hs-num #experience h2{font-size:22px!important;line-height:1.3!important;margin:0 auto!important;max-width:none!important;color:#fff!important;font-weight:600}
html.hr-nb .hs-num-grid{margin-top:20px!important}
/* eg (option): the 20-years heading in the same gold as 170+ */
html.hr-eg #trust.hs-num #experience h2{color:#e9d49b!important}
html.hr-nb .hs-num-grid .hs-stat,html.hr-nb .hs-num-grid .hs-stat:first-child{padding:0 12px!important;text-align:center}
html.hr-nb .hs-stat b{font-size:40px}
@media (max-width:1100px){
  html.hr-nb .hs-num-top{grid-template-columns:1fr!important;padding:28px 0!important}
  html.hr-nb .hr-blurb{grid-column:1;border-left:0;margin:20px 26px 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.16)}
  html.hr-nb .hr-peer{padding:0 26px}
}
@media (max-width:760px){
  html.hr-nb .hs-num-top{padding:24px 0!important}
  html.hr-nb .hr-peer{padding:0 20px}
  html.hr-nb .hr-blurb{margin:18px 20px 0}
  html.hr-nb .hs-num .hs-big{font-size:40px}
  html.hr-nb .hr-blurb .peer-statement{font-size:18px}
  html.hr-nb #trust.hs-num #experience{margin-top:34px!important}
  html.hr-nb .hs-stat b{font-size:25px}
  html.hr-nb .hs-num-grid .hs-stat,html.hr-nb .hs-num-grid .hs-stat:first-child{padding:0 8px!important}
}

/* ---------------------------------------------------------------------
   vp  Before your appointment: heading and link on one row, the three
   preparations as three even columns underneath.
   --------------------------------------------------------------------- */
html.hr-vp .hs-prep{
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"h btn" "list list";
  gap:22px 32px!important;padding:32px 40px 34px!important;align-items:center!important;
}
html.hr-vp .hs-prep h3{grid-area:h;margin:0}
html.hr-vp .hs-prep>.hs-btn{grid-area:btn;justify-self:end;width:auto!important}
html.hr-vp .hs-prep ul{
  grid-area:list;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;
  padding-top:22px!important;border-top:1px solid rgba(24,61,105,.16);
}
html.hr-vp .hs-prep li{margin:0!important;padding:0 28px 0 0!important;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start}
html.hr-vp .hs-prep li+li{padding-left:28px!important;border-left:1px solid rgba(24,61,105,.16)}
html.hr-vp .hs-prep li::before{
  position:static!important;width:30px!important;height:30px!important;border-radius:50%;
  background:#183d69 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat!important;
  border:0;box-sizing:border-box;margin-top:-2px;
}
@media (max-width:900px){
  html.hr-vp .hs-prep{grid-template-columns:1fr!important;grid-template-areas:"h" "list" "btn";padding:26px 22px!important}
  html.hr-vp .hs-prep ul{grid-template-columns:1fr;gap:16px!important;padding-top:18px!important}
  html.hr-vp .hs-prep li,html.hr-vp .hs-prep li+li{padding:0!important;border-left:0}
  html.hr-vp .hs-prep>.hs-btn{justify-self:stretch;width:100%!important}
}

/* ---------------------------------------------------------------------
   gb  The gold appointment band, tidied
   --------------------------------------------------------------------- */
html.hr-gb .hs-band-grid{grid-template-rows:auto auto;row-gap:30px}
html.hr-gb .hs-band-grid>h2.hr-band-h{
  grid-column:1/-1;padding:0!important;margin:0!important;
  font-size:34.56px!important;line-height:1.2!important;color:#183d69;letter-spacing:-.01em;max-width:none!important;width:auto;
}
html.hr-gb .hs-band address{margin:10px 0 24px}
html.hr-gb .hr-call svg{width:18px;height:18px;flex:none}
html.hr-gb .hr-call{gap:10px}
@media (max-width:760px){html.hr-gb .hs-actions .hr-call{flex-direction:row-reverse}}
@media (max-width:760px){html.hr-gb .hs-band-grid>h2.hr-band-h{font-size:25px!important}}

/* gc  the gold used on every other page (#e4d4b7), so the homepage matches */
html.hr-gc .hs-band{background:#e4d4b7!important}

/* ---------------------------------------------------------------------
   t1  A tailored approach, collapsible
   --------------------------------------------------------------------- */
.hr-tailored .band-inner{display:block}
.hr-tailored-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 56px;align-items:start}
.hr-tailored h2{margin:0;text-wrap:balance}
.hr-tailored .hr-lede{margin:0;color:#263647}
.hr-tailored .hr-lede+.hr-lede{margin-top:14px}
.hr-tfold{margin-top:28px;background:#fbfbf8;border:1px solid rgba(24,61,105,.16);border-radius:20px;overflow:hidden}
.hr-tfold>summary{list-style:none;cursor:pointer;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px}
.hr-tfold>summary::-webkit-details-marker{display:none}
.hr-tfold>summary h3{flex:1;min-width:0;margin:0;font-size:22px!important;line-height:1.3;color:#183d69}
.hr-tfold>summary:hover .hs-plus{background:rgba(24,61,105,.07)}
.hr-tfold[open] .hs-plus::after{transform:translate(-50%,-50%) rotate(0)}
.hr-tfold>summary:focus-visible{outline:3px solid #2f6fb0;outline-offset:-3px;border-radius:20px}
.hr-tbody{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;padding:6px 28px 30px;border-top:1px solid rgba(24,61,105,.12)}
.hr-tabs{display:grid;gap:6px;align-content:start;padding-top:22px}
.hr-tab{
  display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:12px 16px;
  border:1px solid transparent;border-radius:12px;background:transparent;
  font:600 18px/1.35 Manrope,system-ui,sans-serif;color:#40597a;text-align:left;cursor:pointer;
}
.hr-tab:hover{background:rgba(255,253,248,.92);color:#183d69}
.hr-tab:focus-visible{outline:3px solid #2f6fb0;outline-offset:2px}
.hr-tab[aria-selected="true"]{background:rgba(255,253,248,.92);border-color:rgba(24,61,105,.16);color:#183d69}
.hr-tab img{width:30px;height:30px;flex:none}
.hr-panel{padding-top:22px}
.hr-panel[hidden]{display:none}
.hr-panel-head{margin:0 0 8px!important;font-size:22px!important;line-height:1.3!important;color:#183d69}
.hr-panel>p{margin:0 0 18px;color:#263647;max-width:none}
.hr-panel ul{list-style:none;margin:0 0 22px;padding:0}
.hr-panel li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid rgba(24,61,105,.14)}
.hr-panel li:last-child{border-bottom:1px solid rgba(24,61,105,.14)}
.hr-panel li::before{
  content:"";width:30px;height:30px;border-radius:50%;box-sizing:border-box;
  background:#183d69 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;
}
.hr-panel li b{display:block;color:#183d69}
.hr-panel li span{color:#263647}
@media (max-width:900px){
  .hr-tailored-top{grid-template-columns:1fr}
  .hr-tbody{grid-template-columns:1fr;gap:6px;padding:4px 18px 24px}
  .hr-tabs{grid-template-columns:1fr 1fr;padding-top:16px}
  .hr-tab{font-size:15px;min-height:48px;padding:10px 12px}
  .hr-tfold>summary{padding:20px 20px}
}

/* ---------------------------------------------------------------------
   r1  Hairlines only where two bands of the same background meet,
   never at the top, and at the inner column width, not full bleed.
   --------------------------------------------------------------------- */
html.hr-r1 #tailored,html.hr-r1 #journey,html.hr-r1 #watch{position:relative}
html.hr-r1 #watch{border-top:0!important}
/* no line where the hero photo meets Why choose, nor under the last Why-choose point before the navy band */
html.hr-r1 #why-choose{border-top:0!important}
html.hr-r1 #why-choose .hs-why-list{border-top:0!important}
html.hr-r1 #why-choose .hs-why-list>li.hs-item:last-child{border-bottom:0!important}
html.hr-r1 #tailored::before,html.hr-r1 #journey::before,html.hr-r1 #watch::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1200px,calc(100% - 40px));height:1px;background:rgba(24,61,105,.16);
}

/* ---------------------------------------------------------------------
   m3  The qualifications strip moves slowly, captions travelling with
   their logos. Desktop only (JS builds the track at 1101px and wider).
   The panel keeps its rounded corners, glass and 16px clearance.
   --------------------------------------------------------------------- */
html.hr-m3 body.home #hero-qualifications.hr-rail{display:block!important;overflow:hidden;padding:16px 0!important}
html.hr-m3 #hero-qualifications.hr-rail .hr-view{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
}
html.hr-m3 #hero-qualifications.hr-rail .hr-track{
  display:flex;width:max-content;will-change:transform;
  animation:hr-rail var(--hr-rail-dur,70s) linear infinite;
}
html.hr-m3 #hero-qualifications.hr-rail:hover .hr-track,
html.hr-m3 #hero-qualifications.hr-rail:focus-within .hr-track,
html.hr-m3 #hero-qualifications.hr-rail.hr-paused .hr-track{animation-play-state:paused}
html.hr-m3 body.home #hero-qualifications.hr-rail .hr-track>div{
  flex:0 0 auto;width:auto;box-sizing:border-box;padding:4px 20px!important;
  display:grid!important;grid-template-columns:auto max-content;column-gap:20px;align-items:center;
  border-left:1px solid rgba(24,61,105,.18)!important;border-radius:0!important;min-height:0;
}
/* captions widened so "University of New South Wales" and "College of Ophthalmologists" each sit on one line */
html.hr-m3 body.home #hero-qualifications.hr-rail .stat-text{width:max-content;max-width:318px}
html.hr-m3 body.home #hero-qualifications.hr-rail .stat-text b{white-space:nowrap}
/* each two-line caption sized to its first line (measured at 13px Manrope, +3px slack),
   so the space after the text matches the space between logo and text */
html.hr-m3 body.home #hero-qualifications.hr-rail .has-mark:has(img[src*="university-of-london"]) .stat-text{max-width:221px}
html.hr-m3 body.home #hero-qualifications.hr-rail .has-mark:has(img[src*="crest"]) .stat-text{max-width:282px}
html.hr-m3 body.home #hero-qualifications.hr-rail .line-start{display:block}
html.hr-m3 body.home #hero-qualifications.hr-rail .hr-track>div>img,
html.hr-m3 body.home #hero-qualifications.hr-rail .hr-track>div>.vei-logo-link{justify-self:center}
@keyframes hr-rail{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hr-rail-pause{
  position:absolute;right:14px;top:10px;z-index:3;border:1px solid rgba(24,61,105,.3);background:#fbfbf8;color:#183d69;
  border-radius:999px;font:600 13px/1 Manrope,system-ui,sans-serif;padding:8px 12px;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;
}
.hr-rail-pause:focus-visible{clip-path:none;width:auto;height:auto;outline:3px solid #2f6fb0;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html.hr-m3 #hero-qualifications.hr-rail .hr-track{animation:none}}

/* ---------------------------------------------------------------------
   gp  A glass panel around the hero heading (desktop). Simon's choice:
   light glass for the heading panel, medium glass for the qualifications strip.
   --------------------------------------------------------------------- */
@media (min-width:1101px){
  html.hr-gp{--hr-glass:.30;--hr-blur:10px;--hr-strip:.50;--hr-strip-blur:14px}
  html.hr-gp body.home .hero-copy{
    left:auto!important;right:4%!important;top:118px!important;width:auto!important;max-width:720px;
    padding:30px 36px 32px;border-radius:18px;box-sizing:border-box;
    background:rgba(248,250,251,var(--hr-glass));
    -webkit-backdrop-filter:blur(var(--hr-blur)) saturate(1.2);backdrop-filter:blur(var(--hr-blur)) saturate(1.2);
    border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 44px rgba(18,48,79,.10);
  }
  html.hr-gp body.home .hero-copy .kicker{margin-top:0}
  html.hr-gp body.home .hero-copy h1{margin-bottom:14px}
  html.hr-gp body.home .hero-intro{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;margin:0 0 24px!important}
  html.hr-gp body.home .hero-actions,html.hr-gp body.home .care-routes{display:inline-flex!important;vertical-align:middle;margin:0!important;gap:10px}
  html.hr-gp body.home .care-routes{margin-left:6px!important}
  html.hr-gp body.home .hero-actions .hero-book{display:none!important}
  html.hr-gp body.home .care-routes a{background:rgba(255,255,255,.35)!important;border:1px solid rgba(24,61,105,.35)!important}
  html.hr-gp body.home #hero-qualifications{
    background:rgba(248,250,251,var(--hr-strip))!important;
    -webkit-backdrop-filter:blur(var(--hr-strip-blur)) saturate(1.2)!important;backdrop-filter:blur(var(--hr-strip-blur)) saturate(1.2)!important;
    border:1px solid rgba(255,255,255,.55);
  }
}

/* ---------------------------------------------------------------------
   ws  (option) Why choose: the photo card and introduction stay in view
   while the six points scroll past, so the left column is never empty.
   (Production already marks the column sticky, but the grid stretches it to
   the full height, so it never sticks; align-self:start makes it work.)
   Desktop only, and only on screens tall enough to hold the column.
   --------------------------------------------------------------------- */
@media (min-width:1101px) and (min-height:720px){
  html.hr-ws #why-choose .hs-why{align-items:start}
  html.hr-ws #why-choose .hs-why-intro{position:sticky;top:112px;align-self:start}
}

/* ---------------------------------------------------------------------
   wt  (option) Why choose: introduction across the top (photo card left,
   text right), the six points in two columns underneath.
   --------------------------------------------------------------------- */
@media (min-width:1101px){
  html.hr-wt #why-choose .hs-why{display:block!important}
  html.hr-wt #why-choose .hs-why-intro{
    position:static!important;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;
    column-gap:56px;align-items:start;margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid rgba(24,61,105,.16);
  }
  html.hr-wt #why-choose .hs-why-intro>h2{grid-column:1/-1}
  html.hr-wt #why-choose .hs-why-intro>.mm-card{grid-column:1;grid-row:2/4}
  html.hr-wt #why-choose .hs-why-intro>p{grid-column:2;margin-top:0}
  html.hr-wt #why-choose .hs-why-list{columns:2;column-gap:56px;border-top:0!important}
  html.hr-wt #why-choose .hs-why-list>li{break-inside:avoid;margin-top:0!important}
}

/* hp  (option) hero glass panel raised so its top is level with the top of
   Dr Chen's head (56px into the photo at 1400px and wider, where the photo
   crop is stable). Below 1400px the crop changes, so the panel stays put. */
@media (min-width:1400px){html.hr-gp.hr-hp body.home .hero-copy{top:56px!important}}