/* ============================================
   HERO — EDITORIAL MASTHEAD
   ============================================
   Loaded on the homepage only. Kept out of globals.css deliberately: this
   is one page's hero, and globals.css is already carrying hero styles shared
   by forty-odd templates that have nothing to do with it.

   Everything here is deliberately unlike the layout it replaced: no two-column
   grid, no card, no tilt, no border-radius on the photograph, no icon
   chips. The devices are print devices -- a folio rule, a large headline
   allowed to break its column, a full-bleed image, a colophon.
   ============================================ */

.mh {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--brand-light);
  /*
   * The photograph used to lead on mobile, so this padding was removed to
   * stop a sage strip appearing between the nav and a full-bleed image. The
   * folio leads now, and with no padding it sat hard under the header --
   * two horizontal rules a few pixels apart, the header's edge and the
   * folio's own. It needs clearance, not none.
   */
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.mh-head,
.mh-rest {
  position: relative;
  z-index: 10;                 /* above .mh-photo, which sits at 1 */
}

/* ---- Photograph ----
   Mobile: a band in flow, edge to edge. The classic hero shows no image at
   all below 1024px; this layout treats the photograph as the point, so it
   appears on every device. */
/*
 * Mobile: a crisp full-bleed plate, not a crossover.
 *
 * The crossover was tried here and does not work. To keep a headline legible
 * over the photograph the scrim has to be near-solid where the type sits --
 * and a near-solid scrim hides the very image edge the type is supposed to
 * be crossing. The effect cancels itself and what survives reads as a gap
 * rather than a collision, which is exactly how it was reported.
 *
 * The crossover stays on desktop, where there is horizontal room for the
 * headline to run past its column into open photograph and no scrim is
 * needed under the type at all. On mobile the image is a printed plate:
 * full width, hard edges, deliberate rhythm above and below it. Confident
 * beats half-crossed.
 */
.mh-photo {
  position: relative;
  z-index: 1;
  /*
   * Full bleed, both edges.
   *
   * This was inset 24px on the left to share the headline's margin. The idea
   * was to give the image one line in common with the type, but 24px is too
   * small to read as alignment and too large to read as nothing: it looked
   * like a strip of background had been left behind by accident. Asymmetry
   * needs to be obvious to be legible as a decision.
   *
   * The integration it was there to provide is now carried by the grading and
   * the dissolve at the base, which do the job without introducing an edge
   * that has to be explained.
   */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 46vh;
  min-height: 260px;
  max-height: 420px;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

/*
 * Graded to the page.
 *
 * The photograph is lit cool -- white shelving, grey coat, daylight through a
 * window -- and the page is a warm sage. Untouched, they look like two
 * documents rather than one, which is the other half of "copied in". A little
 * desaturation plus a wash of the brand green pulls it into the same palette.
 * Kept light: this should read as grading, not as a green filter.
 */
.mh-photo img {
  filter: saturate(0.9) contrast(1.03);
}

.mh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

/* Ties the photograph to the page ground so it reads as printed onto the
   surface rather than pasted on top of it. */
/*
 * The tint, plus a dissolve at the base.
 *
 * The hard bottom edge was the "rectangle" of it -- a crisp horizontal cut
 * with sage above and below reads as a block dropped in. Letting the last
 * fifth fade into the page ground means the image ends by becoming the page
 * rather than stopping against it. The top edge stays crisp: that one is a
 * deliberate cut under the headline, and fading it was what produced the gap
 * this replaced.
 */
.mh-photo-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(228, 237, 230, 0) 78%, var(--brand-light) 100%),
    rgba(47, 107, 78, 0.10);
}

/* ---- Folio ----
   Masthead, place and date on one rule, the way a printed cover states them
   before the headline is allowed to speak. */
.mh-folio {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(35, 79, 58, 0.22);
  margin-bottom: 2.25rem;
  /*
   * 13px, not 11px, and tracked at 0.12em rather than 0.18em.
   *
   * Wide tracking is what makes a folio read as a folio, but it works against
   * legibility at the same time -- it pushes letters far enough apart that the
   * eye stops reading words and starts reading characters. At 11px that
   * tipped over, and no amount of contrast fixed it (the name was already
   * 7.8:1). The rule is to buy the tracking back with size: the wider the
   * letterspacing, the larger the type has to be to stay a word.
   */
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);          /* 7.8:1 on --brand-light */
}

/*
 * Two items, set as peers. The folio no longer carries a name -- the header
 * wordmark is the masthead and printing it twice read as a stutter -- so what
 * remains is where and when, and in a folio those are equals. Same weight and
 * colour for both; the rule and the alignment do the separating, which is why
 * there is no dot between them any more.
 */
.mh-folio-address,
.mh-folio-date {
  font-weight: 700;
  color: var(--brand-dark);          /* 7.8:1 */
  letter-spacing: 0.1em;
}

/* Pushed to the far end of the rule at every width, like a cover date. It was
   gated at 768px, which left the date dropping to its own row on phones --
   two orphan lines where the folio should read as one rule. */
.mh-folio-date { margin-left: auto; }

.mh-folio-address,
.mh-folio-date { white-space: nowrap; }

/* Street plus postcode plus the date needs ~356px of tracked capitals; a
   375px phone offers 327px. The postcode is the part that can go. */
@media (max-width: 479px) {
  .mh-folio-postcode { display: none; }
}

/* ---- Headline ---- */
.mh-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  /*
   * The floor was 2.75rem (44px), which does not scale below it. "Your
   * Pharmacy." is the longest line and needs roughly 320px at that size; a
   * 360px phone offers 312px of column, so the headline wrapped and the
   * three-line block became four. The floor now sits low enough that narrow
   * phones scale the type down instead of breaking the composition.
   */
  font-size: clamp(2.25rem, 11vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--brand-dark);
}

.mh-title-line {
  display: block;
}

/*
 * Italic sits optically indented against the roman lines above and below it:
 * the glyph box starts in the same place, but an italic Y leans away from the
 * left edge so the letter *looks* inset -- measured at roughly 0.08em against
 * "Your Pharmacy." and "Bromley's Best.". Pulled back by about half of that,
 * which is the usual correction: closing the gap entirely overshoots, because
 * some of the difference is the letterform itself rather than the spacing.
 *
 * In em, so it holds at every size from the mobile clamp to the 6.25rem
 * desktop setting.
 */
.mh-title-line--accent {
  font-weight: 400;
  font-style: italic;
  color: var(--brand-purple);        /* 5.27:1 on --brand-light */
  margin-left: -0.04em;
}

.mh-lede {
  /* No top margin on mobile -- the photograph's own margin sits above it.
     Desktop puts it back, where the lede follows the headline directly. */
  margin: 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  /*
   * Explicit 500 and a darker ink. This was inheriting weight 400 at
   * --text-slate, which measures 5.06:1 and passes AA while still reading
   * thin -- the same failure as the accreditation plate and the blood-test
   * lines before it. Contrast describes colour distance, not stroke weight.
   */
  font-weight: 500;
  line-height: 1.6;
  color: #414B44;              /* 7.58:1 */
  /*
   * On a phone this sets to about 45 characters, which is the narrow end of a
   * comfortable measure and produces a badly uneven rag -- the last line was
   * landing as the single word "Bromley." text-wrap: pretty makes the browser
   * reflow the final lines to avoid that widow and even out the ending. It
   * degrades to normal wrapping where unsupported, so nothing is lost.
   */
  text-wrap: pretty;
}

/* ---- Actions ----
   A filled pill and a plain text link, rather than two competing buttons.
   One primary action, one way onward. */
.mh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.mh-cta {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.25rem;
  border-radius: 9999px;
  /* #A85D3C, not the #C2714C used elsewhere on the site: white on #C2714C is
     3.65:1, and this label is 15px bold -- under the 18.66px threshold for
     WCAG large text, so it needs 4.5:1, not 3:1. #A85D3C is already the
     site's terracotta hover tone, so the palette is unchanged. */
  background: #A85D3C;
  color: #ffffff;                    /* 4.89:1 */
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 10px 25px -8px rgba(194, 113, 76, 0.5);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.mh-cta:hover,
.mh-cta:focus-visible {
  background: #8F4A2B;               /* 6.60:1 */
  box-shadow: 0 14px 30px -8px rgba(194, 113, 76, 0.55);
}

.mh-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 79, 58, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s ease;
}

.mh-cta-secondary:hover,
.mh-cta-secondary:focus-visible {
  border-color: var(--brand-dark);
}

.mh-cta-secondary i {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

/* Points down the page, because that is where the link goes -- it is an
   anchor to #treatments, not a navigation away. */
.mh-cta-secondary:hover i {
  transform: translateY(2px);
}

/* ---- Colophon ----
   The accreditation as printed matter: a rule above, the real marks, the
   claim set small. No card, no dark plate, no icon. */
.mh-colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(35, 79, 58, 0.2);
  /* Wider than the lede's 34rem now the marks are larger, so the claim still
     sits beside them on one line rather than wrapping underneath. */
  max-width: 38rem;
}

.mh-colophon-marks {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}

.mh-mark {
  width: auto;
  object-fit: contain;
}

/*
 * Sizes keep the ratio between the two marks -- the roundel runs larger than
 * the wordmark because it carries ring lettering inside it, the same reasoning
 * the footer records at 96/106. 58/106 brings the roundel to the footer's own
 * size while staying short of a banner.
 *
 * The shadows are doing the real work, and the reason is measurable: the YFZ
 * yellow is 1.07:1 against this sage ground. Its luminance is 0.773 and the
 * ground's is 0.828, so the disc has effectively no edge and the mark reads as
 * floating rather than placed -- which is why it got lost at the smaller size
 * and would still get lost at a larger one. Size was never the problem.
 *
 * A drop-shadow gives the silhouette a boundary the colour cannot supply, and
 * it is what the footer marks already use. It mitigates rather than fixes: the
 * proper answer is a dark ground, where the same yellow measures 7.31:1 and
 * the black tile drops from a stark 17.56:1 to a settled 2.25:1. That is the
 * mobile treatment, and it is available here if this reads as not enough.
 *
 * The two shadows differ on purpose. The roundel is a circle floating on the
 * page and needs a soft cast beneath it. The wordmark is already a black tile
 * at 17.56:1, so it needs only a tight edge to stop it looking pasted on --
 * any more and it turns into a second, louder object.
 */
.mh-mark--nathnac {
  height: 58px;
  border-radius: 0.45rem;
  filter: drop-shadow(0 2px 6px rgba(35, 79, 58, 0.18));
}

.mh-mark--yfz {
  height: 106px;
  filter: drop-shadow(0 4px 12px rgba(35, 79, 58, 0.22));
}

.mh-colophon-text {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-dark);          /* 7.8:1 */
}

.mh-colophon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  font-weight: 700;
  color: #8A5A0F;                    /* 4.95:1 -- gold reads as gold, still AA */
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 90, 15, 0.4);
  transition: border-color 0.2s ease;
}

.mh-colophon-link:hover,
.mh-colophon-link:focus-visible {
  border-color: #8A5A0F;
}

.mh-colophon-link i {
  font-size: 0.6875rem;
}

/* ---- Mobile refinements ---- */
@media (max-width: 639px) {

  /*
   * Two stacked pills rather than a pill and a text link. Left-aligned they
   * shared an edge but nothing else: the primary's label sits inset by its
   * own padding while the secondary's started at the container edge, so the
   * pair read as misaligned and the secondary read as an afterthought. Equal
   * width makes them a set, and a ghost pill gives the secondary a shape
   * without letting it compete with the filled one.
   */
  .mh-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }

  .mh-cta,
  .mh-cta-secondary {
    justify-content: center;
    width: 100%;
  }

  .mh-cta-secondary {
    padding: 0.95rem 1.5rem;
    border: 1px solid rgba(35, 79, 58, 0.28);
    border-radius: 9999px;
  }

  .mh-cta-secondary:hover,
  .mh-cta-secondary:focus-visible {
    border-color: rgba(35, 79, 58, 0.55);
  }

  /*
   * The colophon goes dark on mobile, and it is the marks that decide it.
   *
   * The NaTHNaC mark is a solid black tile. Against the pale insert it was
   * 19.4:1 -- so far from its surroundings that it read as a hole punched in
   * the panel rather than a logo resting on it. On --brand-dark it is 2.25:1
   * and simply sits there, which is what it was drawn to do. The YFZ yellow
   * behaves the same way: designed to sing off a dark ground, merely bright
   * on a light one. This is the same reasoning the footer uses, and the
   * treatment the client already signed off there.
   *
   * Mobile only, deliberately. On desktop the photograph is a large dark
   * object anchoring the composition and the colophon is one element in a
   * text column beside it -- a second heavy block would compete, and the
   * light rule-and-marks version reads better for it. On mobile the
   * photograph is a band rather than a column, nothing else carries weight,
   * and the colophon is the last thing in the hero: it should close the
   * section like a seal.
   *
   * Compact, though. The old plate carried a title AND a paragraph and ate
   * most of a phone screen. This keeps the colophon's short single line, so
   * it gets the dark ground's authority at a fraction of the height.
   */
  .mh-colophon {
    margin-top: 2.25rem;
    padding: 1.35rem 1.25rem;
    border-top: 0;
    border: 1px solid rgba(244, 197, 66, 0.35);
    border-radius: 1rem;
    background: var(--brand-dark);
    box-shadow: 0 14px 32px -14px rgba(35, 79, 58, 0.5);
    max-width: none;
    gap: 1rem 1.25rem;
    /*
     * Centred on mobile. Left-aligned, the two marks sat in the top-left of a
     * full-width panel with a large empty field of green beside them, which is
     * what read as uneven -- the imbalance was the void to their right, not
     * their own position. Centring gives the panel a single axis and lets the
     * marks, the claim and the link stack on it.
     */
    justify-content: center;
    text-align: center;
  }

  .mh-colophon-marks {
    justify-content: center;
  }

  /* No shadows on mobile: the dark plate already gives both marks their edge,
     and a cast shadow on a dark ground reads as grime rather than lift. Sizes
     stay a step below desktop so the plate does not dominate a phone screen. */
  .mh-mark--nathnac {
    height: 48px;
    filter: none;
  }

  .mh-mark--yfz {
    height: 88px;
    filter: none;
  }

  .mh-colophon-text {
    flex-basis: 100%;
    color: #ffffff;              /* 9.33:1 */
    text-align: center;
  }

  /* Its own line on the axis, rather than trailing the sentence inline. */
  .mh-colophon-link {
    display: flex;
    justify-content: center;
    margin: 0.6rem auto 0;
    width: fit-content;
    color: #F7CE58;              /* 6.19:1 */
    border-bottom-color: rgba(247, 206, 88, 0.45);
  }

  .mh-colophon-link:hover,
  .mh-colophon-link:focus-visible {
    color: #FFD966;              /* 6.83:1 */
    border-bottom-color: #FFD966;
  }
}

/* ============================================
   DESKTOP — the full-bleed crossover
   ============================================
   The photograph becomes a right-hand column bleeding off the viewport edge,
   and the headline is allowed to run past its own column and over it. That
   overhang is the whole point of the layout, so it is engineered rather than
   hoped for:

     - Content is capped at 58% and the photo starts at 52%, so the two
       overlap by ~6% of the container.
     - Only line three overhangs, using a negative right margin plus
       white-space: nowrap so it cannot wrap mid-crossover.
     - The scrim becomes a left-to-right gradient from the page ground, so
       the type crosses a soft field of its own background colour before it
       reaches any photographic detail. Legibility is not left to luck.
   ============================================ */
@media (min-width: 1024px) {

  /*
   * Grid rather than flex. The head and the rest are now separate children
   * (the photograph sits between them in source order for the mobile
   * crossover), so they need to stack as rows while the group stays
   * vertically centred. align-content does that; flex would have set them
   * side by side.
   */
  .mh {
    display: grid;
    align-content: center;
    min-height: 88vh;
    padding-top: 20px;
    padding-bottom: 4rem;
  }

  .mh-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 52%;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    z-index: 1;
  }

  .mh-photo img {
    object-position: center 22%;
  }

  .mh-photo-scrim {
    background:
      linear-gradient(to right, var(--brand-light) 0%, rgba(228, 237, 230, 0.55) 26%, rgba(228, 237, 230, 0) 52%),
      rgba(47, 107, 78, 0.08);
  }

  /*
   * The folio stops where the photograph starts.
   *
   * It used to run the full container width, which pushed "Est. 1982" --
   * right-aligned by margin-left:auto -- out over the image, where the scrim
   * has already faded to nothing. Its 7.58:1 was measured against the sage
   * ground it was no longer sitting on; the actual backdrop was blown-out
   * window light, so the contrast was unpredictable and low.
   *
   * Capping it to the text column puts every folio item back on a known
   * background, and a rule that stops at the image edge frames the text
   * column deliberately rather than sliding under the photograph.
   *
   * The 58% cap below is the one that used to sit on a single .mh-body
   * wrapper, now applied to the children directly since the wrapper is gone.
   * Percentages resolve against the same containing block either way, so the
   * crossover maths further down is unchanged.
   */
  .mh-folio,
  .mh-title,
  .mh-lede,
  .mh-actions {
    max-width: 58%;
  }

  /* The photograph is out of flow here, so restore the gap under the
     headline that the mobile layout gets from the image itself. */
  .mh-lede {
    margin-top: 1.5rem;
  }

  .mh-title {
    font-size: clamp(4rem, 6.2vw, 6rem);
    letter-spacing: -0.045em;
    /* Held at the original 0.98. The base loosens to 1.02 for mobile, where
       44px type at 0.98 reads cramped rather than tight; at 96px the tighter
       setting is what gives the block its mass, and desktop is signed off. */
    line-height: 0.98;
  }

  /* The crossover. */
  .mh-title-line--break {
    white-space: nowrap;
    margin-right: -18%;
  }
}

@media (min-width: 1400px) {
  .mh-title {
    font-size: 6.25rem;
  }
}

/* ---- Entrance ----
   Same restraint as the classic hero: one gesture, low peak velocity, eased
   in as well as out so it starts from rest. The folio rule draws itself
   because a rule that arrives by being drawn is the one print device that
   has no web equivalent -- it is the moment worth spending motion on. */
@media (prefers-reduced-motion: no-preference) {

  @keyframes mh-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes mh-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .mh-folio {
    animation: mh-rise 0.8s cubic-bezier(0.32, 0.08, 0.24, 1);
  }

  /* Drawn over the static border, matching its colour exactly so the two are
     indistinguishable once the animation finishes. Inset to 0 because the
     container, not the folio, carries the page padding. */
  .mh-folio::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(35, 79, 58, 0.22);
    transform-origin: left center;
    animation: mh-rule 1.1s cubic-bezier(0.32, 0.08, 0.24, 1);
  }

  .mh-head,
  .mh-rest {
    animation: mh-rise 0.95s cubic-bezier(0.32, 0.08, 0.24, 1);
  }

  .mh-photo {
    animation: mh-rise 1.1s cubic-bezier(0.32, 0.08, 0.24, 1);
  }
}