/* live-site additions, Sept 28: combined hero, five-card roles strip, grouped industries, top__lang unused */
/* ---------- home additions: links out of the teaser sections ---------- */
.more{display:inline-block;margin-top:14px;font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);text-decoration:none;border-bottom:1px solid rgba(201,169,97,.45);padding-bottom:4px}
.more:hover,.more:focus-visible{border-color:var(--gold-d)}
.talent__panel .more{color:var(--navy);border-color:rgba(11,31,58,.35)}
/* industries, grouped (Sept 23 call) */
.roles__industries .ind{display:block;margin:0 0 8px}
.roles__industries .ind strong{font-weight:600;color:var(--ink)}
.sec--champagne .roles__industries .ind strong,.sec--pale .roles__industries .ind strong{color:var(--navy)}

/* credential badges (Sept 23 call): official issuer badges, linked to verification */
.badges{list-style:none;margin:28px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.badges li{width:min(220px,100%)}
.phimg--badge{aspect-ratio:1/1;max-width:220px}

/* =====================================================================================
   HOME HERO, "combo" pass (Sept 23). GMO asked for a combination of the approved original
   hero and the current full-bleed loop. This block loads after styles.css, so every rule
   here overrides the matching hero rule there by source order; styles.css itself is left
   alone. Phones are untouched below 761px, which is where the loop-band layout the client
   already approved for mobile lives — nothing here is unscoped, so nothing here can leak
   into it. Everything below targets 761px and up, with the photo card gated to 1000px and
   up, matching the breakpoint styles.css already uses for this hero.
   ===================================================================================== */
/* Hidden by default (so it never shows, or pushes the phone layout down, below 1000px); the
   1000px block below turns it back on. */
.hero__frame{display:none}
@media (min-width:761px){
  /* Single content row, bottom-aligned, so the copy sits where the current design already
     anchors it; the mark now travels with the copy (it is nested inside .hero__copy in the
     markup) instead of floating in its own row far above it. */
  .hero{grid-template-columns:1fr;grid-template-rows:1fr;align-items:end;padding-top:calc(var(--top-h) + 40px)}
  .hero__copy{grid-column:1;grid-row:1;align-self:end;max-width:620px;margin-left:0;padding:0}
  .hero__mark{margin:0 0 22px}

  /* H1 capped near 4.6rem so it stops dominating the frame, per the original's proportion;
     the tagline drops back under the H1, as one line, at roughly 40% of the H1 size. */
  .hero__head{grid-template-columns:1fr;gap:10px 0;margin:0 0 24px}
  .hero__title{font-size:clamp(2.6rem,1.5rem + 3.4vw,4.6rem);max-width:17ch}
  .hero__title em{font-style:italic;color:var(--champagne)}
  .hero__tag{max-width:none;padding-bottom:0;white-space:nowrap}

  /* Lighter scrim: still AA-dark behind the copy, but the loop reads through, especially on
     the right where the photo card (or, without it, the loop's people) now sits. */
  .hero__scrim{background:
    linear-gradient(180deg,rgba(11,31,58,.32) 0%,rgba(11,31,58,.12) 22%,rgba(11,31,58,.54) 55%,rgba(11,31,58,.8) 100%),
    linear-gradient(90deg,rgba(11,31,58,.6) 0%,rgba(11,31,58,.36) 34%,rgba(11,31,58,.08) 64%,rgba(11,31,58,0) 100%)
  }

  /* Pause stays on the loop's quiet right side, low enough to clear the photo card above it. */
  .hero__pause{right:var(--gutter);left:auto;bottom:28px}
}
@media (min-width:1000px){
  /* The original's two-column read, on top of the loop: copy left against the mark, a framed
     4:5 still on the right, both over the full-bleed video. */
  /* Photo card is opt-in: add class "has-card" to section.hero to show the framed still on the right.
     Without it the loop's own people fill the right side. */
  .hero.has-card{grid-template-columns:minmax(0,1fr) clamp(260px,27vw,380px);column-gap:clamp(32px,5vw,72px)}
  .hero.has-card .hero__frame{display:block;grid-column:2;grid-row:1;align-self:center;justify-self:end;width:100%}
  .hero__photo{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:4px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.32)}
  .hero__photo img{width:100%;height:100%;object-fit:cover;object-position:38% 38%}
}
@media (max-width:760px){
  /* The mark now sits inside .hero__copy, which already carries the left gutter as padding;
     drop the mark's own left/right margin so it lines up with the eyebrow below it instead of
     doubling the inset. */
  .hero__mark{margin-left:0;margin-right:0}
}
/* roles strip: five cards now (engineering added), new stills, center crops per frame */
.role:nth-child(1) img{object-position:50% 50%}
.role:nth-child(2) img{object-position:38% 50%}
.role:nth-child(3) img{object-position:50% 50%}
.role:nth-child(4) img{object-position:50% 50%}
.role:nth-child(5) img{object-position:45% 50%}
@media (min-width:960px){
  html:not(.has-scrub) .roles__track{grid-template-columns:repeat(5,1fr)}
  .role{flex:0 0 clamp(280px,23vw,380px)}
}

/* industries, grouped (Sept 23 call) */
.roles__industries .ind{display:block;margin:0 0 8px}
.roles__industries .ind strong{font-weight:600;color:var(--ink)}
.sec--champagne .roles__industries .ind strong,.sec--pale .roles__industries .ind strong{color:var(--navy)}

/* roles strip: five cards now (engineering added), new stills, center crops per frame */
.role:nth-child(1) img{object-position:50% 50%}
.role:nth-child(2) img{object-position:38% 50%}
.role:nth-child(3) img{object-position:50% 50%}
.role:nth-child(4) img{object-position:50% 50%}
.role:nth-child(5) img{object-position:45% 50%}
@media (min-width:960px){
  html:not(.has-scrub) .roles__track{grid-template-columns:repeat(5,1fr)}
  .role{flex:0 0 clamp(280px,23vw,380px)}
}

/* ---------- Jes, Oct 12 ---------- */
/* 2: a touch more air between the three lines so the italic F in Performance clears the line above */
.hero__title{line-height:1.08}
/* 5 and 6: Who we place starts on copy, with a gold hairline as the section break, and the five roles sit in one row on wide screens, no pin, no sideways scroll */
.roles{border-top:1px solid rgba(201,169,97,.45)}
.roles__lead{padding:clamp(64px,8vw,120px) 0 clamp(32px,4vw,56px)}
.roles__set{max-width:calc(820px + 2 * var(--gutter))}
.roles__pin{padding:clamp(24px,3vw,40px) 0 clamp(56px,8vw,120px)}
@media (min-width:960px){
  .roles .roles__track,.has-scrub .roles__track{overflow:visible;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,24px);width:auto;min-width:0;padding:0 var(--gutter)}
  .roles .role{flex:none;max-width:none}
  .role figcaption{font-size:clamp(1.1rem,.9rem + .7vw,1.4rem)}
}
/* 5b: at 1000px and up the copy runs as two columns so it spans the section: heading, intro and link on the left, "Industries we serve" on the right behind a gold hairline. Under 1000px it stays one column. */
@media (min-width:1000px){
  .roles__lead{padding-bottom:clamp(40px,4vw,64px)}
  .roles__set{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(48px,6vw,112px);align-items:start}
  .roles__set>*{grid-column:1}
  .roles__set>.roles__industries{grid-column:2;grid-row:1 / -1;margin:0;max-width:none;padding-left:clamp(32px,4vw,72px);border-left:1px solid rgba(201,169,97,.45)}
  .roles__set>.roles__industries .ind{max-width:58ch}
  .roles__set>.more{justify-self:start;margin-top:28px}
}
/* 7: her photo sits under her name in the navy block; the forest band keeps the quote alone */
.about__id .about__pic{margin:4px 0 0;width:min(260px,64vw)}
@media (min-width:1000px){.about__id .about__pic{width:min(300px,100%)}}
@media (min-width:900px){.about__bandinner--quote{grid-template-columns:1fr}}
.about__bandinner--quote .quote{max-width:52ch}

/* ---------- Spanish toggle, Oct 21 (Kristina: turn it on today) ---------- */
.top__nav{margin-left:auto}
.top__lang{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid rgba(241,232,208,.45);padding:7px 10px 6px;margin-left:clamp(14px,2vw,28px);transition:border-color .5s var(--ease)}
.top__lang:hover,.top__lang:focus-visible{border-color:var(--gold-d)}
@media (max-width:760px){.top__nav{margin-left:0}.top__lang{margin-left:auto}}