/* Illuma — Website UI kit styles.
   Loads brand tokens from the design-system root (fonts resolve relative
   to that CSS file). Page is authored at a 1920px canvas and scaled to the
   viewport width by scaler.js. */

* { box-sizing: border-box; }

html { overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  background: #211F21;
  font-family: var(--font-primary);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
}

/* ---- 1920 canvas scaler ---- */
#stage {
  width: 1920px;
  transform-origin: top left;
  background: var(--color-white);
  position: relative;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---- containers ---- */
.ill-main { width: 1400px; margin-inline: auto; }
.ill-narrow { width: 1192px; margin-inline: auto; }

/* ---- full-bleed project grid (matches homepage Recent Projects) ---- */
.ill-proj-fullgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(33,31,33,0.10);
  border-left: 1px solid rgba(33,31,33,0.10);
}
/* When the last row is partial (e.g. 4 cards in a 3-col grid), the per-card
   bottom borders can't span the empty trailing cells. The container supplies
   ONE full-width bottom line, and we drop the lone last-row card's own bottom
   border so the two don't stack into a double line. Only needed at the 3-col
   desktop width — at 2-col/1-col the in-dev grid's last row is full, so its
   card borders already form a clean full-width line. */
@media (min-width: 1280px) {
  .ill-proj-fullgrid--fill-bottom { border-bottom: 1px solid rgba(33,31,33,0.10); }
  .ill-proj-fullgrid--fill-bottom > a:last-child { border-bottom: none !important; }
}
/* each card provides right+bottom only → single shared divider lines */
.ill-proj-fullgrid > a {
  border: none !important;
  border-right: 1px solid rgba(33,31,33,0.10) !important;
  border-bottom: 1px solid rgba(33,31,33,0.10) !important;
}
@media (max-width: 1279px) {
  .ill-proj-fullgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ill-proj-fullgrid { grid-template-columns: 1fr; }
}

/* ---- section label pill ---- */
.ill-label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 9px;
  background: var(--color-border-lilac-10);
  border: 1px solid var(--color-border-lilac);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-black);
  white-space: nowrap;
}

/* ---- headings ---- */
.ill-h1 { font-size: 80px; line-height: 1; letter-spacing: -0.02em; font-weight: 300; margin: 0; }

/* ---- hero headline reveal (line-by-line masked rise) ---- */
/* Used by the RevealH1 component (primitives.jsx) on every page hero. Each
   visual line sits inside an overflow:hidden mask; the inner text starts
   pushed 100% below the mask and slides up into place, line by line. No
   word/character wrappers. Per-line stagger delays (0.35s + 0.15s per line)
   are set inline by RevealH1. The descender padding (+ negative margin to
   cancel it in flow) keeps glyphs like g / y from being clipped while leaving
   the static layout, spacing and line-height untouched. */
.h1-reveal .h1-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.h1-reveal .h1-inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.h1-reveal.is-in .h1-inner { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .h1-reveal .h1-inner { transform: none; opacity: 1; transition: none; }
}

.ill-h2 { font-size: 48px; line-height: 1; letter-spacing: -0.02em; font-weight: 300; margin: 0; color: var(--color-black); }
.ill-h3 { font-size: 30.9px; line-height: 35.2px; font-weight: 500; margin: 0; color: var(--color-black); }
.ill-stat { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; margin: 0; }
.ill-body { font-size: 16px; line-height: 1.4; font-weight: 400; }
.ill-body-lg { font-size: 18px; line-height: 1.4; font-weight: 400; }
.ill-small { font-size: 14px; line-height: 1.4; font-weight: 400; }

/* ---- article content (SEO-friendly heading system + reusable blocks) ---- */
.ill-article-content { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.ill-article-content > * { margin: 0; }
.ill-article-content .ill-article-lede {
  font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--color-black); text-wrap: pretty;
}
.ill-article-content h1 {
  font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 300; color: var(--color-black);
}
.ill-article-content h2 {
  font-size: 32px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 300; color: var(--color-black);
  margin-top: 24px;
}
.ill-article-content h3 {
  font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; color: var(--color-black);
  margin-top: 12px;
}
.ill-article-content h4 {
  font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; color: var(--color-black);
  margin-top: 8px;
}
.ill-article-content p { font-size: 16px; line-height: 1.7; color: var(--color-black-70); text-wrap: pretty; }

/* article image layouts */
.ill-article-figure { margin: 16px 0; display: flex; flex-direction: column; gap: 14px; }
.ill-article-figure img,
.ill-article-duo img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--color-surface-muted);
}
.ill-article-figcaption {
  font-family: var(--font-secondary); font-size: 13px; line-height: 1.5;
  color: var(--color-black-70); letter-spacing: 0.01em;
}
.ill-article-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.ill-article-duo figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---- buttons ---- */
.ill-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: filter var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.ill-btn .ill-arrow { transition: transform var(--duration-fast) var(--ease-standard); }
.ill-btn:hover .ill-arrow { transform: translate(3px, -3px); }

.ill-btn--berry {
  background: var(--color-primary);
  color: var(--color-primary-soft);
}
/* hover: clean solid burgundy — no gradient */
.ill-btn--berry:hover {
  background: #990033;
  color: var(--color-primary-soft);
}
.ill-btn--pink { background: var(--color-primary-soft); color: var(--color-primary); }
/* hover: becomes the solid plum primary default */
.ill-btn--pink:hover { background: var(--color-primary); color: var(--color-primary-soft); }
.ill-btn--dark { background: var(--color-black); color: var(--color-white); }
.ill-btn--dark:hover { filter: brightness(1.4); }
.ill-btn--white { background: var(--color-white); color: var(--color-black); }
.ill-btn--ghost { background: transparent; border-color: var(--color-black-15); color: var(--color-black); }

/* text link with underline */
.ill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-primary);
}
.ill-link .ill-arrow { transition: transform var(--duration-fast) var(--ease-standard); }
.ill-link:hover .ill-arrow { transform: translate(3px, -3px); }

/* ---- header / floating nav ---- */
/* #ill-chrome is a fixed, viewport-pinned layer the header is relocated into
   (see boot.js) so it stays put while scrolling. It is scaled to match #stage. */
#ill-chrome {
  position: fixed;
  top: 0;
  left: 0;
  width: 1920px;
  height: 0;
  transform-origin: top left;
  z-index: 50;
  pointer-events: none;
}
#ill-chrome .ill-header { pointer-events: auto; }
.ill-header {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
}
.ill-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 60px;
  background: var(--color-surface-pink);
  border-radius: 0;
  padding: 0 28px 0 20px;
}
.ill-nav__logo { height: 24.8px; width: auto; }
.ill-nav__items { display: flex; align-items: center; gap: 32px; }
.ill-nav__link {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 5px;
  position: relative;
  padding: 8px 0;
}
.ill-nav__link:hover { opacity: 0.65; }
.ill-nav__chev { width: 10px; height: 6px; }

/* projects dropdown */
.ill-drop { position: relative; }
.ill-drop__menu {
  position: absolute;
  top: 46px; left: -16px;
  min-width: 248px;
  white-space: nowrap;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(33,31,33,0.16);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast);
}
.ill-drop:hover .ill-drop__menu,
.ill-drop.open .ill-drop__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ill-drop__item {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--color-primary);
  border-radius: 3px;
  white-space: nowrap;
}
.ill-drop__item:hover { background: var(--color-surface-pink); }

/* Contact CTA — composes the primary button component (.ill-btn .ill-btn--berry);
   the class remains only as a responsive hook (tablet sizing, hidden on mobile). */
.ill-contact-btn { flex: none; }

/* Footer credit — no underline by default, underline on hover */
.ill-ven-credit:hover { text-decoration: underline; }

/* ---- header search ---- */
.ill-header__actions { display: flex; align-items: center; gap: 12px; }
.ill-search { position: relative; flex: none; }
.ill-search__field {
  display: flex; align-items: center;
  height: 48px; width: 48px;
  background: var(--color-surface-pink);
  overflow: hidden;
}
.ill-search.is-expanded .ill-search__field { width: clamp(300px, 30vw, 440px); }
.ill-search__toggle {
  flex: none; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ill-search__toggle:hover { opacity: 0.6; }
.ill-search__input {
  flex: 1; min-width: 0; height: 48px;
  border: 0; outline: none; background: transparent;
  font-family: var(--font-primary); font-size: 15px; letter-spacing: 0.01em;
  color: var(--color-primary);
  padding: 0 18px 0 2px;
}
.ill-search:not(.is-expanded) .ill-search__input { pointer-events: none; }
.ill-search__input::placeholder { color: rgba(115,38,84,0.55); }

.ill-search__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: clamp(300px, 30vw, 440px);
  background: var(--color-white);
  border: 1px solid var(--color-black-15);
  box-shadow: 0 18px 50px rgba(33,31,33,0.12);
  padding: 19px 19px 3px;
  z-index: 60;
}
.ill-search__tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.ill-search__tab {
  font-family: var(--font-primary); font-size: 15px; line-height: 1;
  padding: 9px 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ill-search__tab.is-active { background: var(--color-surface-pink); border-color: var(--color-border-lilac); }
.ill-search__tab:hover:not(.is-active) { opacity: 0.6; }
.ill-search__list { max-height: 360px; overflow-y: auto; }
/* Each result: text column on the left, a small square thumbnail on the right. */
.ill-search__result { display: flex; align-items: center; gap: 16px; padding: 16px 0; text-decoration: none; }
.ill-search__result:first-child { padding-top: 10px; }
.ill-search__result:last-child { padding-bottom: 6px; }
.ill-search__result + .ill-search__result { border-top: 1px solid var(--color-black-15); }
.ill-search__result-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ill-search__result-thumb { flex: none; width: 56px; height: 56px; overflow: hidden; background: var(--color-surface-pink); }
.ill-search__result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ill-search__result-title {
  font-family: var(--font-primary); font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--color-black); transition: color var(--duration-fast) var(--ease-standard);
}
.ill-search__result:hover .ill-search__result-title { color: var(--color-primary); }
.ill-search__result-excerpt { font-family: var(--font-primary); font-size: 14px; line-height: 1.45; color: var(--color-black-70); }
.ill-search__empty { font-family: var(--font-primary); font-size: 15px; color: var(--color-black-70); padding: 14px 0; margin: 0; }
/* View-all footer link beneath the result list — a clean centered action with
   the count read inline and the arrow grouped with the label. */
.ill-search__viewall {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 0; padding: 15px 12px; border-top: 1px solid var(--color-black-15);
  font-family: var(--font-primary); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--color-primary); text-decoration: none;
  transition: gap var(--duration-fast) var(--ease-standard);
}
.ill-search__viewall:hover { gap: 12px; }
.ill-search__viewall svg { flex: none; }

/* ---- Search results page (search.html) ---- */
.ill-sr-hero { background: var(--color-surface-pink); padding: 144px 0 64px; }
.ill-sr-hero__title { margin: 16px 0 32px; font-family: var(--font-primary); font-size: clamp(40px, 5vw, 72px); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; color: var(--color-black); }
.ill-sr-search { display: flex; align-items: center; gap: 14px; max-width: 720px; background: var(--color-white); border: 1px solid var(--color-black-15); padding: 0 20px; height: 64px; }
.ill-sr-search__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-family: var(--font-primary); font-size: 18px; color: var(--color-primary); }
.ill-sr-search__input::placeholder { color: rgba(115,38,84,0.5); }
.ill-sr-search__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
.ill-sr-search__clear:hover { opacity: 0.6; }

.ill-sr-results { padding: 64px 0 120px; background: var(--color-white); }
.ill-sr-empty { font-family: var(--font-primary); font-size: 18px; line-height: 1.5; color: var(--color-black-70); margin: 0; }
.ill-sr-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.ill-sr-tabs { display: flex; gap: 8px; }
.ill-sr-tab {
  font-family: var(--font-primary); font-size: 15px; line-height: 1; padding: 12px 18px; cursor: pointer;
  background: transparent; border: 1px solid var(--color-black-15); color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ill-sr-tab.is-active { background: var(--color-surface-pink); border-color: var(--color-border-lilac); }
.ill-sr-tab:hover:not(.is-active) { opacity: 0.6; }
.ill-sr-count { font-family: var(--font-secondary); font-size: 14px; color: var(--color-black-70); }
.ill-sr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ill-sr-card { display: flex; gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--color-black-15); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.ill-sr-card:hover { border-color: var(--color-primary); background: var(--color-surface-pink); }
.ill-sr-card__thumb { flex: none; width: 96px; height: 96px; overflow: hidden; background: var(--color-surface-pink); }
.ill-sr-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ill-sr-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ill-sr-card__kind { font-family: var(--font-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.ill-sr-card__title { margin: 0; font-family: var(--font-primary); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-black); }
.ill-sr-card__excerpt { margin: 0; font-family: var(--font-primary); font-size: 15px; line-height: 1.45; color: var(--color-black-70); }
@media (max-width: 900px) {
  .ill-sr-hero { padding: 128px 0 48px; }
  .ill-sr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ill-sr-card { gap: 16px; padding: 18px; }
  .ill-sr-card__thumb { width: 72px; height: 72px; }
  .ill-sr-card__title { font-size: 19px; }
}

/* Tablet: expand as an overlay so it never pushes nav/contact or overflows */
@media (max-width: 1024px) and (min-width: 768px) {
  .ill-search__field, .ill-search__toggle, .ill-search__input { height: 52px; }
  .ill-search__field { width: 52px; }
  .ill-search.is-expanded .ill-search__field {
    position: absolute; top: 0; right: 0; z-index: 5;
    width: clamp(280px, 44vw, 420px);
  }
  .ill-search__panel { width: clamp(280px, 44vw, 420px); }
}

/* Mobile search (inside burger menu) — hidden elsewhere */
.ill-msearch { display: none; }
@media (max-width: 767px) {
  .ill-search { display: none; }
  .ill-msearch { display: block; margin-bottom: 6px; }
  .ill-msearch__field {
    display: flex; align-items: center; gap: 10px;
    height: 48px; padding: 0 16px;
    background: var(--color-surface-pink);
  }
  .ill-msearch__input {
    flex: 1; min-width: 0; height: 48px;
    border: 0; outline: none; background: transparent;
    font-family: var(--font-primary); font-size: 15px; color: var(--color-primary);
  }
  .ill-msearch__input::placeholder { color: rgba(115,38,84,0.55); }
  .ill-msearch .ill-search__panel {
    position: static; width: 100%;
    box-shadow: none; border: 0; padding: 12px 2px 4px; margin-top: 6px;
  }
  .ill-msearch .ill-search__list { max-height: 50vh; }
}

/* ---- diagonal slash motif over images ---- */
.ill-imgblock { position: relative; overflow: hidden; }
.ill-imgblock > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-medium) var(--ease-premium); }
.ill-slash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- community section (centered mosaic collage) ---- */
.ill-community-section { background: #fff; overflow: hidden; padding: 0 0 100px; }
.ill-comm-inner {
  max-width: 1192px;
  margin-inline: auto;
  padding: 60px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}
.ill-comm-head { display: flex; flex-direction: column; align-items: center; gap: 15.4px; }
.ill-comm-h2 {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0;
  color: var(--color-black);
  text-align: center;
  max-width: 1000px;
  text-wrap: balance;
}

/* collage: a single proportional mosaic (desktop ref 1440 x 448). Scales as one unit. */
.ill-comm-collage {
  position: relative;
  flex: none;
  width: min(1440px, calc(100vw - 48px));
  aspect-ratio: 1440 / 448;
}
.ill-comm-card {
  position: absolute;
  overflow: hidden;
  border-radius: 4px;
}
.ill-comm-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* positions as % of the 1440 x 448 frame */
.ill-comm-c1 { left: 15.556%; top: 0;       width: 20.278%; height: 49.107%; }
.ill-comm-c2 { left: 36.389%; top: 0;       width: 20.278%; height: 65.179%; }
.ill-comm-c3 { left: 36.389%; top: 66.964%; width: 20.278%; height: 33.036%; }
.ill-comm-c4 { left: 57.222%; top: 50.893%; width: 24.722%; height: 49.107%; }
.ill-comm-c5 { left: 82.5%;   top: 50.893%; width: 17.5%;   height: 49.107%; }
.ill-comm-c6 { left: 0;       top: 50.893%; width: 35.833%; height: 49.107%; }

/* framed wind card: gradient backing image with the photo inset inside it */
.ill-comm-frame { background: var(--color-surface-deep); }
.ill-comm-card > img.ill-comm-frame-inner {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* paragraph that lives inside the collage (desktop) */
.ill-comm-collage-para {
  position: absolute;
  left: 59.444%;
  top: 0;
  width: 20.278%;
  margin: 0;
  color: var(--color-black);
}
.ill-comm-para-below { display: none; }

/* ---- careers recruitment CTA band ---- */
.ill-careers-section { background: #fff; padding: 0; }
.ill-careers-cta {
  background: var(--color-accent-navy);
  color: #fff;
  padding: 56px 64px 44px;
  display: flex;
  flex-direction: column;
}
.ill-careers-cta__logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  text-decoration: none;
  color: #fff;
}
.ill-careers-cta__mark { height: 38px; width: 38px; }
.ill-careers-cta__logo-img { height: 25px; width: auto; display: block; }
.ill-careers-cta__wordmark { display: flex; flex-direction: column; line-height: 1.04; }
.ill-careers-cta__word {
  font-family: var(--font-primary);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.ill-careers-cta__word--light { font-weight: 400; color: rgba(255, 255, 255, 0.82); }
.ill-careers-cta__h {
  margin: 16px 0 0;
  font-family: var(--font-primary);
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: #fff;
  text-wrap: balance;
}
.ill-careers-cta__divider {
  margin-top: 52px;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
}
.ill-careers-cta__link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.ill-careers-cta__arrow { width: 12px; height: 12px; color: #fff; opacity: 0.85; transition: transform var(--duration-fast) var(--ease-standard); }
.ill-careers-cta__link:hover .ill-careers-cta__arrow { transform: translate(2px, 2px); }
.ill-careers-cta__link span { transition: opacity var(--duration-fast) var(--ease-standard); }
.ill-careers-cta__link:hover span { opacity: 0.78; }

/* ---- interactive spotlight CTA ---- */
.ill-cta {
  position: relative;
  width: calc(100% + 16px);
  margin-left: -8px;
  margin-right: -8px;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  --beam-clip: polygon(0% 100%, 14% 0%, 30% 0%); /* @kind other */ /* resting: steep wedge clear of the centred type */
}
.ill-cta-bg {
  position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;
  z-index: 1;
  /* base layer: the darker Illuma brand gradient (deep plum → burgundy → magenta → dark green) */
  background: url("../../assets/cta/cta-gradient-dark.png") center / cover no-repeat;
}
.ill-cta-beam {
  position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;
  z-index: 2;
  /* moving reveal: the cursor-following beam lights up the wind-farm photograph.
     A very light plum wash keeps the white headline legible without muddying the image */
  background:
    linear-gradient(150deg, rgba(43,12,30,0.22) 0%, rgba(26,10,22,0.10) 50%, rgba(13,28,22,0.20) 100%),
    url("../../assets/cta/cta-windfarm.jpg") center / cover no-repeat;
  clip-path: var(--beam-clip);
}
.ill-cta-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
  padding: 96px 24px;
  pointer-events: none;
}
.ill-cta-content > * { max-width: 1000px; }
.cta-content--light { z-index: 3; }
.ill-cta-content .ill-btn { pointer-events: auto; }
.ill-cta-h2 {
  margin: 0;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 300;
  max-width: 900px;
  text-wrap: balance;
}
.ill-cta-support { margin: 0; font-size: 18px; line-height: 1.45; max-width: 560px; }
.cta-content--light .ill-cta-h2 { color: #fff; }
.cta-content--light .ill-cta-support { color: rgba(255, 255, 255, 0.82); }

/* mobile / tablet: no cursor tracking — a wide "searchlight" sweep that mimics
   the desktop cursor spotlight. The slim wedge keeps its sharp ~15–20° apex
   (pinned at the bottom-left pivot, 0% 100%) but ROTATES through a large arc:
   pointing up (beam upper-left) → up-right (crossing the centre) → right (beam
   raking along the bottom). The far edge points deliberately run past the box
   (negative / >100%) so the wedge stays a constant slim angle while travelling
   across the whole section; off-box parts simply clip. Because it is a rigid
   rotation about a fixed apex, the sharp angle is preserved at every frame.
   Desktop (>1279px, cursor-tracked) is unaffected. */
@media (max-width: 1279px) {
  .ill-cta-beam {
    animation: ill-beam-sweep 9s ease-in-out infinite alternate;
  }
}
@keyframes ill-beam-sweep {
  /* pointing up — bright beam mostly on the left */
  0%   { clip-path: polygon(0% 100%, 10% -20%, 36% -20%); }
  /* pointing up-right — beam crosses through the centre */
  50%  { clip-path: polygon(0% 100%, 80% -20%, 130% 4%); }
  /* pointing right — beam rakes toward the right / bottom */
  100% { clip-path: polygon(0% 100%, 130% 35%, 130% 95%); }
}
@media (prefers-reduced-motion: reduce) {
  .ill-cta-beam { animation: none; }
}
/* tablet only (768–1279): tighter CTA vertical padding (80px top/bottom).
   Scoped above 767 so mobile keeps its own 64px override and desktop (≥1280)
   is untouched. Horizontal padding is left at the base 24px. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ill-cta-content { padding-top: 80px; padding-bottom: 80px; }
}

/* ---- footer ---- */
.ill-footer { background: #000; color: var(--color-surface-pink); padding: 80px 0 24px; }
.ill-footer__col-title {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 14px;
  line-height: 15.55px;
  color: var(--color-surface-pink);
  margin: 0 0 16px;
}
.ill-footer__link { display: block; font-size: 15px; line-height: 1.7; color: var(--color-surface-pink); opacity: 0.85; }
.ill-footer__link:hover { opacity: 1; }

/* ---- FAQ ---- */
.ill-faq-item { border-top: 1px solid var(--color-black-15); }
.ill-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  text-align: left;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-black);
}
.ill-faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--duration-medium) var(--ease-premium), opacity var(--duration-medium) var(--ease-premium), padding var(--duration-medium) var(--ease-premium);
}
.ill-faq-a > p { margin: 0; max-width: 720px; }
.ill-faq-item.open .ill-faq-a { max-height: 280px; opacity: 1; padding-bottom: 28px; }
.ill-faq-plus { flex: none; width: 22px; height: 22px; position: relative; }
.ill-faq-plus::before, .ill-faq-plus::after { content: ""; position: absolute; background: var(--color-primary); transition: transform var(--duration-fast) var(--ease-standard); }
.ill-faq-plus::before { left: 0; top: 10px; width: 22px; height: 2px; }
.ill-faq-plus::after { left: 10px; top: 0; width: 2px; height: 22px; }
.ill-faq-item.open .ill-faq-plus::after { transform: scaleY(0); }

/* ---- form inputs ---- */
.ill-field { display: flex; flex-direction: column; gap: 8px; }
.ill-field label { font-size: 14px; color: var(--color-black); }
.ill-input, .ill-textarea {
  border: none;
  border-bottom: 1px solid var(--color-black-40);
  background: transparent;
  padding: 10px 0;
  font-family: var(--font-primary);
  font-size: 18px;
  color: var(--color-black);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.ill-input::placeholder, .ill-textarea::placeholder { color: var(--color-black-40); }
.ill-input:focus, .ill-textarea:focus { border-color: var(--color-primary); }
.ill-textarea { resize: none; }

/* Contact page form fields — clearer underline affordance (scoped to contact pane only) */
.ill-contact-pane .ill-input,
.ill-contact-pane .ill-textarea {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.ill-contact-pane .ill-input:hover,
.ill-contact-pane .ill-textarea:hover {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.ill-contact-pane .ill-input:focus,
.ill-contact-pane .ill-textarea:focus {
  border-bottom: 1px solid var(--color-primary);
}

/* ---- motion ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium); }
.reveal.in { opacity: 1; transform: none; }

/* ---- about sub-pages: side-nav layout (from supplied design references) ---- */
.abp-page { background: #fff; }
/* Standalone About pages: the four sections now each live on their own page
   (no tab rail / shell). The body sits in the standard centred site container
   with the same vertical rhythm the tab panel used (32px between the lead
   cluster and the content below). All section styling (.abp-h, .abp-prose,
   .wwd-*, .abp-team-*, .abp-comm) is carried over verbatim from the tab design. */
.abp-standalone { display: flex; flex-direction: column; gap: 32px; }
.abp-shell {
  width: 100%;
  /* The empty rail track starts at 60px to mirror the fixed rail (which boot.js
     pins at left:60px), so column-gap below equals the TRUE visible gap between
     the rail and the content. Content right edge stays anchored to the 1400px
     container via the right padding. */
  padding: 168px calc((100% - 1400px) / 2) 140px 60px;
  display: grid; grid-template-columns: 226px minmax(0, 1fr);
  column-gap: 160px; align-items: start;
}
/* In-flow fallback (JS off, or the instant before boot.js relocates it). On
   desktop boot.js MOVES this <nav> into the fixed #abp-rail-fixed layer outside
   the transformed #stage, where it is truly locked to the viewport — see the
   #abp-rail-fixed rules below. No transform / sticky / scroll code lives here. */
.abp-rail { position: relative; align-self: start; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }

/* The viewport-pinned layer the rail is relocated into on desktop. It is a
   fixed clone of #stage's coordinate system: boot.js gives it the same width
   and the same scale() (origin top-left) as #stage, so the rail renders at the
   exact size and x-position the in-flow rail column would have — but, being
   position:fixed and never scrolled, it stays perfectly still. Below the header
   (z 50) and above page content. */
#abp-rail-fixed {
  position: fixed; top: 0; left: 0; width: 1920px; height: 0;
  transform-origin: top left; z-index: 40; pointer-events: none;
}
#abp-rail-fixed .abp-rail {
  position: absolute; left: 60px; top: 150px; padding-top: 0;
  pointer-events: auto;
}
.abp-rail__item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0 7px 22px;
  font-family: var(--font-primary); font-size: 16px; line-height: 1.3;
  color: var(--color-black); opacity: 0.45;
  transition: opacity var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.abp-rail__item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; background: var(--color-primary);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.abp-rail__item:hover { opacity: 1; color: var(--color-primary); }
.abp-rail__item.is-active { opacity: 1; font-weight: 500; }
.abp-rail__item.is-active::before { opacity: 1; }
/* Pinned to column 2 so it never reflows into the rail's track when boot.js
   relocates the rail out of the grid (keeps the content offset / 120px gap). */
.abp-content { grid-column: 2; min-width: 0; }
/* Tab panel holds the active section's content. key={active} re-mounts it on
   every tab switch, replaying a subtle entrance slide. Correctness rule: opacity
   stays 1 at all times so content is NEVER hidden (print, export, or a frame
   that never paints all show it). Only transform is animated — worst case the
   panel rests a few px lower but fully visible; in a live browser it slides up. */
.abp-tabpanel { display: flex; flex-direction: column; gap: 32px; }
/* Intro cluster (label → heading → intro/body) uses the homepage SectionHead
   rhythm of 16px; the 32px tabpanel gap still separates it from content below. */
.abp-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .abp-tabpanel { animation: abpRise 360ms var(--ease-standard); }
}
@keyframes abpRise {
  from { transform: translateY(10px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .abp-tabpanel { animation: none; }
}
.abp-h {
  margin: 0; max-width: 1080px;
  font-size: 48px; line-height: 1.06; letter-spacing: -0.02em; font-weight: 300;
  color: var(--color-black); text-wrap: balance;
}
.abp-intro { margin: 0; max-width: 1020px; font-size: 16.5px; line-height: 1.55; color: var(--color-black); }
/* What We Do: widen the intro so it connects with the full-width content below
   instead of sitting in a narrow column (stays left-aligned with the heading). */
.wwd-page .abp-intro { max-width: 1200px; }
.abp-prose { display: flex; flex-direction: column; gap: 22px; max-width: 1020px; }
.abp-prose p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--color-black); }
/* Our Story lead: text spans the full container width to match the image below it
   (left edges already align; this removes the narrower reading-measure cap so the
   right edge matches too). Scoped to Our Story only — other pages keep their cap. */
.abp-lead--full .abp-h,
.abp-lead--full .abp-intro,
.abp-lead--full .abp-prose { max-width: none; }

/* what we do — infographic + capabilities */
/* Figma layout swapped: text column (567) left, large infographic (613) right, gap 120, vertically centred */
/* Standalone What We Do: the lead + grid sit in a centred block so the section is
   balanced within the page (equal left/right margins) instead of squeezed left.
   The heading shares the block's left edge with the text column below it, and the
   grid spans the block so the wheel sits at the right edge a comfortable distance
   from the text. */
.wwd-page { width: 100%; max-width: none; margin-inline: 0; display: flex; flex-direction: column; gap: 32px; }
.wwd-grid { display: grid; grid-template-columns: 760px 588px; justify-content: space-between; column-gap: 90px; row-gap: 48px; align-items: center; margin-top: 16px; }
.wwd-grid__wheel { display: flex; justify-content: center; }

/* single inline-SVG infographic. Petals scale via the SVG transform ATTRIBUTE
   (set in JS) about the wheel centre — no CSS transform touches .wwd-seg, so the
   attribute is never overridden. overflow visible lets enlarged petals paint fully. */
.wwd-fig { position: relative; width: 100%; max-width: 588px; aspect-ratio: 613 / 618; margin-inline: 0; }
.wwd-fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Petals are display-only; invisible group wedges (added in JS) own the hover. */
.wwd-seg { pointer-events: none; }
.wwd-zone { pointer-events: all; cursor: pointer; }

/* Left column: one continuous stacked-arrow rail (col 1) beside three large
   editorial text blocks (col 2). Each rail segment is a slim bar clipped to a
   downward chevron point at the bottom; every segment below the first also has a
   matching concave notch cut into its top, so the point of one nests into the
   next with a thin white chevron cut between — a single connected arrow system.
   Each segment is permanently tinted with its wheel-group `color` token
   (Investment / Development / Operations), so the rail and wheel stay in sync.
   Text spacing lives in padding (not row-gap) so the bars remain connected. */
.wwd-flow { display: grid; grid-template-columns: 26px 1fr; column-gap: 32px; row-gap: 6px; max-width: 760px; align-items: stretch; }
.wwd-flow__bar {
  width: 26px; align-self: stretch;
  background: #EFEFEF;
  transition: background-color 220ms cubic-bezier(0.4,0,0.2,1);
  /* concave notch on top + downward point on bottom */
  clip-path: polygon(0 0, 50% 11px, 100% 0, 100% calc(100% - 11px), 50% 100%, 0 calc(100% - 11px));
}
.wwd-flow__bar:first-child {
  /* first segment: flat top + downward point */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 50% 100%, 0 calc(100% - 11px));
}
.wwd-flow__text { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 50px; }
.wwd-flow__text:last-child { padding-bottom: 0; }
.wwd-flow__title { margin: 0; font-family: var(--font-primary); font-size: 34px; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: var(--color-black); }
.wwd-flow__body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-black-70); max-width: 660px; }
@media (prefers-reduced-motion: reduce) {
  .wwd-flow__bar { transition: none; }
}

/* our people — grouped team sections */
.abp-team-groups { display: flex; flex-direction: column; gap: 80px; margin-top: 12px; }
.abp-team-group { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 120px; }
.abp-team-group__title {
  margin: 0;
  font-family: var(--font-primary); font-weight: 400;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.01em;
  color: #fff;
  padding: 12px 28px; border-radius: 0;
  background: var(--color-primary);
}
.abp-team-sub { display: flex; flex-direction: column; gap: 24px; }
.abp-team-sub__label {
  margin: 0;
  font-family: var(--font-primary); font-size: 20px; font-weight: 500;
  letter-spacing: -0.005em; text-transform: none;
  color: var(--color-black);
}
.abp-team-note {
  margin: 0; max-width: 540px;
  font-family: var(--font-secondary); font-size: 16px; line-height: 1.55;
  color: var(--color-black-70);
}

/* our leaders — grid */
.abp-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 24px; margin-top: 0; }
.abp-team__card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; max-width: 320px; }
.abp-team__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  display: block; background: var(--color-surface-pink);
}
.abp-team__card:hover .abp-team__img { opacity: 0.85; transition: opacity 200ms ease; }
.abp-team__name { font-size: 21px; letter-spacing: -0.01em; color: var(--color-black); }
.abp-team__card:hover .abp-team__name { color: var(--color-primary); transition: color 200ms ease; }
.abp-team__role { font-size: 14px; color: var(--color-black-70); margin-top: 4px; }

/* community & engagement — cards around a tall centre image (Figma) */
.abp-comm {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "c1 img c3"
    "c2 img c4";
  gap: 16px; margin-top: 28px;
}
.abp-comm__card {
  position: relative; overflow: hidden;
  border-radius: 0;
  padding: 40px 32px; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  background: var(--color-surface-pink); color: var(--color-black);
}
.abp-comm__card > * { position: relative; z-index: 1; }
.abp-comm__card h3 {
  margin: 0; font-family: var(--font-primary); font-weight: 400;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.005em; color: inherit;
}
.abp-comm__card p {
  margin: 0; font-family: var(--font-primary);
  font-size: 16px; line-height: 1.4; color: inherit; text-wrap: pretty;
}
.abp-comm__card--c1 { grid-area: c1; }
.abp-comm__card--c2 { grid-area: c2; }
.abp-comm__card--c3 { grid-area: c3; }
.abp-comm__card--c4 { grid-area: c4; }
.abp-comm__card--soft { background: var(--color-surface-pink); color: var(--color-black); }
.abp-comm__card--gradient {
  background: #211F21 url(../../assets/images/community-gradient.png) center / cover no-repeat;
  color: #fff;
}
.abp-comm__card--photo {
  background: #211F21 url(../../assets/images/community-turbines.jpg) center / cover no-repeat;
  color: #fff;
}
.abp-comm__card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(33,31,33,0) 24%, rgba(33,31,33,0.72) 100%);
}
.abp-comm__img { grid-area: img; border-radius: 0; overflow: hidden; }
.abp-comm__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* responsive */
@media (max-width: 1279px) {
  .abp-shell { width: 100%; padding: 140px 40px 104px; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; }
  .abp-h { font-size: 46px; }
  .wwd-grid { grid-template-columns: 1fr; gap: 48px; }
  .wwd-grid__wheel { justify-content: center; }
  .wwd-fig { max-width: 525px; }
  .abp-team { gap: 44px 20px; }
}
@media (max-width: 1023px) {
  .abp-shell { grid-template-columns: 1fr; padding-top: 124px; gap: 36px; }
  .abp-rail { position: static; flex-direction: row; gap: 26px; overflow-x: auto; padding: 0 0 12px; border-bottom: 1px solid var(--color-black-15); }
  .abp-content { grid-column: 1; }
  .abp-rail__item { padding: 6px 0 6px 18px; white-space: nowrap; flex: none; }
  .abp-comm {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "c1 img"
      "c2 img"
      "c3 c4";
  }
  .abp-team { grid-template-columns: repeat(3, 1fr); }
  .abp-team-group__title { font-size: 25px; padding: 12px 24px; }
  .abp-team-sub__label { font-size: 19px; }
}
@media (max-width: 767px) {
  .abp-shell { padding: 108px 20px 72px; }
  .abp-h { font-size: 33px; }
  .abp-team { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  .abp-team__card { max-width: 300px; width: 100%; }
  .abp-team-groups { gap: 56px; }
  .abp-team-group__title { font-size: 22px; padding: 10px 20px; }
  .abp-team-sub__label { font-size: 18px; }
  .wwd-cap { padding: 20px 0; }
  .wwd-cap__title { font-size: 22px; }
  .wwd-flow__title { font-size: 28px; }
  .wwd-flow__text { padding-bottom: 40px; }
  .abp-comm {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "c1"
      "c2"
      "c3"
      "c4";
  }
  .abp-comm__img { aspect-ratio: 4 / 5; }
  .abp-comm__card { padding: 28px 24px; min-height: 240px; }
  .abp-comm__card h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .ill-imgblock > img { transition: none; }
}

/* ============================================================
   RESPONSIVE LAYER
   Desktop (>=1280px): unchanged — boot.js scales the 1920 canvas.
   Tablet  (768–1279px) and Mobile (<=767px) reflow fluidly below.
   Overrides use !important only to beat the inline layout styles
   authored on the artboard; they are scoped to these breakpoints,
   so the desktop artboard is never affected.
   ============================================================ */

/* ---- hamburger (hidden until mobile) ---- */
.ill-nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
}
.ill-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.ill-nav__mobile { display: none; }
.ill-nav__mobile {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(33,31,33,0.16);
  padding: 8px;
  flex-direction: column;
  /* Sits above all page content inside #ill-chrome (z-index 50 context) */
  z-index: 10;
  /* Explicit — inherited from .ill-header but stated clearly for the
     overflow region that falls below .ill-header's own 56 px bounds */
  pointer-events: auto;
}
.ill-nav__mobile a {
  padding: 15px 16px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-primary);
  border-radius: 3px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ill-nav__mobile a:hover { background: var(--color-surface-pink); }
.ill-nav__mobile-sub {
  padding-left: 36px !important;
  font-size: 13px !important;
  min-height: 36px !important;
  color: var(--color-primary) !important;
  opacity: 0.72;
}
.ill-nav__mobile-sub:hover { opacity: 1; background: var(--color-surface-pink) !important; }

/* mobile About accordion */
.ill-nav__mobile-acc {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
  letter-spacing: 0.02em;
  padding: 15px 16px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-primary);
  border-radius: 3px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.ill-nav__mobile-acc:hover { background: var(--color-surface-pink); }
.ill-nav__mobile-acc .ill-nav__chev {
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ill-nav__mobile-acc.open .ill-nav__chev { transform: rotate(180deg); }
.ill-nav__mobile-accpanel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-fast) var(--ease-standard);
}
.ill-nav__mobile-accpanel.open { grid-template-rows: 1fr; }
.ill-nav__mobile-acclist { min-height: 0; display: flex; flex-direction: column; }
.ill-nav__mobile-accpanel .ill-nav__mobile-sub:first-child { margin-top: 2px; }
.ill-nav__mobile-accpanel .ill-nav__mobile-sub:last-child { margin-bottom: 4px; }

.ill-nav__mobile .ill-nav__mobile-cta {
  margin-top: 4px;
  background: var(--color-primary);
  color: var(--color-primary-soft);
  font-weight: 500;
  justify-content: center;
  outline: none;
  transition: filter var(--duration-fast) var(--ease-standard);
}
.ill-nav__mobile .ill-nav__mobile-cta:hover { filter: brightness(1.12); background: var(--color-primary); }
.ill-nav__mobile .ill-nav__mobile-cta:focus-visible { outline: 2px solid var(--color-primary-soft); outline-offset: 2px; }

/* ============================ TABLET ============================ */
@media (max-width: 1279px) {
  /* stage becomes a normal fluid document (boot.js drops the transform) */
  #stage { width: 100% !important; transform: none !important; }

  /* fluid containers */
  .ill-main, .ill-narrow { width: 100% !important; max-width: 100%; padding-inline: 40px; }

  /* header — keep horizontal nav, slightly tighter */
  .ill-nav { gap: 20px; padding: 0 18px 0 14px; }
  .ill-nav__items { gap: 18px; }
  .ill-nav__link { font-size: 13px; }
  .ill-contact-btn { height: 52px; padding: 0 20px; font-size: 14px; }

  /* type scale */
  .ill-h1 { font-size: 56px; }
  .ill-h2 { font-size: 38px; }
  .ill-cta-h2 { font-size: 46px !important; }

  /* About split — reduce image width */
  .ill-about-row { gap: 48px !important; align-items: center; }
  .ill-about-img { width: 50% !important; height: auto !important; aspect-ratio: 3 / 2; }
  .ill-about-text { width: 50% !important; }

  /* What we do — keep all 3 on one row; tighter padding + type so they fit */
  .ill-services-row { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .ill-service-card { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 248px; padding: 32px 20px !important; }
  .ill-service-card__title { font-size: 22px !important; line-height: 1.15 !important; }
  .ill-service-card__copy { font-size: 14px !important; margin-top: 16px !important; }

  /* community — paragraph stays inside the collage (as on desktop),
     slightly wider column + fluid type so it fits the scaled mosaic */
  .ill-comm-collage-para {
    width: 30%;
    font-size: clamp(12px, 1.25vw, 16px);
  }
  .ill-comm-inner { gap: 56px; }

  /* careers CTA — tighter band */
  .ill-careers-cta { padding: 48px 48px 40px; }
  .ill-careers-cta__h { font-size: 30px; margin-top: 16px; }
  .ill-careers-cta__divider { margin-top: 44px; }

  /* FAQ — narrower 2-col */
  .ill-faq-grid { grid-template-columns: 1fr 1fr !important; gap: 56px !important; }

  /* footer — distribute link groups across full width (match desktop) */
  .ill-footer__groups { gap: 40px !important; flex-wrap: wrap; justify-content: space-between !important; }
  .ill-footer__top { gap: 56px; }

  /* ---- shared page-section layouts ---- */
  .ill-r-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ill-r-split { gap: 56px !important; }
  .ill-r-textblock { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
  .ill-r-textblock > * { max-width: 100% !important; }
  .ill-mapimg { width: 100% !important; }
  .ill-contact-split { grid-template-columns: 1fr 1fr !important; min-height: 0 !important; height: auto !important; }
  .ill-contact-pane { padding: 100px 56px !important; }
  .ill-article-hero { min-height: 85vh !important; }
  .ill-gallery-track { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ===== TABLET ONLY (768–1279): Insights / news horizontal scroll rail =====
   Scoped to the true tablet range so the scroll behaviour, fixed card width
   and right-edge bleed never leak into mobile (≤767) or desktop (≥1280). */
@media (min-width: 768px) and (max-width: 1279px) {
  .ill-insights-row {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* rail bleeds to the right page edge; first card stays at .ill-main padding */
    margin-right: -40px;
    padding-right: 40px;
  }
  .ill-insights-row::-webkit-scrollbar { display: none; }
  .ill-insight-card {
    flex: 0 0 340px !important;
    width: 340px !important;
    min-width: 340px !important;
    min-height: 0 !important;
    scroll-snap-align: start;
  }
  /* Truncation keeps every card's text block the same height so cards stay even
     and "+ Read more" lands in the same spot. Title smaller + tighter here. */
  .ill-insight-card h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .ill-insight-card p {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
}

/* ===== DESKTOP (≥1280): Insights / news article-card truncation =====
   Title 1 line, description 2 lines, ellipsis beyond. Cards equalise to the
   tallest via the flex row's align-items:stretch; the paragraph's flex-grow
   keeps "+ Read more" pinned to a consistent bottom position. */
@media (min-width: 1280px) {
  .ill-insight-card h3 {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
  }
  .ill-insight-card p {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
}

/* ============================ MOBILE ============================ */
@media (max-width: 767px) {
  .ill-main, .ill-narrow { padding-inline: 20px; }

  /* ---- header / hamburger ---- */
  .ill-header { left: 16px; right: 16px; top: 16px; }
  .ill-nav { width: 100%; position: relative; justify-content: space-between; gap: 0; padding: 0 12px 0 16px; height: 56px; }
  .ill-nav__items { display: none; }
  .ill-contact-btn { display: none; }
  .ill-nav__burger { display: flex; }
  .ill-nav__mobile.open { display: flex; }

  /* ---- type ---- */
  .ill-h1 { font-size: 36px; line-height: 1.05; }
  .ill-h2 { font-size: 30px; }
  .ill-h3 { font-size: 26px; }
  .ill-cta-h2 { font-size: 34px !important; }
  .ill-body-lg { font-size: 16px; }
  .ill-faq-q { font-size: 17px; }

  /* ---- buttons: hug content, centered (hero column already centers them) ---- */
  .ill-hero .ill-btn { width: auto !important; justify-content: center; }

  /* ---- hero ---- */
  .ill-hero, .ill-subhero, .ill-article-hero { min-height: 80vh !important; }
  .ill-hero > div:last-child, .ill-subhero > div:last-child, .ill-article-hero > div:last-child { min-height: 80vh !important; padding: 96px 20px !important; gap: 24px !important; }

  /* ---- About: stack image over text, stats single column ---- */
  .ill-about-row { flex-direction: column !important; gap: 32px !important; align-items: stretch; }
  .ill-about-img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; }
  .ill-about-text { width: 100% !important; }
  .ill-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }

  /* ---- card grids: single column ---- */
  .ill-services-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .ill-services-row > .ill-service-card { flex: 0 0 auto !important; width: auto !important; min-height: 0 !important; padding: 36px 24px !important; }
  .ill-wwd-arrow { display: inline-flex !important; align-self: center; }
  .ill-wwd-arrow svg { transform: rotate(90deg); }
  .ill-insights-row { flex-wrap: wrap !important; }
  /* keep "View all ↗" on one line — the space-between header squeezes this link
     to a narrow column on mobile, wrapping the text. nowrap + no shrink fixes
     it; the link already hugs its content via inline-flex. */
  .ill-link { white-space: nowrap; flex-shrink: 0; }
  .ill-insight-card { flex: 1 1 100% !important; min-width: 100%; min-height: 0 !important; }
  .ill-insight-card h3 {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .ill-insight-card p {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }

  /* ---- community: mobile mosaic (ref 720 x 224, centered & cropped) ---- */
  /* tighten the gap between the "View all" button section and this headline.
     NB: the global `section.reveal { padding: 72px !important }` rule further
     down this mobile block would otherwise force 72px below the button AND
     72px above the headline. These overrides add the `.reveal` class so they
     win on specificity. Target ~40px total: 20px below the button + 0 on the
     button→headline ≈ 64px (20px button-section bottom + 44px comm-inner top).
     Inside the section the base gap is 32px (collage→paragraph and
     paragraph→button); the collage gets +8px top margin so headline→collage
     totals 40px (flex adds the margin on top of the gap). */
  section.reveal.rp-section { padding-bottom: 20px !important; }
  section.reveal.ill-community-section { padding-top: 0 !important; }
  .ill-comm-inner { padding: 80px 16px 0; gap: 32px; }
  .ill-comm-collage { margin-top: 8px; }
  .ill-comm-h2 { font-size: 36px; max-width: 100%; }
  .ill-comm-collage { width: 720px; }
  /* couple card lifts to the top-right; far-right slot is empty on mobile */
  .ill-comm-c5 { left: 57.222%; top: 0; width: 24.722%; height: 49.107%; }
  /* on mobile only, the paragraph moves out of the collage to its own block */
  .ill-comm-collage-para { display: none; }
  .ill-comm-para-below {
    display: block;
    max-width: 343px;
    margin: 0;
    text-align: center;
    color: var(--color-black);
  }

  /* careers CTA — mobile band */
  .ill-careers-cta { padding: 32px 24px 28px; }
  .ill-careers-cta__mark { height: 32px; width: 32px; }
  .ill-careers-cta__logo-img { height: 21px; }
  .ill-careers-cta__word { font-size: 17px; }
  .ill-careers-cta__h { font-size: 30px; margin-top: 16px; }
  .ill-careers-cta__divider { margin-top: 36px; }

  /* ---- FAQ: stack ---- */
  .ill-faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ---- team carousel: fluid cards ---- */
  .ill-team-card-wrap { width: 78vw !important; max-width: 320px; }

  /* ---- CTA ---- */
  .ill-cta { min-height: 420px !important; }
  .ill-cta-content { padding: 64px 16px !important; gap: 28px !important; }
  /* mobile-only clipping cleanup: a dark fallback behind the gradient kills the
     thin white sub-pixel line at the bottom edge, and bleeding the bg + beam a
     hair past the top/bottom (clipped by the section's overflow:hidden) keeps
     the moving light-beam fully contained — no poke-out at the top. Purely an
     overflow/clip fix: animation, angle, spacing and layout are unchanged. */
  .ill-cta { background-color: #160710 !important; }
  .ill-cta-bg, .ill-cta-beam { top: -1px !important; bottom: -1px !important; }

  /* ---- footer: stack everything ---- */
  .ill-footer { padding-top: 56px; }
  .ill-footer__top { flex-direction: column !important; gap: 48px !important; }
  .ill-footer__intro { width: 100% !important; }
  .ill-footer__groups { gap: 32px 40px !important; flex-wrap: wrap; justify-content: flex-start !important; }
  .ill-footer__groups > div { min-width: 130px; }
  .ill-footer__bottom { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }

  /* ---- trim oversized vertical paddings on stacked sections ---- */
  section.reveal { padding-top: 72px !important; padding-bottom: 72px !important; }

  /* ---- shared page-section layouts (stack to single column) ---- */
  .ill-r-3, .ill-r-2, .ill-r-split, .ill-r-textblock, .ill-statstrip { grid-template-columns: 1fr !important; }
  .ill-r-split, .ill-r-textblock { gap: 32px !important; }
  .ill-r-textblock > * { max-width: 100% !important; }
  .ill-mapimg { width: 100% !important; height: auto !important; aspect-ratio: 540 / 420; }

  /* about-page sub-nav: horizontal scroll */
  .ill-subnav { gap: 20px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ill-subnav::-webkit-scrollbar { display: none; }
  .ill-subnav > a { flex: none; white-space: nowrap; }

  /* contact page */
  .ill-contact-split { grid-template-columns: 1fr !important; min-height: 0 !important; height: auto !important; }
  .ill-contact-img { min-height: 280px !important; order: -1; }
  .ill-contact-pane { padding: 56px 20px !important; }
  .ill-contact-h1 { font-size: 34px !important; }
  .ill-contact-fields { grid-template-columns: 1fr !important; }

  /* careers job cards */
  .ill-jobcard { grid-template-columns: 1fr !important; gap: 20px !important; padding: 32px 24px !important; }

  /* article page */
  .ill-article-hero-inner { bottom: 40px !important; }
  .ill-quote { padding: 28px 24px !important; }
  .ill-quote p { font-size: 22px !important; }

  /* article content: scale headings down to avoid awkward wrapping */
  .ill-article-content { gap: 24px; }
  .ill-article-content h1 { font-size: 32px; line-height: 1.12; }
  .ill-article-content h2 { font-size: 26px; margin-top: 16px; }
  .ill-article-content h3 { font-size: 21px; }
  .ill-article-content h4 { font-size: 18px; }
  .ill-article-content .ill-article-lede { font-size: 19px; }
  .ill-article-duo { grid-template-columns: 1fr; gap: 20px; }

  /* legal pages — sidebar becomes static flow on mobile */
  .ill-legal-toc { position: static !important; top: auto !important; }

  /* molong stat strip + gallery */
  .ill-statstrip > div { padding-left: 20px !important; }
  .ill-gallery-track { padding-left: 20px !important; padding-right: 20px !important; }
  .ill-gallery-item { height: 300px !important; width: 72vw !important; max-width: 320px; }
}

/* ---- What-we-do service cards: dark brand-gradient hover ---------------- */
/* Colour-only hover. The gradient lives on a ::before overlay whose opacity
   fades in/out — gradients can't tween directly (that caused the abrupt
   snap), but opacity transitions smoothly both in and out. No movement,
   scale, shadow or size change; the card stays fixed in place. */
.ill-service-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-primary);
}
.ill-service-card__title,
.ill-service-card__copy {
  position: relative;
  z-index: 1;
}
/* What-we-do is a connected process flow: cards share the row, arrows sit in
   the gaps between them. */
.ill-services-row > .ill-service-card { flex: 1 1 0; min-width: 0; }
.ill-wwd-arrow {
  flex: none;
  align-self: center;
  display: inline-flex;
  pointer-events: none;
}
.ill-wwd-arrow svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .ill-service-card,
  .ill-service-card__title,
  .ill-service-card__copy { transition: none; }
}