/* ==========================================================================
   site-v3 polish — loaded LAST on every page. 2026-10-15: step-1 overrides folded
   into tokens.css / base.css. Only rules that must beat page CSS stay here.
   Rule: no new colours. Only existing tokens via alpha + gradients.
   ========================================================================== */

/* ---- Display type: hero + band headlines win over page selectors of equal specificity ---- */
h1.display-xl, .hero__title { letter-spacing: var(--ls-display-xl); line-height: var(--lh-display-tight); text-wrap: balance; }
h2.display-lg { letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; }

/* ---- Heroes slide under the glass header: the token already holds header height + breakpoint air,
        so page overrides of the top padding (home.css <=1068 .hero) must not win ---- */
.hero, .ab-hero, .c-hero, .wp-hero, .pb-hero { padding-top: var(--hero-pad-top); }

/* ---- Home testimonial panel: calmer initials (still live: home.css has no stronger selector for it) ---- */
.testimonial__initials { font-size: clamp(72px, 9vw, 120px); }

/* ---- White paper card depth ---- */
.wp-card { box-shadow: var(--shadow-rest); }

/* ---- Phone ---- */
@media (max-width: 734px) {
  .logos__title { max-width: none; padding-right: var(--gutter) !important; text-wrap: pretty; }
}

/* ==========================================================================
   SHARED LOOK (area 1, 2026-10-15). One recipe each for: inner-page hero, kicker, hero subtitle, white-card shadow.
   Lives here (loaded last) so page CSS cannot drift from it. Page rules that still repeat these are listed in
   the area-1 report ("overrides to remove"); once they are deleted these rules can move into base.css.
   ========================================================================== */

/* ---- Inner-page heroes: .ab-hero .c-hero .wp-hero .pb-hero ---- */
.ab-hero, .c-hero, .wp-hero, .pb-hero {
  min-height: var(--hero-min-h);
  padding-bottom: var(--hero-pad-bottom);
}
.ab-hero::after, .c-hero::after, .pb-hero::after { background: var(--overlay-hero); }
.ab-hero__text, .c-hero__text, .wp-hero__text, .pb-hero__text {
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-white);
}
@media (max-width: 734px) {
  .ab-hero__text, .c-hero__text, .wp-hero__text, .pb-hero__text { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* ---- Kicker: Montserrat 13px / .14em / 24px yellow rule / 20px to the heading; blue on light, white 80% on dark ---- */
html .kicker, html .kicker--on-dark {
  font-family: var(--font-alt); font-size: var(--fs-label); font-weight: 600; line-height: 1.2;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  margin-bottom: var(--gap-head-intro);
}
html .kicker { color: var(--color-blue-700); }
html .kicker.kicker--on-dark, html .section--blue .kicker, html [data-surface="dark"] .kicker { color: var(--color-on-dark-muted); }
html .kicker::before { width: var(--space-5); height: 2px; border-radius: 2px; }
html .kicker--dot::before { width: 8px; height: 8px; border-radius: var(--radius-pill); }

/* ---- White cards resting on a light band: one soft shadow (the heavy --shadow-rest is for photos and floating cards) ---- */
html .c-card, html .pb-card:not(.pb-card--dark), html .pb-takeaways, html .wp-chapter, html .wp-author { box-shadow: var(--shadow-card-soft); }

/* ---- Form labels: one voice (Montserrat, same tracking as the kicker) ---- */
html .c-form .field__label, html .wp-form .field__label { font-family: var(--font-alt); }
.wp-form__title + .wp-form__small { margin-bottom: var(--space-2); }   /* required-fields note sits clear of the first label */

/* ---- Two-line rule: no stray short last line in body copy; two-line headings run long line first ---- */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
h1.display-xl.ab-hero__title, h1.display-xl.c-hero__title { text-wrap: pretty; }   /* long line first, short line second */
@media (min-width: 1069px) { h1.display-xl.ab-hero__title { max-width: 860px; } }   /* "Build a Business That Doesn't / Depend on You" */

/* section sub-lines that fit on one line, stay on one line (desktop) */
@media (min-width: 1100px) {
  .future__sub, .levels__sub, .system__sub, .c-hero__text { max-width: none; }
  .system-card__title { white-space: nowrap; }
}
.future__copy-title { text-wrap: pretty; }   /* long line first */
.pb-newsletter__text, .pb-cta__text { text-wrap: balance; }

/* Coaching band ("A proven coaching system"): heading + video centred */
.coaching { text-align: center; }
.coaching__title { margin-inline: auto; max-width: none; }
.coaching .video { margin-inline: auto; }

/* ---- Home video: play button + "releasing soon" pop-up ---- */
.video__play {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 74px; padding: 0 0 0 6px; border: 0; cursor: pointer;
  border-radius: var(--radius-lg); background: var(--color-red-play);
  filter: var(--shadow-play);
  transition: transform .2s ease;
}
.video__play::before { content: ""; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid var(--color-navy-900); }
.video__play:focus-visible { outline: 3px solid var(--color-yellow-400); outline-offset: 4px; }
@media (hover: hover) { .video__play:hover { transform: translate(-50%, -50%) scale(1.06); } }
.video__play:active { transform: translate(-50%, -50%) scale(0.95); }
@media (max-width: 1068px) {
  .video__play { width: 72px; height: 52px; border-radius: var(--radius-sm); }
  .video__play::before { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
}
.video-modal { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); overflow: visible; }
.video-modal::backdrop { background: rgba(2, 6, 21, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-modal__box {
  position: relative; width: min(520px, calc(100vw - 32px)); padding: var(--space-8) var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
  background: var(--color-white); color: var(--color-blue-700); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest);
}
.video-modal__badge { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; color: var(--color-text-muted); }
.video-modal__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display); text-transform: uppercase; }
.video-modal__text { margin: 0; color: var(--color-text-muted); }
.video-modal__close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--color-blue-700); cursor: pointer; }
.video-modal__close:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 2px; border-radius: 8px; }

/* Future State: equal side columns so the centre portrait sits on the page centre */
@media (min-width: 1069px) { .future__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr); } }
/* Future State portrait: Shay sits at the middle of the photo, so crop from the middle (was 60%, which pushed him left in the frame) */
.future__photo--portrait img { object-position: 50% 50%; }

/* Leadership Transformation System cards: whole card is a button that opens the "releasing soon" pop-up */
.system-card { position: relative; }
.system-card__open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.system-card__open:focus-visible { outline: 3px solid var(--color-yellow-400); outline-offset: -3px; }

/* ---- Home white paper: slim band, big tilted cover cropped by the band edges, compact card (desktop) ---- */
@media (min-width: 1069px) {
  .whitepaper { padding: 0; height: clamp(340px, 24.5vw, 520px); }
  .whitepaper .container.whitepaper__inner { position: static; display: block; max-width: none; height: 100%; padding: 0; margin: 0; }
  .whitepaper__book {
    position: absolute; left: 30%; top: 54%; width: 21vw; max-width: none; justify-self: auto;
    transform: translate(-50%, -50%) rotate(-24deg);   /* shows title, the 5 and Shay's face; edges still crop the book */
  }
  .whitepaper__card {
    position: absolute; left: 56%; top: 50%; transform: translateY(-50%);
    width: 30%; max-width: none; padding: var(--space-6) var(--space-7); gap: var(--space-3);
  }
  .whitepaper__card h2 { font-size: var(--fs-display-sm); max-width: none; }
  .whitepaper__card .btn { margin-top: var(--space-2); }
}

/* ---- Home white paper, tablet + phone: same slim band, cover cropped by the edges ---- */
@media (min-width: 735px) and (max-width: 1068px) {
  .whitepaper { padding: 0; height: clamp(320px, 42vw, 440px); }
  .whitepaper .container.whitepaper__inner { position: static; display: block; max-width: none; height: 100%; padding: 0; margin: 0; }
  .whitepaper__book { position: absolute; left: 24%; top: 56%; width: 33vw; max-width: none; justify-self: auto; transform: translate(-50%, -50%) rotate(-24deg); }
  .whitepaper__card { position: absolute; left: 45%; top: 50%; transform: translateY(-50%); width: 50%; max-width: none; padding: var(--space-5) var(--space-6); gap: var(--space-3); }
  .whitepaper__card h2 { font-size: var(--fs-display-sm); max-width: none; }
}
@media (max-width: 734px) {
  .whitepaper { padding: 0; }
  .whitepaper .container.whitepaper__inner { position: relative; display: block; max-width: none; margin: 0; padding: 232px var(--gutter) var(--space-7); }
  /* cover top (logo + title) fully visible; only its lower part tucks behind the card */
  .whitepaper__book { position: absolute; left: 50%; top: 36px; width: min(50vw, 220px); max-width: none; justify-self: auto; transform: translateX(-50%) rotate(-10deg); transform-origin: 50% 0; }
  .whitepaper__card { position: relative; z-index: 2; width: 100%; max-width: none; padding: var(--space-5); gap: var(--space-3); }
  .whitepaper__card h2 { font-size: var(--fs-display-sm); max-width: none; }
}

/* ==========================================================================
   Compact footer (logo | same nav as header | socials, then one small legal line) + "under construction" ticker
   ========================================================================== */
.site-footer__inner { padding-block: var(--space-5); gap: var(--space-5); }
.site-footer__inner .logo--footer img { height: 28px; width: auto; }
.site-footer__nav { justify-self: center; }
.site-footer .site-footer__links { gap: 0 var(--space-6); }
.site-footer .site-footer__links li, .site-footer .site-footer__links a { min-height: 44px; }
.site-footer .site-footer__links a { font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.site-footer .site-footer__links a:hover { color: var(--color-white); }
.site-footer .social-list { justify-self: end; }
.site-footer .social-list a { width: 36px; height: 36px; }
.site-footer .social-list img { width: 16px; height: 16px; }
.site-footer__bar { border-top: 1px solid var(--color-border-dark); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0;
  padding-block: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-on-dark-faint);
}
.site-footer__legal li { display: flex; align-items: center; }
.site-footer__legal li + li::before { content: "|"; margin-inline: var(--space-3); opacity: .5; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-on-dark-muted); }
.site-footer__legal a:hover { color: var(--color-white); }
@media (max-width: 1068px) {
  .site-footer__inner { flex-direction: column; gap: var(--space-3); padding-block: var(--space-6) var(--space-4); }
  .site-footer .site-footer__links { gap: 0 var(--space-5); }
  .site-footer .social-list { justify-self: center; }
}
@media (max-width: 734px) {
  .site-footer__legal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); }
  .site-footer__legal li:first-child { flex-basis: 100%; justify-content: center; text-align: center; }
  .site-footer__legal li + li::before { content: none; }
  .site-footer__legal a { min-height: 40px; }
}

/* running "under construction" banner, very bottom of every page (last thing inside the footer) */
.uc-banner { background: var(--color-yellow-400); color: var(--color-navy-900); overflow: hidden; height: 34px; display: flex; align-items: center; }
.uc-banner__track { display: flex; width: max-content; animation: uc-run 38s linear infinite; }
.uc-banner__group { display: flex; flex: none; }
.uc-banner__item { flex: none; padding-inline: var(--space-6); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.uc-banner__item::after { content: "\2022"; margin-left: calc(var(--space-6) * 2); opacity: .55; }
@keyframes uc-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .uc-banner { justify-content: center; }
  .uc-banner__track { animation: none; width: auto; }
  .uc-banner__group { display: none; }
  .uc-banner__track::before { content: "This site is under construction"; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
}
.site-footer__legal li:last-child { display: block; }   /* keeps the space in "Made by araCreate" (flex dropped it) */
.site-footer__legal li:last-child a { display: inline; min-height: 0; }

/* ---- About: headings and lead lines use the width they have, so no stray extra lines (desktop) ---- */
@media (min-width: 1069px) {
  #ab-architect-title, #ab-who-title { max-width: none; }                     /* one line each */
  .ab-hero__text { max-width: 1160px; }                                        /* hero paragraph: 2 lines */
  .ab-who__body { max-width: none; }
  .ab-who__lead { max-width: 1000px; }                                          /* 2 lines, long line first */
  .ab-who__text { max-width: var(--measure-intro); }
  .ab-what__lead { max-width: 664px; }                                         /* its column only: the photo sits on the right */
  .ab-mission .display-sm.text-yellow { max-width: none; }
  .ab-who__close { max-width: 1100px; text-wrap: pretty; }                     /* 2 lines, long line first */
}

.u-nowrap { white-space: nowrap; }   /* keeps "10–200" together */

/* About -> "About Future State" closing text: uses the full column (desktop), balanced so no one-word last line */
@media (min-width: 1069px) { .ab-cta__about p { max-width: none; text-wrap: balance; } }

/* ---- White paper: no stray lines (desktop) ---- */
.wp-br { display: none; }
@media (min-width: 1360px) {
  .wp-br { display: inline; }
  .wp-hero__title { width: 800px; max-width: none; text-wrap: wrap; }   /* "Top 5 Leadership Challenges" / "to Beat": long line first, uses the gap before the book */
}
@media (min-width: 1069px) {
  .wp-audience__title { max-width: none; }                              /* one line */
  .wp-lead { max-width: 1000px; text-wrap: pretty; }                    /* intro lines use the width they have */
}
@media (min-width: 1069px) { .wp-evidence .wp-lead { max-width: 1000px; } }   /* contributors paragraph: 3 lines, not 5 */

/* White paper author card (desktop): full width kept; the photo and text grow taller to fill it, so no empty space */
@media (min-width: 1069px) {
  .wp-author { max-width: none; margin-inline: 0; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); justify-content: stretch; gap: var(--space-8); padding-left: var(--space-8); }
  .wp-author__body { padding-block: var(--space-8); padding-right: var(--space-9); }
  .wp-author__text { max-width: 780px; font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty; }
  .wp-author__name { font-size: var(--fs-display-lg); }
}

/* Playbook articles: highlights box text (plain paragraphs + bold labels like "The Challenge") */
.pb-takeaways__text { margin: 0; font-size: var(--fs-body); line-height: var(--pb-lh-article, var(--lh-body)); color: var(--color-text-muted); }
.pb-takeaways__text strong { font-weight: 600; color: var(--color-blue-700); }
.pb-takeaways .pb-takeaways__text + .pb-takeaways__list, .pb-takeaways .pb-takeaways__list + .pb-takeaways__text, .pb-takeaways .pb-takeaways__text + .pb-takeaways__text { margin-top: var(--space-3); }
.pb-body strong { font-weight: 600; color: var(--color-blue-700); }
.pb-takeaways__list strong { font-weight: 600; color: var(--color-blue-700); }

/* ---- Playbook: no stray lines (desktop) ---- */
@media (min-width: 1069px) {
  .pb-hero:not(.pb-hero--post) .pb-hero__text { max-width: 1240px; }          /* listing intro: 2 lines */
  .pb-hero--post .pb-hero__title { font-size: var(--fs-display-lg); text-wrap: pretty; }   /* article titles: 2 lines, not 3 */
}

/* ---- White paper hero: premium stage for the new light cover (texture, spotlight, ring, depth) ---- */
.wp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background: repeating-linear-gradient(-28deg, var(--color-white) 0 1px, transparent 1px 46px);
}
.wp-book::before {
  inset: -30% -42%;
  background:
    radial-gradient(38% 38% at 50% 46%, rgba(120, 175, 255, 0.40) 0%, rgba(35, 136, 255, 0.14) 55%, rgba(35, 136, 255, 0) 100%);
}
.wp-book::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 193, 14, 0.45);
}
.wp-book__cover { box-shadow: 0 50px 90px rgba(2, 6, 21, 0.60), 0 18px 34px rgba(2, 6, 21, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.10); }
@media (min-width: 1069px) {
  .wp-book { transform: perspective(1800px) rotateY(-9deg); transform-origin: 50% 50%; }
}

/* ---- White paper: a real hero (title, intro, facts, one button, book); the form is a pop-up ---- */
.wp-hero__cta { margin-top: var(--space-6); }
.wp-modal { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: visible; }
.wp-modal::backdrop { background: rgba(2, 6, 21, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wp-modal__box { position: relative; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: var(--radius-lg); background: var(--gradient-dark); color: var(--color-white); box-shadow: var(--shadow-rest), 0 0 0 1px var(--hairline-dark); padding: var(--space-7) var(--space-6) var(--space-6); }
.wp-modal .wp-form { margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0; }
.wp-modal__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--color-white); cursor: pointer; }
.wp-modal__close:focus-visible { outline: 2px solid var(--color-yellow-400); outline-offset: 2px; border-radius: 8px; }
@media (min-width: 1069px) {
  .wp-hero__grid { align-items: center; }
  .wp-book { max-width: 400px; margin-top: 0; }
}