/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for Twenty Twenty-Five
Template: twentytwentyfive
Version: 1.1.0
*/

/* ==========================================================================
   COASTAL PRIMARY CARE & WELLNESS — CHILD THEME STYLESHEET

   This is the single source of truth for the site's CSS. It replaces every
   earlier version of Site Editor > Styles > Additional CSS and any other
   ad-hoc CSS location. Additional CSS in the Site Editor must be left
   EMPTY — anything pasted there loads after this file and will override it.

   FILE STRUCTURE
     PART 1 — CORE UTILITIES
       Site-wide utility classes that back page markup site-wide:
         .--cloud--list-style   tag-cloud pill effect on <ul> and buttons
         .gradient-border-left  4px gradient rule on the left of a block
         .gradient-border-right 4px gradient rule on the right of a block
         .svg-center            centre helper for SVG figures
         .background-blur       10-18px backdrop blur on any block
         .blur-gradient         hover-gradient border animation
         .site-header           fixed frosted-glass header shell
         .read-more-button      inline link with an animated ↗ icon
         .price-card            adds the "Best Value" badge to a card

     PART 2 — PAGE AND COMPONENT RULES
       Sections numbered 1-78. Each section covers one page or one system.
       The section numbers reflect the order rules were originally written;
       many later sections extend or override rules in earlier ones. Groups
       below keep every related section contiguous, so all rules touching a
       given page live together in the file.

   CONVENTIONS
     - Physical margin longhands (margin-left / margin-right) are used
       throughout. Logical properties (margin-inline) lose to the physical
       properties WordPress writes on block wrappers.
     - Selectors are qualified with a page or component class prefix
       rather than relying on source order.
     - Desktop is untouched by default; most page rules live inside a
       max-width media query. Rules outside media queries are shape,
       not breakpoint.

   REQUIRED MARKUP CLASSES (added via Block sidebar > Advanced > Additional CSS)
     - .coastal-pricing on the Home pricing wrapper (activates Home
       pricing rules)
     - .coastal-eyebrow on section eyebrow paragraphs (activates
       eyebrow typography)

   SECTION INDEX
     RESPONSIVE FOUNDATIONS     — 1, 2, 3, 13, 4, 8, 9, 10, 11, 15, 16
     BUTTON SYSTEM              — 73, 56, 60, 65, 72
     HEADER AND NAVIGATION      — 7, 41, 59, 64, 66, 67
     FOOTER                     — 34, 63
     HOME PAGE                  — 5, 6, 70, 71
     ABOUT PAGE                 — 12, 44, 69
     SERVICES PAGE              — 17-26, 45, 46
     SERVICE DETAIL PAGES       — 27, 47, 74, 75
     PROVIDERS PAGE             — 28, 48, 49, 62
     PATIENTS PAGE              — 29, 61, 76
     RESOURCES LANDING PAGE     — 30, 50, 77
     RESOURCES CATEGORY PAGES   — 31, 32, 51, 52
     CONTACT PAGE               — 33, 53, 54
     START PAGE (booking)       — 35, 55, 57, 58, 78
     LEGAL PAGES                — 36
     BLOG                       — 37, 38, 39
     CONNECT CARD               — 40
     404                        — 68
   ========================================================================== */



/* ==========================================================================
   PART 1 — CORE UTILITIES
   Site-wide utility classes used across page markup.
   ========================================================================== */

/* Icons */
.card-icon {
	min-width:40px;
}

/* Tag Cloud Effect */
.--cloud--list-style {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.--cloud--list-style li,
.pv-pill,
.pv-timepill,
.pt-who-pill,
.rs-org-tag,
.sp-info {
	position: relative;
	padding: 12px 16px;

	background-color: rgb(
		from var(--wp--preset--color--accent-1)
		r g b / 0.08
	);

	color: var(--wp--preset--color--accent-1);
	border-radius: 32px;

	transition:
		transform 0.35s ease,
		background-color 0.35s ease;
}

.--cloud--list-style li::after,
.pv-pill::after,
.pv-timepill::after,
.pt-who-pill::after,
.rs-org-tag::after,
.sp-info::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;

	background: var(--wp--preset--gradient--custom-pill-box);
	background-size: 200% 200%;
	background-position: left center;

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;

	pointer-events: none;

	transition: background-position 0.6s ease;
}

.--cloud--list-style li:hover,
.pv-pill:hover,
.pt-who-pill:hover,
.rs-org-tag:hover {
	transform: translateY(-2px);
}

.--cloud--list-style li:hover::after,
.pv-pill:hover::after,
.pt-who-pill:hover::after,
.rs-org-tag:hover::after {
	background-position: right center;
}

/* LEFT GRADIENT BORDER */
.gradient-border-left {
    position: relative;
}

.gradient-border-left::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background: var(--wp--preset--gradient--custom-border);

    pointer-events: none;
}


/* RIGHT GRADIENT BORDER */
.gradient-border-right {
    position: relative;
}

.gradient-border-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 20%;
    right: 0;

    width: 4px;

    background: var(--wp--preset--gradient--custom-border);

    pointer-events: none;
}

/* SVG */
.svg-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*Glass Effects */
.background-blur {
	backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(20px);
}

/* Glass Border */
.blur-gradient {
    position: relative;
}

.blur-gradient::before,
.blur-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;

    transition: opacity 0.5s ease;
}

/* Original direction */
.blur-gradient::after {
    background: var(--wp--preset--gradient--custom-brown);
    opacity: 1;
}

/* Opposite direction */
.blur-gradient::before {
    background: var(--wp--preset--gradient--custom-brown);
    transform: rotate(180deg);
    opacity: 0;
}

.blur-gradient:hover::after {
    opacity: 0;
}

.blur-gradient:hover::before {
    opacity: 1;
}

/* Header Glass Effect */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
	width:100%;
    z-index: 1000;
	backdrop-filter: blur(60px);
   -webkit-backdrop-filter: blur(60px);
}

/* Read More Class */
.read-more-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.read-more-button::after {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;

    background-color: var(--wp--preset--color--accent-1);

    -webkit-mask: url('/wp-content/uploads/2026/07/up-right-arrow.svg') center / contain no-repeat;
            mask: url('/wp-content/uploads/2026/07/up-right-arrow.svg') center / contain no-repeat;

    transition: transform .3s ease;
}

.read-more-button:hover::after {
    transform: translate(2px, -2px);
}

/* Price card Tags */
.price-card {
    position: relative;
    overflow: visible;
}

.price-card::before {
    content: "Best Value";

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 12px;

    color: #ffffff;
    background-color: var(--wp--preset--color--accent-1);

    border-radius: 32px;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    z-index: 10;
}


/* ==========================================================================
   PART 2 — PAGE AND COMPONENT RULES
   ========================================================================== */



/* ==========================================================================
   RESPONSIVE FOUNDATIONS — site-wide breakpoint rules and page shape
   ========================================================================== */



/* --------------------------------------------------------------------------
   1. TABLET AND BELOW (900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Cover sections carry fixed pixel min-heights (760px on Home, 974px and
     550px on About). Those are desktop art-direction values and leave large
     empty bands on a phone. Content sets the height instead. */
  .wp-block-cover,
  .wp-block-cover-image {
    min-height: 0 !important;
    height: auto !important;
    padding-block: 56px !important;
  }

  /* max-height caps (500px / 550px) clip text once it rewraps taller in a
     narrowing column. */
  .wp-block-columns,
  .wp-block-columns.has-custom-css,
  .wp-block-column,
  .wp-block-column.has-custom-css,
  .wp-block-cover.has-custom-css,
  .wp-block-column > .wp-block-group,
  .wp-block-group {
    max-height: none !important;
  }

  /* Rows locked with flexWrap:nowrap squeeze rather than stack.

     NOTE: this release is deliberately broad and DOES catch icon + label
     rows, which is why long labels drop the icon onto its own line. The
     pricing tick rows are re-locked in Section 6. If the same symptom shows
     up on About, re-lock those rows there rather than narrowing this. */
  .wp-block-columns > .wp-block-column > .wp-block-group,
  .wp-block-cover .wp-block-group > .wp-block-columns,
  .wp-block-group.is-nowrap,
  .wp-block-group[class*="is-content-justification"] {
    flex-wrap: wrap !important;
  }

  /* Decorative rotate/translate transforms use absolute pixel offsets that
     only make sense at desktop width. */
  .wp-block-image,
  .wp-block-image figure,
  figure.wp-block-image,
  .wp-block-group > .wp-block-image {
    transform: none !important;
    z-index: auto !important;
  }

  .wp-block-image img {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
  }
}


/* --------------------------------------------------------------------------
   2. STACKING (782px — WordPress's own mobile breakpoint)

   These target real wp:columns blocks elsewhere on the page. The pricing
   section is a flex wp:group, not columns, so none of this reaches it —
   see Section 5.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

  .wp-block-columns,
  .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap !important;
    gap: 20px;
  }

  .wp-block-columns > .wp-block-column,
  .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Clear authored offsets on column-held card groups */
  .wp-block-column > .wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  /* ---- Spacing corrections ---- */

  .wp-block-buttons + .wp-block-image,
  .wp-block-buttons + .wp-block-group,
  .wp-block-buttons + .wp-block-columns {
    margin-top: 32px !important;
  }

  .wp-block-columns + .wp-block-columns,
  .wp-block-image + .wp-block-image {
    margin-top: 20px !important;
  }

  .wp-block-columns > .wp-block-column + .wp-block-column {
    margin-top: 24px !important;
  }

  .wp-block-columns .wp-block-column > .wp-block-group {
    padding-block: 32px !important;
  }

  /* Circular outline buttons wrap to three lines at this width. Pills keep
     the label on one line, matching the recommended card. */
  .wp-block-button__link {
    white-space: nowrap;
    text-align: center;
  }

  section > .wp-block-group + .wp-block-group,
  .wp-block-group > .wp-block-heading + .wp-block-group {
    margin-top: 28px;
  }
}


/* --------------------------------------------------------------------------
   3. PHONE (600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

  .wp-block-cover,
  .wp-block-cover-image {
    padding-block: 40px !important;
  }

  /* Angled hero gradients are built for a wide viewport. A vertical scrim
     keeps copy legible once the image is nearly square. */
  .wp-block-cover .wp-block-cover__background,
  .wp-block-cover .has-background-gradient {
    background: linear-gradient(
      180deg,
      rgba(232, 227, 220, 0.95) 0%,
      rgba(232, 227, 220, 0.88) 44%,
      rgba(232, 227, 220, 0.35) 76%,
      rgba(232, 227, 220, 0) 100%
    ) !important;
  }

  /* Full-width tap targets */
  .wp-block-buttons .wp-block-button,
  .wp-block-buttons .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .wp-block-button__link {
    min-width: 0;
    width: 100%;
  }

  .wp-block-buttons + .wp-block-image,
  .wp-block-buttons + .wp-block-group {
    margin-top: 26px !important;
  }

  .wp-block-group,
  .wp-block-columns,
  .wp-block-column {
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   13. NARROW PHONES (480px)

   Below ~480px the hero heading wraps to four lines. The cover is authored
   contentPosition "bottom center", so content taller than the cover
   overflows UPWARD, and core's overflow:hidden on .wp-block-cover clips
   the first line off. The header is NOT sticky (position type is empty),
   so this is the cover clipping its own content, not the header covering it.

   Fix is two-part: scale the display type down so it stops wrapping that
   far, and let the cover grow to its content instead of holding a
   viewport-height minimum with the content pinned to the bottom.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  .wp-block-cover.alignfull,
  .wp-block-cover-image.alignfull {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .wp-block-cover.alignfull .wp-block-cover__inner-container {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Display type is sized for a 1340px canvas. Cap it so the hero headline
     holds two or three lines instead of four. */
  .wp-block-cover.alignfull h1,
  .wp-block-cover.alignfull h2,
  .wp-block-cover.alignfull .wp-block-heading {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
  }

  .wp-block-cover.alignfull p {
    font-size: 1rem !important;
  }
}


/* --------------------------------------------------------------------------
   4. SECTION PADDING (ALIGNFULL)

   Every full-width section on Home is authored with 100px block / 80px
   inline padding for a 1340px canvas. At 390px that inline padding alone
   eats 160px — 41% of the viewport — before any content gets a pixel.

   Cover block padding is left to Sections 1 and 3; only the inline values
   are touched here so the two don't fight.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

  section.wp-block-group.alignfull:not(.site-header),
  div.wp-block-group.alignfull:not(.site-header) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  section.wp-block-cover.alignfull,
  .wp-block-cover.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 600px) {

  section.wp-block-group.alignfull:not(.site-header),
  div.wp-block-group.alignfull:not(.site-header) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  section.wp-block-cover.alignfull,
  .wp-block-cover.alignfull {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* --------------------------------------------------------------------------
   4b. ALIGNWIDE INNER PANELS

   The mission section's dark panel (and any panel like it) is alignwide,
   not alignfull, so Section 4 misses it entirely. It carries 100px block
   padding authored for a 1340px canvas, which is what leaves the large
   empty bands above and below the copy on a phone.

   .coastal-pricing is excluded deliberately: it is also alignwide, and
   .wp-block-group.alignwide (two classes) would otherwise outrank the
   .coastal-pricing padding reset in Section 5 and put the frame back.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

  .wp-block-group.alignwide:not(.coastal-pricing) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 600px) {

  .wp-block-group.alignwide:not(.coastal-pricing) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* --------------------------------------------------------------------------
   8. NO SIDEWAYS SCROLL AT ANY WIDTH

   Scoped to body only. overflow-x on the html element can break
   position:fixed descendants, which is what the navigation overlay uses.
   If the burger menu still misbehaves, comment this line out and retest —
   that isolates it in one step.
   -------------------------------------------------------------------------- */
body { overflow-x: clip; }


/* --------------------------------------------------------------------------
   9. SECTION EYEBROWS

   Backs the .coastal-eyebrow paragraph blocks added to the page markup.
   The blocks already carry equivalent inline styles, so this section is
   belt-and-braces plus the mobile size step-down. Not inside a media query
   at this level so the eyebrows are consistent on desktop too.
   -------------------------------------------------------------------------- */
.coastal-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .coastal-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
}


/* --------------------------------------------------------------------------
   10. FULL-BLEED COVER HEIGHT

   Section 1 flattens every cover to min-height:0 — right for the About
   page's 974px band, wrong for heroes, which end up too short for their
   image to read.

   No manual class needed: section-level covers are alignfull; content
   covers are nested inside a column and are handled in Section 12. Two
   classes here outrank Section 1's single-class cover rule.

   height:auto is kept so a cover with more content than 70vh still grows
   rather than clipping.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  .wp-block-cover.alignfull,
  .wp-block-cover-image.alignfull {
    min-height: 70vh !important;
    height: auto !important;
    padding-block: 48px !important;
  }
}

@media (max-width: 600px) {

  .wp-block-cover.alignfull,
  .wp-block-cover-image.alignfull {
    min-height: 60vh !important;
    padding-block: 40px !important;
  }
}


/* --------------------------------------------------------------------------
   11. UNIFORM MOBILE MEDIA

   One fixed photo height on phones instead of every image scaling to its
   own aspect ratio. Photos crop to fill and centre themselves.

   Icons are excluded by file extension: every icon in this build is an
   .svg (check_circle-5.svg and the service-card glyphs) while every photo
   is .webp or .jpg. If an icon ever ships as PNG it will get stretched to
   340px — that is the one assumption in this section.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

  .wp-block-image,
  figure.wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    float: none !important;
    transform: none !important;
  }

  .wp-block-image img:not([src$=".svg"]),
  figure.wp-block-image img:not([src$=".svg"]),
  .wp-block-image.has-custom-css img:not([src$=".svg"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 340px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
  }

  /* Icons keep their intrinsic size. These come after and outrank the rule
     above, so tick rows and card glyphs are untouched. */
  .wp-block-group.is-nowrap .wp-block-image img,
  .wp-block-image img[src$=".svg"],
  figure.wp-block-image img[src$=".svg"] {
    width: auto !important;
    height: auto !important;
    object-fit: fill !important;
  }

  /* The <img> keeping its size is not enough — the FIGURE around it was
     still going width:100% and text-align:center from the rule above. In an
     icon + label flex row that gives the figure the whole line, centres the
     glyph and drops the label underneath it. That is the About page's
     comparison cards and "This is for you if" panel.

     Icon rows are unclassed groups, so there is nothing page-specific to
     hook: matching on the SVG source is what identifies an icon figure.
     Applies to every page built this way, not just About. */
  .wp-block-image:has(img[src$=".svg"]),
  figure.wp-block-image:has(img[src$=".svg"]) {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* ...and re-lock the row itself. The rule near the top of Section 1 forces
     flex-wrap:wrap on every nowrap group, which is fine for content rows but
     drops a long label underneath its icon — short labels happened to fit on
     one line, which is why only some rows looked broken.

     Section 1's own note says to re-lock affected rows rather than narrow
     that rule. An icon + label row is identified by an SVG figure as a
     direct child, so this needs no per-page class and covers every page
     built this way.

     .ab-compare-arrow is excluded: it is an SVG figure too, but it is a
     standalone connector between two cards, not a row glyph. */
  .wp-block-group.is-nowrap:has(> figure.wp-block-image:not(.ab-compare-arrow) img[src$=".svg"]),
  .wp-block-group.is-layout-flex:has(> figure.wp-block-image:not(.ab-compare-arrow) img[src$=".svg"]) {
    flex-wrap: nowrap !important;
    align-items: flex-start;
  }

  /* The label must be allowed to shrink, or nowrap pushes it out of the row. */
  .wp-block-group.is-nowrap:has(> figure.wp-block-image:not(.ab-compare-arrow) img[src$=".svg"]) > :not(figure),
  .wp-block-group.is-layout-flex:has(> figure.wp-block-image:not(.ab-compare-arrow) img[src$=".svg"]) > :not(figure) {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 600px) {

  .wp-block-image img:not([src$=".svg"]),
  figure.wp-block-image img:not([src$=".svg"]),
  .wp-block-image.has-custom-css img:not([src$=".svg"]) {
    height: 280px !important;
  }
}


/* --------------------------------------------------------------------------
   15. HERO COVERS

   The header sits OVER the hero — the background image runs to y=0 behind
   it — so every hero needs top padding equal to the header's height or the
   headline tucks underneath. This is why the mobile heading still looked
   covered after Section 13: that section only reaches 480px, and the
   clipping happens well above it.

   Targeted as the first cover in the page content, so no block edit is
   needed. If it does not take, add a coastal-hero class to both hero cover
   blocks and add .coastal-hero to this selector list.

   NOTE: the min-width:901px block below is the ONLY rule in this file that
   changes desktop. About's hero is authored minHeight:974px with content
   pinned bottom-centre, which is the large gap between header and headline.
   70vh is a starting point — tune it.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {

  .wp-block-post-content > .wp-block-cover:first-child,
  .entry-content > .wp-block-cover:first-child,
  main > .wp-block-cover:first-child {
    min-height: 70vh !important;
    padding-top: 140px !important;
  }
}

@media (max-width: 900px) {

  .wp-block-post-content > .wp-block-cover:first-child,
  .entry-content > .wp-block-cover:first-child,
  main > .wp-block-cover:first-child {
    min-height: 60vh !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 480px) {

  .wp-block-post-content > .wp-block-cover:first-child,
  .entry-content > .wp-block-cover:first-child,
  main > .wp-block-cover:first-child {
    min-height: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 40px !important;
  }
}


/* --------------------------------------------------------------------------
   16. FOOTER EXEMPTION

   Sections 1-4 and 11 use site-wide selectors written for page content:
   .wp-block-image sizing, .wp-block-group flex releases, column stacking,
   alignfull padding, and the pill button. They reach the footer template
   part as well, which was never the intent.

   This hands the footer back to the theme. It is a patch over a scoping
   mistake, not a design — the durable fix is to scope those sections to
   main, which is a rewrite worth doing once the nav is settled.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Undo Section 11's uniform photo crop */
  footer .wp-block-image,
  footer figure.wp-block-image {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: inherit !important;
  }

  footer .wp-block-image img,
  footer figure.wp-block-image img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: initial !important;
  }

  /* Undo Section 2's pill button minimum */
  footer .wp-block-button__link {
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
  }

  /* Undo Section 4's alignfull padding override */
  footer .wp-block-group.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ==========================================================================
   BUTTON SYSTEM — unified button rules
   ========================================================================== */



/* ==========================================================================
   SECTION 73 —  --cloud--list-style ON BUTTONS

   the original stylesheet designed one visual: 8% accent-1 tint, 32px pill radius, animated
   gradient mask edge, translateY(-2px) hover. It is declared in PART 1
   against a chip list (.--cloud--list-style li and friends). His note said
   to use the same spec on BUTTONS. That is what this section does — and
   only that.

   How to use it:
     1. Put .--cloud--list-style on the wp:buttons wrapper.
     2. Add ONE colour modifier if the button is not the base tint:
          .is-fill-teal   → primary CTA. Accent-1 fill, white label.
          .is-outline     → the base 8% tint (no modifier needed — this is
                            what the base spec produces by default).
          .is-fill-navy   → dark inverse. Accent-2 fill, white label.
          .is-outline-navy → transparent with a navy border and label.

   The gradient edge, radius, transform on hover, timing — all inherited
   from PART 1. Restating them here would fork the spec, which is exactly
   what the earlier rounds did.
   ========================================================================== */

/* --- Base rule: adopt the chip spec on a button anchor ------------------
   the base rules targets .--cloud--list-style li. On a wp:buttons wrapper,
   the visible pill is .wp-block-button__link. Selector matches PART 1's
   list-item selector but on the anchor, so PART 1's ::after, hover and
   hover::after all cascade through unchanged.

   The one thing added here is display: inline-flex + gap, so the ↗ icon
   sits inline with the label instead of stacking above it. */
.--cloud--list-style.wp-block-buttons .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background-color: rgb(from var(--wp--preset--color--accent-1) r g b / 0.08);
  color: var(--wp--preset--color--accent-1);
  border: 0;
  border-radius: 32px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.35s ease,
    background-color 0.35s ease;
}

/* Same masked gradient edge the original stylesheet uses on chips. Direct port. */
.--cloud--list-style.wp-block-buttons .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--wp--preset--gradient--custom-pill-box);
  background-size: 200% 200%;
  background-position: left center;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background-position 0.6s ease;
}

.--cloud--list-style.wp-block-buttons .wp-block-button__link:hover {
  transform: translateY(-2px);
}

.--cloud--list-style.wp-block-buttons .wp-block-button__link:hover::after {
  background-position: right center;
}

/* --- The ↗ icon --------------------------------------------------------
   Uses ::before so it appears BEFORE the label. Section 65 kills every
   button ::before globally with content:none !important, so !important
   here is required to bring one back. Masked from the base asset so it
   inherits the label's colour. */
.--cloud--list-style.wp-block-buttons .wp-block-button__link::before {
  content: "" !important;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
}

/* --- Colour modifiers --------------------------------------------------
   None of these touch the radius, transition, gradient edge or hover
   motion — those all inherit. Only fill and text colour vary. */
.--cloud--list-style.is-fill-teal .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-1);
  color: #ffffff;
}

.--cloud--list-style.is-fill-navy .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-2);
  color: #ffffff;
}

.--cloud--list-style.is-outline-navy .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--accent-2);
}

/* Inline styles on the wp:button (padding, background) win against a class
   selector at equal specificity. These !importants only restate the values
   this class sets, they don't add new opinions. */
.--cloud--list-style.wp-block-buttons .wp-block-button__link {
  padding: 16px 24px !important;
}

.--cloud--list-style.is-fill-teal .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-1) !important;
}


/* --------------------------------------------------------------------------
   56. BUTTONS ON DARK PANELS — READABLE HOVER, SITE-WIDE

   The theme's default button hover drops the fill for a transparent
   background, which is fine on a light section and invisible on navy. Section
   54 fixed the two Contact buttons; this covers the rest of the site.

   Scoped by ancestor rather than applied to every button, so the outline
   buttons on the pricing cards and the Resources "Visit website" buttons keep
   the hovers written for them in Sections 45 and 51.
   -------------------------------------------------------------------------- */

.sp-cta .wp-block-button__link:hover,
.sp-cta .wp-block-button__link:focus-visible,
.sp-path .wp-block-button__link:hover,
.sp-path .wp-block-button__link:focus-visible,
.svc-audience-panel .wp-block-button__link:hover,
.svc-audience-panel .wp-block-button__link:focus-visible,
.pv-band .wp-block-button__link:hover,
.pv-band .wp-block-button__link:focus-visible,
.pv-provider .wp-block-button__link:hover,
.pv-provider .wp-block-button__link:focus-visible,
.pv-cta .wp-block-button__link:hover,
.pv-cta .wp-block-button__link:focus-visible,
.pv-system .wp-block-button__link:hover,
.pv-system .wp-block-button__link:focus-visible,
.pt-card-after .wp-block-button__link:hover,
.pt-card-after .wp-block-button__link:focus-visible,
.pc-support .wp-block-button__link:hover,
.pc-support .wp-block-button__link:focus-visible,
.rs-band .wp-block-button__link:hover,
.rs-band .wp-block-button__link:focus-visible,
.rs-cta .wp-block-button__link:hover,
.rs-cta .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-1);
  color: #ffffff;
  filter: brightness(0.92);
}


/* --------------------------------------------------------------------------
   60. BUTTONS — UNIFORM ACROSS THE SITE, HOME AS THE REFERENCE

   Home's buttons are authored with the wrapper padding explicitly zeroed:

     <!-- wp:buttons {"style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->

   Every other page's buttons were authored without it, so they inherited the
   block default and sat indented from the text above them. Rather than edit
   the wrapper on every page, the padding is zeroed here once — Home's inline
   zero agrees with it, so nothing on Home changes.

   Sizing is deliberately NOT set here. Home's buttons carry no size of their
   own, so the theme default IS the reference — the per-section overrides that
   used to set their own padding, font-size and min-width have been removed
   above rather than re-declared. Anything that still varies should be fixed
   in Styles > Blocks > Button so the editor and the front end agree.

   Layout-only exceptions remain (width:100% where a button fills a card).
   -------------------------------------------------------------------------- */

.wp-block-buttons {
  padding-left: 0;
  padding-right: 0;
}

/* The buttons block is authored layout:flex in several places, which makes
   each button shrink to fit; where a card wants a full-width button the
   wrapper has to stretch too. */
.wp-block-buttons > .wp-block-button {
  margin-left: 0;
}


/* --------------------------------------------------------------------------
   65. BUTTONS — NO PSEUDO-ELEMENT ARROW

   The arrow on every button is not in the markup and not in this stylesheet —
   it comes from a ::before declared in Styles > Blocks > Button custom CSS.
   That is what was throwing the label off-centre and adding the left offset.

   Killed here so the front end is right immediately. The proper fix is to
   delete it at source in Styles > Blocks > Button, otherwise the editor
   preview will keep showing an arrow the front end does not have.

   the base .read-more-button keeps its arrow — that one is deliberate, and it
   is an ::after on a link rather than a button.
   -------------------------------------------------------------------------- */

.wp-block-button__link::before,
.wp-block-button__link::after,
.wp-element-button::before,
.wp-element-button::after {
  content: none !important;
}


/* ==========================================================================
   SECTION 72 — BUTTONS THAT LOST THEIR FILL

   Two buttons render as bare text rather than controls:

     - the recommended pricing card's, which is is-style-outline sitting on a
       dark navy panel. Outline gives it a transparent fill and a label that
       disappears into the panel until hover repaints it.
     - the closing "Take control of your health" CTA, which carries no style
       attribute at all and is not picking up the theme default.

   Both are set explicitly rather than left to inheritance, following the
   Figma: filled accent-1, white label, full pill radius, and the base arrow.
   The arrow is masked from his up-right-arrow.svg — the same asset
   .read-more-button uses in PART 1 — so there is one file behind every
   arrow on the site.
   ========================================================================== */

/* These override the base 8% tint with a solid accent-1 fill and switch the
   label to white. Everything else — the 32px radius, the gradient ::after
   edge, the translateY hover — is inherited from PART 1 unchanged. */
.coastal-pricing .price-card .wp-block-button__link,
.hm-cta-btn .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-1) !important;
  color: #ffffff !important;
}

/* Hover darkens within the same teal family. Switching to accent-2 (navy)
   was the earlier version — on a filled teal button it turned the whole
   pill navy, and the white label read against a colour it was never meant
   to sit on. accent-1 is the teal itself; the color-mix darkens it 14%,
   which is enough to feel like feedback without changing hue. */
.coastal-pricing .price-card .wp-block-button__link:hover,
.hm-cta-btn .wp-block-button__link:hover {
  background-color: color-mix(in oklch, var(--wp--preset--color--accent-1) 86%, #000) !important;
  color: #ffffff !important;
}

/* Section 65 kills button pseudo-elements globally, so the arrow needs
   !important to come back — same as .rs-org-cta and the pricing buttons. */
/* Arrow supplied by Section 73's .cs-btn system. This ::before was the
   stray arrow floating outside the pill on the closing CTA. */


/* ==========================================================================
   HEADER AND NAVIGATION
   ========================================================================== */



/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Scoped to .site-header, which is on the block itself, rather than the
     <header> element — the group is authored as a div and only gets a
     <header> wrapper from the template part. The class always matches. */
  .site-header .wp-block-group,
  header .wp-block-group {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-width: 0;
  }

  .site-header .wp-block-site-logo img,
  header .wp-block-site-logo img {
    max-width: 160px;
    height: auto;
  }

  .site-header .wp-block-button__link,
  header .wp-block-button__link {
    padding-inline: 14px !important;
    min-width: 0;
    font-size: 1rem;
    white-space: nowrap;
  }

  /* The navigation block is authored selfStretch:"fit" (width:fit-content),
     the same pattern that mis-sized the pricing cards. Released so the
     burger and its overlay are not constrained by a shrink-wrapped parent. */
  .site-header .wp-block-navigation {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 560px) {
  /* Below this the CTA and the burger cannot coexist. The burger menu should
     carry the Book Consultation link instead — confirm it does. */
  .site-header .wp-block-buttons,
  header .wp-block-buttons { display: none !important; }
}


/* --------------------------------------------------------------------------
   41. HEADER — NAV COLOUR AND CURRENT-PAGE MARKER

   CORRECTED TWICE. Notes for future me:

   1. An earlier version forced the top-level links to white. Wrong — at full
      resolution the Figma has them in the dark navy on both the desktop bar
      and the mobile burger. Legibility over a dark hero comes from the
      frosted glass band (Section 43), not from lightening the type.

   2. The version after that used
      `.wp-block-navigation > .wp-block-navigation__container`.
      That never matches. Core wraps the <ul> in three divs —
      __responsive-container > __responsive-dialog > __responsive-container-content
      — so the container is a descendant, not a child. Any rule built on that
      chain is dead, which is why the underline did not appear.

   The current page is found via `aria-current="page"`, which core puts on the
   anchor itself. That is more reliable than the `current-menu-item` class on
   the <li>: it does not depend on the ancestor chain, and it is what core
   emits for navigation-link blocks whichever way the menu was built.

   The rule is a 2px gradient, full teal on the left fading out to the right.
   A border-bottom cannot do that — a border takes one flat colour — so it is
   drawn as a pseudo-element.
   -------------------------------------------------------------------------- */

/* Top-level links only. The submenu <ul> carries
   .wp-block-navigation__submenu-container, not __container, so dropdown
   links are not caught by this and keep their own colour. */
.site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-2);
}

.site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-1);
}

.site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--accent-2);
}


/* ---- Current page: teal rule fading to the right ------------------------ */
.site-header .wp-block-navigation-item__content[aria-current="page"],
.site-header .current-menu-item > .wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
}

.site-header .wp-block-navigation-item__content[aria-current="page"]::after,
.site-header .current-menu-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--accent-1) 0%,
    rgba(44, 191, 184, 0.55) 55%,
    rgba(44, 191, 184, 0) 100%
  );
}

/* Inside the open mobile overlay the rows are full width, so a rule spanning
   the whole row would read as a divider rather than a marker on the label.
   Dropped there. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content[aria-current="page"]::after {
  display: none;
}


/* The burger glyph is dark in the Figma too. Stated explicitly rather than
   left to the theme default. */
@media (max-width: 900px) {

  .site-header .wp-block-navigation__responsive-container-open,
  .site-header .wp-block-navigation__responsive-container-open svg {
    color: var(--wp--preset--color--accent-2);
    fill: currentColor;
  }
}


/* --------------------------------------------------------------------------
   59. HEADER — FOCUS AND ACTIVE STATES

   Two review notes: clicking a header item draws a box around it, and
   clicking anywhere on the page nudges the header text upward.

   The box is the browser's default focus ring, which the theme leaves in
   place. It is removed for mouse users only — :focus-visible still shows a
   ring for keyboard users, which is a real accessibility requirement and
   should not be dropped.

   The nudge is the current-page marker: it adds padding under the label, so
   when the state applies the text shifts. Reserving the space on every item
   means nothing moves.
   -------------------------------------------------------------------------- */

.site-header a:focus,
.site-header button:focus,
.site-header .wp-block-button__link:focus,
.site-header .wp-block-navigation-item__content:focus {
  outline: none;
  box-shadow: none;
}

/* Keyboard users keep a visible ring */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 3px;
}

/* Space is reserved on every top-level item, so applying the current-page
   marker cannot shift the row */
.site-header
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  display: inline-block;
  padding-bottom: 7px;
}

.site-header .wp-block-navigation-item__content[aria-current="page"],
.site-header .current-menu-item > .wp-block-navigation-item__content {
  padding-bottom: 7px;
}

/* Nothing in the header moves on press */
.site-header a:active,
.site-header button:active,
.site-header .wp-block-button__link:active {
  transform: none;
}


/* --------------------------------------------------------------------------
   64. MOBILE HEADER AND NAVIGATION OVERLAY

   Three review notes.

   1. Header padding. Section 4 gives every alignfull group 56px (40px below
      600px) of block padding on mobile — and .site-header is an alignfull
      group, so the bar was being inflated to several times its authored
      height. It is now exempted there, the same way the footer is, and keeps
      the 16px it is authored with.

   2. The overlay rules that used to live here are gone. The mobile menu is
      now a custom Navigation Overlay template part; Section 66 owns it.

   3. Fixed. The header is authored position:"" — not sticky — so it scrolls
      away. Making it sticky is a markup change on the template part, not a
      CSS one; see the note in chat.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  .site-header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

}


/* ==========================================================================
   SECTION 66 — MOBILE NAVIGATION OVERLAY

   Styles the custom Navigation Overlay template part (the navigation-overlay
   template part area added in WordPress 7.0), NOT core's old responsive
   container. Core renders that template part alongside the original menu
   list, so this section does three jobs: release the overlay from the
   header, hide the original list, and style our own blocks.

   The accordion is core wp:details — native open/close, no JavaScript, the
   same mechanism as the Patients page.

   Every styling hook below is a class set in the overlay markup, except
   .wp-block-navigation-overlay-close and the two core containers, which are
   noted where they appear.

   ASSET PATHS: every url() in this stylesheet is root-relative on purpose.
   This is a theme file, not database content, so a migration search-replace
   rewrites the database and sails straight past it. An absolute staging URL
   here would 404 on the live domain with nothing to warn you. Keep every
   future path relative.
   ========================================================================== */

/* --- 66.1 Tokens ---------------------------------------------------------
   If the serif, the sans or the teal doesn't apply, the preset slug is
   wrong — confirm in theme.json under settings.typography.fontFamilies and
   settings.color.palette.
   -------------------------------------------------------------------------- */
.cs-overlay {
  --cs-menu-navy: #0a2e55;
  --cs-menu-teal: var(--wp--preset--color--accent-1);
  --cs-menu-serif: var(--wp--preset--font-family--newsreader);
  --cs-menu-sans: var(--wp--preset--font-family--manrope);
  --cs-menu-rule: #e3e6e8;
  --cs-menu-sub: #5b6b73;
  --cs-menu-gutter: 20px;
}

/* --- 66.2 Release the fixed-position trap --------------------------------
   the base backdrop-filter: blur(60px) on .site-header (PART 1) makes the
   header the containing block for any position:fixed descendant, so the
   overlay renders trapped below the header instead of covering the screen.
   Drop the frost only while the menu is open — the panel is opaque white
   then, so nothing is lost, and the frosted header is untouched in every
   other state.
   -------------------------------------------------------------------------- */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 66.3 Suppress the header's own menu list on mobile ------------------
   Core keeps the original <ul> alongside the custom overlay. The old
   Section 14 forced it visible with display:flex !important, which is what
   rendered a second menu behind the panel; that section has been deleted,
   so this rule no longer needs !important to win.

   No child combinators: core wraps the <ul> in three divs
   (__responsive-container > __responsive-dialog > __responsive-container-content),
   so any direct-child path is dead. The :not() keeps the overlay's own
   blocks out of scope.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .site-header .wp-block-navigation__container:not(.cs-overlay .wp-block-navigation__container) {
    display: none;
  }
}

/* --- 66.4 Overlay shell -------------------------------------------------- */
.cs-overlay {
  padding: 0;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cs-overlay .cs-ov-top {
  align-items: center;
  padding: 24px var(--cs-menu-gutter);
}

.cs-overlay .cs-ov-top .wp-block-site-logo img {
  width: 150px;
  height: auto;
}

/* Core class, not ours. If the X ever sits wrong, this is the one selector
   in this section that depends on core's naming. */
.cs-overlay .wp-block-navigation-overlay-close {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cs-menu-navy);
}

.cs-overlay .wp-block-navigation-overlay-close svg {
  width: 26px;
  height: 26px;
}

/* --- 66.5 Top-level rows ------------------------------------------------- */
.cs-overlay .cs-ov-menu {
  margin: 8px 0 0;
}

.cs-overlay .cs-ov-row,
.cs-overlay .cs-ov-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 20px var(--cs-menu-gutter);
  border-top: 1px solid var(--cs-menu-rule);
  font-family: var(--cs-menu-serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--cs-menu-navy);
  list-style: none;
  cursor: pointer;
}

.cs-overlay .cs-ov-menu > *:last-child {
  border-bottom: 1px solid var(--cs-menu-rule);
}

.cs-overlay .cs-ov-row a {
  color: inherit;
  text-decoration: none;
}

/* --- 66.6 Details block normalisation ------------------------------------
   The theme draws a heavy contrast-coloured border on details and on an open
   summary — that is the dark rule that appeared around the Resources row.
   Element selectors included to outrank it, so the row keeps the same
   hairline weight open or closed.
   -------------------------------------------------------------------------- */
.cs-overlay details.wp-block-details.cs-ov-details {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.cs-overlay details.wp-block-details.cs-ov-details > summary,
.cs-overlay details.wp-block-details.cs-ov-details[open] > summary {
  border-top: 1px solid var(--cs-menu-rule);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: none;
}

/* --- 66.7 The + / − ------------------------------------------------------
   Suppress the native disclosure triangle in every engine, then draw the
   Figma's + / −.
   -------------------------------------------------------------------------- */
.cs-overlay .cs-ov-details > summary::-webkit-details-marker {
  display: none;
}

.cs-overlay .cs-ov-details > summary::marker {
  content: "";
}

.cs-overlay .cs-ov-details > summary::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}

.cs-overlay .cs-ov-details[open] > summary::after {
  content: "\2212"; /* true minus, not a hyphen */
}

/* --- 66.8 Submenu rows --------------------------------------------------- */
.cs-overlay .cs-ov-sub {
  padding: 14px var(--cs-menu-gutter) 16px calc(var(--cs-menu-gutter) + 14px);
  border-top: 1px solid var(--cs-menu-rule);
}

.cs-overlay .cs-ov-sub-title {
  margin: 0;
  font-family: var(--cs-menu-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cs-menu-navy);
}

.cs-overlay .cs-ov-sub-title a {
  color: inherit;
  text-decoration: none;
}

.cs-overlay .cs-ov-sub-desc {
  margin: 4px 0 0;
  font-family: var(--cs-menu-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--cs-menu-sub);
}

/* --- 66.9 View all row ---------------------------------------------------
   The arrow is masked so it takes its colour from CSS, matching how the rest
   of the site handles single-colour icons. Same asset as the base
   .read-more-button in PART 1 — if that arrow ever moves, both break
   together and this is the second place to update.
   -------------------------------------------------------------------------- */
.cs-overlay .cs-ov-viewall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 20px var(--cs-menu-gutter) 4px;
  border-top: 1px solid var(--cs-menu-rule);
  font-family: var(--cs-menu-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cs-menu-navy);
}

.cs-overlay .cs-ov-viewall a {
  color: inherit;
  text-decoration: none;
}

.cs-overlay .cs-ov-viewall::after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
}

/* --- 66.10 Panel photo ---------------------------------------------------
   The tan background shows through if the image 404s, so a broken asset
   degrades to a visible placeholder rather than a blank hole.
   -------------------------------------------------------------------------- */
.cs-overlay .cs-ov-photo {
  margin: 20px var(--cs-menu-gutter) 24px;
}

.cs-overlay .cs-ov-photo img {
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  background-color: #ede6dc;
  object-fit: cover;
}

/* --- 66.11 Book consultation pill ---------------------------------------- */
.cs-overlay .cs-ov-cta {
  margin: 30px var(--cs-menu-gutter) 40px;
}

.cs-overlay .cs-ov-cta .wp-block-button {
  width: 100%;
}

.cs-overlay .cs-ov-cta .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 24px;
  border-radius: 999px;
  background: var(--cs-menu-teal);
  font-family: var(--cs-menu-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
}

/* --- 66.12 Header band ---------------------------------------------------
   The overlay carries its own CTA, so the duplicate in the header band is
   hidden on phones. The overlay template part is rendered BY the navigation
   block and therefore sits inside .site-header, so its own button has to be
   excluded here or this rule takes both. Delete this block to keep the
   header button as well.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .site-header .wp-block-buttons:not(.cs-ov-cta) {
    display: none;
  }
}


/* ==========================================================================
   SECTION 67 — DESKTOP MEGA-MENU

   Built to the desktop Figma: a rounded white card in one fixed position,
   "View all" plus a photo in a left column, described links on the right,
   and the photo swapping to the hovered link's hero image.

   Core opens submenus on hover natively, so there is no JavaScript here and
   the parent items stay real links to /services/ and /resources/.

   Absolute positioning, not grid. An earlier version used grid with
   grid-row: 1 / -1 on the photo; -1 resolves against the EXPLICIT grid, which
   had no declared rows, so it collapsed to a single row and scattered the
   links around the gap. Don't reintroduce it.

   IMAGE NOTES, worth reading before changing the URLs below:

   1. Paths are root-relative — see the note at the top of Section 66.
   2. Four of these point at WordPress-generated sizes (-1024x…). Those are
      the right payload for a 282px column, but they are derived files: if
      the media library is ever regenerated with a different size set, the
      filename can disappear while the original stays. If a panel goes tan
      after some future maintenance, that is the first thing to check.
   3. The weight-loss image carries -e1786129143603-, meaning it was cropped
      in the WordPress image editor. Using "Restore original image" on that
      attachment deletes every -e… file. Same symptom, different cause.
   4. Every photo sits on a tan background-color, so any of the above
      degrades to a visible placeholder rather than a blank hole.
   ========================================================================== */

@media (min-width: 600px) {

  /* --- 67.1 Tokens ------------------------------------------------------
     Panel images, one per sub-page. These are the only values in this
     section you should normally need to edit.
     ---------------------------------------------------------------------- */
  .site-header {
    --cs-menu-navy: #0a2e55;
    --cs-menu-teal: var(--wp--preset--color--accent-1);
    --cs-menu-sans: var(--wp--preset--font-family--manrope);
    --cs-menu-sub: #5b6b73;
    --cs-menu-hover: #e4f4f1;
    --cs-panel-fallback: #ede6dc;

    /* Services sub-pages */
    --cs-img-primary-care: url("/wp-content/uploads/2026/09/499282e4a8d3f838c539236f58dd88b958812848-1024x615.webp");
    --cs-img-hormone: url("/wp-content/uploads/2026/07/Home_main.webp");
    --cs-img-weight-loss: url("/wp-content/uploads/2026/08/ea46a034dbf4bbd97f688558211eb46bc5b74d51-e1786129143603-1024x684.webp");
    --cs-img-peptide: url("/wp-content/uploads/2026/08/14733403fe1b2c1a7633e5639f154adc63c5e92d-1024x576.webp");

    /* Resources sub-pages */
    --cs-img-veterans: url("/wp-content/uploads/2026/08/7b9265e32e0b14ad4d07fc3af30d36a0f60d833b.webp");
    --cs-img-first-responders: url("/wp-content/uploads/2026/08/5f3f436c4294f1e87b32a7a5cda076552050849e.webp");
    --cs-img-mental-health: url("/wp-content/uploads/2026/08/421f22b5a19739754f84f4da16b2255416410a45.webp");
    --cs-img-service-support: url("/wp-content/uploads/2026/08/c93f3373fd1cdf79ff1209c9acc415a2a7057605.webp");

    /* Shown when nothing in the panel is hovered */
    --cs-img-services-default: var(--cs-img-primary-care);
    --cs-img-resources-default: var(--cs-img-veterans);

    /* Panel geometry — tune these two if the card sits wrong */
    --cs-panel-width: 760px;
    --cs-panel-inset: 120px; /* from the right edge of the 1340px container */
  }

  /* --- 67.2 Containing block --------------------------------------------
     Hand the panel to .site-header, which PART 1 already positions absolute.
     Everything between the header and the submenu must be static —
     .wp-block-navigation__responsive-container is in that chain even on
     desktop and was pinning the panel to the width of the menu itself.

     Do NOT add position:relative to any child of .site-header; that pins the
     panel to the 1340px inner group instead. Both mistakes have been made
     once already.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation-item.has-child,
  .site-header .wp-block-navigation,
  .site-header .wp-block-navigation__container,
  .site-header .wp-block-navigation__responsive-container,
  .site-header .wp-block-navigation__responsive-container-content {
    position: static;
  }

  /* --- 67.3 Parent item state -------------------------------------------- */
  .site-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content {
    color: var(--cs-menu-teal);
  }

  .site-header .wp-block-navigation__submenu-icon {
    transition: transform 0.18s ease;
  }

  .site-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
  }

  /* --- 67.4 The panel ---------------------------------------------------
     One fixed position for both menus, per the Figma — not anchored under
     each parent. The left padding reserves the photo column.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    position: absolute;
    /* The gap between the menu item and this panel is bridged in 67.11, on the
       menu item itself. Do NOT bridge it with a transparent top border here —
       that border sits over the bottom of the parent link and the panel
       swallows the click, so Services and Resources stop navigating. */
    top: calc(100% - 4px);
    left: auto;
    right: calc(max(20px, (100% - 1340px) / 2) + var(--cs-panel-inset));
    display: block;
    width: min(var(--cs-panel-width), calc(100% - 40px));
    min-width: 0;
    min-height: 400px;
    padding: 32px 32px 32px 350px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    background-clip: border-box;
    box-shadow: 0 20px 50px rgba(10, 46, 85, 0.14);
    transition: opacity 0.18s ease;
  }

  /* --- 67.5 Link rows ---------------------------------------------------
     Row padding lives on the <li>, not the <a>: core makes
     .wp-block-navigation-item__content a flex container, so anything hung
     off the anchor becomes a flex SIBLING of the label and lands beside it
     rather than under it. That is why the description sits on the <li>.
     The arrow is a background on the <li> so it stays centred against the
     whole two-line row.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block;
    width: auto;
    padding: 14px 48px 14px 16px;
    border: 0;
    border-radius: 10px;
    background-image: url("/wp-content/uploads/2026/07/up-right-arrow.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    transition: background-color 0.15s ease;
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover {
    background-color: var(--cs-menu-hover);
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block;
    width: auto;
    font-family: var(--cs-menu-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cs-menu-navy);
    text-decoration: none;
  }

  /* Core keeps its own horizontal padding on submenu links; without this the
     label and the description below it disagree by core's 1em. The element
     selector is there to outrank core's rule. */
  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item > a.wp-block-navigation-item__content {
    padding: 0;
    margin: 0;
    text-indent: 0;
  }

  /* Section 41 gives top-level items a current-page underline and reserves
     7px of padding for it. Inside the panel that reads as a stray rule. */
  .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
    padding-bottom: 0;
  }

  .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"]::after {
    display: none;
  }

  /* --- 67.6 Descriptions ------------------------------------------------
     Core submenu items hold a label and a URL only, so on desktop these come
     from CSS, keyed on href so a label change is safe. (The mobile overlay
     uses real paragraph blocks, which the client can edit.)

     Slug note: the Hormone page URL really is /hormone-replacement/ even
     though the label reads Hormone Optimization.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item::after {
    display: block;
    margin-top: 3px;
    font-family: var(--cs-menu-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cs-menu-sub);
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/primary-care"])::after {
    content: "Direct, unhurried care";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/hormone-replacement"])::after {
    content: "Balanced hormones, real energy";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/weight-loss"])::after {
    content: "Sustainable, physician-guided";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/peptide-therapy"])::after {
    content: "Targeted recovery & performance";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/veterans-military"])::after {
    content: "VFW, American Legion, …";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/first-responders"])::after {
    content: "Fraternal Order of Police …";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/mental-health-recovery"])::after {
    content: "PTSD retreat programs …";
  }

  .site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:has(a[href*="/service-support"])::after {
    content: "K9 therapy programs …";
  }

  /* --- 67.7 View all / Resources overview -------------------------------
     Pulled out of the link flow into the top of the left column. Requires
     the two menu items carrying class cs-menu-viewall.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation__submenu-container > .cs-menu-viewall {
    position: absolute;
    top: 32px;
    left: 32px;
    width: 282px;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: left 170px center;
  }

  .site-header .wp-block-navigation__submenu-container > .cs-menu-viewall:hover {
    background-color: transparent;
  }

  .site-header .wp-block-navigation__submenu-container > .cs-menu-viewall > .wp-block-navigation-item__content {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cs-menu-navy);
  }

  .site-header .wp-block-navigation__submenu-container > .cs-menu-viewall > .wp-block-navigation-item__content:hover {
    color: var(--cs-menu-teal);
  }

  .site-header .wp-block-navigation__submenu-container > .cs-menu-viewall::after {
    content: none;
  }

  /* --- 67.8 The photo ---------------------------------------------------
     Fills the left column and swaps to the hovered link's hero image. The
     hover rules come after the defaults deliberately — same specificity, so
     source order decides. If :has() hover is ever unsupported the panel
     simply keeps its default image, which is why the defaults are declared
     separately rather than inherited from the first link.

     background-image does not animate, so the swap is a cut, not a fade. A
     crossfade would need a second real element; this container has only one
     pseudo-element left.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::after {
    content: "";
    position: absolute;
    top: 76px;
    bottom: 32px;
    left: 32px;
    width: 282px;
    border-radius: 8px;
    background-color: var(--cs-panel-fallback);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Panel defaults — identified by a child link, since both parents are
     plain anchors with no distinguishing class. */
  .site-header .wp-block-navigation__submenu-container:has(a[href*="/primary-care"])::after {
    background-image: var(--cs-img-services-default);
  }

  .site-header .wp-block-navigation__submenu-container:has(a[href*="/veterans-military"])::after {
    background-image: var(--cs-img-resources-default);
  }

  /* Per-link swap on hover */
  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/primary-care"])::after {
    background-image: var(--cs-img-primary-care);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/hormone-replacement"])::after {
    background-image: var(--cs-img-hormone);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/weight-loss"])::after {
    background-image: var(--cs-img-weight-loss);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/peptide-therapy"])::after {
    background-image: var(--cs-img-peptide);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/veterans-military"])::after {
    background-image: var(--cs-img-veterans);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/first-responders"])::after {
    background-image: var(--cs-img-first-responders);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/mental-health-recovery"])::after {
    background-image: var(--cs-img-mental-health);
  }

  .site-header .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:hover a[href*="/service-support"])::after {
    background-image: var(--cs-img-service-support);
  }

  /* --- 67.9 Preload -----------------------------------------------------
     Without this the first hover on each link fetches its image on the spot
     and flashes the tan fallback. Zero-size, no layout impact, no extra
     markup — the images are simply requested once the header exists.
     ---------------------------------------------------------------------- */
  .site-header::after {
    content: var(--cs-img-primary-care) var(--cs-img-hormone)
             var(--cs-img-weight-loss) var(--cs-img-peptide)
             var(--cs-img-veterans) var(--cs-img-first-responders)
             var(--cs-img-mental-health) var(--cs-img-service-support);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* --- 67.10 Flush titles -----------------------------------------------
     Core's own submenu rule keeps horizontal padding on the anchor and was
     outranking the reset in 67.5 — the title sat indented while the
     description below it, which hangs off the <li>, started flush.

     Both padding-inline and the physical longhands are declared on purpose:
     WordPress's physical padding-left beats padding-inline regardless of
     source order, the same trap the margin rules hit earlier in this build.
     ---------------------------------------------------------------------- */
  .site-header
    .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding-inline: 0;
    padding-left: 0;
    padding-right: 0;
    margin-inline: 0;
  }

  /* --- 67.11 Hover bridge ------------------------------------------------
     There is a dead strip between the menu item and the panel — the header's
     bottom padding — and crossing it drops :hover, which closed the menu on
     the way to a link.

     Bridged on the ITEM, not the panel: padding counts as part of the
     element for hover purposes, and the negative margin cancels the layout
     shift, so nothing moves and the parent link stays fully clickable.
     Raise both numbers together if a gap ever reappears.
     ---------------------------------------------------------------------- */
  .site-header .wp-block-navigation__container > .wp-block-navigation-item.has-child {
    padding-bottom: 24px;
    margin-bottom: -24px;
  }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */



/* --------------------------------------------------------------------------
   34. FOOTER — MOBILE ALIGNMENT

   The footer wrapper is justifyContent:space-between and the group holding
   the three menus is justifyContent:right. Once everything wraps onto one
   column those push each menu to the right edge, which is what makes the
   columns look centred and stepped. Everything is forced left here.

   Scoped to the footer element and to mobile only, so the desktop layout
   (logo left, three menus right) is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {

  /* Root padding: 80px each side is most of a phone screen */
  footer.wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Outer wrap and the menu group both stop pushing content right */
  footer .wp-block-group.alignwide,
  footer .wp-block-group.alignwide > .wp-block-group {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* The logo/tagline column is authored at a fixed 350px */
  footer .wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  /* Each menu becomes a full-width, left-aligned stack */
  footer .wp-block-navigation {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  footer .wp-block-navigation .wp-block-navigation__container {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  footer .wp-block-navigation .wp-block-navigation-item {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  footer .wp-block-navigation .wp-block-navigation-item__content {
    text-align: left !important;
  }

  /* Space between the three menus once stacked */
  footer .wp-block-group.alignwide > .wp-block-group {
    gap: var(--wp--preset--spacing--40) !important;
  }

  footer .wp-block-site-logo {
    margin-left: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   63. FOOTER — THE WHITE BAR

   Nothing in the footer markup draws it. It is the block gap the theme puts
   between the top-level children of .wp-site-blocks: the last page section
   ends, the gap shows the body background, then the footer starts. On pages
   whose final section is tan the strip reads as a white bar.

   Removing the gap before the footer closes it without touching the spacing
   between page sections.
   -------------------------------------------------------------------------- */

.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child {
  margin-block-start: 0;
}

/* Belt and braces: the same gap can sit under main rather than over the
   footer, depending on how the template is assembled. */
.wp-site-blocks > main {
  margin-block-end: 0;
}


/* ==========================================================================
   HOME PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   5. PRICING CARDS

   The section is a flex wp:group ("Price Cards"), NOT wp:columns — which is
   why every .wp-block-column selector missed it entirely. Scoped to a manual
   class rather than generated wp-container-* hashes, which regenerate on
   save and would silently stop matching.

   Cards 1 and 3 are authored with max-width:33% and selfStretch:"fit"
   (width:fit-content). Card 2 uses selfStretch:"fill" (width:100%) with no
   max-width, which is the only reason the dark card looks right. These rules
   normalise 1 and 3 onto card 2's behaviour.
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {

  /* Outer wrapper: stack, and drop the shared frame so each card reads as
     self-contained the way the dark one already does. */
  .coastal-pricing {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* The three cards — kill max-width:33%, go full width */
  .coastal-pricing > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 32px !important;
    padding-left: 24px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Inner content groups: neutralise width:fit-content from
     selfStretch:"fit" and the min-width:100% block CSS */
  .coastal-pricing > .wp-block-group > .wp-block-group,
  .coastal-pricing > .wp-block-group > .wp-block-group > .wp-block-group,
  .coastal-pricing > .wp-block-group > .wp-block-group > .wp-block-heading,
  .coastal-pricing > .wp-block-group > .wp-block-group > p {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* --------------------------------------------------------------------------
   6. TICK + LABEL ROWS

   Flex groups carrying is-nowrap and is-content-justification-left, both
   caught by the wrap release in Section 1, which is why only the longer
   labels ("Medication management", "Advanced specialty testing") break onto
   two lines. The extra class here outranks the Section 1 rule.

   The descendant combinator deliberately cannot match .coastal-pricing
   itself, so the wrapper still stacks while these rows stay locked.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  .coastal-pricing .wp-block-group.is-nowrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .coastal-pricing .wp-block-group.is-nowrap > .wp-block-image,
  .coastal-pricing .wp-block-group.is-nowrap > figure.wp-block-image {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .coastal-pricing .wp-block-group.is-nowrap > .wp-block-image img {
    min-width: 0 !important;
    width: auto !important;
  }

  .coastal-pricing .wp-block-group.is-nowrap > p {
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
}


/* ==========================================================================
   SECTION 70 — HOME PRICING CARD BUTTONS

   The outer two cards (Basic, Full Access) carry background-color:#ffffff00
   with no border, so their CTA renders as bare text while the middle card
   has a filled pill. The Figma gives all three a real control: outlined on
   the outer cards, filled on the recommended one.

   Fixed here rather than in the markup because the transparent background is
   an inline style — an inline value always beats a stylesheet rule, so this
   needs the !important either way. Doing it in CSS keeps it in one place
   instead of two edited buttons, and it holds if the section is duplicated.

   Targeted by "is inside .coastal-pricing and is NOT inside .price-card",
   so the recommended card in the middle is untouched.
   ========================================================================== */

/* Outer cards inherit the base chip spec via .--cloud--list-style on the
   wp:buttons wrapper. This rule only exists to override the inline
   background-color:#ffffff00 that ships on the two Book Consultation
   buttons — nothing here restates the base tint, radius or transition. */
.coastal-pricing > .wp-block-group:not(.price-card) .wp-block-button__link {
  background: rgb(from var(--wp--preset--color--accent-1) r g b / 0.08) !important;
}

/* The recommended card keeps the filled treatment, stated explicitly rather
   than left to the theme default — the card is authored is-style-outline,
   which would otherwise draw a transparent button on the dark panel. */
.coastal-pricing > .price-card .wp-block-button__link {
  border: 0 !important;
  background-color: var(--wp--preset--color--accent-1) !important;
  color: #ffffff !important;
}

.coastal-pricing > .price-card .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-2) !important;
  color: #ffffff !important;
}

/* The buttons block is selfStretch:"fixed" with flexSize:"100%" — which in a
   column flex container resolves to HEIGHT, not width (see the gotcha list).
   The control still needs to fill the card horizontally. */
.coastal-pricing .wp-block-buttons {
  width: 100%;
}

.coastal-pricing .wp-block-button {
  width: 100%;
}

.coastal-pricing .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}


/* ==========================================================================
   SECTION 71 — HOME: PRICING BUTTON SIZE AND ARROW, COMPARE ROWS
   ========================================================================== */

/* ---- Pricing buttons ----------------------------------------------------
   Sized down from spacing-40 top and bottom, which made them noticeably
   taller than the Figma's, and given the arrow back. Section 65 kills the
   button arrow globally with content:none !important, so it needs
   !important here to come back — same as .rs-org-cta on the Resources
   pages. Drawn as a mask from the base asset, so it takes the button's own
   colour in both the outlined and filled states.
   -------------------------------------------------------------------------- */
.coastal-pricing .wp-block-button__link {
  gap: 8px;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  font-size: 1rem;
}

/* Arrow supplied by Section 73's .cs-btn system. This rule drew a second
   arrow on top of it. */

/* ---- Compare rows -------------------------------------------------------
   Each row is a flex pair: a 50% "before" group and a 40% "after" group,
   both sized by flexSize, which WordPress emits as a flex-basis on a
   generated .wp-container-content-* class. At mobile that keeps two columns
   in a 390px viewport and wraps "Data-driven evaluation" onto three lines.

   The Figma stacks them into a single list, so each half takes a full row
   and the connecting arrow is dropped — with the halves stacked there is
   nothing left for it to point between.

   .hm-compare is added to the wrapper in the page markup; the rows and the
   halves inside it are unclassed, so they are reached structurally.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {

  .hm-compare > .wp-block-group {
    flex-wrap: wrap !important;
    /* Figma reference: 8px above the X row, 16px between the two halves,
       16px below the last row. The X row sits at the top of the row's
       padding, so 8px goes on padding-top and 16px between via row-gap. */
    row-gap: 16px;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }

  .hm-compare > .wp-block-group > .wp-block-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
  }

  /* The "after" half holds three children in a row: arrow, check, label.
     Stacked, the Figma wants the arrow on its own line above the check, with
     both icons in the same left-hand column and the label beside the check.

     Grid with EXPLICIT placement, not auto-flow — every child is assigned a
     row and column, so nothing can reshuffle. (An earlier attempt elsewhere
     in this file used grid-row: 1 / -1 and collapsed, because -1 resolves
     against the explicit grid; there are no open-ended spans here.) */
  .hm-compare > .wp-block-group > .wp-block-group:last-child {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    /* Space between the arrow row and the check + label row. */
    row-gap: 14px;
  }

  .hm-compare > .wp-block-group > .wp-block-group:last-child > .svg-center {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    /* The X and check are circular icons inside a 24px box (visible edge
       ~1px inside their bounding box). The arrow has no bounding shape, so
       its visible edge is at 0 — 1px to the left of the other two. Nudge it
       right to match. */
    margin-left: 1px;
  }

  /* Both the X and check figures have no class, so Section 11's blanket
     rules apply to both:
     .wp-block-image { width:100% !important; text-align:center !important; }
     The check is handled below; the X row above works the same way. */
  .hm-compare > .wp-block-group > .wp-block-group:first-child > figure.wp-block-image {
    display: block !important;
    width: 24px !important;
    max-width: 24px !important;
    margin: 0 !important;
  }

  .hm-compare > .wp-block-group > .wp-block-group:first-child > figure.wp-block-image img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
  }

  /* The check figure has no class, so Section 11's blanket rules apply:
     .wp-block-image { width:100% !important; text-align:center !important; }
     Two independent stretchers.

     Fixed by:
       - display:block, which severs text-align from horizontal positioning
         (text-align only affects inline content, not the block box);
       - a fixed 24px width, which overrides the 100% stretch and makes the
         grid cell see the figure as a 24px-wide item;
       - justify-self:start then has something to move against.
     The order matters and all three are needed together. */
  .hm-compare > .wp-block-group > .wp-block-group:last-child > figure.wp-block-image:not(.svg-center) {
    display: block !important;
    grid-column: 1;
    grid-row: 2;
    width: 24px !important;
    max-width: 24px !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The <img> inside is capped at 24×24 to match the X icon on the row
     above. Section 11 stretches images too, hence the !important. */
  .hm-compare > .wp-block-group > .wp-block-group:last-child > figure.wp-block-image:not(.svg-center) img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .hm-compare > .wp-block-group > .wp-block-group:last-child > .wp-block-heading {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   12. ABOUT PAGE

   The founder block is a wp:columns carrying max-height:550px, holding a
   550px cover in one column and seven paragraphs in the other. Stacked,
   the content far exceeds 550px, overflows a capped box, and the next
   section renders over it. Section 1 now clears that cap.

   Content covers (a cover nested inside a column, as opposed to a hero
   section cover) get a fixed mobile height instead of Section 1's collapse
   to auto. Two classes outrank Section 1's single-class cover rule.

   The founder photo is a cover background image, not a wp:image, so
   Section 11 does not reach it — object-position is set here instead.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  .wp-block-column .wp-block-cover,
  .wp-block-columns .wp-block-cover {
    min-height: 340px !important;
    height: 340px !important;
    max-height: 340px !important;
    padding-block: 16px !important;
  }

  .wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 600px) {

  .wp-block-column .wp-block-cover,
  .wp-block-columns .wp-block-cover {
    min-height: 280px !important;
    height: 280px !important;
    max-height: 280px !important;
  }
}


/* --------------------------------------------------------------------------
   44. ABOUT PAGE — CLOSING CTA PHOTOS

   The gradient rules on this page use the base .gradient-border-left from
   PART 1. Nothing is redefined here — an earlier version of this section
   overrode it at 2px, which is what made his 4px rule look like it was not
   working.
   -------------------------------------------------------------------------- */

/* ---- Closing CTA photos -------------------------------------------------
   These were authored with per-block transforms carrying absolute offsets
   — translatey(-110px) and translatey(150px) — which pushed the right-hand
   photo clean out of the bottom of the section and left the two at
   unrelated sizes. Both now share one aspect ratio and sit inside the
   section, tilted as in the Figma.
   ------------------------------------------------------------------------ */

.ab-tilt-a img,
.ab-tilt-b img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (min-width: 901px) {
  .ab-tilt-a {
    transform: rotate(-8deg) translateY(-18px);
  }

  .ab-tilt-b {
    transform: rotate(8deg) translateY(42px);
  }
}

/* Section 11 already flattens transforms and crops every photo to a fixed
   height below 782px, so the phone case needs nothing here. This covers the
   tablet band between, where the tilt would otherwise still apply. */
@media (max-width: 900px) {
  .ab-tilt-a,
  .ab-tilt-b {
    transform: none;
  }
}


/* ==========================================================================
   SECTION 69 — ABOUT PAGE, MOBILE

   Two faults visible against the Figma's mobile column:

     1. icon + label rows broke apart, the glyph centred on its own line.
        Fixed globally in Section 11 rather than here — the same markup
        pattern is used on other pages, so a page-scoped fix would have left
        them broken.
     2. the "This is for you if" panel carries top and bottom padding but no
        horizontal padding. At desktop its constrained 600px content sits
        inside a wider panel and that reads as side padding; once the panel
        narrows to the viewport there is nothing holding the text off the
        edge, so the copy and the row dividers run edge to edge.

   The panel needed a class to be addressable — it was an unclassed group.
   .ab-foryou is added in the page markup.
   ========================================================================== */

@media (max-width: 781px) {

  .ab-foryou {
    padding-top: 56px;
    padding-right: 24px;
    padding-bottom: 56px;
    padding-left: 24px;
  }

  /* Rows sit tighter than the desktop spacing-30, matching the Figma. */
  .ab-foryou .wp-block-group.is-nowrap {
    padding-bottom: 16px;
  }

  /* The connector between the two comparison cards. Stacked, it belongs
     between them pointing down, not floating beside the first card — it sat
     there because the Section 11 fix above gives SVG figures auto width, and
     at auto width it fitted on the same line as the card.

     The asset is circle-arrow-right.svg; rotating it is deliberate, so there
     is only one file to maintain and it stays correct if the icon changes. */
  /* Stack the wrapper as a column rather than trying to make the arrow claim
     a full row. Three attempts at the row approach failed: the block carries
     selfStretch:"fill", so WordPress emits a flex-basis on the generated
     .wp-container-content-* class, and flex-basis beats width when a flex
     item's main size is computed. Overriding the basis kept not taking.

     Column direction removes the question — every child gets its own line by
     definition, whatever its basis says. In a column, flex-basis governs
     height instead of width, so the arrow is set back to auto. */
  .wp-block-group.is-layout-flex:has(> .ab-compare-arrow) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .ab-compare-arrow {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    align-self: center !important;
    margin: 24px auto !important;
    text-align: center !important;
  }

  .ab-compare-arrow img {
    transform: rotate(90deg);
  }
}


/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   17. SERVICES — TICK LISTS

   .svc-tick is used in three places: the approach panel, the pricing card
   feature lists, and the audience panel. One mark, drawn once.
   -------------------------------------------------------------------------- */
.svc-tick {
  position: relative;
  padding-left: 34px;
  margin: 0;
}

/* the base real icon, not a drawn circle */
.svc-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  background: url("/wp-content/uploads/2026/07/check_circle-5.svg") center / contain no-repeat;
}



/* The approach panel rows sit in their own tinted bar */
.svc-tick-list .svc-tick {
  padding: 14px 16px 14px 46px;
  border-radius: 6px;
  border-left: 2px solid var(--wp--preset--color--accent-1);
  background: rgba(255, 255, 255, 0.05);
}

.svc-tick-list .svc-tick::before {
  left: 16px;
  top: 1em;
}


/* --------------------------------------------------------------------------
   18. SERVICES — APPROACH PANEL

   Image column and dark panel are one card at desktop. The image fills its
   half; below the stacking point it becomes a fixed-height banner.
   -------------------------------------------------------------------------- */
.svc-approach-row {
  border-radius: 8px;
  overflow: hidden;
}

.svc-approach-media,
.svc-approach-media .svc-fill-img,
.svc-approach-media .svc-fill-img img {
  height: 100%;
}

.svc-fill-img img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.svc-note {
  font-size: 1.13rem;
}

@media (max-width: 781px) {
  .svc-approach-media .svc-fill-img img {
    height: clamp(200px, 46vw, 280px);
  }
}


/* --------------------------------------------------------------------------
   19. SERVICES — COMPARISON ROWS

   Left is the old way (muted, crossed), right is the Coastal way (ticked),
   with an arrow between. Stacked, the arrow turns to point down.
   -------------------------------------------------------------------------- */
.svc-compare-rows {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.svc-compare-row {
  padding-block: 18px;
  border-bottom: 1px solid rgba(10, 27, 108, 0.12);
  align-items: center;
}

.svc-was,
.svc-now {
  position: relative;
  padding-left: 34px;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

.svc-was {
  opacity: 0.55;
}

/* the base real icon */
.svc-was::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  background: url("/wp-content/uploads/2026/07/circle_X.svg") center / contain no-repeat;
}

/* Filled tick */
.svc-now::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}

.svc-now::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.15em + 8px);
  width: 8px;
  height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

/* Arrow between the two */
.svc-arrow {
  flex: 0 0 auto;
  width: 40px;
  margin: 0;
  text-align: center;
}

.svc-arrow::before {
  content: "\2192";
  color: var(--wp--preset--color--accent-1);
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
}

@media (max-width: 781px) {
  .svc-compare-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .svc-was,
  .svc-now,
  .svc-arrow {
    flex: 1 1 100%;
    width: auto;
    text-align: left;
  }

  .svc-arrow::before {
    content: "\2193";
    margin-left: 4px;
  }
}


/* --------------------------------------------------------------------------
   20. SERVICES — EVALUATION GRID

   Image sits directly on top of the dark panel, sharing rounded corners.
   -------------------------------------------------------------------------- */
.svc-eval-img img {
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}

.svc-eval-img {
  margin-bottom: 0;
}

.svc-eval-grid {
  border-radius: 0 0 8px 8px;
  /* Rows size to their content. Without this the grid stretches every cell
     to the tallest row box, which produced long empty columns. */
  grid-auto-rows: min-content;
  align-items: start;
  align-content: start;
  /* The panel is a flex item in a VERTICAL flex wrapper, so the main axis is
     vertical and the cross axis is horizontal. flex-basis controls its
     height; align-self controls its width. It must stay stretched across
     (full width) while sizing to content down the page. */
  align-self: stretch;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
}

.svc-eval-item {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: 16px;
  align-self: start;
  height: auto;
  min-height: 0;
  max-height: none;
}

.svc-eval-item h4 {
  margin: 0;
  font-size: 1.05rem;
}

.svc-eval-desc {
  margin: 0;
  font-size: 1.06rem;
  opacity: 0.85;
}

.svc-eval-icon {
  margin: 0 0 4px;
}

/* Centred as a block. inline-block did not centre because the element's
   own text-align does not position it — the parent's does, and the section
   is left-aligned. width:fit-content plus auto margins centres it while the
   text inside stays left. */
.svc-quote {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: 16px;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-style: italic;
}


/* --------------------------------------------------------------------------
   21. SERVICES — MEMBERSHIP CARDS

   The wrapper carries .coastal-pricing so Sections 5 and 6 of this file
   already stack and normalise it on mobile. These rules are desktop shape
   plus the Best Value badge.
   -------------------------------------------------------------------------- */
.svc-pricing > .svc-card {
  flex: 1 1 0;
  min-width: 0;
}

.svc-card-featured {
  position: relative;
}


.svc-card-tag {
  margin: 0;
  border-radius: 4px;
}

.svc-bestfor {
  margin: 0;
  font-size: 1rem;
  opacity: 0.7;
}

.svc-card-list {
  flex: 1 1 auto;
}

.svc-card-cta {
  margin-top: auto;
}

.svc-card-cta .wp-block-button {
  width: 100%;
}

.svc-card-cta .wp-block-button__link {
  width: 100%;
  text-align: center;
}

.svc-footnote {
  font-size: 1.06rem;
  opacity: 0.75;
}

@media (max-width: 900px) {
  /* Section 5 removes the shared frame; the badge needs headroom once the
     cards are separate */
  .svc-card-featured {
    margin-top: 14px;
  }
}


/* --------------------------------------------------------------------------
   22. SERVICES — PROCESS STEPS
   -------------------------------------------------------------------------- */
.svc-process-media,
.svc-process-media .svc-fill-img,
.svc-process-media .svc-fill-img img {
  height: 100%;
}

.svc-step {
  border-radius: 8px;
}

.svc-step-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-step-title {
  margin: 0;
  font-size: 1.05rem;
}

.svc-step-desc {
  margin: 0;
  font-size: 1.06rem;
  opacity: 0.75;
}

@media (max-width: 781px) {
  .svc-process-media .svc-fill-img img {
    height: clamp(220px, 52vw, 320px);
  }

  /* Section 1 releases nowrap rows site-wide, which would drop the number
     onto its own line. Re-locked, same pattern as the pricing tick rows. */
  .svc-step {
    flex-wrap: nowrap;
  }
}


/* --------------------------------------------------------------------------
   23. SERVICES — AUDIENCE PANEL
   -------------------------------------------------------------------------- */
.svc-audience-list .svc-tick {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.svc-audience-list .svc-tick:last-child {
  border-bottom: 0;
}

.svc-audience-list .svc-tick::before {
  top: 0.95em;
}


/* --------------------------------------------------------------------------
   24. SERVICES — CLOSING CTA

   Two photos flank the copy, tilted. Absolute-degree rotation is fine
   fluid; the columns stack below 781px and the tilt is dropped.
   -------------------------------------------------------------------------- */
.svc-tilt-a img,
.svc-tilt-b img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (min-width: 901px) {
  .svc-tilt-a {
    transform: rotate(-6deg);
  }

  .svc-tilt-b {
    transform: rotate(6deg);
  }

  .svc-tilt-a img,
  .svc-tilt-b img {
    height: 240px;
  }
}

@media (max-width: 900px) {
  .svc-tilt-a,
  .svc-tilt-b {
    transform: none;
  }

  .svc-tilt-a img,
  .svc-tilt-b img {
    height: clamp(180px, 40vw, 240px);
  }
}

@media (max-width: 781px) {
  /* Photos flanking the copy do not read on a phone — copy first */
  .svc-cta-row {
    display: flex;
    flex-direction: column;
  }

  .svc-cta-row > .wp-block-column:nth-child(2) {
    order: 1;
  }

  .svc-cta-media {
    order: 2;
  }
}


/* --------------------------------------------------------------------------
   25. SERVICES — MOBILE CORRECTIONS

   Section 1 releases nowrap rows site-wide and Section 11 centres every
   image, both with !important. Those are right for page content and wrong
   for icon rows and badges, so the exemptions here carry !important too.
   -------------------------------------------------------------------------- */

/* ---- Icons and number badges keep their place in the row ---------------- */
@media (max-width: 900px) {

  .svc-eval-icon,
  .svc-step .wp-block-image {
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  .svc-eval-icon img,
  .svc-step .wp-block-image img {
    width: auto !important;
    height: auto !important;
    object-fit: fill !important;
    display: inline-block !important;
  }

  /* Section 1's wrap release drops the number onto its own line. Re-locked. */
  .svc-step {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
}


/* ---- Evaluation: panel first, then the photo, then the quote ------------ */
@media (max-width: 781px) {

  /* The wrapper has no class of its own, so it is matched by its child. */
  .wp-block-group:has(> .svc-eval-grid) {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .wp-block-group:has(> .svc-eval-grid) > .svc-eval-grid {
    order: 1;
    border-radius: 8px;
  }

  .wp-block-group:has(> .svc-eval-grid) > .wp-block-cover {
    order: 2;
    border-radius: 8px !important;
    min-height: clamp(240px, 62vw, 380px) !important;
    height: auto !important;
  }

  /* One item per row, icon inline above the label as authored */
  .svc-eval-grid {
    grid-template-columns: 1fr;
  }
}


/* ---- Process: steps first, photo below ---------------------------------- */
@media (max-width: 781px) {

  .svc-process .wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  .svc-process .wp-block-columns > .wp-block-column:first-child {
    order: 2;
  }

  .svc-process .wp-block-columns > .wp-block-column:last-child {
    order: 1;
  }

  .svc-process .wp-block-cover {
    min-height: clamp(280px, 70vw, 420px) !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  .svc-step {
    padding-top: var(--wp--preset--spacing--20) !important;
    padding-bottom: var(--wp--preset--spacing--20) !important;
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
  }

  .svc-step .svc-step-title,
  .svc-step h4 {
    font-size: 1rem;
    margin: 0;
  }

  .svc-step p {
    font-size: 1rem;
    margin: 0;
  }
}


/* --------------------------------------------------------------------------
   26. SERVICES — SYNCED PATTERN SECTIONS

   The comparison rows (ref 246) and the membership cards (ref 245) are
   synced patterns, so their inner markup is not in the page and carries
   none of the classes used elsewhere in this file. These rules reach them
   from outside instead:

     - the comparison rows via .svc-compare on the section that wraps them
     - the pricing wrapper via :has(> .price-card), since the middle card
       is the only element in that pattern with a stable class

   Nothing here requires editing either pattern, so Home is unaffected.
   -------------------------------------------------------------------------- */

/* ---- Comparison rows ---------------------------------------------------
   Real structure, now that the pattern is detached:

     row            .wp-block-group.alignwide  flex nowrap, 1px bottom border
       left half    .wp-block-group  flex nowrap  (50%)  circle_X + h4
       right half   .wp-block-group  flex nowrap  (40%)  arrow + circle_check + h4

   Stacked, the row becomes a column, and inside the right half the arrow
   is forced to full width so the tick and its label wrap to a new line —
   giving the label / arrow / label rhythm the Figma shows.

   The rows are the only flex groups in here carrying .alignwide, which is
   what separates them from the two halves inside.
   ------------------------------------------------------------------------ */
@media (max-width: 781px) {

  .svc-compare .wp-block-group.alignwide.is-layout-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .svc-compare .wp-block-group.alignwide.is-layout-flex > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Right half wraps so the arrow can sit on its own line */
  .svc-compare .wp-block-group.alignwide.is-layout-flex > .wp-block-group:last-child {
    flex-wrap: wrap !important;
  }

  /* Section 11 centres every image; these marks belong inline at the start
     of their row. */
  .svc-compare .wp-block-image {
    flex: 0 0 auto !important;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .svc-compare .wp-block-image img {
    width: auto !important;
    height: auto !important;
    object-fit: fill !important;
    display: inline-block !important;
  }

  /* The arrow takes a full line, which pushes the tick and label down.
     This must come after the rule above to win. */
  .svc-compare .svg-center {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 2px 0 !important;
  }

  .svc-compare h4 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
}


/* ---- Membership cards: same treatment Sections 5 and 6 give Home -------- */
@media (max-width: 900px) {

  .wp-block-group:has(> .price-card) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .wp-block-group:has(> .price-card) > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  /* selfStretch:"fit" gives width:fit-content on the outer two cards */
  .wp-block-group:has(> .price-card) > .wp-block-group > .wp-block-group,
  .wp-block-group:has(> .price-card) > .wp-block-group > .wp-block-group > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tick rows stay on one line with the mark inline */
  .wp-block-group:has(> .price-card) .wp-block-group.is-nowrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .wp-block-group:has(> .price-card) .wp-block-image {
    flex: 0 0 auto !important;
    text-align: left !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .wp-block-group:has(> .price-card) .wp-block-image img {
    width: auto !important;
    height: auto !important;
    object-fit: fill !important;
    display: inline-block !important;
  }

  .wp-block-group:has(> .price-card) .wp-block-group.is-nowrap > p {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}


/* --------------------------------------------------------------------------
   45. SERVICES — GRADIENT RULES AND MEMBERSHIP CARD CORRECTIONS

   The evaluation items and the pull-quote were flat teal borders. Every one
   of these rules in the Figma starts at full teal at the top and fades out
   downward, the same treatment as the About rules (Section 44) and the
   Patients platform rule.

   The class is doubled (.x.x) to outrank the flat border-left declared for
   these elements in Section 20 without needing that section edited.
   -------------------------------------------------------------------------- */

.svc-eval-item.svc-eval-item,
.svc-quote.svc-quote,
.svc-tick-list .svc-tick {
  position: relative;
  border-left: 0;
}

.svc-eval-item.svc-eval-item::after,
.svc-quote.svc-quote::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--wp--preset--gradient--custom-border);
}

/* The tick rows in the approach panel keep a flat rule — in the Figma only
   the evaluation items and the quote fade. Restored explicitly since the
   rule above cleared their border. */
.svc-tick-list .svc-tick {
  border-left: 2px solid var(--wp--preset--color--accent-1);
}


/* ---- Membership cards ---------------------------------------------------
   The cards now follow the Figma order: tag, price, plan name, "Best for:",
   the list, then the button last. That reordering is done in the markup, not
   here — these rules only cover the new label and keeping the three buttons
   on a common baseline when the lists run to different lengths.
   ------------------------------------------------------------------------ */

.svc-bestfor-label {
  margin: 0 0 4px;
  font-size: 1rem;
  opacity: 0.65;
}

/* Scoped to .svc-pricing, NOT .coastal-pricing: that class is also on Home's
   Price Cards wrapper, whose buttons are still nested inside the upper group
   and must not be touched. */
.svc-pricing .wp-block-buttons {
  margin-top: auto;
  width: 100%;
}

.svc-pricing .wp-block-buttons .wp-block-button,
.svc-pricing .wp-block-buttons .wp-block-button__link {
  width: 100%;
  text-align: center;
}


/* --------------------------------------------------------------------------
   46. SERVICES MEMBERSHIP CARDS — DESKTOP SIZING AND ALIGNMENT

   SCOPED TO .svc-pricing, NOT .coastal-pricing. That distinction matters:
   `.coastal-pricing` is carried by BOTH Home's Price Cards wrapper and the
   Services membership wrapper, and the two have different internal structure
   — on Services the buttons were moved out to be direct children of each
   card, on Home they are still nested in the upper group. Anything written
   against .coastal-pricing changes both pages. Sections 5 and 6 are the
   exception and are meant to be shared; everything here is not.

   What the authored markup does wrong on desktop:

     - cards 1 and 3 carry `max-width: 33%` plus selfStretch:"fit"
       (width: fit-content), so they shrink-wrap instead of filling a third.
       Card 2 uses selfStretch:"fill". Hence columns of roughly
       475 / 340 / 523px rather than equal.
     - all three are justifyContent:"center" on a vertical flex, so each card
       centres its own content. The 3-item card therefore starts lower than
       the 5-item cards and the tag bars do not line up.
     - the buttons block is authored selfStretch:"fixed" with flexSize
       "100%". In a COLUMN flex container flex-basis is the main axis, so
       that resolves to a height of 100% of the card, not a width. That is
       what threw the button out over the list and past the card edge once
       it became a direct child. flex-basis has to go back to auto.
     - the wrapper has zero padding, so the dark card runs to the very edge.

   Scoped to 783px and up so it cannot collide with Sections 5 and 6, which
   own everything below 782px.
   -------------------------------------------------------------------------- */

/* Applies at every width: the authored flexSize is wrong in a column at any
   viewport, and Section 5 restacks the cards but does not touch this. */
.svc-pricing .wp-block-buttons {
  flex: 0 0 auto;
  flex-basis: auto;
}

@media (min-width: 783px) {

  .svc-pricing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  /* Equal thirds, full height, content top-aligned */
  .svc-pricing > .wp-block-group {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    justify-content: flex-start;
  }

  /* selfStretch:"fit" shrink-wraps the inner wrappers too, which is what left
     the tag bar narrower than its card. */
  .svc-pricing > .wp-block-group > .wp-block-group,
  .svc-pricing > .wp-block-group > .wp-block-group > .wp-block-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   SERVICE DETAIL PAGES (Primary Care, Weight Loss, Hormone, Peptide)
   ========================================================================== */



/* --------------------------------------------------------------------------
   27. SERVICE DETAIL PAGE

   Covers the one component that exists nowhere else on the site: the
   "What's included" plan card, plus the two boxes under it. Everything
   else on these pages reuses Sections 17-26.
   -------------------------------------------------------------------------- */

/* Section 15 gives every first-in-content cover 70vh. On the service detail
   pages that is a lot of vertical crop out of a landscape photo, which cuts
   the subject's head off. A shallower hero plus a crop biased upward keeps
   faces in frame. Both need !important to beat Section 15 and the inline
   focalPoint on the img. */
@media (min-width: 901px) {
  .pc-hero {
    min-height: clamp(460px, 58vh, 620px) !important;
    padding-top: 120px !important;
  }
}

.pc-hero .wp-block-cover__image-background {
  object-position: 62% 22% !important;
}

.pc-hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.75rem);
  line-height: 1.05;
}

.pc-pullquote {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: 16px;
  font-size: 1.05rem;
  line-height: 1.4;
}

/* ---- Plan card ---------------------------------------------------------- */
.pc-plan {
  overflow: hidden;
}

.pc-plan-head h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.pc-plan-price {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  white-space: nowrap;
}

.pc-list-label {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Hairline under each line, matching the design */
.pc-list .svc-tick,
.pc-list .svc-was {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(10, 27, 108, 0.1);
  font-size: 1.06rem;
}

.pc-list .svc-tick:last-child,
.pc-list .svc-was:last-child {
  border-bottom: 0;
}

.pc-list .svc-tick::before,
.pc-list .svc-was::before {
  top: 0.75em;
}



.pc-plan-media {
  align-self: stretch;
}

.pc-plan-photo,
.pc-plan-photo img {
  height: 100%;
}

.pc-plan-photo img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ---- The two boxes under the card --------------------------------------- */
.pc-military h4,
.pc-support h4 {
  margin: 0;
}

.pc-military-sub {
  margin: 0;
  font-size: 1rem;
  opacity: 0.7;
}

.pc-support-note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.pc-extras > .wp-block-column {
  display: flex;
}

.pc-extras .pc-military,
.pc-extras .pc-support {
  width: 100%;
}

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

  .pc-plan-head {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .pc-plan-body {
    gap: 24px !important;
  }

  .pc-plan-photo img {
    height: clamp(220px, 55vw, 320px);
  }

  /* Photo below the lists rather than beside them */
  .pc-plan-body {
    display: flex;
    flex-direction: column;
  }

  .pc-plan-media {
    order: 3;
  }

  .pc-military {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}


/* --------------------------------------------------------------------------
   47. SERVICE DETAIL PAGES — CLOSING CTA PHOTO PAIR

   The Primary Care Figma shows TWO overlapping tilted photos in the closing
   CTA; all four detail pages shipped with only one. The second is now in the
   markup on every page, and the column carries .pc-cta-pair so the two can be
   laid out as a pair here without affecting the Services CTA, which uses
   .svc-cta-media with a single photo.

   Section 24 already supplies the tilt and the shared image rules; this only
   handles the side-by-side overlap. Below 901px Section 24 drops the tilt and
   the pair stacks, which is the right mobile behaviour.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {

  .pc-cta-pair {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .pc-cta-pair .svc-tilt-a,
  .pc-cta-pair .svc-tilt-b {
    flex: 0 0 54%;
    margin: 0;
  }

  /* The overlap in the Figma — the right photo sits over the left one */
  .pc-cta-pair .svc-tilt-b {
    margin-left: -10%;
    position: relative;
    z-index: 1;
  }

  .pc-cta-pair .svc-tilt-a img,
  .pc-cta-pair .svc-tilt-b img {
    height: 260px;
  }
}

@media (max-width: 900px) {

  .pc-cta-pair {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}


/* ==========================================================================
   SECTION 74 — SUB-SERVICE PROCESS: NAVY NUMBER BADGES

   Services keeps the teal SVG numerals from the media library (01–05.svg,
   IDs 339–343). On the four sub-service detail pages the badges should
   read as #031835 navy circles with white numerals. Marker class
   `svc-process-navy` is added alongside `svc-process` in the page markup
   so this rule can scope tightly to those four pages without touching
   Services.

   The SVGs still sit in the markup so the block editor renders normally;
   this rule hides the <img>, turns the .wp-block-image figure into a
   40px circle, and lets a CSS counter print the numeral. Because the
   counter is scoped to the step wrapper, adding or removing a step
   renumbers automatically.
   ========================================================================== */

.svc-process-navy .svc-step {
  /* Reset any counter from an ancestor so :nth-of-type doesn't need to
     look outside this wrapper. */
  counter-increment: svc-step-num;
}

/* Establish the counter on the container that holds the .svc-step siblings.
   That container is the un-classed group directly under the process
   column's right side; it's the one wp:group wrapping the step list. */
.svc-process-navy .wp-block-column .wp-block-group:has(> .svc-step) {
  counter-reset: svc-step-num;
}

/* Turn the figure into the navy circle. The 40px sizing matches the
   flexSize:"40px" the block editor already writes on the wp:image. */
.svc-process-navy .svc-step > .wp-block-image {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  margin: 0 !important;
  padding: 0;
  border-radius: 50%;
  background: #031835;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Hide the SVG itself — the badge visual comes from the pseudo-element
   below. */
.svc-process-navy .svc-step > .wp-block-image img {
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  pointer-events: none;
}

/* The numeral. `content: counter(svc-step-num, decimal-leading-zero)`
   prints 01, 02, 03… so the padding matches the original SVGs. */
.svc-process-navy .svc-step > .wp-block-image::before {
  content: counter(svc-step-num, decimal-leading-zero) !important;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--manrope, inherit);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   SECTION 75 — SUB-SERVICE PLAN CARD LAYOUT  (REPLACES prior 75)

   The plan card markup has been restructured. Instead of three columns
   (7-tick list | 2-tick list + NOT INCLUDED + was list | photo), the
   card is now two columns:

     Col 1 (67%): INCLUDES: label + a single .pc-list.pc-list-split
                  containing all 9 ticks, the NOT INCLUDED: label, and
                  3 was items as siblings.
     Col 2 (33%): the photo (.pc-plan-media).

   The 7th tick carries a `pc-split-break` class, which lets the desktop
   rules below force a column break there — preserving the same 7/2
   visual split you had before, with NOT INCLUDED + was flowing into
   the right visual column right beneath the 2 extras. Mobile is a
   single continuous list because that's what the markup naturally is
   now — no flex trickery, no percentage-height stretching, no gap.

   Border between "Care coordination when needed" and "One active
   protocol at a time" is now automatic — they're consecutive items
   in the same .pc-list, so whatever border rule the pc-list already
   applies to `> * + *` fires between them.
   ========================================================================== */


/* --- DESKTOP: split the single list into 2 visual columns, 7 / 6 --- */

.pc-list-split {
  column-count: 2;
  column-gap: var(--wp--preset--spacing--40);
}

/* Force each item to stay together — never split a tick across
   columns. */
.pc-list-split > * {
  break-inside: avoid;
}

/* Force the column break AFTER the 7th tick so the left visual column
   ends with "Care coordination when needed" and the right column
   starts with "One active protocol at a time" — matching the previous
   3-column design. */
.pc-list-split > .pc-split-break {
  break-after: column;
}

/* NOT INCLUDED label inside the split. The label already carries an
   inline margin-top: spacing-40 for breathing room. */
.pc-list-split > .pc-split-label {
  border-top: 0;
}

/* Close the gap between INCLUDES: label and the first tick so the
   label sits close to its list — matching the way NOT INCLUDED:
   sits close to its first was item (they're siblings inside the same
   pc-list-split, whose blockGap:0 removes any gap between them). The
   WordPress per-instance blockGap rule on the column emits a
   margin-block-start between siblings; this zeroes that out for the
   label→list pair. Applies at all breakpoints. */
.pc-plan-body .wp-block-column > .pc-list-split {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}


/* --- MOBILE: single column, continuous flow, no gap --- */

@media (max-width: 781px) {

  /* Fully collapse the multi-column context. column-count:initial
     resolves to `auto`, taking the element out of multi-column layout
     entirely so everything flows as a normal block sequence. */
  .pc-list-split {
    column-count: initial;
    column-gap: initial;
    column-fill: initial;
  }

  /* The forced break-after on the 7th tick has to be reset too —
     otherwise Chrome treats items 8+ as belonging to a nonexistent
     second column and they either overflow off-screen or render as
     if they had no home. That's why NOT INCLUDED and items 8-13
     were disappearing on mobile. */
  .pc-list-split > .pc-split-break {
    break-after: auto;
  }

  /* Two columns of the pc-plan-body (content + photo) stack vertically.
     Force flex layout with content-based heights so neither column
     stretches to a percentage of an indeterminate container height. */
  .pc-plan-body {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--wp--preset--spacing--40) !important;
  }

  .pc-plan-body > .wp-block-column {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ==========================================================================
   PROVIDERS PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   28. PROVIDERS PAGE

   New components: the pill tags, the provider card, the screening cards,
   the four numbered "how your care works" cards, and the two-image CTA.
   Ticks reuse .svc-tick from Section 17.
   -------------------------------------------------------------------------- */

.pv-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
}

.pv-tagline {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-style: italic;
  opacity: 0.9;
}

/* ---- Pills -------------------------------------------------------------- */
.pv-pills {
  gap: 10px !important;
}

/* Size, radius, fill and border all come from the chip rule in PART 1 —
   only the colour and the reset of the paragraph margin belong here. */
.pv-pill {
  margin: 0;
  color: var(--wp--preset--color--accent-1);
}

.pv-pills-dark .pv-pill {
  border-color: rgba(44, 191, 184, 0.45);
  background: rgba(44, 191, 184, 0.12);
}

.pv-pill-plain {
  border-color: rgba(10, 27, 108, 0.15);
  background: transparent;
  color: inherit;
  opacity: 0.8;
}

.pv-timepill {
  display: inline-block;
  margin: 0;
  color: var(--wp--preset--color--accent-1);
  font-weight: 500;
}

/* ---- The problem -------------------------------------------------------- */
/* The rule sits between the two columns. Copy is on the left here, so it
   is a right border; in .pv-rel-copy the image is on the left, so that one
   keeps a left border. */
.pv-problem-copy {
  border-right: 2px solid var(--wp--preset--color--accent-1);
  padding-right: clamp(20px, 2.5vw, 36px);
}

.pv-problem-img img {
  width: 100%;
  height: clamp(260px, 34vw, 460px);
  object-fit: cover;
  display: block;
}

/* ---- Our system panel --------------------------------------------------- */
.pv-system-list .svc-tick {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.13rem;
}

.pv-system-list .svc-tick:last-child {
  border-bottom: 0;
}

.pv-system-list .svc-tick::before {
  top: 0.95em;
}


.pv-note p {
  font-size: 1.06rem;
  line-height: 1.5;
}

/* ---- The bar ------------------------------------------------------------ */
/* Both screening cards fill their column so they end level */
.pv-bar .are-vertically-aligned-stretch > .wp-block-column {
  display: flex;
}

.pv-bar-card {
  width: 100%;
  height: 100%;
}

.pv-card-label {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.7;
}

.pv-check {
  position: relative;
  margin: 0;
  padding: 5px 0 5px 24px;
  font-size: 1.06rem;
}

.pv-check::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--wp--preset--color--accent-1);
  border-bottom: 1.5px solid var(--wp--preset--color--accent-1);
  transform: rotate(-45deg);
}

.pv-passline {
  font-size: 1.13rem;
  opacity: 0.75;
}

.pv-band p {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.45;
}

/* ---- Provider card ------------------------------------------------------ */
.pv-provider {
  overflow: hidden;
}

/* The column is a flex item that stretches; making it a flex container in
   turn lets the figure and image fill it, so the photo matches the panel. */
.pv-provider-media {
  display: flex;
  align-self: stretch;
  min-height: 0;
}

.pv-provider-photo {
  flex: 1 1 auto;
  display: flex;
  margin: 0;
  min-height: 0;
}

.pv-provider-photo img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.pv-provider-role {
  margin: 4px 0 0;
  font-size: 1.06rem;
  font-weight: 500;
}

.pv-provider-bio {
  font-size: 1.06rem;
  line-height: 1.55;
}

.pv-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.pv-provider-link a {
  text-decoration: none;
  font-size: 1.13rem;
}

.pv-provider-link a:hover {
  text-decoration: underline;
}

/* ---- The relationship --------------------------------------------------- */
.pv-rel-img img {
  width: 100%;
  height: clamp(260px, 32vw, 430px);
  object-fit: cover;
  display: block;
}

.pv-rel-copy {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: clamp(20px, 2.5vw, 36px);
}

.pv-relline {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---- How your care works ------------------------------------------------ */
.pv-works-grid {
  grid-auto-rows: min-content;
  align-items: start;
  align-content: start;
}

.pv-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-2);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.pv-work-title {
  margin: 0;
  font-size: 1rem;
}

.pv-work-desc {
  margin: 6px 0 0;
  font-size: 1rem;
  opacity: 0.75;
  line-height: 1.45;
}

/* ---- Closing CTA -------------------------------------------------------- */
.pv-tilt-a img,
.pv-tilt-b img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (min-width: 901px) {
  .pv-tilt-a {
    transform: rotate(-6deg);
  }

  .pv-tilt-b {
    transform: rotate(6deg);
  }

  .pv-tilt-a img,
  .pv-tilt-b img {
    height: 250px;
  }
}

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

  .pv-problem-copy,
  .pv-rel-copy {
    border-left: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .pv-provider-photo img {
    height: clamp(260px, 62vw, 360px);
  }

  .pv-works-grid {
    grid-template-columns: 1fr;
  }

  /* Photos flanking centred copy do not read on a phone — copy first */
  .pv-cta {
    display: flex;
    flex-direction: column;
  }

  .pv-cta > .wp-block-column:nth-child(2) {
    order: 1;
  }

  .pv-cta-media {
    order: 2;
  }

  .pv-tilt-a,
  .pv-tilt-b {
    transform: none;
  }

  .pv-tilt-a img,
  .pv-tilt-b img {
    height: clamp(180px, 42vw, 240px);
  }
}


/* --------------------------------------------------------------------------
   48. PROVIDERS PAGE — CORRECTIONS FROM REVIEW

   Four things, all visible against the Figma:

     1. the two vertical rules (problem section, relationship section) were
        flat borders; the Figma fades them teal-to-transparent downward, the
        same treatment as About and Patients
     2. the provider card's divider was rgba white, which reads as a bright
        line on the navy card. The Figma has it a muted teal, barely lifted
        off the background
     3. the arrow on "Book consultation with Hayley" is teal in the Figma
        while the label stays white. It is a character inside the link text,
        so it needed a span in the markup to be targetable — that is now
        .pv-arrow
     4. more breathing room under "Only a small percentage pass." before the
        dark band. Done in the markup, since the authored inline margin would
        have outranked anything here

   The class is doubled on the rule selectors so these outrank the flat
   borders declared in Section 28 without that section needing edits.
   -------------------------------------------------------------------------- */

/* ---- Gradient rules ----------------------------------------------------- */
.pv-problem-copy.pv-problem-copy,
.pv-rel-copy.pv-rel-copy {
  position: relative;
  border-left: 0;
  border-right: 0;
}

.pv-problem-copy.pv-problem-copy::after,
.pv-rel-copy.pv-rel-copy::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--wp--preset--gradient--custom-border);
}

/* Copy sits left of the rule in the problem section, right of it in the
   relationship section, so the rule swaps sides. */
.pv-problem-copy.pv-problem-copy::after {
  right: 0;
}

.pv-rel-copy.pv-rel-copy::after {
  left: 0;
}

.pv-problem-copy.pv-problem-copy {
  padding-right: clamp(28px, 3.4vw, 48px);
}

.pv-rel-copy.pv-rel-copy {
  padding-left: clamp(28px, 3.4vw, 48px);
}

/* ---- Provider card divider and arrow ------------------------------------ */
/* Was rgba(255,255,255,0.18) — too bright against the navy card. */
.pv-rule.pv-rule {
  border-top: 1px solid rgba(44, 191, 184, 0.22);
}


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

  .pv-problem-copy.pv-problem-copy,
  .pv-rel-copy.pv-rel-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .pv-problem-copy.pv-problem-copy::after,
  .pv-rel-copy.pv-rel-copy::after {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   49. PROVIDERS — MEET THE TEAM CAROUSEL

   Built the same way as the Patients testimonial carousel: a flex track of
   full-width slides moved with a transform, and controls that count the
   slides from the DOM. Adding a provider therefore needs no CSS and no
   script change — duplicate the .pv-slide group in the editor and edit the
   copy inside it.

   The slides are real block markup, not raw HTML, so the provider card stays
   fully editable in the editor. Only the two buttons and the script sit in a
   Custom HTML block.

   Arrow styling follows the Figma: the inactive control is a tan circle with
   a dark arrow, the active one is navy with a white arrow.
   -------------------------------------------------------------------------- */

.pv-viewport {
  overflow: hidden;
}

.pv-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.45s ease;
  will-change: transform;
}

.pv-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .pv-track {
    transition: none;
  }
}

/* ---- Controls ----------------------------------------------------------- */
.pv-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

/* Two-tone, per the Figma: the inactive control is a tan circle with a navy
   arrow, the active one is a navy circle with a tan arrow. The circle is drawn
   here so its colour can follow the state.

   The arrow is the base Arrow_Right.svg applied as a mask, so its shape comes
   from his asset while its colour follows the button. The finished
   icon.svg / icon-1.svg pair was tried instead and reverted — with the circle
   baked into the file the state colours cannot change. */
.pv-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #011838;
  color: #d9d1c4;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pv-nav[disabled] {
  background: #d9d1c4;
  color: #011838;
  cursor: default;
  opacity: 1;
}

.pv-nav:hover:not([disabled]) {
  background: #0a2a52;
  transform: none;
}

.pv-nav::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/Arrow_Right.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/Arrow_Right.svg") center / contain no-repeat;
  transform: none;
}

.pv-nav-prev::before {
  transform: scaleX(-1);
}

.pv-nav:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 3px;
}

@media (max-width: 781px) {
  .pv-carousel-nav {
    justify-content: center;
    margin-top: 22px;
  }
}


/* --------------------------------------------------------------------------
   62. PROVIDERS — HOW YOUR CARE WORKS CARDS

   Figma Plan Card spec: 10px radius, 20px block / 24px inline padding, 32px
   gap between the number and the copy, white fill. The cards were authored at
   8px radius with spacing-30 on all four sides and the same gap, which is why
   the numbers sat tight against the text.
   -------------------------------------------------------------------------- */

.pv-work-card {
  border-radius: 10px !important;
  padding: 20px 24px !important;
  background: #ffffff;
}

.pv-work-card > * + * {
  margin-top: 0;
}

/* 32px between the number badge and the copy below it */
.pv-work-card .pv-num {
  margin-bottom: 32px;
}


/* ==========================================================================
   PATIENTS PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   29. PATIENTS PAGE

   New components: the numbered accordion (core wp:details, no JS), the
   before/after comparison cards, the testimonial CAROUSEL over video, and
   the four-up access row. Crosses and ticks reuse .svc-was / .svc-now from
   Section 19.

   Revised after the base review. Changes from the first version:
     - the platform rule is a fading gradient, not a solid line (Figma)
     - the comparison list rows have real spacing and the two cards stretch
       to a common height, so the white card no longer ends with dead space
     - the testimonials are a slide carousel with prev/next controls, and
       the wide quote now sits INSIDE the grid so its edges line up with
       the cards above it instead of overhanging them
     - the access icon tiles are warm neutral rather than cool blue-grey,
       and the dividers run the full height of the white band
   -------------------------------------------------------------------------- */

.pt-hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  line-height: 1.08;
}

/* ---- Process accordion -------------------------------------------------- */
/* Numbers come from a CSS counter, so the summary text stays plain and
   editable and the numbering renumbers itself if a step is added. */
.pt-steps {
  counter-reset: ptstep;
}

.pt-step {
  counter-increment: ptstep;
  border-bottom: 1px solid rgba(10, 27, 108, 0.1);
}

.pt-step:last-child {
  border-bottom: 0;
}

.pt-step > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px 18px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
}

.pt-step > summary::-webkit-details-marker {
  display: none;
}

.pt-step > summary::before {
  content: counter(ptstep, decimal-leading-zero);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-2);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Chevron, rotated when the step is open */
.pt-step > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--wp--preset--color--accent-2);
  border-bottom: 2px solid var(--wp--preset--color--accent-2);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.pt-step[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.pt-step > p {
  margin: 0 0 18px;
  padding-left: 48px;
  font-size: 1.06rem;
  line-height: 1.55;
  opacity: 0.8;
}

.pt-process-media,
.pt-process-media .pt-fill-img,
.pt-process-media .pt-fill-img img {
  height: 100%;
}

.pt-fill-img img {
  width: 100%;
  object-fit: cover;
  display: block;
}


/* ---- Platform ----------------------------------------------------------- */
/* The Figma rule is a gradient that starts at full teal and fades out down
   the column, so it cannot be a border — a border takes one flat colour.
   Drawn as a pseudo-element instead, which also lets it run the full height
   of the column rather than only as far as the text. */
.pt-platform-copy {
  position: relative;
  border-left: 0;
  padding-left: clamp(20px, 2.5vw, 36px);
}

.pt-platform-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--wp--preset--gradient--custom-border);
}

.pt-phones img {
  width: 100%;
  height: auto;
  display: block;
}


/* ---- Before / after ----------------------------------------------------- */
/* The block is authored verticalAlignment:center, which emits
   .is-vertically-aligned-center and centres the two cards at their own
   natural heights — that is what left the short list floating at the top of
   the taller white card. Three classes here so this outranks it whichever
   order the two stylesheets load in. */
.pt-compare .wp-block-group.pt-compare-row {
  align-items: stretch;
}

.pt-card {
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pt-card-label {
  margin: 0;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 1rem;
}

.pt-card-before .pt-card-label {
  background: rgba(10, 27, 108, 0.05);
  opacity: 0.6;
}

.pt-card-after .pt-card-label {
  background: rgba(44, 191, 184, 0.14);
  color: var(--wp--preset--color--accent-1);
}

/* The list block is authored blockGap:0, so the rows sat on top of each
   other. Flex plus a gap gives the Figma's row rhythm without touching the
   markup, and the list absorbs the leftover height so both cards end level. */
.pt-card-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
}

.pt-card-list > p {
  margin-top: 0;
  margin-bottom: 0;
}

.pt-card-list .svc-was,
.pt-card-list .svc-now,
.pt-card-list .svc-tick {
  font-size: 1.13rem;
}

/* The cards stretch; the arrow between them should not */
.pt-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}

.pt-arrow::before {
  content: "\2192";
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
}


/* ---- Testimonial carousel ----------------------------------------------- */
/* One slide holds the Figma's 2 + 2 + 1 arrangement. The track is a flex row
   of full-width slides moved with a transform, so adding a slide in the
   editor needs no CSS or script change — the controls read the DOM.

   The wide quote is a grid item spanning both columns rather than a sibling
   below the grid, which is what previously let it overhang the cards. */
.pt-carousel {
  position: relative;
}

.pt-viewport {
  overflow: hidden;
}

.pt-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.45s ease;
  will-change: transform;
}

.pt-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Anyone who has asked the OS for less motion gets an instant change */
@media (prefers-reduced-motion: reduce) {
  .pt-track {
    transition: none;
  }
}

.pt-quote {
  margin: 0;
  padding: 22px 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1.13rem;
  line-height: 1.5;
}

.pt-quote-wide {
  grid-column: 1 / -1;
  text-align: center;
}

/* ---- Carousel controls -------------------------------------------------- */
.pt-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.pt-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--accent-1);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}

.pt-nav:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.88);
}

.pt-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Matches the Figma's greyed control on the first slide */
.pt-nav[disabled] {
  background: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.75);
  cursor: default;
}

.pt-nav-prev::before {
  content: "\2190";
}

.pt-nav-next::before {
  content: "\2192";
}


/* ---- Access row --------------------------------------------------------- */
/* This row is a raw HTML block, so the grid has to be declared here rather
   than coming from a block layout.

   The padding lives on the items, not the grid, so the dividers can run the
   full height of the white band the way they do in the Figma. */
.pt-access-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  padding: 0;
}

.pt-access-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(30px, 3.2vw, 46px) clamp(12px, 2vw, 28px);
  text-align: center;
}

.pt-access-item + .pt-access-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ece7e0;
}

/* The icons are inline SVGs with no intrinsic size — without an explicit
   width they expand to fill the cell. Tile plus fixed glyph size.

   The tile was a cool blue tint (rgba of the navy), which read as grey-blue
   against the warm card. The Figma tile is a warm neutral. */
.pt-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 8px;
  background: #F7F3EE;
  color: #2f2c28;
}

.pt-access-icon svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  flex: 0 0 auto;
  display: block;
}

.pt-access-item p {
  margin: 0;
  font-size: 1.13rem;
  line-height: 1.45;
}

/* The design flips this one so she faces into the page */
.pt-access-img img {
  width: 100%;
  height: clamp(220px, 26vw, 340px);
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}


/* ---- Who we are --------------------------------------------------------- */
.pt-who-pill {
  position: relative;
  margin: 0;
  /* extra left room for the tick; everything else comes from the chip rule */
  padding-left: 42px;
}

.pt-who-pill::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 8px;
  height: 4px;
  margin-top: -4px;
  border-left: 1.5px solid var(--wp--preset--color--accent-1);
  border-bottom: 1.5px solid var(--wp--preset--color--accent-1);
  transform: rotate(-45deg);
}


/* ---- Closing CTA -------------------------------------------------------- */
.pt-tilt-a img,
.pt-tilt-b img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (min-width: 901px) {
  /* Left photo is both tilted and flipped, per the design */
  .pt-tilt-a {
    transform: rotate(-6deg) scaleX(-1);
  }

  .pt-tilt-b {
    transform: rotate(6deg);
  }

  .pt-tilt-a img,
  .pt-tilt-b img {
    height: 240px;
  }
}


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

  .pt-platform-copy {
    padding-left: 0;
  }

  .pt-platform-copy::before {
    display: none;
  }

  .pt-process-media .pt-fill-img img {
    height: clamp(240px, 58vw, 340px);
  }

  /* Before / after stack with the arrow turned down between them */
  .pt-compare .wp-block-group.pt-compare-row {
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  .pt-card {
    flex: 1 1 100%;
  }

  .pt-card-list {
    gap: 14px;
  }

  .pt-arrow {
    transform: rotate(90deg);
    margin: 4px auto;
  }

  /* One quote per row inside each slide */
  .pt-slide,
  .pt-access-grid {
    grid-template-columns: 1fr;
  }

  .pt-slide {
    gap: 14px;
  }

  .pt-quote {
    padding: 18px 20px;
  }

  .pt-carousel-nav {
    margin-top: 26px;
  }

  .pt-access-item + .pt-access-item::before {
    left: 10%;
    right: 10%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .pt-access-item {
    padding-block: 24px;
  }

  /* Copy first, photos below */
  .pt-cta-row {
    display: flex;
    flex-direction: column;
  }

  .pt-cta-row > .wp-block-column:nth-child(2) {
    order: 1;
  }

  .pt-cta-media {
    order: 2;
  }

  .pt-tilt-a {
    transform: scaleX(-1);
  }

  .pt-tilt-b {
    transform: none;
  }

  .pt-tilt-a img,
  .pt-tilt-b img {
    height: clamp(180px, 42vw, 240px);
  }
}


/* --------------------------------------------------------------------------
   61. PATIENTS — ACCORDION, ACCESS IMAGE

   Review notes: the accordion rows read cramped and clicking one draws a box
   over the content; the access photo squares off at the bottom of a rounded
   card and crops the top of her head.
   -------------------------------------------------------------------------- */

/* ---- Accordion ---------------------------------------------------------- */
.pt-step > summary {
  padding: 20px 34px 20px 0;
}

.pt-step > p {
  margin: 0 0 26px;
}

/* The box on click is the browser focus ring. Removed for mouse users only —
   :focus-visible still shows one for keyboard users, and a keyboard user has
   no other way to tell which row is selected. */
.pt-step > summary:focus {
  outline: none;
}

.pt-step > summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Access photo ------------------------------------------------------- */
/* The card is rounded but the photo is a separate block sitting flush at the
   bottom, so its own corners have to be rounded and clipped. */
.pt-access-card {
  overflow: hidden;
}

.pt-access-img,
.pt-access-img img {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Taller crop biased upward so the top of her head stays in frame */
.pt-access-img img {
  height: clamp(280px, 32vw, 420px);
  object-position: center 22%;
}


/* ==========================================================================
   SECTION 76 — PATIENTS PAGE FIXES

   Four fixes for the Patients page, all built on top of the existing
   pt-* rules from PART 1 of the stylesheet. Each block is independent
   — safe to apply piecemeal if any one causes trouble in the wild.
   ========================================================================== */


/* --- 76.1 Process accordion number badges --------------------------------
   Figma spec (from the inspection screenshot): Newsreader SemiBold 20px,
   white on the navy circle. The existing rule at Section 46 renders the
   badge at 34px with 0.75rem sans-serif text — too small and the wrong
   family. This override enlarges the circle to fit a 20px numeral and
   swaps in the Newsreader family so "01" reads as a display numeral
   rather than a caption.
   -------------------------------------------------------------------------- */
.pt-process .pt-step > summary::before {
  width: 48px;
  height: 48px;
  font-family: var(--wp--preset--font-family--newsreader), Newsreader, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* Slightly widen the gap between badge and label so the bigger circle
   doesn't sit right against the text. */
.pt-process .pt-step > summary {
  gap: 18px;
}


/* --- 76.2 OUR FOCUS icon backgrounds -------------------------------------
   The section itself now carries accent-6 (#EDE6DC) via the markup
   change. The icon squares were hardcoded to #F7F3EE — a distinctly
   different warm-cream tone — which read as a small colour mismatch
   inside the tan section. Match them to the section tone so the icon
   plates read as tone-on-tone with just enough shadow / contrast from
   the SVG itself.
   -------------------------------------------------------------------------- */
.pt-access-icon {
  background: #EDE6DC;
}


/* --- 76.3 Mobile-only "Book consultation" in YOUR PLATFORM --------------
   The desktop layout of pt-platform is phones-left / copy-right, and
   the design has no CTA in this section on desktop — the copy is the
   whole point. On mobile the phones stack above the copy and a
   "Book consultation" pill sits under the copy so a scroll-through
   reader has an action-out from that section without leaving to find
   the closing CTA.

   The button block is now in the markup with class .pt-platform-cta;
   the two rules below hide it on desktop and reveal it centred on
   mobile. Kept `display: flex` so wp-block-buttons' own flex alignment
   from Section 73 still applies.
   -------------------------------------------------------------------------- */
.pt-platform-cta {
  display: none;
}

@media (max-width: 781px) {
  .pt-platform-cta {
    display: flex;
    justify-content: center;
  }
}


/* --- 76.4 Gradient bar length (pt-platform-copy) -------------------------
   The column is authored verticalAlignment: center, which means the
   flex row stretches its .wp-block-column boxes to match the taller
   side (the phones image) even though the text is much shorter. The
   ::before uses top:0/bottom:0, so the bar spans the full box — well
   past both ends of the text.

   Constrain the bar to the height of the actual copy by centring it
   vertically and setting a specific height that matches the text
   column. Using height: auto with top/bottom removed lets the ::before
   collapse to its content height, and a small min-height keeps it
   visible even when text wraps to fewer lines.
   -------------------------------------------------------------------------- */
.pt-platform-copy::before {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: calc(100% - 40px);
  max-height: 260px;
  min-height: 120px;
}


/* ==========================================================================
   RESOURCES LANDING PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   30. RESOURCES LANDING PAGE
   -------------------------------------------------------------------------- */

.rs-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.08;
}

.rs-hero-copy {
  font-size: 1.13rem;
  line-height: 1.6;
}

.rs-hero-img img {
  width: 100%;
  height: clamp(240px, 32vw, 440px);
  object-fit: cover;
  display: block;
}

/* ---- Scroll cue --------------------------------------------------------- */
.rs-arrow {
  font-size: 1.5rem;
  line-height: 1;
  animation: rs-float 1.8s ease-in-out infinite;
}

@keyframes rs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Anyone who has asked the OS for less motion gets a static arrow */
@media (prefers-reduced-motion: reduce) {
  .rs-arrow {
    animation: none;
  }
}

/* ---- Category cards ----------------------------------------------------- */
.rs-cat-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}

.rs-cat {
  height: 100%;
}

.rs-cat-grid > .rs-cat {
  display: flex;
  flex-direction: column;
}

/* Same treatment on the landing cards — the description takes up the slack
   so the links and images align across the grid */
.rs-cat-grid .rs-cat-desc {
  flex: 1 1 auto;
}

.rs-cat-grid .rs-cat-media {
  margin-top: auto;
}

.rs-cat-title {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.rs-cat-desc {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  opacity: 0.8;
}

.rs-cat-link {
  margin: 0;
}

.rs-cat-link a {
  color: var(--wp--preset--color--accent-1);
  font-size: 1.06rem;
  text-decoration: none;
}

.rs-cat-link a:hover {
  text-decoration: underline;
}

.rs-cat-media {
  margin-top: 6px;
}

.rs-tags {
  gap: 10px;
}

.rs-tag {
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.35;
}

.rs-tag-more {
  background: rgba(255, 255, 255, 0.32);
}

.rs-quote {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: 16px;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* ---- Not generic healthcare --------------------------------------------- */
.rs-generic-img img {
  width: 100%;
  height: clamp(240px, 28vw, 380px);
  object-fit: cover;
  display: block;
}

.rs-pullquote {
  border-left: 2px solid var(--wp--preset--color--accent-1);
  padding-left: 16px;
  font-weight: 500;
}

/* ---- Closing CTA -------------------------------------------------------- */
.rs-tilt-a img,
.rs-tilt-b img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (min-width: 901px) {
  .rs-tilt-a {
    transform: rotate(-5deg);
  }

  .rs-tilt-b {
    transform: rotate(5deg);
  }

  .rs-tilt-a img,
  .rs-tilt-b img {
    height: 230px;
  }
}

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

  .rs-cat-grid {
    grid-template-columns: 1fr;
  }

  .rs-pullquote {
    padding-left: 14px;
  }

  .rs-cta {
    display: flex;
    flex-direction: column;
  }

  .rs-cta > .wp-block-column:nth-child(2) {
    order: 1;
  }

  .rs-cta-media {
    order: 2;
  }

  .rs-tilt-a,
  .rs-tilt-b {
    transform: none;
  }

  .rs-tilt-a img,
  .rs-tilt-b img {
    height: clamp(180px, 42vw, 240px);
  }
}


/* --------------------------------------------------------------------------
   50. RESOURCES LANDING — GRADIENT RULES

   The two quote rules were flat teal borders. Every vertical rule on the site
   fades teal-to-transparent downward; these were the last two that did not.
   Same doubled-class trick used in Sections 44, 45 and 48 so this outranks
   the border declared in Section 30 without editing it.
   -------------------------------------------------------------------------- */

.rs-quote.rs-quote,
.rs-pullquote.rs-pullquote {
  position: relative;
  border-left: 0;
}

.rs-quote.rs-quote::before,
.rs-pullquote.rs-pullquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--wp--preset--gradient--custom-border);
}


/* ==========================================================================
   SECTION 77 — RESOURCES PAGE PADDING

   Two padding tweaks. The hero padding change is authored directly on
   the rs-hero section in the markup (100px → 140px top/bottom); no CSS
   needed for that.

   The card change is CSS because there are four .rs-cat blocks with
   identical structure, and updating them via a scoped rule keeps them
   in sync without editing four separate block markups.
   ========================================================================== */


/* --- Category card internal spacing --------------------------------------
   Each .rs-cat has a heading → description → "Explore community" link →
   cover image with tags. The original blockGap of spacing-20 (~16px)
   made these read as one dense stack. Bumping both the outer padding
   and the between-child gap gives every element room to breathe.

   .rs-cat > * + * uses the same selector shape WordPress uses for
   blockGap, but with higher specificity via the class, so it wins
   whichever order the two stylesheets load in. Applies at all
   breakpoints — if mobile ends up too padded I'll scope it to a
   min-width media query.
   -------------------------------------------------------------------------- */

.rs-cat {
  padding: var(--wp--preset--spacing--50) !important;
}

.rs-cat > * + * {
  margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* The cover image already has its own inner padding (spacing-20) around
   the tags. Adding the sibling gap above it plus the increased card
   padding gives it a clean edge inside the card. */


/* ==========================================================================
   RESOURCES CATEGORY PAGES
   ========================================================================== */



/* --------------------------------------------------------------------------
   31. RESOURCES CATEGORY PAGE
   -------------------------------------------------------------------------- */

.rs-crumbs {
  font-size: 1rem;
  opacity: 0.8;
}

.rs-crumbs a {
  color: inherit;
  text-decoration: none;
}

.rs-crumbs a:hover {
  text-decoration: underline;
}

.rs-crumb-sep {
  margin: 0 6px;
  opacity: 0.5;
}

.rs-crumb-current {
  color: var(--wp--preset--color--accent-1);
}

.rs-cat-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.06;
}

.rs-cat-hero-img img {
  width: 100%;
  height: clamp(240px, 26vw, 360px);
  object-fit: cover;
  display: block;
}

/* ---- Organisation rows -------------------------------------------------- */
.rs-org {
  align-items: center;
}

/* The logo tile lives in SECTION 51, which redeclares it later in this file
   and therefore wins. Everything about .rs-org-logo is there — don't add a
   second copy here. */

.rs-org-id {
  flex: 1 1 34%;
  min-width: 0;
}

.rs-org-name {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.25;
}

.rs-org-tag {
  display: inline-block;
  margin: 0;
  color: var(--wp--preset--color--accent-1);
}

.rs-org-body {
  flex: 1 1 46%;
  min-width: 0;
}

.rs-org-desc {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.5;
  opacity: 0.8;
}


/* ---- Why this matters --------------------------------------------------- */
.rs-why p {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
}

/* ---- Continue exploring ------------------------------------------------- */
/* Cards stretch to a common height and the image is pinned to the bottom,
   so the photos line up even when the descriptions run to different
   numbers of lines. */
.rs-more-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}

.rs-more-grid > .rs-cat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* The description absorbs the height difference, so the link and the image
   below it both sit at the same point across all three cards. */
.rs-more-grid .rs-cat-desc {
  flex: 1 1 auto;
}

.rs-more-grid .rs-more-img {
  margin-top: auto;
}

.rs-more-img img,
.rs-cat-media img {
  width: 100%;
  height: clamp(200px, 18vw, 256px);
  object-fit: cover;
  display: block;
}

/* The Figma leaves clear air between "Explore community" and the photo.
   margin-top:auto already pins the media to the card floor; the padding
   guarantees a gap even when a card has no slack left to distribute. */
.rs-more-grid .rs-more-img,
.rs-cat-grid .rs-cat-media {
  padding-top: 24px;
}

/* ---- Closing CTA -------------------------------------------------------- */
.rs-catcta-img img {
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  object-fit: cover;
  display: block;
}

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

  .rs-crumbs {
    font-size: 0.78rem;
  }

  /* The row becomes a stacked card: logo, then name, then body */
  .rs-org {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .rs-org-id,
  .rs-org-body {
    flex: 1 1 100%;
  }

  .rs-more-grid {
    grid-template-columns: 1fr;
  }

  .rs-more-img img {
    height: clamp(180px, 45vw, 240px);
  }
}


/* --------------------------------------------------------------------------
   32. CRISIS SUPPORT BAND

   Used on the Mental Health & Recovery resources page. Deliberately calm
   rather than alarming — visible without shouting, and placed above the
   directory so it is the first thing reached after the hero.
   -------------------------------------------------------------------------- */
.rs-crisis-text {
  font-size: 1.13rem;
  line-height: 1.55;
}

.rs-crisis-text strong {
  color: var(--wp--preset--color--accent-1);
}

@media (max-width: 781px) {
  .rs-crisis {
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
  }

  .rs-crisis-text {
    font-size: 1.06rem;
  }
}


/* --------------------------------------------------------------------------
   51. RESOURCES CATEGORY — LOGO TILE, VISIT BUTTON, FILTER TABS

   Three corrections against the Figma:

     1. the logo slots were wp:image blocks holding a src-less <img>, so they
        rendered as nothing. They now hold real wp:image blocks inside a
        group carrying .rs-org-logo. This section is the ONLY place the tile
        is styled — Section 30 used to declare it too, and being earlier in
        the file it lost silently.
     2. the Visit website buttons inherited the theme's filled teal. The Figma
        has them white with a navy outline and navy label.
     3. the filter row was never built. It now populates itself from the tags
        present in the directory, so the same block works on all four category
        pages without editing.
   -------------------------------------------------------------------------- */

/* ---- Logo tile ---------------------------------------------------------- */
.rs-org-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 144px;
  height: 144px;
  margin: 0;
  padding: 8px;
  border-radius: 6px;
  background: #d9d1c4;
  overflow: hidden;
}

/* The logo sits inside a wp:image <figure>, so the figure has to carry the
   height as well — a percentage height on the img resolves against the
   figure, and an auto-height parent collapses it, which pinned every logo
   to the top-left of its tile. */
.rs-org-logo .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* grayscale(1) flattens the colour marks to match the ones already
   monochrome. It cannot rescue a white-on-transparent logo — the VFW and
   Legion marks are light-on-transparent and stay faint on this tan tile.
   Dark versions of those two are the real fix. */
.rs-org-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
}

/* ---- Name and tag ------------------------------------------------------- */
/* The Figma sets the org name in the body sans, not the heading serif.
   font-family: inherit rather than a named preset, so this can't break if a
   font slug changes. */
.rs-org-name {
  font-family: inherit;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
}

/* the base chip spec (.--cloud--list-style, PART 1) still supplies the fill,
   colour, radius and gradient edge — this only scales it down to the size
   the Figma draws in this row. Sizing only: don't restate his values. */
.rs-org-id .rs-org-tag {
  margin-top: 14px;
  margin-block-start: 14px;
  padding: 5px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ---- Visit website button ----------------------------------------------- */
/* Outline variant, sized down from the theme default to match the Figma. */
.rs-org-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--wp--preset--color--accent-2);
  background: #ffffff;
  font-size: 0.95rem;
  color: var(--wp--preset--color--accent-2);
}

/* Arrow now supplied by Section 73's .cs-btn system. Section 51's own
   ::before rule was drawing a second arrow on top of it. */

.rs-org-cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-2);
  color: #ffffff;
}

/* ---- Mobile ------------------------------------------------------------- */
/* Lives here, after the base rule. The copy of this that used to sit in
   Section 30 never applied, because this section is later in the file. */
@media (max-width: 781px) {
  .rs-org-logo {
    width: 112px;
    height: 112px;
    padding: 6px;
  }
}

/* ---- Filter tabs -------------------------------------------------------- */
.rs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Empty until the script fills it, so it takes no space if scripts are off */
.rs-filter:empty {
  display: none;
}

.rs-filter-tab {
  padding: 9px 20px;
  border: 1px solid rgba(10, 27, 44, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: var(--wp--preset--color--accent-2);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rs-filter-tab:hover {
  border-color: var(--wp--preset--color--accent-2);
}

.rs-filter-tab:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 2px;
}

.rs-filter-tab.is-active {
  background: var(--wp--preset--color--accent-2);
  border-color: var(--wp--preset--color--accent-2);
  color: #ffffff;
}

@media (max-width: 781px) {

  .rs-filter-tab {
    padding: 8px 16px;
    font-size: 0.95rem;
  }
}


/* --------------------------------------------------------------------------
   52. RESOURCES CATEGORY — HERO TOP PADDING

   The header sits over the page on every template, but these category heroes
   are groups rather than covers, so Section 15's header allowance never
   reaches them and the breadcrumb ended up tucked under the nav.

   140px matches the top padding Section 15 gives the cover heroes, so the
   category pages start at the same place as the rest of the site.

   !important is deliberate here: the value is authored as an inline
   padding-top on the section, which no ordinary rule can outrank. Keeping it
   in CSS means the other three category pages are corrected as they are built
   out, without each one needing the markup edited.

   Desktop only — below 783px Section 4 owns the alignfull padding and the
   header is not tall enough to collide.
   -------------------------------------------------------------------------- */

@media (min-width: 783px) {

  .rs-cat-hero.rs-cat-hero {
    padding-top: 140px !important;
  }
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */



/* --------------------------------------------------------------------------
   33. CONTACT PAGE

   The form is a raw HTML block, so every rule here is doing the work —
   WordPress styles none of it. See the note in the delivery about wiring
   it up to actually send.
   -------------------------------------------------------------------------- */

.ct-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
}

/* ---- The two-panel card ------------------------------------------------- */
.ct-card {
  overflow: hidden;
}

.ct-patient-copy {
  font-size: 1.13rem;
  line-height: 1.6;
  opacity: 0.9;
}

.ct-portal-btn .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* Phone and email sit at the bottom of the dark panel */
.ct-details {
  margin-top: auto;
}

.ct-detail {
  position: relative;
  margin: 0;
  padding-left: 32px;
  font-size: 1.13rem;
}

.ct-detail a {
  color: inherit;
  text-decoration: none;
}

.ct-detail a:hover {
  text-decoration: underline;
}

/* the base real icons, applied as CSS masks so the colour comes from CSS and
   one asset serves every state — same approach as .svc-tick / .svc-was.
   Replaces the \260E and \2709 text characters that stood in for these. */
.ct-detail-phone::before,
.ct-detail-email::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--wp--preset--color--accent-1);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.ct-detail-phone::before {
  -webkit-mask-image: url("/wp-content/uploads/2026/09/call-calling.svg");
          mask-image: url("/wp-content/uploads/2026/09/call-calling.svg");
}

.ct-detail-email::before {
  -webkit-mask-image: url("/wp-content/uploads/2026/09/sms.svg");
          mask-image: url("/wp-content/uploads/2026/09/sms.svg");
}

.ct-form-sub {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: 1.06rem;
  opacity: 0.7;
}

/* ---- Form --------------------------------------------------------------- */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ct-label {
  font-size: 1rem;
  font-weight: 500;
}

.ct-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(10, 27, 108, 0.16);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 1.13rem;
  line-height: 1.4;
}

.ct-input::placeholder {
  color: rgba(10, 27, 108, 0.4);
}

.ct-input:focus {
  outline: 2px solid var(--wp--preset--color--accent-1);
  outline-offset: 1px;
  border-color: transparent;
}

.ct-textarea {
  min-height: 110px;
  resize: vertical;
}

.ct-consent {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.7;
}

.ct-consent a {
  color: inherit;
}

.ct-submit {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-1);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.ct-submit:hover {
  filter: brightness(0.94);
}

.ct-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--contrast);
  outline-offset: 2px;
}

/* ---- The PHI warning ---------------------------------------------------- */
.ct-warning {
  position: relative;
  margin: 6px 0 0;
  padding: 14px 18px 14px 42px;
  border: 1px solid rgba(192, 72, 63, 0.4);
  border-radius: 6px;
  color: #b0413a;
  font-size: 1rem;
  line-height: 1.5;
}

.ct-warning::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

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

  .ct-details {
    margin-top: var(--wp--preset--spacing--40);
  }

  .ct-input,
  .ct-submit {
    font-size: 1rem;
  }
}


/* --------------------------------------------------------------------------
   53. CONTACT — PATIENT PANEL LAYOUT

   Two rules in Section 33 were written for a layout the markup does not
   actually produce, so neither of them did anything:

     .ct-details { margin-top: auto }
       margin-top:auto only pushes an element down inside a FLEX container.
       .ct-patient is a wp:column with the default (flow) layout, so the
       phone and email sat directly under the button with the panel's empty
       space below them instead of at the bottom as in the Figma.

     .ct-portal-btn .wp-block-button__link { width: 100% }
       the link did stretch, but its parent did not. The buttons wrapper is
       authored layout:flex, which makes .wp-block-button a shrink-to-fit
       flex item — so 100% of a shrink-wrapped parent is still shrink-wrapped.
       Both the wrapper and the button need width before the link's 100%
       means anything.
   -------------------------------------------------------------------------- */

/* Makes the existing margin-top:auto on .ct-details work */
.ct-patient {
  display: flex;
  flex-direction: column;
}

/* Full-width portal button, per the Figma */
.ct-patient .wp-block-buttons {
  width: 100%;
}

.wp-block-button.ct-portal-btn {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 781px) {
  /* Stacked, the panel is content-height, so pinning to the bottom has
     nothing to push against — Section 33 already gives it a fixed gap. */
  .ct-patient {
    display: block;
  }
}


/* --------------------------------------------------------------------------
   54. CONTACT — READABLE BUTTON HOVER ON THE DARK PANELS

   The theme's default button hover swaps the fill for a transparent
   background with an outline. That reads fine on a light section, but both
   of the Contact page's buttons sit on navy — so on hover the label became
   navy-on-navy and disappeared.

   Explicit hover states rather than relying on the theme's: the fill stays,
   it just darkens.

   NOTE: the same theme hover applies to every teal button on a dark panel —
   the Services membership card, the Providers card, the audience panels.
   Those are worth checking before launch; they are not fixed here because a
   site-wide button-hover override would also reach the outline-style buttons
   on the pricing cards and the Resources directory, which have their own
   intended hovers.
   -------------------------------------------------------------------------- */

.ct-portal-btn .wp-block-button__link:hover,
.ct-portal-btn .wp-block-button__link:focus-visible,
.ct-cta .wp-block-button__link:hover,
.ct-cta .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-1);
  color: #ffffff;
  filter: brightness(0.92);
}


/* ==========================================================================
   START PAGE (booking)
   ========================================================================== */



/* --------------------------------------------------------------------------
   35. START PAGE (booking)

   The four .sp-embed blocks are placeholders for real scheduler widgets,
   one per provider per state. The placeholder styling is deliberately
   obvious so it cannot ship unnoticed.
   -------------------------------------------------------------------------- */

.sp-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
}

.sp-hero-copy {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.55;
}

/* A fixed pixel height made the crop far flatter than the design and cut
   the top of her head off. An aspect ratio holds the Figma's proportion at
   any width, and the object-position bias keeps her face in frame. */
.sp-hero-img img {
  width: 100%;
  aspect-ratio: 2.35 / 1;
  height: auto;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

/* ---- Decision filter cards ---------------------------------------------- */
.sp-path-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}

.sp-path {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

/* Circular avatar mark, drawn rather than shipped as an icon */
.sp-path-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.65;
  position: relative;
}

.sp-path-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
}

.sp-path-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 21px;
  height: 10px;
  margin-left: -10.5px;
  border: 1.4px solid currentColor;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
}

.sp-path-title {
  margin: 0;
  font-size: 1.15rem;
}

/* The description absorbs the height difference so the buttons line up */
.sp-path-desc {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  opacity: 0.85;
}

.sp-path-cta {
  margin-top: auto;
}

.sp-path-cta .wp-block-button,
.sp-path-cta .wp-block-button__link {
  width: 100%;
  text-align: center;
  border-radius: 999px;
}

/* ---- What happens next -------------------------------------------------- */
.sp-next h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.1;
}

.sp-step {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1.13rem;
}

.sp-step-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- Choose your provider ----------------------------------------------- */
/* display:inline-block ignores auto margins for centring — an element's own
   text-align styles its contents, not its position. width:fit-content on a
   block does centre. Same fix as .svc-quote. */
.sp-info {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* State heading with the rule running off to the right */
.sp-state {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

.sp-state::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent-1), rgba(44, 191, 184, 0));
}

.sp-prov-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}

.sp-prov {
  height: 100%;
}

.sp-prov-head {
  align-items: center;
}

.sp-prov-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.sp-prov-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-prov-name {
  margin: 0;
  font-size: 1.05rem;
}

.sp-prov-role {
  margin: 0;
  font-size: 1rem;
  opacity: 0.75;
}

/* ---- Scheduler embed slot ----------------------------------------------- */
.sp-embed {
  min-height: 320px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.sp-embed iframe {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
}

/* Deliberately loud — this must not reach production unnoticed */
.sp-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 0;
  padding: 24px;
  border: 2px dashed #c0483f;
  border-radius: 8px;
  color: #b0413a;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.sp-note {
  font-size: 1.06rem;
  opacity: 0.75;
}

.sp-badge {
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: 1rem;
}

.sp-badge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}

.sp-badge::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.45em;
  width: 6px;
  height: 3px;
  border-left: 1.4px solid #fff;
  border-bottom: 1.4px solid #fff;
  transform: rotate(-45deg);
}

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

  .sp-hero-btns .wp-block-button,
  .sp-hero-btns .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  .sp-hero-img img {
    aspect-ratio: 4 / 3;
  }

  .sp-path-grid,
  .sp-prov-grid {
    grid-template-columns: 1fr;
  }

  .sp-next {
    min-height: 0 !important;
  }

  .sp-state::after {
    display: none;
  }

  .sp-embed,
  .sp-embed iframe,
  .sp-embed-placeholder {
    min-height: 380px;
  }

  .sp-badges {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}


/* --------------------------------------------------------------------------
   55. START PAGE — LAYOUT CORRECTIONS FROM REVIEW

   Section padding is handled in the markup (hero, "From first visit" and
   "Choose your provider" all moved to 140px top). What is left here is
   shape.
   -------------------------------------------------------------------------- */

/* ---- From first visit to ongoing care ----------------------------------- */
/* The copy sat on the section's 80px padding while every other section insets
   to the 1340px content edge. Pulling it in aligns this band with the rest of
   the page, and the step rows get real width rather than hugging the text. */
@media (min-width: 901px) {

  .sp-next > .wp-block-cover__inner-container {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .sp-next-inner {
    max-width: 620px;
  }

  .sp-step {
    width: 100%;
    padding: 18px 26px;
  }
}

/* ---- Trust badges under the providers ----------------------------------- */
/* Larger type, real spacing, and a hairline above the row so it reads as its
   own band rather than crowding the note above it. */
.sp-badges {
  gap: 0 !important;
  margin-top: var(--wp--preset--spacing--50) !important;
}

.sp-badge {
  font-size: 1rem;
  font-weight: 400;
  padding: 10px 0 10px 30px;
}

.sp-badge::before {
  width: 19px;
  height: 19px;
  top: calc(0.15em + 6px);
}

.sp-badge::after {
  left: 6px;
  top: calc(0.15em + 13px);
  width: 7px;
  height: 3.5px;
}

/* The Figma separates the three with short vertical rules rather than a
   line above the row. The divider has to live on the badge itself — both of
   its pseudo-elements are already used by the tick — so it is a left border
   with the tick shifted right to clear it. */
/* Gradient divider. A border cannot hold a gradient and both of this
   element's pseudo-elements are already used by the tick, so the gradient
   comes from border-image instead — the other three borders are zero-width,
   so only the left edge paints. Teal at the top fading out downward, matching
   every other rule on the site. */
.sp-badge + .sp-badge {
  border-left: 1px solid transparent;
  border-image: linear-gradient(
    180deg,
    var(--wp--preset--color--accent-1) 0%,
    rgba(44, 191, 184, 0.45) 60%,
    rgba(44, 191, 184, 0) 100%
  ) 1;
  margin-left: clamp(22px, 3vw, 44px);
  padding-left: calc(30px + clamp(22px, 3vw, 44px));
}

.sp-badge + .sp-badge::before {
  left: clamp(22px, 3vw, 44px);
}

.sp-badge + .sp-badge::after {
  left: calc(clamp(22px, 3vw, 44px) + 6px);
}


/* --------------------------------------------------------------------------
   57. START PAGE — SECOND REVIEW PASS

   Four corrections:

     1. the three path buttons rendered at different sizes. All three carry
        identical classes, so the difference came from the theme rather than
        the markup — pinned explicitly instead of inherited.
     2. the Florida state rule disappeared while Georgia's stayed. .sp-state
        is a flex heading whose ::after is the rule; with `flex: 1 1 auto` and
        no basis it can collapse to zero when the heading and its container
        resolve at the same width. Given a real basis and a minimum, both
        headings draw the same rule.
     3. the provider avatars were src-less images and are now empty groups,
        so the circle renders as a placeholder until portraits arrive.
     4. more padding inside the provider cards, around the scheduler slot.
   -------------------------------------------------------------------------- */

/* ---- Path buttons: identical across all three cards --------------------- */
.sp-path-cta .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* ---- State rule: same on Florida and Georgia ---------------------------- */
.sp-state {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.sp-state::after {
  content: "";
  flex: 1 1 120px;
  min-width: 60px;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--accent-1) 0%,
    rgba(44, 191, 184, 0.45) 55%,
    rgba(44, 191, 184, 0) 100%
  );
}

/* ---- Provider avatar placeholder ---------------------------------------- */
.sp-prov-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.sp-prov-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Provider card breathing room --------------------------------------- */
.sp-prov {
  padding: clamp(24px, 2.4vw, 34px) !important;
}

.sp-prov .sp-prov-head {
  margin-bottom: var(--wp--preset--spacing--30);
}


/* --------------------------------------------------------------------------
   58. START PAGE — HERO BUTTON SIZING

   The two hero buttons rendered larger than every other button on the site.
   Matched to the path-card buttons in Section 57, which are themselves the
   site default.
   -------------------------------------------------------------------------- */


/* ==========================================================================
   SECTION 78 — START-CONSULTATION (BOOKING) PAGE FIXES

   Layout, spacing and font fixes for the booking page. The button and
   eyebrow fixes are authored directly on the markup; this file handles
   everything that needs CSS.

   Five independent blocks — safe to apply piecemeal.
   ========================================================================== */


/* --- 78.1 Decision-filter path cards: internal padding --------------------
   The three New Patient / Existing Patient / Questions First cards are
   authored with padding spacing-40 top/bottom and spacing-30 left/right,
   and a blockGap of spacing-20 between the icon, title, description and
   button. That reads dense inside a card this size. Bumping both padding
   and the between-child gap gives every element room to breathe.
   -------------------------------------------------------------------------- */

.sp-path {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}

.sp-path > * + * {
  margin-block-start: var(--wp--preset--spacing--30) !important;
}

.sp-path > .sp-path-cta {
  margin-block-start: var(--wp--preset--spacing--40) !important;
}


/* --- 78.2 "What happens next" — left-align + gap between step rows -------

   Three things author the wrong layout in the earlier screenshots:

     (1) Text-align inheritance — the h2 and step paragraphs had no
         explicit text-align, so they picked up whatever the parent
         theme rule set (often center-aligned inside covers). Force
         left on the copy.

     (2) Section 55 (line 5436) sets:
             .sp-next-inner { max-width: 620px; }
         without any horizontal-margin override. WordPress's
         constrained-layout default then centers the 620px box inside
         its 1340px parent inner-container. The block-editor's
         `justifyContent:"left"` attribute doesn't help: it only
         controls the alignment of sp-next-inner's CHILDREN, not
         sp-next-inner's own position within its parent.

         Force margin-left:0 so the 620px block sits at the left edge
         of the 1340px inner-container, matching the design — content
         at the left, doctor photo showing through on the right.

     (3) Section 34 (line 3594) sets:
             .sp-step { margin: 0; }
         That has the same specificity as WordPress's per-instance
         blockGap rule (.wp-container-XXX > * + *), and since the
         theme stylesheet loads later, `margin: 0` wins — killing the
         spacing-20 gap you authored between step rows. The four rows
         then stack against each other with no visible break.

         Restore the between-row gap with a scoped rule that beats
         both by matching only the .sp-step-after-.sp-step case.

   The min-width:901px query for the margin fix matches Section 55's
   own breakpoint so the desktop-only rules stay in step. On mobile
   everything stacks full-width already.
   -------------------------------------------------------------------------- */

.sp-next-inner,
.sp-next-inner h2,
.sp-next-inner p {
  text-align: left;
}

.sp-next h2 {
  margin-block-end: var(--wp--preset--spacing--50);
}

.sp-steps {
  margin-block-start: var(--wp--preset--spacing--40);
}

/* Between-row gap — 14px reads as clearly separated cards without
   turning the group into a spread-out list. */
.sp-steps > .sp-step + .sp-step {
  margin-block-start: 14px !important;
}

@media (min-width: 901px) {
  .sp-next-inner {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* --- 78.3 Step number badges: Newsreader font ----------------------------
   Same treatment as the Patients page process badges — Newsreader
   SemiBold, not the sans-serif system default. Slightly larger glyph
   too, but the badge box stays at 30px so the layout doesn't shift.
   -------------------------------------------------------------------------- */

.sp-step-num {
  font-family: var(--wp--preset--font-family--newsreader), Newsreader, Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}


/* --- 78.4 State-label gradient rule: thicker --------------------------
   The "Florida Patients" / "Georgia & North Carolina Patients" labels
   trail a gradient line to the right. It was authored at 1px, which
   reads as a hairline — the base standard gradient rules elsewhere
   (.gradient-border-left / .gradient-border-right) are 4px. Match that
   here so the line reads intentionally rather than accidental.
   -------------------------------------------------------------------------- */

.sp-state::after {
  height: 4px !important;
  border-radius: 2px;
}


/* --- 78.5 Trust badges: keep inline across breakpoints -------------------
   The default Section 35 mobile rule stacks .sp-badges vertically at
   flex-direction: column, which reads as three disconnected checkmarks
   rather than a single trust-signal row. Override to keep them inline
   with wrapping — three short badges fit two or three across on all
   but the narrowest phone widths.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .sp-badges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px 20px !important;
  }
}


/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */



/* --------------------------------------------------------------------------
   36. LEGAL PAGES

   Shared by Privacy Policy, Terms & Conditions, Medical Disclaimer and
   Notice of Privacy Practices. The table of contents is a raw HTML block,
   so all of its styling lives here.
   -------------------------------------------------------------------------- */

.lg-head h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
}

/* ---- Tabs across the four legal pages ----------------------------------- */
.lg-tabs {
  gap: 12px;
}

.lg-tab {
  margin: 0;
}

.lg-tab a {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid rgba(10, 27, 108, 0.14);
  border-radius: 999px;
  color: inherit;
  font-size: 1.06rem;
  text-decoration: none;
  white-space: nowrap;
}

.lg-tab a:hover {
  border-color: var(--wp--preset--color--accent-1);
}

.lg-tab-active a {
  background: var(--wp--preset--color--accent-2);
  border-color: var(--wp--preset--color--accent-2);
  color: #fff;
}

/* ---- Sidebar ------------------------------------------------------------ */
.lg-side {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

.lg-toc-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
}

.lg-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(10, 27, 108, 0.12);
}

.lg-toc-list li {
  margin: 0;
}

.lg-toc-link {
  display: block;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: inherit;
  font-size: 1.06rem;
  line-height: 1.35;
  text-decoration: none;
}

.lg-toc-link:hover {
  color: var(--wp--preset--color--accent-1);
}

.lg-toc-link.is-current {
  border-left-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

.lg-help-title {
  font-size: 1.13rem;
  font-weight: 600;
}

.lg-help-link a {
  font-size: 1.06rem;
  text-decoration: none;
}

.lg-help-link a:hover {
  text-decoration: underline;
}

/* ---- Content ------------------------------------------------------------ */
.lg-updated {
  font-size: 1.06rem;
  opacity: 0.7;
}

.lg-rule {
  border: 0;
  border-top: 1px solid rgba(10, 27, 108, 0.12);
  margin: 18px 0 32px;
  opacity: 1;
}

/* Anchored headings clear the header when jumped to from the contents */
.lg-h2 {
  scroll-margin-top: 110px;
  margin-top: var(--wp--preset--spacing--50);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.lg-content p,
.lg-content li {
  font-size: 1.13rem;
  line-height: 1.65;
}

.lg-sub {
  margin-bottom: 8px;
  font-size: 1.06rem;
}

.lg-content ul {
  margin-top: 0;
  padding-left: 20px;
}

.lg-content li {
  margin-bottom: 6px;
}

.lg-note-text {
  font-size: 1.02rem;
  line-height: 1.6;
}

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

  /* Contents sits inline above the copy rather than sticking */
  .lg-side {
    position: static;
  }

  .lg-tab a {
    font-size: 0.95rem;
    padding: 8px 16px;
  }

  .lg-h2 {
    scroll-margin-top: 80px;
  }
}

/* Open questions inside legal copy — deliberately conspicuous so they
   cannot be published by accident. Delete the block once answered. */
.lg-todo {
  padding: 12px 16px;
  border: 1px dashed #c0483f;
  border-radius: 6px;
  background: rgba(192, 72, 63, 0.05);
  color: #b0413a;
  font-size: 1rem !important;
  line-height: 1.55;
}

/* Emergency callout on the Medical Disclaimer — sits above the copy so the
   instruction is read before anything else. Firm without being alarming. */
.lg-emergency-title {
  position: relative;
  padding-left: 28px;
  color: #b0413a;
  font-size: 1.13rem !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lg-emergency-title::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.lg-emergency-text {
  font-size: 1.06rem !important;
  line-height: 1.6;
}

.lg-emergency-text strong {
  color: #b0413a;
}

/* The HIPAA-mandated header statement on the Notice of Privacy Practices.
   Set in caps because the regulation prescribes prominent display —
   letter-spacing and line-height keep it readable at that size. */
.lg-statement-text {
  margin: 0;
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.7;
}


/* ==========================================================================
   BLOG
   ========================================================================== */



/* --------------------------------------------------------------------------
   37. BLOG ARCHIVE

   Built on the core Query Loop, so the cards are generated per post rather
   than authored. Styling has to target the block classes WordPress emits.
   -------------------------------------------------------------------------- */

.bl-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
}

/* ---- Category filter row ------------------------------------------------ */
.bl-cats ul,
ul.bl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-cats li {
  margin: 0;
}

.bl-cats a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(10, 27, 108, 0.14);
  border-radius: 999px;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
}

.bl-cats a:hover {
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

/* WordPress appends a count in a span when show_count is on */
.bl-cats .post-count {
  opacity: 0.5;
}

/* ---- Post cards --------------------------------------------------------- */
.bl-list {
  grid-auto-rows: auto;
  align-items: stretch;
}

.bl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bl-thumb {
  margin: 0 0 4px;
}

.bl-thumb img {
  width: 100%;
  height: clamp(180px, 18vw, 220px);
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Posts without a featured image still need the card to line up */
.bl-card > .bl-thumb:empty {
  display: block;
  height: clamp(180px, 18vw, 220px);
  border-radius: 8px;
  background: rgba(10, 27, 108, 0.06);
}

.bl-cat {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bl-cat a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

.bl-title {
  margin: 0;
  line-height: 1.25;
}

.bl-title a {
  color: inherit;
  text-decoration: none;
}

.bl-title a:hover {
  color: var(--wp--preset--color--accent-1);
}

/* The excerpt absorbs the height difference so the meta rows line up */
.bl-excerpt {
  flex: 1 1 auto;
  margin: 0;
}

.bl-excerpt p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  opacity: 0.8;
}

.bl-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(10, 27, 108, 0.1);
  justify-content: space-between;
}

/* The theme was colouring the date near-white against the card. Forced to
   inherit so it reads. */
.bl-date,
.bl-date a {
  margin: 0;
  color: var(--wp--preset--color--contrast) !important;
  font-size: 0.95rem;
  opacity: 0.6;
  text-decoration: none;
}

/* Core read-more renders an <a>, so this is a real link to the post */
.bl-more,
a.bl-more,
.wp-block-read-more.bl-more {
  color: var(--wp--preset--color--accent-1) !important;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.bl-more:hover {
  text-decoration: underline;
}

/* ---- Pagination --------------------------------------------------------- */
.bl-pagination {
  gap: 8px;
}

.bl-pagination a,
.bl-pagination span {
  padding: 8px 14px;
  border-radius: 6px;
  color: inherit;
  font-size: 1.06rem;
  text-decoration: none;
}

.bl-pagination a:hover {
  background: rgba(44, 191, 184, 0.12);
  color: var(--wp--preset--color--accent-1);
}

.bl-pagination .current {
  background: var(--wp--preset--color--accent-2);
  color: #fff;
}

.bl-empty p {
  font-size: 1.13rem;
  opacity: 0.75;
}

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

  .bl-list {
    grid-template-columns: 1fr;
  }

  .bl-thumb img,
  .bl-card > .bl-thumb:empty {
    height: clamp(200px, 52vw, 280px);
  }

  .bl-cats a {
    font-size: 0.95rem;
    padding: 7px 14px;
  }
}


/* --------------------------------------------------------------------------
   38. SINGLE POST

   the base direction: close to the Privacy Policy layout with a featured
   image added. So it reuses the lg-* sidebar and content column, and the
   bl-* card styling for the related posts row. Only the header, featured
   image and post typography are new here.
   -------------------------------------------------------------------------- */

.po-cat {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.po-cat a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

.po-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  text-wrap: balance;
}

.po-meta {
  font-size: 1.06rem;
  opacity: 0.7;
}

.po-meta p,
.po-author,
.po-date {
  margin: 0;
  font-size: 1.06rem;
}

.po-dot {
  opacity: 0.5;
}

/* ---- Featured image ----------------------------------------------------- */
.po-featured {
  margin: 0;
}

.po-featured img {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ---- Sidebar ------------------------------------------------------------ */
.po-side-label {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.6;
}

.po-side-cats {
  margin: 0;
  font-size: 1.06rem;
}

.po-side-cats a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

.po-back a {
  color: inherit;
  font-size: 1.06rem;
  text-decoration: none;
}

.po-back a:hover {
  color: var(--wp--preset--color--accent-1);
}

/* ---- Post body ---------------------------------------------------------- */
/* Editors write these posts, so the content styles have to cover whatever
   blocks they reach for rather than a known set. */
.po-content > * {
  max-width: 720px;
}

.po-content p,
.po-content li {
  font-size: 1rem;
  line-height: 1.75;
}

.po-content h2 {
  margin-top: var(--wp--preset--spacing--50);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.25;
}

.po-content h3 {
  margin-top: var(--wp--preset--spacing--40);
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
}

.po-content ul,
.po-content ol {
  padding-left: 22px;
}

.po-content li {
  margin-bottom: 8px;
}

.po-content blockquote {
  margin: var(--wp--preset--spacing--40) 0;
  padding-left: 20px;
  border-left: 3px solid var(--wp--preset--color--accent-1);
  font-style: italic;
}

.po-content blockquote p {
  font-size: 1.05rem;
}

.po-content figure,
.po-content .wp-block-image {
  margin: var(--wp--preset--spacing--40) 0;
}

.po-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.po-content a {
  color: var(--wp--preset--color--accent-1);
}

/* Every article carries the standing medical disclaimer */
.po-disclaimer .lg-note-text {
  font-size: 1rem;
}

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

  .po-side {
    position: static;
    padding-bottom: var(--wp--preset--spacing--30);
    border-bottom: 1px solid rgba(10, 27, 108, 0.1);
  }

  .po-featured img {
    aspect-ratio: 3 / 2;
  }

  .po-content > * {
    max-width: 100%;
  }
}


/* --------------------------------------------------------------------------
   39. ARCHIVE TEMPLATE

   Category, tag and date archives. Reuses the blog hero and card styling —
   only the archive title and term description are new.
   -------------------------------------------------------------------------- */

.ar-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1;
}

.ar-desc {
  margin-top: var(--wp--preset--spacing--30);
}

.ar-desc p {
  margin: 0;
}

/* A term with no description leaves an empty block behind */
.ar-desc:empty {
  display: none;
}


/* ==========================================================================
   CONNECT CARD (per-person QR landing)
   ========================================================================== */



/* --------------------------------------------------------------------------
   40. CONNECT CARD (QR landing)

   One page per staff member at /connect/<name>/. Every action is a plain
   link — tel:, mailto:, the scheduler, the vCard — so there is no
   JavaScript, no forms to secure, and no success screens to build. The
   booking flows live in the CRM, which is where availability actually is.

   Row icons are inline SVG data URIs so no icon assets are needed.
   -------------------------------------------------------------------------- */

.cn-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cn-logo {
  margin-bottom: var(--wp--preset--spacing--50);
}

.cn-logo img {
  margin-inline: auto;
}

.cn-avatar img {
  border-radius: 50%;
  border: 2px solid rgba(44, 191, 184, 0.5);
}

.cn-name {
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  line-height: 1.2;
}

.cn-role {
  font-size: 1.06rem;
}

/* ---- Action rows -------------------------------------------------------- */
.cn-row {
  margin: 0;
}

.cn-row a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 1.13rem;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cn-row a:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(44, 191, 184, 0.5);
}

/* Icon tile on the left */
.cn-row a::before {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background-color: rgba(44, 191, 184, 0.16);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

/* Chevron on the right */
.cn-row a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

/* ---- Per-row icons ------------------------------------------------------ */
.cn-row--meeting a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cbfb8' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.cn-row--consult a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cbfb8' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.cn-row--phone a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cbfb8' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

.cn-row--email a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cbfb8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.cn-row--web a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232cbfb8' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
}

/* Save contact is the primary action */
.cn-row--save a {
  background: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-1);
  color: #fff;
  font-weight: 500;
}

.cn-row--save a:hover {
  background: var(--wp--preset--color--accent-1);
  filter: brightness(0.94);
}

.cn-row--save a::before {
  background-color: rgba(255, 255, 255, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.cn-row--save a::after {
  opacity: 0.8;
}

.cn-foot {
  font-size: 0.78rem;
  opacity: 0.55;
}

.cn-foot a {
  color: inherit;
}

/* ---- Larger screens ----------------------------------------------------- */
@media (min-width: 601px) {
  .cn-page {
    padding-block: var(--wp--preset--spacing--50);
  }
}


/* ==========================================================================
   404 PAGE
   ========================================================================== */



/* ==========================================================================
   SECTION 68 — 404

   Template: Appearance > Editor > Templates > 404. Prefix e4-.

   Built from the site's existing conventions rather than new ideas: the
   .ct-hero pattern for the top band (140px top padding, because the header
   is position:absolute over it), .coastal-eyebrow, and the base chip spec
   for the popular-pages list — that is .--cloud--list-style in PART 1, so
   the chips here inherit his fill, radius and gradient edge and only need
   link colours.
   ========================================================================== */

.e4-code {
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: clamp(3.5rem, 9vw, 6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--accent-1);
  opacity: 0.28;
}

.e4-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  opacity: 0.85;
}

.e4-btn-alt .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--accent-2);
  background: #ffffff;
  color: var(--wp--preset--color--accent-2);
}

.e4-btn-alt .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-2);
  color: #ffffff;
}

/* ---- Popular pages ------------------------------------------------------ */
/* A link list, not chips. the base .--cloud--list-style reads as tagging, and
   its hover (translateY plus an animated gradient edge) fights the global
   link colour, which washed the labels out. This reuses the mega-menu panel
   row instead: hairline divider, navy label, arrow on the right. */
.e4-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.e4-links li {
  margin: 0;
  border-bottom: 1px solid rgb(from var(--wp--preset--color--accent-2) r g b / 0.14);
}

/* The element selector and the li ancestor are both here to outrank the
   global link styles, which were underlining these and recolouring them on
   hover. */
.e4-links li a,
.e4-links li a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px;
  color: var(--wp--preset--color--accent-2);
  font-size: 1.06rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.e4-links li a:hover,
.e4-links li a:focus-visible {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

/* Same arrow asset as .read-more-button, masked so it takes the link colour
   and turns teal on hover along with the label. */
.e4-links li a::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
}

/* ---- Search ------------------------------------------------------------- */
.e4-search {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.e4-search .wp-block-search__input {
  border: 1px solid rgb(from var(--wp--preset--color--accent-2) r g b / 0.25);
  border-radius: 999px;
  padding: 12px 18px;
}

.e4-search .wp-block-search__button {
  border-radius: 999px;
  padding: 12px 22px;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 781px) {
  .e4-hero,
  .e4-links-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .e4-links-wrap {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .e4-links {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   SECTION 79 — CONTACT FORM SUBMIT: MATCH THE --cloud--list-style BUTTON

   The contact form's <button class="ct-submit"> is a raw HTML element
   inside a wp:html form block, so Chris's --cloud--list-style button
   system in Section 73 doesn't reach it — that section targets
   .wp-block-button__link anchors, not native <button> elements.

   This section gives .ct-submit the exact same visual as the
   .--cloud--list-style.is-fill-teal buttons that appear on every other
   page (Go to Patient portal, Book Consultation, etc): teal fill,
   32px pill radius, ↗ arrow BEFORE the label via ::before with a
   masked SVG, gradient pill edge via ::after, and the same
   translateY(-2px) hover motion.

   Each rule mirrors the corresponding rule in Section 73, with only
   the selector changed from
     .--cloud--list-style.wp-block-buttons .wp-block-button__link
   to
     .ct-submit
   so the two stay in step visually — if Section 73 changes, this
   should change with it.

   The overrides replace the earlier .ct-submit block in Section 33
   (15px padding, 999px radius, no arrow, no gradient edge). Section
   33's block stays in the file for the input styles it also declares
   — its .ct-submit rule just gets overridden here because Section 79
   loads later with matching specificity.

   Note on Section 65: it zeroes ::before and ::after on
   .wp-block-button__link and .wp-element-button, but .ct-submit is
   neither, so no !important is needed to bring the pseudo-elements
   back.
   ========================================================================== */

.ct-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;                          /* full-width in form column, matches Figma */
  padding: 16px 24px;
  background-color: var(--wp--preset--color--accent-1);
  color: #ffffff;
  border: 0;
  border-radius: 32px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.35s ease,
    background-color 0.35s ease;
}

/* The ↗ icon — same masked SVG the wp:button buttons use. */
.ct-submit::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
}

/* Gradient pill edge — same masked border trick from the chip system. */
.ct-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--wp--preset--gradient--custom-pill-box);
  background-size: 200% 200%;
  background-position: left center;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background-position 0.6s ease;
}

.ct-submit:hover {
  transform: translateY(-2px);
}

.ct-submit:hover::after {
  background-position: right center;
}

.ct-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--contrast);
  outline-offset: 2px;
}

/* ==========================================================================
   SECTION 81 — LEGAL PAGE HEADER
   (unchanged from the previous delivery — kept here so 81+82+83 can be
   pasted as one block)

   Un-hides the legal-page h1 and gives .lg-head enough top padding to
   clear the sticky site header, with proper spacing between eyebrow,
   heading, and tab bar.
   ========================================================================== */

.lg-head h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  /* Safety reset in case an earlier "hide" version of this rule is
     still in the stylesheet — this un-hides the h1 either way. */
  position: static;
  width: auto;
  height: auto;
  padding: revert;
  margin: revert;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.lg-head {
  padding-top: 140px !important;
  padding-bottom: var(--wp--preset--spacing--40) !important;
}

.lg-head .coastal-eyebrow {
  margin-bottom: var(--wp--preset--spacing--30) !important;
}

.lg-head h1 {
  margin-top: 0 !important;
  margin-bottom: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 781px) {
  .lg-head {
    padding-top: 120px !important;
    padding-bottom: var(--wp--preset--spacing--30) !important;
  }

  .lg-head .coastal-eyebrow {
    margin-bottom: var(--wp--preset--spacing--20) !important;
  }

  .lg-head h1 {
    margin-bottom: var(--wp--preset--spacing--30) !important;
  }
}


/* ==========================================================================
   SECTION 82 — RESOURCE CATEGORY SUB-PAGE HERO (Figma spec)

   Locks the four /resources/<category>/ sub-pages (Veterans, First
   Responders, Mental Health & Recovery, Service & Support) to a single
   Figma-derived spec so all four render identically. Numbers here come
   straight from the Figma dev-mode panel:

     Layout
       Content column max-width  : 630px
       Vertical gap in column    : 20px  (breadcrumb → eyebrow → text)
       Text-container gap        : 24px  (h1 → description)
       Column gap (content ↔ img): 40px  (handled by wp:columns blockGap)
       Hero image                : 610×457, radius 8px

     Breadcrumb ("Home › Resources › <Category>")
       Font       : DM Sans, Medium (500)
       Size       : 14px
       Line-height: 120% (16.8px)
       Colour     : #154878   (Colors/blue/600 in Figma)

     Eyebrow ("RESOURCES")
       Uses the site-wide .coastal-eyebrow spec authored inline in the
       markup (0.75rem, 0.12em letter-spacing, teal accent-1). Only the
       spacing below it is overridden here.

     Heading (h1)
       Font       : Newsreader, Medium (500)
       Size       : 72px  (clamped 36–72px for responsive)
       Line-height: 74px  (ratio 1.028)
       Letter-sp. : 0

     Description
       Font       : Manrope, Medium (500)
       Size       : 20px  (clamped 16–20px for responsive)
       Line-height: 28px  (1.4)
       Letter-sp. : 0

   The inline styles in the wp:paragraph and wp:heading blocks set the
   old margins; the !important flags below beat those cleanly so the
   authored markup doesn't need to change.

   The forced <br> tags in each h1 are DESIGN INTENT — every category
   heading is composed as separate word blocks stacked vertically with
   the accent word on the last line. Leave them as they are.
   ========================================================================== */

/* ---- 82.1 Breadcrumb ------------------------------------------------ */

.rs-cat-hero .rs-crumbs {
  font-family: "DM Sans", Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #154878;
  opacity: 1;                         /* was 0.8 in Section 31 */
  margin-top: 0 !important;
  margin-bottom: 20px !important;     /* was spacing-40 inline in markup */
}

.rs-cat-hero .rs-crumbs a {
  color: #154878;
  text-decoration: none;
}

.rs-cat-hero .rs-crumbs a:hover {
  text-decoration: underline;
}

.rs-cat-hero .rs-crumb-current {
  color: #154878;                     /* was accent-1 (teal) in Section 31 */
}


/* ---- 82.2 Eyebrow — spacing only ------------------------------------ */

.rs-cat-hero .coastal-eyebrow {
  margin-top: 0 !important;
  margin-bottom: 20px !important;     /* was spacing-20 inline in markup */
}


/* ---- 82.3 Heading (h1) — Newsreader 72px/74px ----------------------- */

.rs-cat-hero h1 {
  font-family: var(--wp--preset--font-family--newsreader), Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 4.5rem);   /* 36px → 72px */
  line-height: 1.028;                        /* 74/72 */
  letter-spacing: 0;
  margin-top: 0 !important;
  margin-bottom: 24px !important;            /* text-container gap in Figma */
}


/* ---- 82.4 Description — Manrope 20px/28px --------------------------- */

.rs-cat-hero .wp-block-column p:not(.coastal-eyebrow) {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);   /* 16px → 20px */
  line-height: 1.4;                          /* 28/20 */
  letter-spacing: 0;
  margin-top: 0 !important;                  /* was spacing-30 inline */
  margin-bottom: 0 !important;
}


/* ---- 82.5 Hero image — aspect + radius match design ---------------- */

.rs-cat-hero .rs-cat-hero-img,
.rs-cat-hero .rs-cat-hero-img img {
  width: 100%;
  height: auto;                              /* let aspect-ratio drive it */
  aspect-ratio: 610 / 457;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}


/* ---- 82.6 Mobile — stack the columns and shrink -------------------- */

@media (max-width: 900px) {
  .rs-cat-hero .rs-crumbs {
    margin-bottom: 16px !important;
  }

  .rs-cat-hero .coastal-eyebrow {
    margin-bottom: 16px !important;
  }

  .rs-cat-hero h1 {
    margin-bottom: 16px !important;
  }
}


/* ==========================================================================
   SECTION 83 — RESOURCES LANDING "EXPLORE COMMUNITY" ARROW
   (was Section 82 previously — renumbered so 82 can hold the sub-page
   hero spec above)

   Draws the up-right arrow via ::after on the four "Explore community"
   links using the same SVG mask the button system uses site-wide.
   ========================================================================== */

.rs-cat-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.rs-cat-link a::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
          mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
  transition: transform 0.28s ease;
}

.rs-cat-link a:hover::after,
.rs-cat-link a:focus-visible::after {
  transform: translate(2px, -2px);
}



/* ==========================================================================
   SECTION 84 — HOME: SYMPTOM PILL CLOUD, CENTRED ROWS

   Chris: "center list" — the pill rows were left-aligned, so the final row
   ("No Answers" alone before the two new terms were added) sat against the
   left edge with a long empty gap beside it.

   The base .--cloud--list-style rule near the top of this file sets
   display:flex / flex-wrap:wrap with no justify-content, which defaults to
   flex-start. This scopes a centred variant to the Home problem section only,
   via the coastal-symptoms class on that one <ul>, so every other pill list
   on the site (Providers, Patients, Resources tags, buttons) is untouched.
   ========================================================================== */

.--cloud--list-style.coastal-symptoms {
  justify-content: center;
}

/* The copy above the pills is left-aligned, so a full-width centred row can
   read as detached from it. Capping the track keeps the cloud visually tied
   to the paragraph while still balancing the rows. */
.--cloud--list-style.coastal-symptoms {
  max-width: 34rem;
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 781px) {
  .--cloud--list-style.coastal-symptoms {
    max-width: 100%;
  }
}


/* ==========================================================================
   SECTION 85 — PATIENTS: TESTIMONIAL PLACEHOLDER SLIDE

   The REAL RESULTS arrows were inert because the second .pt-slide was wrapped
   in an HTML comment, so the script saw one slide and disabled both controls.
   The slide is now live, which makes the arrows work — but it holds placeholder
   cards, not real testimonials.

   This styles that slide so it is impossible to mistake for finished content
   and cannot ship unnoticed. DELETE THIS SECTION once real, client-approved
   testimonials replace the placeholders, and remove the pt-slide-placeholder
   class from the markup at the same time.
   ========================================================================== */

.pt-slide-placeholder .pt-quote {
  border: 2px dashed #e06c5a;
  background: rgba(224, 108, 90, 0.12);
  color: #ffffff;
  font-style: italic;
}

.pt-slide-placeholder {
  position: relative;
}

.pt-slide-placeholder::before {
  content: "PLACEHOLDER SLIDE — NOT FOR LAUNCH";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 4px;
  background: #e06c5a;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}


/* ==========================================================================
   SECTION 86 — MOBILE: HERO CLEARANCE, CONTRAST, PILLS, PAIRED IMAGES

   *** THIS REPLACES THE EARLIER SECTION 86. ***
   In the stylesheet, find the line "SECTION 86" and delete from its comment
   block down to the end of the file, then paste this in its place. Section 86
   is the last section, so there is nothing below it to preserve.

   Four fixes. All mobile only — desktop is untouched throughout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   86.1 HERO TOP PADDING

   .site-header is position:absolute (see "Header Glass Effect", ~line 255), so
   it floats OVER the page instead of pushing it down. Every hero therefore
   needs top padding at least equal to the header height.

   SECTION 4 forces padding-top:56px (<=782px) and 40px (<=600px) with
   !important on EVERY alignfull section, heroes included. The mobile header is
   ~72px tall, so hero content was being drawn underneath it.

   Heroes are always the FIRST block on the page here, which is what the
   :first-child selectors catch; the named classes cover pages where a wrapper
   changes the nesting.

   ONE DIAL: if the header height ever changes, edit --cs-header-h below and
   every hero on the site follows.
   -------------------------------------------------------------------------- */

:root {
  --cs-header-h: 72px;
}

@media (max-width: 782px) {

  .pc-hero,
  .pt-hero,
  .pv-hero,
  .ct-hero,
  .rs-hero,
  .rs-cat-hero,
  .sp-hero,
  .bl-hero,
  .lg-head,
  .cn-page,
  main > .wp-block-cover.alignfull:first-child,
  main > .wp-block-group.alignfull:first-child,
  .entry-content > .wp-block-cover.alignfull:first-child,
  .entry-content > .wp-block-group.alignfull:first-child,
  .wp-site-blocks > main > .wp-block-cover.alignfull:first-child,
  .wp-site-blocks > main > .wp-block-group.alignfull:first-child {
    padding-top: calc(var(--cs-header-h) + 68px) !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 600px) {

  .pc-hero,
  .pt-hero,
  .pv-hero,
  .ct-hero,
  .rs-hero,
  .rs-cat-hero,
  .sp-hero,
  .bl-hero,
  .lg-head,
  .cn-page,
  main > .wp-block-cover.alignfull:first-child,
  main > .wp-block-group.alignfull:first-child,
  .entry-content > .wp-block-cover.alignfull:first-child,
  .entry-content > .wp-block-group.alignfull:first-child,
  .wp-site-blocks > main > .wp-block-cover.alignfull:first-child,
  .wp-site-blocks > main > .wp-block-group.alignfull:first-child {
    padding-top: calc(var(--cs-header-h) + 60px) !important;
    padding-bottom: 56px !important;
  }
}


/* --------------------------------------------------------------------------
   86.2 HERO TEXT CONTRAST OVER PHOTO AND VIDEO

   On a phone the hero image fills the frame, so light areas of the photo sit
   directly behind the headline. Contact and Providers were washing out.
   Darker scrim on small screens only; the images themselves are unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {

  .ct-hero .wp-block-cover__background,
  .pv-hero .wp-block-cover__background {
    background: linear-gradient(
      180deg,
      rgba(10, 27, 44, 0.82) 0%,
      rgba(10, 27, 44, 0.68) 60%,
      rgba(10, 27, 44, 0.78) 100%
    ) !important;
  }

  .ct-hero p,
  .pv-hero p {
    text-shadow: 0 1px 12px rgba(10, 27, 44, 0.55);
  }
}


/* --------------------------------------------------------------------------
   86.3 HOME SYMPTOM PILLS

   SECTION 84 centres this list. On a phone the pills inherited 12px/16px
   padding and full body font size, so most took a whole row each and the cloud
   read as a stapled-together column. Smaller pills, tighter gap, no wrapping
   inside a pill.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {

  .--cloud--list-style.coastal-symptoms {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .--cloud--list-style.coastal-symptoms li {
    padding: 9px 14px !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 400px) {

  .--cloud--list-style.coastal-symptoms li {
    padding: 8px 12px !important;
    font-size: 0.8125rem !important;
  }
}


/* --------------------------------------------------------------------------
   86.4 PAIRED IMAGES

   THE SIZING IS NOW FIXED IN THE MARKUP, NOT HERE.

   The Home "THE PROBLEM" pair was authored with fixed pixel flex sizes
   (400px and 315px) and verticalAlignment:bottom. Fixed pixels do not scale, so
   on a phone the two photos were mismatched and staggered. The closing-CTA pair
   at the foot of the page was always authored as flexSize:50% each, which is
   why that one looked right at every width.

   The problem pair now matches it: 50% / 50%, no bottom alignment. That works
   at every breakpoint on its own, so this block deliberately does almost
   nothing — two earlier attempts to solve it in CSS fought the inline flex
   values and made things worse.

   All that is left here is a shared aspect ratio so the two photos are exactly
   the same height on small screens, and clearing any inherited max-height so a
   full-width pair is never clipped.

   TO TUNE THE HEIGHT: change --cs-pair-ratio. 3/4 portrait, 1/1 square,
   4/3 landscape.
   -------------------------------------------------------------------------- */

:root {
  --cs-pair-ratio: 3 / 4;
}

@media (max-width: 782px) {

  .wp-block-group:has(> .wp-block-image + .wp-block-image):not(:has(> :not(.wp-block-image))) {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    max-height: none !important;
  }

  .wp-block-group:has(> .wp-block-image + .wp-block-image):not(:has(> :not(.wp-block-image))) > .wp-block-image {
    margin: 0 !important;
  }

  .wp-block-group:has(> .wp-block-image + .wp-block-image):not(:has(> :not(.wp-block-image))) img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--cs-pair-ratio) !important;
    object-fit: cover !important;
  }
}

/* --------------------------------------------------------------------------
   86.5 SECTIONS THAT MISS THE GLOBAL MOBILE PADDING RULE

   *** THIS IS WHAT WAS ACTUALLY WRONG WITH THE HOME IMAGE PAIR. ***

   SECTION 4 reduces the authored 80px side padding to 20px/16px on mobile, but
   its selector requires .alignfull:

       section.wp-block-group.alignfull:not(.site-header)

   The Home "THE PROBLEM" section is authored as a constrained section with NO
   align attribute, so it renders as

       section.wp-block-group.has-global-padding.is-layout-constrained

   and SECTION 4 never touches it. Measured in DevTools at a 450px viewport it
   was still 100px/80px — 160px of side padding out of 450px, leaving a 290px
   content column and 140px-wide photos. The footer pair, in an alignfull
   section, had 418px to work with. Same 50/50 split, very different result.

   This drops the .alignfull requirement for top-level page sections. tagName
   "section" is only used for page-level sections on this build, so nested
   groups and cards are unaffected.

   INLINE PADDING ONLY. Block padding is left to SECTION 4 and to 86.1 above,
   so hero top clearance is not disturbed.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {

  section.wp-block-group:not(.site-header),
  section.wp-block-cover:not(.site-header) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 600px) {

  section.wp-block-group:not(.site-header),
  section.wp-block-cover:not(.site-header) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}



/* ==========================================================================
   SECTION 87 — PATIENTS: REAL TESTIMONIALS

   The REAL RESULTS carousel now holds 12 real, consented patient testimonials
   across three slides of four (2 x 2 on desktop, one per row on mobile). The
   old Figma filler quotes and the placeholder slide are gone.

   SECTION 85 (the red dashed placeholder styling) now targets a class that no
   longer exists anywhere on the site. It is harmless, but can be deleted.

   Names are shown EXACTLY as they appear in Coastal's testimonial report,
   which matches the identification option each patient chose ("First name
   only", "First name + last initial", "Initials only", "Anonymous").
   Do not reformat them — that choice is part of each patient's consent.
   ========================================================================== */

/* Quote on top, name pinned to the bottom so cards in a row line up. */
.pt-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pt-quote-name {
  display: block;
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}


@media (max-width: 600px) {

  .pt-quote-name {
    margin-top: 10px;
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   SECTION 88 — /book-consultation/ META ADS LANDING PAGE

   This page runs on a custom template with NO header and NO footer, so there
   are no links out: logo (not linked), copy, and the Go High Level calendar.
   Classes are prefixed lp-.

   The calendar code is exactly what was supplied, untouched. form_embed.js
   resizes the iframe to fit the calendar after it loads; the min-height below
   just stops it showing as a thin strip for the first second.
   ========================================================================== */

.lp-page {
  min-height: 100vh;
}

.lp-logo img {
  width: 200px;
  max-width: 60vw;
  height: auto;
}

.lp-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.12;
}

/* "We have your request. One step left." — a confirmation pill, because the
   visitor arrives straight from a Meta lead form. */
.lp-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 10px 18px;
  border: 1px solid rgba(44, 191, 184, 0.45);
  border-radius: 999px;
  background: rgba(44, 191, 184, 0.10);
  color: var(--wp--preset--color--accent-2);
  font-weight: 600;
  font-size: 0.95rem;
}

.lp-confirm::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 1;
}

.lp-subtitle {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}

.lp-lede {
  max-width: 560px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lp-cal {
  padding: 8px;
  border: 1px solid #e6e0d8;
  border-radius: 8px;
  background: #ffffff;
}

.lp-cal iframe {
  display: block;
  width: 100%;
  min-height: 700px;
}

/* The <br> in the supplied embed code adds a stray line under the calendar. */
.lp-cal br {
  display: none;
}

.lp-foot {
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* SECTION 86.1 gives the first section on every page extra top padding to
   clear the floating header. This page has no header, so that clearance is
   just dead space. Doubled class for specificity so this wins. */
@media (max-width: 782px) {

  section.wp-block-group.alignfull.lp-page.lp-page {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }

  .lp-confirm {
    font-size: 0.875rem;
    padding: 9px 14px;
  }

  .lp-cal {
    padding: 4px;
  }
}


/* ==========================================================================
   SECTION 89 — /start/: CHARM CALENDAR HEIGHT + PROVIDER PHOTOS

   Charm's embed code sets height="1000" on each calendar. Unlike the Go High
   Level embeds, Charm does not resize its iframe to fit the content, so every
   calendar was a fixed 1000px box with a lot of empty white inside it.

   ONE DIAL EACH. The Charm calendars were showing an authorization error when
   this was written, so these heights are a starting point. Once they load,
   adjust until the calendar fits without an inner scrollbar:
     --sp-cal-h         desktop height
     --sp-cal-h-mobile  phone height (the calendar stacks, so it runs taller)
   ========================================================================== */

:root {
  --sp-cal-h: 760px;
  --sp-cal-h-mobile: 860px;
}

.sp-embed,
.sp-embed iframe {
  min-height: 0 !important;
}

.sp-embed iframe {
  height: var(--sp-cal-h) !important;
}

@media (max-width: 782px) {

  .sp-embed iframe {
    height: var(--sp-cal-h-mobile) !important;
  }
}

/* The avatar is now an image block (a <figure>) rather than an empty group.
   Figures carry their own margin, which would knock the circle off-centre
   next to the name. */
figure.sp-prov-avatar {
  margin: 0 !important;
}

figure.sp-prov-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* ==========================================================================
   SECTION 90 — CONTACT: FORMINATOR FORM, MATCHED TO THE ORIGINAL DESIGN

   The Contact page form is now a Forminator form (shortcode block) instead of
   the old hand-written HTML form, which posted to "#" and sent nothing.

   For this to work, the form's Appearance > Design Style must be set to NONE
   in Forminator. That stops Forminator loading its own look, so the rules
   below are the only styling and the form matches the old ct-form design:
   same inputs, same 8px radius, same full-width teal pill button with the
   arrow icon.

   Everything is scoped to .ct-formcol, so any other Forminator form added to
   the site later is not affected.

   The old .ct-form / .ct-input / .ct-submit rules earlier in this file no
   longer match anything. Harmless, can be deleted.
   ========================================================================== */

.ct-formcol .forminator-ui {
  margin: 0 !important;
}

.ct-formcol .forminator-row {
  margin-bottom: 18px !important;
}

.ct-formcol .forminator-row:last-child {
  margin-bottom: 0 !important;
}

.ct-formcol .forminator-label {
  display: block;
  margin: 0 0 7px;
  font-size: 1rem;
  font-weight: 500;
  color: inherit;
}

.ct-formcol .forminator-required {
  color: var(--wp--preset--color--accent-1);
}

.ct-formcol .forminator-input,
.ct-formcol .forminator-textarea {
  box-sizing: border-box;
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(10, 27, 108, 0.16) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: 1.13rem !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.ct-formcol .forminator-textarea {
  min-height: 110px;
  resize: vertical;
}

.ct-formcol .forminator-input::placeholder,
.ct-formcol .forminator-textarea::placeholder {
  color: rgba(10, 27, 108, 0.4);
}

.ct-formcol .forminator-input:focus,
.ct-formcol .forminator-textarea:focus {
  outline: 2px solid var(--wp--preset--color--accent-1) !important;
  outline-offset: 1px;
  border-color: transparent !important;
}

/* SMS consent checkbox — smaller type, box aligned to the first line. */
.ct-formcol .forminator-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.85;
  cursor: pointer;
}

.ct-formcol .forminator-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--wp--preset--color--accent-1);
}

/* Submit — same full-width teal pill as the original .ct-submit */
.ct-formcol .forminator-button-submit {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wp--preset--color--accent-1) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.ct-formcol .forminator-button-submit::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/07/up-right-arrow.svg") center / contain no-repeat;
}

.ct-formcol .forminator-button-submit:hover {
  transform: translateY(-2px);
  filter: brightness(0.94);
}

.ct-formcol .forminator-button-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--contrast);
  outline-offset: 2px;
}

/* Field errors and the success message */
.ct-formcol .forminator-error-message {
  display: block;
  margin-top: 6px;
  color: #b0413a;
  font-size: 0.875rem;
}

.ct-formcol .forminator-response-message {
  margin: 0 0 18px !important;
  padding: 14px 18px !important;
  border-radius: 8px;
  font-size: 1rem;
}

.ct-formcol .forminator-response-message.forminator-success {
  border: 1px solid rgba(44, 191, 184, 0.45);
  background: rgba(44, 191, 184, 0.10);
}

.ct-formcol .forminator-response-message.forminator-error {
  border: 1px solid rgba(192, 72, 63, 0.4);
  background: rgba(192, 72, 63, 0.06);
  color: #b0413a;
}

/* Consent line and PHI warning now sit under the form as normal blocks. */
.ct-formcol .ct-consent {
  margin-top: 16px;
}

.ct-formcol .ct-warning {
  margin-top: 12px;
}

@media (max-width: 600px) {

  .ct-formcol .forminator-input,
  .ct-formcol .forminator-textarea,
  .ct-formcol .forminator-button-submit {
    font-size: 1rem !important;
  }
}

/* Forminator keeps an empty message box at the top of the form until
   someone submits. Hide it while it has nothing in it. */
.ct-formcol .forminator-response-message:empty,
.ct-formcol .forminator-response-message[aria-hidden="true"] {
  display: none !important;
}



/* ==========================================================================
   SECTION 91 — HOME PRICING CARDS: CHECK ICONS NEVER SHRINK

   Each bullet row is a no-wrap flex group: check icon + text. The icon had
   no fixed width, so when a bullet ran to two or three lines the text
   squeezed the icon down to a dot and pushed the text out of line with the
   bullets above it.

   The long bullet is now shorter ("Wholesale pricing on medications & lab"),
   but it can still wrap on narrower cards, so the icon is locked to its
   normal size and pinned to the first line of text.
   ========================================================================== */

.coastal-pricing .wp-block-group.has-custom-css:has(> .wp-block-image + p) {
  align-items: flex-start !important;
}

.coastal-pricing .wp-block-group.has-custom-css:has(> .wp-block-image + p) > .wp-block-image {
  flex: 0 0 auto !important;
  min-width: max-content;
  margin-top: 3px !important;
}


/* ==========================================================================
   SECTION 92 — MOBILE: /start/ PROVIDER CARDS + TRUST LIST, PATIENTS PILLS

   Mobile only (782px and down). Desktop is untouched.
   ========================================================================== */

@media (max-width: 782px) {

  /* --------------------------------------------------------------------
     92.1 /start/ PROVIDER PHOTO

     On a phone the provider card stacks, and the avatar stretched into a
     wide oval across the card. The Charm calendar directly underneath
     already shows the provider's photo, so the avatar is hidden here
     rather than duplicated.
     -------------------------------------------------------------------- */

  .sp-prov-avatar {
    display: none !important;
  }


  /* --------------------------------------------------------------------
     92.2 /start/ TRUST LIST ("Veteran owned" etc.)

     On desktop these sit in one row, split by thin vertical dividers.
     When they wrapped on a phone, each item kept its divider and its left
     offset, so the three lines staggered further right as they went down.

     Now: a tidy left-aligned column, centred as a group, no dividers.
     -------------------------------------------------------------------- */

  .sp-badges {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 4px !important;
  }

  .sp-badge,
  .sp-badge + .sp-badge {
    margin-left: 0 !important;
    padding: 10px 0 10px 30px !important;
    border-left: 0 !important;
    border-image: none !important;
    text-align: left;
  }

  .sp-badge + .sp-badge::before {
    left: 0 !important;
  }

  .sp-badge + .sp-badge::after {
    left: 6px !important;
  }


  /* --------------------------------------------------------------------
     92.3 PATIENTS "WHO WE ARE" PILLS

     The three pills were sized to their text, so each came out a
     different width, two of them wrapped onto two lines, and the round
     32px corners turned the two-line ones into lozenges.

     Now: all three the same full width, text left-aligned, softer corners
     that suit a two-line pill, and the tick sits on the first line.
     -------------------------------------------------------------------- */

  .pt-who-pills {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .pt-who-pill {
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px 18px 14px 44px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  .pt-who-pill::before {
    top: calc(14px + 0.7em) !important;
  }

  /* No lift-on-hover on touch screens — it just sticks after a tap. */
  .pt-who-pill:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   SECTION 93 — PROVIDERS: STACKED CARDS (CAROUSEL REMOVED)

   The owner preferred seeing every provider at once, so the Meet Your Care
   Team carousel was replaced with a plain stack: Wendy, then Mandi, one
   card under the other. The arrows and the slider script are gone from the
   page entirely.

   The old .pv-carousel / .pv-viewport / .pv-track / .pv-slide / .pv-nav
   rules earlier in this file no longer match anything. Harmless, can be
   deleted.

   To add a provider later: in the editor, select a provider card (the
   two-column block), Duplicate it, and change the photo, name, licence
   line, bio, pills and button text.
   ========================================================================== */

.pv-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pv-stack > .pv-provider {
  margin: 0 !important;
}

@media (max-width: 782px) {

  .pv-stack {
    gap: 24px;
  }
}