/* ============================================================
   ORLÉ — HOMEPAGE (Figma redesign, file Obt0jHcZk1CmnBztogiaK9)
   Node 1879:5 · design canvas 1728px wide

   Scoped to `body.home-v3` so the shared `.hp-nav` / `.hp-hero`
   rules in style.css keep serving /about and /alternative.

   Layout sizes below are the Figma pixel value expressed as vw
   against the 1728px canvas (px / 1728 * 100), clamped so the
   layout stops growing past the design width and stays legible
   on small screens. Type does NOT follow the canvas 1:1 — it runs
   on the scale defined in the tokens below.
   ============================================================ */

.home-v3 {
  --hv-canvas: 1728;          /* reference only — Figma canvas width */
  --hv-maroon: var(--hp-maroon);
  --hv-blue:   var(--hp-blue);
  --hv-pink:   var(--hp-pink);
  --hv-glow:   1px 3px 8.9px #fff;   /* Figma text-shadow on hero copy */

  /* ---- Type scale -------------------------------------------------
     The Figma canvas is 1728 wide and its type is sized for that
     artboard (96px headlines, 24px body). Mapped 1:1 to the viewport
     that reads enormous in a browser, so the whole page runs on this
     scale instead: web-conventional sizes that hit their maximum at
     1440 and stop growing, with a readable floor on phones.
     The comment on each token is the Figma size it replaces. */
  --fs-xl:      clamp(2.25rem, 4.583vw, 4.125rem);   /* 128 -> 66 */
  --fs-display: clamp(1.75rem, 3.889vw, 3.5rem);     /* 96 -> 56 */
  --fs-h2:      clamp(1.5rem,  3.056vw, 2.75rem);    /* 90 -> 44 */
  --fs-h3:      clamp(1.25rem, 2.361vw, 2.125rem);   /* 64 -> 34 */
  --fs-lead:    clamp(1rem,    1.528vw, 1.375rem);   /* 40 -> 22 */
  --fs-lg:      clamp(0.95rem, 1.319vw, 1.1875rem);  /* 36 -> 19 */
  --fs-md:      clamp(0.9rem,  1.181vw, 1.0625rem);  /* 32 -> 17 */
  --fs-base:    clamp(0.9rem,  1.111vw, 1rem);       /* 24 -> 16 */
  --fs-sm:      clamp(0.8rem,  0.972vw, 0.875rem);   /* 16 -> 14 */
  --fs-xs:      clamp(0.72rem, 0.903vw, 0.8125rem);  /* 20 -> 13 */
}

/* ============================================================
   NAV BAR — Figma 1879:143
   Pill 1695×110 @ x16/y14, radius 115, fill #BED5EB
   ============================================================ */

.home-v3 .hp-nav {
  position: fixed;
  top: clamp(8px, 0.81vw, 14px);
  left: clamp(8px, 0.926vw, 16px);
  right: clamp(8px, 0.926vw, 16px);
  z-index: 900;
}

.home-v3 .hp-nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(0.9rem, 2.2vw, 38px);
  height: clamp(60px, 5.2vw, 78px);
  padding: 0 clamp(1rem, 2.604vw, 45px);
  border-radius: 115px;
  background: var(--hv-blue);
  box-shadow: none;
  transition: box-shadow 0.3s var(--ease);
}

.home-v3 .hp-nav.scrolled .hp-nav-inner {
  box-shadow: 0 6px 28px -10px rgba(38, 24, 52, 0.28);
}

/* ---- Left links (Cormorant; smaller than the design's 40px because
        the bar carries four items a side) ---- */
.home-v3 .hp-nav-left {
  justify-self: end;
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 26px);
  margin: 0;
  padding: 0;
}

.home-v3 .hp-nav-left a,
.home-v3 .hp-nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--hv-maroon);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}

.home-v3 .hp-nav-left a:hover,
.home-v3 .hp-nav-left a:focus-visible,
.home-v3 .hp-nav-menu-btn:hover,
.home-v3 .hp-nav-menu-btn:focus-visible { opacity: 0.6; }

/* ---- Services dropdown ---- */
.home-v3 .hp-nav-has-menu { position: relative; }

.home-v3 .hp-nav-caret {
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.home-v3 .hp-nav-has-menu.is-open .hp-nav-caret { transform: rotate(-135deg) translate(-0.12em, -0.12em); }

.home-v3 .hp-nav-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  z-index: 10;
  min-width: max-content;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border: 1px solid var(--hv-maroon);
  border-radius: 18px;
  background: var(--hv-pink);
  box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
              visibility 0s linear 0.18s;
}

/* Bridges the gap so the pointer can travel from the button to the panel */
.home-v3 .hp-nav-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9rem;
  height: 0.9rem;
}

/* Driven by .is-open alone. `:focus-within` on the item would fight
   Escape, which closes the panel and returns focus to the button —
   still inside the item. Tabbing through the links keeps it open via
   the focusout handler instead. */
.home-v3 .hp-nav-has-menu.is-open .hp-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .home-v3 .hp-nav-has-menu:hover .hp-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
}

.home-v3 .hp-nav-menu a {
  display: block;
  padding: 0.5rem 1.35rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--hv-maroon);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

.home-v3 .hp-nav-menu a:hover,
.home-v3 .hp-nav-menu a:focus-visible {
  background: rgba(100, 10, 34, 0.09);
  opacity: 1;
}

/* ---- Logo (Figma "Layer 1", 167×79.11 → ratio 2.111) ---- */
.home-v3 .hp-nav-logo {
  justify-self: center;
  display: flex;
  align-items: center;
  color: var(--hv-maroon);
}

.home-v3 .hp-nav-logo svg {
  display: block;
  width: clamp(88px, 7.6vw, 116px);
  height: auto;           /* viewBox 120.33×57.28 keeps the 2.1 ratio */
  color: inherit;
}

/* ---- Right links + CTA ---- */
.home-v3 .hp-nav-right {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.9rem, 2vw, 32px);
}

.home-v3 .hp-nav-right-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 24px);
  margin: 0;
  padding: 0;
}

/* Roboto 24 / uppercase / -1.2px tracking */
.home-v3 .hp-nav-right-links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--hv-maroon);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}

.home-v3 .hp-nav-right-links a:hover,
.home-v3 .hp-nav-right-links a:focus-visible { opacity: 0.6; }

/* Pill 272×49, fill #F5DEDF, 1px #640A22, shadow 4/4/4 rgba(0,0,0,.25) */
.home-v3 .hp-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(150px, 12vw, 190px);
  height: clamp(34px, 2.6vw, 40px);
  padding: 0 0.75rem;
  border: 1px solid var(--hv-maroon);
  border-radius: 115px;
  background: var(--hv-pink);
  color: #000;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.home-v3 .hp-nav-cta:hover,
.home-v3 .hp-nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.22);
}

/* ---- Hamburger (mobile only) ---- */
.home-v3 .hp-nav-hamburger {
  display: none;
  position: absolute;
  right: clamp(1rem, 2.604vw, 45px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.home-v3 .hp-nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--hv-maroon);
}

/* ============================================================
   HERO — Figma 1879:134
   Frame 1728×1021 sitting at page y=154 (below the nav band).
   Full-bleed photo bleeds up behind the nav pill.
   ============================================================ */

.home-v3 .hp-hero {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  --hero-pad-x: clamp(1.25rem, 5.903vw, 102px);

  /* ---- Composition knobs -------------------------------------------
     The copy is placed against the person in the photo: the headline
     and subheadline clear the top of her head, "YOU." lands at her
     shoulder. Three numbers control that, so it can be nudged without
     touching the rest of the rule.

     --hero-h      overall height of the photo band
     --hero-focus  background-position-y — slides the crop up or down,
                   which moves the person relative to the copy. Derived
                   from the Figma composition: the headline sits at
                   canvas y=176 and the subheadline at y=562 against a
                   photo running -196 to 2008, putting the top of her
                   head near 37% into the image.
     --hero-gap    open stretch of photo between the subheadline and
                   "YOU." — her head and shoulders occupy it. */
  --hero-h: clamp(620px, 90.8vw, 1307px);
  --hero-focus: 60%;
  --hero-gap: clamp(2.5rem, 38vw, 548px);

  min-height: var(--hero-h);
  padding: clamp(84px, 7vw, 112px) var(--hero-pad-x) clamp(1.5rem, 3.33vw, 48px);
  background-color: #e7e3dc;              /* shows until the photo paints */
  overflow: hidden;
  isolation: isolate;
}

/* The source is a landscape JPEG carrying an EXIF "rotate 90 CW" flag.
   Browsers honour that on an <img> but NOT on a CSS background, so the
   photo has to be an element or it lies on its side. */
.home-v3 .hp-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--hero-focus);
}

.home-v3 .hp-hero-inner {
  width: 100%;
  max-width: 1524px;                      /* Figma subheadline block width */
  margin: 0 auto;
  padding-top: clamp(10px, 1.273vw, 22px);
  text-align: center;
}

/* Cedarville Cursive 96 / lh 1.5 / -4.8px tracking */
.home-v3 .hp-hero-headline {
  margin: 0;
  font-family: var(--hp-cursive);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--hv-maroon);
  text-shadow: var(--hv-glow);
}

.home-v3 .hp-hero-headline span { display: block; }

/* Inter Medium 40 / uppercase / -2px tracking, 98px below the headline */
.home-v3 .hp-hero-sub {
  /* style.css caps every <p> at 600px — the Figma subheadline runs 1524 wide */
  max-width: none;
  margin: clamp(1rem, 4vw, 58px) auto 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--hv-maroon);
  text-shadow: var(--hv-glow);
}

/* Pill 664×103, fill #640A22, 4px #F5DEDF border, centred on the hero's
   bottom edge (Figma y 969 → 1072 against a 1021-tall frame). */
.home-v3 .hp-hero-cta {
  /* Last of the group: "YOU.", the ticker, then this button */
  margin-top: clamp(1.25rem, 3.33vw, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(260px, 26vw, 380px);
  height: clamp(50px, 3.9vw, 58px);
  padding: 0 1rem;
  border: clamp(2px, 0.231vw, 4px) solid var(--hv-pink);
  border-radius: 100px;
  background: var(--hv-maroon);
  color: var(--hv-pink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.home-v3 .hp-hero-cta:hover,
.home-v3 .hp-hero-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 6px 8px 12px rgba(0, 0, 0, 0.25);
}

/* "YOU." — Figma 1900:322 + 1911:396: Cormorant SemiBold Italic 128,
   maroon with a light-blue copy 8px to its right. */
.home-v3 .hp-hero-you {
  margin: var(--hero-gap) 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--hv-maroon);
  text-shadow: 0.0625em 0 0 var(--hv-blue);
}

/* The ticker sits on the photo inside the hero, full-bleed through
   the hero's own side padding. */
.home-v3 .hp-hero .hp-beta-ticker {
  width: calc(100% + 2 * var(--hero-pad-x));
  margin: clamp(1.25rem, 3.33vw, 48px) calc(-1 * var(--hero-pad-x)) 0;
  height: clamp(40px, 3.4vw, 56px);
}

.home-v3 .hp-beta-ticker-set li {
  font-size: var(--fs-sm);
  letter-spacing: -0.05em;
  color: #000;
}

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

/* The bar carries four links a side plus the CTA, so it runs out of
   room well before the rest of the page does and collapses earlier. */
@media (max-width: 1150px) {
  .home-v3 .hp-nav-inner {
    grid-template-columns: 1fr;
    height: 68px;
    padding: 0 1.25rem;
  }

  .home-v3 .hp-nav-left,
  .home-v3 .hp-nav-right { display: none; }

  .home-v3 .hp-nav-logo { justify-self: center; }
  .home-v3 .hp-nav-logo svg { width: 104px; }

  .home-v3 .hp-nav-hamburger { display: flex; }
}

/* ---- Mobile menu: the same tree, sub-items always shown ---- */
.home-v3 .mobile-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.15rem 0 0.35rem;
  /* one continuous rail rather than a tick beside each item */
  border-left: 1px solid rgba(100, 10, 34, 0.3);
}

.home-v3 .mobile-menu .mobile-link--sub {
  padding-left: 1.1rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-transform: none;
  color: var(--hp-maroon);
  opacity: 0.85;
}

@media (max-width: 960px) {
  .home-v3 .hp-hero {
    --hero-pad-x: 1.5rem;
    --hero-h: 0;
    --hero-gap: clamp(3rem, 40vw, 190px);
    padding: 104px var(--hero-pad-x) 2.5rem;
  }

  .home-v3 .hp-hero-cta { margin-top: 2rem; }
  .home-v3 .hp-hero .hp-beta-ticker { margin-top: 2rem; height: 42px; }

  .home-v3 .hp-hero-sub { margin-top: 1.5rem; }

  .home-v3 .hp-hero-cta {
    width: min(86%, 340px);
    height: 54px;
    border-width: 3px;
  }
}

@media (max-width: 600px) {
  .home-v3 .hp-hero { padding-top: 92px; }
  .home-v3 .hp-hero-cta { height: 50px; }
  .home-v3 .hp-hero .hp-beta-ticker { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v3 .hp-nav-cta,
  .home-v3 .hp-hero-cta,
  .home-v3 .hp-nav-inner { transition: none; }
}


/* ============================================================
   PRE-GRIEVING — Figma 1930:11 ("Group 36")
   Centre media 753×1339 with six phrases scattered around it.
   Here the stage is pinned and the phrases are revealed one at a
   time as you scroll, so only a single sentence is ever on screen.
   Figma coordinates are kept: each phrase sits at its designed
   x (% of the 1728 canvas) and y (fraction of the 1339 media).
   ============================================================ */

.home-v3 .hp-grieving {
  --gm-steps: 7;
  --gm-step: 28svh;               /* scroll distance per phrase */
  --gm-h: min(74svh, 108vw);      /* centre media height */
  position: relative;
  background: var(--hp-cream);
  color: #000;
}

/* Tall scroller: one screen for the pinned stage + one step per phrase */
.home-v3 .hp-grieving-scroll {
  height: calc(100svh + var(--gm-steps) * var(--gm-step));
}

/* Cut down to the stage once the sequence has run; see the collapse()
   comment in the page script. */
.home-v3 .hp-grieving.is-collapsed .hp-grieving-stage {
  position: static;
}

.home-v3 .hp-grieving-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---- Centre media (GIF) — Figma 753×1339 ---- */
.home-v3 .hp-grieving-media {
  height: var(--gm-h);
  aspect-ratio: 753 / 1339;
  overflow: hidden;
  background: #cfcbc4;            /* fallback while the GIF loads */
}

.home-v3 .hp-grieving-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Headline — Cedarville Cursive 96, sits 51px into the media ---- */
.home-v3 .hp-grieving-headline {
  position: absolute;
  left: 50%;
  /* vertical centre of the Figma text box = media top + 131 (131/1339) */
  --f: 0.098;
  top: calc(50% - var(--gm-h) * (0.5 - var(--f)));
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 92%;
  text-align: center;
  font-family: var(--hp-cursive);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--hp-maroon);
  text-shadow: 1px 3px 6px rgba(255, 255, 255, 0.73);
  white-space: nowrap;
}

/* ---- Phrases — Roboto 40 / -2px tracking, centred on their Figma x ---- */
.home-v3 .hp-grieving-phrases {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-v3 .hp-grieving-phrase {
  position: absolute;
  left: var(--x);
  top: calc(50% - var(--gm-h) * (0.5 - var(--f)));
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 92vw;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-align: center;
  color: #000;
  white-space: nowrap;
}

/* Figma x (centre of the text box, % of the 1728 canvas) and
   y (offset into the 1339-tall media, as a fraction) */
.home-v3 .hp-grieving-phrase:nth-child(1) { --x: 76.99%; --f: 0.219; }
.home-v3 .hp-grieving-phrase:nth-child(2) { --x: 23.93%; --f: 0.314; }
.home-v3 .hp-grieving-phrase:nth-child(3) { --x: 76.19%; --f: 0.437; }
.home-v3 .hp-grieving-phrase:nth-child(4) { --x: 23.99%; --f: 0.533; }
.home-v3 .hp-grieving-phrase:nth-child(5) { --x: 70.34%; --f: 0.639; }
.home-v3 .hp-grieving-phrase:nth-child(6) { --x: 24.86%; --f: 0.761; }

/* Last line is bold, uppercase and highlighted (Figma "Rectangle 180") */
.home-v3 .hp-grieving-phrase--mark {
  font-weight: 700;
  text-transform: uppercase;
}

.home-v3 .hp-grieving-phrase--mark span {
  background: linear-gradient(var(--hp-blue), var(--hp-blue)) no-repeat;
  background-size: 100% 0.75em;
  background-position: 0 0.3em;
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- One sentence at a time (JS on). Without JS the whole Figma
        layout stays visible, so the copy is never hidden. ---- */
.home-v3 .hp-grieving.is-js .hp-grieving-step {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px));
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}

.home-v3 .hp-grieving.is-js .hp-grieving-step.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ---- Closer — Cormorant 96, #261834 ---- */
/* Last step of the sequence, revealed on the gif like the phrases.
   --f is the fraction of the media height the line is centred on, so
   0.9 drops it to the foot of the gif while the stage stays pinned to
   the same screen. */
.home-v3 .hp-grieving-closer {
  position: absolute;
  left: 50%;
  --f: 0.9;
  top: calc(50% - var(--gm-h) * (0.5 - var(--f)));
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 88vw;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.4;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--hp-navy);
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.85),
               0 0 26px rgba(255, 255, 255, 0.7);
}

@media (max-width: 960px) {
  .home-v3 .hp-grieving {
    --gm-step: 34svh;
    --gm-h: min(58svh, 140vw);
  }

  /* There is no room to scatter the copy beside the media, and black text
     over an unknown frame of the GIF would not be readable — so on small
     screens the headline sits above it and the phrase below it, on cream. */
  .home-v3 .hp-grieving-headline {
    --f: -0.10;
    white-space: normal;
    max-width: 88vw;
  }

  .home-v3 .hp-grieving-phrase,
  .home-v3 .hp-grieving-phrase:nth-child(1),
  .home-v3 .hp-grieving-phrase:nth-child(2),
  .home-v3 .hp-grieving-phrase:nth-child(3),
  .home-v3 .hp-grieving-phrase:nth-child(4),
  .home-v3 .hp-grieving-phrase:nth-child(5),
  .home-v3 .hp-grieving-phrase:nth-child(6) {
    --x: 50%;
    --f: 1.12;
  }

  .home-v3 .hp-grieving-phrase {
    white-space: normal;
    max-width: 86vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v3 .hp-grieving.is-js .hp-grieving-step {
    transform: translate(-50%, -50%);
    transition: opacity 0.2s linear;
  }
}


/* ============================================================
   COPY BANDS — Figma 1879:113 (The Problem) and 1930:12 (The Reframe)
   Both are the same component: a full-bleed 1728-wide band with a
   centred Cormorant headline over a centred Inter column. Only the
   two colours, the copy width and the spacing differ, so those are
   custom properties and each section sets its own.
   Fresh class names, so the old .hp-problem-* / .hp-reframe-* grid
   rules in style.css — still used by /about and /alternative —
   never reach these sections.
   ============================================================ */

.home-v3 .hp-band {
  --band-bg: var(--hp-maroon);
  --band-title: var(--hp-blue);
  --band-text: var(--hp-cream);
  --band-em-weight: 600;   /* semibold italic */
  --band-copy-w: 1151px;
  --band-copy-gap: clamp(1.75rem, 3.76vw, 65px);
  --band-pad-b: clamp(2.5rem, 7vw, 110px);

  background: var(--band-bg);
  padding: clamp(2.5rem, 3.53vw, 61px) clamp(1.25rem, 4vw, 70px) var(--band-pad-b);
  text-align: center;
}

/* Cormorant 90 / -4.5px tracking */
.home-v3 .hp-band-title {
  max-width: 1210px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--band-title);
}

.home-v3 .hp-band-title span { display: block; }

.home-v3 .hp-band-title em {
  font-style: italic;
  font-weight: var(--band-em-weight);
}

/* Inter SemiBold 24 uppercase, 50px under the headline */
.home-v3 .hp-band-kicker {
  max-width: 1151px;
  margin: clamp(1.5rem, 2.89vw, 50px) auto 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--band-text);
}

/* Inter Regular 24 */
.home-v3 .hp-band-copy {
  max-width: var(--band-copy-w);
  margin: var(--band-copy-gap) auto 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--band-text);
}

.home-v3 .hp-band-copy p {
  /* style.css sets `p { font-size: 1rem }`, and a type selector beats
     inheritance — without this the column ignores its own size. */
  font-size: inherit;
  /* style.css caps every <p> at 600px; these columns run past 1100 */
  max-width: none;
  /* Figma separates the groups with an empty line — one line-height */
  margin: 0 0 1.5em;
}

.home-v3 .hp-band-copy p:last-child { margin-bottom: 0; }

/* Figma stacks three lines with no gap inside one group */
.home-v3 .hp-band-copy-line { display: block; }

/* ---- The Promise (1932:37): same maroon band, no kicker, so the copy
        sits closer under the headline ---- */
.home-v3 .hp-band--tight {
  --band-copy-gap: clamp(0.75rem, 1.16vw, 20px);
  --band-pad-b: clamp(2.5rem, 5.2vw, 80px);
}

/* ---- The Reframe (1930:12): navy ground, pink headline ---- */
.home-v3 .hp-band--navy {
  --band-bg: var(--hp-navy);
  --band-title: var(--hp-pink);
  --band-copy-w: 1303px;
  --band-copy-gap: clamp(1.25rem, 2.37vw, 41px);
  --band-pad-b: clamp(2.5rem, 5vw, 76px);
}

@media (max-width: 960px) {
  .home-v3 .hp-band {
    --band-pad-b: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
  }

}


/* ============================================================
   WHAT WE COVER — Figma 1911:398 ("Group 34")
   Highlighted Cormorant title, highlighted subtitle, then five
   1360×113 pills that differ only by border colour.
   ============================================================ */

.home-v3 .hp-cover {
  background: var(--hp-cream);
  padding: clamp(3rem, 6.134vw, 106px) clamp(1.25rem, 2.5vw, 44px)
           clamp(3rem, 7vw, 110px);
  text-align: center;
  color: #000;
}

/* Marker utility — Figma draws every highlight as a rectangle sitting over
   part of the glyphs, so it is painted as a background band, not a fill.
   Callers set the colour, the band height and where it starts, all in em
   so the band tracks the type size. Shared with Who I Am. */
.home-v3 .hp-mark {
  --mark-color: var(--hp-blue);
  --mark-h: 0.52em;
  --mark-y: 0.42em;
  background: linear-gradient(var(--mark-color), var(--mark-color)) no-repeat;
  background-size: 100% var(--mark-h);
  background-position: 0 var(--mark-y);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Cormorant 96 */
.home-v3 .hp-cover-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.17;
  letter-spacing: 0;
}

/* Roboto 40 uppercase, 54px under the title */
.home-v3 .hp-cover-sub {
  max-width: 904px;
  margin: clamp(1.25rem, 3.125vw, 54px) auto 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.17;
  text-transform: uppercase;
}

.home-v3 .hp-cover-sub-line { display: block; }

/* The subtitle marker sits tighter to the smaller type */
.home-v3 .hp-cover-sub .hp-mark {
  --mark-h: 0.85em;
  --mark-y: 0.28em;
}

/* ---- Rows: 1360×113 pills, 39px apart ---- */
.home-v3 .hp-cover-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 2.257vw, 39px);
  /* Figma: 1360 of a 1728 canvas, so the side margins scale with the page */
  width: min(78.7vw, 1360px);
  margin: clamp(1.75rem, 4.745vw, 82px) auto 0;
  padding: 0;
  list-style: none;
}

.home-v3 .hp-cover-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(56px, 4.4vw, 66px);
  padding: 0.85rem clamp(1.25rem, 4vw, 70px);
  border: clamp(2px, 0.231vw, 4px) solid var(--row-border);
  border-radius: 100px;
  background: var(--hp-cream);
  box-shadow: 5px 6px 7.2px rgba(0, 0, 0, 0.25);
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-align: center;
}

.home-v3 .hp-cover-row b { font-weight: 700; }

/* Border colour is the only thing that changes row to row */
.home-v3 .hp-cover-row:nth-child(1) { --row-border: var(--hp-maroon); }
.home-v3 .hp-cover-row:nth-child(2) { --row-border: var(--hp-pink); }
.home-v3 .hp-cover-row:nth-child(3) { --row-border: var(--hp-navy); }
.home-v3 .hp-cover-row:nth-child(4) { --row-border: var(--hp-blue); }
.home-v3 .hp-cover-row:nth-child(5) { --row-border: var(--bleached-sand); }

@media (max-width: 960px) {
  .home-v3 .hp-cover {
    padding: 3rem 1.25rem 4rem;
  }

  .home-v3 .hp-cover-sub { margin-top: 1.5rem; }

  /* Let the subtitle wrap where it fits rather than keeping the
     designed two-line break on a narrow screen. */
  .home-v3 .hp-cover-sub-line { display: inline; }

  .home-v3 .hp-cover-list {
    gap: 0.9rem;
    width: 100%;
    margin-top: 2rem;
  }

  .home-v3 .hp-cover-row {
    padding: 1rem 1.5rem;
    border-radius: 32px;
  }
}


/* ============================================================
   WHO I AM — Figma 1879:76
   A blurred copy of the portrait fills the band; the sharp copy sits
   on a rotated card at the right. Every line of type carries a
   highlighter bar, so those are markers on the text itself rather
   than the absolutely-placed rectangles Figma uses.
   ============================================================ */

.home-v3 .hp-whoami {
  position: relative;
  min-height: clamp(480px, 46vw, 790px);
  padding: clamp(3rem, 6.48vw, 112px) clamp(1.25rem, 13.08vw, 226px)
           clamp(3rem, 5.5vw, 95px);
  overflow: hidden;
  background: var(--hp-cream);
  isolation: isolate;
}

.home-v3 .hp-whoami-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.home-v3 .hp-whoami-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14.3px);
  /* Scale past the edges so the blur does not feather into the border */
  transform: scale(1.06);
}

.home-v3 .hp-whoami-label,
.home-v3 .hp-whoami-title,
.home-v3 .hp-whoami-bio {
  /* Figma paints the copy over the rotated card, not under it */
  position: relative;
  z-index: 2;
}

.home-v3 .hp-whoami-label {
  margin: 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000;
}

/* Cormorant 90 with a blue bar on each line */
.home-v3 .hp-whoami-title {
  max-width: 1210px;
  margin: clamp(0.5rem, 2.08vw, 36px) 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: var(--hp-maroon);
  text-shadow: 4px 4px 6.9px rgba(255, 255, 255, 0.6);
}

.home-v3 .hp-whoami-title span.hp-whoami-line { display: block; }

/* The band covers the foot of the lowercase letters and leaves their
   tips clear. Measured in the browser: Cormorant at line-height 1.5 puts
   its baseline 1.08em into the line box and the top of an x at 0.625em,
   so the band runs 0.72 to 1.14: it starts a fifth of the way down the
   x-height and closing just under the baseline. */
.home-v3 .hp-whoami-title .hp-mark {
  --mark-color: var(--hp-blue);
  --mark-h: 0.42em;
  --mark-y: 0.72em;
}

/* Inter 24 with a pink bar over each line */
.home-v3 .hp-whoami-bio {
  max-width: 976px;
  margin: clamp(1.5rem, 3.06vw, 53px) 0 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #000;
  text-shadow: 1px -1px 7.6px #fff;
}

.home-v3 .hp-whoami-bio p {
  /* style.css sets `p { font-size: 1rem }`, and a type selector beats
     inheritance — without this the column ignores its own size. */
  font-size: inherit;
  max-width: none;
  margin: 0 0 1.5em;
}

.home-v3 .hp-whoami-bio p:last-child { margin-bottom: 0; }

/* Figma's bars are 37px over a 36px line, so the band covers the whole
   line box. A gradient would only paint one band on a line that wraps,
   so these use a real background with vertical padding, cloned onto
   every fragment. */
.home-v3 .hp-whoami-bio .hp-mark {
  display: inline;
  background: var(--hp-pink);
  padding: 0.27em 0;
}

/* Figma breaks the bio into fixed lines; each one carries its own bar */
.home-v3 .hp-line { display: block; }

/* Rotated portrait card — Figma 528.85×661 at 6.52deg */
.home-v3 .hp-whoami-card {
  position: absolute;
  left: 79.45%;
  top: 52.66%;
  z-index: 1;   /* above the blurred ground, below the copy */
  width: 30.6vw;
  max-width: 529px;
  aspect-ratio: 528.854 / 660.997;
  transform: translate(-50%, -50%) rotate(6.52deg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 10px 26px rgba(0, 0, 0, 0.22);
}

.home-v3 .hp-whoami-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   SERVICES INTRO — Figma 1911:380 ("Group 33")
   The design overlaps two frames under a "Services" wordmark. Only
   the one photograph is used here, centred, and it already carries
   that word — so neither the wordmark nor the second frame is drawn.
   ============================================================ */

/* One block, tall enough for a screen: the photograph takes whatever
   height the four pills leave, so both are in view together. */
.home-v3 .hp-services-block {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  box-sizing: border-box;
  /* The block is exactly one screen tall, so its top sits under the
     fixed nav whenever you land on it; the top padding clears the pill
     so the crown of the artwork is never hidden behind it. */
  padding: clamp(84px, 6.7vw, 96px) clamp(0.5rem, 1.39vw, 24px)
           clamp(1rem, 1.7vw, 24px);
  background: var(--hp-cream);
}

.home-v3 .hp-svcintro {
  position: relative;
  flex: 1 1 auto;
  /* `contain` is height-bound here, so the floor on this box is what
     actually sizes the photograph. */
  min-height: clamp(280px, 30vw, 520px);
  margin-bottom: clamp(0.5rem, 1vw, 14px);
  overflow: hidden;
}

/* `contain`, not `cover`: the photograph carries the word "Services"
   and a crop would cut it.

   Services-photo.png is 1496x1220 but its artwork only occupies
   x 211-1282 and y 229-1218 — 71.7% of the width and 81.1% of the
   height, flush to the bottom edge. `contain` therefore sizes the
   transparent border, not the picture. Scaling 1.23 from near that
   bottom edge maps the artwork onto the full height of the box; only
   transparent pixels overflow and get clipped. Retrim these two
   numbers if the file is ever re-exported with different margins. */
.home-v3 .hp-svcintro-a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.23);
  transform-origin: 50% 99%;
}



/* ============================================================
   SERVICES — Figma 1911:400
   Four 1677×177 pills that overlap by 29px, each a colour pair.
   ============================================================ */

.home-v3 .hp-services-list {
  flex: 0 0 auto;
  /* `margin: 0 auto` on a column flex item stops it stretching and
     shrinks it to its content, so set the width outright. */
  align-self: center;
  width: min(100%, 1677px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-v3 .hp-services-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: clamp(58px, 4.6vw, 66px);
  padding: 0.75rem clamp(1rem, 4.92vw, 85px) 0.75rem clamp(1rem, 4.17vw, 72px);
  border-radius: 100px;
  background: var(--row-bg);
  color: var(--row-fg);
}

/* The row is now the accordion trigger, so it has to shed the button
   defaults and take the full width of its item. */
.home-v3 button.hp-services-row {
  width: 100%;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Figma stacks them 148px apart though each is 177 tall, so they overlap.
   The overlap lives on the item now, and is dropped after an open one so
   the next pill doesn't ride up over the panel. */
.home-v3 .hp-service-item + .hp-service-item {
  margin-top: clamp(-8px, -1.1vw, -16px);
}
.home-v3 .hp-service-item.open + .hp-service-item {
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
}

.home-v3 .hp-service-item:nth-child(1) { --row-bg: var(--hp-maroon); --row-fg: var(--hp-pink); }
.home-v3 .hp-service-item:nth-child(2) { --row-bg: var(--hp-pink);   --row-fg: var(--hp-maroon); }
.home-v3 .hp-service-item:nth-child(3) { --row-bg: var(--hp-blue);   --row-fg: var(--hp-navy); }
.home-v3 .hp-service-item:nth-child(4) { --row-bg: var(--hp-navy);   --row-fg: var(--hp-blue); }

/* Later pills sit on top of earlier ones */
.home-v3 .hp-service-item { position: relative; }
.home-v3 .hp-service-item:nth-child(1) { z-index: 1; }
.home-v3 .hp-service-item:nth-child(2) { z-index: 2; }
.home-v3 .hp-service-item:nth-child(3) { z-index: 3; }
.home-v3 .hp-service-item:nth-child(4) { z-index: 4; }
/* an open item's panel must sit above the pill that follows it */
.home-v3 .hp-service-item.open { z-index: 5; }

.home-v3 .hp-services-name {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.home-v3 .hp-services-price {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-v3 .hp-services-arrow {
  flex: 0 0 auto;
  margin-left: clamp(0.75rem, 2.55vw, 44px);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1;
}


/* ============================================================
   FULL-BLEED PHOTO BAND — Figma 1917:5 (1728×612)
   ============================================================ */

.home-v3 .hp-photoband {
  display: block;
  width: 100%;
  height: clamp(220px, 35.42vw, 612px);
  object-fit: cover;
}


/* ============================================================
   CARETAKERS BAND — Figma 1911:424 ("Group 35")
   ============================================================ */

.home-v3 .hp-caretakers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.4em;
  min-height: clamp(90px, 7vw, 110px);
  padding: 1.25rem clamp(1.25rem, 4vw, 70px);
  background: var(--hp-navy);
  color: var(--hp-pink);
  text-align: center;
}

.home-v3 .hp-caretakers span {
  font-size: var(--fs-h3);
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.home-v3 .hp-caretakers-serif { font-family: var(--font-heading); }

.home-v3 .hp-caretakers-script {
  font-family: var(--hp-cursive);
  text-transform: lowercase;
}


/* ============================================================
   WHO IS THIS WORK FOR — Figma 1879:200
   The design runs seven full-width ruled lines and then a very long
   passage. Here the seven are a numbered two-column index — the same
   ruled rhythm, half the height — and the passage is cut to its three
   load-bearing beats, closing on a serif line.
   ============================================================ */

.home-v3 .hp-forwho {
  background: var(--hp-cream);
  padding: clamp(2.5rem, 4.75vw, 82px) clamp(1.25rem, 6vw, 104px)
           clamp(2.5rem, 4.11vw, 71px);
  text-align: center;
  color: #000;
}

/* Roboto Bold 32 uppercase */
.home-v3 .hp-forwho-kicker {
  max-width: none;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.home-v3 .hp-forwho-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Narrow enough that the block, rules included, reads as centred on
     the page while the copy inside it stays flush left. */
  max-width: 880px;
  margin: clamp(1.5rem, 3.5vw, 56px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.home-v3 .hp-forwho-grid li {
  display: flex;
  align-items: baseline;
  gap: clamp(0.7rem, 1.4vw, 20px);
  padding: clamp(0.85rem, 1.55vw, 24px) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}

.home-v3 .hp-forwho-i {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--hp-maroon);
}

.home-v3 .hp-forwho-grid p {
  max-width: none;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* ---- Pink block: the passage, cut to three beats ---- */
.home-v3 .hp-forwho-more {
  background: var(--hp-pink);
  padding: clamp(2.5rem, 4.5vw, 78px) clamp(1.25rem, 4.05vw, 70px)
           clamp(3rem, 4.86vw, 84px);
  color: #000;
}

.home-v3 .hp-forwho-more-inner {
  /* wide enough that "They answer messages at midnight…" holds one line
     on a desktop frame; it wraps naturally on narrower ones */
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
}

.home-v3 .hp-forwho-more-inner p {
  font-size: inherit;
  max-width: none;
  margin: 0 0 1.5em;
}

.home-v3 .hp-forwho-more-inner p:last-child { margin-bottom: 0; }

/* The payoff, in the same serif as the section titles. Selector has to
   outrank `.hp-forwho-more-inner p` above, which sets font-size and
   max-width on every paragraph in the block. */
.home-v3 .hp-forwho-more-inner p.hp-forwho-close {
  max-width: 32ch;
  margin-inline: auto;
  padding-top: clamp(0.5rem, 1.2vw, 20px);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
}


/* ============================================================
   FOOTER — Figma 1879:6 (1728×767, #BED5EB)
   ============================================================ */

.home-v3 .hp-footer {
  background: var(--hp-blue);
  padding: clamp(2rem, 2.55vw, 44px) clamp(1.25rem, 2.89vw, 50px)
           clamp(2.5rem, 6vw, 104px);
  color: #000;
}

.home-v3 .hp-footer-inner {
  max-width: 1628px;
  margin: 0 auto;
}

/* Figma "Layer 2": the Orle wordmark at 352x165 */
.home-v3 .hp-footer-logo {
  display: inline-block;
  width: clamp(180px, 20.37vw, 352px);
  color: var(--hp-maroon);
}

.home-v3 .hp-footer-logo svg {
  display: block;
  width: 100%;
  height: auto;      /* viewBox 120.33x57.28 keeps the designed ratio */
  color: inherit;
}

/* Brand block on the left, the weekly-letter signup on the right */
.home-v3 .hp-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(1.5rem, 3vw, 52px);
  align-items: end;
  margin-bottom: 0;
}

.home-v3 .hp-footer-brand { max-width: 640px; }

.home-v3 .hp-footer-eyebrow,
.home-v3 .hp-footer-col h3 {
  margin: 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--hp-maroon);
}

.home-v3 .hp-footer-eyebrow { margin-top: clamp(1.5rem, 2.6vw, 45px); }

.home-v3 .hp-footer-blurb {
  max-width: 564px;
  margin: clamp(0.75rem, 1.62vw, 28px) 0 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.home-v3 .hp-footer-rule {
  height: 1px;
  margin: clamp(1.5rem, 2.14vw, 37px) 0 0;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
}

.home-v3 .hp-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2vw, 34px);
  max-width: 1180px;      /* Figma columns run x50 → x983 on a 1628 row */
  margin: clamp(1.75rem, 2.78vw, 48px) 0 0;
}

.home-v3 .hp-footer-col ul {
  margin: clamp(1rem, 1.39vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

.home-v3 .hp-footer-col li + li { margin-top: clamp(0.5rem, 0.81vw, 14px); }

.home-v3 .hp-footer-col a,
.home-v3 .hp-footer-col li {
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #000;
  text-decoration: none;
}

.home-v3 .hp-footer-col a:hover,
.home-v3 .hp-footer-col a:focus-visible { text-decoration: underline; }

.home-v3 .hp-footer-col--philosophy li { font-family: var(--hp-cursive); }


/* ============================================================
   RESPONSIVE — the lower half
   ============================================================ */

@media (max-width: 960px) {
  .home-v3 .hp-whoami {
    min-height: 0;
    padding: 3rem 1.5rem;
  }

  /* The rotated card would sit on top of the copy, so it goes below it */
  .home-v3 .hp-whoami-card {
    position: static;
    width: min(70%, 300px);
    margin: 2.5rem auto 0;
    transform: rotate(4deg);
  }

  .home-v3 .hp-services-block { min-height: 0; padding-top: 88px; }
  .home-v3 .hp-svcintro { min-height: clamp(300px, 78vw, 520px); }

  .home-v3 .hp-services-row {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    min-height: 0;
    padding: 1.1rem 1.5rem;
    border-radius: 28px;
  }

  .home-v3 .hp-services-row + .hp-services-row { margin-top: 0.6rem; }

  .home-v3 .hp-services-name { flex: 1 1 100%; }
  .home-v3 .hp-services-arrow { margin-left: auto; }

  .home-v3 .hp-forwho { padding: 3rem 1.25rem; }
  .home-v3 .hp-forwho-more { padding: 2.5rem 1.25rem 3rem; }

  .home-v3 .hp-forwho-close { max-width: none; }

  .home-v3 .hp-footer-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .home-v3 .hp-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .home-v3 .hp-footer-logo { width: min(60%, 220px); }
}


/* ============================================================
   LETTER FROM CHRISTINE
   The card is the title art ("Where has taste and creativity gone? /
   Letters from Christine"); the portrait sits to its right and lower.
   Own class names throughout, so the older .hp-letter-figure / -bg /
   -img rules in style.css — still used by /alternative — do not reach
   this markup.
   ============================================================ */

.home-v3 .hp-letter--v3 {
  background: var(--hp-cream);
  /* top padding clears the fixed nav pill */
  padding: clamp(84px, 6.7vw, 96px) clamp(1.25rem, 4vw, 70px)
           clamp(3rem, 6vw, 100px);
}

/* One composed image: envelope, card and portrait in a single file.
   2000×1350 with only a couple of percent of transparent margin, so it
   needs no trimming. */
.home-v3 .hp-letter-stage {
  max-width: 1040px;
  margin: 0 auto;
}

.home-v3 .hp-letter-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 1350;
  object-fit: contain;
}

.home-v3 .hp-letter-text {
  max-width: 720px;
  margin: clamp(2rem, 4.5vw, 76px) auto 0;
  font-family: 'Inter', var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: #000;
}

.home-v3 .hp-letter-text p {
  max-width: none;
  margin: 0 0 1.4em;
  font-size: inherit;
}

.home-v3 .hp-letter-text p:last-child { margin-bottom: 0; }

/* Selector has to outrank `.hp-letter-text p` above, which sets
   font-size on every paragraph in the block. */
.home-v3 .hp-letter-text p.hp-letter-ask {
  margin-top: 1.6em;
  font-family: var(--hp-cursive);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--hp-maroon);
}

/* ---- The weekly letter: what the newsletter is, then the form ---- */
.home-v3 .hp-letter-news {
  max-width: 720px;
  margin: clamp(2rem, 3.8vw, 64px) auto 0;
  padding: clamp(1.75rem, 3.2vw, 54px) clamp(1.25rem, 2.8vw, 48px)
           clamp(2rem, 3.5vw, 58px);
  border: 1px solid rgba(100, 10, 34, 0.25);
  border-radius: 20px;
  background: var(--hp-pink);
  text-align: center;
}

.home-v3 .hp-letter-news-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-maroon);
}

.home-v3 .hp-letter-news-title {
  max-width: 30ch;
  margin: clamp(0.75rem, 1.2vw, 20px) auto 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--hp-maroon);
}

.home-v3 .hp-letter-news-list {
  display: grid;
  gap: 0.55rem;
  max-width: 520px;
  margin: clamp(1.1rem, 2vw, 32px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* Small maroon rule instead of a bullet */
.home-v3 .hp-letter-news-list li {
  position: relative;
  padding-left: 1.35rem;
  font-family: 'Inter', var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #000;
}

.home-v3 .hp-letter-news-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: var(--hp-maroon);
}

.home-v3 .hp-letter-news-note {
  max-width: 46ch;
  margin: clamp(1rem, 1.8vw, 28px) auto 0;
  font-family: 'Inter', var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}

/* The Mailchimp form that used to sit in the postcard before the
   footer. Its fields are styled by the .mc_embed_signup rules in
   style.css, which are not section-scoped, so it only needs a column
   to sit in here. */
.home-v3 .hp-letter-signup {
  width: 100%;
  max-width: 460px;
  margin: clamp(1.5rem, 2.6vw, 44px) auto 0;
  text-align: left;
}


/* ============================================================
   SERVICES ACCORDION — Figma 1963:42
   Each pill opens a panel in its own colour: an eyebrow, a lead
   line, the deliverables centred, a closing line and two buttons.
   ============================================================ */

.home-v3 .hp-services-arrow {
  transition: transform 0.25s var(--ease, ease);
}
.home-v3 .hp-service-item.open .hp-services-arrow {
  transform: rotate(180deg);
}

.home-v3 .hp-service-panel {
  background: var(--row-bg);
  color: var(--row-fg);
  border-radius: clamp(24px, 2.6vw, 44px);
  margin: clamp(0.5rem, 1vw, 0.85rem) 0 0;
  padding: clamp(1.75rem, 3.6vw, 3.25rem) clamp(1.25rem, 4vw, 4.5rem)
           clamp(2rem, 3.6vw, 3.25rem);
  text-align: center;
}

.home-v3 .hp-service-eyebrow {
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem);
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  max-width: none;
}

.home-v3 .hp-service-lead {
  margin: 0 auto clamp(1.25rem, 2.4vw, 2rem);
  max-width: 900px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.home-v3 .hp-service-lead em { font-style: italic; font-weight: 600; }

.home-v3 .hp-service-points {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  gap: clamp(0.45rem, 0.9vw, 0.7rem);
}
.home-v3 .hp-service-points li {
  font-family: 'Inter', var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.03em;
  max-width: none;
}
.home-v3 .hp-service-points li::before {
  content: "\2022";
  margin-right: 0.6em;
  opacity: 0.7;
}
.home-v3 .hp-service-points strong { font-weight: 700; }

.home-v3 .hp-service-close {
  margin: clamp(1.25rem, 2.4vw, 2rem) auto 0;
  max-width: 900px;
  font-family: 'Inter', var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.03em;
  max-width: none;
}

.home-v3 .hp-service-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  justify-content: center;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.home-v3 .hp-service-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(180px, 17vw, 250px);
  padding: 0.8rem 1.75rem;
  border-radius: 100px;
  border: 2px solid var(--row-fg);
  background: var(--row-fg);
  color: var(--row-bg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-v3 .hp-service-btn--ghost {
  background: transparent;
  color: var(--row-fg);
}
.home-v3 .hp-service-btn:hover,
.home-v3 .hp-service-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
  .home-v3 .hp-service-ctas { flex-direction: column; align-items: stretch; }
  .home-v3 .hp-service-btn { min-width: 0; }
}