/*
 * Home page. Loaded only on the front page, after main.css.
 */

/* Hero: full-bleed photo with the header, copy and calls to action on top */
.home-hero { position: relative; display: flex; flex-direction: column; height: 100vh; min-height: 100svh; max-height: 1000px; padding: var(--header-height) 0 0; overflow: hidden; color: #fff; background: var(--deep); }
/* The photo is 122% wide, so when it is scaled to the width its height is 122vw / 1.5 = 81.5vw and the
   top of Clara's hair sits at 7.9% of that, about 6.4vw. Shifting the crop by that amount keeps her head
   below the header (--hero-hair-top) at any width (a % position cut it off on 28" screens). The 100svh - 81.5vw bound
   stops the shift before it opens a gap at the bottom; min(0px) stops a gap at the top. */
.home-hero-photo { position: absolute; top: 0; left: -22%; width: 122%; max-width: none; height: 100%; object-fit: cover; object-position: 50% min(0px, max(var(--hero-hair-top) - 6.4vw, 100svh - 81.5vw)); }
.home-hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,36,42,.62) 0%, rgba(10,36,42,0) 22%),
  linear-gradient(270deg, rgba(10,36,42,.9) 0%, rgba(10,36,42,.74) 38%, rgba(10,36,42,.15) 60%, rgba(10,36,42,0) 70%),
  linear-gradient(0deg, rgba(10,36,42,.72) 0%, rgba(10,36,42,0) 30%); }
.home-hero-body { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; }
.home-hero-body .wrap { width: 100%; display: flex; justify-content: flex-end; }
/* fit-content: the longest headline line ends exactly at the right edge, under the header button. */
.home-hero-copy { width: fit-content; max-width: 640px; padding-top: 10px; }
.home-hero-copy .eyebrow { color: var(--gold-text); }
.home-hero-copy .eyebrow::before { content: ""; display: inline-block; width: 36px; height: 1px; margin: -3px 14px 0 0; vertical-align: middle; background: var(--gold-text); }
.home-hero-copy h1 { margin: var(--hero-copy-gap) 0 calc(var(--hero-copy-gap) + 4px); font-size: 78px; line-height: .98; letter-spacing: -0.015em; color: #fff; }
.home-hero-copy h1 em { font-style: italic; padding-right: .06em; }
.home-hero-copy .lead { max-width: 470px; font-size: 22px; color: rgba(255,255,255,.9); }
.home-hero-copy .ctas { margin-top: calc(var(--hero-copy-gap) + 14px); }
.home-hero-copy .btn-light { color: var(--brand); }
.home-hero-copy .btn-outline-light { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); backdrop-filter: blur(4px); }
/* Same specificity as the rule above, so the hover from main.css has to be repeated here. */
.home-hero-copy .btn-outline-light:hover, .home-hero-copy .btn-outline-light:focus-visible { background: #fff; border-color: #fff; color: var(--brand); }
.home-hero-copy .btn-light:hover, .home-hero-copy .btn-light:focus-visible { background: var(--line); border-color: var(--line); }
.home-hero-facts { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.2); }
.home-hero-facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.home-hero-facts .wrap > div { display: flex; align-items: baseline; gap: 14px; padding: 22px 28px 26px 0; }
.home-hero-facts .wrap > div + div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); }
.home-hero-facts strong { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; white-space: nowrap; color: #fff; }
.home-hero-facts span { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.82); }

/* Brand logos strip */
.home-logos { padding: 44px 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-logos-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.home-logos-head .eyebrow { color: var(--muted); }
.home-logos-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 28px; align-items: center; }
.home-logos-row img { width: auto; max-width: 100%; height: auto; max-height: 38px; margin: 0 auto; filter: grayscale(1); opacity: .62; mix-blend-mode: multiply; }
.home-logos-row img.is-square { max-height: 46px; }
.home-logos-row img.is-light { max-height: 30px; opacity: .5; }

/* Three doors: talks, training, communication */
.home-doors { padding: 120px 0; }
.home-doors .head { margin-bottom: 56px; }
.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.door { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 20px; transition: transform .25s ease, box-shadow .25s ease; }
.door:hover, .door:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(12,42,49,.12); }
.door-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.door-photo img { width: 100%; height: 100%; object-fit: cover; }
.door-body { display: flex; flex: 1; flex-direction: column; padding: 28px 30px 32px; }
.door .num { margin-bottom: 8px; font-family: var(--serif); font-size: 20px; color: var(--bronze); }
.door h3 { margin-bottom: 6px; }
.door p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.door .door-tagline { margin-bottom: 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.door .link { margin-top: auto; }

/* About */
.home-about { padding: 120px 0; background: var(--white); }
.home-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.home-about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 24px; }
.home-about h2 { margin: 16px 0 24px; font-size: 42px; }
.home-about p { margin-bottom: 18px; }
.home-about .link { margin-top: 14px; }

/* Method C.L.A.R.A. seal */
.home-method { padding: 104px 0; background: var(--brand); color: #fff; }
.home-method-grid { display: grid; grid-template-columns: .9fr 1.4fr; gap: 72px; align-items: center; }
.home-method h2 { margin: 16px 0 20px; color: #fff; }
.home-method p { margin-bottom: 30px; font-size: 18px; color: #D3DCDD; }
.home-method-letters { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(212,178,106,.3); border-bottom: 1px solid rgba(212,178,106,.3); }
.home-method-letters li { padding: 30px 0 28px; text-align: center; border-right: 1px solid rgba(212,178,106,.3); }
.home-method-letters li:last-child { border-right: 0; }
.home-method-letters b { display: block; font-family: var(--serif); font-weight: 400; font-size: 84px; line-height: 1; }
.home-method-letters span { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #D9D2BF; }

/* Closing */
.home-closing { padding: 120px 0; }
.home-closing .eyebrow::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 22px; background: var(--bronze); }
.home-closing h2 { max-width: 820px; margin: 18px auto; }
.home-closing p:not(.eyebrow) { margin: 0 auto 38px; }

@media (max-width: 1080px) {
  .home-hero-copy { max-width: 470px; }
  .home-hero-copy h1 { font-size: 68px; }
}

@media (max-width: 760px) {
  /* Stacked: the photo takes all the height the copy leaves free, and the copy overlaps its bottom
     edge with a fade, so there is never an empty dark band between them whatever the screen height. */
  /* Phones: a 4:5 crop (head to waist, with room above the head for the logo) at full width behind the header.
     The copy overlaps its bottom edge with a fade, so the waist melts into the dark background. */
  .home-hero { height: auto; max-height: none; padding-top: 0; }
  .home-hero-photo { position: relative; left: 0; width: 100%; height: auto; aspect-ratio: 4 / 5; flex: none; object-position: 50% 0; }
  .home-hero-shade { background: linear-gradient(180deg, rgba(10,36,42,.55) 0, rgba(10,36,42,0) 140px); }
  .home-hero-body { flex: 0 0 auto; margin-top: -150px; padding-top: 130px; align-items: flex-end;
    background: linear-gradient(180deg, rgba(10,36,42,0) 0, rgba(10,36,42,.85) 90px, rgb(10,36,42) 150px); }
  .home-hero-body .wrap { justify-content: flex-start; }
  /* Stacked layout: the copy takes the full row instead of hugging the headline. */
  .home-hero-copy { width: 100%; max-width: none; padding: 0 0 36px; }
  .home-hero-copy .lead { max-width: none; }
  .home-hero-copy .eyebrow { font-size: 12px; letter-spacing: .14em; }
  .home-hero-copy .eyebrow::before { display: none; }
  .home-hero-copy h1 { margin: 12px 0 14px; font-size: 46px; }
  .home-hero-copy .lead { font-size: 18px; }
  .home-hero-copy .ctas { flex-direction: column; gap: 12px; margin-top: 24px; }
  .home-hero-facts { display: none; }

  .home-logos { padding: 34px 0; }
  .home-logos-head { flex-direction: column; gap: 6px; }
  .home-logos-row { grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
  .home-logos-row img { max-height: 26px; }
  .home-logos-row img.is-square { max-height: 34px; }

  .home-doors, .home-about, .home-closing { padding: 80px 0; }
  .home-doors .head { margin-bottom: 36px; }
  .door-grid { grid-template-columns: 1fr; gap: 22px; }
  .home-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-about h2 { font-size: 32px; }

  .home-method { padding: 80px 0; }
  .home-method-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-method-letters { grid-template-columns: 1fr; }
  .home-method-letters li { display: flex; align-items: center; gap: 22px; padding: 14px 0; text-align: left; border-right: 0; border-bottom: 1px solid rgba(212,178,106,.3); }
  .home-method-letters li:last-child { border-bottom: 0; }
  .home-method-letters b { width: 40px; font-size: 44px; text-align: center; }
  .home-method-letters span { margin-top: 0; font-size: 13px; }
}