/*
 * PHGP core — the shared .phgp base kit.
 *
 * Source: WPCode snippet 17475 "PHGP Home Page Styles", migrated to the child
 * theme 28 July 2026. The snippet is now disabled, not deleted.
 * Enqueued by: inc/enqueue-css.php (handle "phgp-core")
 *
 * Despite the original name this file has NO page-specific rules — all 138 of
 * its rules also appear verbatim in page-regular-care.css and
 * page-areas-hub.css. It is the site's base kit: tokens, reset, buttons,
 * .section-head, .intro-block, .nightrail, .stat-*, .step*.
 *
 * CONSUMERS — anything edited here affects all of:
 *   page 17432  Home
 *   page 7565   Regular care
 *   page 5031   Areas Serviced
 *   16 suburb pages (children of 5031)
 * Check this list before changing a shared rule.
 */

/* =====================================================================
   PERTH HOME GP — PAGE CSS
   ---------------------------------------------------------------------
   Paste into:  Edit Home Page ? Settings (cog icon, bottom-left)
                ? Advanced ? Custom CSS

   This loads ONLY on the home page. Every selector is scoped under
   .phgp as defence-in-depth, so even if it loaded sitewide it could
   not touch other pages.

   FONTS: Inter must be set in Elementor ? Site Settings ?
   Global Fonts (Family = Inter). This CSS does NOT load fonts
   itself — Elementor handles that.

   Covers all custom sections (hero, services, features, detail
   blocks, night-rail, service area). FAQ & Reviews are Elementor
   widgets and are not styled here.
   ===================================================================== */

/* ---- Variables, base reset, typography ---- */

.phgp {
  /* ------------------------------------------------------------------
     DESIGN TOKENS — aliases onto theme.json (Phase 3b, 28 July 2026)

     theme.json settings.custom is now the canonical brand palette. These
     flat names are kept so none of the ~400 rules below had to be rewritten.

     Every alias carries the literal hex as a var() fallback. That is
     deliberate, not belt-and-braces clutter: if WordPress global styles are
     ever missing from a page — and snippet 18194 does strip a lot of handles
     on the suburb pages — the fallback keeps the brand intact instead of
     collapsing every colour to nothing. Verified present on all page types
     before doing this, but the fallback costs nothing.

     To change a brand colour, edit theme.json. The fallback here is a safety
     net, not a second source of truth; if you change one, change both.
     ------------------------------------------------------------------ */
  --navy:           var(--wp--custom--navy--600, #16335A);
  --navy-deep:      var(--wp--custom--navy--700, #0F2444);
  --navy-darker:    var(--wp--custom--navy--950, #08101C);
  --mint:           var(--wp--custom--mint--500, #5BD0A8);
  --paper:          var(--wp--custom--paper--50, #FBFAF4);
  --mint-light:     var(--wp--custom--mint-light, #F4F8F6);
  --bone:           var(--wp--custom--bone--100, #F6F4EC);
  --surface:        var(--wp--custom--surface, #FFFFFF);
  --hairline:       var(--wp--custom--hairline, #E5EFE9);
  --hairline-strong:var(--wp--custom--hairline-strong, #C7D6CD);
  --ink:            var(--wp--custom--ink, #10243F);
  --dim:            var(--wp--custom--dim, #52606A);
  --soft:           var(--wp--custom--soft, #7d8893);

  --mango-50:  var(--wp--custom--mango--50, #FFEFD9);
  --mango-200: var(--wp--custom--mango--200, #FBD49C);
  --mango-500: var(--wp--custom--mango--500, #F2A02E);
  --mango-700: var(--wp--custom--mango--700, #9A5C0E);

  --reef-50:  var(--wp--custom--reef--50, #E5F7F0);
  --reef-200: var(--wp--custom--reef--200, #A8E2C9);
  --reef-500: var(--wp--custom--reef--500, #3CB789);
  --reef-700: var(--wp--custom--reef--700, #175840);

  --ocean-50:  var(--wp--custom--ocean--50, #E5F2FB);
  --ocean-200: var(--wp--custom--ocean--200, #A8CFEC);
  --ocean-500: var(--wp--custom--ocean--500, #2E89C8);
  --ocean-700: var(--wp--custom--ocean--700, #114668);

  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.phgp, .phgp *, .phgp *::before, .phgp *::after { box-sizing: border-box; }
.phgp a { color: inherit; text-decoration: none; cursor: pointer; }
.phgp img { display: block; max-width: 100%; }
.phgp button { font-family: inherit; cursor: pointer; border: none; background: none; }
.phgp h1, .phgp h2, .phgp h3, .phgp h4 { margin: 0; }
.phgp p { margin: 0; }


/* ---- Shared buttons ---- */

.phgp .btn-primary,
.phgp .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px; border-radius: 12px;
  font-size: 16px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.phgp .btn-primary { background: var(--navy); color: #fff; }
.phgp .btn-primary:hover { background: var(--navy-deep); color: #fff; }
.phgp .btn-ghost {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-strong); font-weight: 500;
}
.phgp .btn-ghost:hover { border-color: var(--navy); color: var(--ink); }
.phgp .btn-icon { display: inline-flex; align-items: center; }
.phgp .btn-icon svg { width: 18px; height: 18px; display: block; }


/* ---- Section headers (used between sections) ---- */

.phgp .section-head {
  padding: 80px 56px 24px;
  max-width: 1280px; margin: 0 auto;
}
.phgp .section-head .eyebrow {
  font-size: 13px; color: var(--navy); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
}
.phgp .section-head h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--navy); max-width: 720px;
  text-wrap: balance;
}
.phgp .section-head p {
  font-size: 18px; color: var(--dim);
  max-width: 720px; line-height: 1.6;
  margin-top: 18px;
}


/* =====================================================================
   HERO
   ===================================================================== */

.phgp .hero {
  padding: 88px 56px 56px;
  max-width: 1280px; margin: 0 auto;
}
.phgp .hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 56px; align-items: center;
}

.phgp .hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface); font-size: 12px;
  margin-bottom: 24px; border: 1px solid var(--hairline);
  color: var(--ink); font-weight: 500;
}
.phgp .hero-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #19B27A; }

.phgp .hero h1 {
  font-size: 60px; line-height: 1.05; letter-spacing: -0.025em;
  font-weight: 700; color: var(--navy); text-wrap: balance;
}
.phgp .hero h1 em { font-style: normal; color: var(--mint); }

.phgp .hero-lede {
  font-size: 20px; color: var(--dim);
  max-width: 560px; margin-top: 24px; line-height: 1.5;
}

.phgp .hero-cta {
  display: flex; gap: 12px; margin-top: 32px;
  flex-wrap: wrap; align-items: center;
}

.phgp .hero-stats {
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--hairline-strong);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 560px;
}
.phgp .stat-value {
  font-size: 28px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.phgp .stat-value .star { color: #F2A02E; font-size: 26px; }
.phgp .stat-label { font-size: 13px; color: var(--dim); line-height: 1.4; }

.phgp .hero-card {
  aspect-ratio: 4/5; border-radius: 24px; overflow: hidden;
  position: relative; background: var(--navy-deep);
  box-shadow: 0 30px 80px rgba(15,36,68,0.18);
  max-width: 480px;
  width: 100%;
  justify-self: end;
}
.phgp .hero-card::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(91,208,168,0.35), transparent 50%),
    radial-gradient(circle at 80% 75%, rgba(91,208,168,0.15), transparent 50%),
    linear-gradient(135deg, var(--navy-deep), var(--navy));
}
.phgp .hero-img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Imagify <picture> compatibility (added 29 July 2026).
 *
 * With "Display images in Next-Gen format" enabled, Imagify wraps each <img>
 * in a <picture> AND MOVES THE IMG'S CLASSES ONTO THE <picture>. Any rule that
 * styles an image via a class on the img itself therefore lands on the wrapper,
 * leaving the real <img> unstyled — the hero rendered at its intrinsic size in
 * the top of the card with the navy gradient showing beneath.
 *
 * Descendant rules (.detail-art img, .svc-img img, .area-map img, .av img) are
 * unaffected, because the img is still a descendant of those containers.
 * .hero-img is the ONLY class in this stylesheet applied directly to an <img>,
 * so this is the only rule that needs the picture variant.
 *
 * Keep both selectors: the plain .hero-img covers the un-wrapped case, which is
 * what renders if Imagify's Next-Gen display is ever switched back off.
 */
.phgp picture.hero-img {
  display: block;
  width: 100%; height: 100%;
}
.phgp picture.hero-img > img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


/* =====================================================================
   SERVICES (3-tile grid) — for upcoming section
   ===================================================================== */

.phgp .services { padding: 16px 56px 32px; max-width: 1280px; margin: 0 auto; }
.phgp .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.phgp .svc {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hairline);
  transition: transform 0.2s, box-shadow 0.2s;
}
.phgp .svc:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(15,36,68,0.06); color: inherit; }
.phgp .svc:hover .arrow { color: var(--mint); }
.phgp .svc-img { height: 180px; position: relative; }
.phgp .svc-img.mango { background: linear-gradient(135deg, var(--mango-50), var(--mango-200)); }
.phgp .svc-img.ocean { background: linear-gradient(135deg, var(--ocean-50), var(--ocean-200)); }
.phgp .svc-img.reef  { background: linear-gradient(135deg, var(--reef-50), var(--reef-200)); }
.phgp .svc-img img { width: 100%; height: 100%; object-fit: cover; }
.phgp .svc-chip {
  position: absolute; top: 14px; left: 14px;
  color: #fff; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  z-index: 2;
}
.phgp .svc-chip.mango { background: var(--mango-500); color: var(--navy); }
.phgp .svc-chip.ocean { background: var(--ocean-500); }
.phgp .svc-chip.reef  { background: var(--reef-500); }
.phgp .svc-body { padding: 24px; }
.phgp .svc-body h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; color: var(--navy); }
.phgp .svc-body p { font-size: 14px; color: var(--dim); line-height: 1.6; margin-bottom: 16px; }
.phgp .svc-body .arrow { font-size: 14px; color: var(--navy); font-weight: 600; transition: color 0.15s; }


/* =====================================================================
   FEATURES (6-block row) — for upcoming section
   ===================================================================== */

.phgp .features {
  padding: 32px 56px 64px; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.phgp .feature {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 24px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.phgp .feature-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--mint-light); color: var(--navy);
  display: grid; place-items: center;
}
.phgp .feature-icon svg { width: 28px; height: 28px; }
.phgp .feature-label {
  font-size: 13px; font-weight: 600; color: var(--navy);
  line-height: 1.35; max-width: 140px; text-wrap: balance;
}


/* =====================================================================
   INTRO BLOCK (used after section-head, no image) — for upcoming section
   ===================================================================== */

.phgp .intro-block { padding: 24px 56px 0; max-width: 1280px; margin: 0 auto; }
.phgp .intro-block p {
  font-size: 18px; color: var(--dim); line-height: 1.65;
  margin-bottom: 18px; max-width: 820px;
}
.phgp .intro-block p:last-child { margin-bottom: 0; }


/* =====================================================================
   DETAIL SECTIONS (image + text, alternating) — for upcoming sections
   ===================================================================== */

.phgp .detail { padding: 56px 56px; max-width: 1280px; margin: 0 auto; scroll-margin-top: 80px; }
.phgp .detail-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Reversed layout — image on left, text on right. Flip the column ratio
   so the IMAGE is always in the smaller (1fr) column, not the wider one. */
.phgp .detail.reverse .detail-grid {
  grid-template-columns: 1fr 1.25fr;
}
.phgp .detail.reverse .detail-art { justify-self: start; }
.phgp .detail h2 {
  font-size: 40px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--navy); margin-bottom: 22px; line-height: 1.1; text-wrap: balance;
}
.phgp .detail p {
  font-size: 17px; color: var(--dim); line-height: 1.65; margin-bottom: 28px;
}
.phgp .detail ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.phgp .detail ul li {
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.phgp .detail ul li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 13px;
  margin-right: 4px;
  margin-top: -3px;
  border-right: 2.5px solid #5BD0A8;
  border-bottom: 2.5px solid #5BD0A8;
  transform: rotate(45deg);
}
.phgp .detail-art {
  aspect-ratio: 4/5; border-radius: 24px; position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,36,68,0.08);
  max-width: 440px;
  width: 100%;
  justify-self: end;
}
.phgp .detail-art.mango { background: linear-gradient(135deg, var(--mango-50), var(--mango-200)); }
.phgp .detail-art.ocean { background: linear-gradient(135deg, var(--ocean-50), var(--ocean-200)); }
.phgp .detail-art.reef  { background: linear-gradient(135deg, var(--reef-50), var(--reef-200)); }
.phgp .detail-art img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.phgp .detail-cta { display: flex; gap: 12px; flex-wrap: wrap; }


/* =====================================================================
   DARK NIGHT-RAIL — for upcoming section
   ===================================================================== */

.phgp .nightrail { background: var(--navy); color: #fff; padding: 72px 56px; }
.phgp .nightrail-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 48px; align-items: center;
}
.phgp .nightrail .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mint); margin-bottom: 16px;
}
.phgp .nightrail .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.phgp .nightrail h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; margin-bottom: 14px; text-wrap: balance; color: #fff;
}
.phgp .nightrail p {
  font-size: 17px; color: rgba(255,255,255,0.72);
  line-height: 1.55; max-width: 540px;
}
.phgp .nightrail-cta { display: flex; flex-direction: column; gap: 10px; }
.phgp .btn-call,
.phgp .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px; border-radius: 12px;
  font-size: 16px; font-weight: 700;
}
.phgp .btn-call { background: var(--mint); color: var(--navy-darker); }
.phgp .btn-call:hover { filter: brightness(1.05); color: var(--navy-darker); }
.phgp .btn-outline {
  background: transparent; color: #fff;
  font-size: 16px; font-weight: 700;
  border: 2px solid rgba(255,255,255,0.55);
}
.phgp .btn-outline:hover { border-color: #fff; color: #fff; }

/* Full-bleed dark night-rail.
   Total theme wraps content in .wpex-overflow-clip (overflow-x: clip),
   which kills negative-margin tricks. box-shadow + clip-path paints a
   large solid halo and clips it to the viewport's horizontal extent —
   works regardless of clipping ancestors. */
.phgp .nightrail {
  box-shadow: 0 0 0 100vmax var(--navy);
  clip-path: inset(0 -100vmax);
}


/* =====================================================================
   SERVICE AREA (text + map) — for upcoming section
   ===================================================================== */

.phgp .area { padding: 88px 56px; max-width: 1280px; margin: 0 auto; }
.phgp .area-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.phgp .area-eyebrow {
  font-size: 13px; color: var(--navy); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
}
.phgp .area h2 {
  font-size: 40px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; color: var(--navy); margin-bottom: 22px;
  max-width: 480px; text-wrap: balance;
}
.phgp .area p {
  font-size: 17px; color: var(--dim); line-height: 1.65;
  margin-bottom: 28px; max-width: 480px;
}
.phgp .area-map {
  aspect-ratio: 5/3; border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,36,68,0.08);
  background: var(--paper);
  max-width: 640px;
  width: 100%;
  justify-self: end;
}
.phgp .area-map img,
.phgp .area-map svg { width: 100%; height: 100%; display: block; object-fit: cover; }


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 960px) {
  .phgp .hero { padding: 48px 24px 32px; }
  .phgp .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .phgp .hero-card { order: -1; aspect-ratio: 4/3; }
  .phgp .hero h1 { font-size: 40px; }
  .phgp .hero-lede { font-size: 18px; }
  .phgp .hero-stats { margin-top: 28px; padding-top: 20px; gap: 16px; }
  .phgp .stat-value { font-size: 22px; }
  .phgp .stat-value .star { font-size: 20px; }
  .phgp .stat-label { font-size: 12px; }

  .phgp .section-head { padding: 56px 24px 16px; }
  .phgp .section-head h2 { font-size: 32px; }

  .phgp .services { padding: 8px 24px 24px; }
  .phgp .services-grid { grid-template-columns: 1fr; }

  .phgp .features { padding: 24px 24px 48px; grid-template-columns: repeat(2, 1fr); }

  .phgp .intro-block { padding: 16px 24px 0; }

  .phgp .detail { padding: 32px 24px; }
  .phgp .detail-grid,
  .phgp .detail.reverse .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .phgp .detail h2 { font-size: 28px; }
  .phgp .detail-art { order: -1; }
  .phgp .detail ul { grid-template-columns: 1fr; }

  .phgp .nightrail { padding: 56px 24px; }
  .phgp .nightrail-grid { grid-template-columns: 1fr; gap: 24px; }
  .phgp .nightrail h2 { font-size: 32px; }
  /* Tablet: night-rail buttons sit inline like the other detail CTAs */
  .phgp .nightrail-cta { flex-direction: row; flex-wrap: wrap; }
  .phgp .nightrail-cta .btn-call,
  .phgp .nightrail-cta .btn-outline { width: auto; }

  .phgp .area { padding: 56px 24px; }
  .phgp .area-grid { grid-template-columns: 1fr; gap: 32px; }
  .phgp .area h2 { font-size: 30px; }
  .phgp .area-map { max-width: 100%; justify-self: stretch; }

  /* Tablet/mobile: cap hero + detail photos so they don't sprawl
     when stacked above their text. Left-aligned in the column. */
  .phgp .hero-card { max-width: 420px; justify-self: start; }
  .phgp .detail-art { max-width: 380px; justify-self: start; }
}

/* Mobile only: stacked buttons go full-width edge-to-edge.
   On tablet they stay inline (looks better at that width). */
@media (max-width: 560px) {
  .phgp .features { grid-template-columns: 1fr 1fr; }
  .phgp .detail-cta { flex-direction: column; align-items: stretch; }
  .phgp .detail-cta .btn-primary,
  .phgp .detail-cta .btn-ghost,
  .phgp .area .btn-primary {
    width: 100%; justify-content: center;
  }
  .phgp .hero-card,
  .phgp .detail-art { max-width: 100%; justify-self: stretch; }
  /* Mobile: night-rail buttons return to stacked column */
  .phgp .nightrail-cta { flex-direction: column; }
  .phgp .nightrail-cta .btn-call,
  .phgp .nightrail-cta .btn-outline { width: 100%; }
}

/* =====================================================================
   PROMOTED TO CORE — 28 July 2026 (Phase 2)

   These rules were living in page-specific files, but pages OTHER than the
   ones those files are named for had come to depend on them, because every
   stylesheet used to load on every page. Conditional loading would therefore
   have changed those pages. Promoting them here preserves the current
   appearance exactly and makes conditional loading safe.

   Values chosen are the ones that actually ship today, verified by measuring
   computed styles on the live pages before and after.
   ===================================================================== */

/* Was in page-suburb.css. Home (17432) and Areas Serviced (5031) both render
   their hero pill uppercase today, courtesy of that file loading everywhere.
   Only letter-spacing and text-transform move; font-weight stays at core's
   500, which is what currently wins. */
.phgp .hero-pill {
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Was in page-areas-hub.css. The 3-step booking block is used by BOTH the
   Areas Serviced hub and all 16 suburb pages, so it is genuinely shared.
   page-suburb.css carried a 56px -> 8px variant that never won; it has been
   removed rather than reconciled (see the note in that file). */
.phgp .steps {
  padding: 8px 56px 56px; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.phgp .step {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.phgp .step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.phgp .step h3 {
  font-size: 22px; font-weight: 600; color: var(--navy);
  letter-spacing: -0.015em; line-height: 1.2;
}
.phgp .step p { font-size: 14px; color: var(--dim); line-height: 1.6; }

@media (max-width: 960px) {
  .phgp .steps { padding: 8px 24px 48px; }
}

@media (max-width: 560px) {
  .phgp .steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   PROMOTED FROM page-suburb.css, 15 August 2026
   ---------------------------------------------------------------------
   Moved here, not copied, when the telehealth hub needed them. Each one is
   a LEAF rule: appearance of a part, with no layout assumption about the
   page it sits on. Their CONTAINERS deliberately stayed behind, because
   page-suburb.css, page-team.css and page-telehealth.css each set their own
   padding and grid on those, and core.css loads LAST — anything promoted
   here beats every page stylesheet, including inside a media query, since
   a media query adds no specificity.

   DO NOT promote any of these ten: .chips, .chips-label, .chips-note,
   .crumbs, .em-000, .em-body, .emergency, .facts, .scenario, .scenarios.
   page-telehealth.css re-declares all ten in its 420px block and promoting
   them would silently restore the 24px gutter on a phone.

   Also deleted from page-team.css in the same change: its duplicate of the
   four .crumbs leaf rules, which its own header flagged for promotion.
   ===================================================================== */

/* Prose links (FAQ answers, fees, pharmacy copy) */
.phgp .prose-link {
  color: var(--navy); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--mint);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.phgp .prose-link:hover { color: var(--navy-deep); text-decoration-color: var(--navy); }

/* Breadcrumb parts */
.phgp .crumbs a { color: var(--dim); }
.phgp .crumbs a:hover { color: var(--navy); }
.phgp .crumbs .sep { color: var(--hairline-strong); }
.phgp .crumbs .here { color: var(--navy); font-weight: 600; }

/* Key facts strip, the card and its label */
.phgp .fact {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 22px 24px;
}
.phgp .fact-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.phgp .fact p { font-size: 14px; color: var(--dim); line-height: 1.55; }

/* Chips, the pill itself and its tick */
.phgp .chips.tight { padding-top: 8px; }
.phgp .chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.phgp .chip.tick::before {
  content: ''; flex-shrink: 0;
  width: 7px; height: 12px; margin-top: -3px;
  border-right: 2.5px solid var(--mint);
  border-bottom: 2.5px solid var(--mint);
  transform: rotate(45deg);
}
.phgp a.chip:hover { border-color: var(--navy); }
.phgp .chips-note a { color: var(--navy); font-weight: 500; }

/* Emergency panel, the card and the parts inside the navy strip */
.phgp .em-card {
  background: var(--mint-light); border: 1px solid var(--hairline);
  border-radius: 24px; overflow: hidden;
}
.phgp .em-000 strong { color: var(--mint); font-weight: 700; }
.phgp .em-000 .em-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
.phgp .em-body p {
  font-size: 17px; color: var(--dim); line-height: 1.65;
  margin-bottom: 16px; max-width: 860px;
}
.phgp .em-body p:last-child { margin-bottom: 0; }
.phgp .em-body p strong { color: var(--navy); font-weight: 600; }

/* Patient scenarios, the parts inside a card */
.phgp .sc-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 16px;
}
.phgp .sc-tag.reef  { color: var(--reef-700); }
.phgp .sc-tag.ocean { color: var(--ocean-700); }
.phgp .sc-tag.mango { color: var(--mango-700); }
.phgp .sc-quote {
  font-family: 'Lora', Georgia, serif; font-style: italic;
  font-size: 16.5px; color: var(--navy); line-height: 1.55;
}
.phgp .sc-rule { height: 1px; background: var(--hairline-strong); margin: 18px 0; }
.phgp .scenario .sc-answer { font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.phgp .scenario .sc-answer strong { color: var(--navy); font-weight: 600; }