/* =========================================================================
   UK Therapy Guild Counselling Services
   Front page stylesheet - draft
   Prefix: .ucs-
   No inline styles anywhere. All colour and spacing via custom properties.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Brand - warm earth: umber base, bronze, sage, gold. Chosen by Nichola and Steve,
     4 to 10 Oct 2026, from her office mural and the brand graphic. The logo (navy, green
     and gold swans) always sits on cream, so it is not the source of these tokens.
     Contrast figures are against cream or umber-deep as noted. */
  --ucs-umber:       #3a2212;
  --ucs-umber-deep:  #241508;
  --ucs-umber-soft:  #4e2f1a;
  --ucs-bronze:      #7f5330;   /* links, focus text, eyebrows on cream: 6.2:1 */
  --ucs-sage:        #55634a;   /* trust icons, consent ticks, thank-you icon: 6.1:1 on cream */
  --ucs-amber:       #e9a94a;   /* hero accent and note icon: 8.6:1 on umber-deep */
  --ucs-gold:        #c9a85e;   /* buttons, eyebrows on dark: 7.3:1 on umber-deep */
  --ucs-gold-soft:   #e2d0a6;
  --ucs-gold-deep:   #7f5330;   /* same as bronze; was #96793c at 3.9:1 on cream, a WCAG fail */

  /* Surfaces */
  --ucs-cream:       #fbf7f0;
  --ucs-sand:        #f4ebdd;
  --ucs-white:       #ffffff;

  /* Text */
  --ucs-ink:         #2a1d14;
  --ucs-ink-soft:    #5c4b3e;
  --ucs-on-dark:     #f6efe3;
  --ucs-on-dark-mut: rgba(246, 239, 227, 0.80);

  /* Lines */
  --ucs-line:        rgba(58, 34, 18, 0.12);
  --ucs-line-gold:   rgba(201, 168, 94, 0.40);
  --ucs-line-dark:   rgba(246, 239, 227, 0.16);

  /* Feedback */
  --ucs-error:       #a3342b;
  --ucs-success:     #4f6b3f;

  /* Shape */
  --ucs-radius-sm:   8px;
  --ucs-radius-md:   14px;
  --ucs-radius-lg:   22px;
  --ucs-radius-pill: 999px;

  /* Shadow */
  --ucs-shadow-sm:   0 2px 8px rgba(58, 34, 18, 0.06);
  --ucs-shadow-md:   0 10px 30px rgba(58, 34, 18, 0.10);
  --ucs-shadow-lg:   0 26px 60px rgba(58, 34, 18, 0.18);

  /* Rhythm */
  --ucs-gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --ucs-section-y:   clamp(3.5rem, 9vw, 7rem);
  --ucs-max:         1180px;
  --ucs-measure:     68ch;

  /* Motion */
  --ucs-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ucs-speed:       0.45s;

  /* Type */
  --ucs-font-head:   'Lora', 'Georgia', 'Times New Roman', serif;
  --ucs-font-body:   'Lato', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ucs-cream);
  color: var(--ucs-ink);
  font-family: var(--ucs-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ucs-font-head);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ucs-umber);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p {
  margin: 0 0 1.1em;
  max-width: var(--ucs-measure);
}

a {
  color: var(--ucs-bronze);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--ucs-speed) var(--ucs-ease);
}

a:hover,
a:focus-visible {
  color: var(--ucs-umber);
}

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

:focus-visible {
  outline: 3px solid var(--ucs-gold);
  outline-offset: 3px;
  border-radius: var(--ucs-radius-sm);
}

/* -------------------------------------------------------------------------
   3. Helpers
   ------------------------------------------------------------------------- */

.ucs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ucs-skip {
  position: absolute;
  top: -100%;
  left: var(--ucs-gutter);
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background-color: var(--ucs-umber);
  color: var(--ucs-on-dark);
  border-radius: 0 0 var(--ucs-radius-md) var(--ucs-radius-md);
  text-decoration: none;
  font-weight: 700;
}

.ucs-skip:focus {
  top: 0;
  color: var(--ucs-on-dark);
}

.ucs-shell {
  width: 100%;
  max-width: var(--ucs-max);
  margin-inline: auto;
  padding-inline: var(--ucs-gutter);
}

.ucs-section {
  padding-block: var(--ucs-section-y);
  position: relative;
}

.ucs-section--tight {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.ucs-section--sand {
  background-color: var(--ucs-sand);
}

.ucs-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ucs-gold-deep);
  margin-bottom: 0.85rem;
}

.ucs-eyebrow--on-dark {
  color: var(--ucs-gold);
}

.ucs-lede {
  font-size: clamp(1.06rem, 1.7vw, 1.22rem);
  color: var(--ucs-ink-soft);
  max-width: 60ch;
}

.ucs-section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.ucs-section__head--centre {
  margin-inline: auto;
  text-align: center;
}

.ucs-section__head--centre p {
  margin-inline: auto;
}

.ucs-section__head--centre .ucs-btn-group {
  justify-content: center;
}

/* A single closing line under a card grid: the counsellors' promise, the partners */
.ucs-section__note {
  max-width: 60ch;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  text-align: center;
  color: var(--ucs-ink-soft);
}

/* Two-column prose split */
.ucs-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

@media (min-width: 58em) {
  .ucs-split {
    grid-template-columns: 1fr 1fr;
  }
}

.ucs-quote-card {
  background-color: var(--ucs-sand);
  border-radius: var(--ucs-radius-lg);
  border-left: 3px solid var(--ucs-gold);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.ucs-quote-card h3 {
  margin-bottom: 0.6em;
}

.ucs-quote-card p {
  color: var(--ucs-ink-soft);
  font-size: 0.99rem;
}

.ucs-quote-card__close {
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ucs-line-gold);
  font-family: var(--ucs-font-head);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--ucs-umber);
}

/* Photograph in a two-column split */
.ucs-portrait {
  margin: 0;
  border-radius: var(--ucs-radius-lg);
  overflow: hidden;
  box-shadow: var(--ucs-shadow-md);
  background-color: var(--ucs-sand);
}

.ucs-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.ucs-portrait figcaption {
  padding: 0.9rem 1.25rem;
  background-color: var(--ucs-white);
  border-top: 1px solid var(--ucs-line-gold);
  font-size: 0.88rem;
  color: var(--ucs-ink-soft);
}

/* On wide screens the photo tracks the prose beside it rather than floating. */
@media (min-width: 58em) {
  .ucs-split--media {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
  }
}

.ucs-quote-card--wide {
  max-width: 58rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-inline: auto;
}

/* When the wide quote card is a section of its own, the section padding does the spacing */
.ucs-section--tight .ucs-quote-card--wide {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */

.ucs-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.ucs-btn {
  --ucs-btn-bg: var(--ucs-gold);
  --ucs-btn-fg: var(--ucs-umber-deep);
  --ucs-btn-edge: var(--ucs-gold);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  min-height: 3rem;
  border: 1px solid var(--ucs-btn-edge);
  border-radius: var(--ucs-radius-pill);
  background-color: var(--ucs-btn-bg);
  color: var(--ucs-btn-fg);
  font-family: var(--ucs-font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--ucs-speed) var(--ucs-ease),
    box-shadow var(--ucs-speed) var(--ucs-ease),
    background-color var(--ucs-speed) var(--ucs-ease),
    color var(--ucs-speed) var(--ucs-ease);
}

.ucs-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  transform: translateX(-120%);
  transition: transform 0.75s var(--ucs-ease);
  pointer-events: none;
}

.ucs-btn:hover,
.ucs-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ucs-shadow-md);
  color: var(--ucs-btn-fg);
}

.ucs-btn:hover::after,
.ucs-btn:focus-visible::after {
  transform: translateX(120%);
}

.ucs-btn:active {
  transform: translateY(0);
}

.ucs-btn--outline {
  /* Same pill, same size as the gold button; a bronze edge so the pair read as a family. */
  --ucs-btn-bg: transparent;
  --ucs-btn-fg: var(--ucs-umber);
  --ucs-btn-edge: var(--ucs-gold-deep);
}

.ucs-btn--outline:hover,
.ucs-btn--outline:focus-visible {
  --ucs-btn-bg: var(--ucs-umber);
  --ucs-btn-fg: var(--ucs-on-dark);
  --ucs-btn-edge: var(--ucs-umber);
}

.ucs-btn--ghost-light {
  --ucs-btn-bg: transparent;
  --ucs-btn-fg: var(--ucs-on-dark);
  --ucs-btn-edge: rgba(246, 239, 227, 0.45);
}

.ucs-btn--ghost-light:hover,
.ucs-btn--ghost-light:focus-visible {
  --ucs-btn-bg: rgba(246, 239, 227, 0.12);
  --ucs-btn-fg: var(--ucs-on-dark);
  --ucs-btn-edge: var(--ucs-gold);
}

.ucs-btn--block {
  width: 100%;
}

.ucs-btn[disabled],
.ucs-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ucs-btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */

.ucs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(251, 248, 243, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--ucs-speed) var(--ucs-ease),
    border-color var(--ucs-speed) var(--ucs-ease),
    box-shadow var(--ucs-speed) var(--ucs-ease);
}

.ucs-header.is-stuck {
  background-color: rgba(251, 248, 243, 0.96);
  border-bottom-color: var(--ucs-line);
  box-shadow: var(--ucs-shadow-sm);
}

.ucs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: clamp(4.75rem, 9vw, 7.25rem);
  transition: min-height var(--ucs-speed) var(--ucs-ease);
}

.ucs-header.is-stuck .ucs-header__inner {
  min-height: clamp(3.75rem, 6vw, 4.75rem);
}

.ucs-header__brand {
  display: flex;
  align-items: center;
  /* Allowed to shrink: the lockup is four times as wide as it is tall, and on a phone it
     has to give way to the button beside it rather than push it off the screen. */
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}

.ucs-header__logo {
  width: auto;
  height: clamp(3.5rem, 7vw, 6rem);
  /* Shrinks with its link when space is short; contain keeps its shape inside the box. */
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: height var(--ucs-speed) var(--ucs-ease);
}

/* Beside the full nav the logo is sized so five links and the button stay on one line. */
@media (min-width: 68em) {
  .ucs-header__logo {
    height: clamp(3.25rem, 4.6vw, 4.5rem);
  }
}

/* Big and confident at the top of the page, compact once you start scrolling,
   so a tall logo does not permanently eat a third of the viewport. */
.ucs-header.is-stuck .ucs-header__logo {
  height: clamp(2.75rem, 4vw, 3.75rem);
}

.ucs-nav {
  display: none;
}

.ucs-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.8vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ucs-nav__link {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-block: 0.35rem;
  color: var(--ucs-umber);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
}

.ucs-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--ucs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ucs-speed) var(--ucs-ease);
}

.ucs-nav__link:hover::after,
.ucs-nav__link:focus-visible::after {
  transform: scaleX(1);
}

.ucs-header__cta {
  display: none;
}

/* 68em, not 62em: the logo is wide, so the full nav needs the extra room to stay on one line */
@media (min-width: 68em) {
  .ucs-nav,
  .ucs-header__cta {
    display: block;
    flex: none;
  }

  .ucs-header__cta .ucs-btn {
    padding-block: 0.7rem;
    min-height: 2.75rem;
    white-space: nowrap;
  }
}

/* Mobile: a single always-visible action instead of a burger menu.
   Doubled class so the compact sizing beats `.ucs-btn`. It is kept small so the wide logo
   beside it keeps most of the header; 2.75rem is still a 44px touch target. */
.ucs-btn.ucs-header__mobile-cta {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  min-height: 2.75rem;
  padding: 0.55rem 1.05rem;
  font-size: 0.92rem;
}

@media (min-width: 68em) {
  .ucs-btn.ucs-header__mobile-cta {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

.ucs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ucs-umber-deep);
  background-image: linear-gradient(160deg, #2a1709 0%, #3a2212 48%, #4b2a12 100%);
  color: var(--ucs-on-dark);
  padding-block: clamp(4rem, 11vw, 8rem);
}

.ucs-hero__aurora {
  position: absolute;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  /* The brand graphic's composition: a golden sun top right, an amber halo, bronze on the
     left, a quiet sage pool low right and gold at the foot. */
  background:
    radial-gradient(30% 36% at 74% 16%, rgba(243, 207, 122, 0.58) 0%, rgba(243, 207, 122, 0) 70%),
    radial-gradient(48% 54% at 64% 30%, rgba(212, 132, 44, 0.52) 0%, rgba(212, 132, 44, 0) 72%),
    radial-gradient(40% 46% at 16% 32%, rgba(138, 90, 50, 0.55) 0%, rgba(138, 90, 50, 0) 70%),
    radial-gradient(34% 40% at 92% 78%, rgba(111, 122, 90, 0.32) 0%, rgba(111, 122, 90, 0) 72%),
    radial-gradient(44% 50% at 28% 96%, rgba(201, 168, 94, 0.28) 0%, rgba(201, 168, 94, 0) 74%);
  filter: blur(8px);
  animation: ucs-drift 26s var(--ucs-ease) infinite alternate;
}

.ucs-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 236, 200, 0.07) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.6;
}

@keyframes ucs-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

.ucs-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 60em) {
  .ucs-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.ucs-hero h1 {
  color: var(--ucs-on-dark);
  margin-bottom: 0.5em;
}

.ucs-hero__accent {
  display: block;
  color: var(--ucs-amber);
  font-style: italic;
}

.ucs-hero__lede {
  color: var(--ucs-on-dark-mut);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  max-width: 34rem;
}

/* Second hero paragraph: the matching promise, a step quieter than the lede */
.ucs-hero__sub {
  color: var(--ucs-on-dark-mut);
  font-size: 1.02rem;
  max-width: 36rem;
}

.ucs-hero__note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
  font-size: 0.92rem;
  color: var(--ucs-on-dark-mut);
}

.ucs-hero__note svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--ucs-amber);
}

/* Hero side card */
.ucs-hero__card {
  background-color: rgba(246, 239, 227, 0.07);
  border: 1px solid var(--ucs-line-dark);
  border-radius: var(--ucs-radius-lg);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ucs-shadow-lg);
  animation: ucs-rise 0.85s var(--ucs-ease) 0.35s both;
}

.ucs-hero__card h2 {
  color: var(--ucs-on-dark);
  font-size: 1.28rem;
  margin-bottom: 0.4em;
}

.ucs-hero__card p {
  color: var(--ucs-on-dark-mut);
  font-size: 0.97rem;
}

.ucs-hero__card-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.ucs-hero__card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--ucs-on-dark-mut);
  font-size: 0.97rem;
  line-height: 1.55;
}

.ucs-hero__card-list svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--ucs-gold);
}

/* -------------------------------------------------------------------------
   7. Trust strip
   ------------------------------------------------------------------------- */

.ucs-trust {
  background-color: var(--ucs-white);
  border-bottom: 1px solid var(--ucs-line);
}

.ucs-trust__list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  list-style: none;
  padding-inline: 0;
}

@media (min-width: 46em) {
  .ucs-trust__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.ucs-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.ucs-trust__item svg {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  color: var(--ucs-sage);
}

.ucs-trust__item strong {
  display: block;
  font-family: var(--ucs-font-head);
  font-size: 1.02rem;
  color: var(--ucs-umber);
}

.ucs-trust__item span {
  display: block;
  font-size: 0.92rem;
  color: var(--ucs-ink-soft);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------------------- */

.ucs-card-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 46em) {
  .ucs-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 40em) {
  .ucs-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Four route cards read best as two rows of two */
@media (min-width: 40em) {
  .ucs-card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ucs-card {
  position: relative;
  background-color: var(--ucs-white);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--ucs-shadow-sm);
  transition:
    transform var(--ucs-speed) var(--ucs-ease),
    box-shadow var(--ucs-speed) var(--ucs-ease),
    border-color var(--ucs-speed) var(--ucs-ease);
}

.ucs-card::before {
  content: "";
  position: absolute;
  inset-inline: 1.5rem;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--ucs-bronze), var(--ucs-sage), var(--ucs-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ucs-ease);
}

.ucs-card:hover,
.ucs-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ucs-shadow-md);
  border-color: var(--ucs-line-gold);
}

.ucs-card:hover::before,
.ucs-card:focus-within::before {
  transform: scaleX(1);
}

.ucs-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: var(--ucs-radius-md);
  background-color: var(--ucs-sand);
  color: var(--ucs-umber);
}

.ucs-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ucs-card h3 {
  margin-bottom: 0.45em;
}

.ucs-card p {
  margin-bottom: 0;
  font-size: 0.97rem;
  color: var(--ucs-ink-soft);
}

.ucs-card p + p {
  margin-top: 0.75rem;
}

/* Stacked card: content pushes the closing or fee line to the bottom (route and counsellor cards) */
.ucs-card--route {
  display: flex;
  flex-direction: column;
}

.ucs-card__topics {
  margin: 1.25rem 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--ucs-line);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ucs-card__topics li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--ucs-line-gold);
  border-radius: var(--ucs-radius-pill);
  background-color: var(--ucs-cream);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ucs-umber);
  line-height: 1.45;
}

.ucs-card__close {
  margin-top: auto;
  padding-top: 0.75rem;
  font-style: italic;
  color: var(--ucs-ink-soft);
}

/* Fee line on the counsellor cards. Doubled selector so it beats `.ucs-card p` (0-1-1). */
.ucs-card .ucs-card__fee {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ucs-line);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ucs-umber);
}

/* -------------------------------------------------------------------------
   8b. Tabs: "Does any of this feel familiar?"
   ------------------------------------------------------------------------- */

.ucs-tabs {
  max-width: 62rem;
  margin-inline: auto;
}

.ucs-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.ucs-tab {
  min-height: 2.85rem;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-pill);
  background-color: var(--ucs-white);
  font-family: var(--ucs-font-body);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ucs-ink-soft);
  cursor: pointer;
  transition:
    background-color var(--ucs-speed) var(--ucs-ease),
    border-color var(--ucs-speed) var(--ucs-ease),
    color var(--ucs-speed) var(--ucs-ease),
    transform var(--ucs-speed) var(--ucs-ease),
    box-shadow var(--ucs-speed) var(--ucs-ease);
}

.ucs-tab:hover {
  border-color: var(--ucs-line-gold);
  color: var(--ucs-umber);
  transform: translateY(-2px);
}

.ucs-tab[aria-selected="true"] {
  background-color: var(--ucs-umber);
  border-color: var(--ucs-umber);
  color: var(--ucs-on-dark);
  box-shadow: var(--ucs-shadow-md);
}

.ucs-tabs__panels {
  position: relative;
}

.ucs-panel-card {
  background-color: var(--ucs-white);
  border: 1px solid var(--ucs-line-gold);
  border-radius: var(--ucs-radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--ucs-shadow-sm);
  text-align: center;
}

.ucs-panel-card.is-active {
  animation: ucs-fade-swap 0.45s var(--ucs-ease) both;
}

.ucs-panel-card h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin-bottom: 0.5em;
  color: var(--ucs-gold-deep);
}

.ucs-panel-card p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.04rem;
  color: var(--ucs-ink-soft);
}

@keyframes ucs-fade-swap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ucs-tabs__foot {
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 1rem;
  color: var(--ucs-ink-soft);
  max-width: 46ch;
}

/* -------------------------------------------------------------------------
   9. Steps
   ------------------------------------------------------------------------- */

.ucs-steps {
  counter-reset: ucs-step;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52em) {
  .ucs-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ucs-step {
  position: relative;
  counter-increment: ucs-step;
  padding-top: 3.9rem;
}

.ucs-step::before {
  content: counter(ucs-step);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--ucs-line-gold);
  background-color: var(--ucs-white);
  color: var(--ucs-gold-deep);
  font-family: var(--ucs-font-head);
  font-size: 1.15rem;
  font-weight: 600;
}

.ucs-step::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 3.4rem;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ucs-line-gold), transparent);
}

@media (max-width: 51.99em) {
  .ucs-step::after {
    display: none;
  }
}

.ucs-steps > .ucs-step:last-child::after {
  display: none;
}

.ucs-step h3 {
  margin-bottom: 0.4em;
}

.ucs-step p {
  margin-bottom: 0;
  color: var(--ucs-ink-soft);
  font-size: 0.97rem;
}

/* -------------------------------------------------------------------------
   10. Dark pop-card section
   ------------------------------------------------------------------------- */

.ucs-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ucs-radius-lg);
  background-color: var(--ucs-umber);
  color: var(--ucs-on-dark);
  padding: clamp(2.25rem, 5vw, 4rem);
  box-shadow: var(--ucs-shadow-lg);
}

.ucs-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 88% 12%, rgba(212, 132, 44, 0.42) 0%, rgba(212, 132, 44, 0) 70%),
    radial-gradient(50% 60% at 6% 92%, rgba(111, 122, 90, 0.38) 0%, rgba(111, 122, 90, 0) 70%);
}

.ucs-panel h2,
.ucs-panel h3 {
  color: var(--ucs-on-dark);
}

.ucs-panel p {
  color: var(--ucs-on-dark-mut);
}

.ucs-panel__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 56em) {
  .ucs-panel__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.ucs-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.ucs-panel__list li {
  padding-left: 1.5rem;
  border-left: 2px solid var(--ucs-gold);
  color: var(--ucs-on-dark-mut);
  font-size: 0.98rem;
  line-height: 1.6;
}

.ucs-panel__list strong {
  display: block;
  color: var(--ucs-on-dark);
  font-family: var(--ucs-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* -------------------------------------------------------------------------
   11. Contact block: form + call
   ------------------------------------------------------------------------- */

.ucs-contact__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 64em) {
  .ucs-contact__grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

.ucs-formcard {
  background-color: var(--ucs-white);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--ucs-shadow-md);
}

.ucs-aside {
  display: grid;
  gap: 1.25rem;
  position: sticky;
  top: 6.5rem;
}

@media (max-width: 63.99em) {
  .ucs-aside {
    position: static;
  }
}

.ucs-aside__card {
  background-color: var(--ucs-white);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-md);
  padding: 1.5rem;
  box-shadow: var(--ucs-shadow-sm);
}

.ucs-aside__card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.4em;
}

.ucs-aside__card p {
  font-size: 0.94rem;
  color: var(--ucs-ink-soft);
}

.ucs-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.ucs-contact-list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ucs-umber);
  overflow-wrap: anywhere;
}

.ucs-contact-list a:hover,
.ucs-contact-list a:focus-visible {
  color: var(--ucs-bronze);
  text-decoration: underline;
}

.ucs-contact-list svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  color: var(--ucs-gold-deep);
}

/* -------------------------------------------------------------------------
   12. Form controls
   ------------------------------------------------------------------------- */

.ucs-fieldset {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

.ucs-fieldset:last-of-type {
  margin-bottom: 1.5rem;
}

.ucs-legend {
  padding: 0;
  margin-bottom: 1.1rem;
  font-family: var(--ucs-font-head);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ucs-umber);
  border-bottom: 1px solid var(--ucs-line-gold);
  padding-bottom: 0.5rem;
  width: 100%;
}

.ucs-field {
  margin-bottom: 1.25rem;
}

.ucs-field-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 38em) {
  .ucs-field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.ucs-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ucs-umber);
}

.ucs-label .ucs-optional {
  font-weight: 400;
  color: var(--ucs-ink-soft);
}

.ucs-hint {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.86rem;
  color: var(--ucs-ink-soft);
  line-height: 1.5;
}

.ucs-input,
.ucs-select,
.ucs-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  min-height: 3rem;
  font-family: var(--ucs-font-body);
  font-size: 1rem;
  color: var(--ucs-ink);
  background-color: var(--ucs-cream);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-sm);
  transition:
    border-color var(--ucs-speed) var(--ucs-ease),
    box-shadow var(--ucs-speed) var(--ucs-ease),
    background-color var(--ucs-speed) var(--ucs-ease);
}

.ucs-textarea {
  min-height: 8.5rem;
  resize: vertical;
  line-height: 1.6;
}

.ucs-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5c67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}

.ucs-input:hover,
.ucs-select:hover,
.ucs-textarea:hover {
  border-color: rgba(58, 34, 18, 0.28);
}

.ucs-input:focus,
.ucs-select:focus,
.ucs-textarea:focus {
  outline: none;
  background-color: var(--ucs-white);
  border-color: var(--ucs-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 94, 0.22);
}

.ucs-input[aria-invalid="true"],
.ucs-select[aria-invalid="true"],
.ucs-textarea[aria-invalid="true"] {
  border-color: var(--ucs-error);
  box-shadow: 0 0 0 3px rgba(163, 52, 43, 0.14);
}

.ucs-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ucs-error);
}

.ucs-error.is-shown {
  display: block;
}

/* Choice controls */
.ucs-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ucs-choice {
  position: relative;
}

.ucs-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ucs-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-pill);
  background-color: var(--ucs-cream);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ucs-ink-soft);
  cursor: pointer;
  transition:
    background-color var(--ucs-speed) var(--ucs-ease),
    border-color var(--ucs-speed) var(--ucs-ease),
    color var(--ucs-speed) var(--ucs-ease),
    transform var(--ucs-speed) var(--ucs-ease);
}

.ucs-choice span:hover {
  border-color: var(--ucs-line-gold);
  transform: translateY(-1px);
}

.ucs-choice input:checked + span {
  background-color: var(--ucs-umber);
  border-color: var(--ucs-umber);
  color: var(--ucs-on-dark);
}

.ucs-choice input:focus-visible + span {
  outline: 3px solid var(--ucs-gold);
  outline-offset: 3px;
}

/* Consent checkboxes */
.ucs-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ucs-ink-soft);
  cursor: pointer;
}

.ucs-consent input {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.18rem;
  accent-color: var(--ucs-sage);
  cursor: pointer;
}

/* Honeypot - hidden from people, visible to bots */
.ucs-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile mount */
.ucs-turnstile {
  margin-bottom: 1.25rem;
  min-height: 1px;
}

.ucs-form__footnote {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ucs-ink-soft);
}

/* Form status messages */
.ucs-status {
  display: none;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ucs-radius-md);
  border-left: 4px solid;
  font-size: 0.95rem;
}

.ucs-status.is-shown {
  display: block;
}

.ucs-status--error {
  background-color: rgba(163, 52, 43, 0.08);
  border-left-color: var(--ucs-error);
  color: var(--ucs-error);
}

.ucs-status--success {
  background-color: rgba(47, 107, 70, 0.08);
  border-left-color: var(--ucs-success);
  color: var(--ucs-success);
}

/* Thank-you panel swapped in after a successful send */
.ucs-thanks {
  display: none;
  text-align: center;
  padding-block: 1.5rem;
}

.ucs-thanks.is-shown {
  display: block;
  animation: ucs-rise 0.6s var(--ucs-ease) both;
}

.ucs-thanks svg {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  color: var(--ucs-sage);
}

.ucs-thanks p {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   13. Crisis notice
   ------------------------------------------------------------------------- */

.ucs-crisis {
  background-color: var(--ucs-umber-deep);
  /* A quiet amber and sage glow so the big dark block is not flat; same family as the hero. */
  background-image:
    radial-gradient(50% 60% at 90% 0%, rgba(212, 132, 44, 0.22) 0%, rgba(212, 132, 44, 0) 70%),
    radial-gradient(40% 50% at 5% 100%, rgba(111, 122, 90, 0.18) 0%, rgba(111, 122, 90, 0) 70%);
  color: var(--ucs-on-dark);
}

.ucs-crisis h2 {
  color: var(--ucs-on-dark);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

.ucs-crisis p {
  color: var(--ucs-on-dark-mut);
}

.ucs-crisis__grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

@media (min-width: 46em) {
  .ucs-crisis__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ucs-crisis__item {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--ucs-line-dark);
  border-radius: var(--ucs-radius-md);
  background-color: rgba(246, 239, 227, 0.05);
}

.ucs-crisis__item strong {
  display: block;
  font-family: var(--ucs-font-head);
  font-size: 1.05rem;
  color: var(--ucs-gold);
  margin-bottom: 0.3rem;
}

.ucs-crisis__item a {
  color: var(--ucs-on-dark);
  font-weight: 700;
}

.ucs-crisis__item span {
  display: block;
  font-size: 0.9rem;
  color: var(--ucs-on-dark-mut);
  margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
   14. Accordion (FAQ)
   ------------------------------------------------------------------------- */

.ucs-faq-stack {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}

.ucs-acc-item {
  background-color: var(--ucs-white);
  border: 1px solid var(--ucs-line);
  border-radius: var(--ucs-radius-md);
  overflow: hidden;
  transition: border-color var(--ucs-speed) var(--ucs-ease);
}

.ucs-acc-item:has(.ucs-acc-toggle[aria-expanded="true"]) {
  border-color: var(--ucs-line-gold);
}

.ucs-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ucs-font-head);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--ucs-umber);
  transition: background-color var(--ucs-speed) var(--ucs-ease);
}

.ucs-acc-toggle:hover {
  background-color: var(--ucs-sand);
}

.ucs-acc-chevron {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--ucs-gold-deep);
  transition: transform var(--ucs-speed) var(--ucs-ease);
}

.ucs-acc-toggle[aria-expanded="true"] .ucs-acc-chevron {
  transform: rotate(180deg);
}

.ucs-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ucs-speed) var(--ucs-ease);
}

.ucs-acc-panel.is-open {
  grid-template-rows: 1fr;
}

.ucs-acc-panel-inner {
  overflow: hidden;
}

.ucs-acc-body {
  padding: 0 1.35rem 1.35rem;
  color: var(--ucs-ink-soft);
  font-size: 0.97rem;
}

.ucs-acc-body ul {
  margin: 0 0 1.1em;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.ucs-acc-body ul li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.6;
}

.ucs-acc-body ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--ucs-gold);
}

.ucs-acc-body p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */

.ucs-footer {
  background-color: var(--ucs-umber-deep);
  /* A quiet amber and sage glow so the big dark block is not flat; same family as the hero. */
  background-image:
    radial-gradient(50% 60% at 90% 0%, rgba(212, 132, 44, 0.22) 0%, rgba(212, 132, 44, 0) 70%),
    radial-gradient(40% 50% at 5% 100%, rgba(111, 122, 90, 0.18) 0%, rgba(111, 122, 90, 0) 70%);
  color: var(--ucs-on-dark-mut);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
  font-size: 0.92rem;
}

.ucs-footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ucs-line-dark);
}

@media (min-width: 52em) {
  .ucs-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.ucs-footer h2 {
  font-size: 1rem;
  color: var(--ucs-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ucs-footer p {
  color: var(--ucs-on-dark-mut);
  max-width: 34ch;
}

/* The logo's lettering is navy, so on the dark footer it sits on a cream chip. */
.ucs-footer__logo {
  height: clamp(4rem, 10vw, 7rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--ucs-radius-md);
  background-color: var(--ucs-cream);
}

.ucs-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.ucs-footer a {
  color: var(--ucs-on-dark);
  text-decoration: none;
}

.ucs-footer a:hover,
.ucs-footer a:focus-visible {
  color: var(--ucs-gold);
  text-decoration: underline;
}

.ucs-footer__legal {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

.ucs-footer__legal p {
  margin: 0;
  max-width: none;
}

/* -------------------------------------------------------------------------
   16. Scroll reveal
   ------------------------------------------------------------------------- */

.ucs-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ucs-ease),
    transform 0.7s var(--ucs-ease);
  will-change: opacity, transform;
}

.ucs-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed grid */
.ucs-reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ucs-ease),
    transform 0.7s var(--ucs-ease);
}

.ucs-reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

.ucs-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.ucs-reveal-group.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.ucs-reveal-group.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.ucs-reveal-group.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.ucs-reveal-group.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.ucs-reveal-group.is-visible > *:nth-child(6) { transition-delay: 500ms; }

/* Hero entrance, runs on load rather than on scroll */
@keyframes ucs-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.ucs-hero__text > * {
  animation: ucs-rise 0.85s var(--ucs-ease) both;
}

.ucs-hero__text > *:nth-child(1) { animation-delay: 0.05s; }
.ucs-hero__text > *:nth-child(2) { animation-delay: 0.15s; }
.ucs-hero__text > *:nth-child(3) { animation-delay: 0.25s; }
.ucs-hero__text > *:nth-child(4) { animation-delay: 0.35s; }
.ucs-hero__text > *:nth-child(5) { animation-delay: 0.45s; }
.ucs-hero__text > *:nth-child(6) { animation-delay: 0.55s; }

/* -------------------------------------------------------------------------
   17. Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ucs-reveal,
  .ucs-reveal-group > * {
    opacity: 1;
    transform: none;
  }

  .ucs-hero__aurora {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   17b. Book a call modal

   A custom modal rather than Calendly's native popup, for the same reason as
   the academy site: the native popup cannot carry our own heading and context
   line. The Calendly iframe is around 2.7MB, so nothing is loaded until the
   modal is opened for the first time.
   ------------------------------------------------------------------------- */

.ucs-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.ucs-modal[hidden] {
  display: none;
}

.ucs-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 26, 41, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ucs-fade-in 0.3s var(--ucs-ease) both;
}

.ucs-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  max-height: 100%;
  background-color: var(--ucs-cream);
  border-radius: var(--ucs-radius-lg);
  box-shadow: var(--ucs-shadow-lg);
  overflow: hidden;
  animation: ucs-rise 0.4s var(--ucs-ease) both;
}

.ucs-modal__head {
  position: relative;
  flex: none;
  padding: 1.4rem clamp(1.25rem, 4vw, 2rem);
  padding-right: 3.75rem;
  background-color: var(--ucs-umber);
  color: var(--ucs-on-dark);
}

.ucs-modal__title {
  margin: 0 0 0.2rem;
  color: var(--ucs-on-dark);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}

.ucs-modal__note {
  margin: 0;
  max-width: none;
  font-size: 0.92rem;
  color: var(--ucs-on-dark-mut);
  line-height: 1.55;
}

.ucs-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--ucs-line-dark);
  border-radius: 50%;
  background-color: transparent;
  color: var(--ucs-on-dark);
  cursor: pointer;
  transition:
    background-color var(--ucs-speed) var(--ucs-ease),
    border-color var(--ucs-speed) var(--ucs-ease),
    transform var(--ucs-speed) var(--ucs-ease);
}

.ucs-modal__close:hover {
  background-color: rgba(246, 239, 227, 0.14);
  border-color: var(--ucs-gold);
  transform: rotate(90deg);
}

.ucs-modal__close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.ucs-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Calendly injects an iframe here on first open. */
.ucs-cal-embed {
  width: 100%;
  min-width: 0;
  height: 44rem;
  max-height: 70vh;
}

@media (max-width: 40em) {
  .ucs-cal-embed {
    height: 38rem;
    max-height: 72vh;
  }
}

.ucs-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 1.5rem;
  color: var(--ucs-ink-soft);
  font-size: 0.95rem;
}

.ucs-modal__loading::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ucs-line-gold);
  border-top-color: var(--ucs-gold-deep);
  border-radius: 50%;
  animation: ucs-spin 0.8s linear infinite;
}

.ucs-modal__fallback {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.ucs-modal__fallback p {
  margin-inline: auto;
}

@keyframes ucs-spin {
  to { transform: rotate(360deg); }
}

@keyframes ucs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Stop the page behind the modal scrolling while it is open. */
.ucs-modal-open {
  overflow: hidden;
}

/* Calendly ships z-index:9999 without !important on its own overlay. The
   sticky header sits at 100, but this guarantees the popup is never trapped
   behind anything a plugin adds later. */
.calendly-overlay,
.calendly-popup-close {
  z-index: 2147483647 !important;
}

/* -------------------------------------------------------------------------
   18. WordPress and Astra integration

   front-page.php does not call get_header() or get_footer(), so none of
   Astra's wrappers are printed and there is nothing to unpick. Astra's global
   stylesheet does still load, which is why this file is enqueued with
   'astra-theme-css' as a dependency: equal specificity, but ours comes last
   and wins.

   These rules have no effect on the standalone local draft, where none of
   these classes exist. They are kept here so the draft and the deployed
   stylesheet stay byte-identical.
   ------------------------------------------------------------------------- */

.ucs-front {
  background-color: var(--ucs-cream);
  color: var(--ucs-ink);
  font-family: var(--ucs-font-body);
}

/* The admin bar is fixed at the top for logged-in users, so the sticky header
   has to start below it or it sits underneath. */
.admin-bar .ucs-header {
  top: 32px;
}

.admin-bar {
  scroll-padding-top: 8rem;
}

@media screen and (max-width: 782px) {
  .admin-bar .ucs-header {
    top: 46px;
  }
}

/* Astra styles bare form elements. Ours are classed, so they already win,
   but the appearance reset stops iOS Safari re-skinning them. */
.ucs-front .ucs-input,
.ucs-front .ucs-textarea {
  appearance: none;
}

/* Astra sets `button:hover` and `button:focus` to white (main.min.css), and its
   Customizer CSS sets `button:focus` too. Those selectors are 0-1-1, which beats
   a plain class at 0-1-0, so any button of ours that does not state its own
   hover and focus colour turns white-on-white the moment you point at it.
   Matching at 0-1-1 is enough because this file loads after Astra's. */
.ucs-acc-toggle:hover,
.ucs-acc-toggle:focus {
  color: var(--ucs-umber);
}

.ucs-tab:focus {
  color: var(--ucs-umber);
}

/* A clicked tab is selected AND focused. .ucs-tab[aria-selected="true"] and
   .ucs-tab:focus both sit at 0-2-0, and the focus rule above is later in the
   file, so it was winning and painting navy text on the navy pill the moment
   you clicked. The selected state has to win, so it gets one more class of
   specificity here. Same for hover, which currently only works by luck of
   source order. */
.ucs-tab[aria-selected="true"]:hover,
.ucs-tab[aria-selected="true"]:focus {
  color: var(--ucs-on-dark);
}

.ucs-btn:focus {
  color: var(--ucs-btn-fg);
}

.ucs-modal__close:focus {
  color: var(--ucs-on-dark);
}

/* -------------------------------------------------------------------------
   19. Print
   ------------------------------------------------------------------------- */

@media print {
  .ucs-header,
  .ucs-hero__aurora,
  .ucs-hero__grain,
  .ucs-btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}