/* =========================================================================
   Evangelatos Group · assets/css/site.css

   Components. The tokens live in style.css.
   ====================================================================== */

/* -------------------------------------------------------------------------
   FONTS

   Self-hosted, both subsets. Greek is not optional here: half the site is in
   it, and a Latin-only display face would make the two language versions read
   as two different brands.
   ---------------------------------------------------------------------- */

/* Manrope ships as three subsets rather than one file, so a reader of the
   English pages never downloads the Greek glyphs and vice versa. The Greek
   subset is 9KB, which is the entire cost of the second language here. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-greek.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Commissioner";
  src: url("../fonts/commissioner-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* -------------------------------------------------------------------------
   TYPE SCALE
   ---------------------------------------------------------------------- */

.evg-h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  margin: 0 0 1rem;
}

.evg-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin: 0 0 1rem;
}

.evg-lede__text {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  max-width: var(--measure);
  color: var(--ink);
}

.evg-prose { max-width: var(--measure); }
.evg-prose.evg-cols-2 { max-width: none; }

/* -------------------------------------------------------------------------
   THE BAR

   Grain and tint, not glass. Slate at 72% with a tiling grain over it.
   Real refraction was built and tested first and dropped: SVG filters in
   backdrop-filter are Chromium only, so it would have needed a fallback for
   Safari and Firefox anyway.

   The grain is also doing a second job. Flat dark fields band visibly on
   8-bit panels, and the noise breaks the banding up.
   ---------------------------------------------------------------------- */

/* Solid by default, and translucent ONLY where it sits over the hero.

   This is not a preference. Measured over the white ground, a 72% slate bar
   blends to #677077: white text survives at 5.00, but aqua falls to 3.01,
   and aqua is the language chip and the active nav underline. Over the hero
   the same 72% blends to #27313E, where aqua is 7.85 and there is no problem.
   The bar is now glass on every page and only its strength changes with what
   is behind it: 55% over the hero, 90% everywhere else. */
.evg-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Glass on every page, not only over the hero.
     An earlier note here confined it to the hero on contrast grounds and then
     dismissed the alternative as "a solid bar wearing a blur", which was a
     judgement rather than a limit. Measured against the worst backdrop the bar
     ever has, the site's white ground, slate at 90% gives white 8.68:1 and
     aqua 5.22:1, both clear of AA, and anything darker passing under only
     improves it: over a deep section the same bar reads 12.24 and 7.36. So the
     material is the same everywhere and only its strength changes. */
  background: color-mix(in srgb, var(--c-slate) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 10%, transparent);
  color: var(--c-white);
}

/* No backdrop-filter, no glass: the tint alone would be a 90% wash with
   nothing behind it, so it goes solid rather than slightly grey. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .evg-bar { background: var(--c-slate); }
}

/* Real glass, over the hero only.
 *
 * A correction to an earlier note in this file: what is Chromium-only is an
 * SVG filter inside backdrop-filter, meaning the REFRACTION that bends the
 * backdrop. Plain backdrop-filter: blur() is baseline, supported in Chrome,
 * Safari and Firefox 103+, so frosted glass was always available and only the
 * distortion was not.
 *
 * It is confined to the hero because of contrast, not taste. Measured over
 * the three hero fields at 55% slate the worst case is white 10.48:1 and aqua
 * 6.30:1. The identical glass over the white ground does not reach 4.5:1 for
 * aqua until 90% opacity, at which point it is a solid bar wearing a blur. */
.evg-bar--over-hero {
  /* Fixed, not sticky. A sticky bar sits ABOVE the hero in normal flow, so at
     the top of the page there is nothing behind it and the glass frosts the
     page background instead of the hero. Overlaying is the whole point, and
     it costs nothing here because the hero panels are bottom-aligned, so
     nothing collides with the bar. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--c-slate) 55%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  /* the specular line along the top edge is what reads as a pane of glass
     rather than as a translucent box */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 16%, transparent);
}

/* Without backdrop-filter the bar would be a flat 55% wash over the hero,
   which is too transparent to read. Firefox below 103 and old Safari land
   here. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .evg-bar--over-hero {
    background: color-mix(in srgb, var(--c-slate) 82%, transparent);
  }
}

/* Past the hero the backdrop turns white, where the glass stops being legible.
   The bar goes solid, and the transition is slow enough to read as a material
   change rather than a flicker. */
.evg-bar--over-hero {
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease),
              box-shadow .45s var(--ease);
}

/* Past the hero the backdrop turns white and 55% stops being legible, so the
   glass thickens to the strength every other page uses. It does not stop
   being glass. */
.evg-bar--over-hero.is-solid {
  background: color-mix(in srgb, var(--c-slate) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 10%, transparent);
}

.evg-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: .035;
}

.evg-bar__in {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: .75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.evg-bar__mark { display: block; flex: 0 0 auto; }

.evg-lockup { height: 30px; width: auto; color: var(--c-white); }
.evg-lockup--foot { height: 38px; }

.evg-nav { margin-inline-start: auto; }

.evg-nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.evg-nav__link {
  font-size: var(--fs-caption);
  font-weight: 500;
  text-decoration: none;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

/* Aqua reads 7.10:1 on slate, so it is safe as the active marker here.
   It is never used as text on the white ground, where it is 1.66:1. */
.evg-nav__link:hover,
.evg-nav__link.is-current { border-bottom-color: var(--c-aqua); }

.evg-bar__end {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}

.evg-lang {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--c-aqua);
  border: 1px solid color-mix(in srgb, var(--c-aqua) 40%, transparent);
  padding: .35rem .7rem;
}

.evg-lang:hover { border-color: var(--c-aqua); }

.evg-burger {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}

.evg-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-white);
}

.evg-burger span + span { margin-top: 6px; }

.evg-drawer {
  position: sticky;
  top: 54px;
  z-index: 49;
  background: var(--c-slate);
  color: var(--c-white);
}

.evg-drawer__list {
  list-style: none;
  margin: 0;
  padding: 1rem var(--gutter) 1.5rem;
}

.evg-drawer__list a {
  display: block;
  padding: .6rem 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 860px) {
  .evg-nav { display: none; }
  .evg-burger { display: block; }

  /* The push to the right lived on the nav, and the nav is what just went
     away, so it took the push with it and the language switch and the burger
     ended up trailing the logo with eighty pixels of nothing beside them.
     Below this width the end group does its own pushing. */
  .evg-bar__end { margin-inline-start: auto; }
}

/* -------------------------------------------------------------------------
   THE HERO: three division panels

   One colour family at three depths, with aqua as the accent on all three.
   Three different hues would have read as three unrelated blocks; this reads
   as one hero. Measured: white on the fields is 16.32, 12.14 and 8.89.
   ---------------------------------------------------------------------- */

.evg-hero {
  display: grid;
  /* Written out rather than repeat(3, 1fr): a track list only interpolates
     against one of the same shape, and repeat() against three explicit
     values is not the same shape, so the columns snapped instead of easing. */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: var(--c-slate);
  min-height: min(86vh, 900px);

  /* The hovered panel widens and the other two give way, which was declared
     but never transitioned: the columns snapped open and snapped back. fr
     values interpolate, so this is the whole fix. Slightly slower on the way
     out than in, because a thing settling should take longer than a thing
     reacting. */
  transition: grid-template-columns .55s cubic-bezier(.22, .61, .36, 1);
}

.evg-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  isolation: isolate;
}

.evg-panel--1 { --field: var(--c-deep-1); background: var(--c-deep-1); }
.evg-panel--2 { --field: var(--c-deep-2); background: var(--c-deep-2); }
.evg-panel--3 { --field: var(--c-deep-3); background: var(--c-deep-3); }

.evg-panel__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* Opacity and filter are set further down, in the block that also lays the
     field colour over this one. Setting them here as well only produced two
     declarations for the same thing with the later one silently winning. */
  transform: scale(1.04);
  transition: transform 1.2s var(--ease), opacity var(--dur) var(--ease);
}

.evg-panel:hover .evg-panel__bg { transform: scale(1.09); }

/* The copy needs its own ground once the picture is this present. */
/* The cut-outs stand in this. Without it a PNG with a clean bottom edge
   looks pasted on rather than standing on the surface. */
/* The copy's ground.
   It has to be on the PANEL, not on the text block: sized to the text plus a
   margin it is a rectangle with four hard edges sitting in the middle of a
   photograph, and it has to use each panel's own field colour, or the navy
   fallback paints a dark box over the two green panels.

   Sits above the photograph and the cut-outs, below the copy. */
.evg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--field, var(--c-deep-1)) 0%,
    color-mix(in srgb, var(--field, var(--c-deep-1)) 82%, transparent) 34%,
    color-mix(in srgb, var(--field, var(--c-deep-1)) 30%, transparent) 62%,
    transparent 88%
  );
}

.evg-panel__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 60% at 50% 105%,
              color-mix(in srgb, var(--c-aqua) 20%, transparent),
              transparent 60%);
}

.evg-panel__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(100%, 520px);
  transform: translateX(-50%);
  transition: transform .9s var(--ease);
  will-change: transform;
}

.evg-panel__layer--2 { z-index: -1; }
.evg-panel__layer--3 { z-index: 0; }

.evg-panel__body { position: relative; z-index: 1; }

.evg-panel__rule {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--c-aqua);
  margin-bottom: 1.25rem;
}

.evg-panel__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-aqua);
  margin: 0 0 .5rem;
}

.evg-panel__title {
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  color: var(--c-white);
  margin: 0 0 .6rem;
}

.evg-panel__link { text-decoration: none; }

/* The whole panel is the click target, but the accessible name stays on the
   link itself rather than being bolted onto the article. */
.evg-panel__link::after { content: ""; position: absolute; inset: 0; }

.evg-panel__line {
  color: color-mix(in srgb, var(--c-white) 78%, transparent);
  font-size: var(--fs-caption);
  max-width: 32ch;
  margin: 0 0 1rem;
}

.evg-panel__cos {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-eyebrow);
  color: var(--c-aqua);
}

.evg-panel__cos li + li { margin-top: .2rem; }

@media (max-width: 860px) {
  .evg-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .evg-panel { min-height: 62vh; }
}

/* -------------------------------------------------------------------------
   COMPANIES
   ---------------------------------------------------------------------- */

.evg-codiv { padding-block: var(--pad-section); }
.evg-codiv--mobility   { background: var(--c-deep-1); color: var(--c-white); }
.evg-codiv--stay       { background: var(--c-deep-2); color: var(--c-white); }
.evg-codiv--experience { background: var(--c-deep-3); color: var(--c-white); }

.evg-codiv__head { margin-bottom: 2.5rem; }

.evg-codiv__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--c-aqua);
}

/* -------------------------------------------------------------------------
   BUTTON

   On dark grounds only so far, which is why it uses aqua. If it is ever
   placed on the white ground it must switch to --c-teal-text: aqua on white
   is 1.66:1.
   ---------------------------------------------------------------------- */

.evg-btn {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-aqua);
  border: 1px solid color-mix(in srgb, var(--c-aqua) 45%, transparent);
  padding: .7rem 1.4rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.evg-btn:hover {
  background: var(--c-aqua);
  color: var(--c-deep-1);
}

/* -------------------------------------------------------------------------
   THE GROUP
   ---------------------------------------------------------------------- */

.evg-mark { width: 100%; height: auto; color: var(--c-teal-text); }

.evg-mark__stroke { transition: opacity var(--dur) var(--ease); }
.evg-mark__stroke.is-held { opacity: .18; }
.evg-mark__stroke.is-lit  { opacity: 1; }

.evg-group__vision,
.evg-group__resp { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

.evg-group__since {
  color: var(--ink-soft);
  font-size: var(--fs-caption);
}

/* -------------------------------------------------------------------------
   CAREERS
   ---------------------------------------------------------------------- */

.evg-roles__list { list-style: none; margin: 0; padding: 0; }

.evg-role {
  padding-block: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.evg-role__title { font-size: 1.5rem; margin: 0 0 .35rem; }

.evg-role__meta {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 .75rem;
  display: flex;
  gap: 1rem;
}

.evg-role__desc { max-width: var(--measure); color: var(--ink-soft); }

/* On the white ground the button has to use the darker tier. */
.evg-roles .evg-btn,
.evg-contact__cos .evg-btn {
  color: var(--c-teal-text);
  border-color: color-mix(in srgb, var(--c-teal-text) 45%, transparent);
}

.evg-roles .evg-btn:hover,
.evg-contact__cos .evg-btn:hover {
  background: var(--c-teal-text);
  color: var(--c-white);
}

/* -------------------------------------------------------------------------
   CONTACT
   ---------------------------------------------------------------------- */

.evg-contact__list { list-style: none; margin: 0; padding: 0; }
.evg-contact__list li + li { margin-top: .4rem; }
.evg-contact__list a { color: var(--c-teal-text); }

.evg-contact__grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.evg-contact__card {
  border-top: 2px solid var(--c-teal);
  padding-top: 1rem;
}

.evg-contact__name { font-size: 1.15rem; margin: 0 0 .5rem; }
.evg-contact__card a { display: block; color: var(--c-teal-text); font-size: var(--fs-caption); }

/* -------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */

.evg-foot {
  background: var(--c-slate);
  color: var(--c-white);
  padding-block: var(--pad-section);
  position: relative;
}

.evg-foot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: .03;
}

.evg-foot__in {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* The brand sits wider than the three link columns beside it, and the
     columns hold their measure rather than stretching across a wide screen. */
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2.6rem 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .evg-foot__in { grid-template-columns: 1fr 1fr; }
  .evg-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .evg-foot__in { grid-template-columns: 1fr; }
}

.evg-foot__blurb {
  margin: .5rem 0 0;
  max-width: 34ch;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 45%, transparent);
}

/* ---- the link columns -------------------------------------------------- */

.evg-foot__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-aqua) 82%, transparent);
  margin: 0 0 .85rem;
}

.evg-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.evg-foot__col a {
  color: color-mix(in srgb, var(--c-white) 64%, transparent);
  text-decoration: none;
  font-size: var(--fs-caption);
  transition: color .25s var(--ease);
}

.evg-foot__col a:hover,
.evg-foot__col a:focus-visible { color: var(--c-white); }

/* the mark that says a link leaves the site, kept quiet until hover */
.evg-foot__out {
  display: inline-block;
  margin-left: .25em;
  opacity: 0;
  color: var(--c-aqua);
  transition: opacity .25s var(--ease);
}

.evg-foot__col a:hover .evg-foot__out,
.evg-foot__col a:focus-visible .evg-foot__out { opacity: 1; }

.evg-foot__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem .9rem;
  border: 1px solid color-mix(in srgb, var(--c-aqua) 40%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-aqua);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.evg-foot__cta:hover,
.evg-foot__cta:focus-visible {
  background: var(--c-aqua);
  border-color: var(--c-aqua);
  color: var(--c-deep-1);
}

/* ---- the bottom line --------------------------------------------------- */

.evg-foot__base {
  grid-column: 1 / -1;
  margin-top: .6rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--c-aqua) 16%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.evg-foot__copy {
  margin: 0;
  margin-right: auto;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 40%, transparent);
}

.evg-foot__lang {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-white) 60%, transparent);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.evg-foot__lang:hover,
.evg-foot__lang:focus-visible { color: var(--c-aqua); }

/* Sized to the 44px touch target rather than to the glyph, so the marks stay
   small while the things you press stay big enough to press. */
.evg-foot__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .4rem;
}

.evg-foot__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--c-aqua) 22%, transparent);
  color: color-mix(in srgb, var(--c-white) 70%, transparent);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.evg-foot__social svg { width: 20px; height: 20px; fill: currentColor; }

.evg-foot__social a:hover,
.evg-foot__social a:focus-visible {
  color: var(--c-deep-1);
  background: var(--c-aqua);
  border-color: var(--c-aqua);
}

/* ---- the companies, beside the site's own pages ------------------------ */

.evg-foot__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-aqua) 80%, transparent);
  margin: 0 0 .7rem;
}



.evg-foot__cos a:hover,

/* ---- social ------------------------------------------------------------
   Sized to the 44px touch target rather than to the glyph, so the marks stay
   small while the things you press stay big enough to press. */
.evg-foot__social {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .4rem;
}

.evg-foot__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--c-aqua) 22%, transparent);
  color: color-mix(in srgb, var(--c-white) 70%, transparent);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.evg-foot__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.evg-foot__social a:hover,
.evg-foot__social a:focus-visible {
  color: var(--c-deep-1);
  background: var(--c-aqua);
  border-color: var(--c-aqua);
}

.evg-foot__line { color: var(--c-aqua); font-size: var(--fs-caption); margin-top: 1rem; }

.evg-foot__nav ul,

.evg-foot__nav a,
.evg-foot__legal a,
.evg-foot__contact a {
  color: var(--c-aqua);
  text-decoration: none;
  display: block;
  padding-block: .2rem;
}

.evg-foot__nav a:hover,
.evg-foot__legal a:hover,
.evg-foot__contact a:hover { text-decoration: underline; }

.evg-foot__copy {
  color: color-mix(in srgb, var(--c-white) 55%, transparent);
  font-size: var(--fs-eyebrow);
  margin-top: 1rem;
}


/* =========================================================================
   THE GROUP PAGE

   Everything below serves the long-form copy ported from the first build:
   the story, the sequence, the structure, the people, vision, responsibility.
   ====================================================================== */

/* A note is the site admitting something: that the years are unconfirmed,
   that the names are pending, that a figure has not been measured. It is set
   quieter than body copy but never so quiet it reads as fine print. */
.evg-note {
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--c-teal);
}

.evg-section + .evg-section {
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* ---- the sequence ------------------------------------------------------ */

.evg-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ms;
}

.evg-ms {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.evg-ms__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--accent-light);
  grid-row: span 2;
}

/* An unconfirmed year is a dash, held back so the eye reads the sequence
   rather than stopping on a row of identical dashes. */
.evg-ms__year.is-pending { color: var(--ink-soft); opacity: .45; }

.evg-ms__title { font-size: 1.2rem; margin: 0 0 .25rem; }
.evg-ms__body { margin: 0; color: var(--ink-soft); max-width: 58ch; }

@media (max-width: 640px) {
  .evg-ms { grid-template-columns: 1fr; gap: .25rem; }
  .evg-ms__year { grid-row: auto; }
}

/* ---- shared functions -------------------------------------------------- */

.evg-shared {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2rem 0 0;
  padding: 0;
}

.evg-shared li {
  font-size: var(--fs-caption);
  border: 1px solid color-mix(in srgb, var(--c-teal) 40%, transparent);
  color: var(--accent-light);
  padding: .4rem .9rem;
}

/* ---- the quote --------------------------------------------------------- */

/* A 30ch measure on a face running to 2.8rem broke a seventeen-word quote
   into seven lines of three words, standing in a narrow ribbon down the left
   of a band the full width of the page. A pull-quote has to occupy the space
   it interrupts, or it reads as a mistake.

   So: a wider measure, bigger type, and a mark to anchor the left. The rule
   and the mark give the band something at both ends instead of one column of
   text and a lot of empty navy. */

.evg-quote {
  background: var(--c-slate);
  color: var(--c-white);
  padding-block: clamp(4rem, 9vw, 7rem);
}

.evg-quote .evg-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

/* The opening mark, set as type rather than drawn: it is a quotation mark and
   the display face already has a good one. */
.evg-quote__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: .78;
  color: var(--c-aqua);
  opacity: .55;
  user-select: none;
}

.evg-quote__text {
  margin: 0;
  max-width: 30ch;
}

.evg-quote__text p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  /* NOT text-wrap: balance. Balance evens the line lengths by shrinking the
     block, so it held this quote at about 21ch however wide the max-width
     was, which is exactly the narrow ribbon the measure was meant to fix.
     `pretty` only pulls up orphans and leaves the width alone. */
  text-wrap: pretty;
}

/* The measure belongs on the paragraph, not on the blockquote around it.
   `ch` resolves against the element's OWN font-size, and the blockquote
   inherits the section's 16px body size, so a max-width set there was being
   measured in 16px characters while the type inside it ran at 50px. That is
   why widening it from 30ch to 46ch made the block narrower rather than
   wider.

   Seventeen words is about eighty-five characters; at 26ch of display type
   that is three lines filling roughly three quarters of the band. */
@media (min-width: 700px) {
  .evg-quote__text { max-width: none; }
  .evg-quote__text p { max-width: 26ch; }
}

.evg-quote__by {
  display: block;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--c-aqua) 34%, transparent);
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-aqua);
}

@media (max-width: 620px) {
  .evg-quote .evg-wrap { grid-template-columns: 1fr; }
  .evg-quote__mark { font-size: 3.4rem; line-height: 1; margin-bottom: -.6rem; }
}

/* ---- leadership -------------------------------------------------------- */

.evg-leaders__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.evg-leader__pic {
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--c-teal) 12%, transparent);
  margin-bottom: 1rem;
  overflow: hidden;
}

.evg-leader__pic img { width: 100%; height: 100%; object-fit: cover; }

/* No portrait yet. The empty frame is deliberate: it says a person belongs
   here, which a collapsed layout would not. */
.evg-leader__pic.is-empty {
  border: 1px dashed color-mix(in srgb, var(--c-teal) 45%, transparent);
  background: transparent;
}

.evg-leader__role { font-size: 1.1rem; margin: 0 0 .2rem; }
.evg-leader__name { margin: 0 0 .2rem; }
.evg-leader__remit { margin: 0; font-size: var(--fs-caption); color: var(--ink-soft); }

/* ---- the vision statement ---------------------------------------------- */

.evg-statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 22ch;
  margin: 0 0 3rem;
  text-wrap: balance;
}

/* ---- the six lists ------------------------------------------------------ */

.evg-items {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.evg-items--values,
.evg-items--benefits { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.evg-items--goals,
.evg-items--commitments { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* The honest list is single sentences with no titles, so it sets as a
   column of statements rather than a grid of cards. */
.evg-items--honest {
  grid-template-columns: 1fr;
  max-width: var(--measure);
  gap: 1rem;
}

.evg-item { margin: 0; }

.evg-item__note {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: .4rem;
}

.evg-item__title { font-size: 1.15rem; margin: 0 0 .35rem; }
.evg-item__body { margin: 0; color: var(--ink-soft); }

.evg-items--honest .evg-item {
  padding-left: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--c-teal) 35%, transparent);
}

.evg-items--commitments .evg-item {
  border-top: 2px solid var(--c-teal);
  padding-top: .9rem;
}

.evg-vision__mission,
.evg-vision__goals,
.evg-vision__values,
.evg-resp__honest { margin-top: 3rem; }

/* ---- careers ------------------------------------------------------------ */

.evg-careers__benefits { margin-top: 3rem; }

/* =========================================================================
   PLACEHOLDERS

   No photography goes in yet, so every image slot shows a frame at the real
   aspect ratio instead. Two rules make them useful rather than annoying:
   they hold the exact shape the photograph will take, so the layout under
   review is the layout that ships; and they are unmistakably not photographs,
   so nobody signs off on a stock image by accident.
   ====================================================================== */

.evg-ph {
  width: 100%;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--c-teal) 50%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    color-mix(in srgb, var(--c-teal) 7%, transparent) 10px 20px
  );
}

.evg-ph span {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  text-align: center;
  padding: 0 1rem;
}

/* On a dark division band the dashes and the label have to flip. */
.evg-ph--dark {
  border-color: color-mix(in srgb, var(--c-aqua) 45%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    color-mix(in srgb, var(--c-aqua) 8%, transparent) 10px 20px
  );
}

.evg-ph--dark span { color: var(--c-aqua); }


.evg-leader__pic.is-empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    color-mix(in srgb, var(--c-teal) 7%, transparent) 10px 20px
  );
}

.evg-leader__ph {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  opacity: .7;
}

/* =========================================================================
   MOTION

   Sharper and more present: 28px of travel, 450ms, staggered across a row.

   Two rules hold throughout. Reveals are additive, meaning the hidden state
   only exists once JavaScript has confirmed it is running (.evg-js), so a
   parse error or a blocked script leaves a fully readable page rather than
   an invisible one. And prefers-reduced-motion removes the animation, not
   the content.
   ====================================================================== */

/* ---- the two defects first --------------------------------------------- */

/* Every in-page anchor was landing underneath the sticky bar. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The drawer is the only navigation below 860px, so it gets a real open
   state rather than relying on the hidden attribute alone. */
.evg-drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease);
}

.evg-drawer.is-open { max-height: 70vh; }

.evg-burger span {
  transition: transform .3s var(--ease), opacity .2s linear;
  transform-origin: center;
}

.evg-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.evg-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Stop the page scrolling behind an open drawer. */
body.evg-locked { overflow: hidden; }

/* ---- reveals ------------------------------------------------------------ */

.evg-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.evg-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .evg-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- the mark draws itself ---------------------------------------------
   Each stroke turns about its own centre, the same motion the opening
   animation uses, so the two places the mark animates agree.
   ---------------------------------------------------------------------- */

/* Each stroke pivots on itself.
   The previous rule turned all three about one measured centroid, 298.1 372.5,
   which belonged to the OLD mark's 625 x 604 viewBox. The new mark is drawn in
   the lockup's space and is only 345 tall, so that point now sits outside the
   artwork entirely and the strokes would swing around nothing.
   fill-box needs no measurement and cannot go stale when the artwork changes. */
.evg-mark__stroke {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.evg-js .evg-mark:not(.is-drawn) .evg-mark__stroke {
  opacity: 0;
  transform: perspective(420px) rotateY(-70deg) scale(.94);
}

.evg-js .evg-mark .evg-mark__stroke {
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

.evg-js .evg-mark.is-drawn .evg-mark__stroke {
  opacity: 1;
  transform: none;
}

/* The lit stroke keeps its emphasis after the draw finishes. */
.evg-js .evg-mark.is-drawn .evg-mark__stroke.is-held { opacity: .18; }

.evg-mark__stroke--1 { transition-delay: 0ms; }
.evg-mark__stroke--2 { transition-delay: 120ms; }
.evg-mark__stroke--3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .evg-js .evg-mark:not(.is-drawn) .evg-mark__stroke { opacity: 1; transform: none; }
  .evg-js .evg-mark .evg-mark__stroke { transition: none; }
}

/* =========================================================================
   THE HERO PANELS

   At rest the photograph carries the division's own field colour, so the
   three panels read as three colour fields and the hero holds together as
   one image. On hover that panel alone returns to full colour and its
   cut-outs lift toward the reader.

   This is built so it is correct in both states: with no artwork it is a
   colour field that brightens, and the moment a photograph and PNGs are
   uploaded the same rules produce the tint-to-colour reveal and the lift.
   ====================================================================== */

.evg-panel {
  perspective: 1100px;
}

.evg-panel--1 { --field: var(--c-deep-1); }
.evg-panel--2 { --field: var(--c-deep-2); }
.evg-panel--3 { --field: var(--c-deep-3); background: var(--c-deep-3); }

/* The photograph, held slightly toward the field colour and released on
   hover. The idea is good and it stays; the amounts were set when these were
   placeholders that had to stay out of a cut-out's way.

   At saturate(.12) with the field laid over in `color` at full strength, a
   real photograph stops being one: the resting state was a flat duotone and
   everything the picture had was only visible to someone with a mouse. Most
   visitors never hover, and nobody on a phone can, so the resting state is
   the state. It is now a graded photograph that warms up on hover rather than
   a tint that becomes a photograph. */
.evg-panel__bg {
  filter: saturate(.72) contrast(1.02);
  opacity: .74;
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform 1.2s var(--ease);
}

.evg-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--field);
  mix-blend-mode: color;
  opacity: .42;
  transition: opacity .7s var(--ease);
}

.evg-panel:hover .evg-panel__bg,
.evg-panel:focus-within .evg-panel__bg {
  filter: saturate(1.05) contrast(1);
  opacity: .94;
  transform: scale(1.06);
}

.evg-panel:hover .evg-panel__bg::after,
.evg-panel:focus-within .evg-panel__bg::after { opacity: 0; }

/* The cut-outs. --drift is written by the parallax; the hover lift is
   composed with it rather than replacing it, so the two never fight. */
.evg-panel__layer {
  --drift: 0px;
  --lift: 0px;
  --pop: 1;
  transform: translateX(-50%) translateY(calc(var(--drift) + var(--lift))) scale(var(--pop));
  transition: transform .55s var(--ease), filter .55s var(--ease);
  filter: saturate(.35) brightness(.85);
}

.evg-panel:hover .evg-panel__layer,
.evg-panel:focus-within .evg-panel__layer {
  filter: saturate(1) brightness(1) drop-shadow(0 24px 34px rgba(0, 0, 0, .45));
}

/* Nearest layer travels furthest. That difference is the whole illusion. */
.evg-panel:hover .evg-panel__layer--1 { --lift: -6px;  --pop: 1.02; }
.evg-panel:hover .evg-panel__layer--2 { --lift: -15px; --pop: 1.05; }
.evg-panel:hover .evg-panel__layer--3 { --lift: -26px; --pop: 1.09; }

/* The panel with no artwork still has to answer the cursor. */
.evg-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 100%,
              color-mix(in srgb, var(--c-aqua) 16%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.evg-panel:hover::after,
.evg-panel:focus-within::after { opacity: 1; }

.evg-panel__rule { transition: width .5s var(--ease); }
.evg-panel:hover .evg-panel__rule { width: 88px; }

.evg-panel__body { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.evg-panel:hover .evg-panel__body { transform: translateY(-6px); }

/* The hovered panel takes width and the other two give way. Grid columns are
   animated on the container, which is the only way to move all three in one
   coordinated step rather than three fighting transitions. */
@media (hover: hover) and (min-width: 861px) {
  .evg-hero { transition: grid-template-columns .6s var(--ease); }
  .evg-hero:has(.evg-panel--1:hover) { grid-template-columns: 1.36fr .82fr .82fr; }
  .evg-hero:has(.evg-panel--2:hover) { grid-template-columns: .82fr 1.36fr .82fr; }
  .evg-hero:has(.evg-panel--3:hover) { grid-template-columns: .82fr .82fr 1.36fr; }
}

@media (prefers-reduced-motion: reduce) {
  .evg-hero,
  .evg-panel,
  .evg-panel__bg,
  .evg-panel__layer,
  .evg-panel__body,
  .evg-panel__rule { transition: none; }
}

/* ---- company bands ------------------------------------------------------ */

/* ---- links and buttons -------------------------------------------------- */

.evg-btn {
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}

.evg-btn:hover { transform: translateY(-2px); }

.evg-nav__link,
.evg-lang,
.evg-foot__nav a,

@media (prefers-reduced-motion: reduce) {
  .evg-btn:hover { transform: none; }
}

/* =========================================================================
   THE HOME PAGE

   The statement, the system, the numbers, the way out.
   ====================================================================== */

.evg-lede__foot {
  margin-top: 1.5rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--fs-caption);
  padding-left: 1rem;
  border-left: 2px solid var(--c-teal);
}

/* -------------------------------------------------------------------------
   THE SYSTEM

   Two readings of the same seven companies.

   Without JavaScript both views are simply stacked and both readable, which
   is why the hiding lives behind .is-tabbed and the tab strip behind it too.
   A tab strip that does nothing is worse than no tab strip.
   ---------------------------------------------------------------------- */

.evg-system { background: var(--c-slate); color: var(--c-white); }

.evg-system .evg-eyebrow { color: var(--c-aqua); }
.evg-system .evg-h2 { color: var(--c-white); max-width: 22ch; }
.evg-system .evg-lede__text { color: color-mix(in srgb, var(--c-white) 72%, transparent); }
.evg-system .evg-note {
  color: color-mix(in srgb, var(--c-white) 62%, transparent);
  border-left-color: var(--c-aqua);
}

/* ---- reading one: the guest's line -------------------------------------- */

.evg-chain {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  counter-reset: chain;
}

.evg-chain__step {
  position: relative;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--c-aqua) 30%, transparent);
}

/* The rule across the top is the chain. A dot on each step marks the joint. */
.evg-chain__step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-aqua);
}

.evg-chain__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--c-aqua);
  margin-bottom: .5rem;
}

.evg-chain__word {
  font-size: 1.35rem;
  color: var(--c-white);
  margin: 0 0 .3rem;
}

.evg-chain__who {
  font-size: var(--fs-eyebrow);
  color: var(--c-aqua);
  margin: 0 0 .6rem;
}

.evg-chain__line {
  margin: 0;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 70%, transparent);
}

@media (max-width: 1000px) {
  .evg-chain { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .evg-chain { grid-template-columns: 1fr; }
}

/* ---- the straight line: the same chain, on a light ground ---------------
 *
 * The chain was written for the dark tab panel it used to live in, so every
 * colour in it was a tint of white. The section now stands on its own in the
 * light, which is deliberate: the ecosystem above is dark and dense because it
 * is the complicated part, and this one is bright and evenly spaced because it
 * is what the complication buys. The contrast between the two sections IS the
 * argument, so the chain is recoloured rather than the section darkened.
 *
 * Aqua cannot be text here (1.66:1 on white), so the accents step down to
 * teal-text at 5.58:1 and aqua survives only as the dots, where it is fill. */

.evg-line { background: var(--c-white); }

/* One rule across the whole row rather than five separate borders. The
   section is called "a straight line" and the drawing should be one. */
.evg-line .evg-chain { position: relative; }

.evg-line .evg-chain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--c-teal) 0%,
    color-mix(in srgb, var(--c-teal) 35%, transparent) 100%
  );
}

.evg-line .evg-chain__step { border-top: 0; }

.evg-line .evg-chain__step::before {
  background: var(--c-teal);
  top: -3px;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px var(--c-white);
}

.evg-line .evg-chain__n     { color: color-mix(in srgb, var(--c-slate) 45%, var(--c-white)); }
.evg-line .evg-chain__word  { color: var(--c-slate); }
.evg-line .evg-chain__who   { color: var(--c-teal-text); }
.evg-line .evg-chain__line  { color: var(--c-slate-soft); }

/* At one column the horizontal rule spans only the first step and the other
   four dots hang unattached. The line has to turn with the layout: it runs
   down the left instead, and the steps indent off it. Same drawing, rotated. */
@media (max-width: 560px) {
  .evg-line .evg-chain::before {
    top: 4px;
    bottom: 4px;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      var(--c-teal) 0%,
      color-mix(in srgb, var(--c-teal) 35%, transparent) 100%
    );
  }

  .evg-line .evg-chain__step {
    padding-top: 0;
    padding-left: 1.75rem;
  }

  .evg-line .evg-chain__step::before {
    top: 4px;
    left: 0;
  }
}

.evg-line__close {
  margin: 3rem 0 0;
  max-width: 48ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--c-slate);
}

/* -------------------------------------------------------------------------
   IN NUMBERS

   Every figure is blank until the group counts. The dash is the design, not
   a loading state, and the note above says so.
   ---------------------------------------------------------------------- */

.evg-numbers__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}

.evg-number { border-top: 2px solid var(--c-teal); padding-top: 1rem; }

.evg-number__fig {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.evg-number__fig.is-pending { color: var(--ink-soft); opacity: .4; }

.evg-number__label {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

/* ---- the way out -------------------------------------------------------- */

.evg-outro .evg-btn { margin-top: 1.5rem; }

/* =========================================================================
   COMPANY CARDS

   Seven companies as three small grids rather than seven full-width bands.
   The bands made a group of seven read as seven separate pages; the point of
   this page is that they are one company, so they have to be visible at once.

   Each division keeps its own dark field, so this page and the home hero use
   the same three colours for the same three things.
   ====================================================================== */

.evg-codiv { padding-block: var(--pad-section); }
.evg-codiv--mobility   { background: var(--c-deep-1); color: var(--c-white); }
.evg-codiv--stay       { background: var(--c-deep-2); color: var(--c-white); }
.evg-codiv--experience { background: var(--c-deep-3); color: var(--c-white); }

.evg-codiv__head { margin-bottom: 2rem; }

.evg-codiv__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--c-aqua);
  margin: 0;
}

/* One column of wide cards rather than a three-up grid.
   The whole card is the image stage: the background fills it and the cut-outs
   stand on the right, which is the composition a car or a building actually
   wants. A portrait card had nowhere for either to go. */
.evg-cogrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.evg-card {
  /* The banner is this tall whether the card is open or shut. Declared once
     so the open state cannot drift away from the closed one. */
  --card-h: 300px;

  position: relative;
  min-height: var(--card-h);
  display: flex;
  align-items: flex-end;
  background: color-mix(in srgb, var(--c-white) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-aqua) 20%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              background .45s var(--ease);
}

/* ---- the card on a phone ------------------------------------------------
   On a wide card the copy sits over the picture with a gradient scrim under
   it, and there is room for both because the copy is capped at 46ch and the
   artwork takes the space to its right. A phone has no space to the right.
   Everything landed on top of everything else: the logo over the family, MORE
   and VISIT SITE over the cut-out.

   So the card stops being one stack and becomes two zones. The copy takes the
   top and stands on the card's own ground, the artwork takes a band beneath
   it, and nothing overlaps anything. The scrim goes with the overlap it was
   protecting against, which also gives the photograph back its full frame.
   ---------------------------------------------------------------------- */
@media (max-width: 700px) {
  .evg-card {
    --card-h: 240px;
    --art-h: 190px;

    display: grid;
    grid-template-rows: auto var(--art-h);
    align-items: stretch;
    min-height: 0;
    /* The brand colour, not the shadow of it.

       This took the gradient's dark stop, which is the end of the ramp rather
       than the colour anyone recognises: for Chauffeur that stop is literally
       #000, so opening the card put the logo on black, and the two reds
       landed close enough to black to read as unbranded beside Mercury. The
       light stop is the brand: Mercury red, Selecta red, Wheego purple. The
       artwork band already uses it, so the whole card becomes one flat brand
       colour and the opened prose keeps its own darker tint to separate on.

       Contrast holds throughout, because those stops were chosen for exactly
       this: 9.32:1 for white on Mercury's, 8.4 on Selecta's, 10.08 on
       Wheego's, and about 6 for body copy at 72% white on the worst of them.

       A card with a photograph has no brand stop, so it keeps the division's
       field taken down a fifth: legible at 6.78, and dark enough to have an
       edge against the section it sits in. */
    background: var(--lit, color-mix(in srgb, var(--field, var(--c-deep-1)) 78%, #000));
  }

  .evg-card__body { grid-row: 1; }

  .evg-card__media {
    position: relative;
    inset: auto;
    grid-row: 2;
  }


  /* Opening the card grows the copy row; the artwork band is a row of its own
     and stays where it is, so the rule that used to pin it no longer applies. */
  .evg-card:has(.evg-card__more[open]) .evg-card__media { height: auto; }

  /* With the whole band to itself the cut-out can be drawn at a size worth
     looking at, and centred rather than tucked into a corner it no longer
     shares. */
  /* Centred by margins, not by a transform. A transform here was fragile:
     the touch block below cancels the hover lift with `transform: none`, and
     that same declaration wiped the centring, so a tapped card threw its car
     off to the right. Auto margins between left:0 and right:0 do the same job
     and nothing else in the sheet has any reason to touch them. */
  .evg-card__layer,
  .evg-card.has-stage .evg-card__layer {
    max-width: 62%;
    max-height: 92%;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin-inline: auto;
    transform: none;
    transform-origin: bottom center;
  }

  .evg-card.has-stage .evg-card__layer { max-height: 78%; bottom: 8%; }
}

/* The lift brightens the card, it does not repaint it.

   This used to set `background`, which is the shorthand, so it replaced the
   card's background-COLOUR as well: on a phone that colour is the company's
   brand red or purple, and the card turned translucent grey the moment this
   fired. And it fires on :focus-within, so tapping MORE triggered it and
   closing again did not release it, because the focus stays on the summary.
   Two cards opened and closed left two grey cards.

   A background-image layer instead. It sits over whatever colour is beneath
   and leaves it there. */
.evg-card.has-link:hover,
.evg-card.has-link:focus-within {
  transform: translateY(-6px);
  border-color: var(--c-aqua);
  background-image: linear-gradient(
    color-mix(in srgb, var(--c-white) 4%, transparent),
    color-mix(in srgb, var(--c-white) 4%, transparent)
  );
}

/* ---- the media area ----------------------------------------------------- */

.evg-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* The copy sits on the left over the image, so it needs its own ground.
   A gradient from the division field rather than a flat scrim, so the right
   side of the card stays clear for the cut-outs.

   Under the cut-out, not over it. This sat at z-index 3 with the cut-outs at
   2, so the scrim was painting across the car and the people rather than
   behind them: the left half of every PNG was being washed out by the ground
   that exists to carry the copy. The copy is at 4 and unaffected either way,
   so the scrim belongs at 1, above the photograph it is dimming and below the
   artwork standing on it. */
.evg-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Shade, not a colour wash, and only as far as the words reach.

     This was the division's own colour laid across 78% of the frame. On the
     mobility cards that is invisible, because their ground is already a flat
     brand colour and the scrim is the same hue: nothing to see. On a
     photograph it was a teal veil over blue sea and orange roofs, which is
     why three cards looked flat beside four that looked vibrant.

     So it darkens instead of tinting, and it stops sooner. The copy on these
     cards ends by about a third of the way across at its longest, so full
     strength to 34% and gone by 64% covers every line while leaving the
     right-hand two thirds, where the photograph and the cut-out actually are,
     completely untouched. Measured against the brightest frame a photograph
     is likely to have, the end of the longest line still reads at about
     6.8:1. */
  background: linear-gradient(100deg,
              rgba(0, 0, 0, .85) 0%,
              rgba(0, 0, 0, .72) 40%,
              transparent 70%);
  transition: opacity .55s var(--ease);
}

.evg-codiv--mobility   .evg-card { --field: var(--c-deep-1); }
.evg-codiv--stay       .evg-card { --field: var(--c-deep-2); }
.evg-codiv--experience .evg-card { --field: var(--c-deep-3); }

/* Same rest state as the home panels: the photograph carries the division's
   colour until the card is hovered, then returns to full colour. */
/* Full colour at rest. It used to sit at .15 saturation and 55% opacity and
   come to colour on hover, which made the two photograph divisions read as
   grey slabs beside the mobility cards, and those never had the treatment at
   all: a cut-out on a brand gradient has no photograph to hold back. So three
   cards were monotone and four were not, for no reason a reader could see.

   Nothing is lost by dropping it. The copy's legibility comes from the scrim,
   which is the division's own colour at full strength under the text and gone
   by 72% across, and it does that whatever the photograph behind it is doing.
   Hover keeps the slow push in, which is a response to the pointer rather
   than the delivery of something withheld. */
.evg-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .8s var(--ease);
}

/* The photograph reveals on ANY card. Whether a company has a website is a
   separate question from whether hovering it should do something, and three
   of the seven have no site. Only the lift and the border are gated on
   has-link, because those are affordances for a click that exists. */
.evg-card:hover .evg-card__bg,
.evg-card:focus-within .evg-card__bg {
  transform: scale(1.05);
}

/* The scrim eases back so more of the frame shows, but never far enough to
   put the copy at risk. */
.evg-card:hover .evg-card__media::after { opacity: .82; }

.evg-card:hover .evg-card__layer {
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45));
}

/* ---- a card carried by a cut-out rather than a photograph --------------
   The Chauffeur hero works with no photograph at all: an achromatic ground
   and one warm glow behind the car, which is the only colour in it. The same
   treatment is what a card wants when the artwork is a cut-out, and it means
   Chauffeur and Carpe Diem stop showing the "Image" placeholder while they
   wait for photography that would not suit them anyway.
   ---------------------------------------------------------------------- */
.evg-card__stage {
  position: absolute;
  inset: 0;
  /* The highlight is the treatment and stays put; the ground below it is the
     company's, and falls back to the division's dark when there is no brand
     gradient on the card. */
  background:
    radial-gradient(120% 80% at 78% 108%, rgba(255, 255, 255, .05) 0%, transparent 60%),
    var(--stage, linear-gradient(168deg, var(--c-deep-1) 0%, #0d141c 100%));
}

/* Flat on a phone, not graded, and declared here rather than up in the card's
   own phone block because a media query carries no specificity: the rule it
   has to beat is the one directly above, so it has to come after it.

   The gradient was drawn for a 300px card, where it had room to travel and a
   hover state to resolve into. A 190px band has neither. There is no hover on
   a phone, so the light it was modelling never arrives, and all a compressed
   gradient does is put its darkest end at exactly the height the car stands
   on. Two flat zones instead: the copy on the dark stop, the artwork on the
   brand colour itself, which is the most legible ground a cut-out can have.

   The glow stays. It is the only light on the Chauffeur card and the only
   thing separating a black car from a black ground. */
@media (max-width: 700px) {
  .evg-card__stage { background: var(--lit, var(--c-deep-1)); }

  /* And no scrim at all. On a phone the copy has its own zone on a solid
     ground and nothing sits over the artwork, so there is nothing to shade.

     This was tried once already, higher up, and lost: `content: none` there
     came BEFORE the rule that sets `content: ""`, and a media query adds no
     specificity, so the pseudo-element carried on existing and a leftover
     phone rule was still painting the division's colour up it from the foot.
     That is the third time this file has been bitten by the same ordering, so
     every phone override that has to beat a base card rule now lives here,
     below all of them. */
  .evg-card__media::after { content: none; }
}

/* Behind the cut-out, wider than it is, and soft enough to read as light
   rather than as a shape. The colour comes from the company's own field. */
.evg-card__glow {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 62%;
  aspect-ratio: 1.9;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--glow, #B9976A) 42%, transparent) 0%,
    color-mix(in srgb, var(--glow, #B9976A) 14%, transparent) 45%,
    transparent 72%
  );
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.evg-card:hover .evg-card__glow {
  transform: scale(1.06);
  opacity: .9;
}

/* On a stage card the cut-out IS the picture, so it drops the resting dim
   that exists to stop a cut-out competing with a photograph behind it. */
/* Sized to sit in the space left of the copy column, not to fill the card.
   The body is capped at 46ch, so on a wide card that leaves roughly the right
   third; the cut-out takes that and stops. A max-width keeps it from growing
   with the card, and it is lifted off the bottom edge so it stands on the
   gradient rather than being cropped by the frame. */
/* Cars are matched on height, not width. Matching on width assumes every car
   was shot the same way, and they were not: the saloon is close to side-on at
   2.8:1 while the SUVs are three-quartered at about 2.05:1, so at one width
   the saloon came out two thirds the height of the others and read as a
   smaller car rather than a lower one. Height is what the eye compares, so
   height is what is held, with the width cap left generous enough that a long
   car can reach it. */
.evg-card.has-stage .evg-card__layer {
  max-width: min(56%, 540px);
  max-height: 74%;
  right: 4%;
  bottom: 12%;
  opacity: 1;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}

/* ---- the card, opened ---------------------------------------------------
   A closed card is about 240px tall and the media fills it. Open it and the
   card grows past 1,100px, but .evg-card__media is inset:0, so the artwork
   stretched with it: a cut-out anchored to the bottom ended up parked beside
   the last line of copy with a metre of empty gradient above it.

   The artwork belongs to the header band, not to the whole card. So when the
   disclosure is open the media stops stretching and becomes a band at the
   top, and the copy runs on beneath it against the card's own ground.
   ---------------------------------------------------------------------- */
.evg-card:has(.evg-card__more[open]) .evg-card__media {
  bottom: auto;
  height: var(--card-h);
}

/* A map is not a cut-out. Sized by width it gets cropped top and bottom, and
   a country with its ends cut off reads as a mistake rather than as a crop,
   so this one is sized by height and kept whole inside the card. */
/* The map runs off the right edge of the card rather than floating in it.
   Cut by the card, the mainland reads as continuing past the frame; floated,
   its own boundary showed as a rectangle sitting on the artwork. */
/* Anchored to the bottom and drawn taller than the card, so the islands come
   up to size and the mainland is cropped off the top edge. Fitted inside the
   card the whole thing had to be small enough for the mainland to fit, which
   made the part that matters, the islands, the smallest thing on the card. */
.evg-card.has-stage .evg-card__layer[src*=".svg"] {
  width: auto;
  height: 152%;
  top: auto;
  bottom: -6%;
  right: 0;
  opacity: .92;
  filter: none;
}

/* And the scrim turns ninety degrees. Over a photograph it darkens the foot
   of the card; over a stage there is nothing at the foot to darken and the
   copy needs its ground on the left instead, which leaves the cut-out clear. */
.evg-card.has-stage .evg-card__media::after {
  background: linear-gradient(
    to right,
    var(--scrim, var(--c-deep-1)) 0%,
    color-mix(in srgb, var(--scrim, var(--c-deep-1)) 82%, transparent) 42%,
    transparent 74%
  );
}

.evg-card.has-stage:hover .evg-card__media::after { opacity: 1; }

.evg-card__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    color-mix(in srgb, var(--c-aqua) 7%, transparent) 10px 20px
  );
}

.evg-card__ph span {
  margin-left: 42%;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-aqua) 70%, transparent);
}

/* The cut-outs stand on the right, clear of the copy on the left. */
/* Capped on both axes rather than sized on one. A car is landscape and a
   person is portrait, and a single width rule that suits the car makes the
   person about three times the height of the card. Constraining both and
   letting the image keep its own ratio means one rule fits either, and a
   replacement uploaded by the office cannot break the card by being the
   wrong shape. */
.evg-card__layer {
  position: absolute;
  right: 3%;
  bottom: 0;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: min(46%, 400px);
  max-height: 96%;
  object-fit: contain;
  object-position: bottom right;
  transition: transform .5s var(--ease), filter .5s var(--ease);
  /* It used to be graded down to match a photograph that was itself held
     back. Now that the photograph is at full colour, so is this: matching it
     is still the rule, the thing being matched has just changed. */
  filter: none;
}

.evg-card:hover .evg-card__layer--1 { transform: translateY(-5px) scale(1.02); }
.evg-card:hover .evg-card__layer--2 { transform: translateY(-11px) scale(1.045); }
.evg-card:hover .evg-card__layer--3 { transform: translateY(-19px) scale(1.07); }

/* A car is already floating over its glow, so lifting it on hover reads as
   the lift it is. A person is standing on the floor of the card, and lifting
   them opens a gap under their feet: they stop standing on anything. So on a
   photograph card the same gesture becomes a scale anchored to the bottom
   edge, which grows them without ever leaving it. */
.evg-card:not(.has-stage) .evg-card__layer { transform-origin: bottom center; }
.evg-card:not(.has-stage):hover .evg-card__layer--1 { transform: scale(1.03); }
.evg-card:not(.has-stage):hover .evg-card__layer--2 { transform: scale(1.05); }
.evg-card:not(.has-stage):hover .evg-card__layer--3 { transform: scale(1.07); }



/* A card's resting state is a held-back version of itself that hover resolves.
   On a touch screen there is no hover, so that resting state is not a rest at
   all, it is the finished article: the photograph stayed at .15 saturation and
   the cut-out on top of it at half opacity, which is why the people had all
   but vanished. Where there is no pointer, the card simply shows its picture. */
@media (hover: none) {
  .evg-card__layer { opacity: 1; }
  .evg-card__media::after { opacity: .82; }

  /* And the hover states themselves are cancelled, not merely unused. A touch
     screen has no pointer to leave a card, so iOS applies :hover on tap and
     leaves it applied: the card would lift, the cut-out would jump and a drop
     shadow would appear, and all of it would stay there until something else
     was tapped. Every one of those rules is re-declared here at its resting
     value, which is what the card should look like when it is simply being
     looked at.

     The transitions go with them. A transition whose only trigger has been
     removed is weight on the compositor and nothing else. */
  .evg-card.has-link:hover,
  .evg-card.has-link:focus-within { transform: none; }
  .evg-card:hover .evg-card__layer { filter: none; }
  .evg-card.has-stage:hover .evg-card__layer { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
  .evg-card:hover .evg-card__glow { transform: none; opacity: 1; }

  .evg-card:hover .evg-card__layer--1,
  .evg-card:hover .evg-card__layer--2,
  .evg-card:hover .evg-card__layer--3,
  .evg-card:not(.has-stage):hover .evg-card__layer--1,
  .evg-card:not(.has-stage):hover .evg-card__layer--2,
  .evg-card:not(.has-stage):hover .evg-card__layer--3 { transform: none; }

  .evg-card:hover .evg-card__bg,
  .evg-card:focus-within .evg-card__bg { transform: scale(1.02); }

  .evg-card,
  .evg-card__bg,
  .evg-card__layer,
  .evg-card__glow,
  .evg-card__media::after { transition: none; }
}



/* ---- the body ------------------------------------------------------------ */

/* A shadow only where there is a photograph under the words.
   The scrim is at full strength under the start of a line and about half by
   the end of a long one, which was ample while the photograph was held at 55%
   opacity. At full colour a bright frame can take that tail to roughly 2.6:1,
   and which frame it is depends on a photograph the office uploads, so it
   cannot be checked once and trusted. The shadow makes the copy independent
   of what is behind it. Stage cards are excluded: their ground is a flat
   brand colour with known contrast, and a shadow there is just a soft edge on
   type that did not need one. */
.evg-card:not(.has-stage) .evg-card__body { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

.evg-card__body {
  position: relative;
  z-index: 4;
  /* Bounded as a share of the card, not only in characters. 46ch is a measure
     and says nothing about where the shade behind it ends: on a 710px card it
     let a line run to 59% across, which is past where the scrim has faded, and
     sampling the actual photographs there gave 1.9 to 3.6 against the
     brightest part of the frame. At 42% the same lines read between 5.7 and
     6.5 on all three. The character cap still applies on a wide card, where
     42% is the larger of the two. */
  width: min(42%, 46ch);
  padding: 1.4rem 1.6rem 1.5rem;
}

/* The 42% cap exists to keep the copy inside a scrim that is drawn over a
   photograph. On a phone there is no photograph behind the copy at all: it
   has its own zone on a solid ground, so the cap has nothing to protect
   against and only makes the measure absurd, five words down a column. Full
   width there.

   Declared after the rule it replaces rather than up in the phone block,
   because a media query carries no specificity of its own. */
@media (max-width: 700px) {
  .evg-card__body { width: 100%; }
}

.evg-card__name {
  font-size: 1.1rem;
  color: var(--c-white);
  margin: 0 0 .35rem;
  text-wrap: balance;
}

/* The whole card is the target, but the accessible name stays on the link. */
.evg-card__link { text-decoration: none; }
.evg-card__link::after { content: ""; position: absolute; inset: 0; }

.evg-card__line {
  margin: 0;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 72%, transparent);
}

/* The licence note, on a brand the group does not own outright.

   Smaller than the one-line above it, because it is a qualification and not a
   second claim, but held at the same 72% white rather than faded further. The
   whole point of the line is that it gets read, and the card copy was measured
   at about 6:1 at 72% on the brightest photograph in the set; fading a 13px
   line to make it look subordinate would have spent that margin on a
   disclosure. The rule at its left does that job instead, for free. */
.evg-card__rights {
  margin: .6rem 0 0;
  padding-left: .65rem;
  border-left: 1px solid color-mix(in srgb, var(--c-aqua) 45%, transparent);
  font-size: var(--fs-eyebrow);
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-white) 72%, transparent);
  max-width: 36ch;
}

.evg-card__cta {
  display: inline-block;
  margin-top: .9rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-aqua);
  border-bottom: 1px solid color-mix(in srgb, var(--c-aqua) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color .35s var(--ease);
}

.evg-card.has-link:hover .evg-card__cta { border-bottom-color: var(--c-aqua); }

@media (prefers-reduced-motion: reduce) {
  .evg-card,
  .evg-card__bg,
  .evg-card__layer { transition: none; }
  .evg-card.has-link:hover,
  .evg-card.has-link:focus-within { transform: none; }
}

/* ---- the card's "More" panel --------------------------------------------

   The card's title link is stretched across the whole card, which would sit
   on top of this and swallow the click. Lifting the disclosure out of that
   overlay is what makes the summary reachable at all.
   ---------------------------------------------------------------------- */

.evg-card__more {
  position: relative;
  z-index: 1;
  margin-top: .9rem;
}

.evg-card__more summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-white) 70%, transparent);
  transition: color .3s var(--ease);
}

.evg-card__more summary::-webkit-details-marker { display: none; }

.evg-card__more summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .3s var(--ease);
}

.evg-card__more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }

.evg-card__more summary:hover { color: var(--c-aqua); }

/* One label swaps for the other, so the control always says what it does. */
.evg-card__more-close { display: none; }
.evg-card__more[open] .evg-card__more-open { display: none; }
.evg-card__more[open] .evg-card__more-close { display: inline; }

.evg-card__prose {
  padding-top: .9rem;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 74%, transparent);
}

.evg-card__prose p { margin: 0 0 .8rem; }
.evg-card__prose p:last-child { margin-bottom: 0; }

.evg-card__lede {
  color: var(--c-aqua);
  font-weight: 500;
}

/* An open card must not be dragged around by the hover lift underneath it. */
.evg-card:has(.evg-card__more[open]) { transform: none; }

/* ---- the offer and practical tables inside a card ----------------------- */

.evg-card__sub {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-aqua);
  margin: 1.2rem 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-aqua) 22%, transparent);
}

/* A definition list, laid out as two columns so the terms line up and the
   card reads as a spec rather than as prose. */
.evg-rows {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: .35rem .9rem;
  margin: 0;
  font-size: var(--fs-caption);
}

.evg-rows dt {
  color: color-mix(in srgb, var(--c-white) 90%, transparent);
  font-weight: 500;
}

.evg-rows dd {
  margin: 0;
  color: color-mix(in srgb, var(--c-white) 68%, transparent);
}

/* A line with no :: separator still has to appear, spanning both columns,
   so a stray row is visible rather than silently dropped. */
.evg-rows__solo { grid-column: 1 / -1; }

.evg-card__coverage {
  margin: 0 0 .9rem;
  font-size: var(--fs-caption);
  color: var(--c-aqua);
}

/* An inline [CONFIRM]: a fact the group still owes, inside a sentence that is
   otherwise finished. Deliberately conspicuous. It must be impossible to read
   as body text and impossible to miss before launch. */
.evg-confirm {
  background: color-mix(in srgb, var(--c-teal) 22%, transparent);
  color: inherit;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-aqua) 60%, transparent);
  padding: 0 .2em;
  font-size: .92em;
  border-radius: 2px;
}

/* An open More panel needs its own ground, and that ground is a colour lifted
   from the banner above it, so the card reads as one object rather than as a
   photograph with a panel bolted underneath. Falls back to the division field
   where no tint has been sampled.

   It also runs the full width of the card rather than sitting inset: the
   banner keeps its height and the card simply grows underneath it, which is
   the behaviour the inset panel was pretending to have. */
/* Opening the card extends the card.
   The body is capped at 46ch so the copy has a sane measure over the banner,
   which also meant the opened panel could never reach the card's edges and
   the division ground showed around it like a box floating on a card. When
   the card is open the body takes the full width and the panel bleeds out to
   all three edges, so what you see is the card itself getting taller. */
.evg-card:has(.evg-card__more[open]) .evg-card__body { width: 100%; }

.evg-card__more[open] .evg-card__prose {
  background: var(--tint, color-mix(in srgb, var(--field, var(--c-slate)) 92%, transparent));
  border-left: 0;
  margin: .9rem -1.6rem 0;
  padding: 1.3rem 1.6rem 1rem;
}

/* The Visit site link sits after the panel, so it takes the same ground and
   the same bleed. Otherwise the extension stopped short and the link was left
   sitting on the division colour, or worse, under the panel's own overhang. */
.evg-card:has(.evg-card__more[open]) .evg-card__cta {
  display: block;
  background: var(--tint, color-mix(in srgb, var(--field, var(--c-slate)) 92%, transparent));
  margin: 0 -1.6rem -1.5rem;
  padding: 0 1.6rem 1.3rem;
}

/* And the card grows to hold it rather than clipping the tables. */
.evg-card:has(.evg-card__more[open]) { align-items: stretch; }
.evg-card:has(.evg-card__more[open]) .evg-card__body { align-self: flex-end; }

/* On a phone the card is too narrow for the copy on the left and the artwork
   on the right to share a line, so the placeholder label moves to the top out
   of the way of the text, and the cut-out sits behind it. */
@media (max-width: 700px) {
  .evg-card__ph {
    place-items: start center;
    padding-top: 1.4rem;
  }
  .evg-card__ph span { margin-left: 0; }
}

/* =========================================================================
   THE INTRO

   After the Veriff reference: the wordmark arrives from the left, then the
   mark turns and settles.

   The adaptation is in the mark. The reference turns two blades of one
   letterform; this mark is three strokes, one per division, so each turns
   about its OWN axis at its own moment. transform-box: fill-box gives every
   stroke its own centre with nothing measured, which is what makes three
   independent turns possible at all.

   Every rule is scoped to .evg-intro-on, a class only the inline script in
   inc/intro.php can add. Without JavaScript the overlay is never created and
   none of this applies, so the site cannot end up hidden behind it.
   ====================================================================== */

.evg-intro { display: none; }

/* ---- the four colours ---------------------------------------------------
   Every colour in the intro resolves from here and from nowhere else, so a
   division can be given its own mark colour by setting one property on the
   overlay. They are the palette's own tokens, not hexes: the ground is the
   mobility deep the curtain already starts on, and the mark is the aqua the
   delivered artwork ships in, so the animation ends on the same logo the bar
   and the footer draw rather than on a near miss.

   Measured on the ground: wordmark 16.3:1, mark 9.8:1, GROUP 7.0:1.
   ---------------------------------------------------------------------- */

.evg-intro {
  --evg-intro-ground: var(--c-deep-1);
  --evg-intro-mark:   var(--c-aqua);
  --evg-intro-word:   var(--c-white);
  --evg-intro-sub:    color-mix(in srgb, var(--evg-intro-word) 62%, transparent);
}

.evg-intro-on .evg-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  cursor: pointer;
}

.evg-intro-on body { overflow: hidden; }

/* ---- the ground --------------------------------------------------------
   One field, not three. The reference sits the logo on a single deep colour
   and lets the mark carry all the movement; splitting the ground into three
   panels here competed with three strokes turning and made the frame busy.
   The three fields return as the curtain lifts.
   ---------------------------------------------------------------------- */

.evg-intro__panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.evg-intro__panel {
  display: block;
  will-change: transform;

  /* A three-column grid across an odd viewport width puts the column edges on
     fractional pixels: 919px divides into columns ending at 306.33 and 612.66,
     and neither edge lands on a device pixel. Two abutting elements each
     anti-alias their own half of that pixel, which leaves a hairline of the
     page showing through the overlay, running the full height of the screen
     next to the mark.

     The spread shadow paints one extra pixel in every direction, so the panels
     overlap instead of meeting, and it travels with the transform, so it lifts
     with the curtain rather than being left behind. */
  box-shadow: 0 0 0 1px var(--evg-intro-ground);
}

/* All three start as ONE field. Three vertical bands behind a horizontal
   lockup put a seam straight through the mark, which fought the logo for
   attention at the exact moment the logo is the point.

   They take their division colours only as the logo clears, so the ground
   appears to divide into three and then open. The split is a beat in the
   animation rather than wallpaper behind it. */
.evg-intro__panel { background: var(--evg-intro-ground); }

.evg-intro-on .evg-intro__panel {
  animation:
    evg-intro-part .45s ease forwards,
    evg-intro-lift .8s cubic-bezier(.72, 0, .18, 1) forwards;
}

.evg-intro-on .evg-intro__panel--1 { animation-delay: 2.48s, 2.88s; }
.evg-intro-on .evg-intro__panel--2 { animation-delay: 2.48s, 3.00s; }
.evg-intro-on .evg-intro__panel--3 { animation-delay: 2.48s, 3.12s; }

@keyframes evg-intro-part {
  to { background-color: var(--to); }
}

.evg-intro__panel--1 { --to: var(--c-deep-1); }
.evg-intro__panel--2 { --to: var(--c-deep-2); }
.evg-intro__panel--3 { --to: var(--c-deep-3); }

@keyframes evg-intro-lift {
  to { transform: translateY(-101%); }
}

/* ---- the logo ----------------------------------------------------------- */

/* The logo leaves ON the curtain, it does not fade out from under it.

   It used to fade at 2.35s and the panels lifted at 2.88s, so the last half
   second of the intro was three coloured bars with the logo already gone, and
   the animation read as being erased rather than finished. Lifting the stage
   on the same keyframes as the panels makes the logo the thing that leaves and
   the site the thing behind it.

   It goes with the FIRST panel, not the middle one. The logo is wider than a
   third of the screen, so any delay behind panel 1 would leave its left end
   hanging over already-revealed page. Leading the cascade instead means it is
   always over dark ground on the way out. */
.evg-intro__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 0 var(--gutter);
  animation: evg-intro-lift .8s cubic-bezier(.72, 0, .18, 1) 2.88s forwards;
}

.evg-intro__logo {
  width: min(78vw, 620px);
  height: auto;
  overflow: visible;
}

/* ---- variant "turn": the mark, scattered then gathered ------------------
   Variant E. The three strokes start thrown out and spun, then swirl into
   formation about their own centres.

   The offsets are in px, which for an SVG path means viewBox USER UNITS, not
   screen pixels. The viewBox is 1662 wide, so -190 is about 11% of it and the
   throw stays proportional at every size, from a phone to a desktop. That is
   why these numbers need no media query.
   ---------------------------------------------------------------------- */

.evg-intro__stroke {
  fill: var(--evg-intro-mark);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: evg-intro-gather 1.15s cubic-bezier(.28, .9, .24, 1) forwards;
}

.evg-intro__stroke--1 { animation-delay: .06s; --sx: -190px; --sy:  120px; --sr: -300deg; }
.evg-intro__stroke--2 { animation-delay: .14s; --sx:  210px; --sy: -140px; --sr:  340deg; }
.evg-intro__stroke--3 { animation-delay: .22s; --sx:  -60px; --sy: -180px; --sr: -260deg; }

@keyframes evg-intro-gather {
  0% {
    opacity: 0;
    fill: var(--c-teal);
    transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.35);
  }
  55% {
    opacity: 1;
    fill: var(--c-teal-lit);
  }
  100% {
    opacity: 1;
    fill: var(--evg-intro-mark);
    transform: none;
  }
}

/* The letters land after the mark has formed, which is the order variant E
   was built in and the reason it reads as gathering rather than as two things
   happening at once. */
.evg-intro__glyph {
  fill: var(--evg-intro-word);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: evg-intro-glyph .45s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(1s + var(--i) * .03s);
}

@keyframes evg-intro-glyph {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   VARIANT "draw": the logo strokes itself on

   Each shape draws as an outline over its own length, then floods with fill a
   beat behind the line, and the stroke fades out once the fill has landed so
   the letterforms finish as clean fills with no outline ghost around them.
   GROUP does not draw at all: eleven letters stroking themselves and then five
   more is one beat too many, so it lifts in at the end instead.

   Two things carry the whole effect and neither is decorative:

   pathLength="1" in the markup normalises every outline to unit length, which
   is what lets one dasharray of 1 draw a 60-unit counter and a 900-unit letter
   over the same duration. Remove it and every glyph draws at its own speed.

   The stagger is an inline --i index per path multiplied in calc() here, so
   the order lives in the markup and the rhythm lives in the stylesheet.

   The logo is finished at 2.02s. The stage fades at 2.35s and the curtain
   parts at 2.48s, both unchanged from the other variant, which leaves a third
   of a second holding on the completed lockup before the site opens.
   ====================================================================== */

.evg-intro__blade,
.evg-intro__letter {
  fill-opacity: 0;
  stroke-dasharray: 1;
}

.evg-intro__blade {
  fill: var(--evg-intro-mark);
  stroke: var(--evg-intro-mark);
  stroke-width: 2.5;
  animation:
    evg-intro-draw   .80s calc(var(--i) * .10s)        ease-in-out both,
    evg-intro-fill   .50s calc(.55s + var(--i) * .10s) ease-out    both,
    evg-intro-unline .40s calc(.70s + var(--i) * .10s) linear      both;
}

/* Tighter stagger than the mark: three strokes can each have their own moment,
   eleven letters at the same spacing would run to three seconds. */
.evg-intro__letter {
  fill: var(--evg-intro-word);
  stroke: var(--evg-intro-word);
  stroke-width: 2;
  animation:
    evg-intro-draw   .60s calc(.35s + var(--i) * .055s) ease-in-out both,
    evg-intro-fill   .40s calc(.72s + var(--i) * .055s) ease-out    both,
    evg-intro-unline .30s calc(.85s + var(--i) * .055s) linear      both;
}

.evg-intro__subletter {
  fill: var(--evg-intro-sub);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: evg-intro-rise .40s calc(1.50s + var(--i) * .03s) ease-out both;
}

@keyframes evg-intro-draw   { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes evg-intro-fill   { from { fill-opacity: 0 }      to { fill-opacity: 1 } }
@keyframes evg-intro-unline { from { stroke-opacity: 1 }    to { stroke-opacity: 0 } }

/* Not evg-intro-lift: that name is already the curtain, and reusing it here
   would send the panels up on the wrong keyframes. */
@keyframes evg-intro-rise {
  from { transform: translateY(9px); opacity: 0 }
  to   { transform: none;            opacity: 1 }
}

/* The stroke is a hairline at full width and disappears entirely on a phone,
   where the same 2 user units land under a third of a device pixel. Widening
   it as the logo shrinks keeps the line visible while it draws. */
@media (max-width: 640px) {
  .evg-intro__blade  { stroke-width: 4; }
  .evg-intro__letter { stroke-width: 3.2; }
}

@media (max-width: 640px) {
  .evg-intro__logo { width: 84vw; }
}

/* Reduced motion never reaches here, because the inline script returns before
   adding the class. This is belt and braces for a preference that changes
   after the page has loaded. */
@media (prefers-reduced-motion: reduce) {
  .evg-intro-on .evg-intro { display: none; }
  .evg-intro-on body { overflow: auto; }
}

/* ---- the company logo on a card ----------------------------------------
   Sized by height so wordmarks of very different widths still sit on one
   optical line, and capped by width so a long one cannot run into the
   artwork on the right.
   ---------------------------------------------------------------------- */

.evg-card__logo {
  display: block;
  height: clamp(30px, 3.2vw, 44px);
  width: auto;
  max-width: min(100%, 320px);
  object-fit: contain;
  object-position: left center;
}

/* The heading still exists for screen readers and for search; it is the
   image that carries it visually. */
.evg-card__name.has-logo {
  margin-bottom: .5rem;
  line-height: 1;
}


/* Without mask support the element would be a solid ink block, which is far
   worse than the company name. Fall back to nothing and let the name show. */

/* =========================================================================
   THE ECOSYSTEM

   One ring, two readings. It replaced a source-arrow-hub-branches flowchart,
   which said "org chart" at the exact moment the section is claiming the
   opposite, and which put an agency in the middle where the guest belongs.

   A ring is the right shape because the claim is that nothing is first or
   last: every company is the same distance from the person in the middle.
   ====================================================================== */

.evg-eco__wrap {
  position: relative;
  width: min(100%, 620px);
  margin: 2rem auto 0;
  aspect-ratio: 1;
}

.evg-eco {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.evg-eco__ring {
  stroke: color-mix(in srgb, var(--c-aqua) 16%, transparent);
  stroke-width: 1;
}

/* One line out to each company. Faint on purpose: the drawing is about the
   people in the middle, and seven bright spokes would make it about the
   spokes. */
.evg-eco__spoke {
  stroke: color-mix(in srgb, var(--c-aqua) 14%, transparent);
  stroke-width: 1;
  transition: stroke .3s var(--ease), stroke-width .3s var(--ease);
}

.evg-eco__spoke.is-lit {
  stroke: color-mix(in srgb, var(--c-aqua) 62%, transparent);
  stroke-width: 1.6;
}

/* ---- the nodes ---------------------------------------------------------- */

.evg-eco__dot {
  fill: var(--c-deep-1);
  stroke: var(--c-aqua);
  stroke-width: 1.6;
  transition: r .3s var(--ease), fill .3s var(--ease);
}

.evg-eco__node--stay .evg-eco__dot       { fill: var(--c-deep-2); stroke: var(--c-teal); }
.evg-eco__node--experience .evg-eco__dot { fill: var(--c-deep-3); stroke: var(--c-teal); }

/* ---- the centre --------------------------------------------------------- */

/* A soft disc so the figures sit ON something and the spokes passing behind
   do not read through them. */
.evg-eco__hub-disc {
  fill: color-mix(in srgb, var(--c-deep-1) 94%, transparent);
}

.evg-eco__hub-ring {
  stroke: color-mix(in srgb, var(--c-aqua) 34%, transparent);
  stroke-width: 1;
}

/* The crowd in the middle, as a line icon rather than solid shapes: the rest
   of the drawing is hairlines, so a filled glyph read as separate artwork
   dropped into the centre instead of as part of the drawing. */
.evg-eco__people {
  fill: none;
  stroke: var(--c-aqua);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the two behind step back, the way they do in the ring itself */
.evg-eco__person--back {
  stroke: color-mix(in srgb, var(--c-aqua) 55%, transparent);
}

/* ---- the breath ---------------------------------------------------------
   A heartbeat is percussive: two knocks and a gap, and it reads as urgency
   however slowly it runs, which is the opposite of what this section sells.
   So it is a breath instead. In over a third of the cycle, out over rather
   less than half, then a rest, with ease-in-out on both halves so neither the
   turn at the top nor the settle at the bottom has a corner in it.

   It is an HTML element sitting behind the drawing rather than a circle
   inside it. The SVG viewBox starts at -260, and browsers resolve
   `transform-origin: 50% 50%` against `transform-box: view-box` as the user
   point (260,260) rather than the middle, so a CSS scale on an SVG child
   walks it 27 units down and to the right. In HTML a transform is a
   transform.
   ---------------------------------------------------------------------- */
/* the drawing's own box, so the glow has something square to centre on */
.evg-eco__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.evg-eco__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-aqua) 26%, transparent) 0%,
    color-mix(in srgb, var(--c-aqua) 11%, transparent) 45%,
    transparent 70%
  );
  transform: translate(-50%, -50%) scale(1);
  opacity: .5;
  animation: evg-breath 5.2s ease-in-out infinite;
}

@keyframes evg-breath {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: .5; }
  34%  { transform: translate(-50%, -50%) scale(1.34); opacity: 1; }
  82%  { transform: translate(-50%, -50%) scale(1);    opacity: .5; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .evg-eco__glow { animation: none; opacity: .8; }
}

/* ---- the labels, positioned around the ring ----------------------------
   HTML rather than SVG text, so the names can be selected, read in order by
   a screen reader, and wrap. --x and --y are the cosine and sine of each
   node's angle, handed over by PHP.
   ---------------------------------------------------------------------- */

.evg-eco__labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.evg-eco__label {
  position: absolute;
  left: calc(50% + var(--x) * 43%);
  top: calc(50% + var(--y) * 43%);
  transform: translate(calc(-50% + var(--x) * 4.2rem), calc(-50% + var(--y) * 1.8rem));
  width: 116px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: default;
  transition: opacity .3s var(--ease);
}

.evg-eco__logo {
  width: auto;
  max-width: 100%;
  height: 26px;
  object-fit: contain;
  opacity: .78;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* The two companies with no artwork sit in the ring as type, at the same
   optical weight as the logos beside them. */
.evg-eco__wordmark {
  font-size: var(--fs-eyebrow);
  line-height: 1.25;
  text-align: center;
  color: color-mix(in srgb, var(--c-white) 72%, transparent);
  transition: color .3s var(--ease);
}


/* The live caption under the ring. It holds one line of height at rest so
   that focusing a company does not shift the section, which on a diagram you
   are pointing at is the difference between usable and infuriating. */
.evg-eco__caption {
  margin: 1.5rem auto 0;
  max-width: 62ch;
  min-height: 3em;
  text-align: center;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 62%, transparent);
  transition: color .25s var(--ease);
}

.evg-eco__caption.is-live { color: var(--c-aqua); }

/* The labels are buttons now, so they need to say so on focus. */
.evg-eco__label { border-radius: 8px; }

.evg-eco__label:focus-visible {
  outline: 2px solid var(--c-aqua);
  outline-offset: 6px;
}

.evg-eco__label:hover { cursor: pointer; }

/* A pinned company keeps a mark of its own, so it is clear the ring is held
   rather than merely hovered. */
.evg-eco__label[aria-pressed="true"] .evg-eco__logo { opacity: 1; }

.evg-eco__wrap.is-focused .evg-eco__label:not(.is-lit) { opacity: .3; }

.evg-eco__label.is-lit .evg-eco__logo { opacity: 1; transform: scale(1.12); }
.evg-eco__label.is-lit .evg-eco__wordmark { color: var(--c-white); }

.evg-eco__node { transition: opacity .3s var(--ease); }
.evg-eco__wrap.is-focused .evg-eco__node:not(.is-lit) { opacity: .35; }
.evg-eco__node.is-lit .evg-eco__dot { r: 10; }

.evg-eco__note {
  max-width: 54ch;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 72%, transparent);
}

/* ---- what makes the joins possible -------------------------------------- */

.evg-eco__shared {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.evg-eco__shared li {
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-aqua);
  border: 1px solid color-mix(in srgb, var(--c-aqua) 30%, transparent);
  padding: .4rem .8rem;
}

/* On a phone the ring used to give up: the labels stopped orbiting and became
   a grid underneath, which left the ring carrying seven empty circles that
   read as unfinished interface, and a set of logos floating below with nothing
   tying them to the drawing.

   The original note here said the ring could not carry eight labels, and that
   was true of eight NAMES. These are logos, there are seven of them, and a
   logo is a fixed small box rather than three lines of wrapping text. So the
   ring keeps them, and what shrinks instead is the drawing: at 74% of the
   column the widest node sits about 120px from the centre, and half a 78px
   logo on top of that still clears the gutter. The composition survives the
   phone rather than being replaced on it.
   ---------------------------------------------------------------------- */
@media (max-width: 620px) {
  .evg-eco__wrap {
    width: 74%;
    margin-inline: auto;
  }

  /* Pulled in from 4.2rem: at this size that push would throw the three and
     nine o'clock logos straight out of the column. */
  .evg-eco__label {
    width: 78px;
    transform: translate(calc(-50% + var(--x) * 1.5rem), calc(-50% + var(--y) * .9rem));
  }

  .evg-eco__logo { height: 15px; }

  /* The globe grows as a share of a smaller stage, so it holds the middle
     instead of becoming a marble with a lot of ring around it. */
  .evg-eco__globe { width: 50%; }
}

/* Measured rather than guessed: at 375px the column is 335, the wrap 74% of
   that, and the widest node lands 104px from the centre, so half a 78px logo
   still leaves 24px of gutter. The handover only has to happen on phones
   narrower than any current one. */
@media (max-width: 340px) {
  .evg-eco__wrap { width: 100%; aspect-ratio: auto; }
  .evg-eco__stage { aspect-ratio: 1; }
  .evg-eco { aspect-ratio: 1; height: auto; overflow: hidden; }

  .evg-eco__labels {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem 1rem;
    margin-top: 1.6rem;
    place-items: center;
  }

  .evg-eco__label {
    position: static;
    transform: none;
    width: 100%;
    min-height: 44px;
  }

  .evg-eco__logo { height: 22px; }

  /* Without labels on it the ring is seven empty circles, which reads as an
     unfinished control rather than as a drawing. The chords stay, the nodes
     go. */
  .evg-eco__node { display: none; }
}

/* =====================================================================
   404

   A wrong URL here is usually a link to the other language's slug, or a
   company page from the old build, which had seven of them. So the page
   offers the brands rather than a search box.
   ================================================================== */

.evg-404 { min-height: 58vh; }

.evg-404__lede {
  margin: 0 0 2.2rem;
  max-width: 52ch;
  color: var(--c-slate-soft);
}

.evg-404__nav ul,
.evg-404__cos {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
}

.evg-404__nav a,
.evg-404__cos a {
  display: inline-block;
  padding: .5rem .9rem;
  border: 1px solid color-mix(in srgb, var(--c-teal) 30%, transparent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-caption);
  color: var(--c-teal-text);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.evg-404__nav a:hover,
.evg-404__cos a:hover,
.evg-404__nav a:focus-visible,
.evg-404__cos a:focus-visible {
  background: var(--c-teal-text);
  border-color: var(--c-teal-text);
  color: var(--c-white);
}

.evg-404__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate-soft);
  margin: 0 0 .8rem;
}

/* =====================================================================
   THE CONTACT FORM

   Plain fields on the page's own ground rather than a boxed card: the
   page is already a light section and a panel inside a panel is one
   frame too many. The controls are sized to be pressed on a phone, and
   the focus ring is slate rather than an accent, because both accents
   are too light to make 3:1 against this background.
   ================================================================== */

.evg-form { max-width: 44rem; margin-top: 1.6rem; }

.evg-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}

@media (max-width: 620px) {
  .evg-form__row { grid-template-columns: 1fr; }
}

.evg-form__field { margin: 0 0 1.1rem; }

.evg-form__field label {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-slate-soft);
}

.evg-form input[type="text"],
.evg-form input[type="email"],
.evg-form select,
.evg-form textarea {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-slate);
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-slate) 26%, transparent);
  border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.evg-form textarea { min-height: 9rem; resize: vertical; }

.evg-form input:focus,
.evg-form select:focus,
.evg-form textarea:focus {
  outline: none;
  border-color: var(--c-slate);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-teal) 40%, transparent);
}

.evg-form__send { margin-top: .4rem; }

/* The honeypot. Off-screen rather than display:none, because a bot that
   checks for display:none will skip it and defeat the point. */
.evg-form__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.evg-form__note {
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--c-teal);
  background: color-mix(in srgb, var(--c-teal) 8%, transparent);
  font-size: var(--fs-caption);
  color: var(--c-slate);
}

.evg-form__note--bad {
  border-left-color: #B5563F;
  background: color-mix(in srgb, #B5563F 8%, transparent);
}

/* =====================================================================
   THE WIDE BANDS

   Full bleed, not inset. The Group and Careers pages are long runs of
   typography and what they need from a photograph is a break in the
   rhythm; an image sitting inside the text measure does not give one.

   The height is capped in viewport units rather than set by the file, so
   a very tall upload cannot push the rest of the page off the screen.
   ================================================================== */

.evg-band {
  margin: 0 0 var(--pad-section, 4.5rem);
  padding: 0;
}

.evg-band img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
}

.evg-band__cap {
  max-width: var(--maxw);
  margin: .7rem auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-caption);
  color: var(--c-slate-soft);
}

@media (max-width: 700px) {
  .evg-band img { max-height: 48vh; }
}

/* ---- the globe ----------------------------------------------------------
   Laid over the ring, centred on it, and sized as a share of the drawing so
   it scales with everything else. It replaced a 92px disc with a person in
   it, so it is deliberately larger: a globe the size of the old hub reads as
   a marble rather than as the world.
   ---------------------------------------------------------------------- */

.evg-eco__globe {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Sized up because the sphere only occupies 0.74 of this box; the rest is
     the halo, which needs room or it clips square against the canvas edge. */
  width: 56%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.evg-eco__globe.is-grabbing { cursor: grabbing; }

.evg-eco__globe canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 620px) {
  .evg-eco__globe { width: 66%; }
}

/* ---- item icons ---------------------------------------------------------
   Beside the heading, not above it: at this size an icon on its own line
   reads as a bullet, and a bullet is not what a 22px drawing is for.
   ---------------------------------------------------------------------- */

.evg-item.has-icon { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 .8rem; }
.evg-item.has-icon .evg-item__note,
.evg-item.has-icon .evg-item__title,
.evg-item.has-icon .evg-item__body { grid-column: 2; }

.evg-item__icon {
  grid-row: 1;
  grid-column: 1;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: .1rem;
  color: var(--c-teal);
  flex: none;
}

@media (max-width: 560px) {
  .evg-item.has-icon { grid-template-columns: 1.4rem 1fr; gap: 0 .65rem; }
}

/* =====================================================================
   EMPTY IMAGE SLOTS

   A build-time aid: the frame a picture will fill, with the field that
   fills it and the size it wants. Hidden by one switch in the
   Customizer, and that switch is the last thing to turn off before
   launch.
   ================================================================== */

.evg-slot {
  position: relative;
  display: grid;
  place-content: center;
  gap: .35rem;
  aspect-ratio: var(--slot-ratio, 2 / 1);
  max-height: 46vh;
  margin-bottom: var(--pad-section, 4.5rem);
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--c-teal) 42%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 12px,
    color-mix(in srgb, var(--c-teal) 6%, transparent) 12px 24px
  );
}

.evg-slot__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--c-teal-text);
  padding-inline: 1rem;
  max-width: 46ch;
}

.evg-slot__size {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-slate-soft);
}

/* =====================================================================
   THE CLOSING QUESTION

   At the foot of every page, for the reader that page was not for. Set
   on the group's own ground so it reads as a different offer rather
   than as more of the page above it, and the same on all five so it is
   recognised rather than read twice.
   ================================================================== */

.evg-ask {
  background: var(--c-deep-2);
  color: var(--c-white);
}

.evg-ask__q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .7rem;
  max-width: 24ch;
}

.evg-ask__line {
  margin: 0 0 1.6rem;
  max-width: 56ch;
  color: color-mix(in srgb, var(--c-white) 68%, transparent);
}

.evg-ask__btn {
  border-color: var(--c-aqua);
  color: var(--c-aqua);
}

.evg-ask__btn:hover,
.evg-ask__btn:focus-visible {
  background: var(--c-aqua);
  color: var(--c-deep-1);
}

/* ---- the drawn dividers -------------------------------------------------
   They replaced two photograph bands. A full-bleed band is the one place on
   a site where an image is certain to be shown wider than it was supplied,
   and these are drawn, so they are exact at any width.

   Laid out in CSS rather than inside one SVG on purpose: text in a scaled
   SVG scales with it, and a 15px label in a 1200-wide drawing is under 5px
   on a phone. Here the geometry scales and the words do not.
   ---------------------------------------------------------------------- */
.evg-divider {
  background: var(--c-deep-2);
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: var(--pad-section);
}

/* ---- careers: the stages ---------------------------------------------- */
/* Three shared rows rather than a row of self-contained stages, so every node
   sits on one band whatever the words above them do. That is what lets the
   rail be a single element across the middle row instead of a hairline
   chased per stage. */
.evg-ladder {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 1rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evg-ladder__stage { display: contents; }

.evg-ladder__word,
.evg-ladder__node,
.evg-ladder__line { grid-column: var(--col); justify-self: center; text-align: center; }

.evg-ladder__word {
  grid-row: 1;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-aqua);
}

.evg-ladder__node {
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  /* Grows along the row for the same reason the rail thickens: the claim is
     one person carrying more, not four different people. */
  width: calc(46px + var(--grow) * 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--c-aqua);
  background: var(--c-deep-2);
  color: var(--c-aqua);
}

.evg-ladder__icon { width: 54%; height: 54%; }

.evg-ladder__line {
  grid-row: 3;
  max-width: 22ch;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-white) 76%, transparent);
}

/* The rail. Inset by half a column at each end so it starts and finishes at
   the centre of the first and last node rather than at the edge of the row.
   The taper is a clip, because a border cannot change weight along itself. */
.evg-ladder__rail {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: 10px;
  margin-inline: calc(100% / var(--n) / 2);
  background: var(--c-aqua);
  opacity: .85;
  clip-path: polygon(0 42%, 100% 26%, 100% 74%, 0 58%);
}

/* On a phone the row becomes a column and the rail turns with it: same
   drawing, read downward. */
/* On a phone the row becomes a column and the line turns with it: the same
   drawing, read downward.

   The desktop rail cannot make that turn. It spans `1 / -1`, and -1 means the
   end of the EXPLICIT grid, which a column of auto rows does not have, so it
   collapses to nothing. Each node carries its own length instead.

   For that length to be exact rather than guessed, the node box is stretched
   over both of its rows and the circle becomes its ::before at the top. The
   connector then runs from the bottom of the circle to the bottom of the box,
   which is precisely where the next circle starts, so the line is continuous
   at any copy length and stops dead at the last stage. Row gap is zero and the
   spacing lives inside the cell, because a gap would be a break in the line.
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  .evg-ladder {
    grid-template-columns: 46px 1fr;
    grid-template-rows: none;
    gap: 0 1.1rem;
  }

  .evg-ladder__word { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; }
  .evg-ladder__line { grid-column: 2; grid-row: auto; justify-self: start; text-align: left;
                      max-width: none; padding: .15rem 0 1.5rem; }

  .evg-ladder__node {
    grid-column: 1;
    grid-row: span 2;
    align-self: stretch;
    display: block;
    width: 46px;
    aspect-ratio: auto;
    border: 0;
    background: none;
  }

  .evg-ladder__node::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--c-aqua);
    background: var(--c-deep-2);
  }

  .evg-ladder__node::after {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 0;
    left: 23px;
    width: 7px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--c-aqua) 55%, var(--c-deep-2));
  }

  .evg-ladder__stage:last-child .evg-ladder__node::after { content: none; }

  .evg-ladder__icon {
    position: absolute;
    top: 23px;
    left: 23px;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
  }

  .evg-ladder__rail { display: none; }
}

/* ---- the group: a visit, end to end ------------------------------------ */
/* The two ends sit either side of the row on a wide screen and above and
   below it on a phone, which is the same relationship read the other way. */
.evg-week__frame {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem 1rem;
}

.evg-week__end {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-white) 72%, transparent);
}

.evg-week__end--from { grid-area: 1 / 1; }
.evg-week__end--to   { grid-area: 1 / 2; text-align: right; }
.evg-week          { grid-area: 2 / 1 / 3 / 3; }

/* Tracks are fractions, never pixels, so there is no width at which a seam
   opens between two companies. That is the whole claim of the drawing. */
/* The tracks arrive as a custom property rather than as grid-template-columns
   itself, so the phone layout can replace them from a stylesheet instead of
   having to out-shout an inline style. */
.evg-week {
  display: grid;
  grid-template-columns: var(--tracks);
  margin: 0;
  padding: 0;
  list-style: none;
}

.evg-week__part { min-width: 0; }

.evg-week__bar {
  display: block;
  height: 34px;
  background: color-mix(in srgb, var(--c-aqua) var(--mix), var(--c-teal));
}

/* The guest's own days: an outline, not a fill. Filling it would claim the
   group owns days it does not, which is the opposite of what the page says. */
.evg-week__part.is-open .evg-week__bar {
  background: none;
  border: 2px solid color-mix(in srgb, var(--c-aqua) 70%, transparent);
  border-inline: none;
  position: relative;
}

.evg-week__part.is-open .evg-week__bar::before,
.evg-week__part.is-open .evg-week__bar::after {
  content: "";
  position: absolute;
  inset-block: -2px;
  width: 2px;
  background: color-mix(in srgb, var(--c-aqua) 70%, transparent);
}
.evg-week__part.is-open .evg-week__bar::before { inset-inline-start: 0; }
.evg-week__part.is-open .evg-week__bar::after { inset-inline-end: 0; }

.evg-week__label {
  display: block;
  padding-top: .6rem;
  text-align: center;
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 66%, transparent);
}

.evg-week__part.is-open .evg-week__label {
  color: var(--c-aqua);
}

/* Seven labels cannot sit side by side on a phone, and shrinking them until
   they do is how a drawing becomes unreadable. So the row turns: the same
   companies in the same order, meeting the same way, read down the page
   instead of across it, and every one of them gets its name back. */
@media (max-width: 760px) {
  .evg-week {
    grid-template-columns: 14px 1fr;
    column-gap: .95rem;
  }

  .evg-week__part { display: contents; }

  .evg-week__bar {
    height: auto;
    min-height: 46px;
    align-self: stretch;
  }

  .evg-week__part.is-open .evg-week__bar {
    border: 2px solid color-mix(in srgb, var(--c-aqua) 70%, transparent);
    border-block: none;
  }
  .evg-week__part.is-open .evg-week__bar::before,
  .evg-week__part.is-open .evg-week__bar::after { content: none; }

  .evg-week__label {
    align-self: center;
    padding: .55rem 0;
    text-align: left;
  }

  /* Turned: the closing end goes to the foot, where the journey it names
     actually finishes. */
  .evg-week__frame { grid-template-columns: 1fr; }
  .evg-week__end--from { grid-area: 1 / 1; }
  .evg-week          { grid-area: 2 / 1; }
  .evg-week__end--to { grid-area: 3 / 1; text-align: left; }
}

/* =========================================================================
   CAREERS, 2.8

   HR's three parts: why work with us, open positions, send your CV. The
   page sits on the white ground throughout, so every button here takes the
   darker teal tier, the rule .evg-roles already followed: aqua on white is
   1.66:1, teal-text is 5.58:1.
   ====================================================================== */

/* The site has no global [hidden] rule, and several of these set their own
   display, which beats the browser's. Without this the area question and the
   retention lines would never hide when the form switches between an open
   application and a job. */
.evg-role[hidden],
.evg-roles__tools[hidden],
.evg-form__row[hidden],
.evg-form__check[hidden],
.evg-form__hint[hidden],
.evg-form__error[hidden] { display: none; }

/* ---- top of the page ---------------------------------------------------- */

.evg-careers__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin: 1.8rem 0 0;
}

.evg-careers__jump .evg-btn,
.evg-apply .evg-btn {
  color: var(--c-teal-text);
  border-color: color-mix(in srgb, var(--c-teal-text) 45%, transparent);
}

.evg-careers__jump .evg-btn:hover,
.evg-apply .evg-btn:hover {
  background: var(--c-teal-text);
  color: var(--c-white);
}

.evg-btn.evg-btn--solid,
.evg-apply .evg-form__submit {
  background: var(--c-teal-text);
  border-color: var(--c-teal-text);
  color: var(--c-white);
}

.evg-btn.evg-btn--solid:hover,
.evg-apply .evg-form__submit:hover {
  background: var(--c-deep-2);
  border-color: var(--c-deep-2);
  color: var(--c-white);
}

.evg-careers__n {
  display: inline-block;
  margin-left: .55rem;
  padding-left: .6rem;
  border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  font-variant-numeric: tabular-nums;
}

.evg-careers__cv {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-teal-text);
  text-underline-offset: .25em;
}

/* ---- part 2: the jobs ----------------------------------------------------- */

.evg-roles__tools { margin: 0 0 .4rem; }

.evg-roles__filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.evg-chip {
  min-height: 44px;
  padding: .7rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.evg-chip:hover { border-color: var(--ink); }

.evg-chip[aria-pressed="true"] {
  background: var(--c-slate);
  border-color: var(--c-slate);
  color: var(--c-white);
}

.evg-chip__n {
  margin-left: .45rem;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

.evg-roles__count {
  margin: .9rem 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.evg-roles__list { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }

.evg-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 2.5rem;
  align-items: start;
}

.evg-role__meta {
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
}

.evg-role__meta li { margin: 0; }

.evg-role__desc { margin: 0; }

.evg-role__act { padding-top: .2rem; }

.evg-role__more {
  margin-top: .9rem;
  font-size: var(--fs-caption);
}

.evg-role__more > summary {
  width: fit-content;
  font-weight: 600;
  cursor: pointer;
  text-underline-offset: .25em;
}

.evg-role__more > summary:hover { text-decoration: underline; }
.evg-role__more[open] > summary { margin-bottom: .6rem; }

.evg-role__period { margin: 0 0 .5rem; color: var(--ink-soft); }
.evg-role__period span { color: var(--ink); font-weight: 600; }

.evg-role__points {
  max-width: var(--measure);
  margin: 0 0 .6rem;
  padding-left: 1.1em;
  color: var(--ink-soft);
}

.evg-role__points li + li { margin-top: .25rem; }

.evg-role__closes {
  margin: .6rem 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .evg-role { grid-template-columns: minmax(0, 1fr); }
}

.evg-roles__none { margin-bottom: 1.8rem; }

/* ---- part 3: the form ----------------------------------------------------- */

.evg-apply__head { max-width: var(--measure); }

.evg-apply__switch {
  margin: .8rem 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.evg-apply__switch a {
  font-weight: 600;
  color: var(--c-teal-text);
  text-underline-offset: .25em;
}

.evg-apply .evg-form__note {
  max-width: 44rem;
  margin-top: 1.4rem;
}

/* With no job open, the form sits under the no-open-positions message in the
   same section, so it needs no gap of its own above it. */
.evg-apply--inline .evg-form { margin-top: 0; }

/* The line that answers Send before the form takes applications. Empty
   until then, and an empty paragraph draws nothing. */
.evg-form__soon {
  max-width: 44rem;
  margin: 1.2rem 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--c-teal);
  background: color-mix(in srgb, var(--c-teal) 8%, transparent);
  font-size: var(--fs-caption);
  color: var(--c-slate);
}

.evg-form__soon:empty { display: none; }

.evg-form input[type="tel"] {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-slate);
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-slate) 26%, transparent);
  border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.evg-form__opt {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* The CV gets a drawn frame, because a bare file input is the easiest field
   on any form to miss. */
.evg-form__file {
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--c-slate) 34%, transparent);
}

.evg-form input[type="file"] {
  display: block;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--c-slate);
}

.evg-form input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: .6rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--c-teal-text);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-teal-text) 45%, transparent);
  border-radius: 0;
  cursor: pointer;
}

.evg-form input[type="file"]::file-selector-button:hover {
  background: var(--c-teal-text);
  color: var(--c-white);
}

.evg-form__hint {
  display: block;
  margin-top: .45rem;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

p.evg-form__hint { margin: 0 0 1.1rem; }

.evg-form__error {
  display: block;
  margin-top: .45rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: #A94C36;
}

.evg-form__check {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  max-width: 44rem;
  margin: 0 0 1.1rem;
}

.evg-form__check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: .2rem 0 0;
  accent-color: var(--c-teal-text);
}

.evg-form .evg-form__check label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-slate);
}

.evg-form__check a {
  font-weight: 600;
  color: var(--c-teal-text);
  text-underline-offset: .2em;
}

.evg-form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: .6rem;
}

.evg-form__alt {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}

.evg-form__alt a {
  font-weight: 600;
  color: var(--c-teal-text);
}

.evg-apply__done {
  max-width: var(--measure);
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--c-teal);
  background: color-mix(in srgb, var(--c-teal) 8%, transparent);
}

.evg-apply__done .evg-h2 { margin-bottom: .6rem; }
.evg-apply__done .evg-btn { margin-top: 1.2rem; }

.evg-apply__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin: 1.6rem 0 0;
}

.evg-apply__address {
  font-weight: 600;
  color: var(--c-teal-text);
  text-underline-offset: .25em;
}

/* ---- the privacy page ------------------------------------------------------ */

.evg-rich { max-width: var(--measure); }

.evg-rich .evg-rich__h {
  margin: 2.2rem 0 .7rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.evg-rich > .evg-rich__h:first-child { margin-top: 0; }

.evg-rich__list {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.evg-rich__list li + li { margin-top: .4rem; }

.evg-rich a {
  color: var(--c-teal-text);
  text-underline-offset: .2em;
}

/* ---- footer ------------------------------------------------------------- */

.evg-foot__legal {
  font-size: var(--fs-caption);
  color: color-mix(in srgb, var(--c-white) 60%, transparent);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.evg-foot__legal:hover,
.evg-foot__legal:focus-visible { color: var(--c-aqua); }