/* ===========================================================================
   Phoenix Coaching — marketing site (UI kit layout)
   Kit-specific layout only; all colour/type/spacing comes from the DS tokens.
   =========================================================================== */

.pc-site { background: var(--surface-canvas); color: var(--text-primary); min-height: 100%; }
.pc-wrap { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--space-6); }
.pc-section { padding-block: var(--space-11); }
.section-head { max-width: 720px; margin-bottom: var(--space-8); }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; margin-bottom: var(--space-4); }
.section-head h2 { margin: 0 0 var(--space-4); }
.section-head p { color: var(--text-secondary); font-size: var(--fs-md); margin: 0; max-width: 56ch; }

/* ---- Art-directed photo placeholders (stand-ins for grounded photography) */
.pc-photo {
  position: relative; overflow: hidden; background: #131210;
  background-image:
    radial-gradient(120% 120% at 70% 10%, rgba(201,162,39,0.10), transparent 55%),
    linear-gradient(160deg, #1c1a17 0%, #0d0d0d 70%);
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
}
.pc-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: screen;
}
.pc-photo__mark { width: 38%; max-width: 160px; opacity: 0.16; filter: grayscale(0.2); }
.pc-photo__tag {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-faint);
  background: rgba(13,13,13,0.6); padding: 0.4em 0.7em; border-radius: var(--radius-sm);
  backdrop-filter: var(--blur-sm);
}
.pc-photo--scrim::before {
  content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); z-index: 1;
}

/* ---- Header / nav -------------------------------------------------------- */
.pc-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), backdrop-filter var(--dur-base);
}
.pc-header--scrolled {
  background: rgba(13,13,13,0.82); backdrop-filter: var(--blur-glass);
  border-bottom-color: var(--border-subtle);
}
.pc-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.pc-logo { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.pc-logo img { height: 34px; display: block; }
.pc-nav { display: flex; align-items: center; gap: var(--space-6); }
.pc-nav a {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--text-secondary);
  text-transform: none; cursor: pointer;
}
.pc-nav a:hover { color: var(--gold); }
.pc-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.pc-burger { display: none; background: none; border: 0; color: var(--text-primary); cursor: pointer; padding: 8px; }
.pc-burger svg { width: 26px; height: 26px; }

/* ---- Hero ---------------------------------------------------------------- */
.pc-hero { position: relative; padding-top: var(--space-10); padding-bottom: var(--space-11); overflow: hidden; }
.pc-hero::before {
  content: ""; position: absolute; inset: 0; background: var(--grad-canvas-lift); pointer-events: none;
}
.pc-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9); align-items: center; }
.pc-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5em; margin-bottom: var(--space-5); }
.pc-hero h1 { font-size: var(--fs-5xl); margin: 0 0 var(--space-5); }
.pc-hero h1 .g { color: var(--gold); }
.pc-hero__lead { font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-body); max-width: 46ch; margin: 0 0 var(--space-7); }
.pc-hero__cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.pc-hero__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
.pc-hero__stats { display: flex; gap: var(--space-8); flex-wrap: wrap; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

/* ---- Method grid --------------------------------------------------------- */
.pc-method__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.pc-method__ico { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); margin-bottom: var(--space-5); }
.pc-method__ico svg { width: 24px; height: 24px; }
.pc-method__n { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-wider); color: var(--text-faint); margin-bottom: var(--space-2); }
.pc-method h4 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); }
.pc-method p { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ---- About me ------------------------------------------------------------ */
.pc-about__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-9); align-items: center; }
.pc-about__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.pc-about__body .eyebrow { display: inline-flex; align-items: center; margin-bottom: var(--space-4); }
.pc-about__body h2 { margin: 0 0 var(--space-5); }
.pc-about__body h2 .g { color: var(--gold); }
.pc-about__lead { font-size: var(--fs-md); color: var(--text-primary); line-height: var(--lh-body); margin: 0 0 var(--space-4); max-width: 52ch; }
.pc-about__body > p { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 var(--space-7); max-width: 56ch; }
.pc-about__creds { list-style: none; margin: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-5); }
.pc-about__creds li { display: flex; gap: var(--space-4); align-items: flex-start; }
.pc-about__cred-ico { flex: none; width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); }
.pc-about__cred-ico svg { width: 22px; height: 22px; display: block; }
.pc-about__creds strong { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--text-primary); margin-bottom: var(--space-1); }
.pc-about__creds > li > div > span { display: block; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ---- Results / proof + client story -------------------------------------- */
.pc-results { background: var(--surface-raised); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.pc-results__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-bottom: var(--space-9); margin-bottom: var(--space-9); border-bottom: 1px solid var(--border-subtle); }
.pc-results__story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); align-items: center; }
.pc-results__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.pc-results__quote .eyebrow { display: inline-flex; align-items: center; margin-bottom: var(--space-5); }
.pc-results__substats { display: flex; gap: var(--space-8); margin-top: var(--space-7); flex-wrap: wrap; }

/* ---- Coaching options ---------------------------------------------------- */
.pc-coaching__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.pc-plan { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.pc-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.pc-plan h3 { margin: 0; font-size: var(--fs-2xl); }
.pc-plan__sub { color: var(--text-secondary); font-size: var(--fs-sm); margin: var(--space-2) 0 0; }
.pc-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pc-plan__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.5; }
.pc-plan__list svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; stroke-width: 2.25; }
.pc-plan__foot { margin-top: auto; padding-top: var(--space-4); }

/* ---- Apply / CTA --------------------------------------------------------- */
.pc-apply__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--space-9); align-items: center; }
.pc-apply h2 { font-size: var(--fs-4xl); margin: 0 0 var(--space-5); }
.pc-apply h2 .g { color: var(--gold); }
.pc-apply p { color: var(--text-secondary); font-size: var(--fs-md); margin: 0 0 var(--space-6); max-width: 44ch; }
.pc-form { display: flex; flex-direction: column; gap: var(--space-5); }
.pc-form__msg { display: flex; align-items: center; gap: var(--space-3); color: var(--success); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.pc-form__msg svg { width: 20px; height: 20px; }

/* ---- Footer -------------------------------------------------------------- */
.pc-footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-9) var(--space-7); }
.pc-follow {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-9); align-items: center;
  padding-bottom: var(--space-8); margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}
.pc-follow__text h3 { margin: var(--space-3) 0 var(--space-3); font-size: var(--fs-2xl); }
.pc-follow__text p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0 0 var(--space-5); max-width: 44ch; }
.pc-follow__text p strong { color: var(--gold); font-weight: var(--fw-bold); }
.pc-qr-tile {
  flex: none; background: var(--warm-white); border-radius: var(--radius-lg);
  padding: var(--space-3); box-shadow: var(--shadow-md), var(--glow-gold-sm);
}
.pc-qr-tile img { width: 150px; height: 150px; display: block; object-fit: contain; }
.pc-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.pc-footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.pc-footer__brand img { height: 30px; }
.pc-footer__tag { font-family: var(--font-quote); font-style: italic; font-weight: 700; color: var(--text-muted); font-size: var(--fs-base); }
.pc-socials { display: flex; gap: var(--space-3); }
.pc-socials a { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.pc-socials a:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.pc-socials svg { width: 18px; height: 18px; }
.pc-footer__legal { color: var(--text-faint); font-size: var(--fs-xs); }

/* ---- Static-build helpers (mobile menu + form states) -------------------- */
.pc-mobile-nav { display: none; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.pc-mobile-nav a { color: var(--text-secondary); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--ls-wide); cursor: pointer; }
.pc-mobile-nav a:hover { color: var(--gold); }
body.pc-menu-open .pc-mobile-nav { display: flex; }
.pc-burger__x { display: none; }
body.pc-menu-open .pc-burger__menu { display: none; }
body.pc-menu-open .pc-burger__x { display: inline-flex; }

.pc-apply__sent { display: none; flex-direction: column; gap: 12px; padding: 8px 0; }
.pc-apply__sent p { color: var(--text-secondary); margin: 0; font-size: 14px; }
.pc-apply__sent-actions { margin-top: 8px; }
.pc-apply__card.is-sent .pc-form { display: none; }
.pc-apply__card.is-sent .pc-apply__sent { display: flex; }

/* ---- Hero photo + picker ------------------------------------------------- */
.pc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pc-hero__media.has-photo .pc-photo__mark { display: none; }
.pc-about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; }
.pc-about__media.has-photo .pc-photo__mark { display: none; }
.pc-hero__logo {
  position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  z-index: 3; width: 46%; max-width: 300px; height: auto; pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}
.pc-photo__pick {
  position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-primary); cursor: pointer;
  background: rgba(13,13,13,0.66); backdrop-filter: var(--blur-sm);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 0.55em 0.9em;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
.pc-photo__pick:hover { color: var(--gold); border-color: var(--gold); background: rgba(13,13,13,0.82); }
.pc-photo__pick svg { width: 15px; height: 15px; }

.pc-picker {
  position: absolute; right: var(--space-4); bottom: calc(var(--space-4) + 44px); z-index: 4;
  width: min(340px, calc(100% - var(--space-6)));
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-4);
}
.pc-picker__head {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.pc-picker__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.pc-picker__opt {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: var(--surface-well); aspect-ratio: 4 / 5;
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}
.pc-picker__opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-picker__opt:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.pc-picker__opt.is-active { border-color: var(--gold); }
.pc-picker__opt--none {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em;
  color: var(--text-muted); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.pc-picker__opt--none svg { width: 18px; height: 18px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .pc-nav { display: none; }
  .pc-burger { display: inline-flex; }
  .pc-hero__grid, .pc-about__grid, .pc-results__story, .pc-apply__grid { grid-template-columns: 1fr; }
  .pc-hero__media, .pc-about__media { aspect-ratio: 4 / 5; }
  .pc-results__media { aspect-ratio: 16 / 10; }
  /* About: stack as heading → image → bio on mobile */
  .pc-about__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .pc-about__body { display: contents; }
  .pc-about__body .eyebrow { order: 1; }
  .pc-about__body h2 { order: 2; }
  .pc-about__media { order: 3; margin-bottom: var(--space-7); }
  .pc-about__lead { order: 4; }
  .pc-about__body > p { order: 5; }
  .pc-about__creds { order: 6; }
  .pc-method__grid { grid-template-columns: 1fr 1fr; }
  .pc-results__stats { grid-template-columns: 1fr 1fr; }
  .pc-coaching__grid { grid-template-columns: 1fr; }
  .pc-hero h1 { font-size: var(--fs-4xl); }
  .pc-follow { grid-template-columns: 1fr; justify-items: start; }
}


/* ---- Results · before & after collage ----------------------------------- */
.pc-results__collage { padding-bottom: var(--space-9); margin-bottom: var(--space-9); border-bottom: 1px solid var(--border-subtle); }
.pc-collage__head { margin-bottom: var(--space-6); }
.pc-collage__head .eyebrow { display: inline-flex; margin-bottom: var(--space-3); }
.pc-collage__head p { color: var(--text-muted); max-width: 52ch; }
.pc-collage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pc-collage__cell {
  position: relative; padding: 0; margin: 0; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--surface-well);
  aspect-ratio: 1 / 1;
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
.pc-collage__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-collage__cell:hover { border-color: var(--gold); transform: translateY(-2px); }
.pc-collage__cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pc-collage__cell.is-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-style: dashed; border-color: var(--border-default);
}
.pc-collage__cell.is-empty img { display: none; }
.pc-collage__cell.is-empty .pc-collage__edit { opacity: 1; position: static; background: none; border: none; width: auto; height: auto; }
.pc-collage__edit {
  position: absolute; right: var(--space-2); top: var(--space-2); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: rgba(13, 13, 13, 0.72); color: var(--text-primary); border: 1px solid var(--border-strong);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
  backdrop-filter: var(--blur-sm);
}
.pc-collage__cell:hover .pc-collage__edit,
.pc-collage__cell:focus-visible .pc-collage__edit { opacity: 1; }
.pc-collage__edit svg { width: 15px; height: 15px; }

.pc-collage__overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  background: var(--surface-overlay); backdrop-filter: var(--blur-sm);
}
.pc-collage__overlay[hidden] { display: none; }
.pc-collage__dialog {
  width: min(560px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.pc-collage__dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
}
.pc-collage__close { display: inline-flex; padding: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.pc-collage__close:hover { color: var(--gold); }
.pc-collage__close svg { width: 18px; height: 18px; }
.pc-collage__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); padding: var(--space-4); overflow-y: auto; }
.pc-collage__options .pc-picker__opt { aspect-ratio: 1 / 1; }
.pc-apply__card--cta { display: flex; align-items: center; }
.pc-apply__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; }
.pc-apply__cta-eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--gold); }
.pc-apply__cta-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.pc-apply__cta-copy { color: var(--text-muted); }
.pc-apply__cta .pc-btn { margin-top: var(--space-2); }
.pc-apply__cta-note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-faint); }
.pc-apply__cta-note svg { width: 14px; height: 14px; }
.pc-results__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pc-results__media.has-photo .pc-photo__mark { display: none; }

@media (max-width: 720px) {
  .pc-collage__grid { grid-template-columns: repeat(2, 1fr); }
}