/* The cover wash is even, not top-heavy. It used to fall to nothing across
   the middle, which on a phone read as a dark band at the top over a bright
   picture underneath. */
.cover-shade { background: var(--scrim); }

/* The homepage hero takes the same scrim. It used to be a left-to-right
   gradient, dark on the left and almost clear on the right, which left the
   navigation down the right-hand side sitting on whatever the photograph
   happened to be doing. On a phone it was switched off entirely, so the
   logo and the menu button sat on a bright wall. */
.hero.landing .hero-shade { display: block; background: var(--scrim); }
@media (max-width: 960px) {
  /* Below this width the title moves out from over the photograph and sits
     underneath it, so the scrim covers the picture only. */
  .hero.landing .hero-shade {
    inset: 0 0 auto 0;
    height: 46vh;
    min-height: 260px;
  }
}
/* ============================================================
   editorial.css — the jiunjewelry.com language applied to TC Resources
   Loaded last. Full-bleed bands, 50/50 photo + colour-field splits with
   copy anchored to the corners, a giant thin serif display against
   small tracked labels, zero radius, no cards.

   Accessibility floor is kept: body copy stays 17px+, labels 13px+,
   AA contrast on every field, 44px targets, reduced motion honoured.
   ============================================================ */

:root {
  --ed-ink:   #1A1A1A;
  --ed-red:   #FF3D3D;   /* accent — fills and large type only */
  --ed-deep:  #B22222;   /* red that carries white text (5.9:1) */
  --ed-blush: #FFE4E1;
  --ed-grey:  #E0E0E0;
  --ed-cream: #FCF7F2;
  --ed-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ed-sans:  "DM Sans", "Manrope", system-ui, sans-serif;
  --ed-gutter: clamp(20px, 3.4vw, 56px);
  --ed-display: clamp(3rem, 6.2vw, 6.2rem);
}

/* ---------- Type primitives ---------- */
.ed-label {
  margin: 0 0 12px;
  font-family: var(--ed-sans);
  font-size: .82rem;            /* 13px — jiun uses 10px; too small for our audience */
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: inherit;
  opacity: .82;
}
.ed-serif-sm {
  margin: 0 0 16px;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
}
.ed-quote {
  margin: 0 0 14px;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.3vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: .03em;
  text-transform: uppercase;
  max-width: 22ch;
}
.ed-note { font-size: .96rem; opacity: .8; max-width: 52ch; }
.ed-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ed-serif);
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding: 0;
}
.ed-link::after { content: "\2192"; margin-left: 10px; font-family: var(--ed-sans); }
.ed-link:hover, .ed-link:focus-visible { opacity: .75; }

/* The pill — jiun's small outlined capsule link */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  font-family: var(--ed-serif);
  font-size: 1.1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: transparent;
  transition: background .25s ease, color .25s ease;
}
.pill::before, .pill::after { content: "\25C7"; font-size: .6em; margin: 0 12px; opacity: .8; }
.pill:hover, .pill:focus-visible { background: #fff; color: var(--ed-ink); }
.pill--ink { border-color: var(--ed-ink); color: var(--ed-ink); }
.pill--ink:hover, .pill--ink:focus-visible { background: var(--ed-ink); color: #fff; }
.pill--light { border-color: #fff; color: #fff; }
.pill--light:hover, .pill--light:focus-visible { background: #fff; color: var(--ed-deep); }

/* ---------- Landing hero: page title at the foot, jiun-style ---------- */
.landing-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(96px, 13vh, 150px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}
.landing-title-small {
  font-family: var(--ed-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .9;
}
.landing-title-big {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(3rem, 6.4vw, 6.2rem);
  line-height: .95;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
@media (max-width: 960px) {
  /* The phone hero is a plain photograph; the H1 band directly below carries the title. */
  .landing-title { display: none; }
}

/* ---------- Ribbon ---------- */
.ribbon {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: var(--ed-deep);
  color: #fff;
  padding: 0 var(--ed-gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  font-family: var(--ed-sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ribbon a:hover, .ribbon a:focus-visible { border-bottom-color: #fff; }

/* ---------- Bands: full-bleed photograph with words ---------- */
.band {
  position: relative;
  min-height: 72vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: var(--ed-gutter);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.band--tall { min-height: 88vh; }
.band--tall .band-img { object-position: 22% 50%; }
.band-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.band-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.05) 32%, rgba(26,26,26,.0) 55%, rgba(26,26,26,.72) 100%),
    linear-gradient(90deg, rgba(26,26,26,.45) 0%, rgba(26,26,26,0) 45%);
}
.band-intro {
  align-self: start;
  max-width: 34ch;
}
.band-intro p { margin: 0; font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.94); }
.band-intro .ed-serif-sm { margin-bottom: 12px; }
.band-intro--list .ed-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.band-intro--list .ed-list li {
  font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding-left: 18px; position: relative;
}
.band-intro--list .ed-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--ed-red); }
.band-intro--list .ed-note { margin: 18px 0 0; }

/* ---------- Word bands ----------
   These read as one sentence at one size, not as the two-column staircase
   of eyebrow and headline they started as.

   The size lives on the container, not on the spans. It has to: max-width
   is set in `ch`, and `ch` resolves against the font-size of the element it
   is written on. With the size on the children, 19ch was being measured
   against the inherited body size, the container collapsed to roughly a
   third of its intended width, every word took its own line and the long
   ones ran off the screen. */
.band-words {
  grid-column: 2;
  justify-self: end;
  display: block;
  margin: 0 0 0 auto;
  max-width: 19ch;
  font-family: var(--ed-serif);
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: .04em;
  text-align: right;
  overflow-wrap: break-word;
  color: var(--ed-cream);
}
/* The spans are words in a sentence now, so they take everything from the
   sentence. Written as one declaration each so nothing below can pick off
   the size on its own and reopen the bug above. */
.band-words .w-small,
.band-words .w-big {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  opacity: 1;
  color: inherit;
  transform: none;
  white-space: normal;
  padding: 0;
}
/* The markup has no whitespace between the spans on some pages. */
.band-words .w-small::after,
.band-words .w-big::after { content: " "; }

@media (max-width: 960px) {
  .band { grid-template-columns: 1fr; min-height: 0; padding: 28px 20px 34px; gap: 30px; }
  .band--tall { min-height: 0; }
  .band-img { position: absolute; }
  .band-words { grid-column: 1; }
  .band-intro { max-width: none; }
}

/* ---------- Splits ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 50vw;
  background: var(--ed-ink);
}
.split-media { position: relative; overflow: hidden; }
.split-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.split-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: var(--ed-gutter);
  color: #fff;
}
.split-field--ink   { background: var(--ed-ink); }
.split-field--red   { background: var(--ed-deep); }
.split-field--blush { background: var(--ed-blush); color: var(--ed-ink); }
.split-top { max-width: 40ch; }
.split-top p, .split-bottom p { margin: 0 0 12px; font-size: 1.06rem; line-height: 1.62; color: inherit; opacity: .94; }
.split-bottom { align-self: flex-end; max-width: 40ch; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.split-bottom .ed-quote { text-align: right; }
.split-bottom .pill { margin-top: 12px; }
.split-inset {
  position: absolute; left: var(--ed-gutter); bottom: var(--ed-gutter);
  width: clamp(120px, 14vw, 210px);
  aspect-ratio: 5 / 3;
  overflow: hidden;
}
.split-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split--reverse .split-field { order: 1; }
.split--reverse .split-media { order: 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split--reverse .split-field { order: 2; }
  .split--reverse .split-media { order: 1; }
  .split-media { aspect-ratio: 1 / 1; }
  .split-field { padding: 34px 20px 40px; gap: 34px; }
  .split-bottom { text-align: left; align-items: flex-start; align-self: flex-start; }
  .split-bottom .ed-quote { text-align: left; }
  .split-inset { position: static; width: 100%; max-width: 260px; }
}

/* ---------- Chapters (re-skinned) ---------- */
.chapter { grid-template-columns: 2fr 3fr; }
.chapter--ink   .chapter-copy { background: var(--ed-ink); color: #fff; }
.chapter--red   .chapter-copy { background: var(--ed-deep); color: #fff; }
.chapter--blush .chapter-copy { background: var(--ed-blush); color: var(--ed-ink); }
.chapters .chapter--ink .chapter-copy   { background: var(--ed-ink); }
.chapters .chapter--red .chapter-copy   { background: var(--ed-deep); }
.chapters .chapter--blush .chapter-copy { background: var(--ed-blush); }
.chapter-copy {
  display: grid;
  grid-template-columns: 4ch minmax(0, 46ch);
  column-gap: 18px;
  justify-content: start;
  align-content: start;
  padding: clamp(40px, 7vw, 110px) var(--ed-gutter) var(--ed-gutter) clamp(28px, 18%, 260px);
}
.chapter-num { font-size: 1.3rem; color: inherit; opacity: .7; padding-top: .35em; }
.chapter-copy h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); letter-spacing: .05em; margin-bottom: 18px; color: inherit; }
.chapter-copy p { color: inherit; opacity: .94; font-size: 1.06rem; line-height: 1.62; margin: 0 0 12px; max-width: 42ch; }
.chapter-copy .pill { margin-top: 14px; }
.chapter--blush .chapter-copy p { opacity: 1; }
@media (max-width: 900px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter-media { height: auto; aspect-ratio: 1 / 1; max-height: 70vw; }
  .chapter-copy { grid-template-columns: 4ch minmax(0, 1fr); padding: 34px 20px 40px; }
}

/* ---------- Chapters: full panels that stack into three bands ----------

   Each chapter fills the screen under the header and sticks a band lower
   than the one before it, so a panel arrives whole, slides up over the
   one already parked, and comes to rest with only its top band showing.
   By the third, the screen is three bands: the first chapter's heading,
   the second's, and the third entire.

   The panels are full height rather than band height for one reason: the
   gap. A band-tall panel leaves the screen uncovered between the panel
   that has parked and the one still climbing, and no background colour
   makes that read as anything but a hole. A full-height panel is still
   covering the screen while the next one climbs over it, so there is
   never a gap to fill.

   The geometry is here and only here. It used to be measured and written
   as inline styles by editorial.js, which meant two places had to agree
   about a design either of them could change. */
@media (min-width: 901px) {
  .chapters {
    display: block;
    --band: calc((100vh - var(--header-h, 86px)) / 3);
    --panel: calc(100vh - var(--header-h, 86px));
    /* Once the stack lets go and rides up, the run-out is what is
       underneath it — so it takes the colour of the section that follows
       rather than of the panel above, and reads as that section arriving
       instead of as a stray band. */
    background: var(--ed-ink);
  }
  /* Room below the last panel for the finished stack to hold still.

     The last sticky child reaches its resting place on exactly the scroll
     the section runs out on, so without trailing room the three-band
     stack exists for a single pixel and is never actually seen. It has to
     be trailing *content* — padding does not do it, because a sticky box
     is held inside its container's content box, and a margin on the panel
     would shorten its stay rather than lengthen it. A pseudo-element is
     content and costs no markup. */
  .chapters::after {
    content: "";
    display: block;
    height: calc(var(--band) * 1.2);
  }
  .chapter {
    position: sticky;
    min-height: 0;
    height: var(--panel);
    grid-template-columns: 1fr 1.55fr;
    /* Content in the top band, the rest of the panel its own field
       colour. The panel has to be screen-high so it keeps covering while
       the next one climbs over it, but the photograph must not be: a
       band-high, near-2:1 window shows these pictures almost whole, and
       a screen-high one is a narrow portrait crop through the middle
       that cuts everybody off at the eyes. */
    grid-template-rows: var(--band) 1fr;
    align-content: start;
  }
  .chapter--ink   { background: var(--ed-ink); }
  .chapter--red   { background: var(--ed-deep); }
  .chapter--blush { background: var(--ed-blush); }
  .chapter-media { grid-row: 1; }
  .chapter-media picture { display: contents; }
  .chapter-media img { object-position: 50% 32%; }
  .chapter-copy  { grid-row: 1; }
  /* A parked panel shows only its top band, so that is where the words
     have to be: hard against the top rather than centred in a panel
     whose middle is about to be covered. */
  .chapter-copy {
    grid-template-columns: 3.4ch minmax(0, 64ch);
    column-gap: 16px;
    align-content: start;
    padding: clamp(20px, 3.4vh, 44px) clamp(28px, 4vw, 64px);
  }
  .chapter-num { font-size: 1.05rem; padding-top: .3em; }
  .chapter-copy h2 { font-size: clamp(1.3rem, 1.75vw, 1.75rem); margin-bottom: 10px; }
  .chapter-copy p { font-size: clamp(.92rem, 1.02vw, 1rem); line-height: 1.5; margin: 0 0 7px; max-width: 64ch; }
  .chapter-copy p:last-child { margin-bottom: 0; }
  .chapter-copy .pill { margin-top: 10px; }

  /* The bottom margins are what make the finished stack leave as one
     block. A panel is released when its foot plus its bottom margin
     reaches the end of the section, so the higher panels are given the
     taller margins and all three let go on the same scroll; without them
     the lowest slides out from under the others and the stack unzips. */
  /* A panel only has to reach the foot of the screen from wherever it
     parks, so each is a band shorter than the one before it: three bands,
     two, one. Making them all screen-high left the last one with two
     bands of empty field hanging below its content, and that filler is
     exactly what showed underneath once the stack rode away — the strip
     of pink after the third commitment. The last panel is now its band
     and nothing more.

     Equal heights also meant unequal release: a panel lets go when its
     foot reaches the end of the section, and the feet were at three
     different places, so the stack unzipped from the bottom. Sized this
     way every foot lands on the same line and they leave together, with
     no bottom margins needed to force it. */
  .chapter:nth-child(1) {
    top: var(--header-h, 86px); z-index: 1;
    height: calc(var(--band) * 3);
  }
  .chapter:nth-child(2) {
    top: calc(var(--header-h, 86px) + var(--band)); z-index: 2;
    height: calc(var(--band) * 2);
    margin-top: var(--band);
  }
  .chapter:nth-child(3) {
    top: calc(var(--header-h, 86px) + var(--band) * 2); z-index: 3;
    height: var(--band);
    margin-top: var(--band);
  }
}
/* A short window cannot hold three bands and the words both, so there the
   panels are sized by their content and simply stack up the page with no
   sticking at all. */
@media (min-width: 901px) and (max-height: 759px) {
  /* :nth-child(n) matches every panel and carries the same weight as the
     :nth-child(1..3) rules above, so being later in the sheet it wins.
     Without it the panels kept their three-two-one heights here and
     stood as tall colour fields with a band of content at the top. */
  .chapter:nth-child(n) {
    position: static;
    height: auto;
    min-height: 232px;
    margin-top: 0;
    grid-template-rows: auto;
  }
  .chapters::after { display: none; }
}

/* ---------- Credentials strip ---------- */
.creds { background: var(--ed-cream); color: var(--ed-ink); padding: clamp(36px, 5vw, 64px) var(--ed-gutter); }
.creds ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.creds li { border-left: 1px solid rgba(26,26,26,.2); padding-left: 18px; display: grid; gap: 6px; }
.creds strong { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.creds strong b { font-weight: inherit; }
.creds span { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.creds > p { margin: 22px 0 0; font-size: .92rem; opacity: .8; }
.creds > p a { color: var(--ed-deep); }
@media (max-width: 900px) { .creds ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .creds ul { grid-template-columns: 1fr; } }

/* ---------- Warranty ---------- */
.warranty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
  padding: clamp(48px, 7vw, 110px) var(--ed-gutter);
  background: var(--ed-deep);
  color: #fff;
}
.warranty-num { display: flex; align-items: baseline; gap: 18px; color: var(--ed-cream); }
.warranty-num .w-big { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(6rem, 16vw, 15rem); line-height: .85; letter-spacing: .02em; }
.warranty-num .w-big b { font-weight: inherit; }
.warranty-num .w-small { font-family: var(--ed-serif); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: .12em; text-transform: uppercase; }
.warranty-text { max-width: 46ch; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.warranty-text p { margin: 0 0 18px; font-size: 1.06rem; line-height: 1.62; opacity: .94; }
@media (max-width: 900px) {
  .warranty { grid-template-columns: 1fr; align-items: start; }
  .warranty-text { justify-self: start; text-align: left; align-items: flex-start; }
}

/* ---------- FAQ field ---------- */
.faq-field {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(30px, 6vw, 120px);
  padding: clamp(56px, 8vw, 120px) var(--ed-gutter);
  background: var(--ed-ink);
  color: #fff;
}
.faq-field-title {
  margin: 0;
  text-align: right;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffb3b2;
}
.faq-field-list { max-width: 64ch; }
.faq-field .faq-item {
  border: 0; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; background: transparent; margin: 0;
}
.faq-field .faq-item summary {
  padding: 22px 44px 22px 0;
  font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  letter-spacing: .05em; text-transform: uppercase; color: #ffb3b2; line-height: 1.2; background: transparent;
}
.faq-field .faq-item summary:hover { color: #fff; }
.faq-field .faq-item summary span::before, .faq-field .faq-item summary span::after { background: #ffb3b2; }
.faq-field .faq-answer { padding: 0 0 24px; background: transparent; border: 0; }
.faq-field .faq-item[open] summary span { background: transparent; }
.faq-field .faq-item summary span { border-color: #ffb3b2; background: transparent; }
.faq-field .faq-answer p { color: rgba(255,255,255,.92); font-size: 1.06rem; line-height: 1.62; max-width: 58ch; margin: 0; }
.faq-field .ed-link { margin-top: 26px; color: #fff; }
@media (max-width: 900px) {
  .faq-field { grid-template-columns: 1fr; gap: 24px; }
  .faq-field-title { text-align: left; }
}

/* ---------- Photo marquee + floating testimonial ---------- */
.gallery { position: relative; background: var(--ed-ink); padding: 0 0 72px; }
.gallery .marquee { --mq-gap: 0px; margin: 0; }
.gallery .marquee-viewport { width: 100vw; margin: 0; -webkit-mask-image: none; mask-image: none; }
.gallery .marquee-track { gap: 0; padding: 0; }
.gallery .marquee.is-running .marquee-track { animation-duration: 90s; }
.gallery-track img { flex: 0 0 auto; width: clamp(180px, 22vw, 380px); height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gallery .marquee.is-static .marquee-viewport { display: flex; }
.gallery-quote {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -58%);
  width: min(560px, calc(100% - 40px));
  margin: 0;
  padding: 32px 34px 28px;
  background: rgba(26,26,26,.82);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gallery-quote blockquote { margin: 0 0 18px; padding: 0; border: 0; background: transparent; flex: none; font-size: 1.12rem; line-height: 1.6; color: #fff; }
.gallery-quote figcaption { display: grid; gap: 2px; }
.gallery-quote figcaption strong { font-family: var(--ed-serif); font-weight: 500; font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; }
.gallery-quote figcaption span { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.gallery-dots { display: flex; gap: 6px; margin-top: 18px; }
.gallery-dots button {
  width: 44px; height: 44px; margin: -14px -8px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
}
.gallery-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.4); }
.gallery-dots button[aria-selected="true"]::after { background: var(--ed-red); transform: translate(-50%,-50%) scale(1.3); }
.gallery-controls { position: absolute; right: var(--ed-gutter); bottom: 16px; margin: 0; }
.gallery .marquee-toggle { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.gallery .marquee-icon::before, .gallery .marquee-icon::after { background: #fff; }
@media (max-width: 700px) {
  .gallery { padding-bottom: 300px; }
  .gallery-quote { top: auto; bottom: 72px; transform: translateX(-50%); padding: 24px 22px; }
  .gallery-controls { right: 50%; transform: translateX(50%); }
}

/* ---------- Numbered strip ---------- */
.strip, .guides { background: var(--ed-blush); color: var(--ed-ink); padding: clamp(48px, 6vw, 88px) var(--ed-gutter); }
.strip-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.strip-head .ed-serif-sm { margin: 0; }
.strip-scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip-scroller::-webkit-scrollbar { display: none; }
.strip-row { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 3vw, 48px); }
.strip-row li { flex: 0 0 clamp(200px, 19vw, 280px); scroll-snap-align: start; }
.strip-row a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.strip-num { font-family: var(--ed-serif); font-size: 1.3rem; letter-spacing: .12em; }
.strip-name { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; min-height: 2.6em; }
.strip-row img, .strip-blank { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; height: auto; background: #f3d9d5; }
.strip-blank { position: relative; overflow: hidden; }
.strip-blank::before { content: ""; position: absolute; left: 50%; top: 22%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: rgba(26,26,26,.16); }
.strip-blank::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 62%; aspect-ratio: 1; border-radius: 50% 50% 0 0; transform: translateX(-50%); background: rgba(26,26,26,.16); }
.strip-row a:hover img, .strip-row a:focus-visible img { opacity: .88; }
.strip-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.strip-nav button {
  width: 48px; height: 48px; border: 1px solid rgba(26,26,26,.4); background: transparent; color: var(--ed-ink);
  border-radius: 50%; font-size: 1.2rem; cursor: pointer;
}
.strip-nav button:hover, .strip-nav button:focus-visible { background: var(--ed-ink); color: #fff; }
.strip .ed-note { margin: 16px 0 0; }

/* ---------- Guides ---------- */
.guides { background: #fff; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.guide { display: grid; gap: 8px; color: inherit; text-decoration: none; align-content: start; }
.guide img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: 8px; }
.guide h3 { margin: 0; font-family: var(--ed-serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: .02em; }
.guide p { margin: 0; font-size: 1rem; line-height: 1.55; opacity: .85; }
.guide:hover h3, .guide:focus-visible h3 { color: var(--ed-deep); }
@media (max-width: 900px) { .guides-grid { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pill, .ed-link { transition: none; }
}

/* ---------- Inner-page cover (jiun's about hero): photograph, page name at the foot ---------- */
.cover {
  position: relative;
  min-height: 78vh;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 20px clamp(48px, 8vh, 96px);
  background: var(--ed-ink);
  isolation: isolate;
  overflow: hidden;
}
.cover-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* The doorway photograph is a 2:1 crop with the subject's head close to the
   top edge, so centring it inside a taller cover cuts her head off on wide
   screens. Bias the crop upwards on that page only. */
/* Cover photographs sit below the header, not behind it.

   The cover is full-bleed and the header is fixed on top of it, so the top
   86px of every cover photograph was underneath an opaque white bar. On
   these pictures that band is exactly where the heads are, which is why
   each page had ended up with its own hand-tuned object-position: eight
   lines of guesswork compensating for one layout fact.

   The image is offset by the header height instead. The strip that opens
   above it is the cover's own dark ground and sits behind the header, so
   it is never visible: the header is opaque on every page that has a
   cover, and once the page scrolls the strip has gone off the top.

   One focus value now serves all seven. These photographs are all shot
   with the subject in the upper half, so the crop is biased upwards; any
   page that ever needs its own can set --cover-focus on the body. */
:root {
  --header-h: 86px;
  --cover-focus: 34%;
  /* One scrim for every hero on the site, so the homepage and the seven
     inner covers are shaded the same way rather than each carrying its own
     gradient. Even across the frame, lifting only at the foot where the
     title sits. */
  --scrim: linear-gradient(180deg,
    rgba(26,26,26,.60) 0%,
    rgba(26,26,26,.56) 42%,
    rgba(26,26,26,.60) 70%,
    rgba(26,26,26,.78) 100%);
}
@media (max-width: 760px) { :root { --header-h: 72px; } }

.cover-img {
  top: var(--header-h);
  height: calc(100% - var(--header-h));
  object-position: 50% var(--cover-focus);
}
/* The one photograph that cannot take the common focus: it is a 2:1 crop
   with the subject's head hard against the top edge, so there is no
   headroom to give away. */
body[data-page="caregivers"] { --cover-focus: 2%; }
.cover-shade { position: absolute; inset: var(--header-h) 0 0 0; z-index: -1; background: linear-gradient(180deg, rgba(26,26,26,.5) 0%, rgba(26,26,26,0) 30%, rgba(26,26,26,0) 55%, rgba(26,26,26,.7) 100%); }
.cover-title { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; }
.cover-title .landing-title-big { font-size: clamp(2.8rem, 8vw, 7.6rem); }
@media (max-width: 700px) { .cover { min-height: 62vh; } }

/* Intro field: the H1 and its description on a blush field */
.intro-field {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  padding: clamp(48px, 7vw, 100px) var(--ed-gutter);
  background: var(--ed-blush);
  color: var(--ed-ink);
}
.intro-field h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.intro-field-text { margin: 0; max-width: 46ch; font-size: 1.12rem; line-height: 1.65; }
@media (max-width: 900px) { .intro-field { grid-template-columns: 1fr; } }

/* Closing call to action field */
.cta-field {
  display: grid;
  gap: 24px;
  justify-items: start;
  padding: clamp(56px, 8vw, 120px) var(--ed-gutter);
  background: var(--ed-deep);
  color: #fff;
}
.cta-field .ed-quote { max-width: 26ch; font-size: clamp(2rem, 3.4vw, 3.4rem); }

/* ---------- Legacy surfaces brought into the editorial language ----------
   The inner pages still use the earlier section components. These rules
   square them off, swap their headings to the serif and strip the card fills
   so they sit with the new bands rather than against them. */
main :where(.section, .care-boundary, .contact-section, .find-us) :where(*):not(.pill):not(.button):not(.chip):not(.bio-btn):not(.strip-nav button):not(.gallery-dots button):not([class*="map"]):not(svg *):not(.enquiry-form):not(.enquiry-form *):not(.contact-methods a):not(.contact-licence):not(.area-directory button):not(.find-us-map *):not(.area-readout) { border-radius: 0; }
main .section, main .care-boundary, main .aftercare-section, main .contact-section, main .find-us, main .group-trust-strip { border-radius: 0; }
main :where(.section, .care-boundary, .contact-section, .find-us) h2 {
  font-family: var(--ed-serif); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.06;
}
main :where(.section, .care-boundary, .contact-section, .find-us) h3 {
  font-family: var(--ed-serif); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; font-size: 1.35rem; line-height: 1.15;
}
main .section-index { font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
main .section-index::before { display: none; }
/* card fills become hairlines */
main .section :where(.care-card, .care-need, .support-card, .article-card, .preview-card, .value-card, .heritage-card, .process-step, .step, .contact-card, .info-card, .service-detail-card, .blog-card, .feature-row) {
  background: transparent; box-shadow: none; border: 1px solid rgba(26,26,26,.18);
}

/* Dark boxed sections on inner pages become full-bleed fields */
main .care-boundary, main .aftercare-section, main .group-trust-strip { margin: 0; width: 100%; max-width: none; border-radius: 0; }
main .care-boundary { background: var(--ed-deep); }
main .aftercare-section { background: var(--ed-ink); }
main .care-boundary h2, main .aftercare-section h2 { color: #fff; }
main .care-boundary .section-index { color: #ffb3b2; }
main .contact-section { background: var(--ed-blush); color: var(--ed-ink); }
main .contact-section .section-index { color: var(--ed-deep); }
main .care-boundary span, main .care-boundary .section-index { color: #ffd6d4; }
/* inline links keep a 44px hit area without changing the line box */
.creds > p a, main .find-us a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- Homepage biodata: a split with the helpers as a numbered list ---------- */
.split--list .split-field { justify-content: flex-start; gap: 28px; }
.helper-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.22); }
.helper-list li { border-bottom: 1px solid rgba(255,255,255,.22); }
.helper-list a {
  display: grid; grid-template-columns: 4ch minmax(0,1fr) auto; column-gap: 18px; align-items: baseline;
  padding: 18px 0; color: inherit; text-decoration: none;
}
.helper-list .strip-num { font-size: 1.25rem; opacity: .75; }
.helper-list .helper-name { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.4rem, 1.9vw, 1.8rem); letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.helper-list .helper-meta { display: block; margin-top: 4px; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-family: var(--ed-sans); }
.helper-list .helper-go { font-family: var(--ed-sans); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.helper-list a:hover .helper-name, .helper-list a:focus-visible .helper-name { color: #ffb3b2; }
.helper-list a:hover .helper-go { opacity: 1; }
@media (max-width: 600px) { .helper-list a { grid-template-columns: 4ch minmax(0,1fr); } .helper-list .helper-go { grid-column: 2; margin-top: 6px; } }

/* ---------- Softer edges on stand-alone elements ----------
   Section-filling photographs (covers, bands, splits, chapters, marquee)
   stay square; anything that sits on its own gets a radius. */
.button, .form-button, .bio-btn, .marquee-toggle, .strip-nav button, .wa-open, .wa-copy { border-radius: 999px !important; }
.split-inset, .split-inset img, .guide img, .article-card img, .blog-card img, .support-gallery img, .support-gallery figure,
.bio-photo, .bio-photo img, .strip-row img, .strip-blank, .gallery-quote, .map-card, .find-us iframe, .bio-card, .wa-sheet-panel { border-radius: 14px; overflow: hidden; }
/* The rule above this one squares everything inside a section, and its
   long :not() chain carries a specificity these cards could not beat, so
   the radius they were given here never applied and they have been
   rendering with sharp corners. !important, as the button rule two lines
   up already does for the same reason. */
main .section :where(.service-detail-card, .blog-card, .feature-row, .care-need, .preview-card, .article-card, .contact-card) { border-radius: 18px !important; }
.creds li { border-radius: 0; }

/* ---------- Legibility of words over photographs ----------
   A soft dark pool behind the word cluster and the intro, plus a tighter
   shadow on the letters, so bright or busy parts of a photograph never
   sit directly behind the type. */
.band-shade {
  background:
    radial-gradient(70% 75% at 88% 88%, rgba(26,26,26,.78) 0%, rgba(26,26,26,.45) 45%, rgba(26,26,26,0) 75%),
    radial-gradient(55% 60% at 8% 10%, rgba(26,26,26,.7) 0%, rgba(26,26,26,.35) 45%, rgba(26,26,26,0) 75%),
    linear-gradient(180deg, rgba(26,26,26,.35) 0%, rgba(26,26,26,0) 35%, rgba(26,26,26,0) 60%, rgba(26,26,26,.6) 100%);
}
.band-words .w-big, .landing-title-big, .cover-title .landing-title-big {
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 4px 28px rgba(0,0,0,.55);
}
.band-words .w-small, .band-intro, .landing-title-small { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.5); }
/* The cover wash is even, not top-heavy. It used to fall to nothing across
   the middle, which on a phone read as a dark band at the top over a bright
   picture underneath. One tone across the whole frame, lifting a little at
   the foot where the title sits. */
.cover-shade {
  background: linear-gradient(180deg,
    rgba(26,26,26,.52) 0%,
    rgba(26,26,26,.46) 42%,
    rgba(26,26,26,.54) 70%,
    rgba(26,26,26,.74) 100%);
}
@media (max-width: 960px) {
  .band-shade { background: linear-gradient(180deg, rgba(26,26,26,.62) 0%, rgba(26,26,26,.35) 40%, rgba(26,26,26,.72) 100%); }
}

/* ---------- Header: quieter navigation, inline language switch ---------- */
.desktop-nav > a, .nav-group > button { font-weight: 400; letter-spacing: .01em; }
.desktop-nav > a[aria-current="page"] { font-weight: 500; }
.header-phone, .header-phone a { font-weight: 500; }
.language-toggle { display: none !important; }
.language-options {
  position: static; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  opacity: 1; visibility: visible; transform: none; transition: none;
  display: flex; align-items: center; gap: 2px;
}
.language-options button {
  width: auto; min-height: 44px; padding: 0 8px; border-radius: 0; background: transparent; color: inherit; text-align: center;
  font: 500 .82rem/1 "DM Sans", "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .7;
  border-bottom: 1px solid transparent;
}
.language-options button + button::before { content: ""; }
.language-options button:hover { background: transparent; color: inherit; opacity: 1; }
.language-options button.active { background: transparent; color: var(--ed-deep); opacity: 1; border-bottom-color: currentColor; }
body[data-page="home"] .site-header:not(.scrolled) .language-options button.active { color: #fff; }

/* ---------- WhatsApp bubble shown on every page, including the landing ---------- */
@media (min-width: 961px) {
  body[data-page="home"] .whatsapp-bubble { display: inline-flex; bottom: 28px; }
  body[data-page="home"] .landing-actions { bottom: clamp(124px, 14vh, 176px); }
}
.whatsapp-bubble { border-radius: 999px; }
@media (min-width: 961px) {
  .landing-lang { gap: 4px; }
  .landing-lang button {
    width: auto; height: 44px; min-width: 44px; padding: 0 8px; border: 0; border-radius: 0; background: transparent !important;
    color: rgba(255,255,255,.75); font: 500 .82rem/1 "DM Sans", "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid transparent;
  }
  .landing-lang button:hover { color: #fff; }
  .landing-lang button.active { color: #fff; border-bottom-color: #ffb3b2; }
}

/* ---------- Motion on every viewport ----------
   The reveal items above get a gentle rise; the stacked chapters keep
   their sticky overlap on phones too, one full screen per chapter. */
.reveal-item { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-item.is-visible { opacity: 1; transform: none; }
.band-words.reveal-item { transform: translateY(18px); }
.band-words.reveal-item.is-visible { transform: none; }
@media (max-width: 900px) {
  .chapter { position: sticky; top: 0; min-height: 100svh; grid-template-rows: auto 1fr; }
  .chapter-media { aspect-ratio: auto; height: 44svh; max-height: none; }
  .chapter-copy { align-content: start; padding-top: 30px; }
  .chapters { background: var(--ed-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1; transform: none; transition: none; }
  .chapter { position: static; min-height: 0; }
}

/* ---------- Ambient video ---------- */
.hero-video { object-fit: cover; }
.split-video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .split-media .split-video { aspect-ratio: 1 / 1; } }

/* ---------- About: the legal record ---------- */
.record { background: var(--ed-cream); color: var(--ed-ink); padding: clamp(48px, 7vw, 100px) var(--ed-gutter); }
.record-head { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 48px); }
.record-head p:last-child { margin: 0; font-size: 1.06rem; line-height: 1.62; }
.record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 80px); margin: 0; }
.record-list > div { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid rgba(26,26,26,.18); }
.record-list dt { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.record-list dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.record > .ed-note { margin: 26px 0 0; max-width: 62ch; }
@media (max-width: 820px) {
  .record-list { grid-template-columns: 1fr; }
  .record-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- About: what we do / do not ---------- */
.stance { padding: clamp(48px, 7vw, 100px) var(--ed-gutter); background: #fff; color: var(--ed-ink); }
.stance > .ed-serif-sm { margin-bottom: clamp(24px, 3vw, 40px); }
.stance-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); }
.stance-col ul { list-style: none; margin: 0; padding: 0; }
.stance-col li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid rgba(26,26,26,.16); font-size: 1.04rem; line-height: 1.5; }
.stance-col li::before { position: absolute; left: 0; top: 14px; font-size: 1.1rem; line-height: 1.4; }
.stance-col--yes li::before { content: "\2713"; color: var(--ed-deep); }
.stance-col--no li::before { content: "\2715"; color: rgba(26,26,26,.4); }
.stance-col--no li { opacity: .82; }
.stance--single { background: var(--ed-blush); }
.stance-single { max-width: 62ch; }
.stance-single p { margin: 0 0 14px; font-size: 1.06rem; line-height: 1.65; }
.stance-single a { color: var(--ed-deep); display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (max-width: 820px) { .stance-cols { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- About: vetting ledger ---------- */
.ledger { padding: clamp(48px, 7vw, 100px) var(--ed-gutter); background: var(--ed-ink); color: #fff; }
.ledger-head { max-width: 52ch; margin-bottom: clamp(28px, 4vw, 48px); }
.ledger-head p:last-child { margin: 0; font-size: 1.06rem; line-height: 1.62; color: rgba(255,255,255,.9); }
.ledger-rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ledger-rows li { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); padding: 24px 0; border-top: 1px solid rgba(255,255,255,.22); align-items: start; }
.ledger-num { font-family: var(--ed-serif); font-size: 1.3rem; letter-spacing: .12em; color: #ffb3b2; }
.ledger-rows h3 { margin: 0 0 8px; font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.35rem, 1.9vw, 1.7rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.ledger-rows p { margin: 0; max-width: 62ch; font-size: 1.04rem; line-height: 1.6; color: rgba(255,255,255,.9); }
@media (max-width: 640px) { .ledger-rows li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- FAQ page: search, topic chips, grouped questions ---------- */
.faq-browse { padding: clamp(40px, 6vw, 80px) var(--ed-gutter) clamp(56px, 8vw, 110px); background: var(--ed-ink); color: #fff; }
.faq-tools { position: sticky; top: 74px; z-index: 4; padding: 20px 0 18px; margin-bottom: 10px; background: var(--ed-ink); }
.faq-search { display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 0 20px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.06); }
.faq-search:focus-within { border-color: #ffb3b2; }
.faq-search svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.8; stroke-linecap: round; }
/* A text input carries an intrinsic width from its size attribute, and a
   flex item will not shrink below that unless min-width is cleared. Left
   alone it pushed the search box past the screen edge on a phone and gave
   the FAQ and guides pages a horizontal scroll. */
.faq-search input { min-width: 0; flex: 1; min-height: 52px; border: 0; background: transparent; color: #fff; font: 400 1.02rem/1.4 var(--ed-sans); }
.faq-search input::placeholder { color: rgba(255,255,255,.55); }
.faq-search input:focus { outline: none; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.faq-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: transparent; color: rgba(255,255,255,.88);
  font: 500 .92rem/1 var(--ed-sans); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.faq-chip span { font-size: .8rem; opacity: .6; font-variant-numeric: tabular-nums; }
.faq-chip:hover { border-color: #fff; color: #fff; }
.faq-chip[aria-pressed="true"] { background: var(--ed-red); border-color: var(--ed-red); color: var(--ed-ink); font-weight: 600; }
.faq-chip[aria-pressed="true"] span { opacity: .7; }
.faq-count { margin: 14px 0 0; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.faq-group { margin-top: clamp(28px, 4vw, 48px); }
.faq-group[hidden] { display: none; }
.faq-group-title {
  margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.28);
  font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: .06em; text-transform: uppercase; color: #ffb3b2;
}
.faq-browse .faq-item { border: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; background: transparent; margin: 0; }
.faq-browse .faq-item[hidden] { display: none; }
.faq-browse .faq-item summary {
  padding: 20px 44px 20px 0; background: transparent; color: #fff; line-height: 1.35;
  font-family: var(--ed-sans); font-weight: 500; font-size: 1.08rem; letter-spacing: 0; text-transform: none;
}
.faq-browse .faq-item summary:hover { color: #ffb3b2; }
.faq-browse .faq-item[open] > summary { color: #ffb3b2; }
.faq-browse .faq-item summary span::before,
.faq-browse .faq-item summary span::after { background: #ffb3b2; }
.faq-browse .faq-item summary span { border-color: rgba(255,255,255,.4); background: transparent; }
.faq-browse .faq-answer { padding: 0 0 22px; background: transparent; border: 0; }
.faq-browse .faq-answer p { max-width: 68ch; margin: 0 0 12px; padding: 0; color: rgba(255,255,255,.9); font-size: 1.04rem; line-height: 1.65; }
.faq-permalink { margin: 6px 0 0 !important; }
.faq-permalink a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; border-bottom: 1px solid transparent; }
.faq-permalink a:hover, .faq-permalink a:focus-visible { color: #fff; border-bottom-color: currentColor; }
.faq-empty { margin: 40px 0 0; font-size: 1.06rem; color: rgba(255,255,255,.85); }
.faq-empty a { color: #ffb3b2; }
@media (max-width: 700px) {
  .faq-tools { top: 62px; }
  .faq-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--ed-gutter)); padding-inline: var(--ed-gutter); }
  .faq-chips::-webkit-scrollbar { display: none; }
  .faq-chip { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .faq-chip { transition: none; } }

/* ---------- Care guides index ---------- */
.guides-index { background: #fff; color: var(--ed-ink); padding: clamp(44px, 6vw, 84px) var(--ed-gutter) clamp(56px, 8vw, 110px); }
.guides-index .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.guide--soon { display: grid; gap: 8px; align-content: start; }
.guide-cat { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-deep); }
.guide-soon { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.guides-index .guide img, .guides-index .guide--soon img { border-radius: 14px; }
.guides-tools { position: static; background: transparent; margin-top: clamp(40px, 5vw, 70px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid rgba(26,26,26,.16); }
.guides-tools .faq-search { border-color: rgba(26,26,26,.3); background: transparent; }
.guides-tools .faq-search svg { stroke: rgba(26,26,26,.55); }
.guides-tools .faq-search input { color: var(--ed-ink); }
.guides-tools .faq-search input::placeholder { color: rgba(26,26,26,.5); }
.guides-tools .faq-chip { border-color: rgba(26,26,26,.28); color: var(--ed-ink); }
.guides-tools .faq-chip:hover { border-color: var(--ed-ink); }
.guides-tools .faq-chip[aria-pressed="true"] { background: var(--ed-red); border-color: var(--ed-red); color: var(--ed-ink); }
.guides-tools .faq-count { color: rgba(26,26,26,.65); }
.guide-rows { list-style: none; margin: 28px 0 0; padding: 0; }
.guide-rows li { border-top: 1px solid rgba(26,26,26,.16); }
.guide-rows li[hidden] { display: none; }
.guide-rows a, .guide-row-inner {
  display: grid; grid-template-columns: 5ch minmax(0, 1fr) auto; gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline; padding: 20px 0; color: inherit; text-decoration: none;
}
.guide-rows .strip-num { opacity: .5; }
.guide-row-title { display: block; font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.15; letter-spacing: .02em; }
.guide-row-summary { display: block; margin-top: 6px; max-width: 68ch; font-size: 1rem; line-height: 1.55; opacity: .82; }
.guide-row-cat { display: block; margin-top: 8px; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-deep); }
.guide-row-go { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.guide-row-go--soon { opacity: .45; font-weight: 500; }
.guide-rows a:hover .guide-row-title { color: var(--ed-deep); }
.guides-index .faq-empty { color: var(--ed-ink); }
.guides-index .faq-empty a { color: var(--ed-deep); }
.guides-note { margin-top: 34px; }
@media (max-width: 900px) { .guides-index .guides-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .guide-rows a, .guide-row-inner { grid-template-columns: 5ch minmax(0, 1fr); }
  .guide-row-go { grid-column: 2; margin-top: 8px; }
}

/* The split panels are square while the clips are 16:9, so the crop is
   pulled left of centre to keep the elderly person in frame rather than
   trimming her off the edge. The posters are cropped to match. */
.split-media .split-video { object-position: 40% 50%; }

/* ---------- Phone contact dock ----------
   The old bar was two loud colour blocks. This is a single floating ink
   capsule in the site's pill language: call on the left, WhatsApp on the
   right, a hairline between them. Targets stay 56px tall. */
@media (max-width: 760px) {
  .contact-bar {
    inset: auto 16px calc(14px + env(safe-area-inset-bottom)) 16px;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    border: 0;
    border-radius: 999px;
    background: var(--ed-ink);
    box-shadow: 0 14px 34px rgba(26,26,26,.32);
    padding: 0;
    overflow: hidden;
  }
  .contact-bar::before {
    /* the hairline divider, placed as the middle grid column */
    content: ""; grid-column: 2; align-self: center; width: 1px; height: 28px; background: rgba(255,255,255,.22);
  }
  .contact-bar a, .contact-bar button {
    min-height: 56px; gap: 10px; padding: 0 8px;
    background: transparent !important; color: #fff !important;
    font: 500 .98rem/1 var(--ed-sans); letter-spacing: .02em;
  }
  .contact-bar .bar-call { grid-column: 1; grid-row: 1; }
  .contact-bar .bar-whatsapp { grid-column: 3; grid-row: 1; }
  .contact-bar .bar-call:active, .contact-bar .bar-whatsapp:active { background: rgba(255,255,255,.1) !important; }
  .contact-bar svg { width: 20px; height: 20px; flex: 0 0 20px; }
  .contact-bar .bar-call svg { color: #ffb3b2; }
  .contact-bar .bar-whatsapp svg { color: #5fd38a; }
  /* keep the last content clear of the dock */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Typeface: Century Gothic
   Century Gothic ships with macOS, Windows and Office, but not with
   Android or most Linux browsers, so Questrial (a near-identical
   geometric sans from Google Fonts) stands in where it is missing.
   The display type moves to the same face; Century Gothic sets wide,
   so the display sizes and tracking come down a little to compensate.
   ============================================================ */
:root {
  --cg: "Century Gothic", "CenturyGothic", "URW Gothic", "Questrial", "Avant Garde", "TeX Gyre Adventor", sans-serif;
  --ed-sans: var(--cg);
  --ed-serif: var(--cg);
  --serif: var(--cg);
  --ed-display: clamp(2.6rem, 5.4vw, 5.4rem);
}
html, body, button, input, select, textarea, .button, .pill, .ed-link, .ed-serif-sm, .ed-quote,
h1, h2, h3, h4, .landing-title-big, .band-words .w-big, .chapter-copy h2, .chapter-num, .strip-num,
.warranty-num .w-big, .warranty-num .w-small, .faq-field-title, .faq-group-title, .intro-field h1,
.cover-title .landing-title-big, .helper-list .helper-name, .guide h3, .guide-row-title, .ledger-rows h3,
.ledger-num, .record-list dt, .creds strong, .closing-text, .wa-sheet-title, .gallery-quote figcaption strong,
.landing-nav a, .landing-group, .desktop-nav > a, .nav-group > button, .nav-dropdown a, .mobile-nav a {
  font-family: var(--cg) !important;
}
/* The serif sizes were tuned for Cormorant's narrow caps; Century Gothic is
   wider, so headings come down and tracking is relaxed. */
.ed-serif-sm { font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: .06em; font-weight: 400; }
.ed-quote { font-size: clamp(1.35rem, 1.9vw, 1.8rem); letter-spacing: .04em; font-weight: 400; }
.landing-title-big, .cover-title .landing-title-big { font-size: clamp(2.4rem, 5.4vw, 5.2rem); letter-spacing: .08em; font-weight: 400; }
.chapter-copy h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: .06em; font-weight: 400; }
.intro-field h1 { font-size: clamp(1.7rem, 2.8vw, 2.7rem); letter-spacing: .04em; font-weight: 400; }
.faq-field-title, .faq-group-title { font-weight: 400; }
.warranty-num .w-big { font-size: clamp(5rem, 13vw, 12rem); font-weight: 400; }
.helper-list .helper-name, .ledger-rows h3 { font-weight: 400; letter-spacing: .06em; }
.guide h3, .guide-row-title { font-weight: 400; letter-spacing: .01em; text-transform: none; }
.pill, .ed-link { font-size: .92rem; letter-spacing: .14em; }
.closing-text { font-weight: 400; }
.creds strong { font-weight: 400; letter-spacing: .04em; }
.landing-nav a { font-weight: 400; letter-spacing: .02em; }

/* ============================================================
   Biodata page: colour fields instead of a white sheet
   TC read the page as "all white". The browse area now sits on the
   blush ground, the filter rail becomes an ink field like the splits
   elsewhere, and each card is a white sheet lifted off that colour.
   ============================================================ */
main .bio-layout { background: var(--ed-blush); }

/* ---- Filter rail as a dark field ---- */
.bio-filters-inner {
  background: var(--ed-ink);
  color: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(26,26,26,.18);
  overflow: hidden;
}
.bio-filters-head { border-bottom: 1px solid rgba(255,255,255,.16); }
.bio-filters-head h2 { color: #fff; font-weight: 400; letter-spacing: .04em; }
.bio-filters-head p { color: rgba(255,255,255,.7); }
.bio-filters-close { color: #fff; }
.bio-search { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.bio-search:focus-within { border-color: #ffb3b2; background: rgba(255,255,255,.1); }
.bio-search svg { stroke: rgba(255,255,255,.65); }
.bio-search input { color: #fff; }
.bio-search input::placeholder { color: rgba(255,255,255,.5); }
.bio-facet > summary, .bio-facet h3, .bio-facet-list h3, .bio-facet-list legend,
.bio-facet-list .bio-facet-title { color: #ffb3b2 !important; }
.bio-facet-list p, .bio-facet-list small { color: rgba(255,255,255,.66) !important; }
.bio-facet-list fieldset { border-color: rgba(255,255,255,.14); }
.bio-facet-list .chip {
  border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9); background: transparent;
}
.bio-facet-list .chip:hover { border-color: #fff; color: #fff; }
.bio-facet-list .chip[aria-checked="true"] {
  background: var(--ed-red); border-color: var(--ed-red); color: var(--ed-ink); font-weight: 600;
}
.bio-filters-foot { border-top: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.bio-filters-foot .bio-linkbtn { color: rgba(255,255,255,.8); }
.bio-filters-foot .bio-linkbtn:hover { color: #fff; }

/* ---- Results column on the blush ground ---- */
.bio-toolbar { border-bottom: 1px solid rgba(26,26,26,.16); }
.bio-count { color: rgba(26,26,26,.7); }
.bio-filter-open { border-color: rgba(26,26,26,.3); background: #fff; }

/* ---- Cards lifted off the colour ---- */
.bio-card {
  border: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26,26,26,.09);
}
.bio-card:hover { box-shadow: 0 16px 38px rgba(26,26,26,.16); transform: translateY(-2px); }
.bio-card { transition: box-shadow .25s ease, transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .bio-card { transition: none; } .bio-card:hover { transform: none; } }

/* The portraits are cut-outs on white, so the photo cell gets a soft
   tinted ground and a hairline to separate it from the card. */
.bio-photo {
  background: linear-gradient(160deg, #f7e6e3 0%, #efe2df 100%);
  border-right: 1px solid rgba(26,26,26,.08);
}
.bio-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(26,26,26,0), rgba(26,26,26,.05));
  pointer-events: none;
}
.bio-disclaimer { color: rgba(26,26,26,.66); }
@media (max-width: 980px) {
  .bio-filters-inner { border-radius: 0; box-shadow: none; }
  .bio-photo { border-right: 0; border-bottom: 1px solid rgba(26,26,26,.08); }
}

/* ---------- Photographs from TC's own placements (About) ----------
   Three portrait photographs taken at the office. Portrait because that is
   how the office photographs are shot; a landscape frame would crop faces
   out of a group standing under the licence board. */
.photos {
  background: var(--ed-cream);
  color: var(--ed-ink);
  padding: clamp(48px, 6vw, 88px) var(--ed-gutter);
}
.photos-head { max-width: 62ch; margin: 0 0 clamp(24px, 3vw, 40px); }
.photos-head h2 { margin: 6px 0 10px; }
.photos-head p { margin: 0; color: rgba(26, 26, 26, .72); }
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.photo-slot {
  margin: 0;
  min-width: 0;
  display: grid;
  align-content: start;   /* captions of different lengths must not stretch
                             or shift the frames they sit under */
  gap: 12px;
}
.photo-slot > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 32%;   /* faces sit in the upper third of these shots */
  border-radius: 14px;
  display: block;
  background: rgba(26, 26, 26, .05);
}
.photo-slot figcaption {
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, .66);
}
@media (max-width: 900px) {
  .photos-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .photo-slot > img { aspect-ratio: 4 / 5; }
}

/* ---------- Paying monthly (home, under the warranty) ----------
   The warranty above it is a solid red field with one giant number, so this
   one deliberately does the opposite: pale ground, the figure set as type
   rather than as a slab, and the three terms as a short list. Two shouting
   bands in a row would cancel each other out. */
.plan {
  background: var(--ed-blush);
  color: var(--ed-ink);
  padding: clamp(48px, 7vw, 96px) var(--ed-gutter);
}
.plan-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.plan-amount {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.plan-from {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .6);
  margin-bottom: 10px;
}
.plan-num {
  font-family: var(--ed-serif);
  font-weight: 500;
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  letter-spacing: .01em;
  color: var(--ed-deep);
}
.plan-per {
  font-family: var(--ed-serif);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .7);
  margin-top: 10px;
}
.plan-body { max-width: 58ch; }
.plan-body .pill { align-self: start; }
.plan-body h2 { margin: 0 0 16px; }
.plan-body > p { margin: 0 0 20px; font-size: 1.04rem; line-height: 1.62; }
.plan-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.plan-points li {
  position: relative;
  padding-left: 34px;
  font-size: 1.02rem;
  line-height: 1.5;
}
.plan-points li span { font-weight: 700; }
.plan-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ed-red);
  border-bottom: 2px solid var(--ed-red);
  transform: rotate(-45deg);
}
.plan-note {
  margin: 0 0 24px;
  padding-left: 14px;
  border-left: 2px solid rgba(26, 26, 26, .18);
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(26, 26, 26, .66);
}
@media (max-width: 900px) {
  .plan-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .plan-amount { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .plan-from { margin-bottom: 0; }
  .plan-per { margin-top: 0; }
}

/* ---------- TC deep red on the solid call-to-action buttons ----------
   The bright accent (#FF3D3D) is a fill colour that cannot carry white
   text at AA, so those buttons had to use ink-on-red. This deeper red
   does carry white, which is what TC asked for. It is applied only to the
   solid buttons and the NEW badge; the accent stays as it is everywhere
   else, in rules, underlines and small marks. */
:root { --tc-crimson: #8B0909; --tc-crimson-hover: #6E0707; }

.button,
.header-cta,
.landing-advisor,
.bio-btn--accent {
  background: var(--tc-crimson);
  color: #fff;
}
/* NEW is deliberately NOT crimson: matching Download Biodata made people
   try to click it. Its colour lives with the rest of the card, in
   biodata.css. */
.button:hover,
.header-cta:hover,
.landing-advisor:hover,
.bio-btn--accent:hover,
.site-header:not(.scrolled):not(.menu-open) .header-cta:hover {
  background: var(--tc-crimson-hover);
  color: #fff;
}
/* The header button is repainted for the transparent-header state further
   up the cascade, so that state has to be matched to be overridden. */
.site-header:not(.scrolled):not(.menu-open) .header-cta {
  background: var(--tc-crimson);
  color: #fff;
}
.site-header:not(.scrolled):not(.menu-open) .header-cta:hover { border-color: var(--tc-crimson-hover); }

/* Status sits beside the NEW badge at the right of the black bar, and is
   set larger: whether a helper is still available is the single thing a
   family looks for first on a card. */
.bio-flags { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bio-card .bio-status {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.bio-card .bio-status::after { width: 11px; height: 11px; }
@media (max-width: 560px) {
  .bio-flags { gap: 10px; }
  .bio-card .bio-status { font-size: .94rem; }
}

/* ---------- Testimonial band, enlarged ----------
   The photographs and the quote card were sized for a strip that sat
   between two much louder sections. On its own it read as a footnote, so
   the frames are taller, the card is wider and the quote itself is set at
   a size that matches the other pull quotes on the page. */
.gallery { padding-bottom: 88px; }
.gallery-track img { width: clamp(240px, 30vw, 520px); }
.gallery-quote {
  width: min(760px, calc(100% - 48px));
  padding: 44px 48px 38px;
}
.gallery-quote blockquote {
  margin-bottom: 24px;
  font-size: clamp(1.18rem, 1.5vw, 1.5rem);
  line-height: 1.55;
}
.gallery-quote figcaption strong { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.gallery-quote figcaption span { font-size: .9rem; }
.gallery-dots { margin-top: 22px; }
@media (max-width: 700px) {
  /* On a phone the card sits over the strip rather than beside it, so the
     type comes back down a step: at the desktop size the quote grew tall
     enough to cover the photographs it is meant to sit on. */
  .gallery { padding-bottom: 312px; }
  .gallery-track img { width: 280px; }
  .gallery-quote { padding: 26px 22px 22px; }
  .gallery-quote blockquote { margin-bottom: 18px; font-size: 1.06rem; }
  .gallery-quote figcaption strong { font-size: 1.45rem; }
  .gallery-dots { margin-top: 16px; }
}

/* ---------- Group video request ----------
   A family comparing four helpers was sending four separate WhatsApp
   messages, and TC was answering four threads about one household.
   Ticking helpers collects them into a tray that sends one message. */
.bio-pick {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 2px;
  color: rgba(26, 26, 26, .72);
  font-size: .92rem;
  cursor: pointer;
}
.bio-pick input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--tc-crimson);
  cursor: pointer;
}
.bio-pick:hover { color: var(--ed-ink); }
/* Drawn just outside the card, so the photo cannot cover it on any side. */
.bio-card.is-picked { outline: 2px solid var(--tc-crimson); outline-offset: 3px; }
.bio-card.is-picked .bio-pick { color: var(--tc-crimson); font-weight: 700; }

.bio-tray {
  position: fixed;
  z-index: 80;
  inset: auto 0 0 0;
  padding: 14px clamp(16px, 3vw, 40px) calc(14px + env(safe-area-inset-bottom));
  background: var(--ed-ink);
  color: #fff;
  box-shadow: 0 -12px 34px rgba(26, 26, 26, .28);
}
.bio-tray-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  flex-wrap: wrap;
}
.bio-tray-text { flex: 1 1 260px; min-width: 0; }
.bio-tray-count { margin: 0; font-size: 1.02rem; font-weight: 700; }
.bio-tray-names {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bio-tray-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bio-tray-actions .bio-btn { padding: 0 26px; }
.bio-tray-clear {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bio-tray-clear:hover { color: #fff; }

@media (max-width: 760px) {
  /* The phone already has the call and WhatsApp dock floating at the
     bottom, so the tray sits above it rather than underneath it. */
  .bio-tray { bottom: calc(86px + env(safe-area-inset-bottom)); padding-bottom: 14px; }
  .bio-tray-inner { gap: 12px; }
  .bio-tray-actions { width: 100%; }
  .bio-tray-actions .bio-btn {
    flex: 1 1 auto;
    padding: 0 14px;
    font-size: .86rem;
    letter-spacing: .06em;
  }
}
body.has-video-tray .whatsapp-bubble { display: none; }

/* ---------- Language switch: the Chinese label ----------
   In Bahasa Malaysia the menu labels are longer, and the switch was being
   squeezed until 中文 broke across two lines. The switch is small and fixed
   in size, so it should never be the thing that gives way. The Latin
   tracking is also dropped for the Chinese label: letter-spacing set for
   uppercase EN and BM pulls CJK glyphs apart. */
.language-menu, .language-options { flex: 0 0 auto; }
.language-options button { flex: 0 0 auto; white-space: nowrap; }
.language-options button[data-lang="zh"] {
  letter-spacing: 0;
  font-size: .92rem;
  padding-inline: 6px;
}
.mobile-languages button { white-space: nowrap; }

/* The Bahasa Malaysia menu labels are far wider than the English ones, and
   the header row is capped at the site's 1240px shell. Measured: English
   needs 1291px of screen, Chinese 1078px, and Bahasa Malaysia 2298px even
   with the header given a 1600px shell of its own. Malay cannot fit at any
   realistic screen size, so it uses the menu button at every width; that is
   the same control every visitor gets on a phone, not a downgrade invented
   for it. Left as it was, the bar simply ran off the right edge and took
   "Talk to an adviser" with it.

   English was collapsing only at 1020px and so was broken between 1020 and
   1291 as well. That breakpoint moves up to 1300.

   Shorter Malay labels would let the full bar come back on a laptop, for
   example "Warga emas" in place of "Penjagaan warga emas". That is wording
   for TC to approve, so it is not assumed here. */
@media (max-width: 1300px) {
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto auto; }
  .menu-toggle { display: block; }
}
/* Bahasa Malaysia keeps its navigation bar.

   The Malay labels are much wider than the English ones ("Penjagaan warga
   emas" is 20 characters where English uses 12), and the bar used to be
   hidden outright in Malay at every width. Width is bought back instead:
   the phone becomes icon-only but keeps its 44px target, since a visible
   way to call matters for this audience; the brand column, the nav gap and
   the label size all come down a step; and the header is allowed a little
   more of the window. */
/* Only where the bar actually exists. Below 1301px every language uses the
   menu button, so there is no nav to make room for, and applying these
   here changed the logo's size on a phone the moment someone switched to
   Malay: the brand box is a fixed window that crops the logo, and any
   change of width moves the crop. */
@media (min-width: 1301px) {
  html:lang(ms) .site-header .shell { width: min(calc(100% - 32px), 1560px); }
  html:lang(ms) .header-inner { gap: 12px; grid-template-columns: 152px 1fr auto; }
  html:lang(ms) .brand { width: 148px; }
  html:lang(ms) .brand img { width: 146px; }
  html:lang(ms) .desktop-nav { gap: 8px; font-size: .78rem; letter-spacing: 0; }
  html:lang(ms) .header-actions { gap: 8px; }
  html:lang(ms) .header-cta { padding: 0 14px; font-size: .84rem; }
}
html:lang(ms) .header-phone span { display: none; }
html:lang(ms) .header-phone { padding: 0 8px; min-width: 44px; justify-content: center; }

/* ============================================================
   Mobile menu: language first, and a panel that ends where it
   looks like it ends
   ============================================================ */

/* The language row is rendered last in site-shell.js, after Contact, so
   changing languages meant scrolling the whole menu to find it. It is moved
   with `order` rather than by editing the markup, because the same markup
   feeds the desktop switch.

   Not inside a media query. The menu is only ever visible when the burger
   is showing, and that is not only below 1300px: Bahasa Malaysia uses the
   burger at every width, because its labels cannot fit the bar. A rule
   scoped to max-width:1300px would leave Malay visitors on a laptop with
   the switch back at the bottom. */
.mobile-nav {
  display: flex;
  flex-direction: column;
  /* The header is fixed above the panel, so the panel gets what is left of
     the viewport. dvh, not vh: on iOS Safari vh excludes the browser chrome,
     which made the panel taller than the screen and left it scrolling into
     empty space past its own last item. */
  max-height: calc(100dvh - 86px);
  overflow-y: auto;
  /* Stops the drag continuing into the page behind once the menu itself has
     run out. `overflow: hidden` on body does not hold on iOS Safari. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The menu is opened and closed with the `hidden` attribute, and `display`
   above would otherwise override it and leave the menu permanently open. */
.mobile-nav[hidden] { display: none; }

.mobile-nav-call { order: -2; }        /* call stays first */
.mobile-languages { order: -1; }       /* language second, above the links */

.mobile-languages {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 0 16px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.mobile-languages button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ed-ink);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}
.mobile-languages button.active {
  background: var(--ed-ink);
  border-color: var(--ed-ink);
  color: #fff;
}
@media (max-width: 760px) {
  .mobile-nav { max-height: calc(100dvh - 72px); }   /* shorter header here */
}

/* ============================================================
   Phones: the WhatsApp bubble replaces the sticky contact bar
   ============================================================ */

/* The bar ran the full width at the foot of every page, which cost a strip
   of screen on the smallest devices and pushed the biodata tray and the
   toasts up to clear it. TC would rather have the single bubble, bottom
   right, as the desktop already has. The call number has not gone: it is
   the first row of the menu, and the bubble sits beside it. */
@media (max-width: 760px) {
  .contact-bar { display: none; }

  /* The page no longer has to reserve room for the bar. */
  body { padding-bottom: 0; }

  .whatsapp-bubble {
    display: inline-flex;
    right: 16px;
    /* Clears the home indicator on an iPhone rather than sitting under it. */
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body[data-page="home"] .whatsapp-bubble { bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* Both of these were lifted to clear the bar. */
  .site-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .bio-toast  { bottom: calc(86px + env(safe-area-inset-bottom)); }

  /* The biodata group tray sits on the floor now, and the bubble stands
     down while it is up, as it already did. */
  .bio-tray { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Contact page: corners
   ============================================================
   The legacy-surface rule above squares everything inside a .section, which
   is right for the bands but wrong for a form: hard corners on an input
   read as a spreadsheet cell rather than something to type in. The form and
   the panels around it are exempted from that rule and given their radii
   back here. */
.enquiry-form { border-radius: 20px; }
.enquiry-form input,
.enquiry-form select { border-radius: 14px; }
.enquiry-form textarea { border-radius: 16px; }

/* iOS ignores border-radius on a select that still has the native control
   drawn on it, so the appearance is reset and the chevron drawn back in. */
.enquiry-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
}
/* The focus ring follows the element, so it only needs the same shape. */
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus { border-radius: 14px; }
.enquiry-form textarea:focus { border-radius: 16px; }

/* The panels either side of the form take the same language. */
.contact-methods a { border-radius: 14px; }
.contact-licence { border-radius: 999px; }
.area-directory button { border-radius: 999px; }
main .map-card { border-radius: 20px; }
main .find-us-map iframe { border-radius: 20px; }

/* Word bands step down on a phone: the same sentence, still three lines. */
@media (max-width: 760px) {
  .band-words {
    font-size: clamp(1.5rem, 6.2vw, 2.4rem);
    max-width: 18ch;
  }
}

/* Restored from work that an earlier commit of mine overwrote.
   -------------------------------------------------------------------
   The dropdown items stack, title on one line and description under it.
   The Century Gothic rule further up groups .nav-dropdown a with the flat
   nav links, which flattens this grid, so it has to be set back after it. */
.nav-dropdown { padding: 10px; }
.nav-dropdown a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 12px 14px;
  align-items: start;
}
.nav-dropdown strong { display: block; font-weight: 600; }
.nav-dropdown small { display: block; margin-top: 0; font-size: .92em; }

/* The last corner on the contact page. The consent checkbox is not here:
   a native checkbox reports a 0 radius whatever you set, even with
   !important, because the corner only becomes yours once appearance is
   reset, and that means redrawing the tick as well. Left native. */
.area-readout { border-radius: 14px; }
.enquiry-form input:focus-visible,
.enquiry-form select:focus-visible,
.enquiry-form textarea:focus-visible { outline-offset: 2px; }

/* The phone in the header is icon-only at every width, not only below
   1500px. It frees the space the Malay labels need and keeps a 44px
   target: the number itself is one tap away and is the first row of the
   mobile menu. */
.header-phone span { display: none; }
.header-phone { padding: 0 10px; min-width: 44px; justify-content: center; }

/* ---------- Signed in: account menu and compact language menu ----------
   Signed in, the header gains an account button. To keep the row calm the
   three language links fold into one "EN ⌄" menu, the phone number drops
   to its icon, and everything to do with the account sits behind the
   button: shortlist, messages, saved searches, log out. */
.header-account { position: relative; display: inline-flex; align-items: center; }
.header-account[hidden] { display: none; }
.acct-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--rule, rgba(26,26,26,.16)); border-radius: 999px; background: #fff; color: #1A1A1A;
  font: 500 .92rem/1 "DM Sans", "Manrope", sans-serif; cursor: pointer; white-space: nowrap;
}
.acct-toggle:hover, .acct-toggle[aria-expanded="true"] { border-color: #8B0909; }
.acct-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #8B0909; color: #fff; font: 600 .9rem/1 "DM Sans", "Manrope", sans-serif;
}
.acct-caret { font-size: .9rem; opacity: .6; transform: translateY(-2px); }
.acct-menu {
  position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 8px;
  border: 1px solid rgba(26,26,26,.1); border-radius: 14px; background: #fff; color: #1A1A1A;
  box-shadow: 0 18px 45px rgba(26,27,29,.16); display: grid;
}
.acct-menu[hidden] { display: none; }
.acct-who { margin: 0 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid rgba(26,26,26,.08); display: grid; gap: 2px; }
.acct-who strong { font-weight: 600; font-size: .95rem; }
.acct-who span { font-size: .8rem; color: #6a6a6a; overflow: hidden; text-overflow: ellipsis; }
.acct-menu a, .acct-out {
  display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; text-decoration: none;
  font: 400 .92rem/1.2 "DM Sans", "Manrope", sans-serif; text-align: left; cursor: pointer;
}
.acct-menu a:hover, .acct-out:hover, .acct-menu a:focus-visible, .acct-out:focus-visible { background: #F6F1EE; color: #8B0909; }
.acct-out { width: 100%; margin-top: 6px; border-top: 1px solid rgba(26,26,26,.08); border-radius: 0 0 9px 9px; color: #6a6a6a; }
.acct-count { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: #8B0909; color: #fff; font-size: .75rem; text-align: center; }

/* Compact language menu when signed in. */
body.is-signed-in .language-toggle {
  display: inline-flex !important; align-items: center; gap: 6px; min-width: 0; min-height: 44px; height: auto; padding: 0 10px;
  border: 0; background: transparent; color: inherit; font: 500 .82rem/1 "DM Sans", "Manrope", sans-serif; letter-spacing: .1em;
}
body.is-signed-in .language-options {
  position: absolute; top: calc(100% + 8px); right: 0; width: 170px; padding: 6px; display: grid; gap: 0;
  border: 1px solid rgba(26,26,26,.1); border-radius: 14px; background: #fff; color: #1A1A1A;
  box-shadow: 0 18px 45px rgba(26,27,29,.16); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
body.is-signed-in .language-menu.open .language-options { opacity: 1; visibility: visible; transform: none; }
body.is-signed-in .language-options button {
  width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; text-align: left; opacity: 1; color: #1A1A1A;
  letter-spacing: 0; text-transform: none; font: 400 .92rem/1 "DM Sans", "Manrope", sans-serif;
}
/* Full names in the menu ("Bahasa Malaysia", not "BM"). */
body.is-signed-in .language-options button { font-size: 0; }
body.is-signed-in .language-options button::after { content: attr(title); font-size: .92rem; }
body.is-signed-in .language-options button:hover,
body.is-signed-in .language-options button.active { background: #F6F1EE; color: #8B0909; }
body.is-signed-in .site-header .language-options button.active { color: #8B0909; }

/* The phone number becomes its icon; the full number is in the footer,
   the phone menu and the WhatsApp bubble. */
body.is-signed-in .header-phone span { display: none; }
body.is-signed-in .header-phone { padding: 0 8px; min-width: 44px; justify-content: center; }
body.is-signed-in .header-actions { gap: 12px; }
@media (max-width: 1320px) { body.is-signed-in .header-phone { display: none; } }
@media (max-width: 1180px) { .acct-name { display: none; } .acct-toggle { padding-right: 10px; } }

/* On the home page the header starts transparent over the photo. */
body[data-page="home"] .site-header:not(.scrolled):not(.menu-open) .acct-toggle { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }

/* Phone menu. */
.mobile-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(26,26,26,.1); }
.mobile-account[hidden] { display: none; }
.mobile-account a { font-weight: 600; }
.mobile-account-out { border: 0; background: transparent; padding: 0; min-height: 44px; color: #6a6a6a; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; }

/* Month-eleven photo: keep her face in frame whatever the crop. */
.chapter .chapter-media img[src*="tc-helper-doorway"] { object-position: 50% 8%; }

/* Homepage biodata strip: the wizard card and "View all biodata" share one
   row. The button is the biodata page's pink with black text, and turns
   the site's maroon with white text on hover, like the red buttons. */
.strip-actions { display: flex; align-items: center; gap: 56px; margin-top: 12px; }  /* room for the star's orbit */
/* A box rather than a bar: the card is held to a width where the line
   wraps to two, and the button sits beside it. */
.strip-actions .strip-wizard { flex: 0 1 440px; min-width: 0; }
.strip-actions .tcw-launch--strip { margin: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
.strip-actions .tcw-launch--strip .tcw-launch-copy { width: 100%; }
.strip-all {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px;
  border-radius: 999px;
  background: #FFE4E1; color: #1A1A1A;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.strip-all:hover, .strip-all:focus-visible { background: #8B0909; color: #fff; }
.strip-all:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) {
  .strip-actions { flex-direction: column; align-items: stretch; gap: 36px; }
  .strip-actions .strip-wizard { flex: none; }
  .strip-all { width: 100%; }
}

/* "Find Your Ideal Helper" as its own pink box at the top of the dark
   filter rail, so the panel announces itself. Same pink as the biodata
   page, heading in the site's maroon. */
.bio-filters-inner > .bio-filters-head {
  margin: 12px 12px 4px;
  padding: 18px 18px 16px;
  border: 0;
  border-radius: 14px;
  background: #FFE4E1;
  color: #1A1A1A;
}
.bio-filters-inner > .bio-filters-head h2 {
  color: #8B0909; font-weight: 600; font-size: 1.32rem; letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px;
}
.bio-filters-inner > .bio-filters-head h2::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: #8B0909;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.95 6.55 7.15.72-5.38 4.82 1.56 7.05L12 17.2 5.72 20.74l1.56-7.05L1.9 8.87l7.15-.72z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.95 6.55 7.15.72-5.38 4.82 1.56 7.05L12 17.2 5.72 20.74l1.56-7.05L1.9 8.87l7.15-.72z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bio-filters-inner > .bio-filters-head p { color: #4A3A3A; }
.bio-filters-inner > .bio-filters-head .bio-filters-close { color: #1A1A1A; }

/* Card photo: square on the side that meets the details, rounded only
   where it follows the card's own outer corners. */
.bio-card .bio-photo, .bio-card .bio-photo img { border-radius: 14px 0 0 14px; }
@media (max-width: 980px) {
  .bio-card .bio-photo, .bio-card .bio-photo img { border-radius: 14px 14px 0 0; }
}

/* Signed in, the account button replaces "Log in / Sign up". */
body.is-signed-in .header-cta[data-open-account] { display: none; }
.mobile-account a[data-open-account] {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: #8B0909; color: #fff !important; font-weight: 700; text-decoration: none;
}