/* ==========================================================================
   BRIGHTER HEALTHCARE SOLUTIONS — brand layer
   --------------------------------------------------------------------------
   1. points the template's colour tokens at the Brighter Healthcare palette
   2. self-hosts the two fonts the template already uses
   3. styles only the components this site adds: utility bar, forms, jobs,
      staff portal, login

   Every layout, alignment and animation belongs to main.css. Nothing here
   changes how the template behaves — only how it is coloured.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink:       #0B2239;
  --navy:      #123A5E;
  --navy-lt:   #1B5183;
  --slate:     #4A5A6A;
  --muted:     #6B7A88;

  --paper:     #FFFFFF;
  --wash:      #F4F8FB;
  --sky:       #E9F1F7;
  --sand:      #FAF6EF;
  --mist:      #FBF9F5;
  --rule:      #DCE6EE;
  --border:    #DCE6EE;

  --clay:      #B4652E;
  --clay-dk:   #A2531F;
  --sage:      #5C8374;

  /* The template reads these names throughout. */
  --forest:    var(--navy);
  --forest-lt: var(--navy-lt);
  --leaf:      var(--sage);
  --moss:      var(--sky);
  --gold:      var(--clay-dk);
  --gold-dk:   #8F4819;
  --earth:     var(--clay-dk);
  --green:     var(--sage);

  --r-sm:      6px;
  --r-md:      12px;
  --r-lg:      20px;
  --sh-sm:     0 1px 2px rgba(11,34,57,.06), 0 2px 10px rgba(11,34,57,.05);
  --sh-md:     0 10px 34px rgba(11,34,57,.10);
  --tr:        .28s cubic-bezier(.4,0,.2,1);

  --display:   'Montserrat', system-ui, sans-serif;
  --body:      'Inter', system-ui, sans-serif;

  --topbar-h:  36px;
}

body { padding-top: 67px; }
@media (max-width: 900px) { body { padding-top: 61px; } }

.btn-gold, .btn-gold:hover { color: #fff; }
.cta-banner { background: linear-gradient(135deg, var(--navy) 0%, #1B5183 100%); }
.cta-banner h2 { color: #fff; }

/* ── Utility bar ─────────────────────────────────────────────────────────── */
.bhc-topbar { height: var(--topbar-h); background: var(--navy); color: rgba(255,255,255,.82); font-size: .78rem; display: flex; align-items: center; }
.bhc-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; }
.bhc-topbar a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.bhc-topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bhc-topbar .tb-left, .bhc-topbar .tb-right { display: flex; align-items: center; gap: 16px; }
.bhc-topbar .tb-sep { width: 1px; height: 13px; background: rgba(255,255,255,.24); }
.bhc-topbar .tb-cqc { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); }
.bhc-topbar .tb-cqc i { color: #8FC3E8; font-size: .72rem; }
@media (max-width: 900px) { .bhc-topbar { display: none; } }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.form-panel-head { background: var(--sand); border-bottom: 1px solid var(--border); padding: 20px 26px; }
.form-panel-head h2 { font-size: 1.3rem; margin-bottom: 4px; }
.form-panel-head p { font-size: .87rem; margin: 0; }
.form-panel-body { padding: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: .76rem; color: var(--muted); font-weight: 400; margin-top: 4px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date],
.field input[type=password], .field input[type=file], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: #fff; font-family: var(--body); font-size: .92rem; color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A88' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,58,94,.10); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .83rem; color: var(--slate); line-height: 1.55; }
.check-line input { margin-top: 3px; flex: none; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.form-note { font-size: .77rem; color: var(--muted); }
.booking-steps { display: flex; gap: 30px; margin-bottom: 26px; flex-wrap: wrap; }
.booking-step { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); }
.booking-step b { width: 24px; height: 24px; border-radius: 50%; background: var(--sky); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.booking-step.on { color: var(--ink); font-weight: 600; }
.booking-step.on b { background: var(--navy); color: #fff; }

/* ── Vacancies ───────────────────────────────────────────────────────────── */
.job-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 24px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; transition: var(--tr); }
.job-row:hover { border-color: #C6D6E4; box-shadow: var(--sh-sm); transform: translateY(-2px); }
.job-row h3 { font-size: 1.08rem; margin-bottom: 6px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--muted); }
.job-meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-meta i { color: var(--navy); opacity: .65; font-size: .75rem; }
.job-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--clay-dk); background: var(--sand); border-radius: 100px; padding: 4px 10px; margin-bottom: 9px; }
@media (max-width: 700px) { .job-row { grid-template-columns: 1fr; } }

/* ── Sidebar cards ───────────────────────────────────────────────────────── */
.aside-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; }
.aside-card h4 { font-size: .95rem; margin-bottom: 8px; }
.aside-card p { font-size: .87rem; margin-bottom: 12px; }
.aside-card .btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.aside-list { display: grid; gap: 2px; }
.aside-list a { font-size: .87rem; color: var(--ink); display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.aside-list a:last-child { border-bottom: 0; }
.aside-list a:hover { color: var(--clay-dk); }

/* ── Staff portal ────────────────────────────────────────────────────────── */
.staff-shell { background: var(--wash); min-height: 62vh; padding: 40px 0 70px; }
.staff-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.staff-head h1 { font-size: 1.9rem; margin-bottom: 6px; }
.staff-head p { font-size: .9rem; margin: 0; }
.staff-progress { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; min-width: 240px; }
.staff-progress .bar { height: 7px; border-radius: 100px; background: var(--sky); overflow: hidden; margin-top: 9px; }
.staff-progress .bar span { display: block; height: 100%; background: var(--sage); border-radius: 100px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.res-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.res-card .res-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--sky); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.res-card h3 { font-size: 1rem; font-family: var(--body); font-weight: 650; }
.res-card p { font-size: .84rem; flex: 1; }
.res-card .meta { font-size: .74rem; color: var(--muted); display: flex; gap: 12px; }
.res-card .req { color: var(--clay-dk); font-weight: 600; }
.staff-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.staff-tabs a { padding: 8px 15px; border-radius: 100px; background: #fff; border: 1px solid var(--border); font-size: .83rem; color: var(--ink); }
.staff-tabs a.active, .staff-tabs a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.video-frame { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: #0B2239; margin-bottom: 22px; }
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-art { background: var(--navy); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; }
.login-art h2 { color: #fff; font-size: 1.9rem; max-width: 16ch; }
.login-art p { color: rgba(255,255,255,.62); font-size: .9rem; max-width: 34ch; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--wash); }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px; box-shadow: var(--sh-md); }
.login-card h1 { font-size: 1.45rem; margin-bottom: 6px; }
.login-card .sub { font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
@media (max-width: 860px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } }

/* ── Focus ───────────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* ── Brand adjustments to template components ────────────────────────────── */
/* The scrolling credential band carries the primary colour, white on navy. */
.trust-band { background: var(--forest); }
.trust-item { color: #fff; }
.trust-item i { opacity: .85; color: #fff; }
.trust-dot { background: #fff; opacity: .35; }

/* The area arrows stay visible, so the row reads as something you can open. */
.sdg-go { opacity: .38; transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease); }
.sdg-card:hover .sdg-go, .sdg-card:focus-visible .sdg-go { opacity: 1; transform: translateX(4px); }

/* Square mark, sized to sit comfortably in the navigation. */
.nav-logo img { height: 44px; width: auto; max-width: 180px; }

/* Rings need to read against a white page — a tint, not a white line. */
.story-media .ring { border-color: rgba(18, 58, 94, .16); }

/* Banner copy sits over photography; darken the left where the words are. */
.page-banner-overlay {
  background: linear-gradient(90deg, rgba(11,34,57,.90) 0%, rgba(11,34,57,.62) 42%, rgba(11,34,57,.28) 100%);
}

/* ── Button hierarchy ────────────────────────────────────────────────────── */
/* Navy is the action colour. Clay is kept for small accents — the eyebrow
   rules, icons, quote marks — so the palette reads calm rather than warm. */
.btn-gold {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 34, 57, .20);
}
.btn-gold:hover { background: var(--sand); color: var(--navy); }

/* ── Animation weight ────────────────────────────────────────────────────── */
/* The template default is a brisk 1s. Slowing it and lengthening the travel
   gives sections a heavier, more deliberate arrival as you scroll. */
.js-enabled .reveal,
.js-enabled .anim-left,
.js-enabled .anim-right,
.js-enabled .anim-up,
.js-enabled .anim-down,
.js-enabled .anim-zoom,
.js-enabled .anim-pop {
  transition-duration: 1.35s;
  transition-timing-function: cubic-bezier(.16, .84, .24, 1);
}
.js-enabled .anim-left  { transform: translateX(-170px); }
.js-enabled .anim-right { transform: translateX(170px); }
.js-enabled .anim-up    { transform: translateY(110px) scale(.96); }
.js-enabled .anim-zoom  { transform: scale(.72); }

/* Stagger the children of a grid so they arrive one after another. */
.stagger > *              { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .12s; }
.stagger > *:nth-child(3) { transition-delay: .24s; }
.stagger > *:nth-child(4) { transition-delay: .36s; }
.stagger > *:nth-child(5) { transition-delay: .48s; }
.stagger > *:nth-child(6) { transition-delay: .60s; }
.stagger > *:nth-child(7) { transition-delay: .72s; }
.stagger > *:nth-child(8) { transition-delay: .84s; }

/* ── Values band: still image, dark wash, cards floating over it ─────────── */
.values-band {
  background: #0B2239 url(../assets/images/care-visit.jpg) center/cover fixed no-repeat;
  position: relative;
  color: #fff;
}
.values-band::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 26, 44, .90), rgba(8, 26, 44, .80));
}
.values-band > .container { position: relative; z-index: 1; }
.values-band .tag { color: #9CC3E4; }
.values-band .section-header h2,
.values-band .section-header p { color: #fff; }
.values-band .value-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.values-band .value-card h3 { color: #fff; }
.values-band .value-card p  { color: rgba(255, 255, 255, .80); }
.values-band .value-card i  { color: #9CC3E4; }
.values-band .value-card:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  transform: translateY(-6px);
}

/* The 24/7 badge sits on photography — all of it white, no navy fill. */
.about-badge, .about-badge strong, .about-badge span { color: #fff !important; }
.about-badge { background: rgba(11, 34, 57, .82); }

/* Steps: centred, equal height, numbers above the text. */
.steps .step { text-align: center; align-items: center; }
.steps .step .step-num { margin: 0 auto 14px; }
.steps .step h3, .steps .step p { text-align: center; }

/* ── Vacancies: two cards, centred on the page, never left-heavy ─────────── */
.vacancy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.vacancy-grid > * { height: 100%; }
@media (max-width: 760px) { .vacancy-grid { grid-template-columns: 1fr; } }

/* ── Counters: breathing room above and below ─────────────────────────────── */
.counter-sec { padding: 76px 0 84px; }
.counter-grid { max-width: 1180px; margin: 0 auto; }
@media (max-width: 980px) { .counter-sec { padding: 52px 0 58px; } }

/* ── How it works: three equal cards, centred ─────────────────────────────── */
.approach .steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1060px;
  margin: 0 auto;
  gap: 24px;
}
@media (max-width: 900px) { .approach .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .approach .steps { grid-template-columns: 1fr; } }
.approach .tag { color: #9CC3E4; }
.approach .section-header p { color: rgba(255, 255, 255, .82); }
.approach .step h3 { color: #fff; }
.approach .step p { color: rgba(255, 255, 255, .78); }
.approach .step-num { color: rgba(156, 195, 228, .55); }

/* ── Text on the dark values band ─────────────────────────────────────────── */
.values-band .split h2 { color: #fff; }
.values-band .split p { color: rgba(255, 255, 255, .84); }
.values-band .tag { color: #9CC3E4; }
.values-band .check-list li { color: rgba(255, 255, 255, .88); }
.values-band .check-list li i { color: #9CC3E4; }
.values-band .value-card h3 { color: #fff; }

/* ── Value cards: icon in a tinted tile, and a hover lift ─────────────────── */
.value-card { transition: transform .45s cubic-bezier(.19,.85,.25,1), box-shadow .45s, background .45s, border-color .45s; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(11, 34, 57, .13); }
.icon-badge {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(18, 58, 94, .08);
  color: var(--navy);
  font-size: 1.15rem;
  margin-bottom: 16px;
  transition: background .45s, color .45s, transform .45s;
}
.value-card:hover .icon-badge { background: var(--navy); color: #fff; transform: scale(1.05); }
.values-band .icon-badge { background: rgba(255,255,255,.12); color: #fff; }
.values-band .value-card:hover .icon-badge { background: #fff; color: var(--navy); }

/* ── News cards: badge on the picture, and a read link ───────────────────── */
.blog-thumb { position: relative; }
.blog-thumb .blog-cat {
  position: absolute; top: 14px; left: 14px;
  background: rgba(11, 34, 57, .88); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.btn-read {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-weight: 700; font-size: .82rem;
  color: var(--navy); text-decoration: none;
}
.btn-read i { transition: transform .35s; }
.blog-card:hover .btn-read i { transform: translateX(5px); }

/* ── Footer: everything readable on navy ──────────────────────────────────── */
.footer, .footer a, .footer p, .footer li, .footer span, .footer h3, .footer h4 { color: rgba(255,255,255,.80); }
.footer h3, .footer h4 { color: #fff; }
.footer-bottom, .footer-legal, .footer-copy { color: rgba(255,255,255,.62); }
.footer-bottom a, .footer-legal a { color: rgba(255,255,255,.80); }

/* Footer measured too faint on a real screen — lifted to a readable level. */
.footer-brand p   { color: rgba(255, 255, 255, .74); }
.footer-col h5    { color: rgba(255, 255, 255, .48); }
.footer-links a   { color: rgba(255, 255, 255, .78); }
.footer-links a i { opacity: .55; }
.footer-bottom, .footer-bottom p { color: rgba(255, 255, 255, .62); }
.footer-bottom a  { color: rgba(255, 255, 255, .86); }

/* ── Sidebar cards (FAQ page) ─────────────────────────────────────────────── */
.svc-aside { display: flex; flex-direction: column; gap: 18px; }
.aside-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.aside-card h4 { margin-bottom: 10px; }
.aside-card p  { color: var(--slate); font-size: .92rem; }
.aside-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 18px;
}
.btn-ghost-white {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
}
.btn-ghost-white:hover { background: #fff; color: var(--navy); border-color: #fff; }
.aside-list { display: grid; gap: 2px; }
.aside-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; font-size: .92rem; color: var(--navy);
  border-bottom: 1px solid var(--border);
}
.aside-list a:last-child { border-bottom: 0; }
.aside-list a i { font-size: .7rem; color: var(--gold); transition: transform .3s; }
.aside-list a:hover i { transform: translateX(4px); }

/* ── Current page in the navigation ──────────────────────────────────────── */
.nav-menu a { position: relative; }
.nav-menu a.active { color: var(--navy); font-weight: 700; }
.nav-menu a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -9px;
  height: 3px; border-radius: 3px; background: var(--navy);
}
.mobile-nav-links a.active { color: var(--navy); font-weight: 700; }

/* ── Long-form pages (privacy, complaints, accessibility) ────────────────── */
.svc-body { max-width: 76ch; font-size: 1.02rem; line-height: 1.75; color: var(--slate); }
.svc-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--navy);
  margin: 40px 0 12px;
  line-height: 1.25;
}
.svc-body h3 {
  font-size: 1.08rem;
  color: var(--navy);
  margin: 26px 0 8px;
}
.svc-body h2:first-child, .svc-body h3:first-child { margin-top: 0; }
.svc-body p { margin: 0 0 16px; }
.svc-body ul, .svc-body ol { margin: 0 0 18px; padding-left: 22px; }
.svc-body li { margin-bottom: 9px; }
.svc-body ul li::marker { color: var(--gold); }
.svc-body strong { color: var(--navy); }
.svc-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.svc-body hr { border: 0; border-top: 1px solid var(--border); margin: 34px 0; }
.svc-body .note-box {
  background: var(--sand); border-left: 3px solid var(--gold);
  padding: 18px 20px; border-radius: 8px; margin: 22px 0;
}

/* ── Nothing may push the page sideways ───────────────────────────────────
   A single over-wide element — a long unbroken word, a photograph, a
   transformed slider — is enough to give a phone a horizontal scrollbar and
   make the whole page feel broken. `clip` does this without turning the body
   into a scroll container, so the sticky header keeps working; the fallback
   covers older Safari. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* ── Booking window ──────────────────────────────────────────────────────── */
.bk-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8, 22, 38, .62);
  display: none; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(3px);
}
.bk-overlay.open { display: flex; }
.bk-panel {
  background: #fff; width: min(620px, 100%); max-height: 92vh; overflow-y: auto;
  border-radius: 18px; padding: 34px 34px 28px; position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: bkIn .35s cubic-bezier(.19,.85,.25,1);
}
@keyframes bkIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.bk-close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: #F1F5F8; color: var(--navy);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.bk-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.bk-head h3 { margin: 6px 0 8px; font-size: 1.5rem; color: var(--navy); }
.bk-price { font-size: 1.6rem; font-weight: 800; color: var(--navy); }
.bk-price small { font-size: .72rem; font-weight: 500; color: var(--slate); }
.bk-note { font-size: .82rem; color: var(--slate); margin: 10px 0 18px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.bk-panel label { display: block; font-size: .78rem; font-weight: 700; color: var(--navy); }
.bk-panel input[type=text], .bk-panel input[type=tel], .bk-panel input[type=email],
.bk-panel input[type=date], .bk-panel textarea {
  width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 9px; font: inherit; font-size: .92rem; color: var(--ink); background: #fff;
}
.bk-panel select {
  width: 100%; margin-top: 6px; padding: 11px 38px 11px 12px; border: 1px solid var(--border);
  border-radius: 9px; font: inherit; font-size: .92rem; color: var(--ink); background: #fff;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23123A5E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.bk-panel select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.bk-panel select option:disabled { color: #B6BEC6; }
.bk-panel .bk-hint { display: block; margin-top: 5px; font-size: .72rem; font-weight: 500; color: var(--slate); }
.bk-field { margin-bottom: 14px; }
.bk-label { display: block; font-size: .78rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-slot {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 8px 13px; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--navy); cursor: pointer; transition: all .2s;
}
.bk-slot:hover { border-color: var(--navy); }
.bk-slot.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.bk-slot.is-taken { background: #F4F5F6; color: #B6BEC6; text-decoration: line-through; cursor: not-allowed; }
.bk-loading { font-size: .82rem; color: var(--slate); }
.bk-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; font-weight: 500 !important; font-size: .82rem !important; color: var(--slate) !important; }
.bk-consent input { margin-top: 3px; }
.bk-submit { width: 100%; margin-top: 12px; justify-content: center; }
.bk-fine { font-size: .74rem; color: var(--slate); text-align: center; margin: 10px 0 0; }
.bk-trap { position: absolute; left: -9999px; height: 1px; width: 1px; opacity: 0; }
@media (max-width: 560px) { .bk-panel { padding: 26px 20px; } .bk-row { grid-template-columns: 1fr; } }

/* ── Booking: loading state, hints and inline errors ─────────────────────── */
.bk-submit { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bk-spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: bkSpin .7s linear infinite;
}
.bk-submit.is-loading .bk-spinner { display: inline-block; }
.bk-submit.is-loading { opacity: .92; cursor: progress; }
@keyframes bkSpin { to { transform: rotate(360deg); } }
.bk-hint { display: block; margin-top: 5px; font-size: .72rem; font-weight: 500; color: var(--slate); }
.bk-error {
  background: #FDECEA; color: #8A2B20; border: 1px solid #F5C6C0;
  border-radius: 8px; padding: 10px 13px; margin: 12px 0 0;
  font-size: .85rem; line-height: 1.5;
}

/* ── Policy pages as cards ───────────────────────────────────────────────── */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, .9fr);
  gap: 30px;
  align-items: start;
}
.legal-main { display: grid; gap: 18px; }

.legal-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 32px 26px;
  box-shadow: 0 1px 0 rgba(11, 34, 57, .03);
  transition: transform .5s cubic-bezier(.19,.85,.25,1), box-shadow .5s, border-color .5s;
}
.legal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(11, 34, 57, .11);
  border-color: #C6D8E6;
}
.legal-num {
  position: absolute; top: 24px; right: 26px;
  font: 800 .68rem/1 var(--display);
  letter-spacing: .14em;
  color: var(--gold);
  opacity: .9;
}
.legal-card h2 {
  font-size: 1.2rem; line-height: 1.35; color: var(--navy);
  margin: 0 0 12px; padding-right: 46px;
}
.legal-card h3 { font-size: 1rem; color: var(--navy); margin: 20px 0 8px; }
.legal-card p { color: var(--slate); font-size: .95rem; line-height: 1.72; margin: 0 0 13px; }
.legal-card p:last-child, .legal-card ul:last-child, .legal-card ol:last-child { margin-bottom: 0; }
.legal-card ul, .legal-card ol { margin: 0 0 14px; padding-left: 20px; }
.legal-card li { color: var(--slate); font-size: .95rem; line-height: 1.7; margin-bottom: 7px; }
.legal-card ul li::marker { color: var(--gold); }
.legal-card a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-card strong { color: var(--navy); }

.legal-aside { position: sticky; top: 96px; display: grid; gap: 18px; }
.legal-toc-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 24px;
}
.legal-aside-title {
  display: block; font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.legal-toc { display: grid; }
.legal-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 0; font-size: .84rem; color: var(--navy);
  border-bottom: 1px solid #EEF3F7; text-decoration: none;
  transition: color .25s, padding-left .25s;
}
.legal-toc a:last-child { border-bottom: 0; }
.legal-toc a span { font-weight: 800; font-size: .68rem; color: var(--gold); }
.legal-toc a:hover { color: var(--gold); padding-left: 4px; }

.legal-help {
  background: var(--navy); color: #fff;
  border-radius: 18px; padding: 26px 24px;
}
.legal-help i { color: #9CC3E4; font-size: 1.1rem; }
.legal-help h3 { color: #fff; font-size: 1.02rem; margin: 12px 0 8px; }
.legal-help p { color: rgba(255, 255, 255, .78); font-size: .86rem; line-height: 1.6; }
.legal-help .btn { width: 100%; justify-content: center; margin-top: 14px; }
.legal-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px; color: #fff; font-size: .8rem; font-weight: 600;
}
.legal-link i { font-size: .7rem; color: #9CC3E4; }

@media (max-width: 980px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .legal-card { padding: 24px 22px; }
}

/* ── Vacancy page ─────────────────────────────────────────────────────────── */
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.job-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  background: #EFF5FA; color: var(--navy);
  border: 1px solid #DCE8F2; border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; font-weight: 600;
}
.job-meta span i { font-size: .74rem; color: var(--gold); }
.job-meta span.is-pay { background: var(--navy); color: #fff; border-color: var(--navy); }
.job-meta span.is-pay i { color: #9CC3E4; }
.job-lead { font-size: 1.05rem !important; letter-spacing: .02em; margin: 4px 0 14px !important; padding: 0 !important; }
.job-close { display: flex; align-items: center; gap: 14px; }
.job-close > i { font-size: 1.2rem; color: var(--gold); }
.job-close strong { display: block; color: var(--navy); font-size: .95rem; }
.job-close span { display: block; color: var(--slate); font-size: .82rem; margin-top: 2px; }
.legal-aside .form-panel { margin: 0; }

/* ── Photographs that used to be CSS backgrounds ─────────────────────────── */
.slide-bg > .bg-photo,
.page-banner-bg > .bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* The band keeps its wash, but the photograph is now a real, clickable image. */
.values-band {
  background: #0B2239 !important;
  position: relative;
  overflow: hidden;
}
.values-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.values-band::before { z-index: 1; }
.values-band > .container { z-index: 2; }

.bg-fixed-bg > .bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reviews, the new service card, and the two windows they open.
   Everything here uses the same navy as the closing band, so the page reads as
   one thing rather than a set of borrowed components.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the new service, standing above the grid ────────────────────────────── */
.service-feature { position: relative; margin-bottom: 34px; }
.service-feature-img { position: relative; overflow: hidden; }
.service-ribbon {
  position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.95); color: var(--navy); padding: 7px 14px; border-radius: 99px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(11,34,57,.22);
}
.service-ribbon i { color: var(--clay); font-size: .6rem; }
.sf-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-dk);
}
.service-feature-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── the service window ─────────────────────────────────────────────────── */
.svc-modal-overlay { z-index: 3200; }
.svc-modal-box {
  max-width: 880px; padding: 0; overflow: hidden; max-height: 92vh; display: flex; flex-direction: column;
}
.svc-modal-box .modal-close { top: 16px; right: 16px; z-index: 4; background: #fff; box-shadow: var(--sh-sm); }
.svc-modal-head { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--wash); }
@media (max-width: 700px) { .svc-modal-head { grid-template-columns: 1fr; } }
.svc-modal-photo { min-height: 220px; overflow: hidden; }
.svc-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-modal-intro { padding: 28px 30px; }
.svc-modal-intro h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 10px 0 10px; color: var(--navy); }
.svc-modal-lede { color: var(--slate); font-size: .95rem; line-height: 1.7; margin: 0; }
.svc-modal-body { padding: 26px 30px 6px; overflow-y: auto; }
.svc-modal-body p { color: var(--slate); line-height: 1.78; font-size: .93rem; margin: 0 0 14px; }
.svc-modal-h {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin: 22px 0 12px;
}
.svc-modal-list { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; margin-bottom: 6px; }
@media (max-width: 640px) { .svc-modal-list { grid-template-columns: 1fr; } }
.svc-modal-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .svc-modal-steps { grid-template-columns: 1fr; } }
.svc-step { background: var(--wash); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 15px; }
.svc-step span { font-family: var(--display); font-size: .72rem; font-weight: 800; color: var(--clay-dk); letter-spacing: .1em; }
.svc-step b { display: block; margin: 4px 0 4px; font-size: .88rem; color: var(--navy); }
.svc-step p { font-size: .78rem; line-height: 1.6; margin: 0; color: var(--slate); }
.svc-modal-note {
  display: flex; gap: 9px; align-items: flex-start; font-size: .82rem !important; color: var(--slate);
  background: var(--sand); border-radius: var(--r-sm); padding: 12px 14px; margin: 20px 0 !important;
}
.svc-modal-note i { color: var(--clay-dk); margin-top: 3px; }
.svc-modal-foot {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 18px 30px 24px; border-top: 1px solid var(--border); background: #fff;
}

/* ── stars ──────────────────────────────────────────────────────────────── */
.rv-stars { display: inline-flex; gap: 3px; color: var(--gold); font-size: .78rem; line-height: 1; }
.rv-stars-lg { font-size: 1rem; gap: 4px; }

/* ── the review band ──────────────────────────────────────────────────────
   A photograph behind a dark wash, so the section belongs to the same family
   as the appointment band underneath it instead of floating on a slab of blue.
   The cards drop in, the words of each review fall into place, it holds, it
   clears, the next set arrives. js/reviews-cinema.js owns the timing; the
   animations here are what it switches on. */

.rv-band {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: #0A2137;
  padding: clamp(58px, 7vw, 96px) 0 clamp(54px, 6vw, 84px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.rv-band-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  z-index: -4; opacity: .78;
  filter: saturate(.92) contrast(1.05);
  transform: scale(1.07);
  animation: rvPhotoDrift 30s ease-in-out infinite alternate;
}
@keyframes rvPhotoDrift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.6%, -1.4%, 0); }
}
.rv-band-veil {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(95% 85% at 86% 2%, rgba(47,130,184,.30) 0%, rgba(9,29,48,0) 58%),
    radial-gradient(65% 70% at 4% 96%, rgba(180,101,46,.20) 0%, rgba(9,29,48,0) 66%),
    linear-gradient(112deg, rgba(6,21,35,.95) 0%, rgba(8,28,46,.87) 42%, rgba(11,44,72,.63) 100%);
}
.rv-band-grain {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.10) .5px, transparent .5px);
  background-size: 3px 3px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
}
.rv-band-glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  border: 74px solid rgba(255,255,255,.045); top: -250px; right: -140px; pointer-events: none;
  animation: rvGlow 14s ease-in-out infinite alternate;
}
.rv-band-glow--2 {
  width: 420px; height: 420px; border-width: 56px; border-color: rgba(226,170,110,.08);
  top: auto; bottom: -230px; left: -160px; right: auto;
  animation-duration: 18s;
}
@keyframes rvGlow { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }

.rv-band .container { position: relative; z-index: 1; }
.rv-band .tag.tag-white { margin-bottom: 0; }
.rv-band-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 38px; }
.rv-band-head h2 { color: #fff; margin: 12px 0 10px; }
.rv-band-head p { color: rgba(255,255,255,.78); max-width: 56ch; line-height: 1.7; font-size: .95rem; margin: 0; }
.rv-score {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.rv-score-num { font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.rv-score-side { display: flex; flex-direction: column; gap: 5px; }
.rv-score-side em { font-style: normal; font-size: .72rem; color: rgba(255,255,255,.66); letter-spacing: .04em; }

/* ── the stage ───────────────────────────────────────────────────────────── */
.rv-stage { position: relative; }
.rv-viewport {
  overflow: hidden; padding: 86px 4px 10px; margin: -74px -4px 0;
}
.rv-track {
  display: flex; gap: 18px;
  transition: transform .78s cubic-bezier(.22,.82,.24,1);
  will-change: transform;
}
.rv-card {
  scroll-snap-align: start; flex: 0 0 calc((100% - 36px) / 3);
  background: linear-gradient(158deg, rgba(255,255,255,.135) 0%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.075) 100%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px; padding: 26px 24px 22px; margin: 0;
  display: flex; flex-direction: column; gap: 13px; position: relative; overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16);
}
.rv-card-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(90% 70% at 12% 0%, rgba(226,170,110,.22), transparent 62%);
  transition: opacity .5s ease;
}
.rv-card:hover .rv-card-sheen { opacity: 1; }
@media (max-width: 1040px) { .rv-card { flex: 0 0 calc((100% - 18px) / 2); } }
@media (max-width: 660px)  { .rv-card { flex: 0 0 100%; } }

.rv-quote-mark {
  position: absolute; top: 4px; right: 18px; font-family: var(--display); font-size: 4rem;
  line-height: 1; color: rgba(255,255,255,.13); pointer-events: none;
}
.rv-card .rv-stars { color: #E7C470; }
.rv-card blockquote { margin: 0; font-size: .9rem; line-height: 1.74; color: rgba(255,255,255,.92); flex: 1; }
.rv-card figcaption { display: flex; align-items: center; gap: 11px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14); }
.rv-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.rv-who { display: flex; flex-direction: column; min-width: 0; }
.rv-who b { font-size: .84rem; font-weight: 700; }
.rv-who em { font-style: normal; font-size: .72rem; color: rgba(255,255,255,.62); }

/* nothing is shown until the script says which cards are on */
.rv-cinema-ready .rv-card { opacity: 0; pointer-events: none; }
.rv-cinema-ready .rv-card.is-in { opacity: 1; pointer-events: auto; }

/* in: it falls from above the card, settles, and stops */
.rv-cinema-ready .rv-card.is-in {
  animation: rvCardDrop .95s cubic-bezier(.16,.86,.28,1) both;
  animation-delay: calc(var(--d, 0) * 115ms);
}
@keyframes rvCardDrop {
  0%   { opacity: 0; transform: translate3d(0,-96px,0) rotate(-2.6deg) scale(.93); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  80%  { transform: translate3d(0,5px,0) rotate(.2deg) scale(1.004); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* out: the whole set goes together, and the next one arrives */
.rv-cinema-ready .rv-card.is-out {
  animation: rvCardFall .55s cubic-bezier(.5,0,.78,.36) both;
  animation-delay: calc(var(--d, 0) * 45ms);
  pointer-events: none;
}
/* on the way out the words stay in place: the whole card leaves together,
   rather than emptying itself first and then falling */
.rv-card.is-out .rvw { opacity: 1; transform: none; animation: none; }

@keyframes rvCardFall {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate3d(0,64px,0) scale(.965); filter: blur(5px); }
}

/* the stars land one after another, then the words */
.rv-cinema-ready .rv-card.is-in .rv-stars i {
  animation: rvStarIn .55s cubic-bezier(.2,.9,.3,1.5) both;
}
.rv-cinema-ready .rv-card.is-in .rv-stars i:nth-child(1) { animation-delay: .16s; }
.rv-cinema-ready .rv-card.is-in .rv-stars i:nth-child(2) { animation-delay: .23s; }
.rv-cinema-ready .rv-card.is-in .rv-stars i:nth-child(3) { animation-delay: .30s; }
.rv-cinema-ready .rv-card.is-in .rv-stars i:nth-child(4) { animation-delay: .37s; }
.rv-cinema-ready .rv-card.is-in .rv-stars i:nth-child(5) { animation-delay: .44s; }
@keyframes rvStarIn {
  0%   { opacity: 0; transform: translateY(-16px) scale(.4) rotate(-25deg); }
  100% { opacity: 1; transform: none; }
}

/* each word is its own little fall — this is the bit that makes it feel alive */
.rvw {
  display: inline-block; opacity: 0;
  transform: translate3d(0,-14px,0) rotateX(-52deg);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.rv-card.is-in .rvw,
.rv-tile.rv-live .rvw {
  animation: rvWordDrop .62s cubic-bezier(.19,.86,.3,1) both;
  animation-delay: calc(300ms + var(--i, 0) * 34ms);
}
@keyframes rvWordDrop {
  0%   { opacity: 0; transform: translate3d(0,-14px,0) rotateX(-52deg); }
  62%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ── arrows, dots, count ─────────────────────────────────────────────────── */
.rv-stage-bar { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; }
.rv-arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.26);
  background: rgba(11,34,57,.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; transition: background .22s, transform .22s, border-color .22s;
}
.rv-arrow:hover { background: rgba(47,130,184,.55); border-color: rgba(255,255,255,.5); transform: scale(1.07); }
.rv-arrow:active { transform: scale(.95); }
.rv-dots { display: flex; align-items: center; gap: 8px; }
.rv-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.28); transition: width .35s cubic-bezier(.22,.82,.24,1), background .3s;
}
.rv-dot:hover { background: rgba(255,255,255,.55); }
.rv-dot.on { width: 30px; background: linear-gradient(90deg, #E7C470, #B4652E); }
.rv-stage-count {
  font-size: .68rem; letter-spacing: .18em; color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: left;
}
@media (max-width: 660px) { .rv-stage-bar { gap: 10px; } .rv-stage-count { display: none; } }

.rv-band-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.rv-band .btn-ghost-white { border-color: rgba(255,255,255,.4); color: #fff; }
.rv-band .btn-ghost-white:hover { background: rgba(255,255,255,.12); }

.rv-empty {
  text-align: center; border: 1px dashed rgba(255,255,255,.28); border-radius: var(--r-md);
  padding: 40px 24px; background: rgba(255,255,255,.04); backdrop-filter: blur(10px);
}
.rv-empty-stars { display: inline-flex; gap: 6px; font-size: 1.5rem; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.rv-empty h3 { color: #fff; margin: 0 0 8px; }
.rv-empty p { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 auto 18px; font-size: .9rem; line-height: 1.7; }

/* still while the visitor has asked for less movement */
@media (prefers-reduced-motion: reduce) {
  .rv-band-photo, .rv-band-glow, .cb-ring { animation: none !important; }
  .rv-cinema-ready .rv-card { opacity: 1; pointer-events: auto; }
  .rv-cinema-ready .rv-card.is-in { animation: none; }
  .rvw { opacity: 1; transform: none; animation: none !important; }
  .rv-track { transition: none; flex-wrap: wrap; transform: none !important; }
  .rv-viewport { overflow: visible; padding: 0; margin: 0; }
  .rv-stage-bar { display: none; }
  .rv-tile { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── the appointment band: the same block of the page, continued ─────────── */
.contact-band {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: #082033; padding: 44px 0 50px;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 90% at 50% 0%, rgba(47,130,184,.22), transparent 68%),
    radial-gradient(40% 70% at 92% 110%, rgba(226,170,110,.10), transparent 70%);
}
.cb-seam {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,196,112,.55) 30%, rgba(180,101,46,.65) 50%, rgba(231,196,112,.45) 70%, transparent);
}
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb-item {
  position: relative; display: flex; align-items: center; gap: 20px; overflow: hidden;
  padding: 20px 22px; border-radius: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(118deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.13);
  transition: transform .45s cubic-bezier(.19,.85,.25,1), border-color .4s, box-shadow .45s, background .4s;
}
.cb-item:hover { transform: translateY(-4px); border-color: rgba(231,196,112,.45); box-shadow: 0 26px 54px -32px rgba(0,0,0,.9); background: linear-gradient(118deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.cb-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.15) 48%, transparent 72%);
  transform: translateX(-120%); transition: transform .85s ease;
}
.cb-item:hover::after { transform: translateX(120%); }
.cb-ico {
  position: relative; width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.15rem;
  background: linear-gradient(140deg, rgba(47,130,184,.45), rgba(18,58,94,.9));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.cb-ring { position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(231,196,112,.4); animation: cbPulse 3.6s ease-out infinite; }
.cb-item--r .cb-ring { animation-delay: 1.2s; }
@keyframes cbPulse {
  0%   { transform: scale(.9); opacity: .75; }
  70%  { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
.cb-txt { min-width: 0; }
.cb-kicker { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cb-num { display: block; font-family: var(--display); font-size: clamp(1.24rem, 2.1vw, 1.5rem); font-weight: 700; letter-spacing: .02em; margin-top: 4px; }
.cb-txt em { display: block; font-style: normal; font-size: .79rem; color: rgba(255,255,255,.62); margin-top: 3px; }
.cb-go {
  margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; font-size: .78rem;
  transition: background .3s, border-color .3s, transform .3s;
}
.cb-item:hover .cb-go { background: var(--gold); border-color: var(--gold); transform: translateX(3px); }

/* these two come in from their own side, and further than anything else */
.js-enabled .anim-big.anim-left  { transform: translate3d(-230px, 18px, 0) rotate(-2.4deg) scale(.95); filter: blur(7px); }
.js-enabled .anim-big.anim-right { transform: translate3d(230px, 18px, 0) rotate(2.4deg) scale(.95); filter: blur(7px); }
.js-enabled .anim-big.in-view {
  opacity: 1; transform: none; filter: none;
  transition: transform 1.1s cubic-bezier(.15,.86,.24,1), opacity .85s ease, filter .9s ease;
}
@media (max-width: 860px) {
  .cb-grid { grid-template-columns: 1fr; gap: 14px; }
  .cb-item { padding: 16px 18px; gap: 14px; }
  .cb-ico { width: 52px; height: 52px; font-size: 1rem; }
  .js-enabled .anim-big.anim-left  { transform: translate3d(-140px, 14px, 0) rotate(-1.6deg) scale(.96); }
  .js-enabled .anim-big.anim-right { transform: translate3d(140px, 14px, 0) rotate(1.6deg) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .js-enabled .anim-big.anim-left, .js-enabled .anim-big.anim-right { transform: none; filter: none; opacity: 1; }
}

/* ── the Reviews page ───────────────────────────────────────────────────── */
.rv-page-sec { position: relative; background: linear-gradient(180deg, var(--wash) 0%, #fff 42%); }
.rv-note {
  display: flex; gap: 15px; align-items: flex-start; padding: 18px 20px; margin: 0 0 24px;
  border-radius: 14px; border: 1px solid var(--rule); background: #fff;
  box-shadow: 0 18px 40px -34px rgba(11,34,57,.45);
}
.rv-note-ico {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--sky); color: var(--navy); font-size: .95rem;
}
.rv-note b { display: block; font-size: .94rem; color: var(--navy); }
.rv-note p { margin: 4px 0 0; font-size: .84rem; line-height: 1.65; color: var(--slate); }
.rv-note--ok { border-color: #CBE6D7; background: #F3FAF6; }
.rv-note--ok .rv-note-ico { background: #DFF3E7; color: #1F7A4D; }
.rv-note--preview { border-color: #E8D8BE; background: #FDF9F1; }
.rv-note--preview .rv-note-ico { background: #F7EBD5; color: var(--clay-dk); }

.rv-tile--preview { margin-bottom: 24px; border-style: dashed; border-color: #E2CBA6; background: #FFFDF8; }
.rv-preview-flag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--clay-dk); background: #F8EEDC; border-radius: 99px; padding: 5px 11px;
}
.rv-tile.is-focus { box-shadow: 0 0 0 2px rgba(180,101,46,.45), 0 26px 60px -40px rgba(11,34,57,.6); }
/* the one a link arrived for: a slow gold ring, twice, then quiet */
.rv-tile.is-found { animation: rvFound 2.6s ease both; }
@keyframes rvFound {
  0%   { box-shadow: 0 0 0 0 rgba(231,196,112,.0), 0 26px 60px -40px rgba(11,34,57,.45); }
  18%  { box-shadow: 0 0 0 6px rgba(231,196,112,.55), 0 26px 60px -40px rgba(11,34,57,.45); }
  70%  { box-shadow: 0 0 0 2px rgba(180,101,46,.45), 0 26px 60px -40px rgba(11,34,57,.45); }
  100% { box-shadow: 0 0 0 2px rgba(180,101,46,.45), 0 26px 60px -40px rgba(11,34,57,.45); }
}

/* the grid cards drop and their words fall, when the script is there */
.js-enabled.rv-tiles .rv-tile[data-rv-tile] { opacity: 0; transform: translate3d(0, 40px, 0) scale(.975); }
.js-enabled.rv-tiles .rv-tile.rv-in {
  opacity: 1; transform: none;
  animation: rvTileIn .85s cubic-bezier(.16,.86,.28,1) backwards;
  animation-delay: var(--td, 0ms);
}
@keyframes rvTileIn {
  0%   { opacity: 0; transform: translate3d(0,-56px,0) rotate(-1.4deg) scale(.96); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  82%  { transform: translate3d(0,3px,0) rotate(.1deg); }
  100% { opacity: 1; transform: none; }
}
.rv-tile::before { z-index: 1; }
/* ── the Reviews page ───────────────────────────────────────────────────── */
.rv-summary-wrap { background: var(--wash); border-bottom: 1px solid var(--border); }
.rv-summary {
  display: grid; grid-template-columns: 220px 1fr 300px; gap: 34px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 30px;
  box-shadow: var(--sh-sm);
}
@media (max-width: 960px) { .rv-summary { grid-template-columns: 1fr 1fr; } .rv-summary-cta { grid-column: 1 / -1; } }
@media (max-width: 640px) { .rv-summary { grid-template-columns: 1fr; padding: 22px; } }
.rv-summary-score { text-align: center; }
.rv-summary-num { display: block; font-family: var(--display); font-size: 3.4rem; font-weight: 800; color: var(--navy); line-height: 1; }
.rv-summary-score p { margin: 8px 0 0; font-size: .76rem; color: var(--muted); }
.rv-summary-bars { display: grid; gap: 7px; }
.rv-bar-row { display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 10px; font-size: .76rem; color: var(--slate); }
.rv-bar-label i { color: var(--gold); font-size: .68rem; }
.rv-bar { height: 8px; border-radius: 99px; background: var(--sky); overflow: hidden; display: block; }
.rv-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--navy), #2F82B8); transition: width .8s var(--tr); }
.rv-bar-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-summary-cta { border-left: 1px solid var(--border); padding-left: 28px; }
@media (max-width: 960px) { .rv-summary-cta { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 18px; } }
.rv-summary-cta h3 { font-size: 1rem; margin: 0 0 6px; color: var(--navy); }
.rv-summary-cta p { font-size: .82rem; color: var(--slate); margin: 0 0 14px; line-height: 1.6; }

.rv-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.rv-filter .pill {
  border: 1px solid var(--border); background: #fff; color: var(--slate); border-radius: 99px;
  padding: 8px 15px; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .18s;
}
.rv-filter .pill:hover { border-color: var(--navy); color: var(--navy); }
.rv-filter .pill.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rv-grid { grid-template-columns: 1fr; } }
.rv-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px;
  display: flex; flex-direction: column; gap: 14px; transition: var(--tr); position: relative; overflow: hidden;
}
.rv-tile::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--navy), #2F82B8); opacity: 0; transition: opacity .25s;
}
.rv-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.rv-tile:hover::before { opacity: 1; }
.rv-tile header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-tile time { font-size: .7rem; color: var(--muted); letter-spacing: .02em; }
.rv-tile blockquote { margin: 0; font-size: .88rem; line-height: 1.75; color: var(--slate); flex: 1; }
.rv-tile footer { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--border); }
.rv-tile .rv-avatar { background: var(--sky); color: var(--navy); }
.rv-tile .rv-who b { color: var(--navy); }
.rv-tile .rv-who em { color: var(--muted); }
.rv-none { text-align: center; color: var(--muted); padding: 30px; font-size: .9rem; }

.rv-empty-light { border-color: var(--border); background: var(--wash); }
.rv-empty-light h3 { color: var(--navy); }
.rv-empty-light p { color: var(--slate); }
.rv-empty-light .rv-empty-stars { color: var(--border); }

/* ── the review form ────────────────────────────────────────────────────── */
.rv-modal-overlay { z-index: 3300; }
.rv-modal-box { max-width: 620px; padding: 34px 32px 28px; max-height: 92vh; overflow-y: auto; }
@media (max-width: 520px) { .rv-modal-box { padding: 26px 18px; } }
.rv-modal-head h2 { margin: 10px 0 8px; font-size: 1.5rem; color: var(--navy); }
.rv-modal-head p { color: var(--slate); font-size: .86rem; line-height: 1.65; margin: 0 0 18px; }
.rv-rate-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rv-rate-label { font-size: .78rem; font-weight: 700; color: var(--navy); }
.rv-rate { display: inline-flex; gap: 6px; }
.rv-rate-star {
  border: none; background: transparent; padding: 2px; cursor: pointer; font-size: 1.55rem;
  color: #DCE6EE; transition: transform .15s, color .15s; line-height: 1;
}
.rv-rate-star.on { color: var(--gold); }
.rv-rate-star:hover { transform: scale(1.16); }
.rv-rate-star:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .rv-row { grid-template-columns: 1fr; } }
.rv-modal-box label { display: block; font-size: .78rem; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.rv-modal-box input, .rv-modal-box textarea {
  width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--body); font-size: .9rem; color: var(--ink); background: #fff; font-weight: 400;
}
.rv-modal-box input:focus, .rv-modal-box textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18,58,94,.12);
}
.rv-opt { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.rv-full { position: relative; }
.rv-count { position: absolute; right: 10px; bottom: 20px; font-size: .68rem; color: var(--muted); font-weight: 500; }
.rv-submit { width: 100%; justify-content: center; margin-top: 4px; position: relative; }
.rv-spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: rvSpin .7s linear infinite; }
.rv-submit.is-loading .rv-spinner { display: inline-block; }
@keyframes rvSpin { to { transform: rotate(360deg); } }
.rv-fine { font-size: .72rem; color: var(--muted); text-align: center; margin: 10px 0 0; }