/* Wide landscape with a bottom copy band. */
.opening.pad{position:relative;isolation:isolate;min-height:0;height:auto;aspect-ratio:16/9;padding:0;display:flex;align-items:flex-end;overflow:hidden;background:#141d2e}.opening>.hero-photo{position:absolute;inset:0;height:100%;max-height:none;min-height:0;width:100%;margin:0;z-index:0;clip-path:none!important;opacity:1!important}.opening>.hero-photo img,.opening .pasture-film{width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important;filter:none}.pasture-film{position:absolute;inset:0;opacity:0;transition:opacity .8s;pointer-events:none}.pasture-film.playing{opacity:1}
/* Selected title (eyebrow + h1) overlays the foot of the orbit film behind a soft dark
   gradient — no opaque floating box — while the supporting paragraph/CTA sit alongside it
   on desktop and drop below the film on smaller screens. */
.opening-glass{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:26px 4vw 24px;display:grid;grid-template-columns:1fr 1.1fr;column-gap:5vw;align-items:end;color:#f6f3ed;background:linear-gradient(to top,rgba(20,29,46,.9) 0%,rgba(20,29,46,.55) 55%,rgba(20,29,46,0) 100%)}
.opening-title{grid-column:1;grid-row:1;min-width:0}
.opening-copy{grid-column:2;grid-row:1;min-width:0}
.opening-glass .eyebrow{font-size:9px;color:#d5bd92;margin-bottom:10px}
.opening-glass h1{font-size:clamp(32px,3.4vw,54px);line-height:1.04;text-shadow:0 2px 20px rgba(20,29,46,.6)}
.opening-glass .opening-bottom{display:block;margin:0}
.opening-glass .opening-bottom>p{font-size:13px;line-height:1.55;margin-bottom:14px}
.opening-glass .button{background:#f6f3ed;color:#141d2e;font-size:11px;padding:13px 17px}
.opening-glass .fine{font-size:10px;color:#e5e0d6;margin:8px 0 0}
.opening-glass .fine br{display:none}
.opening-glass .text-link{font-size:10px}
.opening-glass .chapter-line{display:none}
@media(max-width:850px){
.opening.pad{aspect-ratio:auto;padding-top:56.25vw;display:block}
.opening>.hero-photo{bottom:auto;height:auto;aspect-ratio:16/9}
.opening-glass{display:block;padding:0;background:transparent;color:var(--navy);position:static}
/* Title sits on the film's lower edge; responsive type keeps it clear of the fixed header at 320/390. */
.opening-title{position:absolute;left:0;right:0;top:0;height:56.25vw;display:flex;flex-direction:column;justify-content:flex-end;padding:0 6vw 20px;background:linear-gradient(to top,rgba(20,29,46,.86) 0%,rgba(20,29,46,.42) 48%,rgba(20,29,46,0) 100%);color:#f6f3ed;z-index:2;pointer-events:none}
.opening-title .eyebrow{font-size:9px;color:#d5bd92;margin-bottom:9px}
.opening-title h1{font-size:clamp(29px,7vw,44px);line-height:1.05;text-shadow:0 2px 18px rgba(20,29,46,.6)}
/* Explicit ivory panel behind the paragraph/CTA below the film (otherwise navy text sits on
   the .opening.pad navy background and is invisible); extra bottom padding so the copy clears
   the film edge and the next section. */
.opening-copy{padding:22px 6vw 34px;background:var(--ivory);color:var(--navy)}
.opening-copy .opening-bottom>p{font-size:15px;color:var(--navy)}
.opening-copy .button{background:var(--navy);color:var(--ivory)}
.opening-copy .fine{color:#526459}
.opening-copy .fine br{display:block}
}
.opening-glass .fine .text-link{margin-left:10px}@media(max-width:850px){.opening-glass .fine .text-link{margin-left:0}}

/* Homepage only: lift the film to the top of the page so the header sits over the sky.
   Scoped to .home-film (added by homepage-film.js, loaded on index.html only) so inner pages are untouched. */
.home-film body{padding-top:26px}
.home-film header{top:26px;background:rgba(246,243,237,.34);backdrop-filter:blur(7px) saturate(1.04);-webkit-backdrop-filter:blur(7px) saturate(1.04);border-bottom-color:transparent;box-shadow:0 1px 0 rgba(20,29,46,.05)}
/* Once scrolled, fall back to the original solid ivory header for reliable contrast. */
.home-film header.is-compact{background:rgba(246,243,237,.98);backdrop-filter:blur(8px) saturate(1.02);-webkit-backdrop-filter:blur(8px) saturate(1.02);border-bottom-color:#d9d5cb;box-shadow:0 4px 20px #141d2e0f}
.home-film header a:focus-visible,.home-film header button:focus-visible{outline-color:#141d2e}
/* Home page only: navigation is folded into the one header (see .menu-drawer below).
   The site-wide below-header mobile nav is not used here, so no nav row is reserved. */
.home-film .mobile-page-nav{display:none}
.home-film .menu-drawer{display:none}
.home-film .cta-mini{display:none}
@media(max-width:760px){
/* Compact header over the video sky. */
.home-film header{height:60px;padding:9px 20px;gap:10px}
.home-film header.is-compact{height:56px}
.home-film .brand img{height:32px}
.home-film .brand span{font-size:8px}
/* The desktop inline nav folds into the drawer; nothing sits below the video. */
.home-film header>nav{display:none}
.home-film .menu-drawer{display:block;position:relative;margin-left:auto}
.home-film .menu-summary{display:flex;align-items:center;min-height:44px;padding:0 13px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#141d2e;background:rgba(246,243,237,.6);border:1px solid rgba(20,29,46,.35);border-radius:3px;cursor:pointer;list-style:none}
.home-film .menu-summary::-webkit-details-marker{display:none}
.home-film .menu-summary::after{content:"\25be";margin-left:8px;font-size:9px}
.home-film .menu-drawer[open] .menu-summary::after{content:"\25b4"}
.home-film .menu-drawer[open] .menu-summary{background:#f6f3ed}
.home-film .menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:60;background:#f6f3ed;border:1px solid #d9d5cb;box-shadow:0 18px 40px rgba(20,29,46,.18)}
.home-film .menu-panel nav{display:flex!important;flex-direction:column;gap:0}
.home-film .menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 20px;font-size:12px;color:#141d2e;text-decoration:none;border-bottom:1px solid #e5e0d6}
.home-film .menu-panel a:last-child{border-bottom:0;font-weight:600}
.home-film .menu-panel a:hover,.home-film .menu-panel a:focus-visible{background:#eae6dd}
}
/* Narrow phones: keep the Blueprint CTA short so brand, CTA and menu never collide. */
@media(max-width:420px){
.home-film .cta-full{display:none}
.home-film .cta-mini{display:inline}
.home-film header{padding-inline:16px}
}
/* Very narrow phones: tighten the header gap and menu chip so brand, CTA and menu fit 320. */
@media(max-width:355px){
.home-film header{gap:6px}
.home-film .menu-summary{padding-inline:11px}
}

/* Homepage only: editorial photography spans the page edge to edge (gutters removed for the
   IMAGE), while body copy and captions keep their gutters. Height follows the image's own
   proportions so faces are never cropped. */
.home-film #retirement .wide-photo,
.home-film #family .family-image-group{margin-inline:calc(-1 * max(6vw,40px))}
.home-film #retirement .wide-photo{height:auto!important;max-height:none}
.home-film #family.split{grid-template-columns:1fr;gap:30px}
.home-film #family .portrait-photo{height:auto!important;max-height:none}
.home-film #retirement .wide-photo img,
.home-film #family .portrait-photo img{height:auto;object-fit:cover}
/* These two full-width photos are height:auto (proportions preserved). The shared reveal
   animation transforms .reveal-photo img to scale(1.035) translateY(8px) before it enters
   view, which transiently crops them — disable the transform here only. */
.home-film #retirement .wide-photo.reveal-photo img,
.home-film #family .portrait-photo.reveal-photo img{transform:none!important;transition:none}
.home-film #family .family-image-group>.image-caption{padding-inline:max(6vw,40px)}
@media(max-width:760px){
.home-film #retirement .wide-photo,
.home-film #family .family-image-group{margin-inline:-26px}
.home-film #family .family-image-group>.image-caption{padding-inline:26px}
}
@media(min-width:1650px){
.home-film #retirement .wide-photo,
.home-film #family .family-image-group{margin-inline:-95px}
.home-film #family .family-image-group>.image-caption{padding-inline:95px}
}

/* Owner annotation — Insights titles: the shared mobile rule `#insights .article h3 br{display:none}`
   (style.css) removed the authored <br> but the words had no whitespace between them, so they
   visually joined ("retireon", "knowabout", "fitthe"). The root fix is the space now authored
   before each <br> in index.html: it collapses harmlessly at desktop and, once the <br> is hidden
   at <=760px, the headings wrap naturally. No copy changed. */

/* Owner annotation — founder profile (homepage only): a balanced profile instead of a small
   180-210px portrait with a wide empty gap and detached copy. Larger portrait beside the copy on
   desktop; centred portrait with compact centred title/byline on narrow screens; readable copy
   measure. No new copy or decoration. */
.home-film .founder{grid-template-columns:minmax(250px,340px) minmax(0,1fr);gap:clamp(38px,5vw,72px);align-items:center;padding-block:72px}
.home-film .founder .photo{width:100%;height:auto;max-height:none}
.home-film .founder .photo img{height:auto;object-fit:cover}
.home-film .founder p{max-width:660px}
@media(max-width:760px){
.home-film .founder{grid-template-columns:1fr;gap:26px;justify-items:center;padding-block:44px}
.home-film .founder>div{max-width:580px}
.home-film .founder .photo{width:min(320px,74vw);height:auto}
.home-film .founder .eyebrow,
.home-film .founder h2{margin-inline:0;text-align:center}
.home-film .founder h2{margin-block:12px 16px}
.home-film .founder p:last-child{text-align:center}
}

/* Owner annotation — founder signatory autograph (homepage only): the decorative signature
   above the byline is the owner's own drawn autograph, supplied as a transparent PNG
   (assets/cole-r-whitaker-autograph.png, 2172x724, RGBA with transparent canvas margins)
   instead of a webfont. No font dependency remains for the signature. The name is printed
   in the byline directly below, so the signature stays decorative and hidden from assistive
   tech (aria-hidden). Left aligned on desktop, centred on narrow; modest spacing above the
   printed byline. Homepage-only: this stylesheet is linked solely by index.html. */
.home-film .founder .founder-signature{display:block;margin:0 0 10px}
.home-film .founder .founder-signature img{display:block;width:300px;max-width:100%;height:auto}
@media(max-width:760px){
.home-film .founder .founder-signature img{margin-inline:auto}
}

/* Owner annotation — navy footer: reuse the existing reversed CLG mark (public/logo) as the
   wordmark instead of duplicating the brand in text. Homepage only. */
.home-film footer .footer-brand{display:block;width:52px;margin-bottom:22px}
.home-film footer .footer-brand img{width:100%;height:auto;object-fit:contain}

/* Owner annotation — dark relationship planning panel only (the .coordination-interactive panel):
   centre the heading/eyebrow and the controls (relationship title, Blueprint action); the body
   explanation stays left aligned. The diagram and its nodes are already centred. No other site
   headings are affected. Live selection logic is untouched. */
.home-film .coordination-interactive .interaction-invitation{justify-content:center;text-align:center}
.home-film .coordination-interactive .relationship{text-align:center}
.home-film .coordination-interactive .relationship .eyebrow,
.home-film .coordination-interactive .relationship h3{text-align:center}
.home-film .coordination-interactive .relationship .text-link{margin-inline:auto}
.home-film .coordination-interactive #relation-copy{text-align:left}
/* Owner final correction: auto-centre the 460px diagram grid (incl. the
   "Your life & goals" group) inside the highlighted planning panel so the
   whole composition is centred. Mobile max-width:460px and the desktop grid
   layout are preserved; live selection logic is untouched. */
.home-film .coordination-interactive .diagram{margin-inline:auto}

/* Owner creative-director refinements (homepage only) — the four approved changes from
   docs/creative-director-homepage-review.md. Scoped to .home-film (added to <html> by
   homepage-film.js, which is loaded only by index.html) so no inner page is affected. */

/* 1. #planning service paths.
   Desktop: a fixed 60px numeral gutter, a consistent 340px title column and an aligned
   description/action column, so 01/02/03 line up across all three rows.
   Mobile: the numeral hangs beside one unified title/body/action block (no empty gaps). */
@media(min-width:761px){
.home-film #planning .path{grid-template-columns:60px 340px minmax(0,1fr);column-gap:34px;row-gap:0;align-items:start;padding-block:22px}
.home-film #planning .path>span{padding-top:6px}
}
@media(max-width:760px){
.home-film #planning .path{grid-template-columns:26px minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:start;padding-block:16px}
.home-film #planning .path>span{grid-row:1/span 2;padding-top:3px}
.home-film #planning .path h3{grid-column:2}
.home-film #planning .path>div{grid-column:2}
}

/* 2. #insights editorial cadence.
   The thin estate thumbnail was removed in index.html, so both secondary articles are now
   consistent text-only editorial cards: equal padding, restrained hairline dividers and the
   CTA anchored at each card's foot. The two-card column stretches to the featured card's
   height so neither side terminates early. The featured article keeps its image. */
.home-film #insights .insight-grid{align-items:stretch}
.home-film #insights .insight-grid>div{display:flex;flex-direction:column}
.home-film #insights .secondary-article{display:flex;flex-direction:column;flex:1 1 0;padding-block:24px;border-top:1px solid #c9c4b8}
.home-film #insights .secondary-article:last-child{border-bottom:1px solid #c9c4b8}
.home-film #insights .secondary-article .eyebrow{margin-top:0}
.home-film #insights .secondary-article .text-link{margin-top:auto;align-self:flex-start}
@media(max-width:760px){
.home-film #insights .secondary-article{padding-block:18px}
}

/* 3. #founder mobile alignment.
   On mobile the whole text column — including the bio — is centred with a readable 48ch
   measure (the portrait, autograph signature and byline are centred too). Desktop keeps the
   copy/signature/byline left aligned together beside the portrait. Portrait and autograph
   are otherwise untouched. */
@media(max-width:760px){
.home-film .founder .founder-bio{text-align:center;max-width:48ch;margin-inline:auto}
.home-film .founder .founder-byline{text-align:center;margin-inline:auto}
}

/* 4. #questions FAQ ergonomics.
   Constrain the accordion (and its header, so both share the same left edge) to ~850px,
   centred in the section, and place the +/- indicator next to the question text instead of
   across the far margin. Native <details>/<summary> behaviour is untouched. */
.home-film #questions>.eyebrow,
.home-film #questions>h2,
.home-film #questions .faq-grid{max-width:850px;margin-left:auto;margin-right:auto}
.home-film #questions .faq-grid summary{display:flex;align-items:baseline;gap:14px;padding-right:0}
.home-film #questions .faq-grid summary:after{position:static;right:auto;top:auto;flex:none}