/* ============================================================
   Homepage 2 (/home-2, for the owner's review). Loaded after main.css and head.css.
   Same palette and type as main.css: ink, porcelain, champagne; Fraunces, Archivo, IBM Plex Mono.
   The quote form rules are copied from css/site.css and scoped under #quote (site.css cannot load here).
   ============================================================ */

/* ---------- the film: chapter legs as times of the day ---------- */

.h2-legs { display: grid; }
.h2-leg { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux); }
.h2-leg.is-on { opacity: 1; transform: none; }
body.reduced .h2-leg { opacity: 1; transform: none; grid-area: auto; }

/* ---------- shared section frame ---------- */

.h2-sec { padding: 16vh var(--pad-x) 6vh; }
.h2-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px); align-items: end; margin-bottom: 7vh;
}
.h2-head .section-title { margin-bottom: 0; }
.h2-intro { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 46ch; }
.h2-kicker { color: var(--champagne); }
.h2-foot { margin-top: 6vh; display: flex; gap: 16px; flex-wrap: wrap; }
.h2-note { margin-top: 2.4em; color: var(--faint); font-size: 0.82rem; max-width: 80ch; }
.h2-link { color: var(--champagne); border-bottom: 1px solid var(--champagne-dim); padding-bottom: 3px; transition: border-color 0.3s; }
.h2-link:hover { border-color: var(--champagne); }

.statement { padding-bottom: 2vh; }
.h2-who { padding-top: 12vh; }

/* ---------- who you are ---------- */

.h2-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 52px) clamp(20px, 2.4vw, 40px); }
.h2-who-card a { display: block; height: 100%; border-top: 1px solid var(--hairline); padding-top: 18px; }
.h2-who-card figure, .h2-ev figure, .h2-proof figure {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--hairline); background: var(--ink-2); margin-bottom: 18px;
}
.h2-who-card img, .h2-ev img, .h2-proof img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-lux);
}
.h2-who-card a:hover img, .h2-ev:hover img, .h2-proof a:hover img { transform: scale(1.07); }
.h2-who-card h3 {
  font-family: 'Fraunces', serif; font-weight: 480;
  font-size: clamp(1.45rem, 1.9vw, 2rem); line-height: 1.12; margin: 8px 0 8px;
  transition: color 0.3s;
}
.h2-who-card a:hover h3 { color: var(--champagne); }
.h2-who-card p:not(.h2-kicker) { color: var(--muted); font-size: 0.95rem; max-width: 40ch; }
.h2-more { display: inline-block; margin-top: 14px; color: var(--champagne); }
.h2-more::after { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 10px; transition: width 0.4s var(--ease-lux); }
.h2-who-card a:hover .h2-more::after { width: 46px; }

/* ---------- this season ---------- */

.h2-season { border-top: 1px solid var(--hairline); margin-top: 10vh; }
.h2-ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 36px); }
.h2-ev { display: flex; flex-direction: column; }
.h2-ev[hidden] { display: none; }
.h2-ev-pic { display: block; }
.h2-ev figure { aspect-ratio: 4 / 5; }
.h2-ev-when { color: var(--champagne); }
.h2-ev h3 {
  font-family: 'Fraunces', serif; font-weight: 480;
  font-size: clamp(1.35rem, 1.6vw, 1.75rem); line-height: 1.14; margin: 8px 0 6px;
}
.h2-ev h3 a { transition: color 0.3s; }
.h2-ev h3 a:hover { color: var(--champagne); }
.h2-ev-place { color: var(--muted); font-size: 0.92rem; }
.h2-tbc { display: inline-block; margin-top: 8px; color: var(--faint); }
.h2-ev-actions { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.h2-ev-actions .btn-pill { padding: 0.8em 1.4em; font-size: 0.66rem; }
.h2-empty { color: var(--muted); }

/* ---------- the standard: proof pictures ---------- */

.h2-standard { padding-bottom: 12vh; }
.h2-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin-top: 11vh; }
.h2-proof a { display: block; }
.h2-proof figure { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.h2-cap { color: var(--muted); font-size: 0.92rem; margin-top: 6px; max-width: 42ch; }
.h2-proof a:hover .h2-cap { color: var(--porcelain); }
.h2-standard .partners { margin-top: 10vh; }

/* ---------- one contact: the quote form (rules copied from css/site.css, scoped) ---------- */

#quote { padding: 16vh var(--pad-x); background: linear-gradient(180deg, #0a1018 0%, var(--ink) 100%); border-top: 1px solid var(--hairline); }
#quote .quote-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
#quote .section-title { margin-bottom: 28px; font-size: clamp(2.2rem, 4.2vw, 4.4rem); text-transform: none; line-height: 1.04; }
#quote .quote-intro p:not(.section-over) { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.2em; max-width: 56ch; }
#quote .quote-direct a { color: var(--champagne); }
#quote .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
#quote .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#quote .field--full { grid-column: 1 / -1; }
#quote .field label { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#quote .field label span { color: var(--faint); text-transform: none; letter-spacing: 0.04em; }
#quote .field input, #quote .field select, #quote .field textarea {
  width: 100%; background: rgba(242, 237, 227, 0.04); color: var(--porcelain);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 14px 16px;
  font: inherit; font-size: 0.98rem; transition: border-color 0.3s, background-color 0.3s; color-scheme: dark;
}
#quote .field select option { background: #0a1018; color: var(--porcelain); }
#quote .field input::placeholder, #quote .field textarea::placeholder { color: var(--faint); }
#quote .field input:focus, #quote .field select:focus, #quote .field textarea:focus { outline: none; border-color: var(--champagne); background: rgba(242, 237, 227, 0.07); }
#quote .field .is-invalid { border-color: #d98a7a; }
#quote .quote-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
#quote .quote-actions .btn-pill { cursor: pointer; background-color: transparent; font-family: inherit; }
#quote .quote-actions .btn-pill--gold { background: var(--champagne); }
#quote .quote-actions .btn-pill[disabled] { opacity: 0.6; cursor: progress; }
#quote .form-error { color: #e5a596; grid-column: 1 / -1; }
#quote .form-note { color: var(--faint); font-size: 0.82rem; }

/* ---------- consent bar (copied from css/site.css; shown by js/tracking.js only once advertising ids are set) ---------- */

.consent { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 0); z-index: 60; width: min(92vw, 640px); background: rgba(10, 16, 24, 0.96); border: 1px solid var(--hairline); border-radius: 4px; padding: 16px 18px; display: none; gap: 14px; align-items: center; flex-wrap: wrap; }
.consent.is-on { display: flex; }
.consent p { flex: 1 1 260px; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.consent p a { color: var(--champagne); }
.consent .btn-pill { padding: 0.75em 1.3em; font-size: 0.64rem; cursor: pointer; font-family: inherit; background-color: transparent; }
.consent .btn-pill--gold { background: var(--champagne); }

/* ---------- gentle reveals (js/home2.js adds .h2-in; nothing hides without the script) ---------- */

.h2-js .h2-rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux); }
.h2-js .h2-rv.h2-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .h2-ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-ev figure { aspect-ratio: 3 / 2; }
}

@media (max-width: 820px) {
  .h2-sec { padding: 11vh var(--pad-x) 4vh; }
  .h2-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 5vh; }
  .h2-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h2-proof { grid-template-columns: 1fr; margin-top: 8vh; }
  .h2-proof figure { aspect-ratio: 16 / 10; }
  #quote { padding: 11vh var(--pad-x); }
  #quote .quote-grid { grid-template-columns: 1fr; }
  #quote .quote-form { grid-template-columns: 1fr; }
  #quote .field label, #quote .form-error, #quote .form-note { font-size: 0.7rem; }
  .consent { bottom: 18px; }
}

@media (max-width: 560px) {
  .h2-who-grid { grid-template-columns: 1fr; }
  .h2-ev-grid { grid-template-columns: 1fr; }
  .h2-ev-actions .btn-pill { padding: 0.95em 1.5em; }
  .h2-foot .btn-pill { text-align: center; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .h2-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* one tile per chapter (the /home-1b-single comparison) */
.offer-cards--single { grid-template-columns: minmax(0, 440px); }
@media (max-width: 820px) { .offer-cards--single { grid-template-columns: minmax(0, 1fr); } }

/* phones: Start with you as two compact columns (owner, 11 Oct 2026: too much scrolling) */
@media (max-width: 600px) {
  .h2-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px; }
  .h2-who-card a { padding-top: 12px; }
  .h2-who-card h3 { font-size: 1.05rem; line-height: 1.2; }
  .h2-who-card p:not(.h2-kicker), .h2-who-card .h2-more { display: none; }
  .h2-who-card .h2-kicker { font-size: 0.6rem; }
}
/* the chapter link that replaces the tiles */
.h2-chapter-link { display: inline-block; margin-top: 18px; color: var(--champagne); font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-shadow: 0 0 1px rgba(6,9,15,.9), 0 1px 2px rgba(6,9,15,.8); }
.h2-chapter-link:hover { color: var(--porcelain); }

/* The chapter's right-hand column (owner, 12 Oct 2026: on a short laptop window the hub tile, hung from the foot of
   the screen, climbed into the copy, hung from the top). Line, copy and tile now stack in one column from 30vh down,
   so they can never meet. Phones, tablets and the reduced-motion layout keep their own flow (display: contents). */
.page-home2 .chapter-side { position: absolute; right: var(--pad-x); top: 30vh; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; max-width: 340px; text-align: right; }
.page-home2 .chapter-side .chapter-line, .page-home2 .chapter-side .chapter-copy, .page-home2 .chapter-side .offer-cards { position: static; right: auto; top: auto; bottom: auto; max-width: none; margin: 0; }
.page-home2 .chapter-side .offer-cards { margin-top: 6px; }
@media (max-width: 820px) { .page-home2 .chapter-side { display: contents; } }
body.film-vert .chapter-side, body.reduced .chapter-side { display: contents; }
/* shorter desktop windows: start the column higher and shrink the tile's picture so the stack ends above the film
   hud (bottom 7.2vh). Three tiers: up to 920 px tall (a 1440x900 screen), up to 820 (laptops at 125% scaling give
   about 730), and up to 560, where the tile keeps its words only. */
@media (min-width: 821px) and (max-height: 920px) {
  .page-home2 .chapter-side { top: 22vh; gap: 12px; }
  .page-home2 .chapter-side .offer-card figure { aspect-ratio: 16 / 10; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .page-home2 .chapter-side .chapter-copy { font-size: 0.9rem; }
  .page-home2 .chapter-side .offer-card figure { aspect-ratio: 16 / 9; }
}
@media (min-width: 821px) and (max-height: 560px) {
  .page-home2 .chapter-side .offer-card figure { display: none; }
  .page-home2 .chapter-side .offer-card h3 { margin-top: 0; }
}