/* =========================================================================
   Careers page.

   Art direction mirrors the LIVE HOME PAGE, which is light and airy:
   warm off-white grounds, soft red radial washes, rounded cards with faint
   borders and very soft shadows, centred display type around 55px/800,
   red numerals on stat cards. Not a dark page.

   SPECIFICITY WARNING — read before editing:
   The Elementor kit styles `.elementor-kit-6 h1/h2/a` (0,1,1). Any bare
   `.i1c-*` rule (0,1,0) LOSES to it. That silently swallowed the display
   font and the button colours twice. Every rule that sets font-family,
   font-weight or color on a heading or link is therefore prefixed with
   `.i1-scope`. Keep it that way.
   ========================================================================= */

/* ---- scoped reset ---- */
.i1-scope, .i1-scope *, .i1-scope *::before, .i1-scope *::after { box-sizing: border-box; }
.i1-scope { font-family: var(--i1-body); color: var(--i1-ink); font-weight: var(--i1-w-body); }
.i1-scope img { max-width: 100%; height: auto; }
.i1-scope button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .i1-scope *, .i1-scope *::before, .i1-scope *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
}

.i1-careers { overflow-x: hidden; background: var(--i1-white); }
.i1c-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.i1c-center { text-align: center; }
.i1c-center .i1c-lede { margin-left: auto; margin-right: auto; }

/* =========================== type =========================== */
.i1-scope .i1c-kicker {
  font-family: var(--i1-body); font-size: 14px; font-weight: var(--i1-w-med);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--i1-red-ui); margin: 0 0 14px;
}

/* The site's device: heavy uppercase line, lighter lowercase tail */
.i1-scope .i1c-h2 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(26px, 3.9vw, 44px); line-height: 1.06;
  letter-spacing: var(--i1-track); text-transform: uppercase;
  color: var(--i1-ink); margin: 0 0 18px; text-wrap: balance;
}
.i1-scope .i1c-h2 em {
  display: block; font-style: normal; text-transform: none;
  font-family: var(--i1-display); font-weight: var(--i1-w-body);
  font-size: 0.66em; letter-spacing: var(--i1-track-sm);
  color: var(--i1-slate); margin-top: 4px;
}

.i1-scope .i1c-lede {
  font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7;
  font-weight: var(--i1-w-body); color: var(--i1-slate);
  max-width: 62ch; margin: 0 0 36px;
}
.i1-scope .i1c-note { font-size: 15px; line-height: 1.7; color: var(--i1-slate); max-width: 66ch; margin: 28px 0 0; }

/* =========================== sections =========================== */
.i1c-sec { padding: clamp(58px, 7.5vw, 104px) 0; }
.i1c-sec--white { background: var(--i1-white); }
.i1c-sec--off   { background: var(--i1-off); }
/* the home page's signature soft red wash */
.i1c-sec--wash {
  background:
    radial-gradient(58% 62% at 78% 18%, rgba(225,56,69,0.07), rgba(225,56,69,0) 62%),
    var(--i1-white);
}

/* =========================== buttons =========================== */
.i1-scope .i1c-btn {
  display: inline-block; font-family: var(--i1-body);
  font-size: clamp(15px, 1.6vw, 18px); font-weight: var(--i1-w-med); line-height: 1.1;
  padding: 21px 44px; border-radius: var(--i1-radius-btn);
  border: 2px solid transparent; text-decoration: none; text-align: center;
  transition: background-color var(--i1-dur) var(--i1-ease),
              color var(--i1-dur) var(--i1-ease),
              border-color var(--i1-dur) var(--i1-ease);
}
.i1-scope .i1c-btn--red { background: var(--i1-red-ui); color: var(--i1-white); border-color: var(--i1-red-ui); }
.i1-scope .i1c-btn--red:hover { background: var(--i1-red-deep); color: var(--i1-white); border-color: var(--i1-red-deep); }

.i1-scope .i1c-btn--line { background: var(--i1-white); color: var(--i1-ink); border-color: var(--i1-line); }
.i1-scope .i1c-btn--line:hover { border-color: var(--i1-red); color: var(--i1-red); }

.i1-scope .i1c-btn--onred { background: var(--i1-white); color: var(--i1-red); border-color: var(--i1-white); }
.i1-scope .i1c-btn--onred:hover { background: var(--i1-ink); color: var(--i1-white); border-color: var(--i1-ink); }

.i1-scope .i1c-btn:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 3px; }

/* =========================== 01 hero =========================== */
/* Centred and light, mirroring the home page hero. */
.i1c-hero {
  background:
    radial-gradient(46% 52% at 50% 16%, rgba(225,56,69,0.09), rgba(225,56,69,0) 64%),
    var(--i1-white);
  padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
}
.i1-scope .i1c-hero__h {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(32px, 5.2vw, 62px); line-height: 1.0;
  letter-spacing: var(--i1-track); text-transform: uppercase;
  color: var(--i1-ink); margin: 0 auto 22px; max-width: 19ch; text-wrap: balance;
}
/* The red half always starts its own line. Without display:block the headline
   broke mid-clause ("LET'S BE / HONEST, YOU / DESERVE BETTER.") and the colour
   change landed in the middle of a line instead of at the turn. 19ch is the
   width of the longer of the two halves. */
.i1-scope .i1c-hero__h span { display: block; color: var(--i1-red); }
.i1-scope .i1c-hero__sub {
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.7; font-weight: var(--i1-w-body);
  color: var(--i1-slate); max-width: 58ch; margin: 0 auto 34px;
}
.i1c-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* One-line signpost to a named opening, under the hero buttons. Deliberately
   not a second pill: .i1c-hero__flag below is already one, and two would
   compete. The anchor is doubled under .i1-scope because the ported reset sets
   `a { color: inherit }` at (0,2,1) and would otherwise win. */
.i1c-hero__opening {
  margin: 22px 0 0; font-family: var(--i1-body); font-size: 15px;
  color: var(--i1-slate);
}
.i1-scope .i1c-hero__opening a {
  color: var(--i1-red-ui); font-weight: var(--i1-w-med); text-decoration: none;
  border-bottom: 1px solid rgba(216, 42, 55, 0.35);
  transition: border-color var(--i1-dur) var(--i1-ease);
}
.i1-scope .i1c-hero__opening a:hover { border-bottom-color: var(--i1-red-ui); }
.i1-scope .i1c-hero__opening a:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 3px; }

.i1c-hero__flag {
  display: inline-block; margin-top: 28px; padding: 10px 22px;
  border-radius: 100px; background: var(--i1-red-soft);
  color: var(--i1-red-deep); font-size: 14.5px; font-weight: var(--i1-w-med);
}

/* =========================== 02 proof =========================== */
/* Mirrors the home page stat cards: light card, red numeral, label under. */
.i1c-proof { background: var(--i1-white); padding: 0 0 clamp(48px, 6vw, 84px); }
.i1c-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.i1c-stat {
  background: var(--i1-off); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius); padding: 28px 26px; text-align: left;
}
.i1c-stat__n {
  display: block; font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1; letter-spacing: var(--i1-track);
  color: var(--i1-red); font-variant-numeric: tabular-nums;
}
.i1c-stat__n span { font-size: 0.5em; }
.i1c-stat__l { display: block; font-size: 14.5px; line-height: 1.55; color: var(--i1-slate); margin-top: 12px; }

/* =========================== quote =========================== */
.i1c-quote {
  background: var(--i1-white); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow-lg);
  padding: clamp(28px, 4vw, 48px); margin: 0 0 40px;
}
.i1-scope .i1c-quote p {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(20px, 2.9vw, 32px); line-height: 1.18; letter-spacing: var(--i1-track);
  color: var(--i1-ink); margin: 0 0 14px; max-width: 26ch;
}
.i1c-quote cite { font-style: normal; font-size: 14.5px; color: var(--i1-slate); }

/* =========================== cards =========================== */
/* Explicit column counts rather than auto-fit. auto-fit was producing 4+2 on
   six-card sections, leaving half a row empty and making the page look
   generated rather than art-directed. minmax(0,1fr) stops a track exceeding
   its column, which was bleeding 13px past the content edge at 375px. */
.i1c-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.i1c-card {
  background: var(--i1-white); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow); padding: 30px 28px;
}
.i1-scope .i1c-card h3 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 19px; line-height: 1.2; letter-spacing: var(--i1-track-sm);
  text-transform: uppercase; color: var(--i1-ink); margin: 0 0 12px;
}
.i1c-card p { font-size: 15.5px; line-height: 1.7; color: var(--i1-slate); margin: 0; }
/* Cards carried a single paragraph until the Director of HR and EV postings put
   two in one card, where margin:0 ran them together into one block. */
.i1c-card p + p { margin-top: 13px; }
.i1c-card ul { list-style: none; padding: 0; margin: 0; }
.i1c-card li { font-size: 15.5px; line-height: 1.6; color: var(--i1-slate); padding: 8px 0; border-bottom: 1px solid var(--i1-line); }
.i1c-card li:last-child { border-bottom: 0; }
.i1c-card b { color: var(--i1-ink); font-weight: var(--i1-w-med); }
/* was #CACACB on white = 1.64:1. Now uses slate. */
.i1c-tbc { display: block; margin-top: 10px; font-size: 13.5px; color: var(--i1-slate); }

/* =========================== tools =========================== */
.i1c-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.i1c-tools li {
  background: var(--i1-white); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow);
  padding: 26px 28px; font-size: 16px; line-height: 1.6; color: var(--i1-slate);
}
.i1c-tools li::before {
  content: ""; display: block; width: 32px; height: 4px;
  background: var(--i1-red); border-radius: 4px; margin-bottom: 16px;
}

/* =========================== ladder =========================== */
.i1c-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.i1c-track {
  background: var(--i1-white); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow); padding: 30px 28px;
}
.i1c-track--wide { grid-column: 1 / -1; }
.i1-scope .i1c-track__t {
  font-size: 13.5px; font-weight: var(--i1-w-med); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--i1-red-ui); margin: 0 0 20px;
}
.i1c-rungs { list-style: none; padding: 0; margin: 0; }
.i1c-rungs li { position: relative; padding: 0 0 22px 34px; }
.i1c-rungs li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--i1-red); box-shadow: 0 0 0 4px var(--i1-red-soft);
}
.i1c-rungs li::after {
  content: ""; position: absolute; left: 6px; top: 21px; bottom: 2px;
  width: 2px; background: var(--i1-line);
}
.i1c-rungs li:last-child { padding-bottom: 0; }
.i1c-rungs li:last-child::after { display: none; }
.i1-scope .i1c-rungs b {
  display: block; font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 18px; letter-spacing: var(--i1-track-sm); color: var(--i1-ink);
}
.i1c-rungs span { display: block; font-size: 15px; line-height: 1.6; color: var(--i1-slate); margin-top: 4px; }

.i1c-rungs--row { display: flex; flex-wrap: wrap; gap: 12px; }
.i1c-rungs--row li {
  flex: 1 1 190px; padding: 18px 20px; background: var(--i1-off);
  border-radius: var(--i1-radius-btn);
}
.i1c-rungs--row li::before, .i1c-rungs--row li::after { display: none; }

.i1c-callout {
  margin-top: 24px; background: var(--i1-red-soft);
  border-radius: var(--i1-radius); padding: 28px 32px;
}
.i1c-callout p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--i1-ink); max-width: 78ch; }
.i1c-callout b { font-weight: var(--i1-w-med); }

/* =========================== values (compact strip) =========================== */
.i1c-vals { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.i1-scope .i1c-vals li {
  display: flex; gap: 14px; align-items: center;
  background: var(--i1-white); border: 1px solid rgba(16,16,16,0.06);
  border-radius: var(--i1-radius-btn); padding: 18px 22px;
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 17px; letter-spacing: var(--i1-track-sm);
  text-transform: uppercase; color: var(--i1-ink);
}
.i1c-vals li span { color: var(--i1-red); font-family: var(--i1-body); font-size: 13px; flex: none; }

/* =========================== first 90 =========================== */
.i1c-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: start; }
.i1c-90 p { font-size: 16.5px; line-height: 1.75; color: var(--i1-slate); margin: 0 0 18px; }
.i1c-90 blockquote {
  margin: 24px 0; padding: 26px 30px; background: var(--i1-white);
  border: 1px solid rgba(16,16,16,0.06); border-radius: var(--i1-radius);
  box-shadow: var(--i1-shadow);
}
.i1-scope .i1c-90 blockquote p {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.28;
  letter-spacing: var(--i1-track-sm); color: var(--i1-ink); margin: 0;
}

/* =========================== roles =========================== */
.i1-scope .i1c-role {
  display: block; text-decoration: none; color: var(--i1-ink);
  background: var(--i1-white); border: 2px solid rgba(16,16,16,0.07);
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow); padding: 30px 28px;
  transition: border-color var(--i1-dur) var(--i1-ease), box-shadow var(--i1-dur) var(--i1-ease);
}
.i1-scope .i1c-role:hover { border-color: var(--i1-red); box-shadow: var(--i1-shadow-lg); }
.i1-scope .i1c-role:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 3px; }
.i1-scope .i1c-role h3 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 20px; line-height: 1.15; letter-spacing: var(--i1-track-sm);
  text-transform: uppercase; color: var(--i1-ink); margin: 0 0 12px;
}
.i1-scope .i1c-role, .i1-scope .i1c-role p, .i1-scope .i1c-role span { font-family: var(--i1-body); }
.i1c-role p { font-size: 15.5px; line-height: 1.65; color: var(--i1-slate); margin: 0 0 16px; }
/* was #CACACB = 1.64:1 on white. */
.i1c-role__next { display: block; font-size: 14px; color: var(--i1-slate); }
.i1c-role__go { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: var(--i1-w-med); color: var(--i1-red-ui); }

/* =========================== steps =========================== */
.i1c-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.i1c-steps li {
  counter-increment: s; background: var(--i1-white);
  border: 1px solid rgba(16,16,16,0.06); border-radius: var(--i1-radius);
  box-shadow: var(--i1-shadow); padding: 28px 26px;
}
.i1c-steps li::before {
  content: counter(s); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--i1-red-soft);
  color: var(--i1-red); font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 18px; margin-bottom: 18px;
}
.i1-scope .i1c-steps b {
  display: block; font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 18px; letter-spacing: var(--i1-track-sm); text-transform: uppercase;
  color: var(--i1-ink); margin-bottom: 7px;
}
.i1c-steps span { font-size: 15px; line-height: 1.6; color: var(--i1-slate); }

/* =========================== cta =========================== */
.i1c-cta { background: var(--i1-red-ui); padding: clamp(56px, 7.5vw, 96px) 0; text-align: center; }
.i1-scope .i1c-cta h2 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(28px, 4.6vw, 52px); line-height: 1.04; letter-spacing: var(--i1-track);
  text-transform: uppercase; color: var(--i1-white); margin: 0 0 16px;
}
.i1c-cta p { font-size: clamp(16px, 1.9vw, 19px); color: rgba(255,255,255,0.94); margin: 0 auto 32px; max-width: 46ch; }

/* =========================== sticky (mobile) =========================== */
.i1c-sticky { display: none; }

/* =========================== responsive =========================== */
@media (max-width: 980px) {
  .i1c-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .i1c-tracks { grid-template-columns: 1fr; }
  .i1c-split { grid-template-columns: 1fr; gap: 30px; }
  .i1c-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .i1c-steps { grid-template-columns: 1fr; }
  .i1c-hero__cta { flex-direction: column; align-items: stretch; }
  .i1-scope .i1c-btn { padding: 19px 30px; }

  /* Was `flex: 1 1 190px`, which stretched these into tall empty blocks
     once they stacked. Auto height, no grow. */
  .i1c-rungs--row { flex-direction: column; }
  .i1c-rungs--row li { flex: 0 0 auto; min-height: 0; }

  /* Hidden until the hero's own buttons scroll away, otherwise there are three
     competing CTAs above the fold and the bar covers the hero image. */
  .i1c-sticky {
    display: block; position: fixed; left: 12px; right: 12px; z-index: 90;
    bottom: max(12px, env(safe-area-inset-bottom));
    opacity: 0; transform: translateY(120%); pointer-events: none;
    transition: opacity 0.15s var(--i1-ease), transform 0.15s var(--i1-ease);
  }
  .i1-careers.past-hero-cta .i1c-sticky { opacity: 1; transform: none; pointer-events: auto; }
  .i1-scope .i1c-sticky .i1c-btn { display: block; box-shadow: 0 6px 24px rgba(0,0,0,0.22); }
  .i1-careers { padding-bottom: 92px; }

  /* Hidden once the real CTA is on screen — see the IntersectionObserver
     in page-careers.php. Stops it hovering over the footer. */
  .i1-careers.has-reached-cta .i1c-sticky {
    opacity: 0; transform: translateY(120%); pointer-events: none;
  }
}

/* =========================== photography =========================== */
/* Hero image band, sitting directly under the hero copy. */
.i1c-heroshot { background: var(--i1-white); padding: 0 24px clamp(40px, 5vw, 64px); }
.i1c-heroshot img {
  display: block; width: 100%; max-width: 1180px; margin: 0 auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow-lg);
}

.i1c-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.i1c-shots--3 { margin-top: 34px; }
.i1c-shot { margin: 0; }
.i1c-shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow);
}
.i1-scope .i1c-shot figcaption {
  font-family: var(--i1-body); font-style: normal;
  font-size: 14.5px; line-height: 1.55; color: var(--i1-slate); padding: 14px 4px 0;
}

.i1c-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.i1c-team { margin: 0; border-radius: var(--i1-radius); overflow: hidden; background: var(--i1-white); box-shadow: var(--i1-shadow); }
.i1c-team img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.i1-scope .i1c-team figcaption {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 15px; letter-spacing: var(--i1-track-sm); text-transform: uppercase;
  color: var(--i1-ink); padding: 15px 18px;
}

/* =========================== locations grid =========================== */
.i1c-locs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.i1c-loc { margin: 0; border-radius: var(--i1-radius); overflow: hidden; background: var(--i1-white); box-shadow: var(--i1-shadow); }
.i1c-loc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.i1-scope .i1c-loc figcaption {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 14px; letter-spacing: var(--i1-track-sm); text-transform: uppercase;
  font-style: normal; color: var(--i1-ink); padding: 13px 15px;
}
@media (max-width: 480px) { .i1c-locs { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* =========================== auto care 101 clip =========================== */
.i1c-clip { margin: 0 0 20px; }
.i1c-video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow-lg); background: var(--i1-off);
}

/* 4-up photo rows (training, events) — smaller cards than the 3-up shot grid */
.i1c-shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; }

/* =========================== hero image =========================== */
/* Desktop: the still sits behind the hero under a white scrim, so the page
   opens on an image like the home page does. Mobile keeps it stacked below the
   copy, where a background image behind small type is harder to read. */
.i1c-heroshot { padding: 0 24px clamp(40px, 5vw, 64px); }
.i1c-heroshot__img {
  display: block; width: 100%; max-width: 1180px; margin: 0 auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow-lg);
}

@media (min-width: 768px) {
  /* Hero legibility, measured 11 Sep 2026 rather than eyeballed.
     At the old 0.78 scrim, against the DARKEST part of the photo behind the
     text, three of the four text elements failed WCAG AA:
       sub-headline #5A5A5C  4.07:1  (needs 4.5)
       kicker       #D82A37  2.88:1  (needs 4.5)
       headline red #E13845  2.56:1  (needs 3.0 at display size)
     and the white outline button sat at 1.4:1 against the backdrop, so its
     shape barely registered.
     Raising the scrim alone was not enough for the kicker, so the two weakest
     colours are darkened here as well. Worst-case figures after this change are
     in the comments beside each rule. */
  .i1c-hero {
    position: relative; min-height: 640px;
    display: flex; align-items: center;
    background:
      linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
      var(--i1-hero-img) center / cover no-repeat,
      var(--i1-white);
  }
  .i1-scope .i1c-hero .i1c-kicker { color: var(--i1-red-deep); }   /* 5.62:1, was 3.52 */
  .i1-scope .i1c-hero__sub        { color: #4A4A4E; }              /* 6.37:1, was 4.97 */
  /* The outline button's own fill is white, so on a pale hero the border is the
     only thing describing the control. It has to carry 3:1 on its own. */
  .i1-scope .i1c-hero__cta .i1c-btn--line { border-color: #6E6E72; }
  .i1-scope .i1c-hero__cta .i1c-btn--line:hover { border-color: var(--i1-red); color: var(--i1-red); }
  /* The "Now hiring" signpost sits on the same photo, so it needs the same
     treatment. red-ui was 3.52:1 here against 4.5 required. */
  .i1-scope .i1c-hero__opening   { color: #4A4A4E; }               /* 6.37:1 */
  .i1-scope .i1c-hero__opening a { color: var(--i1-red-deep); border-bottom-color: rgba(165, 17, 29, 0.4); }  /* 5.62:1 */
  .i1-scope .i1c-hero__opening a:hover { border-bottom-color: var(--i1-red-deep); }
  .i1c-hero > .i1c-wrap { position: relative; width: 100%; }
  /* the stacked still is redundant once the hero carries the image */
  .i1c-heroshot { display: none; }
}

/* 2-up video row inside "Inside the shop" */
.i1c-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.i1c-shot .i1c-video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--i1-radius); box-shadow: var(--i1-shadow); background: var(--i1-off);
}


/* Native controls are required for WCAG 2.2.2 (a mechanism to pause moving
   content). Keep them unobtrusive until the clip is hovered or focused. */
.i1c-video::-webkit-media-controls-panel { opacity: 0; transition: opacity var(--i1-dur) var(--i1-ease); }
.i1c-video:hover::-webkit-media-controls-panel,
.i1c-video:focus-within::-webkit-media-controls-panel { opacity: 1; }
@media (hover: none) { .i1c-video::-webkit-media-controls-panel { opacity: 1; } }


/* =========================== responsive grid counts =========================== */
@media (max-width: 980px) {
  .i1c-grid, .i1c-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i1c-shots--4, .i1c-locs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .i1c-grid, .i1c-shots, .i1c-shots--2 { grid-template-columns: minmax(0, 1fr); }
  .i1c-shots--4, .i1c-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* 52px of padding inside a 155px card left a 103px measure, breaking labels
     into seven or eight lines. */
  .i1c-proof__grid { gap: 12px; }
  .i1c-stat { padding: 22px 18px; }
}

/* ---------------------------------------------------------------------------
   Where you'd work: four featured exteriors, then every shop named by metro.
   The grid dropped from fifteen cards to four because the other eleven photos
   were weak; see the note in inc/careers-facts.php. Naming every shop in the
   list means nothing is hidden by that.
   Selectors are doubled under .i1-scope where they set colour or font, because
   the Elementor kit styles bare elements at (0,1,1) and would otherwise win.
   --------------------------------------------------------------------------- */

.i1c-metros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--i1-line);
}
.i1-scope .i1c-metro h3 {
  font-family: var(--i1-display);
  font-weight: var(--i1-w-display);
  letter-spacing: var(--i1-track-sm);
  font-size: 17px;
  color: var(--i1-ink);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.i1-scope .i1c-metro h3 span {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--i1-red-soft);
  color: var(--i1-red-ui);
  font-family: var(--i1-body);
  font-weight: var(--i1-w-med);
  font-size: 13px;
  letter-spacing: 0;
  vertical-align: middle;
}
.i1c-metro ul { list-style: none; margin: 0; padding: 0; }
.i1-scope .i1c-metro li {
  font-family: var(--i1-body);
  font-weight: var(--i1-w-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--i1-slate);
  padding: 7px 0 7px 18px;
  position: relative;
  border-bottom: 1px solid var(--i1-line);
}
.i1c-metro li:last-child { border-bottom: 0; }
.i1c-metro li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--i1-red);
}

/* A metro with a lot of shops takes two columns rather than running as one
   very long list beside two short ones. Threshold is set in the template. */
.i1c-metro--wide { grid-column: span 2; }
.i1c-metro--wide ul { column-count: 2; column-gap: 26px; }
.i1c-metro--wide li { break-inside: avoid; }

@media (max-width: 900px) {
  .i1c-metros { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .i1c-metro--wide { grid-column: auto; }
}
@media (max-width: 560px) {
  .i1c-metro--wide ul { column-count: 1; }
}

/* A button sitting under body copy inside a section. Spacing only; the button
   itself is .i1c-btn as everywhere else. Added for the Director of HR posting. */
.i1c-cta-row { margin: 30px 0 0; }

/* Two card grids stacked in one section read as one block, so give the second
   the same gap the cards use between themselves. Selector rather than a class
   so the markup stays plain. Added for the Director of HR posting. */
.i1c-grid + .i1c-grid { margin-top: 20px; }