/* ============================================================
   home.css — forked from jdm-site 2026-09-25, recolored to the LCT palette; originally rebuilt 2026-09-23 on the layout of
   allisonshapira.com at Matthew's direction ("as close to this Allison as
   possible, except Allison is Jessica"). Structure, type scale, palette and
   components follow that page; every word and photo is Jessica's own.

   Measured off her page at 1440px:
     Montserrat throughout · h1 100.8px / 300 / -2.5% tracking
     pink button #7e22ce, title pink #9333ea, teal #2d1b4e → #160d26
     buttons: 999px pill, 3px border, 18px / 700, 20px 35px padding
     caps labels: 32px / 600 / 0.2em tracking, pink

   Only the homepage loads this file (with site.css for base + form rules).
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-normal-300_800.woff2?v=c154477b) format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin-italic-400_700.woff2?v=9c67aa97) format("woff2");
}

body.home, body.inner {
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --h-pink: #7e22ce;        /* buttons — white on it 5.3:1 */
  --h-title: #9333ea;       /* big display words */
  --h-red: #a855f7;
  --h-teal: #2d1b4e;
  --h-deep: #160d26;        /* dark text + dark grounds */
  --h-plum: #1c0d2e;
  --h-grey: #f8f5fc;
  --accent: var(--h-pink);
  --accent-hover: #6b21a8;
  background: #fff;
  color: #333;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
.home h1, .home h2, .home h3, .home h4 { font-family: var(--display); color: inherit; margin: 0; }
.home p { max-width: none; }

.h-wrap { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }

/* ---- buttons -------------------------------------------------------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 999px;
  border: 3px solid var(--h-pink);
  padding: 1.1rem 2.2rem;
  font-family: var(--body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
  text-align: center; /* a label that wraps on a phone stays centred in the pill */
}
.h-btn-fill { background: var(--h-pink); }
.h-btn-fill:hover { background: #6b21a8; border-color: #6b21a8; color: #fff; }
.h-btn-outline { background: transparent; color: #fff; }
.h-btn-outline:hover { background: var(--h-pink); color: #fff; }
.h-btn-outline.dark { color: var(--h-deep); }
.h-btn-outline.dark:hover { color: #fff; }
.h-btn-sm { font-size: 0.9rem; padding: 0.8rem 1.9rem; border-width: 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.h-btn-block { width: 100%; }
.home :focus-visible { outline: 3px solid var(--h-pink); outline-offset: 3px; }

/* ---- utility bar + header ------------------------------------------ */
.h-top {
  background: linear-gradient(90deg, var(--h-pink), var(--h-red));
  color: #fff;
  font-size: 0.85rem;
}
.h-top .h-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 1rem; }
.h-top a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.h-top a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) { .h-top .h-wrap { justify-content: center; } .h-top a + a { display: none; } }

.h-head { background: #fff; position: relative; z-index: 5; }
.h-head-inner { display: flex; align-items: center; justify-content: space-between; min-height: 130px; gap: 1.5rem; }
.h-logo img { height: 66px; width: auto; display: block; }
.h-nav { display: flex; align-items: center; gap: 2.2rem; }
.h-nav ul { list-style: none; display: flex; gap: 2.1rem; margin: 0; padding: 0; }
.h-nav ul a { color: var(--h-deep); text-decoration: none; font-weight: 600; font-size: 0.99rem; }
.h-nav ul a:hover { color: var(--h-pink); }
.h-pill {
  background: var(--h-pink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.99rem; padding: 0.95rem 1.9rem; border-radius: 999px;
  white-space: nowrap;
}
.h-pill:hover { background: #6b21a8; color: #fff; }
.h-toggle { position: absolute; opacity: 0; pointer-events: none; }
.h-burger { display: none; cursor: pointer; color: var(--h-deep); }

@media (max-width: 1100px) {
  .h-head-inner { min-height: 88px; flex-wrap: wrap; }
  .h-logo img { height: 50px; }
  .h-burger { display: block; }
  .h-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-bottom: 1.25rem; gap: 1rem; }
  .h-nav ul { flex-direction: column; gap: 0.9rem; }
  .h-toggle:checked ~ .h-nav { display: flex; }
  .h-toggle:focus-visible + .h-burger { outline: 3px solid var(--h-pink); outline-offset: 3px; }
}

/* ---- hero ----------------------------------------------------------
   Her hero is a studio photo lit teal on the left, falling to plum on the
   right. Jessica's cut-out sits on a built version of that light: a teal
   pool behind her (which also separates the black dress from the ground)
   into near-black plum. */
.h-hero {
  background:
    radial-gradient(38% 70% at 22% 55%, rgba(15, 118, 110, 0.85), transparent 72%),
    radial-gradient(40% 60% at 100% 100%, rgba(10, 80, 90, 0.55), transparent 70%),
    linear-gradient(90deg, #1a0b2e 0%, #150c22 48%, #1e0c30 100%);
  color: #fff;
  overflow: hidden;
  padding: 0 !important;
}
.h-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  min-height: 700px;
  gap: 2rem;
}
.h-hero-figure { align-self: end; line-height: 0; padding-top: 1.5rem; }
/* Bleeds a little past the content column into the page margin, so her
   head reads at roughly Allison's scale or larger. */
.h-hero-figure img { width: calc(100% + 6vw); max-width: 800px; height: auto; display: block; margin-left: -6vw; }
.h-hero-copy { align-self: center; text-align: center; padding-block: 3rem; }
.h-hero h1 { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.h-hero h1 .big {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--h-title);
  font-size: clamp(3rem, 0.4rem + 6.6vw, 7rem);   /* FEARLESS is 8 caps — sized to the column */
  letter-spacing: -0.02em;
  line-height: 0.82;
}
.h-hero h1 .light {
  font-weight: 300;
  font-size: clamp(3.4rem, 1rem + 7.4vw, 7.6rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-top: -0.2em;          /* overlaps the pink word, as hers does */
  color: #fff;
}
.h-hero-sub { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem); margin: 0.6rem 0 0; color: #fff; }
.h-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.h-btns .h-btn { min-width: 15rem; padding-inline: 1.8rem; }

@media (max-width: 860px) {
  .h-hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .h-hero-copy { order: -1; padding-bottom: 0.5rem; }
  .h-hero-figure img { width: 100%; max-width: 420px; margin-inline: auto; }
  .h-btns .h-btn { min-width: 0; width: 100%; }
}

/* ---- credential bar ------------------------------------------------- */
.h-cred {
  background: linear-gradient(-160deg, var(--h-teal) 0%, var(--h-deep) 100%);
  color: #fff;
  text-align: center;
  padding-block: 1.7rem !important;
}
.h-cred h2 { font-size: clamp(1.05rem, 0.7rem + 1vw, 1.72rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }

/* ---- caps label + logo rows ---------------------------------------- */
.h-caps {
  color: var(--h-title);
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
  letter-spacing: 0.2em;
  margin-bottom: 2.5rem !important;
}
.h-clients .h-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; justify-items: center; }
.h-clients .h-logos img { max-width: 100%; height: 70px; }
@media (max-width: 760px) { .h-clients .h-logos { grid-template-columns: repeat(3, 1fr); } }
.h-seen { padding-block: clamp(3.5rem, 6vw, 5.5rem) !important; }
.h-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 2rem 3rem;
}
/* Her logo files are white-on-transparent (made for the old dark wall);
   on white they're inverted to ink, as Allison's are. */
.h-logos img { height: 64px; width: auto; max-width: 190px; object-fit: contain; filter: invert(1) grayscale(1) contrast(1.4); }
.h-seen .h-logos { justify-content: center; gap: 2rem 6rem; }
.h-seen .h-logos img { height: 78px; }

/* ---- statement ------------------------------------------------------ */
.h-statement {
  background:
    repeating-radial-gradient(ellipse 140% 30% at 50% 110%, rgba(255,255,255,0.025) 0 18px, transparent 18px 44px),
    radial-gradient(70% 60% at 50% 30%, #3b1d63 0%, transparent 70%),
    linear-gradient(180deg, #241640 0%, #0d0716 100%);
  color: #fff;
  text-align: center;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(9rem, 14vw, 12rem) !important;
}
.h-q { font-weight: 300; font-size: clamp(1.7rem, 1rem + 2.1vw, 2.7rem); line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 3rem; }
.h-who { font-weight: 300; font-size: clamp(1.8rem, 1rem + 2.3vw, 2.97rem); line-height: 1.2; letter-spacing: -0.025em; margin: 0; }
.h-who b { font-weight: 700; }
.h-who span { font-weight: 700; color: var(--h-title); }
.h-three { list-style: none; padding: 0; margin: clamp(3rem, 5vw, 4.5rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.h-three svg, .h-gain svg {
  width: 72px; height: 72px; fill: none; stroke: var(--h-title); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.h-three p { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); margin: 1rem 0 0; }
.h-three b { font-weight: 700; }
@media (max-width: 760px) { .h-three { grid-template-columns: 1fr; } .h-q br, .h-who br { display: none; } }

/* ---- callout (overlaps the statement band) -------------------------- */
.h-callout-wrap { padding: 0 !important; margin-top: calc(-1 * clamp(6rem, 10vw, 8.5rem)); position: relative; z-index: 2; }
.h-callout {
  background: linear-gradient(180deg, var(--h-red) 0%, var(--h-pink) 100%);
  color: #fff;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3.8rem) clamp(1.5rem, 5vw, 4rem);
}
.h-callout h2 { font-weight: 700; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.97rem); line-height: 1.2; letter-spacing: -0.025em; max-width: 30ch; margin-inline: auto; }
/* bold 19.2px = WCAG large text: white clears 3:1 even on the #a855f7 top stop (3.89:1) */
.h-callout p { margin: 1.4rem 0 0; font-size: 1.2rem; font-weight: 700; }

/* ---- stacked display headings (About / JESSICA, RAVE / REVIEWS) ----- */
.h-stack { display: flex; flex-direction: column; line-height: 0.9; color: var(--h-deep); }
.h-stack.center { align-items: center; }
.h-stack .light { font-weight: 300; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); letter-spacing: -0.025em; }
.h-stack .mid { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -0.02em; }
.h-stack .mid b { font-weight: 700; }
.h-stack .big {
  font-weight: 800; text-transform: uppercase; color: var(--h-title);
  font-size: clamp(4rem, 2rem + 6vw, 7.5rem); letter-spacing: -0.03em; line-height: 0.85;
}
.h-about .h-stack .light { margin-bottom: -0.3em; position: relative; z-index: 1; }
.h-stack .grad {
  background: linear-gradient(180deg, var(--h-red) 0%, var(--h-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* background-clip:text only paints inside the box, and line-height .85
     ends the box above descenders — the g in Speaking was sliced off. */
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.h-book .h-stack .big { text-transform: none; }

/* ---- about ---------------------------------------------------------- */
.h-about { padding: clamp(4rem, 8vw, 7rem) 0 !important; }
.h-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.h-about-grid > div:first-child { max-width: 590px; }
.h-about .h-lead { font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); line-height: 1.3; color: var(--h-deep); margin: 2rem 0 1.5rem; }
.h-about p { font-size: 1.1rem; line-height: 1.55; color: #2a2438; margin: 0 0 1.2rem; }
.h-about p b i { color: var(--h-deep); }
/* underlined at rest: colour alone doesn't mark a link inside a sentence (WCAG 1.4.1) */
.h-about p a { color: var(--h-pink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.h-about p a:hover { text-decoration-thickness: 2px; }
.h-about .h-btn { margin-top: 1rem; }
/* Duotone: greyscale portrait, teal rising to violet — her treatment. */
.h-duo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--h-teal); }
.h-duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08) brightness(1.05); display: block; }
.h-duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(35deg, rgba(45, 27, 78, 0.95) 0%, rgba(58, 34, 102, 0.55) 45%, rgba(150, 80, 170, 0.6) 100%);
  mix-blend-mode: screen;
}
.h-duo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(35deg, rgba(22, 13, 38, 0.35), transparent 60%);
  mix-blend-mode: multiply;
}
@media (max-width: 860px) { .h-about-grid { grid-template-columns: 1fr; } .h-duo { max-width: 480px; } }

/* ---- clients -------------------------------------------------------- */
.h-clients {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5rem) 0 !important;
  background:
    linear-gradient(90deg, rgba(240, 240, 244, 0.92), rgba(235, 228, 242, 0.9));
}

/* ---- services ------------------------------------------------------- */
.h-services { padding: clamp(4rem, 8vw, 7rem) 0 !important; }
.h-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.h-cards article { text-align: center; display: flex; flex-direction: column; align-items: center; }
.h-cards img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.h-cards img.top { object-position: 50% 20%; }
.h-cards img.flush-top { object-position: 50% 0; }
/* tight headshots whose hair starts at the top of the file: keep the whole head in the 3:2 card */
.h-cards img.hair { object-position: 50% 4%; }
.h-cards h3 { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); color: var(--h-deep); letter-spacing: -0.025em; margin: 1.6rem 0 1rem; }
.h-cards p { font-size: 1.05rem; line-height: 1.45; color: #2a2438; max-width: 30ch; margin: 0 0 1.6rem; }
.h-cards .h-btn { margin-top: auto; min-width: 14rem; }
@media (max-width: 860px) { .h-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---- what you gain -------------------------------------------------- */
.h-gain {
  color: #fff;
  padding: clamp(3.5rem, 5vw, 4.5rem) 0 !important;
  /* Her white-shirt headshot (548x575 — the best copy we have), set at the
     section's height against the right edge and faded into the teal, as
     Allison's portrait is. The section is kept compact so the photo is
     scaled ~1.1x, not blown up; the pale fill continues its backdrop. */
  background:
    linear-gradient(90deg, var(--h-deep) 0%, var(--h-deep) 44%, rgba(22, 13, 38, 0.7) 54%, rgba(22, 13, 38, 0) 64%),
    #f3eef9;
}
.h-gain-copy { max-width: 560px; }
.h-gain h2 { font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 2.5rem; }
.h-gain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2rem; }
.h-gain li { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; align-items: start; }
.h-gain svg { width: 64px; height: 64px; }
.h-gain p { margin: 0; font-size: 1.1rem; line-height: 1.5; }
@media (max-width: 860px) {
  .h-gain { background: linear-gradient(180deg, rgba(0,30,40,.55), var(--h-deep) 55%), #f3eef9; padding-top: 330px !important; }
}

/* ---- reviews -------------------------------------------------------- */
.h-reviews { background: var(--h-grey); padding: clamp(4rem, 8vw, 6.5rem) 0 !important; }
.h-reviews .h-stack .big { font-size: clamp(3.6rem, 2rem + 4vw, 5.6rem); }
.h-reviews .h-stack .light { text-transform: uppercase; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); }
.h-review-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 1.35rem);
  gap: 2.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4.2rem 0.2rem 1rem; margin-top: 0.5rem;
  scrollbar-width: thin; scrollbar-color: var(--h-title) transparent;
}
.h-review-row figure {
  scroll-snap-align: start; position: relative; background: #fff; margin: 0;
  padding: 3.6rem 2.4rem 2.6rem; text-align: center;
}
.h-ring {
  position: absolute; top: -3.8rem; left: 50%; transform: translateX(-50%);
  width: 7.4rem; height: 7.4rem; border-radius: 50%; border: 2px solid var(--h-red);
  background: var(--h-grey); color: var(--h-title);
  display: grid; place-items: center; font-size: 4.5rem; font-weight: 700; line-height: 1; padding-top: 1.4rem;
}
.h-review-row blockquote { margin: 0; font-style: normal; font-family: var(--body); }
.h-review-row .hl { color: var(--h-title); font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem); line-height: 1.25; margin: 0 0 1rem; }
.h-review-row blockquote p:not(.hl) { font-size: 1.1rem; line-height: 1.55; color: #333; }
.h-review-row figcaption { margin-top: 1.6rem; font-size: 0.85rem; color: #333; }
.h-review-row figcaption b { display: block; font-weight: 700; margin-bottom: 0.2rem; }
@media (max-width: 760px) { .h-review-row { grid-auto-columns: 88%; } }

/* ---- book ----------------------------------------------------------- */
.h-book { padding: clamp(4rem, 8vw, 7rem) 0 0 !important; position: relative; z-index: 2; }
.h-book-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.h-book-cover { align-self: end; margin-bottom: -5rem; }
.h-book-cover img { width: 100%; max-width: 410px; height: auto; display: block; margin-inline: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.h-book h3 { font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem); color: var(--h-deep); line-height: 1.25; margin: 1.8rem 0 1.2rem; letter-spacing: -0.02em; max-width: 30ch; }
.h-book p { font-size: 1.1rem; line-height: 1.55; color: #2a2438; max-width: 56ch; margin: 0 0 1.2rem; }
.h-book .h-btn { margin: 1rem 0 3rem; }

/* ---- buy band ------------------------------------------------------- */
.h-buy {
  color: #fff;
  padding: clamp(9rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4rem) !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #3a2266 0%, #120a20 100%);
}
.h-buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.h-buy-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25em; justify-content: center; line-height: 0.9; }
.h-buy-title .light { font-weight: 300; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -0.03em; }
.h-buy-title b { font-weight: 800; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -0.03em; }
.h-buy-title .big {
  flex-basis: 100%; text-align: center; margin-top: -0.15em;
  font-weight: 800; text-transform: uppercase; color: var(--h-title);
  font-size: clamp(4rem, 2.4rem + 4.5vw, 6.3rem); letter-spacing: -0.03em;
}
.h-buy p { font-size: 1.15rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 44ch; }
.h-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.h-checks li { display: flex; gap: 0.8rem; align-items: center; font-size: 1.15rem; }
.h-checks li::before {
  content: ""; flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--h-title) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.h-retail {
  grid-column: 1 / -1; list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1.5rem 3rem;
}
.h-retail a { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; }
.h-retail a:hover { color: var(--h-title); }
@media (max-width: 860px) {
  .h-book-grid, .h-buy-grid { grid-template-columns: 1fr; }
  .h-book-cover { margin-bottom: 2.5rem; max-width: 300px; margin-inline: auto; }
  .h-book-grid > div:last-child { padding-bottom: 1rem; }
  .h-buy { padding-top: clamp(3.5rem, 8vw, 5rem) !important; }
}

/* ---- FAQ ------------------------------------------------------------ */
.h-faq { background: var(--h-teal); color: #fff; padding: clamp(4.5rem, 8vw, 7rem) 0 !important; }
.h-faq-inner { max-width: 650px; }
.h-faq-kicker { text-align: center; text-transform: uppercase; font-weight: 300; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); letter-spacing: 0.03em; margin: 0 0 1rem; }
.h-faq h2 { text-align: center; font-weight: 600; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.3rem); letter-spacing: -0.025em; margin-bottom: 2rem; }
.h-faq details { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding: 0.55rem 0; }
.h-faq details summary {
  font-family: var(--body); font-size: 1rem; font-weight: 400; color: #fff;
  min-height: 0; justify-content: flex-start; align-items: baseline; gap: 0.7rem;
}
.h-faq details summary::after { content: none; }
.h-faq details summary::before { content: "+"; color: #fff; font-weight: 700; font-size: 1.2rem; flex: 0 0 0.9rem; }
.h-faq details[open] summary::before { content: "\2013"; }
.h-faq details summary:hover { color: #fff; opacity: 0.85; }
.h-faq details > *:not(summary) { color: #efe7fa; margin: 0.6rem 0 0.6rem 1.6rem; font-size: 0.98rem; line-height: 1.55; }
.h-faq details a { color: #fff; }
.h-faq-foot { margin-top: 2.2rem; font-style: italic; font-size: 0.95rem; }
.h-faq-foot a { color: #fff; text-decoration: none; }
.h-faq-foot a:hover { text-decoration: underline; }

/* ---- conversation --------------------------------------------------- */
.h-convo { background: var(--h-grey); padding: clamp(4.5rem, 8vw, 7rem) 0 !important; }
.h-convo-inner { max-width: 800px; }
.h-inline { text-align: center; font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.5rem); letter-spacing: -0.025em; color: var(--h-deep); margin-bottom: 2.2rem !important; line-height: 1.1; }
.h-inline .light { font-weight: 300; }
.h-inline .big { font-weight: 800; text-transform: uppercase; color: var(--h-title); }
.h-convo-inner > p { font-size: 1.05rem; line-height: 1.55; color: #2a2438; margin: 0 0 1rem; }
.h-form { margin-top: 2.5rem; }
.h-form .h-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.h-form .field { margin-bottom: 1.4rem; }
.h-form .field label, .h-form legend { font-family: var(--body); font-weight: 600; font-size: 1.05rem; color: var(--h-deep); text-transform: none; letter-spacing: 0; margin-bottom: 0.4rem; display: block; }
.h-form .field label span, .h-form legend span { color: var(--h-title); }
.h-form input[type=text], .h-form input[type=email], .h-form textarea {
  background: #fff; border: 1px solid #c9ccce; border-radius: 0; font-family: var(--body); font-size: 1rem; width: 100%; padding: 0.8rem 0.9rem;
}
.h-radios { border: 0; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.h-radios legend { width: 100%; }
.h-radios label { display: inline-flex !important; align-items: center; gap: 0.45rem; font-weight: 400 !important; font-size: 1rem !important; color: #333 !important; margin: 0 !important; }
.h-radios input { width: 18px; height: 18px; accent-color: var(--h-pink); margin: 0; }
.h-submit { width: 100%; border: 0; padding: 1.15rem; font-size: 1.1rem; }
@media (max-width: 640px) { .h-form .h-row { grid-template-columns: 1fr; } }

/* ---- footer --------------------------------------------------------- */
.h-foot {
  color: #fff;
  background:
    radial-gradient(40% 80% at 0% 0%, rgba(45, 27, 78, 0.8), transparent 70%),
    radial-gradient(40% 80% at 100% 0%, rgba(45, 27, 78, 0.7), transparent 70%),
    linear-gradient(180deg, #1a0d2b, #120a1e);
}
.h-foot-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 3rem; align-items: center; padding: clamp(3.5rem, 6vw, 5rem) 0; }
.h-foot-logo { width: 100%; max-width: 380px; height: auto; filter: invert(1); margin-inline: auto; display: block; }
.h-foot h3 { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); letter-spacing: -0.025em; margin-bottom: 0.8rem; }
.h-foot p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.4rem; }
.h-foot-base { background: var(--h-teal); font-size: 0.85rem; font-weight: 600; }
.h-foot-base .h-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.8rem; min-height: 56px; padding-block: 0.6rem; }
.h-foot-base a { color: #fff; text-decoration: none; display: inline-flex; }
.h-foot-base a:hover { color: #fff; text-decoration: underline; }
.h-foot-loc { margin-left: auto; }
@media (max-width: 760px) { .h-foot-grid { grid-template-columns: 1fr; } .h-foot-logo { max-width: 260px; } .h-foot-loc { margin-left: 0; } }

/* ============================================================
   INTERIOR PAGE KIT — every inner page is BUILT from these plus the
   homepage components above (not a re-skin of the old markup).
   Modelled on allisonshapira.com/keynotes: teal hero → overlapping
   pink quote → lead + photo → trusted strip → big pink title + cards →
   plum detail bands → difference grid → resources → FAQ → form.
   ============================================================ */

/* ---- page hero: teal, left-aligned, huge pink caps headline ---------- */
.p-hero {
  background:
    radial-gradient(45% 90% at 100% 0%, rgba(10, 80, 90, 0.45), transparent 70%),
    linear-gradient(180deg, #241640 0%, var(--h-deep) 100%);
  color: #fff;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6.5rem) !important;
  overflow: hidden;
}
/* when a .p-quote box follows, it overlaps the hero's lower edge */
.p-hero.has-quote { padding-bottom: clamp(8rem, 13vw, 10.5rem) !important; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.p-hero-grid.solo { grid-template-columns: minmax(0, 1fr); }
.p-kicker { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin: 0 0 1.2rem; }
.p-hero h1 {
  font-weight: 800; text-transform: uppercase; color: var(--h-title);
  font-size: clamp(2.7rem, 1.4rem + 4.6vw, 5.4rem); line-height: 0.96; letter-spacing: -0.02em;
  max-width: 16ch;
}
.p-intro { margin: 1.6rem 0 0; font-size: clamp(1.08rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.5; max-width: 44ch; color: #fff; }
.p-hero .h-btns { justify-content: flex-start; margin-top: 2.2rem; }
.p-hero .h-btns .h-btn { min-width: 0; }
.p-hero-figure { justify-self: end; line-height: 0; }
.p-hero-figure img { width: 100%; max-width: 500px; height: auto; display: block; }
/* cut-outs are sized like the homepage hero: the full column plus a 6vw bleed into the
   right margin (max 800px), sitting on the hero's bottom edge so the waist crop reads as
   the frame edge. Tall portraits are scaled down inside that box (object-fit) instead of towering. */
.p-hero-figure.cut { justify-self: stretch; align-self: end; padding-top: 1.5rem; margin-bottom: calc(-1 * clamp(4rem, 8vw, 6.5rem)); }
.p-hero-figure.cut img {
  width: calc(100% + 6vw); max-width: 800px; height: auto; max-height: 760px;
  object-fit: contain; object-position: right bottom;
  margin-left: auto; margin-right: -6vw;
}
@media (min-width: 861px) {
  .p-hero-grid:has(> .p-hero-figure.cut) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
/* with a pink quote below, the cut-out runs to the hero's edge and its crop tucks behind the quote box */
.p-hero.has-quote .p-hero-figure.cut { margin-bottom: calc(-1 * clamp(8rem, 13vw, 10.5rem)); }
.p-hero-figure.frame img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }

/* backlight on every hero cut-out: stacked drop-shadows follow her silhouette (they track the
   image's alpha), so the light always sits behind her hair whatever the image or viewport, and
   hair the mask only half-separated reads as backlit instead of as a fringe on dark teal.
   Tight warm rim -> soft peach halo -> wide brand-pink bloom. Same look as the link-preview cards. */
.h-hero-figure img, .p-hero-figure.cut img {
  filter:
    drop-shadow(0 0 6px rgba(204, 251, 241, .55))
    drop-shadow(0 0 22px rgba(94, 234, 212, .40))
    drop-shadow(0 -6px 60px rgba(147, 51, 234, .38));
}

@media (max-width: 860px) {
  .p-hero-grid { grid-template-columns: 1fr; }
  .p-hero-figure { justify-self: center; }
  .p-hero-figure img { max-width: 360px; }
  .p-hero-figure.cut img { width: 100%; max-width: 440px; max-height: 500px; margin-inline: auto; object-position: center bottom; }
}

/* ---- overlapping pink quote box ------------------------------------ */
.p-quote-wrap { padding: 0 !important; margin-top: calc(-1 * clamp(5.5rem, 9vw, 7.5rem)); position: relative; z-index: 2; }
.p-quote {
  margin: 0;   /* it is a <figure>: drop the UA 40px indent */
  background: linear-gradient(180deg, var(--h-title) 0%, var(--h-pink) 100%);  /* white text >= 4.72:1 */
  color: #fff;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.5rem, 5vw, 4rem);
}
.p-quote-mark { font-weight: 800; font-size: clamp(5rem, 3rem + 5vw, 8rem); line-height: 0.6; color: rgba(255, 255, 255, 0.9); padding-top: 0.3em; }
.p-quote blockquote { margin: 0; font-style: normal; font-family: var(--body); }
.p-quote .hl { font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.8rem; color: #fff; }
.p-quote blockquote p:not(.hl) { font-size: 1.08rem; line-height: 1.5; margin: 0; color: #fff; }
.p-quote .who { margin: 1.2rem 0 0; font-size: 0.9rem; color: #fff; }
.p-quote .who b { display: block; font-size: 0.95rem; }
@media (max-width: 640px) { .p-quote { grid-template-columns: 1fr; } .p-quote-mark { display: none; } }

/* ---- lead block: bold lead + body + photo (reuses .h-about) --------- */
.p-lead .h-lead { margin-top: 0; }
.p-lead .h-duo.plain::after, .p-lead .h-duo.plain::before { display: none; }
.p-lead .h-duo.plain img { filter: none; }
.p-lead .h-duo.wide { aspect-ratio: 4 / 3; }
.p-lead .stats-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.8rem 0 0.4rem; }
.p-lead .stats-row div { border-top: 3px solid var(--h-title); padding-top: 0.6rem; min-width: 7rem; }
.p-lead .stats-row b { display: block; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--h-title); letter-spacing: -0.03em; }
.p-lead .stats-row span { display: block; margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #2a2438; }

/* .home h1..h4 { color: inherit } (0,1,1) outranks single-class titles —
   these must stay pink wherever they are used. */
.home .h-caps, .home .p-title, .home p.eyebrow-pink { color: var(--h-title); }

/* small pink caps label above a lead (Allison's "KEYNOTE 1" / section tags) */
.eyebrow-pink { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--h-title); margin: 0 0 1rem; }

/* ---- big pink section title (KEYNOTES) ------------------------------ */
.p-title {
  text-align: center; font-weight: 800; text-transform: uppercase; color: var(--h-title);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.2rem); letter-spacing: -0.02em; line-height: 1;
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem) !important;
}
.p-title-sub { text-align: center; font-size: 1.1rem; line-height: 1.55; color: #2a2438; max-width: 60ch; margin: -1.2rem auto 2.8rem; }
.h-cards.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.h-cards .card-line { font-weight: 700; color: var(--h-deep); margin: -0.4rem 0 0.8rem; font-size: 1.05rem; }
@media (max-width: 860px) { .h-cards.two { grid-template-columns: 1fr; } }

/* ---- TikTok strip (/for-singers): self-hosted covers, links out, no embed JS */
.reels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.reels a { display: block; transition: transform .2s ease; }
.reels a:hover { transform: translateY(-4px); }
.reels a:focus-visible { outline: 3px solid var(--h-deep); outline-offset: 3px; }
.reels img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
@media (max-width: 1100px) { .reels { grid-template-columns: repeat(3, 1fr); max-width: 720px; margin-inline: auto; } }
@media (max-width: 560px) { .reels { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .reels a { transition: none; } .reels a:hover { transform: none; } }

/* ---- plum detail band (KEYNOTE 1 …) -------------------------------- */
.p-detail {
  color: #fff;
  padding: clamp(4rem, 7vw, 6rem) 0 !important;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #3a2266 0%, #120a20 100%);
  scroll-margin-top: 1rem;
}
.p-detail + .p-detail { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.p-detail.teal {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(10, 80, 90, 0.5), transparent 70%),
    linear-gradient(180deg, #241640 0%, var(--h-deep) 100%);
}
.p-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.p-label { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin: 0; }
.p-detail h2 { color: var(--h-title); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0.8rem 0 1.3rem; }
.p-detail .sub { font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height: 1.35; margin: 0 0 1.2rem; color: #fff; }
.p-detail p { font-size: 1.05rem; line-height: 1.6; color: #eef2f4; margin: 0 0 1rem; }
.p-detail h3 { font-weight: 700; font-size: 1.25rem; margin: 0 0 1rem; letter-spacing: -0.015em; }
.p-detail h3 ~ h3 { margin-top: 2rem; }
.p-detail .h-checks li { align-items: flex-start; font-size: 1.02rem; line-height: 1.45; }
.p-detail .h-checks li::before { margin-top: 0.05rem; }
.p-detail .h-btns { justify-content: center; margin-top: clamp(2.2rem, 4vw, 3rem); }
.p-detail .h-btns .h-btn { min-width: 12rem; padding-block: 0.85rem; font-size: 1rem; }
.p-detail a:not(.h-btn) { color: #fff; }
@media (max-width: 860px) { .p-detail-grid { grid-template-columns: 1fr; } }

/* ---- the difference: pink panels alternating with testimonial cards - */
.p-diff-sec { background: var(--h-grey); padding: clamp(4.5rem, 8vw, 7rem) 0 !important; }
.p-diff-sec .h-stack { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.p-diff-sec .h-stack .light { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); text-transform: none; margin-bottom: -0.15em; position: relative; z-index: 1; }
.p-diff-sec .h-stack .light b { font-weight: 700; }
/* DIFFERENCE is 10 wide caps: at the 4rem clamp floor it ran 401px on a 390
   phone and clipped both ends. Cap it to the viewport on narrow screens. */
.p-diff-sec .h-stack .big { font-size: min(clamp(4rem, 2rem + 6vw, 7.5rem), 13vw); }
.p-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.p-diff > * { padding: clamp(2.2rem, 4.5vw, 3.4rem); min-height: 100%; }
.p-diff .pk { background: linear-gradient(180deg, var(--h-title) 0%, var(--h-pink) 100%); color: #fff; }
.p-diff .pk h3 { font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); letter-spacing: -0.03em; line-height: 1; margin: 0 0 1.2rem; }
.p-diff .pk p { color: #fff; font-size: 1.05rem; line-height: 1.55; margin: 0 0 1rem; }
.p-diff .wt { background: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; }
.p-diff .wt .h-ring { position: static; transform: none; width: 4.6rem; height: 4.6rem; font-size: 3rem; padding-top: 0.9rem; margin-bottom: 1.2rem; background: #fff; }
.p-diff .wt blockquote { margin: 0; font-style: normal; font-family: var(--body); }
.p-diff .wt .hl { color: var(--h-title); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; margin: 0 0 0.8rem; }
.p-diff .wt blockquote p:not(.hl) { font-size: 1rem; line-height: 1.55; color: #333; margin: 0; }
.p-diff .wt figcaption { margin-top: 1.3rem; color: var(--h-title); font-size: 0.9rem; }
.p-diff .wt figcaption b { display: block; font-size: 1rem; }
@media (max-width: 760px) {
  .p-diff { grid-template-columns: 1fr; }
  .p-diff > :nth-child(4n+3) { order: 0; }
}

/* ---- two-column FAQ ------------------------------------------------- */
.h-faq-inner.wide { max-width: 1100px; }
.h-faq .faq-cols { columns: 2; column-gap: 3rem; }
.h-faq .faq-cols details { break-inside: avoid; }
.h-faq .faq-cols + .h-faq-foot { text-align: center; }
@media (max-width: 760px) { .h-faq .faq-cols { columns: 1; } }

/* ---- plain white text section (privacy etc.) ------------------------ */
.p-prose { padding: clamp(3.5rem, 6vw, 5rem) 0 !important; }
.p-prose .h-wrap { max-width: 760px; }
.p-prose h2 { font-weight: 700; font-size: 1.5rem; color: var(--h-deep); letter-spacing: -0.02em; margin: 2.2rem 0 0.8rem; }
.p-prose h2:first-child { margin-top: 0; }
.p-prose p, .p-prose li { font-size: 1.05rem; line-height: 1.65; color: #2a2438; }
.p-prose a { color: var(--h-pink); }

/* ---- backlit cut-out panels (section photos) -------------------------------
   A cut-out on the hero's dark gradient with a warm light behind her head, plus the
   same silhouette-following rim as the hero cut-outs. Used where a framed photo was. */
.cutpanel {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(34% 46% at 50% 36%, rgba(255, 214, 196, .40), rgba(255, 170, 150, .12) 55%, transparent 78%),
    radial-gradient(60% 70% at 50% 45%, rgba(147, 51, 234, .30), transparent 75%),
    radial-gradient(45% 90% at 100% 0%, rgba(10, 80, 90, .45), transparent 70%),
    linear-gradient(180deg, #241640 0%, var(--h-deep) 100%);
}
.h-cards .cutpanel img, .cutpanel img {
  width: auto !important; height: 92% !important; max-width: 100%; aspect-ratio: auto !important;
  object-fit: contain !important; object-position: 50% 100% !important; display: block;
  filter: drop-shadow(0 0 5px rgba(204, 251, 241, .55)) drop-shadow(0 0 18px rgba(94, 234, 212, .40)) drop-shadow(0 -4px 44px rgba(147, 51, 234, .38)) !important;
}
/* keynote cards: frame her from the waist up (head near the top, the waist crop at the frame edge) */
.h-cards .cutpanel { align-items: flex-start; }
.h-cards .cutpanel img { height: 150% !important; margin-top: 5%; }
.h-duo.cutbox { background: none; }
.h-duo.cutbox .cutpanel { aspect-ratio: auto; height: 100%; }
.h-duo.cutbox .cutpanel img { height: 94% !important; }