/* ==========================================================================
   KPGE, Kamla Poddar Global Education
   ========================================================================== */

/* Sanford, self-hosted for the headings. Declared here rather than in
   fonts.css because that file is generated by tools/fetch-fonts.mjs. */
@font-face {
  font-family: "Sanford";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Sanford-Book.ttf) format("truetype");
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Colour. Crimson and gold are sampled from the logo lockup. Clay is the
     warm third the palette was missing: it carries small live things (counts,
     active states, the numerals) so gold is not doing two jobs. */
  --crimson:       #a81e32;
  --crimson-deep:  #7d1524;
  --crimson-wash:  #fbf1f2;
  /* The brand red for dark grounds. Same hue and saturation as --crimson with
     the lightness raised, because --crimson itself measures 2.47:1 on --ink and
     is unreadable there. */
  --crimson-light: #e1586c;
  /* Both of these are set to the lightest value that still clears WCAG AA on
     sand, the darkest ground either one is ever printed on. */
  --clay:          #ad4b29;
  --ink:           #1b1618;
  --ink-soft:      #55494c;
  --ink-faint:     #736669;
  --stone:         #f5f2ef;
  --sand:          #f0e8dd;   /* second ground, so alternating sections differ */
  --paper:         #ffffff;
  --gold:          #c4a24a;
  --gold-soft:     #e8dcba;
  --rule:          #e4dedb;

  /* Sanford on the headings, DM Sans on everything that has to be read. */
  --display: "Sanford", "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:    "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label:   var(--body);

  /* Scale, in round pixels. */
  --step--1: 14px;
  --step-0:  17px;
  --step-1:  20px;
  --step-2:  clamp(24px, 2.2vw, 30px);
  --step-3:  clamp(28px, 3vw, 40px);
  --step-4:  clamp(34px, 4vw, 50px);
  --step-5:  clamp(38px, 5vw, 62px);

  /* Space */
  --gap:      1.5rem;
  --section:  clamp(4rem, 3rem + 5vw, 7rem);
  --shell:    1220px;
  --shell-narrow: 780px;

  --header-h: 83px;   /* 82px bar plus its hairline, used to size the hero */

  --radius:   4px;
  --r-md:     8px;
  --r-lg:     14px;
  --r-pill:   999px;

  --shadow-soft: 0 4px 56px rgba(27, 22, 24, .10);
  --shadow-lift: 0 8px 30px rgba(27, 22, 24, .18);

  --ease:     cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson-deep); }

h1, h2 {
  font-family: var(--display);
  /* 500, not 600. Quicksand is already a wide, high-contrast-free geometric
     and it goes heavy fast at display sizes. */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5em;
}
/* Newsreader ships roman only here, so a browser would slant it itself and it
   looks wrong. Emphasis inside a heading changes colour instead. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--clay); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
  font: 600 0.9rem/1 var(--body);
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Small print. Sized down rather than tracked out, which is why none of it
   needs extra weight to stay legible. */
.brand__tag,
.header-phone,
.hero-record dt,
.enquiry-card__note,
.plate__label,
.stat-ledger__label,
.story__meta,
.breadcrumb,
.post-card__meta,
.pagination,
.wp-caption-text {
  font-weight: 500;
}

.prose th { font-weight: 600; }

/* --- Layout helpers ------------------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - 2.5rem, var(--shell-narrow)); }

.section { padding-block: var(--section); }
.section--stone { background: var(--stone); }
.section--sand  { background: var(--sand); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* A short line of orientation above a heading. Sentence case, no tracking,
   no rule trailing off it. */
.eyebrow {
  font-family: var(--label);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clay);
  margin: 0 0 0.6rem;
}
/* Pale gold rather than full gold on crimson: the full gold only reaches
   2.97:1 there. */
.eyebrow--light { color: var(--gold-soft); }
.eyebrow--center { text-align: center; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.section-head h2 { margin-bottom: 0.5rem; }
/* Sections whose heading sits beside its own intro rather than stacked above
   the grid, so not every band opens the same way. */
.section-head--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  max-width: none;
}
.section-head--wide h2 { margin-bottom: 0; }
@media (max-width: 820px) {
  .section-head--wide { grid-template-columns: 1fr; align-items: start; }
}

/* --- Buttons -------------------------------------------------------------- */
/* Enquiry honeypot: off-screen rather than display:none, so bots that skip
   hidden inputs still fill it. Never shown to a person. */
.kpge-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 14px 26px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}

.btn--primary { background: var(--crimson); color: #fff; }
.btn--primary:hover { background: var(--crimson-deep); color: #fff; }

.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #b08f38; color: var(--ink); }

.btn--block { width: 100%; justify-content: center; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 82px;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; flex-shrink: 0; }
.brand__logo { height: 50px; width: auto; display: block; }
.brand__mark { width: 46px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__tag {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav ul { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--crimson); background: var(--crimson-wash); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav a[aria-current="page"] { color: var(--crimson); }

/* dropdowns */
.nav li { position: relative; }
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--crimson);
  box-shadow: 0 18px 40px -22px rgba(27,22,24,.4);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- Destinations mega dropdown -------------------------------------------
   Seven countries in one tall column is a scan you have to work at. Laid out
   in columns with a flag against each name, it reads at a glance. */
.flag {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(27, 22, 24, .12);
}

.menu-item--destinations > .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.15rem 0.6rem;
  min-width: 440px;
  padding: 0.75rem;
}
.menu-item--destinations > .sub-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm, 4px);
  white-space: nowrap;
}
.menu-item--destinations > .sub-menu a:hover { background: var(--crimson-wash); }
.menu-item--destinations > .sub-menu a .flag { box-shadow: 0 0 0 1px rgba(27, 22, 24, .18); }

.header-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.header-phone {
  font-family: var(--label);
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--crimson); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  position: relative; transition: background .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
/* A photograph sits behind the crimson. The wash over it is deliberately heavy,
   and heaviest on the left where the headline and the figures sit: the text is
   white, so the composite behind it has to stay dark enough to keep clearing
   WCAG AA. It thins out towards the right, which is where the white form card
   covers most of the image anyway. */
.hero {
  position: relative;
  background-color: var(--crimson-deep);
  background-image:
    linear-gradient(
      100deg,
      rgba(125, 21, 36, .94) 0%,
      rgba(125, 21, 36, .88) 34%,
      rgba(140, 24, 41, .74) 58%,
      rgba(160, 28, 47, .60) 100%
    ),
    url("../img/home/hero-bg.jpg");
  background-size: auto, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3.5rem, 3rem + 5vw, 6.5rem) clamp(3.5rem, 3rem + 4vw, 5.5rem);
}
.hero > * { position: relative; z-index: 1; }


.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.hero h1 {
  font-size: var(--step-4);
  color: #fff;
  margin-bottom: 1.2rem;
  font-weight: 600;
  max-width: 15ch;
}
.hero h1 em { color: var(--gold-soft); }
.hero p.lede { color: rgba(255,255,255,.88); max-width: 50ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* The institution's credentials along the foot of the hero. Value first, then
   the label under it, which is the order these are read in. */
.hero-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1.75rem 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero-record div { display: flex; flex-direction: column-reverse; gap: 0.25rem; }
.hero-record dt,
.hero-record .record-label {
  font-family: var(--label);
  font-size: var(--step--1);
  /* .8 rather than .62, which measured 3.62:1 on crimson. */
  color: rgba(255,255,255,.8);
}
.hero-record dd,
.hero-record .record-value {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  margin: 0;
  color: #fff;
  line-height: 1;
}

/* Only while a figure is counting: equal-width digits stop the row shuffling
   sideways as the number grows. The settled state keeps proportional figures. */
.is-counting { font-variant-numeric: tabular-nums; }

/* --- Enquiry card (the site's conversion object) -------------------------- */
.enquiry-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.enquiry-card h2 {
  font-size: var(--step-2);
  margin-bottom: 0.25rem;
}
.enquiry-card__note {
  font-family: var(--label);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
}

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--stone);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--crimson);
  outline: none;
  box-shadow: 0 0 0 3px var(--crimson-wash);
}
.field textarea { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }

.form-consent {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}
.form-notice {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}
.form-notice--ok   { background: #edf7ee; border: 1px solid #bcdcc0; color: #22592b; }
.form-notice--fail { background: var(--crimson-wash); border: 1px solid #edc3c9; color: var(--crimson-deep); }
.hp-field { position: absolute; left: -9999px; }

/* --- The seven stages ------------------------------------------------------
   A numbered list, set as a list. These are steps in a sequence, not seven
   equivalent features, so they are not seven equivalent boxes. */
/* A horizontal timeline: numbered nodes on a line running left to right, one
   column per stage. Each stage draws its own connector to the next, which is
   what lets the track survive both horizontal scrolling and the switch to a
   vertical stack on phones. */
.docket {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 var(--docket-gap, 1.25rem);
  --docket-node: 44px;
}
.docket__stage {
  position: relative;
  padding: 0;
  border-bottom: 0;
}
/* the connector from this node to the next */
.docket__stage::before {
  content: "";
  position: absolute;
  top: calc(var(--docket-node) / 2 - 1px);
  left: var(--docket-node);
  right: calc(var(--docket-gap, 1.25rem) * -1);
  height: 2px;
  background: var(--gold-soft);
}
.docket__stage:last-child::before { display: none; }

.docket__no {
  position: relative;
  z-index: 1;
  width: var(--docket-node);
  height: var(--docket-node);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--crimson);
}
.docket__stage h3 {
  font-size: var(--step-0);
  margin: 1.1rem 0 0.35rem;
  line-height: 1.3;
}
.docket__stage p {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* Below the point where seven columns stop being readable, the track scrolls
   sideways rather than cramming or wrapping. */
@media (max-width: 1080px) {
  .docket {
    grid-auto-columns: 208px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
  }
  .docket__stage { scroll-snap-align: start; }
}

/* On a phone a sideways scroll for seven items is worse than a stack. */
@media (max-width: 620px) {
  .docket {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    row-gap: 0;
  }
  .docket__stage {
    display: grid;
    grid-template-columns: var(--docket-node) minmax(0, 1fr);
    column-gap: 1.1rem;
    padding-bottom: 1.9rem;
  }
  .docket__stage::before {
    top: var(--docket-node);
    bottom: 0;
    left: calc(var(--docket-node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .docket__stage h3 { margin: 0.55rem 0 0.3rem; }
  .docket__stage p { grid-column: 2; }
}

@media (max-width: 760px) {
  .docket { grid-template-columns: 1fr; }
}

/* --- Comparison filter ---------------------------------------------------- */
.compare {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 2rem;
}
.compare .eyebrow { margin-bottom: 1.4rem; }

.compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
}
.compare__field { display: flex; flex-direction: column; }
.compare__field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.compare__field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--stone);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.compare__field select:focus {
  background: #fff;
  border-color: var(--crimson);
  outline: none;
  box-shadow: 0 0 0 3px var(--crimson-wash);
}
.compare__hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.compare__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.compare__count {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--clay);
}
.compare__reset {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.compare__reset:hover { color: var(--crimson); }

.compare__empty {
  background: var(--crimson-wash);
  border: 1px solid #edc3c9;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  color: var(--crimson-deep);
}

/* --- Destination cards ----------------------------------------------------- */
.plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.plate {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow .22s var(--ease);
}
.plate:hover { box-shadow: var(--shadow-lift); color: inherit; }
.plate__figure {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--stone);
}
.plate__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.plate:hover .plate__figure img { transform: scale(1.04); }

.plate__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 1.3rem 0.9rem;
}
.plate__flag { width: 28px; height: 21px; }
.plate__name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
}
.plate__rows { padding: 0 1.3rem 1rem; margin: 0; }
.plate__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.plate__row:last-child { border-bottom: 0; }
.plate__label {
  font-family: var(--label);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.plate__value { font-size: var(--step--1); font-weight: 600; text-align: right; }

/* The whole card is a link, so there is no "Open the country guide" row on it.
   The name carries the affordance instead. */
.plate:hover .plate__name { text-decoration: underline; text-underline-offset: 3px; }

/* --- Compact card, used on the homepage -----------------------------------
   Written as lines rather than set as a table. The cost is the figure a student
   actually decides on, so it is the only thing given any size. */
.plate--compact .plate__head { padding-bottom: 0.35rem; }
.plate__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 1.3rem 1.3rem;
  margin-top: auto;
}
.plate__cost {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.plate__cost-figure {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}
.plate__cost-note { font-size: var(--step--1); color: var(--ink-faint); }
.plate__line { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }

.plates--lead .plate:first-child .plate__cost-figure { font-size: var(--step-2); }

/* On the homepage the first country leads at double size. The destinations
   page keeps every card equal, because that page exists to compare them. */
.plates--lead .plate:first-child .plate__name { font-size: var(--step-2); }

/* Two columns wide, one row tall. With seven destinations that fills a
   four-column grid exactly, which a 2x2 lead card does not. */
@media (min-width: 560px) {
  .plates--lead .plate:first-child { grid-column: span 2; }
  .plates--lead .plate:first-child .plate__figure { aspect-ratio: 21 / 8; }
}
@media (min-width: 900px) {
  .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .plates { grid-template-columns: 1fr; }
}

/* --- Figures ---------------------------------------------------------------
   Held to the shell width rather than run full-bleed: the source images are
   1024px wide and stretch visibly on a large monitor. */
.destination-figure {
  width: min(100% - 2.5rem, var(--shell));
  margin: 0 auto;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--stone);
}
.destination-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Optional banner on a normal page, sized like the country-guide one. */
.page-figure {
  width: min(100% - 2.5rem, var(--shell));
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--stone);
}
.page-figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .page-figure { aspect-ratio: 3 / 2; }
}

.why-figure {
  margin: 0 0 2rem;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--stone);
}
.why-figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .destination-figure { aspect-ratio: 3 / 2; }
}

/* --- Service list ----------------------------------------------------------
   Two columns of plain entries separated by rules. Deliberately not cards:
   the destinations above are already cards, and two card grids in a row is
   what makes a page read as a template. */
/* Tiles with an icon, and each one goes somewhere. Still not the destination
   card shape: no image, no data rows, and the icon carries the identity. */
.services {
  display: grid;
  /* Two across, not four. At four the copy is a 20-character column. */
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}
.service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 1.1rem;
  padding: 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service:hover {
  color: inherit;
  border-color: var(--crimson);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift, 0 18px 34px -24px rgba(27,22,24,.5));
}
.service__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--crimson-wash);
  color: var(--crimson);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.service__icon svg { width: 21px; height: 21px; }
.service:hover .service__icon { background: var(--crimson); color: #fff; }
.service__text { min-width: 0; }
.service h3 {
  font-size: var(--step-1);
  margin: 0 0 0.25rem;
  transition: color .2s var(--ease);
}
.service:hover h3 { color: var(--crimson); }
.service p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; line-height: 1.6; }

@media (max-width: 760px) {
  .services { grid-template-columns: 1fr; }
}

/* --- Split feature -------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
/* Capped so the label and its value stay readable as a pair. Across a full
   1220px row the eye loses the connection between the two. */
.stat-ledger { border-top: 1px solid var(--rule); max-width: 860px; }
.stat-ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.stat-ledger__label {
  font-family: var(--label);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 28ch;
}
.stat-ledger__value {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--crimson);
  white-space: nowrap;
}

/* The figures sit on a card lifted over the foot of the photograph, so the
   two halves of this section are one object rather than two stacked blocks. */
.split--overlap { align-items: start; }
.split--overlap .why-figure { margin-bottom: 0; }
.split--overlap .stat-ledger {
  position: relative;
  margin: -3.5rem 1.25rem 0 -1.5rem;
  padding: 0.25rem 1.5rem;
  background: var(--paper);
  border-top: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.split--overlap .stat-ledger__row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .split--overlap .stat-ledger { margin: -2.5rem 1rem 0; }
}

/* --- Testimonials ----------------------------------------------------------
   One quote leads and the other two sit beside it. Three equal boxes would
   imply the three are interchangeable, and they are not. */
.stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.story {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.story blockquote {
  margin: 0 0 1.4rem;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
}
.story__who {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.story__who-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.story__name { font-weight: 600; font-size: var(--step--1); }
.story__meta { font-family: var(--label); font-size: var(--step--1); color: var(--ink-faint); }

/* The portrait, or the student's initials until there is one. */
.story__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--stone);
}
.story__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--crimson);
  background: var(--crimson-wash);
  box-shadow: inset 0 0 0 1px rgba(168, 30, 50, .16);
}
@media (max-width: 820px) {
  .stories { grid-template-columns: 1fr; }
}

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  background:
    linear-gradient(rgba(22,17,19,.82), rgba(22,17,19,.9)),
    url(../img/home/hero-campus.jpg) center / cover no-repeat;
  color: #fff;
  padding-block: clamp(3.5rem, 3rem + 4vw, 5.5rem);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 52ch; }
.cta-band .btn--outline { border-color: rgba(255,255,255,.45); color: #fff; }
.cta-band .btn--outline:hover { background: #fff; color: var(--ink); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.3rem 2.5rem 1.3rem 0;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--label);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--clay);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 2.5rem 1.5rem 0; color: var(--ink-soft); }

/* --- Page hero (inner pages) ---------------------------------------------- */
.page-hero {
  background:
    linear-gradient(90deg, #f5f2ef 0%, rgba(245,242,239,.82) 46%, rgba(245,242,239,.45) 100%),
    url(../img/home/hero-campus.jpg) center right / cover no-repeat;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
}
@media (max-width: 640px) {
  /* Stronger wash on small screens so the title stays readable over the photo. */
  .page-hero {
    background:
      linear-gradient(90deg, #f5f2ef 0%, rgba(245,242,239,.90) 60%, rgba(245,242,239,.72) 100%),
      url(../img/home/hero-campus.jpg) center right / cover no-repeat;
  }
}
.page-hero h1 { max-width: 20ch; margin-bottom: 0.75rem; }
.breadcrumb {
  font-family: var(--label);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--crimson); }

/* --- Article / prose ------------------------------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose img { border-radius: var(--r-lg); margin-block: 2rem; }
.prose blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; margin-block: 2rem; font-size: 0.92rem; }
.prose th, .prose td { padding: 0.75rem 0.9rem; border: 1px solid var(--rule); text-align: left; }
.prose th { background: var(--stone); font-family: var(--label); font-size: var(--step--1); }

/* --- Post grid ------------------------------------------------------------ */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.post-card { display: flex; flex-direction: column; }
.post-card__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--stone);
  border: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__meta {
  font-family: var(--label);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.post-card__title {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--crimson); }
.post-card p { font-size: 0.92rem; color: var(--ink-soft); }

.pagination { margin-top: 3.5rem; display: flex; gap: 0.4rem; font-family: var(--label); font-size: 0.85rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
}
.pagination .page-numbers:hover { border-color: var(--crimson); color: var(--crimson); }
.pagination .current { background: var(--crimson); border-color: var(--crimson); color: #fff; }

/* --- Sitemap -------------------------------------------------------------- */
.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}
.sitemap__group h2 {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--crimson);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.sitemap__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.sitemap__group a { color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.sitemap__group a:hover { color: var(--crimson); text-decoration: underline; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding-block: clamp(3.5rem, 3rem + 3vw, 5rem) 2rem;
  font-size: 0.92rem;
}
/* Crimson newsletter footer, used site-wide. */
.site-footer--home { background: #881A2B; }
.site-footer--home .newsletter { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.site-footer--home .newsletter input {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff;
  border-radius: 8px; padding: 0.7rem 0.8rem; font: inherit;
}
.site-footer--home .newsletter input::placeholder { color: rgba(255,255,255,.55); }
.site-footer--home .newsletter button {
  border: 0; border-radius: 8px; padding: 0.7rem 1.1rem;
  background: #fff; color: var(--crimson); font-family: var(--label); font-weight: 700; cursor: pointer;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: rgba(255,255,255,.5); }
.footer-brand p { margin-top: 1.2rem; max-width: 34ch; }
/* The global link colour is crimson, which measures about 2.4:1 against the
   near-black footer. The phone and email here were inheriting it. */
.footer-brand a { color: rgba(255,255,255,.86); text-decoration: none; }
.footer-brand a:hover { color: #fff; text-decoration: underline; }
.footer-brand .brand:hover { text-decoration: none; }
/* An h2 in the markup, styled small. h2 straight to h4 announces as a missing
   heading level. */
.footer-col__title {
  font-family: var(--label);
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.15rem;
  line-height: 1.4;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

/* Footer columns collapse into accordions once they stack (see theme.js,
   which adds .footer-col--acc below 640px). The class is only ever present
   at that width, so these rules need no media query of their own. */
.footer-col--acc .footer-col__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.15);
  user-select: none;
}
.footer-col--acc .footer-col__title::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.footer-col--acc.is-open .footer-col__title::after { transform: translateY(2px) rotate(-135deg); }
.footer-col--acc .footer-col__title:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 3px; }
.footer-col--acc > ul { display: none; padding: 0.85rem 0 1rem; }
.footer-col--acc.is-open > ul { display: flex; }
/* Legal row: quiet, but on every page. */
.footer-legal { padding-top: 1.75rem; }
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a {
  font-size: 0.85rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.footer-legal a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--label);
  font-size: var(--step--1);
  color: rgba(255,255,255,.5);
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Responsive ----------------------------------------------------------- */
/* The phone number goes first when the header gets tight. It is repeated in
   the footer and on the contact page. */
@media (max-width: 1240px) {
  .header-phone { display: none; }
}

/* Below this the seven-item menu cannot sit beside the brand and the CTA
   without pushing the page wider than the screen, so it becomes a panel. */
@media (max-width: 1160px) {
  .hero-grid { grid-template-columns: 1fr; }
  .enquiry-card { max-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .header-bar { gap: 1rem; }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-cta { order: 2; }
  .header-cta .btn { display: none; }
  .nav {
    position: fixed;
    inset: 82px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    padding: 1rem 1.25rem 1.75rem;
    display: none;
    box-shadow: 0 24px 40px -30px rgba(0,0,0,.5);
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--crimson-wash);
    padding: 0 0 0 0.9rem; min-width: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .32s var(--ease);
  }
  .nav .menu-item-has-children.is-open > .sub-menu { max-height: 1400px; }
  /* Caret showing a group can be expanded */
  .nav .menu-item-has-children > a { position: relative; }
  .nav .menu-item-has-children > a::after {
    content: ""; position: absolute; right: 0.5rem; top: 50%; margin-top: -5px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg); transition: transform .2s var(--ease);
  }
  .nav .menu-item-has-children.is-open > a::after { transform: rotate(-135deg); margin-top: -2px; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .header-cta .btn { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .docket__stage { border-right: 0; }
}

/* Small phones: the brand lockup has to lose its descriptor line or the
   header alone is wider than the screen. */
@media (max-width: 400px) {
  .shell { width: min(100% - 1.75rem, var(--shell)); }
  .header-bar { gap: 0.5rem; }
  .brand { gap: 0.6rem; }
  .brand__mark { width: 38px; }
  .brand__logo { height: 44px; }
  .brand__tag { display: none; }
}

/* --- Hero: one screenful on a desktop --------------------------------------
   Above 1160px the hero is the two-column layout, and the whole of it should be
   readable without scrolling: headline, buttons and the entire booking form.
   The hero is therefore sized to exactly one screen and its contents tighten as
   the screen gets shorter, rather than the block keeping a fixed height and
   running off the bottom. Below 1160px the columns stack and this does not
   apply, because one screenful is not a sensible target for a stacked hero. */
@media (min-width: 1161px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1.25rem, 4vh, 4rem);
  }
  /* No flex-grow here. The shell sets its own width and centres itself with
     margin-inline:auto; letting it grow would override that and run the hero
     content to both edges of the screen. */
  .hero-grid { flex: 0 1 auto; align-items: center; }
}

/* Laptop heights: tighten the form before anything else, since it is the tall
   half of the hero. */
@media (min-width: 1161px) and (max-height: 900px) {
  .hero-grid { gap: clamp(2rem, 4vw, 3.5rem); }
  .enquiry-card { padding: 1.5rem 1.6rem; }
  .enquiry-card h2 { font-size: var(--step-1); }
  .enquiry-card__note { margin-bottom: 0.9rem; }
  .field { margin-bottom: 0.7rem; }
  .field label { margin-bottom: 0.25rem; }
  .field input, .field select, .field textarea { padding: 0.6rem 0.75rem; }
  .field textarea { min-height: 64px; }
  .form-consent { margin-top: 0.7rem; }
  .hero-record { margin-top: 1.75rem; padding-top: 1.25rem; }
}

/* Shorter still: bring the headline and the credential strip down too. */
@media (min-width: 1161px) and (max-height: 800px) {
  .hero h1 { font-size: clamp(30px, 3.2vw, 40px); margin-bottom: 0.75rem; }
  .hero p.lede { font-size: var(--step-0); }
  .hero-actions { margin-top: 1.25rem; }
  .hero-record {
    margin-top: 1.25rem;
    padding-top: 1rem;
    gap: 0.9rem 1rem;
  }
  .hero-record dd { font-size: var(--step-1); }
  .hero-record dt { font-size: 13px; }
  .field { margin-bottom: 0.5rem; }
  .field textarea { min-height: 52px; }
  .enquiry-card { padding: 1.25rem 1.4rem; }
}

/* The shortest laptops. The message box and the credential strip are the two
   things that can go without losing a field or a figure. */
@media (min-width: 1161px) and (max-height: 700px) {
  .hero h1 { font-size: clamp(27px, 2.8vw, 34px); }
  .hero p.lede { font-size: var(--step--1); }
  .hero-record { margin-top: 1rem; padding-top: 0.8rem; gap: 0.6rem 1rem; }
  .hero-record dd { font-size: var(--step-0); }
  .hero-record dt { font-size: 12px; }
  .field textarea { min-height: 44px; }
  .field { margin-bottom: 0.4rem; }
  .btn { padding: 11px 22px; }
  .form-consent { font-size: 12px; margin-top: 0.5rem; }
}

/* 1366x768 and 1280x720, which after browser chrome leave around 600px. This is
   the floor: below it the hero scrolls rather than being squeezed further. */
@media (min-width: 1161px) and (max-height: 660px) {
  .hero { padding-block: 0.7rem; }
  .hero .eyebrow { margin-bottom: 0.35rem; }
  /* Let the headline run wider so it wraps to two lines instead of three.
     Vertical room is scarcer than horizontal room at this shape. */
  .hero h1 { font-size: 26px; margin-bottom: 0.5rem; max-width: 24ch; }
  .hero p.lede { line-height: 1.45; }
  .hero-record dt { font-size: 11px; }
  .form-consent { font-size: 11px; }
  .hero-actions { margin-top: 0.9rem; gap: 0.6rem; }
  .hero-record { margin-top: 0.85rem; padding-top: 0.65rem; gap: 0.4rem 1rem; }
  .hero-record dd { font-size: var(--step--1); }
  .enquiry-card { padding: 1rem 1.15rem; }
  .enquiry-card h2 { font-size: var(--step-0); }
  .enquiry-card__note { margin-bottom: 0.5rem; }
  .field { margin-bottom: 0.3rem; }
  .field input, .field select, .field textarea { padding: 0.5rem 0.7rem; }
  .field textarea { min-height: 36px; }
  .btn { padding: 9px 18px; font-size: 15px; }
  .form-consent { margin-top: 0.4rem; }
}

/* --- WordPress core classes ---------------------------------------------- */
.alignleft  { float: left;  margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: 0.8rem; color: var(--ink-faint); font-family: var(--label); }
.sticky, .gallery-caption, .bypostauthor {}

/* Fixed vertical social rail, left edge ------------------------------------ */
.social-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.45rem;
  background: #fff;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 12px 34px -16px rgba(27,22,24,.4);
}
.social-rail a {
  display: grid;
  place-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--crimson);
  transition: color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.social-rail a:hover { color: var(--crimson-deep); background: var(--crimson-wash); transform: translateY(-1px); }
.social-rail svg { width: 19px; height: 19px; display: block; }
@media (max-width: 900px) { .social-rail { display: none; } }

/* Header CTA in uppercase */
.header-cta .btn { text-transform: uppercase; letter-spacing: 0.04em; }

/* Confirmation for the footer sign-up, sitting where the form does. */
.newsletter__note {
  margin: 0 0 .5rem;
  font-size: .86rem;
  color: rgba(255, 255, 255, .82);
}