/* ==========================================================================
   The Hot & Healthy Method: shared site CSS
   Extracted from reference/home-reference.html. Values are taken from the
   reference verbatim. Do not retune them here.

   Organised in page order. To build a new page, lift a section's markup out
   of the reference and lift its matching block out of this file.

   House rules enforced by this file: no borders, no rounded corners except
   the device mockup bodies, no shadows, no gradients, no grey text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Palette. These five values only. */
  --ink:     #1A1A1A;
  --white:   #FFFFFF;
  --neutral: #F6F4EF;
  --sage:    #9DAA8A;
  --olive:   #59634D;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* Layout */
  --wrap:   1680px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: 0.62; }

@keyframes hh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.page { width: 100%; background: var(--white); overflow-x: hidden; }

/* Inner wrapper. Sections run full width, content is capped by this. */
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* --------------------------------------------------------------------------
   TYPE SCALE
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 24px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.eyebrow--on-ink { color: var(--white); }

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink);
}
.h2--on-ink { color: var(--white); }

.body-copy {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.68;
  font-weight: 300;
  color: var(--ink);
}
.body-copy--on-ink { color: var(--white); }

/* --------------------------------------------------------------------------
   CTA: one component, used everywhere. Olive fill, white text, right arrow.
   -------------------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 38px;
  background: var(--olive);
  color: var(--white);
  border: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.cta:hover { background: var(--ink); opacity: 1; }

/* Form controls do not inherit the body family. */
button.cta { font-family: 'Inter', sans-serif; }

/* --------------------------------------------------------------------------
   IMAGE PLACEHOLDERS
   Flat solid blocks in the correct aspect ratio. Light where the real photo
   will be bright, dark where it will be moody. Aspect ratio and sizing are
   set per instance in the section blocks below.
   -------------------------------------------------------------------------- */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.ph--light { background: var(--neutral); }
.ph--dark  { background: var(--ink); }

.ph-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.4;
}
.ph--light .ph-label { color: var(--ink); }
.ph--dark  .ph-label { color: var(--white); }

/* --------------------------------------------------------------------------
   WORDMARK LOCKUP: "The Hot & Healthy" above "METHOD"
   -------------------------------------------------------------------------- */

.wordmark__name {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--white);
}
.wordmark__method {
  display: block;
  font-size: 9px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  margin-top: 7px;
}

/* --------------------------------------------------------------------------
   HEADER: centred nav on the hero background. Transparent, not sticky.
   Link groups are flex: 0 0 auto so the wordmark stays dead centre.
   -------------------------------------------------------------------------- */

.site-header { position: relative; z-index: 10; flex: 0 0 auto; }

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px clamp(24px, 3.4vw, 54px);
}

.site-nav { display: flex; gap: clamp(20px, 2.2vw, 34px); flex: 0 0 auto; }
.site-nav--left  { order: 1; }
.site-nav--right { order: 3; }

.site-header__wordmark { flex: 0 0 auto; text-align: center; order: 2; padding: 4px 0; }

.nav-link {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  line-height: 16px;
  padding: 14px 0;
}
.nav-link--strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   1. HERO, SPLIT
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(660px, 76vw, 940px);
}

.hero__video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  min-width: 150px;
}

.hero__row {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hero__portrait-col {
  flex: 1 1 340px;
  display: flex;
  justify-content: flex-end;
  padding: clamp(32px, 4vw, 64px) 0 clamp(44px, 5vw, 76px) clamp(20px, 4vw, 56px);
}
.hero__portrait { width: min(100%, 440px); aspect-ratio: 4/5; }

.hero__copy {
  flex: 1 1 400px;
  padding: clamp(28px, 4vw, 64px) clamp(20px, 5vw, 76px) clamp(44px, 5vw, 76px) clamp(28px, 4vw, 64px);
}
.hero__copy .eyebrow { margin-bottom: 26px; }

.hero__h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 5.8vw, 96px);
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: var(--white);
}

.hero__tagline {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--white);
}

.hero__intro {
  margin: 0 0 38px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.64;
  font-weight: 300;
  color: var(--white);
  max-width: 38ch;
}

/* --------------------------------------------------------------------------
   2. SAGE MARQUEE: decorative sage band. Text on sage is ink, never white.
   -------------------------------------------------------------------------- */

.marquee { background: var(--sage); overflow: hidden; padding: 20px 0; }

.marquee__track {
  display: flex;
  width: max-content;
  animation: hh-marquee 44s linear infinite;
}

.marquee__group { display: flex; align-items: center; }

.marquee__item {
  padding: 0 34px;
  font-family: var(--serif);
  font-size: 27px;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__item--it { font-style: italic; }

.marquee__dot { color: var(--ink); font-size: 12px; opacity: 0.45; }

/* --------------------------------------------------------------------------
   3. THE DIFFERENCE: centred, type only
   -------------------------------------------------------------------------- */

.difference {
  background: var(--white);
  padding: clamp(88px, 10vw, 170px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.difference__inner { max-width: 1100px; margin: 0 auto; }
.difference .eyebrow { margin-bottom: 28px; }

.difference__h2 {
  margin-bottom: 34px;
  font-size: clamp(40px, 5.8vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.difference__lede {
  margin: 0 auto 42px;
  max-width: 62ch;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* --------------------------------------------------------------------------
   4. INSIDE THE METHOD: device mockups on ink, split
   The only rounded corners on the site are the device bodies.
   -------------------------------------------------------------------------- */

.device { background: var(--ink); overflow: hidden; }

.device__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(80px, 9vw, 150px) var(--gutter);
}

.device__media { flex: 1 1 360px; position: relative; padding-bottom: 40px; }

.device__laptop { width: 100%; max-width: 560px; }
.device__laptop-bezel { background: var(--white); padding: 11px; border-radius: 6px; }
.device__laptop-screen { aspect-ratio: 16/10; padding: 16px; border-radius: 2px; }
.device__laptop-base {
  height: 11px;
  background: var(--white);
  width: 112%;
  margin-left: -6%;
  border-radius: 0 0 6px 6px;
}

.device__phone {
  position: absolute;
  right: clamp(0px, 3vw, 40px);
  bottom: 0;
  width: clamp(104px, 13vw, 158px);
  background: var(--white);
  padding: 7px;
  border-radius: 24px;
}
.device__phone-screen { aspect-ratio: 9/19; border-radius: 18px; padding: 10px; }
.device__phone-screen .ph-label { font-size: 9px; letter-spacing: 0.2em; }

.device__copy { flex: 1 1 380px; }

.device__h2 {
  margin-bottom: 26px;
  font-size: clamp(36px, 4.4vw, 62px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.device__p      { margin-bottom: 18px; }
.device__p--sub { margin-bottom: 38px; opacity: 0.72; }

/* --------------------------------------------------------------------------
   5. THE SHIFT: tall dark portrait with overlapping copy, asymmetric
   -------------------------------------------------------------------------- */

.shift {
  background: var(--white);
  padding: clamp(80px, 9vw, 150px) 0 clamp(80px, 9vw, 150px);
  overflow: hidden;
}

.shift__inner {
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.shift__portrait { flex: 1 1 320px; max-width: 620px; aspect-ratio: 3/4; }

.shift__copy {
  position: relative;
  flex: 1 1 380px;
  background: var(--white);
  padding: clamp(32px, 4vw, 60px) 0 clamp(32px, 4vw, 60px) clamp(28px, 4vw, 64px);
  margin-left: clamp(-90px, -4.5vw, -12px);
  z-index: 2;
}
.shift__copy .eyebrow { margin-bottom: 26px; }

.shift__quote {
  margin: 0 0 30px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.9vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.shift__p { margin-bottom: 40px; max-width: 42ch; }

/* --------------------------------------------------------------------------
   6. SUCCESS STORIES: results collage, irregular
   Not an even three across grid. Blocks sit at different sizes and offsets.
   -------------------------------------------------------------------------- */

.collage {
  background: var(--white);
  padding: 0 var(--gutter) clamp(80px, 9vw, 150px);
  overflow: hidden;
}

.collage__head { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 72px); }

.collage__h2 {
  margin-bottom: 24px;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.022em;
}

.collage__p { max-width: 56ch; }

.collage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
}
.collage__grid .ph { padding: 16px; }

.collage__one   { aspect-ratio: 3/4;   margin-top: clamp(0px, 5vw, 72px); }
.collage__two   { aspect-ratio: 16/11; grid-column: span 2; }
.collage__three { aspect-ratio: 1/1;   margin-top: clamp(0px, 9vw, 130px); }
.collage__four  { aspect-ratio: 2/3;   margin-top: clamp(0px, 2vw, 28px); }
.collage__five  { aspect-ratio: 4/5;   margin-top: clamp(0px, 7vw, 96px); }

.collage__foot { margin-top: clamp(44px, 5vw, 76px); }

/* --------------------------------------------------------------------------
   7. IN THEIR OWN WORDS: on ink, oversized wordmark watermark
   -------------------------------------------------------------------------- */

.voices {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(88px, 10vw, 160px) var(--gutter);
  text-align: center;
}

.voices__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: clamp(110px, 20vw, 320px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--white);
  opacity: 0.07;
  white-space: nowrap;
  line-height: 1;
}

.voices__inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.voices .eyebrow { margin-bottom: 32px; }

.voices__h2 {
  margin-bottom: 38px;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.voices__still { aspect-ratio: 16/7; margin-bottom: 38px; }

.voices__p {
  margin: 0 auto 42px;
  max-width: 56ch;
  line-height: 1.7;
  opacity: 0.82;
}

/* --------------------------------------------------------------------------
   8. THE STANDARDS: split, light block bleeding right
   -------------------------------------------------------------------------- */

.standards { background: var(--white); overflow: hidden; padding: clamp(80px, 9vw, 150px) 0; }

.standards__inner {
  padding-left: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 4vw, 64px);
}

.standards__copy { flex: 1 1 420px; padding-right: clamp(20px, 3vw, 40px); }

.standards__h2 {
  margin-bottom: 24px;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.99;
  letter-spacing: -0.022em;
}

.standards__p { margin-bottom: 44px; max-width: 48ch; }

.standards__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  margin-bottom: 44px;
}
.standards__col { flex: 1 1 200px; }

.standards__h3 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
}

.standards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.standards__list li { font-size: 16px; font-weight: 300; color: var(--ink); }

.standards__bleed {
  flex: 1 1 300px;
  align-self: stretch;
  min-height: 460px;
  margin-right: clamp(-64px, -5vw, -20px);
}

/* --------------------------------------------------------------------------
   9. FULL WIDTH SAGE QUOTE BAND
   -------------------------------------------------------------------------- */

.quote-band {
  background: var(--sage);
  padding: clamp(72px, 8vw, 128px) clamp(20px, 6vw, 88px);
  text-align: center;
}

.quote-band__quote {
  margin: 0 auto;
  max-width: 1100px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. ABOUT CAT: split
   -------------------------------------------------------------------------- */

.about { background: var(--white); display: flex; flex-wrap: wrap; align-items: stretch; }

.about__portrait { flex: 1 1 380px; min-height: clamp(460px, 50vw, 760px); }

.about__copy {
  flex: 1 1 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 6vw, 100px) clamp(24px, 5vw, 80px);
}

.about__hey {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.about__h2 {
  margin-bottom: 18px;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.about__role {
  margin: 0 0 32px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

.about__p {
  margin: 0 0 22px;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink);
}
.about__p--close { margin-bottom: 40px; font-weight: 400; }

.about__copy .cta { width: fit-content; }

/* --------------------------------------------------------------------------
   11. FREE GUIDE: offset
   -------------------------------------------------------------------------- */

.guide { background: var(--ink); overflow: hidden; padding: clamp(80px, 9vw, 150px) var(--gutter); }

.guide__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(36px, 4vw, 72px);
}

.guide__cover {
  flex: 0 1 340px;
  width: min(100%, 340px);
  aspect-ratio: 3/4;
  margin-bottom: clamp(0px, 4vw, 64px);
}

.guide__copy { flex: 1 1 400px; padding-bottom: clamp(0px, 2vw, 32px); }

.guide__h2 {
  margin-bottom: 26px;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.guide__p { margin-bottom: 20px; max-width: 46ch; }

.guide__micro {
  margin: 0 0 38px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.68;
  font-weight: 300;
  color: var(--white);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   12. FAQ: centred, tight. No dividers between rows.
   -------------------------------------------------------------------------- */

.faq {
  background: var(--white);
  padding: clamp(80px, 9vw, 150px) var(--gutter);
  text-align: center;
}

.faq__inner { max-width: 820px; margin: 0 auto; }
.faq .eyebrow { margin-bottom: 26px; }

.faq__h2 {
  margin-bottom: clamp(44px, 5vw, 72px);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.99;
  letter-spacing: -0.022em;
}

.faq__list { display: flex; flex-direction: column; gap: 38px; text-align: left; }

.faq__q {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.16;
  color: var(--ink);
}

.faq__a { margin: 0; font-size: 16px; line-height: 1.68; font-weight: 300; color: var(--ink); }

.faq__foot { margin-top: clamp(44px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   13. APPLY: final CTA with form, dark block bleeding left
   -------------------------------------------------------------------------- */

.apply { background: var(--white); overflow: hidden; padding: clamp(80px, 9vw, 140px) 0; }

.apply__inner {
  padding-right: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 76px);
}

.apply__bleed {
  flex: 1 1 280px;
  align-self: stretch;
  min-height: 440px;
  margin-left: clamp(-64px, -5vw, -20px);
}

.apply__copy { flex: 1 1 460px; padding-left: clamp(20px, 3vw, 24px); }

.apply__h2 {
  margin-bottom: 24px;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 0.99;
  letter-spacing: -0.02em;
}

.apply__p { margin-bottom: 36px; max-width: 46ch; }

/* --------------------------------------------------------------------------
   FORMS: First Name, Email Address, Phone Number, in that order.
   Solid fills, no borders, no underlines.
   -------------------------------------------------------------------------- */

.apply-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }

.field-group { display: flex; flex-direction: column; gap: 8px; }

.field-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}

.field {
  min-height: 56px;
  background: var(--neutral);
  border: none;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 0 18px;
}
.field:focus { outline: none; }

.apply-form .cta { justify-content: center; margin-top: 8px; }

/* --------------------------------------------------------------------------
   14. FOLLOW ALONG: instagram strip
   -------------------------------------------------------------------------- */

.ig { background: var(--white); padding: 0 0 0; }

.ig__head {
  margin: 0 auto 26px;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ig__label { margin: 0; }

.ig__link {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.ig__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
}
.ig__grid .ph { aspect-ratio: 1/1; padding: 12px; }

/* --------------------------------------------------------------------------
   FOOTER: oversized stacked serif nav, then a three column row
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  padding: clamp(72px, 8vw, 124px) var(--gutter) clamp(36px, 4vw, 52px);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  margin-bottom: clamp(56px, 6vw, 96px);
}

.footer__nav-link {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 104px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  padding: 2px 0;
}
.footer__nav-link--it { font-style: italic; }

.footer__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 48px;
  align-items: center;
}

.footer__wordmark .wordmark__name { font-size: 24px; }

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  justify-content: center;
}
.footer__social a {
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
  line-height: 20px;
  padding: 12px 0;
}

.footer__cta-cell { display: flex; justify-content: flex-end; }

.footer__legal {
  margin-top: clamp(44px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
}
.footer__legal span {
  font-size: 11px;
  font-weight: 300;
  color: var(--white);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   404: utility page, centred on ink. Used by 404.html only.
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 100svh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(60px, 9vw, 150px) var(--gutter);
}

.notfound__h1 {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 5.8vw, 96px);
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: var(--white);
}

.notfound__p { margin: 0 0 38px; max-width: 46ch; }

/* --------------------------------------------------------------------------
   15. SUCCESS STORIES PAGE
   Content slots and the story collage. Spacing values follow the collage
   and shift blocks above. Nothing retuned.
   -------------------------------------------------------------------------- */

/* Labelled content slots. Flat blocks standing in for client words and
   result lines until the real ones land. Same rules as image placeholders. */
.quote-slot  { min-height: clamp(150px, 15vw, 210px); }
.result-slot { min-height: 84px; }
.name-slot   { min-height: 56px; }
.result-slot .ph-label,
.name-slot .ph-label { font-size: 10px; letter-spacing: 0.2em; }

/* Featured story: slots stacked inside the overlapping copy column. */
.shift--tight { padding-top: 0; }

.shift__slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 32px;
  max-width: 480px;
}

/* Stories: staggered cards, each one a photo plus a quote, result and name
   slot. Uneven widths and offsets on purpose, not an even three across grid. */
.stories {
  background: var(--white);
  padding: clamp(80px, 9vw, 150px) var(--gutter);
  overflow: hidden;
}

.stories__head { max-width: 620px; margin: 0 0 clamp(40px, 5vw, 72px) auto; }

.stories__h2 {
  margin-bottom: 24px;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.stories__p { max-width: 50ch; }

.stories__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 32px);
}

.stories__card { display: flex; flex-direction: column; gap: 10px; }
.stories__card--one   { flex: 1 1 300px; }
.stories__card--two   { flex: 1 1 240px; margin-top: clamp(0px, 6vw, 88px); }
.stories__card--three { flex: 1 1 270px; margin-top: clamp(0px, 2.5vw, 36px); }

.stories__photo--tall     { aspect-ratio: 3/4; }
.stories__photo--square   { aspect-ratio: 1/1; }
.stories__photo--vertical { aspect-ratio: 4/5; }

.stories__grid .ph { padding: 16px; }

.stories__foot { margin-top: clamp(44px, 5vw, 76px); }

/* --------------------------------------------------------------------------
   FORM STATES: honeypot, status line, micro line, success block.
   Palette rule holds. No red, no borders, no radius. Ink on neutral,
   weight and wording carry the signal instead of colour.
   -------------------------------------------------------------------------- */

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-micro {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 14px;
  max-width: 44ch;
}

.form-status {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--neutral);
  padding: 16px 18px;
  margin-top: 16px;
  max-width: 480px;
}

.apply-form .cta[aria-busy="true"] { opacity: 0.55; }

.form-done {
  background: var(--neutral);
  padding: clamp(28px, 3.4vw, 44px);
  max-width: 480px;
}

.form-done__h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
}

.form-done__p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink);
}

.form-done__p + .form-done__p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   FORM ON INK: fields are solid white on dark grounds, per the form rules.
   Same components, inverted ground. No borders, no radius, no grey.
   -------------------------------------------------------------------------- */

.field--on-ink { background: var(--white); }
.field-label--on-ink { color: var(--white); }
.form-micro--on-ink { color: var(--white); }
.form-status--on-ink { background: var(--white); }
.form-done--on-ink { background: var(--white); }