/* Makes the International pages look like the main (India) site: the main site's exact colours, header and footer
   proportions, button shape and link style. Loaded AFTER the content team's style.css and applied on top of it, so
   their files stay exactly as delivered. */
:root,
:root[data-theme="dark"] {
  --bg: #faf8ff;
  --surface: #ffffff;
  --mist: #ebedff;
  --footer-bg: #e4e7fe;
  --line: #dee1f8;
  --ink: #171b2b;
  --muted: #454652;
  --teal: #24389c;
  --teal-2: #3f51b5;
  --grad: linear-gradient(135deg, #24389c, #3f51b5 70%);
  --on-teal: #ffffff;
  --alert-bg: #fff1ea;
  --alert-line: #f3c3a6;
  --alert-ink: #7a3418;
  --ph-bg: #fff4c9;
  --ph-ink: #5c4a00;
  --radius-btn: 12px;
  --wrap: 1440px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #faf8ff;
    --surface: #ffffff;
    --mist: #ebedff;
    --footer-bg: #e4e7fe;
    --line: #dee1f8;
    --ink: #171b2b;
    --muted: #454652;
    --teal: #24389c;
    --teal-2: #3f51b5;
    --grad: linear-gradient(135deg, #24389c, #3f51b5 70%);
    --on-teal: #ffffff;
    --alert-bg: #fff1ea;
    --alert-line: #f3c3a6;
    --alert-ink: #7a3418;
    --ph-bg: #fff4c9;
    --ph-ink: #5c4a00;
    color-scheme: light;
  }
  :root:not([data-theme="light"]) .brand img {
    filter: none;
  }
}
:root[data-theme="dark"] .brand img {
  filter: none;
}

/* same page gutters as the main site (40px on desktop, 20px on phones) */
.wrap {
  max-width: 1440px;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .wrap {
    padding-inline: 40px;
  }
}
/* long reading text stays at a comfortable width inside the wider page */
.doc .wrap {
  max-width: 1200px;
}
.intake .wrap {
  max-width: 760px;
}

/* header: same look as the main site's */
.site-header {
  background: rgba(250, 248, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 0;
  box-shadow: 0 1px 3px rgba(23, 27, 43, 0.08);
}
.site-header .wrap {
  padding-block: 14px;
  gap: 20px;
  flex-wrap: nowrap;
}
.brand img {
  height: 40px;
}
@media (min-width: 768px) {
  .brand img {
    height: 56px;
  }
}
.brand small {
  color: var(--teal);
  border-left-color: var(--line);
}
.nav {
  gap: 18px;
  flex-wrap: nowrap;
}
.nav select {
  border-radius: 10px;
  border-color: var(--line);
  background: #fff;
  font-weight: 500;
}
.mm-switch {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.mm-switch b {
  color: var(--teal);
  font-weight: 800;
}
.mm-switch a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.mm-switch a:hover {
  color: var(--teal);
}
.mm-switch i {
  font-style: normal;
  margin-inline: 7px;
  opacity: 0.4;
}
@media (max-width: 600px) {
  .mm-switch {
    display: none;
  }
}

/* buttons: the main site's solid indigo, 12px corners */
.btn {
  box-shadow: 0 4px 12px rgba(36, 56, 156, 0.18);
  font-weight: 600;
}
.btn.small {
  padding: 12px 24px;
  font-size: 0.95rem;
}
.btn.ghost {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: none;
}

/* footer: the main site's footer treatment */
.site-footer {
  background: var(--footer-bg);
  border-top: 0;
  padding-block: 56px 40px;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer h4 {
  color: var(--teal);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.site-footer ul {
  gap: 10px;
}
.site-footer a,
.site-footer .linklike {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.site-footer a:hover,
.site-footer .linklike:hover {
  color: var(--teal);
}
.site-footer .foot-region {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 4px;
}
.site-footer .foot-countries a {
  line-height: 1.9;
}
.site-footer .disclaimer {
  border-top-color: #c6c9e6;
}
.footer-logo {
  height: 56px;
  width: auto;
}
.site-footer strong {
  color: var(--ink);
}

/* page furniture */
.crumbs {
  background: var(--surface);
}
.eyebrow {
  color: var(--teal);
}
section.block.tint,
.hero {
  --mist: #ebedff;
}

/* ── Centred layout, as on the main site: section titles, intros, FAQs and closing calls to action sit in the middle ── */
section.block {
  padding-block: 72px;
  border-top: 0;
}
.block-head {
  text-align: center;
  justify-items: center;
  margin-inline: auto;
  max-width: 780px;
  margin-bottom: 36px;
}
.block-head h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
.block-head p {
  color: var(--muted);
  font-size: 1.1rem;
}
/* two-column "title beside content" blocks become: centred title, then the content below it */
.split {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: stretch;
}
.split > .block-head,
.split > div:first-child {
  text-align: center;
  justify-items: center;
  margin-inline: auto;
  max-width: 780px;
}
.split > :not(:first-child) {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}
.prose {
  margin-inline: auto;
}
.grid,
.steps,
.country-grid {
  justify-content: center;
}
.card,
.steps li {
  box-shadow:
    0 1px 2px rgba(23, 27, 43, 0.04),
    0 8px 24px rgba(23, 27, 43, 0.05);
  border-color: transparent;
}
.table-wrap,
.urgent {
  max-width: 1000px;
  margin-inline: auto;
}
.features {
  max-width: 820px;
  margin-inline: auto;
}
.faq {
  max-width: 860px;
  margin-inline: auto;
  gap: 12px;
}
.faq details {
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(23, 27, 43, 0.04),
    0 6px 18px rgba(23, 27, 43, 0.05);
}
.faq summary {
  padding: 20px 24px;
  font-size: 1.05rem;
}
.faq .answer {
  padding: 0 24px 22px;
  max-width: none;
}
.closing {
  text-align: center;
  padding-block: 88px;
}
.closing .wrap {
  justify-items: center;
}
.closing p,
.closing .lede {
  margin-inline: auto;
}
.closing h2 {
  font-weight: 700;
}
.crumbs .wrap {
  justify-content: flex-start;
}
/* hero: vertically centred pair, as on the main site's page heroes */
.hero .wrap {
  align-items: center;
}
.hero {
  padding-block: 72px 64px;
}
.chips {
  margin-bottom: 0;
}
/* long legal / support text: a centred reading column, with its contents list beside it */
.doc .wrap {
  max-width: 1120px;
  justify-content: center;
}
.doc article {
  max-width: 780px;
}
@media (max-width: 860px) {
  .block-head,
  .split > .block-head,
  .split > div:first-child {
    max-width: none;
  }
  section.block {
    padding-block: 52px;
  }
}

/* ── second pass ── */
.split > h2 {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 780px;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
.split > .prose {
  max-width: 780px;
}
.block-head .eyebrow,
.split > .eyebrow {
  justify-self: center;
  margin-inline: auto;
}
.block-head .prose {
  margin-inline: auto;
  text-align: center;
}
.block-head .prose p {
  color: var(--muted);
  font-size: 1.1rem;
}
/* card rows centre their last, shorter row instead of leaving it on the left */
.grid,
.grid.wide,
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.grid > .card,
.grid.wide > .card {
  flex: 1 1 260px;
  max-width: 330px;
}
.steps > li {
  flex: 1 1 230px;
  max-width: 320px;
}
.country-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.country-grid > .country {
  flex: 1 1 240px;
  max-width: 300px;
}
.card h3,
.steps li strong:first-child {
  color: var(--teal);
}
section.block + section.block.tint,
section.block.tint + section.block {
  margin-top: 0;
}

/* counsellor photo (when a team profile has one) */
.avatar.has-photo {
  border: 0;
  overflow: hidden;
  background: var(--mist);
}
.avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── counsellors: one horizontally scrolling row of equal cards (arrows + swipe), like the expert rows on the main site ── */
#counsellors .hscroll {
  position: relative;
}
#counsellors .grid.wide {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 22px;
  margin-inline: -4px;
  scrollbar-width: thin;
  scrollbar-color: #c6c9e6 transparent;
  -webkit-overflow-scrolling: touch;
}
#counsellors .grid.wide::before,
#counsellors .grid.wide::after {
  content: "";
  margin: auto;
} /* centres the row when there are only a few cards, scrolls normally when there are many */
#counsellors .grid.wide::-webkit-scrollbar {
  height: 8px;
}
#counsellors .grid.wide::-webkit-scrollbar-thumb {
  background: #c6c9e6;
  border-radius: 8px;
}
#counsellors .counsellor {
  flex: 0 0 min(320px, 82vw);
  max-width: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
}
#counsellors .counsellor .avatar {
  width: 76px;
  height: 76px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--teal);
  flex: none;
}
#counsellors .counsellor > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
#counsellors .counsellor h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
#counsellors .counsellor .role {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.9rem;
}
#counsellors .counsellor .cred {
  font-size: 0.9rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#counsellors .counsellor > div:last-child > p:not(.role):not(.cred):not(.team) {
  font-size: 0.95rem;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#counsellors .counsellor .team {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.hscroll-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.hscroll-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  background: #fff;
  color: var(--teal);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(36, 56, 156, 0.12);
}
.hscroll-nav button:hover {
  background: var(--teal);
  color: #fff;
}
.hscroll-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ═══════════════ Premium pass: depth, gradients, motion on hover, richer pages ═══════════════ */
:root {
  --shadow-md: 0 14px 34px -14px rgba(23, 27, 43, 0.18);
  --shadow-lg: 0 28px 60px -20px rgba(36, 56, 156, 0.3);
  --glass: rgba(255, 255, 255, 0.86);
}
body {
  background: radial-gradient(1200px 520px at 100% 0, rgba(63, 81, 181, 0.06), transparent 70%), var(--bg);
}
::selection {
  background: rgba(36, 56, 156, 0.18);
}

/* header + breadcrumbs */
.site-header {
  border-bottom: 1px solid rgba(222, 225, 248, 0.9);
}
.crumbs {
  background: transparent;
  border-bottom: 0;
}
.crumbs .wrap {
  padding-top: 14px;
  padding-bottom: 0;
}
.crumbs a {
  text-decoration: none;
  font-weight: 600;
  color: var(--teal);
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eef0ff 0%, #f5f3ff 60%, #faf8ff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -140px;
  top: -220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(63, 81, 181, 0.24), transparent);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -160px;
  bottom: -240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 138, 68, 0.22), transparent);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.hero .lede {
  font-size: 1.2rem;
  line-height: 1.65;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: #fff;
  border: 1px solid #dee1f8;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(36, 56, 156, 0.25);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(253, 138, 68, 0.2);
}
.chips li {
  background: rgba(255, 255, 255, 0.9);
  border-color: #dee1f8;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 4px 10px -6px rgba(23, 27, 43, 0.2);
}
.clock {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid #fff;
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.clock::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--teal-2), var(--sage));
}
.clock-time {
  font-weight: 800;
  color: var(--teal);
  font-size: 2.3rem;
}

/* section titles get a short accent bar */
.block-head h2::after,
.split > h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--teal), var(--sage));
}
section.block {
  position: relative;
}
section.block.tint {
  background: linear-gradient(180deg, #eef0ff, #e9ecff);
}

/* buttons */
.btn:not(.ghost) {
  background: var(--grad);
  border-color: transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease;
}
.btn {
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease,
    background 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(36, 56, 156, 0.55);
}
.btn.ghost {
  background: #fff;
  border-width: 1.5px;
}
.btn.ghost:hover {
  background: var(--mist);
}
.closing .btn {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
}
.closing .btn:hover {
  background: #fff;
  color: var(--teal-2);
}

/* cards */
.card,
.steps li {
  border-radius: 22px;
  border: 1px solid rgba(222, 225, 248, 0.9);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.grid .card:hover,
.steps li:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.card.prose:hover {
  transform: none;
  box-shadow: none;
}
.card h3 {
  font-weight: 700;
}
.steps li::before {
  width: 42px;
  height: 42px;
  background: var(--grad);
  font-size: 1.05rem;
  box-shadow: 0 8px 18px -8px rgba(36, 56, 156, 0.6);
  margin-bottom: 14px;
}
.country {
  border-radius: 22px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.2s;
  background: linear-gradient(180deg, #fff, #f8f9ff);
}
.country:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
.country strong {
  font-weight: 700;
}
.country .code {
  color: var(--accent-ink);
  font-weight: 700;
}

/* "why" list as soft cards */
.features {
  gap: 12px;
}
.features li {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 8px 22px -14px rgba(23, 27, 43, 0.25);
}
.features li::before {
  box-shadow: 0 0 0 5px rgba(253, 138, 68, 0.18);
}

/* tables */
.table-wrap {
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  background: #fff;
}
td:first-child {
  background: #f5f6ff;
  color: var(--ink);
}
th {
  background: #eef0ff;
  color: var(--teal);
}
tr:hover td {
  background-color: #fafaff;
}
tr:hover td:first-child {
  background: #eef0ff;
}

/* urgent help */
.urgent {
  border-radius: 22px;
  border-left: 6px solid var(--sage);
  box-shadow: 0 14px 30px -18px rgba(122, 52, 24, 0.35);
}

/* FAQ */
.faq details {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  border: 1px solid rgba(222, 225, 248, 0.9);
}
.faq details:hover {
  box-shadow: var(--shadow-md);
}
.faq details[open] {
  box-shadow: var(--shadow-md);
  border-left: 5px solid var(--teal);
}
.faq summary {
  font-weight: 700;
  color: var(--ink);
}
.faq summary::after {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef0ff;
  color: var(--teal);
  font-size: 1.2rem;
  flex: none;
}
.faq details[open] summary::after {
  background: var(--teal);
  color: #fff;
}

/* closing banner */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
}
.closing::before,
.closing::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.closing::before {
  width: 460px;
  height: 460px;
  left: -120px;
  top: -200px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
}
.closing::after {
  width: 380px;
  height: 380px;
  right: -100px;
  bottom: -190px;
  background: radial-gradient(closest-side, rgba(253, 138, 68, 0.35), transparent);
}
.closing .wrap {
  position: relative;
  z-index: 1;
}
.closing h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* page types that read as documents: About, helplines, local support, legal */
.doc {
  background: linear-gradient(180deg, #eef0ff 0, #faf8ff 380px);
  padding-block: 40px 88px;
}
.doc .wrap[style] article {
  margin-inline: auto;
}
.doc article {
  background: #fff;
  border-radius: 28px;
  padding: 48px 56px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(222, 225, 248, 0.8);
}
.doc article h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.doc article h2 {
  border-left: 5px solid var(--sage);
  padding-left: 16px;
  margin-top: 36px;
  font-weight: 700;
}
.doc article ul li::marker {
  color: var(--sage);
}
.doc article a {
  font-weight: 600;
}
.doc aside {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(222, 225, 248, 0.8);
  top: 100px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}
.doc aside a {
  padding: 6px 10px;
  border-radius: 10px;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 1.35;
}
.doc aside a:hover {
  background: #eef0ff;
  color: var(--teal);
}
.quick-answer {
  background: linear-gradient(135deg, #fff4ec, #fff);
  border: 1px solid #f3c3a6;
  border-left: 6px solid var(--sage);
  border-radius: 18px;
  padding: 18px 22px;
}
.doc article blockquote {
  background: #f5f6ff;
  border-left-color: var(--teal);
}
.doc article hr {
  border-top-color: #dee1f8;
}
.hero + .doc {
  padding-top: 8px;
}

/* sign-up form */
.intake {
  background: linear-gradient(180deg, #eef0ff, #faf8ff 420px);
  padding-block: 56px 96px;
}
.intake .wrap {
  background: #fff;
  border-radius: 30px;
  padding: 44px 48px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(222, 225, 248, 0.8);
}
.progress {
  height: 8px;
  background: #eef0ff;
}
.progress div {
  background: linear-gradient(90deg, var(--teal), var(--sage));
  border-radius: 999px;
}
.opt span {
  border-radius: 14px;
  border: 1.5px solid #dee1f8;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
  font-weight: 500;
}
.opt span:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(36, 56, 156, 0.5);
}
.opt input:checked + span {
  background: linear-gradient(135deg, #eef0ff, #fff);
  box-shadow: 0 0 0 4px rgba(36, 56, 156, 0.12);
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select.field {
  border-radius: 14px;
  border-color: #dee1f8;
  padding: 13px 16px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select.field:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(36, 56, 156, 0.14);
}
.summary {
  border-radius: 20px;
  background: #f8f9ff;
}
.slot {
  border-radius: 14px;
}

/* counsellor cards */
#counsellors .counsellor {
  border-radius: 24px;
  border-color: rgba(222, 225, 248, 0.9);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
#counsellors .counsellor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--sage));
}
#counsellors .counsellor .avatar {
  box-shadow: 0 10px 22px -10px rgba(36, 56, 156, 0.55);
  border: 3px solid #fff;
}

/* footer */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--teal-2) 55%, var(--sage));
}
.site-footer h4 {
  position: relative;
  padding-bottom: 10px;
}
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--sage);
}
.site-footer .foot-social {
  font-size: 0;
  margin-top: 16px;
}
.site-footer .foot-social a {
  display: inline-block;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c6c9e6;
  margin: 0 8px 8px 0;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    color 0.15s;
}
.site-footer .foot-social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -10px rgba(36, 56, 156, 0.6);
}

@media (max-width: 860px) {
  .doc article {
    padding: 28px 22px;
    border-radius: 22px;
  }
  .intake .wrap {
    padding: 28px 20px;
    border-radius: 24px;
  }
  .closing {
    padding-block: 72px;
  }
  .doc aside {
    max-height: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .grid .card:hover,
  .steps li:hover,
  .country:hover {
    transform: none;
  }
}

/* ═══════ Full-width text: content spans the whole page width, like the main site ═══════ */
.block-head,
.split > .block-head,
.split > div:first-child,
.split > h2 {
  max-width: 1100px;
}
.block-head .prose,
.block-head p {
  max-width: 1100px;
  margin-inline: auto;
}
.prose,
.split > .prose,
.split > :not(:first-child),
.table-wrap,
.urgent,
.features,
.faq,
.closing p {
  max-width: none;
}
.split > :not(:first-child),
.prose {
  width: 100%;
}
.prose {
  display: grid;
  gap: 18px;
  font-size: 1.05rem;
}
.prose p,
.prose li {
  max-width: none;
}
.features,
.faq,
.table-wrap,
.urgent {
  margin-inline: 0;
  width: 100%;
}
.hero .lede,
.hero h1 {
  max-width: none;
}
@media (min-width: 861px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}
.block-head .prose {
  text-align: center;
}
.doc .wrap,
.doc .wrap[style] {
  max-width: 1440px;
}
@media (min-width: 861px) {
  .doc .wrap {
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  }
}
.doc article,
.doc article[style] {
  max-width: none !important;
  width: 100%;
}
.doc .wrap[style] article {
  margin-inline: 0;
}
.faq .answer {
  max-width: none;
}
.closing p {
  margin-inline: auto;
  max-width: 900px;
}
.intake .wrap {
  max-width: 1040px;
}
.block-head h2,
.split > h2 {
  max-width: none;
}

/* email addresses are links */
a[href^="mailto:"] {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 56, 156, 0.3);
}
a[href^="mailto:"]:hover {
  color: var(--teal-2);
  border-bottom-color: var(--teal-2);
}
.site-footer a[href^="mailto:"] {
  color: var(--teal);
}
.urgent a[href^="mailto:"] {
  color: var(--alert-ink);
  border-bottom-color: currentColor;
}

/* hub: "Select your country" dropdown (replaces the grid of country cards) */
.country-picker {
  display: flex;
  gap: 14px;
  max-width: 720px;
  margin: 8px auto 0;
  align-items: stretch;
}
.cp-field {
  position: relative;
  flex: 1;
}
.cp-field select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 18px 54px 18px 22px;
  border-radius: 18px;
  border: 1.5px solid #c6c9e6;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.cp-field select:hover,
.cp-field select:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(36, 56, 156, 0.14);
}
.cp-chev {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg);
  pointer-events: none;
}
.country-picker .btn {
  white-space: nowrap;
  padding-inline: 30px;
  border-radius: 18px;
}
@media (max-width: 600px) {
  .country-picker {
    flex-direction: column;
  }
  .country-picker .btn {
    width: 100%;
  }
}
#countries .wrap > p {
  text-align: center;
  margin: 28px auto 0;
  max-width: 900px;
  color: var(--muted);
}

/* sign-up form: country as a dropdown */
.selwrap {
  position: relative;
}
.selwrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg);
  pointer-events: none;
}
.selwrap select.field {
  appearance: none;
  -webkit-appearance: none;
  padding: 16px 52px 16px 20px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  background: #fff;
}

/* ═══ Counsellor cards: the same card as the expert cards on the main site's home page ═══ */
.xcard {
  flex: 0 0 min(320px, 82vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(198, 197, 212, 0.4);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 1px 2px rgba(23, 27, 43, 0.06);
  transition: box-shadow 0.2s ease;
}
.xcard:hover {
  box-shadow: 0 16px 32px -14px rgba(23, 27, 43, 0.28);
}
.xcard-photo {
  height: 208px;
  background: #ebedff;
  overflow: hidden;
  position: relative;
  flex: none;
}
.xcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  display: block;
}
.xcard-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--teal);
  background: linear-gradient(135deg, #dee0ff, #ebedff);
}
.xcard-body {
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.xcard-role {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  background: #dee0ff;
  color: #00105c;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xcard h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.xcard-exp {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xcard-bio {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xcard-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.xcard-chips span {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  background: #e4e7fe;
  color: var(--ink);
  font-size: 12px;
  flex: none;
}
.xcard-chips .xcard-lbl {
  background: none;
  padding: 0;
  color: var(--muted);
}
.xcard-lang {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}
.xcard-lang strong {
  color: var(--ink);
  font-weight: 600;
}
.xcard-panel {
  margin-top: auto;
  background: #f3f2ff;
  padding: 16px 20px;
}
.xcard-cta {
  display: block;
  text-align: center;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s;
}
.xcard-cta:hover {
  opacity: 0.9;
  color: #fff;
}

/* ── cards fill the page width (four across, aligned with the page edges); more than four scroll sideways ── */
.xcard {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 280px;
}
@media (max-width: 600px) {
  .xcard {
    flex-basis: 82vw;
    min-width: 0;
  }
}
.xcard-fee {
  font-size: 0.875rem;
  margin: 0;
  color: var(--muted);
}
.xcard-fee strong {
  font-weight: 800;
  color: var(--ink);
}
.xcard-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xcard-avail {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--muted);
}
.xcard-avail svg {
  color: var(--teal);
  flex: none;
  margin-top: 1px;
}
.xcard-avail p {
  margin: 0;
  line-height: 1.4;
}
.xcard-avail .xcard-avail-h {
  margin-bottom: 2px;
}
.xcard-avail p:not(.xcard-avail-h) {
  color: var(--teal);
  font-weight: 600;
}

/* ── sign-up form: the card spans the page like every other section; short fields sit side by side ── */
.intake .wrap {
  max-width: 1440px;
}
@media (min-width: 900px) {
  #rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 28px;
    align-items: start;
  }
  #rest > * {
    grid-column: 1 / -1;
  }
  #rest > .q:has(#f-name),
  #rest > .q:has(#f-email),
  #rest > .q:has(#f-phone) {
    grid-column: auto;
  }
  #signup {
    gap: 26px;
  }
  #signup .opts {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}
.intake .wrap {
  width: calc(100% - 80px);
  max-width: 1360px;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .intake .wrap {
    width: calc(100% - 32px);
  }
}

/* ── closer to the home page expert card ── */
.xcard {
  background: #fbfaff;
  border-color: rgba(198, 197, 212, 0.45);
}
.xcard-body {
  background: #fbfaff;
}
.xcard-panel {
  background: #f3f2ff;
}
.xcard-chips {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  position: relative;
}
.xcard-chips > span {
  display: inline-block;
  margin-right: 8px;
}
.xcard-chips .xcard-lbl {
  margin-right: 8px;
}
.xmq-track {
  display: inline-flex;
  width: max-content;
  animation: xmq var(--xmq-dur, 30s) linear infinite;
}
.xmq-track > span {
  margin-right: 8px;
}
.xcard-chips:hover .xmq-track {
  animation-play-state: paused;
}
@keyframes xmq {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xmq-track {
    animation: none;
  }
}
/* previous / next arrows sit at the top right, as on the home page */
#counsellors .hscroll {
  position: relative;
}
@media (min-width: 900px) {
  #counsellors .hscroll-nav {
    position: absolute;
    right: 0;
    top: -92px;
    margin: 0;
  }
}
.xcard-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}
.xcard-chips .xcard-lbl {
  flex: none;
  font-size: 0.75rem;
  margin: 0;
}
.xmq {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.xmq > span {
  display: inline-block;
  margin-right: 8px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  background: #e4e7fe;
  color: var(--ink);
  font-size: 12px;
}
.xmq:hover .xmq-track {
  animation-play-state: paused;
}

/* email links on the dark closing banner: white, not indigo-on-indigo */
.closing a[href^="mailto:"] {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.65);
}
.closing a[href^="mailto:"]:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── smooth page-to-page changes (Chrome/Edge/Safari): the pages cross-fade and the header stays put, no white flash ── */
@view-transition {
  navigation: auto;
}
.site-header {
  view-transition-name: site-header;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.16s;
}
::view-transition-group(site-header) {
  animation-duration: 0s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ═══ Call-back strip + quick-contact chat button (international pages) ═══ */
.icb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: linear-gradient(90deg, rgba(228, 231, 254, 0.97), rgba(250, 248, 255, 0.97), rgba(228, 231, 254, 0.97));
  border-top: 2px solid rgba(36, 56, 156, 0.3);
  box-shadow: 0 -10px 28px -16px rgba(23, 27, 43, 0.3);
  backdrop-filter: blur(8px);
}
.icb-form {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
}
.icb-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  flex: 1 1 260px;
}
.icb-in {
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 14px;
  border: 1.5px solid #c6c9e6;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
  flex: 1 1 150px;
}
.icb-country {
  flex: 1 1 210px;
  max-width: 260px;
}
.icb-in:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 56, 156, 0.14);
}
.icb-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 11px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(36, 56, 156, 0.25);
}
.icb-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.icb-x {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.icb-msg {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.88rem;
}
.icb-msg.ok {
  color: #0a7a46;
  font-weight: 600;
}
.icb-msg.err {
  color: #b3261e;
  font-weight: 600;
}
html.icb-on body {
  padding-bottom: 78px;
}
@media (max-width: 760px) {
  .icb-form {
    padding: 10px 16px;
  }
  .icb-text {
    flex-basis: 100%;
  }
  .icb-country {
    max-width: none;
  }
  html.icb-on body {
    padding-bottom: 190px;
  }
}
.iqc {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
html:not(.icb-on) .iqc {
  bottom: 24px;
}
@media (max-width: 760px) {
  .iqc {
    right: 14px;
    bottom: 210px;
  }
  html:not(.icb-on) .iqc {
    bottom: 18px;
  }
}
.iqc-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(36, 56, 156, 0.6);
  transition: transform 0.18s;
}
.iqc-btn:hover {
  transform: translateY(-2px);
}
.iqc-btn.open {
  background: #171b2b;
}
.iqc-menu {
  display: grid;
  gap: 8px;
}
.iqc-menu[hidden] {
  display: none;
}
.iqc-item {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 1px solid #dee1f8;
  border-radius: 16px;
  padding: 10px 16px 10px 10px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(23, 27, 43, 0.35);
  min-width: 250px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.iqc-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(36, 56, 156, 0.45);
  color: var(--ink);
}
.iqc-item strong {
  display: block;
  font-size: 0.92rem;
}
.iqc-item small {
  color: var(--muted);
  font-size: 0.78rem;
}
.iqc-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eef0ff;
  color: var(--teal);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex: none;
}
.cookie-banner {
  z-index: 60;
}
@media (max-width: 760px) {
  html.cookie-open .iqc {
    bottom: 340px;
  }
}

/* ═══ Phone field: country-code picker joined to the number box ═══ */
.mmph {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #c6c9e6;
  border-radius: 12px;
  min-width: 0;
}
.mmph:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 56, 156, 0.14);
}
.mmph-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  border: 0;
  border-right: 1px solid #dee1f8;
  background: #f3f2ff;
  border-radius: 10px 0 0 10px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.mmph-btn i {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  margin: -3px 0 0 2px;
}
.mmph-flag {
  font-size: 1.15rem;
  line-height: 1;
}
.mmph .mmph-in {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 11px 14px !important;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  width: auto !important;
}
.mmph .mmph-in:focus {
  outline: 0;
}
.mmph-list {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 70;
  width: min(320px, 92vw);
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #dee1f8;
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(23, 27, 43, 0.4);
  padding: 6px;
}
.mmph.up .mmph-list {
  top: auto;
  bottom: calc(100% + 6px);
}
.mmph-list[hidden] {
  display: none;
}
.mmph-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
.mmph-opt:hover,
.mmph-opt[aria-selected="true"] {
  background: #eef0ff;
}
.mmph-n {
  flex: 1;
}
.mmph-d {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.icb-ph {
  flex: 1 1 300px;
  min-width: 0;
  display: block;
}
.icb-name {
  flex: 1 1 170px;
}
@media (max-width: 760px) {
  .icb-ph,
  .icb-name {
    flex-basis: 100%;
  }
}

/* call-back strip: compact single line, like the main site's strip */
.icb-form {
  padding: 8px 40px;
  gap: 10px;
  flex-wrap: nowrap;
}
.icb-text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.92rem;
  margin-right: auto;
}
.icb-name {
  flex: 0 1 230px;
  padding: 9px 14px;
}
.icb-ph {
  flex: 0 1 360px;
}
.icb .mmph-btn {
  padding: 0 8px 0 12px;
}
.icb .mmph .mmph-in {
  padding: 9px 12px !important;
}
.icb-btn {
  padding: 10px 20px;
  flex: 0 0 auto;
}
.icb-msg {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: calc(100% + 6px);
  background: #fff;
  border: 1px solid #dee1f8;
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 10px 24px -12px rgba(23, 27, 43, 0.35);
  flex-basis: auto;
}
.icb-msg[hidden] {
  display: none;
}
html.icb-on body {
  padding-bottom: 64px;
}
@media (max-width: 760px) {
  .icb-form {
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 8px;
  }
  .icb-text {
    flex: 1 1 100%;
    font-size: 0.85rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .icb-name {
    flex: 1 1 100%;
  }
  .icb-ph {
    flex: 1 1 calc(100% - 140px);
  }
  .icb-btn {
    flex: 1 1 110px;
    padding: 10px 12px;
  }
  .icb-msg {
    left: 14px;
    right: 14px;
  }
  html.icb-on body {
    padding-bottom: 150px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .icb-name {
    flex-basis: 150px;
  }
  .icb-ph {
    flex-basis: 270px;
  }
  .icb-text {
    white-space: normal;
    max-width: 160px;
    font-size: 0.84rem;
  }
}

@media (max-width: 760px) {
  .icb-form {
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 8px;
    align-items: center;
  }
  .icb-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  .icb-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 0.85rem;
  }
  .icb-x {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px;
  }
  .icb:not(.open) .icb-name,
  .icb:not(.open) .icb-ph {
    display: none;
  }
  .icb.open .icb-name {
    order: 5;
    flex: 1 1 100%;
  }
  .icb.open .icb-ph {
    order: 6;
    flex: 1 1 100%;
  }
  html.icb-on body {
    padding-bottom: 64px;
  }
  html.icb-on body:has(.icb.open) {
    padding-bottom: 150px;
  }
}
.icb-x {
  margin-left: 0 !important;
}

/* same height as the main site's strip (62px) */
.icb-form {
  padding: 10px 40px;
}
.icb .mmph,
.icb-name,
.icb-btn {
  height: 42px;
  box-sizing: border-box;
}
.icb-name {
  padding: 0 14px;
  flex: 0 1 190px;
}
.icb-ph {
  flex: 0 1 340px;
}
.icb-btn {
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
}
.icb .mmph .mmph-in {
  padding: 0 12px !important;
}
@media (max-width: 760px) {
  .icb-form {
    padding: 8px 14px;
  }
  .icb-btn {
    height: 40px;
  }
  .icb .mmph,
  .icb-name {
    height: 44px;
  }
  .icb.open .icb-name {
    order: 6;
  }
  .icb.open .icb-ph {
    order: 5;
  }
}

/* ═══ Book via Chat panel ═══ */
.ichat {
  position: fixed;
  right: 22px;
  bottom: 96px;
  z-index: 80;
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 120px));
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dee1f8;
  border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(23, 27, 43, 0.55);
  overflow: hidden;
}
.ichat.show {
  display: flex;
}
.ichat-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--grad);
  color: #fff;
}
.ichat-h strong {
  display: block;
  font-size: 1rem;
}
.ichat-h small {
  opacity: 0.85;
  font-size: 0.78rem;
}
.ichat-x {
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
}
.ichat-log {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8f9ff;
  min-height: 140px;
}
.ichat-m {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.ichat-m.bot {
  background: #fff;
  border: 1px solid #dee1f8;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ichat-m.user {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ichat-in {
  padding: 10px 12px 12px;
  border-top: 1px solid #dee1f8;
  background: #fff;
  display: grid;
  gap: 8px;
}
.ichat-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ichat-field {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1.5px solid #c6c9e6;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.ichat-field:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 56, 156, 0.14);
}
.ichat-send {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  flex: none;
}
.ichat-form .mmph {
  flex: 1;
  min-width: 0;
}
.ichat-skip {
  border: 0;
  background: none;
  color: var(--teal);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.ichat-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
}
.ichat-opt {
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 14px;
  border: 1.5px solid #c6c9e6;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.ichat-opt:hover {
  border-color: var(--teal);
}
.ichat-opt.on {
  background: #eef0ff;
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}
.ichat-go {
  font: inherit;
  font-weight: 700;
  padding: 11px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
}
.ichat-go.wide {
  width: 100%;
}
.ichat-err {
  margin: 0;
  color: #b3261e;
  font-size: 0.85rem;
  font-weight: 600;
}
@media (max-width: 760px) {
  .ichat {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 76px;
  }
}
.ichat .ichat-h,
.ichat .ichat-h strong,
.ichat .ichat-h small {
  color: #fff !important;
}

/* counsellor cards: "View profile" and "Book with <name>" are the same size, centred, on one line */
.xc .mt-auto > .flex.gap-3 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}