/* Build Better components. Source of truth: Build_Better_DESIGN.md 6 */

/* ---- Layout ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section   { padding-block: var(--section-y); }
.section--cream { background: var(--cream); color: var(--grey); }
.section--cream h2, .section--cream h3 { color: var(--grey); }
/* Dark cards inside a light section must reset the inherited colour,
   or text lands #202020 on #202020. */
.section--cream .card,
.section--cream .pricing { color: var(--white); }
.section--cream .card h2, .section--cream .card h3,
.section--cream .pricing h2, .section--cream .pricing h3 { color: var(--white); }
.section--cream .card .arrows li::before,
.section--cream .pricing .arrows li::before { color: var(--gold); }
.measure { max-width: var(--measure); }

/* ---- Eyebrow: the lockup marks every section ---- */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: normal; line-height: 1.0;
  color: var(--white); margin-bottom: var(--s-4);
}
.section--cream .eyebrow { color: var(--grey); }
/* the mark stays gold, the label is white. Matches transformperform.ai */
.eyebrow__mark { width: 24px; height: 24px; flex: none; }

/* ---- CTAs ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: 0 var(--s-4) 0 var(--s-6);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--display-font); font-weight: 700; font-size: var(--fs-button);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

/* BLACK on gold. 13:1. White on gold is 1.62:1 and is never used. */
.btn--primary { background: var(--gold); color: var(--black); }
.btn--primary:hover { filter: brightness(1.08); }

.btn--secondary { background: var(--grey); color: var(--white); }
.btn--secondary:hover { background: #2b2b2b; }

/* Ghost is dark backgrounds only */
.btn--ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn--ghost:hover { background: rgba(250,196,47,0.08); }

.btn__arrow {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.18);
}
.btn--secondary .btn__arrow, .btn--ghost .btn__arrow { background: rgba(250,196,47,0.18); }
.btn__arrow svg { width: 14px; height: 14px; }

/* ---- Arrow bullets. The list style for this brand. Never discs. ---- */
.arrows { list-style: none; margin: 0 0 var(--s-5); padding: 0; max-width: var(--measure); }
.arrows li { display: flex; gap: var(--s-4); margin-bottom: var(--s-3); }
.arrows li::before {
  content: "→"; color: var(--gold); flex: none; line-height: 1.6; font-weight: 500;
}
.section--cream .arrows li::before { color: #8a6a00; } /* gold glyph fails on cream, darkened */

/* ---- Cards ---- */
.card {
  background: var(--grey); border-radius: var(--radius-card);
  padding: var(--s-6); /* no shadow, no border */
}
.cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Pricing card ---- */
.pricing {
  background: var(--grey); border-radius: var(--radius-card);
  padding: var(--s-6); border-top: 2px solid var(--gold);
  max-width: 560px;
}
.pricing__price {
  font-family: var(--display-font); font-weight: 700; font-size: var(--fs-stat);
  color: var(--gold); line-height: 1; letter-spacing: -0.01em; margin: 0 0 var(--s-2);
}
.pricing__meta { color: #C9C9C9; font-size: var(--fs-small); margin-bottom: var(--s-5); }

/* ---- Stat block ---- */
.stat__num {
  font-family: var(--display-font); font-weight: 700; font-size: var(--fs-stat);
  color: var(--gold); line-height: 1; letter-spacing: -0.01em;
}
.stat__label { font-size: var(--fs-small); color: #C9C9C9; }

/* ---- Watermark letterform: one letter per pillar ---- */
.hero { position: relative; overflow: hidden; padding-block: var(--section-y); }
.hero__mark {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: var(--display-font); font-weight: 700;
  font-size: clamp(20rem, 42vw, 38rem); line-height: 0.8;
  color: var(--grey); z-index: 0; user-select: none; pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero__sub { font-size: var(--fs-body-lg); color: #D8D8D8; max-width: var(--measure); }
.hero__format { font-size: var(--fs-small); color: #C9C9C9; margin-top: var(--s-5); }
.hero h1 { color: var(--gold); }
.hero h1 .u { display: block; }

/* ---- Nav ---- */
.nav { border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); }
.nav__logo { display: flex; align-items: center; gap: var(--s-3); }
.nav__logo img { height: 34px; width: auto; }
.nav__logo span { font-family: var(--body-font); font-size: var(--fs-small); color: var(--white); letter-spacing: 0.02em; }

/* ---- Footer ---- */
.footer { border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--s-8); color: #B3B3B3; font-size: 0.9375rem; }
.footer a { color: var(--gold); }
.footer__tp { margin-top: var(--s-4); }

/* ---- Divider ---- */
.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }

/* ---- Form ---- */
.field {
  width: 100%; background: var(--grey); border: 1px solid var(--field);
  color: var(--white); border-radius: 8px; padding: var(--s-3) var(--s-4);
  font-family: var(--body-font); font-size: var(--fs-body); min-height: 52px;
}
.field::placeholder { color: #8A8A8A; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Hero with photo. Hard edge, no gradient: matches the social tiles. ---- */
.hero--photo { padding-block: 0; }
.hero--photo .hero__grid {
  display: grid; grid-template-columns: 1fr; align-items: center;
  min-height: 560px;
}
.hero--photo .hero__copy { padding-block: var(--section-y); position: relative; z-index: 1; }
.hero__photo {
  position: relative; min-height: 320px; align-self: stretch;
  background-size: cover; background-position: center 42%;
  filter: grayscale(100%) contrast(1.05);
}
@media (min-width: 900px) {
  .hero--photo .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-9); }
  .hero--photo .hero__mark { right: auto; left: -4%; opacity: 0.85; }
  .hero__photo { min-height: 560px; }
  /* photo bleeds to the viewport edge */
  .hero__photo--bleed { margin-right: calc((100% - 100vw) / 2 + var(--gutter)); }
}

/* Editorial band: a full-width dark photo strip between sections */
.band {
  /* Shape comes from the photo (2000x559), so nothing is ever cropped.
     A fixed height cut a third off the top and bottom at 1920px. */
  aspect-ratio: 2000 / 559;
  width: 100%;
  min-height: 150px;
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.05);
  border-block: 1px solid rgba(255,255,255,0.06);
}

/* ---- Split block: portrait image beside a text column ---- */
.split { display: grid; gap: var(--s-8); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-10); } }
.split__img {
  min-height: 380px; border-radius: var(--radius-card);
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.05);
}
@media (min-width: 900px) { .split__img { min-height: 520px; } }

/* Quiet nav CTA: must not compete with the £97 button */
.btn--quiet { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.25); }
.btn--quiet:hover { border-color: var(--white); }
.btn--quiet .btn__arrow { background: rgba(255,255,255,0.12); }

/* Pillar tiles on the homepage */
.tile { display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--grey); text-decoration: none; color: var(--white); }
.tile:hover { text-decoration: none; }
.tile:hover .tile__img { filter: grayscale(100%) contrast(1.15) brightness(1.1); }
.tile__img { height: 180px; background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.05); transition: filter .2s; }
.tile__body { padding: var(--s-5); }
.tile__body h3 { margin-bottom: var(--s-2); }
.tile__body p { color: #C9C9C9; font-size: var(--fs-small); margin: 0; }
@media (min-width: 768px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .cards--4 { grid-template-columns: 1fr 1fr; } }

/* Lead paragraph: was an H2 holding a whole sentence, which is neither */
.lead { font-size: var(--fs-body-lg); color: var(--white); max-width: var(--measure); }

/* Session times in the pricing card */
.pricing__note { font-size: var(--fs-small); color: #C9C9C9; margin: var(--s-5) 0 var(--s-3); }
.arrows--times li { margin-bottom: var(--s-2); font-size: var(--fs-small); }
.arrows--times strong { white-space: nowrap; }
.arrows--times strong { color: var(--gold); font-weight: 700; }

/* ---- FAQ. Visual match to transformperform.ai: gold Barlow Condensed 22px
   questions, 18px Barlow answers. Uses details/summary so the answers are in
   the DOM for crawlers and it works without JavaScript. ---- */
.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.section--cream .faq__item { border-bottom-color: rgba(32,32,32,0.15); }
.faq__q {
  font-family: var(--display-font); font-size: 1.375rem; font-weight: 700;
  line-height: 1.2; color: var(--gold); cursor: pointer; list-style: none;
  padding: var(--s-5) 40px var(--s-5) 0; position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.75rem; font-weight: 400; line-height: 1;
}
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__a { padding: 0 0 var(--s-5); }
.faq__a p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: #E4E4E4; max-width: 68ch; }
.is-pending { opacity: .55; }
.localtime { color: #C9C9C9; }

/* ---- Homepage: proof strip ---- */
.proof { display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); align-items:center; margin-top:var(--s-5); }
.proof__name { font-family:var(--display-font); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; color:#EDEDED; font-size:1.0625rem; line-height:1.1; }
.proof__sep { color:var(--gold); font-weight:700; }

/* ---- Homepage: stats row ---- */
.stats { display:grid; grid-template-columns:1fr; gap:var(--s-6); margin-top:var(--s-6); }
@media (min-width:720px){ .stats{ grid-template-columns:repeat(3,1fr);} }
.stats .stat__num{ display:block; }
.stats .stat__label{ display:block; margin-top:var(--s-2); max-width:22ch; }

/* ---- Homepage: newsletter form ---- */
.form { display:grid; gap:var(--s-3); max-width:560px; margin-top:var(--s-6); }
.form .btn{ justify-content:center; }
.form__fineprint{ font-size:var(--fs-small); color:#9C9C9C; margin-top:var(--s-3); }

/* Portrait that keeps its colour (the gold-circle cut-out) */
.split__img--plain{ filter:none; background-position:center top; background-size:cover;
  background-repeat:no-repeat; min-height:420px; }

/* Hero subheadline: force each phrase onto its own row */
.hero__line { display:block; }
.hero__line + .hero__line { margin-top:var(--s-2); }