/*
Theme Name:  Miss Good Habits
Theme URI:   https://missgoodhabits.com
Description: Divi child theme for the Miss Good Habits site. The homepage is built in the Divi Builder; this theme holds the design tokens, section styles, wave and ribbon artwork and the homepage behaviour so they survive Divi updates.
Author:      JBird Designs
Template:    Divi
Version:     0.7.28
Text Domain: mgh
*/

/* Design tokens. Hex values are the client's, from the annotated mockup. */
:root {
  --cream:          #FBF6F0;
  --cream-full:     #F7ECE0;
  --teal:           #7CC8C4;
  --blue-dark:      #135397;
  --blue-mid:       #3E92CF;
  --blue-story:     #8CB5E0;
  --lavender:       #DAC1DD;
  --orange:         #F5A829;
  --purple:         #BC96C6;
  --white:          #FFFFFF;

  --green:          #4AAA74;
  --lime:           #A3C552;
  --chartreuse:     #D7D35D;
  --mint:           #BDE3D9;
  --sky:            #B1D6EA;
  --coral:          #F37063;
  --red-orange:     #F26623;
  --gold:           #F7C427;
  --pink:           #F599AE;
  --sun:            #FFD740;

  /* Accessible text colours, off by default. The brand teal on cream, cream on
     orange and cream on purple all fail contrast for body copy, and the client
     has not signed off on changing them. body.mgh-a11y (or ?a11y=1) swaps
     these in for review. */
  --teal-text-brand:  #7CC8C4;
  --teal-text-a11y:   #337A76;
  --story-text-brand: #135397;
  --story-text-a11y:  #0D3A6B;
  --on-orange-brand:  #FBF5EE;
  --on-orange-a11y:   #3B2244;
  --on-purple-brand:  #F7ECE0;
  --on-purple-a11y:   #3B2244;

  --teal-text:  var(--teal-text-brand);
  --story-text: var(--story-text-brand);
  --on-orange:  var(--on-orange-brand);
  --on-purple:  var(--on-purple-brand);

  /* Type scale. Mockup type is poster sized; these are the web sizes. */
  --step--2: 0.8125rem;
  --step--1: 0.9375rem;
  --step-0 : 1rem;
  --step-1 : 1.125rem;
  --step-2 : 1.25rem;
  --step-3 : 2.25rem;

  --lh-tight: 1.25;
  --lh-body : 1.55;
  --measure : 65ch;
  --page    : 1200px;
  --gutter  : 24px;

  /* Height of the collapsed sticky header. Anchor targets clear this much. */
  --header-h: 68px;

  --font-body: Verdana, Geneva, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
}

@media (max-width: 768px) {
  :root {
    --step--2: .75rem;  --step--1: .875rem;  --step-0: 1.125rem;
    --step-1 : 1rem;    --step-2 : 1.0625rem; --step-3: 1.625rem;
    --lh-body: 1.6;
    --gutter : 18px;
    --header-h: 60px;
  }
}

/* Opt-in accessible text colours */
.mgh-a11y {
  --teal-text:  var(--teal-text-a11y);
  --story-text: var(--story-text-a11y);
  --on-orange:  var(--on-orange-a11y);
  --on-purple:  var(--on-purple-a11y);
}

/* Page frame */
.mgh * { box-sizing: border-box; }

/* Divi colours headings and boxes blockquotes. Undo that inside the page. */
.mgh :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.mgh blockquote {
  border: 0; padding: 0; margin: 0;
  background: none; font-style: normal;
}

/* The ribbons and the arch run past the page edge on purpose. Clip at the
   root so they never cause a horizontal scrollbar. */
html { overflow-x: clip; }

.mgh {
  margin: 0;
  background: var(--cream);
  color: var(--teal-text);
  font-family: var(--font-body);
  font-size: var(--step-2);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps this at zero specificity so single-class image rules below
   can override it. */
.mgh :where(img) { max-width: 100%; height: auto; display: block; }

.mgh-container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anchor targets sit clear of the sticky header. The fallback covers direct
   /#hash loads that fire before home.js has measured. */
.mgh-section { position: relative; scroll-margin-top: var(--header-h, 96px); }

/* The collage pulls up over the tracker photo, so this anchor needs extra
   clearance. */
.mgh #sign-up {
  scroll-margin-top: calc(var(--header-h, 96px) + min(110px, 9.2vw) + 8px);
}

/* Visually hidden, still read by screen readers */
.mgh-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.mgh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue-dark); color: #fff;
  padding: 12px 20px; font-size: var(--step-0);
}
.mgh-skip:focus { left: 8px; top: 8px; }

/* Focus ring. The mockup draws none. */
.mgh :is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Wave dividers. SVG paths from inc/waves.php, stretched to any width;
   height scales with width like the mockup would. */
.mgh-wave {
  position: absolute;
  left: 0; width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 3;
}
.mgh-wave svg { display: block; width: 100%; height: auto; }

/* Overlap by half a percent so no hairline shows at the seam. */
.mgh-wave--top    { top: 0;    transform: translateY(-99.5%); }
.mgh-wave--bottom { bottom: 0; transform: translateY(99.5%); }

.mgh-wave--in-top    { top: -1px; }
.mgh-wave--in-bottom { bottom: -1px; }

/* Header and hero. The header is sticky because the page is about 9,500px
   tall. home.js sets --collapse (0 to 1) from scroll position and the brand
   block shrinks with it; with no JS the full header just stays. */
.mgh-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  padding-block: 10px;
  transition: box-shadow .28s ease;
}
.mgh-header__inner { position: relative; }

.mgh-header.is-scroll-linked .mgh-header__brand {
  height: calc(var(--brand-full, 280px) * (1 - var(--collapse, 0)));
  overflow: hidden;
  opacity: calc(1 - var(--collapse, 0) * 1.25);
}

.mgh-header.is-scroll-linked .mgh-header__brand > a {
  transform: scale(calc(1 - var(--collapse, 0) * .1));
  transform-origin: top center;
}

.mgh-header.is-compact { box-shadow: 0 2px 16px rgba(19, 83, 151, .11); }

/* Grows by the height the brand gives up, so the page never changes length
   and anchor jumps stay exact. */
.mgh-header__spacer { height: 0; }
.mgh-header.is-scroll-linked + .mgh-header__spacer {
  height: calc((var(--brand-full, 0px) + 16px) * var(--collapse, 0));
}
.mgh-header.is-scroll-linked .mgh-social-cloud {
  opacity: calc(1 - var(--collapse, 0) * 1.35);
  transform: scale(calc(1 - var(--collapse, 0) * .3));
  transition: none;
}
.mgh-header.is-compact .mgh-social-cloud { pointer-events: none; }

.mgh-header.is-compact .mgh-header__brand a { visibility: hidden; }

/* Logged-in admin bar: 32px, 46px under 782px, and it scrolls away under
   600px. */
body.admin-bar .mgh-header { top: 32px; }
body.admin-bar .mgh-section { scroll-margin-top: calc(var(--header-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .mgh-header { top: 46px; }
  body.admin-bar .mgh-section { scroll-margin-top: calc(var(--header-h) + 46px); }
}

@media screen and (max-width: 600px) {
  body.admin-bar .mgh-header { top: 0; }
  body.admin-bar .mgh-section { scroll-margin-top: var(--header-h); }
}

@media (prefers-reduced-motion: reduce) {
  .mgh-header,
  .mgh-header__brand,
  .mgh-social-cloud { transition: none; }
}

.mgh-social-cloud {
  position: absolute; right: 0; top: 0;
  width: 172px; aspect-ratio: 1.68;
  display: grid; place-items: center;
  transform-origin: top right;
  transition: opacity .22s ease, transform .28s ease;
}
.mgh-social-cloud__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.mgh-social-cloud__links {
  position: relative; z-index: 1;
  display: flex; gap: 4px; align-items: center;
  transform: translate(5px, 2px);
}

/* 44px tap target around the icon */
.mgh-social-cloud a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--white);
}
.mgh-social-cloud svg { width: 24px; height: 24px; fill: currentColor; }

/* A little smaller than the mockup's 386pt so the hero photo gets the height
   back. */
.mgh-logo { display: block; width: min(310px, 52vw); margin: 14px auto 0; }
.mgh-logo img { width: 100%; }

.mgh-nav { margin-top: 16px; }

/* Mockup gaps are 43 to 52pt and uneven; one flex gap is close enough. */
.mgh-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 44px;
}
.mgh-nav a {
  display: block; padding: 6px 2px;
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--teal-text);
  text-decoration: none;
  transition: color .15s ease;
}

/* Hover and current-item states are not in the mockup. The current section's
   item goes bold teal; the data-label pseudo-element reserves the bold width
   so the row does not shift as the scroll-spy moves. */
.mgh-nav a:hover { color: var(--blue-dark); }

.mgh-nav a[aria-current="true"] { font-weight: 700; }

.mgh-nav a { display: inline-block; text-align: center; }
.mgh-nav a::after {
  content: attr(data-label);
  display: block; height: 0; overflow: hidden; visibility: hidden;
  font-weight: 700;
}

.mgh-nav__toggle { display: none; }

.mgh-hero { position: relative; margin-top: 20px; }

/* Both photo bands are 3:2 like the mockup, uncapped on desktop. */
.mgh-hero__slides,
.mgh-tracker__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Desktop only: the tracker band keeps its natural 3:2 up to a ceiling for
   very wide screens. Below 769px the natural height is already small. */
@media (min-width: 769px) {
  .mgh-tracker__slides {
    max-height: 1000px;
    min-height: 200px;
  }
}

/* Subjects sit low in these frames */
.mgh-hero__slides img { object-position: center 60%; }
.mgh-hero__slides img,
.mgh-tracker__slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.mgh-hero__slides img.is-active,
.mgh-tracker__slides img.is-active { opacity: 1; }

/* Thin cream lines echoing each mask edge. Same left and width as .mgh-wave,
   otherwise the two stretch by different amounts and drift apart. Offsets
   are 1.25% and 1.5% of width in the mockup. */
.mgh-hero__accent { position: absolute; left: 0; width: 100%; z-index: 4; pointer-events: none; }
.mgh-hero__accent svg { display: block; width: 100%; height: auto; }
.mgh-hero__accent path { fill: none; stroke: var(--cream); stroke-width: 5; }

.mgh-hero__accent--top    { top: 1.25vw; }
.mgh-hero__accent--bottom { bottom: 1.5vw; }

/* What is Miss Good Habits */
.mgh-s2 { padding-block: clamp(56px, 8vw, 100px) 0; text-align: center; }

/* Heading artwork at the mockup's widths */
.mgh-headline-art { margin-inline: auto; display: block; }
.mgh-headline-art--what-is    { width: min(746px, 82vw); }
.mgh-headline-art--method     { width: min(707px, 80vw); }
.mgh-headline-art--our-story  { width: min(663px, 62vw); }
.mgh-headline-art--whats-next { width: min(723px, 84vw); }
.mgh-headline-art--instagram  { width: min(752px, 86vw); }
.mgh-headline-art--saying     { width: min(663px, 82vw); }

.mgh-prose {
  max-width: 62ch;
  margin: clamp(28px, 4vw, 48px) auto 0;
  text-align: center;
  color: var(--teal-text);
}
.mgh-prose p + p { margin-top: 1.2em; }

/* Rainbow ribbons. Each SVG tile is five whole waves cut crest to crest, so
   four tiles in a 362% track repeat without a kink; moving the track by 25%
   is exactly one tile, which is what makes the loop seamless at any width. */
.mgh-flow { position: relative; width: 100%; overflow: hidden; line-height: 0; }

.mgh-flow__track {
  display: flex;
  width: 362%;
  will-change: transform;
}

.mgh-flow__track img {
  flex: 0 0 auto;
  width: 25%;
  max-width: none;
  height: auto;
  display: block;
}

@keyframes mgh-flow-right {
  from { transform: translate3d(-25%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Clearances as a share of the mockup's 1200pt width, capped for wide
   screens. */
.mgh-flow--above-tagline { margin-top: clamp(44px, 9.5vw, 114px); }
.mgh-flow--below-tagline { margin-top: clamp(22px, 3.9vw, 47px); }

.mgh-flow-pair { margin-top: clamp(30px, 5vw, 60px); }
.mgh-flow-pair .mgh-flow + .mgh-flow { margin-top: clamp(24px, 5vw, 60px); }

/* Ribbons drift to the right while hovered. The animation is paused rather
   than stopped so it resumes where it left off. Gated so touch devices
   cannot get stuck in a hover state. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mgh-flow__track {
    animation: mgh-flow-right 10s linear infinite;
    animation-play-state: paused;
  }
  .mgh-flow:hover .mgh-flow__track { animation-play-state: running; }
  .mgh-flow--b .mgh-flow__track { animation-duration: 13s; }
}

/* The three claims are artwork (the display font was never supplied); the
   words sit in .mgh-vh for assistive tech. --claim-h drives the art, the
   separator bars and the wrap together. At 1200px it resolves to 44px, the
   mockup's size. */
.mgh-tagline {
  --claim-h: min(44px, 3.8vw);
  --claim-gap: calc(var(--claim-h) * .75);
  margin: clamp(22px, 4vw, 48px) auto;
  color: var(--blue-dark);
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--claim-gap);
}
.mgh-tagline li { display: flex; align-items: center; gap: var(--claim-gap); }

.mgh-tagline__art { height: var(--claim-h); width: auto; display: block; }

/* Separator bar, full band height. The mockup's spacing around the bars is
   uneven; normalised here. */
.mgh-tagline li:not(:last-child)::after {
  content: ""; display: block;
  width: max(3px, calc(var(--claim-h) * 7 / 73));
  height: var(--claim-h);
  background: currentColor;
}

/* Habit tracker photo, free printable collage and sign-up band */
.mgh-s3 { position: relative; margin-top: clamp(40px, 6vw, 88px); }

.mgh-tracker { position: relative; }

/* Tracker frames are pre-cropped to 3:2 */
.mgh-tracker__slides img { object-position: center center; }

/* Printable pages plus the zigzag banner, pulled up over the photo as in the
   mockup. Sizes run about 7% over the mockup's at the client's request. */
.mgh-collage {
  position: relative;
  max-width: var(--page);
  margin: max(-110px, -9.2vw) auto 0;
  padding-inline: var(--gutter);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.mgh-collage__pages {
  width: 41%;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.10));
}
.mgh-collage__banner {
  position: relative;
  width: 56%;
  flex: 0 0 auto;
  margin-left: -4%;
}

/* Banner stretched about 20% taller than drawn so the lettering clears the
   zigzag points. */
.mgh-collage__banner svg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 604.1 / 429;
}

/* Padding keeps the lettering between the notch line and the valley line.
   !important because Divi zeroes padding-bottom on last-child paragraphs. */
.mgh-collage__banner-text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  padding: 17% 13.75% 18.5% !important;
}
.mgh-collage__banner-text img { width: 100%; height: auto; display: block; }

/* Lavender band. The negative margin tucks it behind the collage; padding-
   top clears the collage again. */
.mgh-signup {
  position: relative;
  background: var(--lavender);
  padding-top: calc(4% + clamp(16px, 2.4vh, 26px));
  padding-bottom: clamp(20px, 3vh, 40px);
  margin-top: -4%;
  text-align: center;
}

/* 27ch keeps the mockup's line break after Good */
.mgh-signup h2 {
  margin: 0 auto;
  max-width: 27ch;
  font-size: var(--step-3);
  line-height: 1.2;
  font-weight: 400;
  color: var(--blue-dark);
}

.mgh-signup__body {
  max-width: 62ch; margin: .7em auto 0;
  color: var(--blue-dark);
}

.mgh-form { margin-top: clamp(16px, 2.4vh, 26px); }
.mgh-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1080px; margin-inline: auto;
}
.mgh-field { position: relative; text-align: left; }

/* Labels sit inside the field and hide once there is a value */
.mgh-field label {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-size: var(--step--2);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-dark);
  pointer-events: none;
  transition: opacity .15s ease;
}

/* 16px minimum stops iOS zooming the page on focus */
.mgh-field input {
  width: 100%; height: 64px;
  padding: 0 18px;
  font: inherit; font-size: 16px;
  color: var(--blue-dark);
  background: var(--white);
  border: 0; border-radius: 0;
}
.mgh-field input:focus + label,
.mgh-field input:not(:placeholder-shown) + label { opacity: 0; }

/* Pill button. Drawn as a 34pt radius plus a 2pt straight; 35px reads the
   same. */
.mgh-btn {
  display: inline-block;
  margin-top: clamp(14px, 2vh, 22px);
  padding: 16px 46px;
  min-height: 48px;
  font: inherit; font-size: var(--step-1);
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue-dark);
  border: 0; border-radius: 35px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.mgh-btn:hover { background: #0e4177; }
.mgh-btn:active { transform: translateY(1px); }

.mgh-legal {
  max-width: 95ch; margin: clamp(10px, 1.5vh, 16px) auto 0;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--blue-dark);
}
.mgh-legal a { color: inherit; }

/* Method */
.mgh-s4 {
  background: var(--cream);
  padding-block: clamp(60px, 9vw, 120px) clamp(70px, 10vw, 130px);
  text-align: center;
}

/* Our Story */
.mgh-s5 {
  position: relative;
  background: var(--blue-story);
  padding-block: clamp(60px, 9vw, 110px) clamp(60px, 9vw, 110px);
  text-align: center;
}
.mgh-s5 .mgh-prose { color: var(--story-text); max-width: 58ch; }

.mgh-bios {
  position: relative;
  margin-top: clamp(50px, 7vw, 96px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: end;
}

/* The arch artwork bleeds 223pt left and 53pt right of the page in the
   mockup. Placed to match; above 1280px it is sized from the viewport so it
   still runs off both edges. */
.mgh-bios__arch {
  position: absolute;
  left: -18.6%;
  top: 0;
  width: 123%;
  max-width: none;
  transform: translateY(-19.5%);
  z-index: 0; pointer-events: none;
}

@media (min-width: 1280px) {
  .mgh-bios__arch {
    left: 50%;
    width: calc(112vw + 60px);
    transform: translate(-54.1%, -19.5%);
  }
}

/* The ovals are 483 and 484pt wide on the 1200pt page, not full half
   columns. The 15pt channel between them is transparent margin baked into
   the images, so the grid gap stays 0. */
.mgh-bio { position: relative; z-index: 1; }
.mgh-bio--sara   { width: 83.89%; justify-self: end; }
.mgh-bio--meghan { width: 84.11%; justify-self: start; }
.mgh-bio img { width: 100%; }
.mgh-bio figcaption { margin-top: 14px; }

/* Name wordmarks run a little smaller than the mockup. Raise the caps if the
   client wants the drawn size. */
.mgh-bio figcaption img { width: min(347px, 54.7%); margin-inline: auto; }
.mgh-bio--sara figcaption img { width: min(193px, 31%); }

/* What's Next and Instagram. Bottom padding leaves the mockup's cream gap
   between the Instagram row and the orange wave. */
.mgh-s6 {
  background: var(--cream);
  padding-block: clamp(60px, 9vw, 110px) clamp(90px, 12.8vw, 320px);
  text-align: center;
}

/* The mockup leaves a large empty band under the What's Next copy, probably
   for a products row. Kept, at reduced height, until the client decides. */
.mgh-reserved { height: clamp(120px, 22vw, 300px); }

/* Four 327pt squares with 31pt gutters total 1401pt, wider than the page, so
   the outer tiles crop at the edges as drawn. */
.mgh-ig-grid {
  margin-top: clamp(26px, 3vw, 38px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 31px;
  width: 116.75%;
  margin-inline: -8.375%;
}
.mgh-ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Testimonials and footer */
.mgh-s7 { position: relative; background: var(--orange); padding-block: clamp(50px, 7vw, 90px) clamp(30px, 4vw, 50px); }
.mgh-s7 .mgh-headline-art { margin-bottom: clamp(30px, 4vw, 46px); }

.mgh-quotes { position: relative; overflow: hidden; }
.mgh-quotes__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(50% - 12px);
  gap: 24px;
  transition: transform .45s ease;
}
.mgh-quote { color: var(--on-orange); font-size: var(--step-1); line-height: 1.6; }
.mgh-quote blockquote { margin: 0; }
.mgh-quote figcaption { margin-top: 2em; text-align: right; }

.mgh-carousel-ctl {
  display: flex; justify-content: center; gap: 18px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* 48px hit area; the mockup's arrows are 17pt of ink */
.mgh-carousel-ctl button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--on-orange);
  font: inherit; font-size: var(--step-1);
  border-radius: 50%;
}
.mgh-carousel-ctl button:hover { background: rgba(255,255,255,.22); }

.mgh-footer {
  position: relative;
  background: var(--purple);
  color: var(--on-purple);
  padding-block: clamp(70px, 9vw, 110px) clamp(30px, 4vw, 44px);
}
.mgh-footer__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
}
.mgh-footer__cloud { position: relative; width: 170px; margin-bottom: 18px; }
.mgh-footer__cloud img { width: 100%; }
.mgh-footer__cloud .mgh-social-cloud__links {
  position: absolute; inset: 0;
  justify-content: center; align-items: center;
  transform: translate(3px, 2px);
}
.mgh-footer nav ul { list-style: none; margin: 0; padding: 0; }
.mgh-footer nav a {
  display: inline-block; padding: 5px 0;
  font-size: var(--step-1); text-transform: uppercase;
  color: inherit; text-decoration: none;
}
.mgh-footer nav a:hover { text-decoration: underline; }
.mgh-footer__copy { margin-top: 28px; font-size: var(--step--2); }

.mgh-footer h2 { margin: 0; font-size: var(--step-2); text-transform: uppercase; font-weight: 400; }
.mgh-footer__sub,
.mgh-footer__fine { font-size: var(--step--1); line-height: 1.55; max-width: 46ch; }
.mgh-footer__sub { margin-top: 10px; }
.mgh-footer__fine { margin-top: 14px; }
.mgh-footer__fine a { color: inherit; }

.mgh-footer__form { margin-top: 18px; display: flex; align-items: center; gap: 20px; }
.mgh-footer__form .mgh-field { flex: 1 1 292px; max-width: 292px; }
.mgh-footer__form input { height: 57px; }
.mgh-footer__signup {
  position: relative; flex: 0 0 auto;
  width: 167px; height: 106px;
  background: 0; border: 0; cursor: pointer; padding: 0;
  color: var(--cream-full); font: inherit; font-size: var(--step-1);
  text-transform: uppercase;
}
.mgh-footer__signup img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mgh-footer__signup span { position: relative; z-index: 1; display: block; padding-top: 22%; }

/* Shared bits. Art headings carry the real words in .mgh-vh and the artwork
   as a decorative image. */
.mgh-art-heading { margin: 0; font-weight: 400; }

/* The social accounts do not exist yet, so these are marks rather than
   links. Swap the span for an anchor when the URLs arrive. */
.mgh-social-cloud__pending {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--white);
}

.mgh-social-cloud__pending svg { width: 34px; height: 34px; fill: currentColor; }

.mgh-social-cloud__pending {
  cursor: pointer;
  border-radius: 50%;
  transition: transform .18s ease, background-color .18s ease;
}
.mgh-social-cloud__pending:hover {
  background: rgba(255, 255, 255, .22);
  transform: scale(1.15);
}

/* Hover: the icon gets a halo and the cloud tilts toward it, left for
   Facebook and right for Instagram. Browsers without :has() get the halo
   only. */
.mgh-social-cloud__bg,
.mgh-footer__cloud > img {
  transform-origin: 50% 62%;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.mgh-social-cloud:has(.mgh-social-cloud__links :first-child:hover) .mgh-social-cloud__bg,
.mgh-footer__cloud:has(.mgh-social-cloud__links :first-child:hover) > img {
  animation: mgh-cloud-jiggle-l .45s ease;
  transform: translateY(-4px) rotate(-5deg);
}

.mgh-social-cloud:has(.mgh-social-cloud__links :last-child:hover) .mgh-social-cloud__bg,
.mgh-footer__cloud:has(.mgh-social-cloud__links :last-child:hover) > img {
  animation: mgh-cloud-jiggle-r .45s ease;
  transform: translateY(-4px) rotate(5deg);
}
@keyframes mgh-cloud-jiggle-l {
  0%   { transform: translateY(0)    rotate(0); }
  35%  { transform: translateY(-8px) rotate(-8deg); }
  65%  { transform: translateY(-2px) rotate(-3deg); }
  100% { transform: translateY(-4px) rotate(-5deg); }
}
@keyframes mgh-cloud-jiggle-r {
  0%   { transform: translateY(0)    rotate(0); }
  35%  { transform: translateY(-8px) rotate(8deg); }
  65%  { transform: translateY(-2px) rotate(3deg); }
  100% { transform: translateY(-4px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mgh-social-cloud__bg,
  .mgh-footer__cloud > img,
  .mgh-social-cloud__pending { animation: none !important; transition: none; }
  .mgh-social-cloud:has(.mgh-social-cloud__links :hover) .mgh-social-cloud__bg,
  .mgh-footer__cloud:has(.mgh-social-cloud__links :hover) > img { transform: none; }
}

/* Shown when a form is submitted before an email provider is connected */
.mgh-form__note {
  margin: 18px auto 0; max-width: 46ch;
  font-size: var(--step--1); line-height: 1.5;
  color: var(--blue-dark);
}
.mgh-footer .mgh-form__note { color: var(--on-purple); flex: 1 0 100%; }

/* Responsive. There are no mobile comps; this follows the responsive plan
   agreed for the build. Stack the collage, tagline, quotes and footer. */
@media (max-width: 900px) {
  .mgh-collage { flex-direction: column; gap: 18px; margin-top: -8%; }
  .mgh-collage__banner { width: 94%; margin-left: 0; }
  .mgh-collage__pages { width: 62%; margin-inline: auto; }
  .mgh-footer__grid { grid-template-columns: 1fr; }
  .mgh-quotes__track { grid-auto-columns: 100%; }
  .mgh-tagline {
    --claim-h: min(44px, calc((100vw - 2 * var(--gutter)) / 7.8));
    flex-direction: column;
    gap: clamp(10px, 2.4vw, 16px);
  }
  .mgh-tagline li:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
  /* Phones: 2 x 2 Instagram grid, stacked bios with the arch hidden, single-
     column forms. */
  .mgh-nav__toggle {
    display: block; margin: 16px auto 0;
    background: 0; border: 0; cursor: pointer;
    color: var(--teal-text); font: inherit; font-size: var(--step-0);
    text-transform: uppercase; padding: 10px 16px; min-height: 44px;
  }
  .mgh-nav ul { display: none; flex-direction: column; gap: 0; padding-block: 8px; }
  .mgh-nav[data-open="true"] ul { display: flex; }
  .mgh-nav a { padding: 12px 0; min-height: 44px; }
  .mgh-social-cloud { width: 128px; }
  .mgh-social-cloud__pending svg { width: 26px; height: 26px; }
  .mgh-logo { margin-top: 8px; width: min(300px, 66vw); }
  .mgh-ig-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; margin-inline: 0; }
  .mgh-bios { grid-template-columns: 1fr; gap: 34px; }
  .mgh-bio--sara,
  .mgh-bio--meghan { width: 100%; justify-self: center; }
  .mgh .mgh-bios__arch { display: none; }
  .mgh-bio figcaption img { width: min(240px, 52%); }
  .mgh-form__row { grid-template-columns: 1fr; gap: 14px; }
  .mgh-footer__form { flex-wrap: wrap; }
}

/* Divi Builder compatibility. The mgh-* classes are set on sections, rows
   and modules in the Builder; the rules below strip Divi's own spacing and
   chrome so the section styles above apply. Row widths come from the Builder
   settings, not from here. */
body.mgh #page-container { overflow: visible; }

/* Divi paints sections white with 4% padding; the section classes set their
   own. */
.mgh .et_pb_section { padding: 0; background-color: transparent; }

.mgh .et_pb_section.mgh-header { background: var(--cream); }
.mgh .et_pb_section.mgh-s4,
.mgh .et_pb_section.mgh-s6 { background: var(--cream); }

/* Colour goes on the section: .mgh .et_pb_text inherits colour, which beats
   the older single-class prose rules. */
.mgh .et_pb_section.mgh-s5 { background: var(--blue-story); color: var(--story-text); }
.mgh .et_pb_section.mgh-s7 { background: var(--orange); color: var(--on-orange); }
.mgh .et_pb_section.mgh-footer { background: var(--purple); color: var(--on-purple); }
.mgh .et_pb_section.mgh-s2 { padding-block: clamp(56px, 8vw, 100px) 0; }
.mgh .et_pb_section.mgh-s4 { padding-block: clamp(60px, 9vw, 120px) clamp(70px, 10vw, 130px); }
.mgh .et_pb_section.mgh-s5 { padding-block: clamp(60px, 9vw, 110px) clamp(60px, 9vw, 110px); }

/* !important: Divi's sticky-section script stamps padding-bottom: 0 on this
   section because the Instagram row is its last module. */
.mgh .et_pb_section.mgh-s6 {
  padding-top: clamp(60px, 9vw, 110px);
  padding-bottom: clamp(90px, 12.8vw, 320px) !important;
}
.mgh .et_pb_section.mgh-s7 { padding-block: clamp(50px, 7vw, 90px) clamp(30px, 4vw, 50px); }
.mgh .et_pb_section.mgh-footer { padding-block: clamp(70px, 9vw, 110px) clamp(30px, 4vw, 44px); }
.mgh .et_pb_section.mgh-header { padding-block: 10px 0; }
.mgh .et_pb_section.mgh-header.is-compact { padding-block: 11px; }
.mgh .et_pb_row { padding: 0; }
.mgh .et_pb_row.mgh-container { padding-inline: var(--gutter); }

/* Full-bleed lavender band. The mockup shows no cream between the tracker
   photo and the band, so the negative margin swallows the collage row and
   padding-top clears it again. !important because Divi's per-row CSS
   outranks class selectors. */
.mgh .et_pb_row.mgh-signup {
  margin-top: max(-320px, -28.5vw) !important;
  padding-top: min(350px, 31.5vw) !important;
  padding-bottom: clamp(20px, 3vh, 40px) !important;
}

/* Divi stamps left alignment on text modules */
.mgh .et_pb_row.mgh-signup .et_pb_text { text-align: center; }
@media (max-width: 900px) {
  /* Same pull-up for the stacked collage on small screens */
  .mgh .et_pb_row.mgh-signup {
    margin-top: calc(58px - 94.5vw) !important;
    padding-top: calc(94.5vw - 36px) !important;
  }
}
.mgh .et_pb_column { margin-bottom: 0; }

/* !important: Divi's late-loading CSS re-adds module margins, 40px under
   sliders. */
.mgh .et_pb_module { margin-bottom: 0 !important; }

/* Waves and other absolute artwork must position against their section. Divi
   makes code wrappers, columns and rows position:relative, which would
   strand them inside the row. Only the two rows that host their own artwork
   stay relative. */
.mgh .et_pb_code,
.mgh .et_pb_code_inner,
.mgh .et_pb_column,
.mgh .et_pb_row { position: static; }
.mgh .et_pb_row.mgh-signup,
.mgh .et_pb_row.mgh-header__inner { position: relative; }

/* Text modules are invisible wrappers; type comes from the page scope. */
.mgh .et_pb_text {
  color: inherit; font-family: inherit; font-size: inherit;
  line-height: inherit; word-wrap: normal;
}
.mgh .et_pb_text > :first-child { margin-top: 0; }

/* Body copy is centred in the mockup. Divi's inline
   .et_pb_module.et_pb_text_align_left rule outranks the single-class .mgh-
   prose rule above, so this compound selector re-asserts it. Testimonial
   quotes stay left, as drawn. */
.mgh .et_pb_text.mgh-prose,
.mgh .et_pb_text.mgh-prose p { text-align: center; }

/* Grid rows: our class sets the grid; Divi's column floats must not fight
   it. */
.mgh-footer__grid.et_pb_row,
.mgh-ig-grid.et_pb_row { display: grid; }

/* !important: Divi's per-row CSS pins the width, and the strip has to bleed
   off-page. */
.mgh .et_pb_row.mgh-ig-grid {
  width: 116.75% !important;
  max-width: none !important;
  margin-inline: -8.375% !important;
}
@media (max-width: 768px) {
  .mgh .et_pb_row.mgh-ig-grid { width: 100% !important; margin-inline: 0 !important; }
}
.mgh-footer__grid .et_pb_column,
.mgh-ig-grid .et_pb_column { width: 100%; margin: 0; float: none; }
.mgh-ig-grid .et_pb_image { width: 100%; }
.mgh-ig-grid .et_pb_image .et_pb_image_wrap,
.mgh-ig-grid .et_pb_image img { width: 100%; }

/* The logo image module doubles as the collapsing brand block; home.js
   measures the inner link. */
.mgh-header__brand.et_pb_image { display: block; }

/* !important: Divi left-aligns image modules with per-module CSS. */
.mgh .et_pb_image.mgh-logo {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mgh-header__brand > a,
.mgh-header__brand > span { display: block; min-height: 0; }
.mgh-header__brand .et_pb_image_wrap { display: block; }
.mgh-header__brand img { width: 100%; }

/* Menu module styled as the mockup's single-line nav. The margin eases with
   the collapse so the row settles smoothly. */
.mgh .et_pb_menu.mgh-nav {
  background: transparent;
  margin-top: calc(16px * (1 - var(--collapse, 0)));
}
.mgh .et_pb_menu.mgh-nav .et_pb_menu__wrap { justify-content: center; }
.mgh .et_pb_menu.mgh-nav .et_pb_menu__logo-wrap,
.mgh .et_pb_menu.mgh-nav .et_pb_menu__icons { display: none; }
.mgh .et_pb_menu.mgh-nav .et-menu { padding: 0; }
.mgh .et_pb_menu.mgh-nav .et-menu li { padding: 0; margin: 0; }
.mgh .et_pb_menu.mgh-nav .et-menu li a {
  padding: 6px 0;
  font-size: var(--step-0);
  font-weight: 400;
}
.mgh .et_pb_menu.mgh-nav .et-menu li a[aria-current="true"] { font-weight: 700; }

/* Divi renders the mobile nav at every width and hides it per breakpoint. */
.mgh .et_pb_menu.mgh-nav .et_mobile_nav_menu,
.mgh .et_pb_menu.mgh-nav .et_mobile_menu { display: none; }
@media (max-width: 980px) {
  .mgh .et_pb_menu.mgh-nav .et_mobile_nav_menu { float: none; display: flex; justify-content: center; }
}
.mgh .et_pb_menu.mgh-nav .mobile_menu_bar::before { color: var(--teal-text); }
.mgh .et_pb_menu.mgh-nav .et_mobile_menu {
  border-color: var(--teal);
  background: var(--cream);
}
.mgh .et_pb_menu.mgh-nav .et_mobile_menu li a {
  color: var(--teal-text);
  border-color: rgba(124, 200, 196, .25);
}

/* Photo sliders: background slides, no chrome. !important because Divi's
   slider script inline-styles heights from the empty slide content. */
.mgh .et_pb_slider.mgh-hero__slides,
.mgh .et_pb_slider.mgh-tracker__slides { position: relative; overflow: hidden; }

.mgh .et_pb_slider.mgh-hero__slides .et_pb_slides,
.mgh .et_pb_slider.mgh-tracker__slides .et_pb_slides { height: 100% !important; }
.mgh .et_pb_slider.mgh-hero__slides .et_pb_slide,
.mgh .et_pb_slider.mgh-tracker__slides .et_pb_slide {
  height: 100% !important; min-height: 0 !important; padding: 0;
  background-size: cover; background-position: center 60%;
}
.mgh .et_pb_slider.mgh-tracker__slides .et_pb_slide { background-position: center center; }
.mgh .et_pb_slider.mgh-hero__slides .et_pb_container,
.mgh .et_pb_slider.mgh-tracker__slides .et_pb_container { display: none; }

/* Testimonial slider: quotes in a 2-up grid, Divi's arrows restyled as the
   mockup's centred pair. */
.mgh .et_pb_slider.mgh-quotes-slider { overflow: visible; padding-bottom: 72px; }
.mgh .et_pb_slider.mgh-quotes-slider .et_pb_slide { background: transparent; padding: 0; }
.mgh .et_pb_slider.mgh-quotes-slider .et_pb_container { height: auto; }
.mgh .et_pb_slider.mgh-quotes-slider .et_pb_slide_description {
  padding: 0; text-align: inherit; text-shadow: none;
}
.mgh-quote-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  text-align: left;
}
.mgh .et_pb_slider.mgh-quotes-slider .et-pb-slider-arrows a {
  width: 48px; height: 48px;
  top: auto; bottom: 8px; margin-top: 0;
  display: grid; place-items: center;
  color: var(--on-orange); background: transparent;
  font-size: var(--step-1);
  border-radius: 50%;
  opacity: 1;
}
.mgh .et_pb_slider.mgh-quotes-slider .et-pb-slider-arrows a:hover { background: rgba(255,255,255,.22); }
.mgh .et_pb_slider.mgh-quotes-slider .et-pb-arrow-prev { left: calc(50% - 57px); }
.mgh .et_pb_slider.mgh-quotes-slider .et-pb-arrow-next { right: calc(50% - 57px); }

@media (max-width: 900px) {
  .mgh-quote-pair { grid-template-columns: 1fr; }
  .mgh-footer__grid.et_pb_row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mgh-hero__slides img,
  .mgh-tracker__slides img,
  .mgh-quotes__track { transition: none; }
}