/* =========================================================================
   CALIBER CAREERS -world-class careers page template
   -------------------------------------------------------------------------
   THEME SWAP POINTS (everything brand-specific lives here):
     1. --brand-primary / --brand-accent (+ deep + tint variants) below
     2. --brand-font-display / --brand-font-body
     3. Logo + photography URLs in index.html
     4. Copy in index.html
   Swap those five things and this becomes any customer's careers page.
   Current theme: Everest People (everestpeople.co.nz)
   ========================================================================= */

:root {
  /* ---- BRAND (swap these per customer) ---- */
  --brand-primary:        #5B1446;            /* Everest plum */
  --brand-primary-strong: #3D0B30;
  --brand-primary-2:      #8A2670;            /* lighter plum for gradients */
  --brand-primary-tint:   rgba(91, 20, 70, 0.07);
  --brand-primary-line:   rgba(91, 20, 70, 0.12);
  --brand-accent:         #F05B2F;            /* Everest burnt orange */
  --brand-accent-strong:  #C93D02;
  --brand-font-display: 'Mulish', system-ui, -apple-system, sans-serif;
  --brand-font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  /* ---- NEUTRALS (theme-agnostic) ---- */
  --ink:        #1B1018;
  --ink-soft:   #4A3B43;
  --muted:      #786B72;
  --line:       var(--brand-primary-line);
  --line-soft:  rgba(91, 20, 70, 0.06);
  --cream:      #FAF7F4;
  --cream-warm: #F5EFE8;
  --cream-deep: #F1E9E0;
  --white:      #FFFFFF;
  --live:       #2BB673;

  /* ---- SYSTEM ---- */
  /* 1144 rather than 1200, which gives 1080px of content inside the gutters.
     The embedded jobs board caps its own content at max-w-[1080px] and
     centres it, so any wider and the board's cards sit inset from our
     headings no matter how wide we make the iframe. Matching 1080 lines the
     board up with the rest of the page, and still lines up if the board
     later drops that cap in embed mode. */
  --container: 1144px;
  --gutter: 32px;
  --nav-h: 90px;              /* 62px bar + 14px padding top and bottom */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-card: 0 24px 60px -34px rgba(91, 20, 70, 0.26);
  --shadow-float: 0 18px 48px -16px rgba(91, 20, 70, 0.5);
}

/* =========================================================================
   Reset + base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--brand-font-body);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: var(--brand-primary); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--brand-accent); }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--brand-font-display);
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
}
p { margin: 0; }
::selection { background: var(--brand-accent); color: var(--white); }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 4px; }

/* =========================================================================
   Layout utilities
   ========================================================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: 1360px; }

.section { padding: clamp(76px, 8.5vw, 132px) 0; }
.section--cream { background: var(--cream); }
.section--cream-warm { background: var(--cream-warm); }
.section--primary { background: var(--brand-primary); color: var(--white); }
.section--primary h1, .section--primary h2, .section--primary h3 { color: var(--white); }
.section--tight { padding: clamp(56px, 6vw, 90px) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--brand-font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-accent-strong);
}
.eyebrow--light { color: rgba(255,255,255,0.9); }

.h1 { font-size: clamp(46px, 6.6vw, 92px); letter-spacing: -0.035em; line-height: 0.98; }
.h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.03em; }
.h3 { font-size: clamp(20px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.018em; }

.lede {
  font-family: var(--brand-font-body); font-weight: 300;
  font-size: clamp(16.5px, 1.35vw, 20px); line-height: 1.55;
  color: var(--ink-soft); max-width: 600px;
}
.section--primary .lede { color: rgba(255,255,255,0.78); }

.section__head { max-width: 720px; margin-bottom: clamp(44px, 4.5vw, 72px); }
.section__head .eyebrow { margin-bottom: 22px; }
.section__head h2 { margin-bottom: 20px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  font-family: var(--brand-font-display); font-weight: 700; font-size: 15px;
  border-radius: 100px; white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--brand-primary); color: var(--white); }
.btn--primary:hover { background: var(--brand-primary-strong); color: var(--white); transform: translateY(-1px); }
.btn--accent { background: var(--brand-accent); color: var(--white); }
.btn--accent:hover { background: var(--brand-accent-strong); color: var(--white); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--brand-primary-line); }
.btn--ghost:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); }
.btn--ghost-light:hover { background: var(--white); color: var(--brand-primary); }
.btn--lg { padding: 17px 30px; font-size: 16px; }

.linkarrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--brand-font-display); font-weight: 700; font-size: 15px;
  color: var(--brand-accent-strong);
}
.linkarrow svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.linkarrow:hover { color: var(--brand-accent); }
.linkarrow:hover svg { transform: translateX(4px); }

/* =========================================================================
   Floating rounded nav (pill that floats from the top, like caliberjobs.com)
   ========================================================================= */
.nav { position: sticky; top: 0; z-index: 100; padding: 14px 20px; pointer-events: none; }
.nav__bar {
  pointer-events: auto;
  max-width: 1140px; margin: 0 auto; height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 12px 0 26px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(91,20,70,0.1);
  border-radius: 100px;
  box-shadow: 0 8px 30px -12px rgba(91,20,70,0.18), 0 1px 2px rgba(91,20,70,0.04);
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.nav.is-scrolled .nav__bar {
  background: rgba(255,255,255,0.93);
  box-shadow: 0 14px 40px -14px rgba(91,20,70,0.3), 0 2px 5px rgba(91,20,70,0.06);
}

/* Over the full bleed hero the bar floats on the photograph, so it flips to
   dark glass with light type. The logo is a baked raster inside the SVG and
   cannot be recoloured, so it gets knocked back to white. Scrolling past the
   hero returns it to the light bar every other page uses. */
.nav--over:not(.is-scrolled) .nav__bar {
  background: rgba(27,16,24,0.24);
  border-color: rgba(255,255,255,0.22);
  box-shadow: none;
}
.nav--over:not(.is-scrolled) .nav__logo img { filter: brightness(0) invert(1); }
.nav--over:not(.is-scrolled) .nav__link { color: rgba(255,255,255,0.88); }
.nav--over:not(.is-scrolled) .nav__link:hover,
.nav--over:not(.is-scrolled) .nav__link.is-current { color: var(--white); }
.nav--over:not(.is-scrolled) .nav__cta { background: var(--white); color: var(--brand-primary); }
.nav--over:not(.is-scrolled) .nav__cta:hover { background: rgba(255,255,255,0.86); color: var(--brand-primary); }
.nav--over:not(.is-scrolled) .nav__burger span,
.nav--over:not(.is-scrolled) .nav__burger span::before,
.nav--over:not(.is-scrolled) .nav__burger span::after { background: var(--white); }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link {
  font-family: var(--brand-font-display); font-weight: 600; font-size: 14.5px; color: var(--ink);
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--brand-accent); transition: width 0.22s var(--ease);
}
.nav__link:hover { color: var(--brand-primary); }
.nav__link:hover::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__cta { padding: 11px 20px; font-size: 14px; }
.nav__link.is-current { color: var(--brand-primary); }
.nav__link.is-current::after { width: 100%; }
.nav__burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--brand-primary); position: relative; border-radius: 2px;
}
.nav__burger span::before { position: absolute; top: -7px; }
.nav__burger span::after { position: absolute; top: 7px; }

/* Waving hand on the primary CTA */
.wave { display: inline-block; transform-origin: 65% 90%; animation: wave 3s ease-in-out infinite; }
@keyframes wave {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(16deg); }
  67% { transform: rotate(-10deg); }
  74% { transform: rotate(16deg); }
  81% { transform: rotate(-6deg); }
  88% { transform: rotate(10deg); }
}

/* =========================================================================
   Hero (compact + centred, leads straight into the live jobs board)
   ========================================================================= */
.hero { position: relative; padding: clamp(40px, 5vw, 72px) 0 clamp(26px, 3vw, 40px); overflow: hidden; text-align: center; }
.hero::before {
  content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 72%; height: 160%;
  background: radial-gradient(ellipse at center, rgba(240,91,47,0.08), transparent 62%); pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero__kicker { margin-bottom: 22px; }
.hero__title { margin-bottom: 22px; font-size: clamp(44px, 6vw, 84px); text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--brand-accent); }
.hero__sub {
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-soft);
  margin: 0 auto 32px; max-width: 600px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; justify-content: center; }

/* ---- Full bleed hero: rotating team photography behind the brand line ----
   Everest's own careers site opens on a full height photo carousel, so this
   keeps that shape and improves on it four ways:
     - a directional scrim, so faces stay bright instead of the whole frame
       dimming evenly and going muddy
     - copy anchored bottom left in the negative space, rather than centred
       over whoever is in the middle of the shot
     - timed progress bars instead of dots, so how many photos there are and
       how long each one lasts are both visible
     - it stops short of full height, so the roles board is already showing
       and no "scroll to content" prompt is needed
   ------------------------------------------------------------------------ */
.hero--shot {
  position: relative; overflow: hidden; padding: 0;
  /* Full viewport, the same as their own careers site. dvh so mobile browser
     chrome collapsing does not leave a strip of the next section showing. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Centred, not bottom anchored. Anchoring the copy to the foot of the photo
     means every extra pixel of screen height lands in one place, the band
     under the nav, growing one for one with the viewport: 243px of it on a
     900px screen but 767px on a 1440px one, which is what made tall displays
     look empty up top while short ones looked right. Centring splits that
     growth between the two ends, and the padding below keeps the block
     sitting low enough to stay out of the middle of the photograph. */
  display: flex; align-items: center; text-align: left;
  /* The nav is sticky, so it reserves its own height at the top of the page.
     Pull the photo up underneath it: the nav should float on the photograph,
     not sit in a strip above it. */
  margin-top: calc(-1 * var(--nav-h));
}
.hero--shot::before { content: none; }          /* the cream radial glow */

.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

.hero__scrim {
  position: absolute; inset: 0;
  /* Weighted to the bottom left corner the copy sits in, so that corner is
     near solid while the top right of the photograph stays bright. The flat
     layer last is insurance: the photos vary a lot in exposure. */
  background:
    linear-gradient(to top, rgba(27,16,24,0.92) 0%, rgba(27,16,24,0.62) 28%, rgba(27,16,24,0.16) 62%, rgba(27,16,24,0) 100%),
    linear-gradient(to right, rgba(27,16,24,0.82) 0%, rgba(27,16,24,0.34) 44%, rgba(27,16,24,0) 78%),
    linear-gradient(rgba(27,16,24,0.16), rgba(27,16,24,0.16));
}

.hero__content {
  position: relative; z-index: 2; width: 100%;
  /* Uneven on purpose. With the block centred, the heavier top padding is what
     biases it into the lower half of the frame, where it belongs over a photo
     with people in the middle of it. Both scale with the viewport so the
     proportion holds instead of freezing at a ceiling. */
  padding-top: clamp(140px, 24vh, 300px);
  padding-bottom: clamp(120px, 15vh, 220px);
}
/* Column and type scale with the screen rather than freezing. The shared
   hero caps its headline at 84px, which is reached at 1400px wide, so on
   anything larger the copy kept shrinking against the frame around it while
   the photograph grew. Here it keeps going to 104px, and the column and lede
   widen with it so the line lengths stay even. */
.hero--shot .hero__inner { max-width: clamp(620px, 48vw, 860px); margin: 0; }
.hero--shot .hero__title { color: var(--white); font-size: clamp(44px, 6vw, 104px); }
.hero--shot .hero__title em { color: var(--brand-accent); }
.hero--shot .hero__sub { color: rgba(255,255,255,0.84); margin: 0 0 30px; max-width: clamp(520px, 38vw, 680px); }
.hero--shot .hero__ctas { justify-content: flex-start; margin-bottom: 0; }

/* Carousel indicator: their own layer, centred on the foot of the photo.
   Geometry follows Apple's dotnav, which is worth copying because it solves
   this exact problem: an 8px dot per slide, and the current slide's dot
   stretches into a 48px capsule. Chunky and fully rounded reads as
   deliberate at a glance, where a hairline rule just looks flimsy. Ours adds
   a fill to the capsule, because this carousel advances on its own and the
   dot should say how long is left. */
.hero__bars {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(26px, 3.6vh, 40px);
  display: flex; align-items: center; gap: 9px;
}
.hero__bar {
  position: relative; width: 8px; height: 8px;
  padding: 0; border: 0; cursor: pointer;
  border-radius: 10px; background: rgba(255,255,255,0.45);
  transition: width 0.45s var(--ease), background 0.3s ease;
}
.hero__bar[aria-current="true"] { width: 48px; background: rgba(255,255,255,0.3); }
.hero__bar:hover { background: rgba(255,255,255,0.62); }
.hero__bar[aria-current="true"]:hover { background: rgba(255,255,255,0.36); }
/* The fill. Sits inside the capsule and is driven from script.js, which owns
   the slide duration. Scaled rather than widened: width animates on the main
   thread and forces layout every frame, which on a page this heavy made the
   bar visibly stutter. A transform runs on the compositor instead. */
.hero__bar span {
  position: absolute; inset: 0;
  border-radius: inherit; background: var(--white);
  transform: scaleX(0); transform-origin: left center;
}
/* A real tap target without changing how big the dot looks. */
.hero__bar::after { content: ""; position: absolute; inset: -9px -5px; }

.hero__meta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.hero__meta-item { display: inline-flex; align-items: center; gap: 9px; }
.hero__meta-item strong { color: var(--brand-primary); font-weight: 700; font-family: var(--brand-font-display); }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(43,182,115,0.45); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(43,182,115,0.45);} 70% { box-shadow: 0 0 0 11px rgba(43,182,115,0);} 100% { box-shadow: 0 0 0 0 rgba(43,182,115,0);} }

/* ---- Hero sizing by viewport HEIGHT, which is what actually breaks it ----
   Short screens: the rhythm was built from padding floors sized for a tall
   window, so under about a laptop's height the block outgrew the viewport and
   shoved the carousel controls off the bottom, 130px under the fold in phone
   landscape and 31px under it at 1280x600. Tightening the type and the
   padding brings the block back inside the screen, and min-height:100dvh then
   fills whatever is left rather than overflowing it.
   Tall screens keep their band of open photograph above the copy on purpose.
   Lifting the copy to close it was tried and only moved the gap below the
   button, which reads worse because it cuts the call to action off from the
   carousel controls. */
@media (max-height: 720px) {
  .hero__content { padding-top: clamp(126px, 19vh, 160px); padding-bottom: clamp(60px, 11vh, 110px); }
  .hero--shot .hero__title { font-size: clamp(38px, 4.6vw, 64px); }
  .hero--shot .hero__sub { margin-bottom: 22px; }
  .hero__kicker { margin-bottom: 14px; }
  .hero__title { margin-bottom: 14px; }
  .hero__bars { bottom: 18px; }
}
/* Phone in landscape. Roughly 300px of usable band once the nav and the
   controls have taken their share, so the rhythm has to come right in or the
   controls go under the fold again. */
@media (max-height: 480px) {
  .hero__content { padding-top: 108px; padding-bottom: 34px; }
  .hero--shot .hero__sub { margin-bottom: 16px; }
  .hero__bars { bottom: 12px; }
}

/* =========================================================================
   Stats strip (typography-led, count-up)
   ========================================================================= */
.stat:first-child { border-left: 0; padding-left: 0; }

/* =========================================================================
   Why apply -editorial mixed grid
   ========================================================================= */
/* The anchor of the section. It used to be a white card on a white section,
   so the card itself never registered and the photo read as a rectangle
   dropped in next to the text. On plum it becomes a single object, and the
   photo is faded into the panel from the left rather than butted against the
   copy with a hard edge. */
.why__feature {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; overflow: hidden;
  background: var(--brand-primary); border-radius: var(--radius-lg);
  margin-bottom: 22px; box-shadow: var(--shadow-card);
}
.why__feature-copy { padding: clamp(38px, 4.4vw, 62px); display: flex; flex-direction: column; justify-content: center; }
.why__feature-copy h3 { color: var(--white); font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 16px; }
.why__feature-copy p { color: rgba(255,255,255,0.76); font-size: 16px; line-height: 1.6; max-width: 440px; }
.why__feature-media { position: relative; min-height: clamp(340px, 33vw, 430px); }
/* Overhangs the right edge by a pixel. The grid column lands on a fractional
   width, so at inset:0 the plum panel behind shows through as a hairline down
   the edge of the photo. */
.why__feature-media img { position: absolute; inset: 0 -1px 0 0; width: calc(100% + 1px); max-width: none; height: 100%; object-fit: cover; }
.why__feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--brand-primary) 0%, rgba(91,20,70,0.42) 30%, rgba(91,20,70,0) 64%);
}

.why__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why__card {
  padding: 34px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.why__card:hover { transform: translateY(-3px); border-color: rgba(91,20,70,0.22); box-shadow: var(--shadow-card); }
.why__card-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--brand-primary-tint);
  display: flex; align-items: center; justify-content: center; color: var(--brand-primary); margin-bottom: 22px;
}
.why__card-icon svg { width: 22px; height: 22px; }
.why__card h3 { font-size: 20px; margin-bottom: 11px; }
.why__card p { color: var(--ink-soft); font-size: 15px; line-height: 1.58; }

/* Four across for the candidate resources teaser. */
.why__row--four { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why__row--four .why__card { padding: 30px 26px; }
.why__row--four .why__card h3 { font-size: 18px; }

/* These cards are links, so they say so and the arrow moves on hover. */
.why__card--link { display: flex; flex-direction: column; }
.why__card--link p { flex: 1; }
.why__card-go {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--brand-font-display); font-weight: 700; font-size: 14px;
  color: var(--brand-accent-strong);
}
.why__card-go svg { width: 15px; height: 15px; transition: transform 0.22s var(--ease); }
.why__card--link:hover .why__card-go svg { transform: translateX(4px); }

/* =========================================================================
   Industries marquee
   ========================================================================= */
.marquee { position: relative; display: flex; flex-direction: column; gap: 16px; }
.marquee__row { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 14px; padding-right: 14px; flex-shrink: 0; animation: marquee 46s linear infinite; }
.marquee__row--reverse .marquee__track { animation-direction: reverse; animation-duration: 54s; }
/* No pause on hover. The row is decorative and aria-hidden, so there is
   nothing to stop and read, and the pointer crosses it constantly on the way
   down the page, which made it stutter and look broken. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ind-pill {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 16px 26px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--white); font-family: var(--brand-font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.ind-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); }
.section--cream .ind-pill { background: var(--white); }

/* =========================================================================
   Open roles -clean iframe frame (no competing chrome)
   ========================================================================= */
.roles__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-bottom: 18px;
}
.roles__signals { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.roles__signal { display: inline-flex; align-items: center; gap: 8px; }
.roles__signal svg { width: 16px; height: 16px; color: var(--brand-accent-strong); }
.roles__poweredby { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.roles__poweredby b { color: var(--brand-primary); font-family: var(--brand-font-display); font-weight: 800; }

/* Seamless: the embedded board is transparent and sits directly on the
   section background, so it reads as native page content, not a boxed widget. */
/* The board caps its content at `mx-auto max-w-[1080px]` with no padding, so
   its cards sit flush against both edges of whatever frame we give it, and
   their drop shadow (32px blur, so ~16px of bleed) gets sliced off square by
   the iframe boundary. Widening the frame cannot move the cards, `mx-auto`
   re-centres them, which is exactly what is wanted here: overhang the frame
   by 24px each side and that becomes gutter for the shadow to paint into,
   while the 1080 content column stays lined up with the heading above it.
   Only above 1144px, which is where our own column actually reaches 1080. */
.roles__frame { overflow: visible; }
@media (min-width: 1144px) { .roles__frame { margin-inline: -24px; } }
/* No fixed `height` here on purpose. The board measures itself and posts its
   height, and script.js applies that inline. A height in this rule fights the
   posted value: the roles list only needs ~286px so the frame sat half empty,
   and a job's detail view is taller than 560px so its card got sliced off at
   the bottom. `min-height` is only a placeholder holding the space open until
   the first message arrives, and script.js clears it at that point.
   No `transition` on the height either. Everest's live board is ~3900px tall,
   so animating to a ~500px detail view drags the whole page up over 200ms,
   and the transition was observed sticking at frame 0 and stranding the frame
   at its previous height. The official embed snippet sets the height flat. */
.roles__frame iframe { width: 100%; min-height: 560px; border: 0; background: transparent; display: block; }

.roles__foot { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.roles__assist {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 24px 28px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--line);
}
.roles__assist p { font-size: 15.5px; color: var(--ink-soft); }
.roles__assist strong { color: var(--brand-primary); font-family: var(--brand-font-display); font-weight: 800; }
.roles__foot .poweredby { align-self: flex-end; }

/* Caliber "Powered by" lockup (real brand: blue-gradient star + Outfit wordmark) */
.poweredby { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', var(--brand-font-body); font-size: 13px; color: var(--muted); font-weight: 500; }
.cal-lockup { display: inline-flex; align-items: center; gap: 5px; }
.cal-lockup img { width: 17px; height: 17px; display: block; }
.cal-lockup b { font-family: 'Outfit', var(--brand-font-display); font-weight: 800; font-size: 14.5px; color: #06082C; letter-spacing: -0.01em; }
.cal-lockup--light b { color: #FFFFFF; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.quotes { display: block; }
.quote {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 52px 44px 40px;
  min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; color: var(--white);
}
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.quote::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(155deg, rgba(61,11,48,0.55), rgba(91,20,70,0.88)); }
.quote__inner, .quote__author { position: relative; z-index: 2; }
.quote__mark { font-family: Georgia, serif; font-size: 72px; line-height: 0.5; color: var(--brand-accent); margin-bottom: 18px; }
.quote__text { font-family: var(--brand-font-display); font-weight: 500; font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; }
.quote__author { font-family: var(--brand-font-display); font-weight: 800; font-size: 15px; }
.quote__author span { display: block; font-weight: 400; font-size: 13px; opacity: 0.82; margin-top: 3px; }

/* =========================================================================
   Team -real photos, editorial
   ========================================================================= */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.member {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--cream-warm);
  border: 1px solid var(--line); transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.member--feature { grid-column: span 2; grid-row: span 1; }
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.member__photo { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.member--feature .member__photo { aspect-ratio: 2/1; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s var(--ease); }
.member__body { padding: 16px 18px 20px; }
.member__name { font-family: var(--brand-font-display); font-weight: 800; font-size: 16px; color: var(--brand-primary); letter-spacing: -0.012em; }
.member__role { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.member--cta {
  grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--brand-primary); border-color: var(--brand-primary); color: var(--white); padding: 34px 36px;
}
.member--cta:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.member--cta h3 { color: var(--white); font-size: clamp(20px, 2vw, 26px); }
.member--cta p { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 8px; max-width: 240px; }
.member--cta .member__cta-circle {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--brand-accent);
  display: flex; align-items: center; justify-content: center; color: var(--white); transition: transform 0.22s var(--ease);
}
.member--cta:hover .member__cta-circle { transform: translateX(5px); }
.member--cta .member__cta-circle svg { width: 22px; height: 22px; }

/* =========================================================================
   How it works -editorial zigzag
   ========================================================================= */
.steps { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.step:nth-child(even) .step__media { order: -1; }
.step__num {
  font-family: var(--brand-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.08em;
  color: var(--brand-accent); margin-bottom: 18px;
}
.step__title { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.step__body { color: rgba(255,255,255,0.78); font-size: 16.5px; line-height: 1.6; max-width: 440px; }
.step__media {
  aspect-ratio: 2/1; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.step__media-glass {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px;
}

/* ---- Rail variant: four stops across one row ----
   The alternating full width rows were the same shape four times over, which
   made the section very tall and gave it no forward motion. A rule with a
   node at the head of each column does the sequencing instead. */
.steps--rail { flex-direction: row; gap: clamp(20px, 2.4vw, 36px); }
.steps--rail .step { display: block; flex: 1; min-width: 0; }
.steps--rail .step:nth-child(even) .step__media { order: 0; }
.steps--rail .step__media { aspect-ratio: 16 / 11; border-radius: var(--radius); margin-bottom: clamp(22px, 2.4vw, 32px); }
.steps--rail .step__copy { position: relative; padding-top: 21px; border-top: 1px solid rgba(255,255,255,0.2); }
.steps--rail .step__copy::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent);
}
.steps--rail .step__num { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.steps--rail .step__title { font-size: clamp(19px, 1.55vw, 23px); margin-bottom: 11px; }
.steps--rail .step__body { font-size: 15px; line-height: 1.6; max-width: none; }
.step__big {
  font-family: var(--brand-font-display); font-weight: 800; font-size: clamp(80px, 12vw, 150px);
  color: rgba(255,255,255,0.08); letter-spacing: -0.05em; line-height: 1;
}

/* =========================================================================
   Caliber + FAQ
   ========================================================================= */

.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; font-family: var(--brand-font-display); font-weight: 700; font-size: 18px; color: var(--brand-primary);
}
.faq__icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform 0.25s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--brand-accent); border-radius: 2px; }
.faq__icon::before { top: 11px; left: 3px; right: 3px; height: 2px; }
.faq__icon::after { left: 11px; top: 3px; bottom: 3px; width: 2px; transition: transform 0.25s var(--ease); }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease); }
.faq__a-inner { padding: 0 0 24px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 540px; }

/* =========================================================================
   Connect -designed form + contact card
   ========================================================================= */
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.connect__form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--brand-font-display); font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 8px; letter-spacing: 0.01em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-family: var(--brand-font-body); font-size: 15px; color: var(--white);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-accent); background: rgba(255,255,255,0.1); }
.connect__hint { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.6); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field select option { color: #000; }
.filerow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.filefield {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px dashed rgba(255,255,255,0.28); border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7); font-size: 14px; transition: border-color 0.18s ease;
}
.filefield:hover { border-color: var(--brand-accent); }
.filefield svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-accent); }
.filefield input { display: none; }
.connect__form .btn { width: 100%; margin-top: 8px; }
.connect__success { display: none; text-align: center; padding: 30px 0; }
.connect__success.is-shown { display: block; }
.connect__success svg { width: 56px; height: 56px; color: var(--brand-accent); margin: 0 auto 18px; }
.connect__success h3 { color: var(--white); font-size: 24px; margin-bottom: 10px; }
.connect__success p { color: rgba(255,255,255,0.78); }

.connect__side h2 { margin-bottom: 20px; }
.contact-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.13); }
.contact-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.13); }
.contact-row svg { width: 20px; height: 20px; color: var(--brand-accent); flex-shrink: 0; }
.contact-row a, .contact-row span { color: rgba(255,255,255,0.9); font-size: 15px; }
.contact-row a:hover { color: var(--brand-accent); }

/* =========================================================================
   Footer -modern, type-led
   ========================================================================= */
.footer { background: var(--brand-primary-strong); color: rgba(255,255,255,0.66); }
/* Single column since the job alerts signup came out. The statement is the
   only thing up here now, so let it have the full width. */
.footer__top {
  padding: clamp(56px, 6vw, 88px) 0; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__statement { font-family: var(--brand-font-display); font-weight: 800; color: var(--white); font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.05; }
.footer__statement sup { font-size: 0.4em; vertical-align: super; opacity: 0.6; }

.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
.footer__brand img { height: 42px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; }
.footer__brand p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 280px; }
.footer__heading { font-family: var(--brand-font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__list a, .footer__list span { color: rgba(255,255,255,0.66); font-size: 14px; }
.footer__list a:hover { color: var(--brand-accent); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.5); }
.footer__powered { display: inline-flex; align-items: center; gap: 8px; }
.footer__powered svg { width: 18px; height: 18px; }
.footer__powered b { color: rgba(255,255,255,0.85); font-family: var(--brand-font-display); font-weight: 800; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); transition: background 0.18s ease, color 0.18s ease; }
.footer__social a:hover { background: var(--brand-accent); color: var(--white); }

/* =========================================================================
   Reveal animation
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat { border-top: 1px solid var(--line-soft); }
  .stat:first-child, .stat:nth-child(2) { border-top: 0; }
  .why__feature { grid-template-columns: 1fr; }
  .why__feature-media { min-height: 240px; order: -1; }
  .why__feature-media::after { background: linear-gradient(to bottom, rgba(91,20,70,0) 45%, var(--brand-primary) 100%); }
  .why__row { grid-template-columns: 1fr; }
  .why__row--four { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .member--feature { grid-column: span 2; }
  .member--feature .member__photo { aspect-ratio: 2/1; }
  .quotes { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 24px; }
  .step:nth-child(even) .step__media { order: 0; }
  .steps--rail { flex-wrap: wrap; }
  .steps--rail .step { flex: 1 1 calc(50% - 18px); }
  .connect { grid-template-columns: 1fr; }
  .footer__top { padding: clamp(44px, 6vw, 64px) 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; --nav-h: 86px; }
  .nav { padding: 12px 14px; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; position: absolute; top: 72px; left: 14px; right: 14px; flex-direction: column; align-items: flex-start;
    gap: 16px; background: var(--white); padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--shadow-card);
  }
  .nav__cta, .nav__pill { display: none; }
  .nav__burger { display: inline-flex; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1; }
  .stat { padding: 28px 16px; }
  .steps--rail .step { flex: 1 1 100%; }
  .why__row--four { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .quote { padding: 38px 26px 28px; min-height: 320px; }
  .filerow { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .roles__frame iframe { min-height: 1200px; }
}

/* =========================================================================
   Preview notice (prototype only, delete with the markup in index.html)
   ========================================================================= */
.preview-flag {
  position: fixed; left: 18px; bottom: 18px; z-index: 200;
  display: flex; align-items: center; gap: 9px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 16px 10px 13px;
  background: rgba(27, 16, 24, 0.9);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-radius: 100px;
  font-family: var(--brand-font-display); font-weight: 500; font-size: 13px; line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px -14px rgba(27, 16, 24, 0.6);
}
.preview-flag b { color: var(--white); font-weight: 700; }
.preview-flag__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-accent);
}
@media (max-width: 560px) {
  .preview-flag { left: 12px; right: 12px; bottom: 12px; max-width: none; font-size: 12.5px; }
}

/* =========================================================================
   Industries marquee, inset under the opportunities board
   ========================================================================= */
.marquee--inset { margin-top: clamp(30px, 4vw, 48px); }

/* =========================================================================
   Testimonial carousel
   ========================================================================= */
.quotes__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track .quote { flex: 0 0 calc(50% - 11px); scroll-snap-align: start; }

.quotes__controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 26px;
}
.quotes__dots { display: flex; gap: 8px; }
.quotes__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--brand-primary-line); transition: background 0.2s ease, width 0.2s ease;
}
.quotes__dot.is-active { background: var(--brand-accent); width: 24px; border-radius: 100px; }
.quotes__arrows { display: flex; gap: 10px; }
.quotes__arrow {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--brand-primary-line); color: var(--brand-primary);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.quotes__arrow:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--white); }
.quotes__arrow svg { width: 17px; height: 17px; }
.quotes__arrow[disabled] { opacity: 0.35; cursor: default; }
.quotes__arrow[disabled]:hover { border-color: var(--brand-primary-line); background: none; color: var(--brand-primary); }

/* =========================================================================
   Team, recruitment partners with contact details
   ========================================================================= */
/* Five partners on a six-column base: three across, then the last two
   centred underneath rather than left-hanging with a gap. */
.team--partners { grid-template-columns: repeat(6, 1fr); }
.team--partners .member { grid-column: span 2; }
.team--partners .member:nth-child(4) { grid-column: 2 / span 2; }
.team--partners .member:nth-child(5) { grid-column: 4 / span 2; }
.team__more { margin-top: 34px; text-align: center; }
.team--partners .member { cursor: default; }
.team--partners .member:hover { transform: none; box-shadow: none; }
.member__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.member__contact a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-soft); word-break: break-word;
}
.member__contact a:hover { color: var(--brand-accent); }
.member__contact svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-accent); }

/* =========================================================================
   FAQ, full width now the pitch column is gone
   ========================================================================= */
.faq--wide { max-width: 820px; }
.faq--wide .faq__a-inner { max-width: none; }

/* =========================================================================
   Connect form: eligibility note + CV upload
   ========================================================================= */
.field__note {
  margin-top: 9px; font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  border-left: 2px solid var(--brand-accent); padding-left: 11px;
}
/* Submit failure. Sits on the plum panel, so it reads light on dark like the
   eligibility note, with a heavier fill so it is clearly not just guidance. */
.form__error {
  margin-top: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.5;
  color: var(--white); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 3px solid var(--brand-accent); border-radius: var(--radius-sm);
}
.field label.cvdrop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 112px; padding: 20px 16px; text-align: center; cursor: pointer;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.72);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.field label.cvdrop:hover, .field label.cvdrop.is-dragover { border-color: var(--brand-accent); background: rgba(255, 255, 255, 0.1); color: #fff; }
.field label.cvdrop.has-file { border-style: solid; border-color: var(--brand-accent); color: #fff; font-weight: 600; }
.field label.cvdrop svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-accent); }
.field label.cvdrop input { display: none; }

@media (max-width: 900px) {
  .quotes__track .quote { flex-basis: calc(100% - 4px); }


  /* Two up rather than one, or five cards make for a very long scroll. */
  .team--partners { grid-template-columns: 1fr 1fr; }
  .team--partners .member,
  .team--partners .member:nth-child(4),
  .team--partners .member:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) {
  .team--partners { grid-template-columns: 1fr; }
}

/* =========================================================================
   Headline wrapping
   -------------------------------------------------------------------------
   `balance` stops a heading dropping a single orphan word onto its own line.
   `--wide` gives the couple of headings that only just overflow the room to
   sit on one line instead.
   ========================================================================= */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
.section__head--wide { max-width: 800px; }

/* Body copy: stop a single word dropping to a line of its own.
   Headings above use `balance` instead, which evens the lines out. */
p, li, .cvc__tip, .cvc__label, .ipp__text, .star__field-hint, .hubcard__body, .field__note { text-wrap: pretty; }

/* Eligibility note inside the centred success panel: same content pattern
   as .field__note under the select, but this context is centred text with
   no adjacent field, so it needs its own layout rather than a left rule. */
.connect__success .field__note {
  text-align: center; border-left: 0; padding-left: 0;
  margin: 18px auto 0; max-width: 440px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Bot trap on the connect form. display:none rather than off-screen
   positioning, so screen readers skip it too and no real person can reach it. */
.hp-field { display: none !important; }