/* British Council – One Calendar concept
   Homepage (path chooser), the three sector pages and the consultation booking
   form. Extends css/styles.css — every colour here comes from the :root tokens
   defined there, nothing new is introduced. */

/* ===== Brochure design language =====

   Taken from the two "English Solutions" brochures (27 August 2026). Their
   visual grammar is narrow and worth stating plainly, because almost every
   rule below follows from it:

     - photographs are hard-edged rectangles that butt straight against colour.
       No rounded corners, no drop shadows, no gradient scrims over the image;
     - solid flat blocks of violet carry the headlines in white, and overlap
       the photograph rather than sitting beside it;
     - red is a label colour only — small tabs and badges, never a large field;
     - blocks of colour carry a faint tone-on-tone circle as texture;
     - everything is rectangles butting against rectangles: a collage, not cards.

   The first pass at this homepage used rounded cards, soft shadows and a
   blurred colour glow behind the hero. That is a different design language
   altogether, so it has been taken out rather than blended.

   --violet-block is matched by eye against the rendered brochure covers. The
   PDFs are print artwork and their content streams would not decompress here,
   so it could not be sampled exactly; it is deliberately darker than the
   site's --purple, which is too light to carry white body text. */
:root {
  --violet-block: #5b16b5;
  --violet-block-2: #4a0f99;
}

/* Kept for the Business Development Executive cards on the consultation page,
   where a per-person accent genuinely distinguishes one card from the next. */
.acc-cyan     { --acc: var(--cyan); }
.acc-purple   { --acc: var(--purple); }
.acc-orange   { --acc: var(--orange); }
.acc-green    { --acc: var(--green); }
.acc-magenta  { --acc: var(--magenta); }
.acc-red      { --acc: var(--red); }

/* The faint circle the brochures drop into their colour fields. */
.tone-circles {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tone-circles::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  inset-block-start: -160px;
  inset-inline-end: -140px;
  pointer-events: none;
}

/* ===========================================================================
   HOMEPAGE
   =========================================================================== */

.home-hero {
  background: var(--white);
  position: relative;
}
.home-hero .container {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

/* The violet field carrying the headline. It overlaps the photograph, which is
   the single move that makes a British Council cover read as one. */
.home-hero-copy {
  background: var(--violet-block);
  color: var(--white);
  padding: 46px 44px 48px;
  align-self: center;
  position: relative;
  z-index: 2;
  margin-inline-end: -56px;
}
.home-hero h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.5px;
  margin-top: 16px;
}
.home-hero .lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.home-hero-ctas { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.home-hero-note { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }

/* The red badge the brochures park in the top corner of the cover. */
.hero-badge {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 7px 13px;
}

.home-hero-media { position: relative; z-index: 1; }
.home-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* The rainbow keyline stays — it is the one motif carried over from the deck
   this site was originally built from, and the brochures use a red rule in the
   same position. */
.home-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cyan-bright) 0 16.6%, var(--green) 0 33.3%,
              var(--purple) 0 50%, var(--red) 0 66.6%, var(--magenta) 0 83.3%, var(--orange) 0 100%);
  z-index: 3;
}

/* ---- The six paths ----
   Three across and two rows on desktop, and every row lines up: each card is
   a subgrid of the page grid, so photographs, violet labels and bodies share
   row heights with their neighbours even when one title wraps to two lines. */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 18px;
  margin-top: 24px;
}
@media (max-width: 1000px) { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .path-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hard-edged, flat, no shadow. The card is a stack of rectangles: photograph,
   violet label, white body. */
.path-card {
  background: var(--white);
  border-radius: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
  position: relative;
  border-top: 5px solid var(--red);
  transition: none;
}
@supports (grid-template-rows: subgrid) {
  .path-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.path-card:focus-within { outline: 3px solid var(--violet-block); outline-offset: 2px; }

/* The photograph is taken out of flow so a tall source image can never
   stretch its card: every photo is the same 16:9 box. */
.path-media { position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: var(--grey-100); }
.path-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The label straddles the join between photograph and body, exactly as the
   "Primary English" / "Secondary English" tabs do in the schools brochure. */
.path-label {
  background: var(--violet-block);
  color: var(--white);
  padding: 11px 16px;
  /* Room for a two-line title on every card, so both rows end up the same height. */
  min-height: calc(2 * 1.25 * 15.5px + 22px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.path-label .msym { font-size: 21px; flex: none; }
.path-label h3 { font-size: 15.5px; font-weight: 800; line-height: 1.25; }

.path-body { padding: 14px 16px 16px; display: flex; flex-direction: column; background: var(--grey-50); }
.path-body > p { font-size: 13.3px; color: var(--grey-800); line-height: 1.5; }
.path-points { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.path-points li {
  font-size: 12.8px;
  color: var(--grey-800);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}
/* Small square bullets, the way the brochures set their outcome lists. */
.path-points .msym { font-size: 14px; color: var(--violet-block); flex: none; margin-top: 1px; }

.path-cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--violet-block);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.path-card:hover .path-cta { text-decoration: underline; }
.path-card:hover .path-cta .msym { transform: translateX(3px); }
html[dir="rtl"] .path-card:hover .path-cta .msym { transform: translateX(-3px); }
.path-cta .msym { font-size: 18px; transition: transform 0.18s ease; }
/* The whole card is the link target; the visible label is inside it. */
.path-link { position: absolute; inset: 0; z-index: 3; }

/* ---- Trust band ---- */
.trust-band { background: var(--violet-block); color: var(--white); padding: 44px 0; }
.trust-band h2 { font-size: 22px; font-weight: 800; }
.trust-band p { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; margin-top: 8px; max-width: 640px; line-height: 1.55; }
.trust-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 22px;
  margin-top: 26px;
}
.trust-nums .num { font-size: 32px; font-weight: 800; line-height: 1; color: var(--white); }
.trust-nums div { border-top: 3px solid var(--red); padding-top: 14px; }
.trust-nums .lbl { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); margin-top: 8px; line-height: 1.45; }

/* ---- B2B invitation band ---- */
.b2b-band {
  background: var(--ink);
  border-radius: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
}
.b2b-band-copy { padding: 34px; align-self: center; color: var(--white); }
.b2b-band-copy h2 { font-size: 23px; font-weight: 800; color: var(--white); }
.b2b-band-copy p { font-size: 14.5px; color: rgba(255, 255, 255, 0.8); margin-top: 10px; line-height: 1.6; }
.b2b-band-copy .btn { margin-top: 18px; }
.b2b-band-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 0; }


/* ===========================================================================
   SECTOR PAGES (corporates / higher education / schools)
   =========================================================================== */

/* Same brochure grammar as the homepage: a violet field carrying the headline,
   overlapping a hard-edged photograph. No radius, no shadow, no scrim. */
.sector-hero {
  background: var(--white);
  color: var(--white);
  position: relative;
}
.sector-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}
.sector-hero-copy {
  background: var(--violet-block);
  padding: 40px 40px 44px;
  align-self: center;
  position: relative;
  z-index: 2;
  margin-inline-end: -48px;
}
.sector-hero h1 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-top: 14px; }
.sector-hero .lead { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.sector-hero-ctas { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.sector-hero-media { position: relative; z-index: 1; }
.sector-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.stat-strip {
  background: var(--ink-2);
  color: var(--white);
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-strip .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px; }
.stat-strip .num { font-size: 26px; font-weight: 800; color: var(--cyan-bright); }
.stat-strip .lbl { font-size: 12px; color: rgba(255, 255, 255, 0.68); margin-top: 5px; line-height: 1.4; }

/* Two-column "icon + copy" list used for Why / benefits / support blocks. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 22px; }
.feature {
  display: flex;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  padding: 18px;
}
.feature .fi {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grey-100);
  color: var(--ink-3);
}
.feature .fi .msym { font-size: 22px; }
.feature h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.feature p { font-size: 13.5px; color: var(--grey-600); margin-top: 6px; line-height: 1.55; }

/* Three-step partnership approach. */
.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 22px; }
.approach-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  border-top: 4px solid var(--acc, var(--cyan));
  box-shadow: var(--shadow);
}
.approach-step .n {
  font-size: 12px;
  font-weight: 800;
  color: var(--acc, var(--cyan));
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.approach-step h3 { font-size: 16.5px; font-weight: 800; color: var(--ink); margin-top: 6px; }
.approach-step ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.approach-step li { font-size: 13.3px; color: var(--grey-800); display: flex; gap: 8px; line-height: 1.45; }
.approach-step li .msym { font-size: 16px; color: var(--acc, var(--cyan)); flex: none; }

/* Course / product cards with an optional outcomes list. */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 22px; }
.course-card {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.course-card .ci {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--ink-3); color: var(--white);
  margin-bottom: 12px;
}
.course-card .ci .msym { font-size: 21px; }
.course-card h3 { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.course-card > p { font-size: 13.5px; color: var(--grey-600); margin-top: 8px; line-height: 1.55; }
.outcomes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey-100); }
.outcomes .oh { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--grey-600); }
.outcomes ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.outcomes li { font-size: 13px; color: var(--grey-800); display: flex; gap: 7px; line-height: 1.45; }
.outcomes li .msym { font-size: 15px; color: var(--green); flex: none; margin-top: 1px; }

/* Comparison tables (CEFR, assessment types, choosing a course). */
.table-wrap { overflow-x: auto; margin-top: 20px; border-radius: var(--radius); border: 1px solid var(--grey-200); background: var(--white); }
table.b2b-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
table.b2b-table th, table.b2b-table td {
  text-align: start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: top;
  line-height: 1.45;
}
table.b2b-table thead th {
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: 12.5px;
  position: sticky;
  top: 0;
}
table.b2b-table tbody tr:last-child td { border-bottom: none; }
table.b2b-table tbody tr:nth-child(even) { background: var(--grey-50); }
table.b2b-table td:first-child, table.b2b-table th:first-child { font-weight: 700; color: var(--ink); }
.band-cell { font-weight: 800; color: var(--ink-3); }
.table-note { font-size: 12px; color: var(--grey-600); margin-top: 10px; }

/* Success stories. */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; margin-top: 22px; }
.story {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  border-inline-start: 4px solid var(--acc, var(--cyan));
}
.story h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.story .place { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--acc, var(--cyan)); margin-top: 3px; }
.story h4 { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--grey-600); margin-top: 16px; }
.story p { font-size: 13.3px; color: var(--grey-800); line-height: 1.55; margin-top: 7px; }
.story ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.story li { font-size: 13.2px; color: var(--grey-800); display: flex; gap: 7px; line-height: 1.45; }
.story li .msym { font-size: 15px; color: var(--acc, var(--cyan)); flex: none; margin-top: 1px; }
.story-metrics {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grey-100);
}
.story-metrics .num { font-size: 24px; font-weight: 800; color: var(--acc, var(--cyan)); line-height: 1; }
.story-metrics .lbl { font-size: 11.5px; color: var(--grey-600); margin-top: 5px; max-width: 150px; line-height: 1.35; }

/* Qualification chips. */
.qual-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.qual-chips span {
  background: var(--white);
  border: 1.5px solid var(--ink-3);
  color: var(--ink-3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
}

.sector-cta {
  background: linear-gradient(120deg, var(--ink-3), var(--ink));
  color: var(--white);
  border-radius: 18px;
  padding: 34px;
  text-align: center;
  margin-top: 34px;
}
.sector-cta h2 { font-size: 24px; font-weight: 800; }
.sector-cta p { color: rgba(255, 255, 255, 0.82); margin: 10px auto 20px; max-width: 520px; font-size: 15px; line-height: 1.55; }

/* ===========================================================================
   CONSULTATION BOOKING
   =========================================================================== */

.consult-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }

.panel {
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 20px; }
.panel > h2 { font-size: 19px; font-weight: 800; color: var(--ink); }
.panel > p.sub { font-size: 13.5px; color: var(--grey-600); margin-top: 6px; line-height: 1.55; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--grey-800); margin-bottom: 5px; }
.field label .req { color: var(--red); margin-inline-start: 2px; }
.field input, .field select {
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(51, 16, 138, 0.12); }
.field .hint { font-size: 11.5px; color: var(--grey-600); margin-top: 5px; line-height: 1.4; }
.field .err { font-size: 12px; color: var(--red); font-weight: 700; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select { border-color: var(--red); background: #fff6f7; }
.field.invalid .err { display: block; }

/* Radio group for "Interested in" — reads as cards, behaves as radios. */
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.radio-card {
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-800);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  line-height: 1.35;
}
.radio-card:hover { border-color: var(--ink-3); }
.radio-card input { accent-color: var(--ink-3); flex: none; width: 17px; height: 17px; }
.radio-card.checked { border-color: var(--ink-3); background: #f4f0ff; color: var(--ink-3); font-weight: 700; }

.consent-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 12.8px; color: var(--grey-800); line-height: 1.5; }
.consent-row input { accent-color: var(--ink-3); margin-top: 2px; width: 17px; height: 17px; flex: none; }
.form-error {
  display: none;
  margin-top: 16px;
  background: #fff2f4;
  border: 1px solid #f6c6ce;
  color: #8c0020;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
}
.form-error.show { display: block; }

/* ---- Matched Business Development Executive ---- */
.consult-layout .bde-card { margin-top: 20px; }
.bde-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  padding: 20px;
  border-top: 4px solid var(--acc, var(--cyan));
  box-shadow: var(--shadow);
}
.bde-avatar {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--acc, var(--cyan));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
}
.bde-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); }
.bde-card .role { font-size: 13px; color: var(--acc, var(--cyan)); font-weight: 700; margin-top: 3px; line-height: 1.4; }
.bde-card .bio { font-size: 13.2px; color: var(--grey-600); margin-top: 10px; line-height: 1.55; }
.bde-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.bde-meta div { font-size: 12.3px; color: var(--grey-800); display: flex; align-items: center; gap: 6px; }
.bde-meta .msym { font-size: 16px; color: var(--grey-400); }
.bde-meta b { font-weight: 700; }
.bde-note {
  margin-top: 14px;
  background: var(--grey-50);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.3px;
  color: var(--grey-800);
  line-height: 1.45;
}

/* ---- Slot calendar ---- */
.cal-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.cal-week-nav button {
  background: var(--white);
  border: 1.5px solid var(--grey-200);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cal-week-nav button:hover:not([disabled]) { border-color: var(--ink-3); }
.cal-week-nav button[disabled] { opacity: 0.4; cursor: not-allowed; }
.cal-week-label { font-size: 14px; font-weight: 800; color: var(--ink); }

.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.slot-day { min-width: 0; }
.slot-day-head {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px 10px 0 0;
  background: var(--grey-100);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.slot-day-head small { display: block; font-weight: 600; color: var(--grey-600); font-size: 11px; }
.slot-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.slot {
  border: 1.5px solid var(--grey-200);
  background: var(--white);
  border-radius: 9px;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  width: 100%;
}
.slot small { display: block; font-weight: 600; font-size: 10.5px; color: var(--grey-600); margin-top: 2px; }
.slot:hover:not([disabled]) { border-color: var(--acc, var(--cyan)); background: var(--grey-50); }
.slot.selected { background: var(--ink-3); border-color: var(--ink-3); color: var(--white); }
.slot.selected small { color: rgba(255, 255, 255, 0.8); }
.slot[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.slot-empty { font-size: 11.5px; color: var(--grey-400); text-align: center; padding: 12px 2px; line-height: 1.4; }

.summary-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.summary-list div { display: flex; gap: 10px; font-size: 13.5px; align-items: flex-start; }
.summary-list dt, .summary-list .k {
  flex: none; width: 84px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--grey-600); padding-top: 2px;
}
.summary-list .v { color: var(--ink); font-weight: 700; line-height: 1.45; }

.done-box {
  background: linear-gradient(120deg, var(--ink-3), var(--ink));
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.done-box .tick {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green); color: var(--white);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.done-box .tick .msym { font-size: 30px; }
.done-box h2 { font-size: 22px; font-weight: 800; }
.done-box p { color: rgba(255, 255, 255, 0.82); font-size: 14px; margin-top: 10px; line-height: 1.55; }
.done-ref {
  display: inline-block; margin-top: 16px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
}

.booking-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--grey-100);
}
.booking-row:last-child { border-bottom: none; }
.booking-row .when { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.booking-row .who { font-size: 12.5px; color: var(--grey-600); margin-top: 3px; line-height: 1.4; }
.booking-row .cancel-btn {
  margin-inline-start: auto; flex: none;
  background: none; border: none; color: var(--red);
  font-size: 12.5px; font-weight: 700; text-decoration: underline; padding: 2px;
}

.aside-card { background: var(--white); border: 1px solid var(--grey-100); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.aside-card + .aside-card { margin-top: 18px; }
.aside-card h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.aside-step { display: flex; gap: 12px; margin-top: 16px; }
.aside-step .si { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--grey-100); color: var(--ink-3); display: grid; place-items: center; }
.aside-step .si .msym { font-size: 19px; }
.aside-step h4 { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.aside-step p { font-size: 12.5px; color: var(--grey-600); margin-top: 4px; line-height: 1.5; }

/* ===========================================================================
   RESPONSIVE
   These overrides come last so they win the cascade — a media query adds no
   specificity of its own, so an override placed above the rule it overrides
   simply loses.
   =========================================================================== */

@media (max-width: 1040px) {
  .consult-layout { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
}

@media (max-width: 900px) {
  .home-hero .container,
  .sector-hero .container,
  .b2b-band { grid-template-columns: 1fr; gap: 0; }
  .home-hero::after { height: 4px; }
  .home-hero h1 { font-size: 30px; }
  .sector-hero h1 { font-size: 28px; }

  /* Stacked, the photograph goes above the violet field and the overlap that
     works side by side would just crop the top of the headline — so drop it
     and let the two blocks butt edge to edge instead. */
  .home-hero-copy,
  .sector-hero-copy { margin-inline-end: 0; padding: 32px 24px 36px; }
  .home-hero-media,
  .sector-hero-media { order: -1; }
  .home-hero-media img { min-height: 260px; }
  .sector-hero-media img { min-height: 240px; }

  .b2b-band-media { order: -1; }
  .b2b-band-media img { min-height: 200px; }
}

@media (max-width: 620px) {
  /* The date range is longer than the two buttons flanking it, so give it its
     own line rather than letting it wrap into a three-line column. */
  .cal-week-nav { flex-wrap: wrap; }
  .cal-week-label { order: -1; width: 100%; text-align: center; }

  .field-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 26px; }
  .story-metrics { gap: 14px; }
  .story-metrics .num { font-size: 21px; }
  .sector-cta { padding: 24px 20px; }
  .panel { padding: 18px; }
}