/* v5 · C3 · Page openings in two layouts, one text block.
   Why: a finished site teaches its frame on the first screen and every later page confirms it (a reference opens 16 of 23 pages with
   the page name at one size, at one spot). v3 opened its 25 pages in 8 arrangements: the title near the foot of a tall empty screen
   (indexes, About, Insights), the title near the top (industries, products), the title centred against a picture (home, careers),
   the title at the top with its line and action at the foot of the picture (Security), and the form stage (Contact).
   Now there are two layouts, sharing one text block (crumb line, label or product name, title, line, actions, stacked on the left
   edge, starting at the same height on every page):
     1 · words only: industries, products, the two indexes, About, Approach, Insights, the case study;
     2 · with a picture or form beside or behind the block: home, careers, contact, security.
   Pages without a crumb keep its line empty, so the title stands at the same height everywhere.
   Pictures, their crops and their motion are unchanged. */

:root{--o-top:calc(var(--navh) + clamp(48px,6vw,88px));--o-crumb:calc(18.2px + clamp(36px,5vw,64px))}

/* ---- the text block ---- */
.open{padding-top:var(--o-top)}
.open .crumb{height:18.2px;margin-bottom:clamp(36px,5vw,64px)}
.open:not(:has(.crumb)):not(:has(.bleed)){padding-top:calc(var(--o-top) + var(--o-crumb))}
.open--words,.open--short{min-height:0;display:block}
.open--mid{justify-content:flex-start}                     /* Insights keeps the height of its moving ground */
.open--mid>.wrap{padding-bottom:clamp(56px,6vw,96px)}
.open .h1{max-width:11.5em}
.open--words .ow-row,.open--row .or-row,.on-row{display:block}
.open--words .ow-row{margin-top:28px}
.open--words .ow-row>.lede,.open--row .or-row .side .lede,.on-row .side .lede{max-width:34em}
.open--words .ow-row>.ctas,.open .ctas{margin-top:32px;justify-content:flex-start}
.open--row .or-row>.side,.on-row>.side{margin-top:28px}
.on-row>.h2{max-width:15em}                                /* the width the statement had in v3 (7 of 12 columns) */
.pname{margin-bottom:36px}                                  /* product pages: the product name stands where the label stands */
.on-row{margin-top:0}

/* ---- layout 2: the same block beside or over a picture ---- */
@media (min-width:761px){
  /* home */
  .hero-copy{justify-content:flex-start;padding-top:calc(var(--o-top) + var(--o-crumb))}
  .hero-copy .eyebrow{margin-bottom:20px}
  .hero-copy .lede{margin-top:28px}
  .hero-copy .ctas{margin-top:32px}
  /* careers: the block starts on the title line; the picture keeps its place and size */
  .open .bleed{align-items:start}
  .open .bleed .bl-text{padding-top:var(--o-crumb)}
  .open .bleed .bl-text .lede{margin-top:28px}
  .open .bleed .bl-text .ctas{margin-top:32px}
  /* contact: the stage starts where every opening starts */
  .contact-main>.stage:first-child{padding-top:var(--o-top) !important}
  .contact-main .fsec{padding-top:var(--o-crumb)}
  .contact-main .fs-text .lede{margin-top:28px}
  .contact-main .fs-text .lede+.lede{margin-top:12px}
  /* security: the line and the action join the title at the top, over the painting's dark left side */
  .poster--open .pc{padding-top:calc(var(--o-top) + var(--o-crumb))}
  .poster--open .pc-top .eyebrow{margin-bottom:0}
  .poster--open .pc-top .h1{margin-top:20px !important}
  .poster--open .pc-bot{display:block;margin-top:28px}
  .poster--open .pc-bot>.lede{max-width:26em}
  .poster--open .pc-bot>.ctas{margin-top:32px;justify-content:flex-start}
}


/* (17 Oct, client: "revert spacings to previous version"): the phone block added later for spacing alone (the opening block's
   distances on phones, Security's opening gap) is taken out; the full earlier file is kept unlinked as
   c3-openings.with-step10-phone-spacing.css. The two layouts above stay. */