/* GreenWatch - premium layer: card design, hover motion, scroll motion and motion graphics.
   Loaded after style.css. Everything that moves is switched off for "reduce motion" users
   (style.css already stops transitions/animations for them; the rules below also keep layouts static). */

:root {
  --radius: 14px;
  --shadow-lift: 0 2px 4px rgba(13, 21, 16, .04), 0 24px 48px -20px rgba(0, 51, 0, .32);
  --glow: rgba(0, 102, 0, .10);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ------------------------------------------------------------- scroll progress bar */
.progress { position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), #36b14a, var(--accent)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ------------------------------------------------------------- navbar: dark raised bar with shaded icons
   A near-black strip holds a slightly lighter, rounded bar with a soft top highlight (like a lit metal panel).
   The current page is a lifted, lighter cell with a green dot. */
.nav { --nav-bg: #0b0b0c; --bar-1: #232326; --bar-2: #121214; --nav-text: rgba(255, 255, 255, .9); --nav-dim: rgba(255, 255, 255, .58);
  background: var(--nav-bg); border-bottom: 0; color: #fff; padding: 8px 0; transition: padding .35s var(--ease), box-shadow .3s; }
.nav.is-scrolled { padding: 6px 0; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7); }
/* flat: no box or border around the menu (owner 2026-11-05); the strip itself carries a soft top-to-bottom shade */
.nav { background: linear-gradient(180deg, #19191b, var(--nav-bg)); }
.nav > .container.nav__inner { width: calc(100% - 2 * var(--gutter)); max-width: 1480px; height: 66px; padding: 0 4px;
  background: none; border: 0; box-shadow: none; transition: height .35s var(--ease); }
.nav.is-scrolled > .container.nav__inner { height: 58px; }
.nav .brand__logo { box-shadow: none; border-radius: 11px; }
.nav .brand__name strong { color: #fff; }
.nav .brand__name span { color: var(--nav-dim); }
.nav__links { background: none; border: 0; padding: 0; gap: 2px; }
.nav__links a { display: flex; align-items: center; gap: 9px; color: var(--nav-text); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em; }
.nav .sub-toggle { color: var(--nav-dim); }
.nav__toggle { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: #fff; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav .lang { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.nav .lang a { color: var(--nav-dim); }
.nav .lang a:hover { color: #fff; }
.nav .lang a[aria-current="true"] { background: #fff; color: #111; }
.nav .lang svg { color: var(--nav-dim); }

@media (min-width: 1201px) {
  .nav__links > li { position: relative; border-radius: 12px; transition: background .25s, box-shadow .25s; }
  .nav__links > li > a { padding: 9px 12px; }
  .nav__links > li:hover, .nav__links > li.is-open { background: rgba(255, 255, 255, .05); }
  .nav__links > li:hover > a, .nav__links > li:hover > .sub-toggle { color: #fff; }
  .nav__links > li.is-current { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -8px rgba(0, 0, 0, .8); }
  .nav__links > li.is-current > a, .nav__links > li.is-current > .sub-toggle { color: #fff; }
  .nav__links > li.is-current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 3px; margin-left: -8px; border-radius: 3px;
    background: var(--accent); box-shadow: 0 0 10px var(--accent); }

  /* submenu: dark floating panel, items slide in one after another, arrow appears on hover */
  .submenu { top: calc(100% + 14px); min-width: 250px; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, #1d1d20, #131315);
    border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -24px rgba(0, 0, 0, .85);
    transform: translateY(8px) scale(.97); transform-origin: 30px 0; transition: opacity .22s, transform .3s var(--ease), visibility .22s; }
  .submenu::after { content: ""; position: absolute; top: -6px; left: 28px; width: 12px; height: 12px; transform: rotate(45deg);
    background: #1d1d20; border-left: 1px solid rgba(255, 255, 255, .08); border-top: 1px solid rgba(255, 255, 255, .08); }
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu, .has-sub.is-open > .submenu { transform: none; }
  .submenu li { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); }
  .has-sub:hover > .submenu li, .has-sub:focus-within > .submenu li, .has-sub.is-open > .submenu li { opacity: 1; transform: none; }
  .submenu li:nth-child(2) { transition-delay: .03s; } .submenu li:nth-child(3) { transition-delay: .06s; } .submenu li:nth-child(4) { transition-delay: .09s; }
  .submenu li:nth-child(5) { transition-delay: .12s; } .submenu li:nth-child(n+6) { transition-delay: .15s; }
  .submenu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px;
    color: rgba(255, 255, 255, .72); font-size: 14.5px; font-weight: 500; transition: background .2s, color .2s; }
  .submenu a svg { width: 15px; height: 15px; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--ease); color: var(--accent); }
  .submenu a:hover, .submenu a[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; }
  .submenu a:hover svg, .submenu a[aria-current="page"] svg { opacity: 1; transform: none; }
}
@media (min-width: 1201px) {
  .nav__links > li > a { padding: 9px 8px; }
  .nav__links > li.has-sub > .sub-toggle { width: 20px; margin-right: 4px; }
  .lang--desktop svg { display: none; }
}
@media (min-width: 1201px) {
  /* menu cells fill the whole header height (owner 2026-11-05: the selected item is full size, not a small pill) */
  .nav, .nav.is-scrolled { padding: 0; }
  .nav > .container.nav__inner { height: 80px; }
  .nav.is-scrolled > .container.nav__inner { height: 66px; }
  .nav__menu, .nav__links { align-self: stretch; }
  .nav__links { align-items: stretch; }
  .nav__links > li { height: 100%; border-radius: 0; }
  .nav__links > li > a { align-self: stretch; }
  .nav__links > li.is-current { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .13)); box-shadow: none; }
  .nav__links > li.is-current::after { bottom: 0; width: 44px; margin-left: -22px; height: 3px; border-radius: 3px 3px 0 0; }
  .submenu { top: calc(100% + 6px); }
}
/* bigger logo and company name (owner 2026-11-05) */
.nav .brand { gap: 12px; }
.nav .brand__logo { width: 54px; height: 54px; padding: 6px; border-radius: 13px; }
.nav .brand__name strong { font-size: 22px; letter-spacing: -.02em; }
.nav .brand__name span { font-size: 13px; margin-top: 1px; }
@media (max-width: 1200px) {
  .nav .brand__logo { width: 48px; height: 48px; }
  .nav .brand__name strong { font-size: 20px; }
  .nav .brand__name span { font-size: 12px; }
}
@media (max-width: 400px) {
  .nav .brand__logo { width: 44px; height: 44px; }
  .nav .brand__name strong { font-size: 18px; }
}
@media (max-width: 359px) {
  .nav .brand__logo { width: 38px; height: 38px; padding: 4px; }
  .nav .brand__name strong { font-size: 16px; }
  .nav .lang a { padding: 7px 8px; }
}
/* menu order: big main sections after the logo, company pages small on the right, then the language switch */
@media (min-width: 1201px) {
  .nav__menu { flex: 1; min-width: 0; margin-left: clamp(16px, 2.6vw, 44px); gap: 10px; }
  .nav__links--main > li > a { font-size: 16px; padding: 9px 14px; }
  .nav__links--side { margin-left: auto; grid-auto-columns: auto; }
  .nav__links--side > li > a { font-size: 14px; font-weight: 500; color: var(--nav-dim); padding: 9px 12px; }
  .nav__links--side > li:hover > a, .nav__links--side > li.is-current > a { color: #fff; }
}
@media (max-width: 1200px) {
  .nav__links--side { margin-top: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; }
  .nav__links--side a { font-size: 16px !important; color: rgba(255, 255, 255, .7); }
}
@media (min-width: 1201px) and (max-width: 1365px) {
  /* smaller laptops: icons stay, text and gaps tighten so the equal-width cells still fit */
  .nav__links > li > a { padding: 9px 6px; gap: 7px; font-size: 14px; }
}
@media (min-width: 1201px) and (max-width: 1420px) {
  .nav .brand__name { display: none; }
}
@media (max-width: 1200px) {
  .nav > .container.nav__inner { height: 60px; }
  .nav, .nav.is-scrolled { padding: 8px 0; }
  .nav.is-scrolled > .container.nav__inner { height: 60px; }
  .nav__menu { inset: 76px 0 0 0; background: var(--nav-bg); }
  .nav__links a { color: var(--nav-text); padding: 14px 16px; }
  .nav__links a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .nav__links a[aria-current="page"] { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); color: #fff; }
  .nav .sub-toggle { color: #fff; }
  .submenu a { display: flex !important; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, .62) !important; border-radius: 10px; }
  .submenu a svg { width: 16px; height: 16px; opacity: .5; }
  .submenu a:hover { background: rgba(255, 255, 255, .05); color: #fff !important; }
  .submenu { border-left: 1px solid rgba(255, 255, 255, .1); margin-left: 28px; padding-left: 8px; }
}

/* ------------------------------------------------------------- buttons: light sweep + arrow nudge */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:not(.btn--outline):not(.btn--light):not(.btn--ghost):hover { box-shadow: 0 10px 22px -10px rgba(0, 102, 0, .65); }
.btn svg:last-child:not(:first-child) { transition: transform .25s var(--ease); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ------------------------------------------------------------- premium cards */
.icard, .scard, .work, .leader, .topic-link, .group__card, .statement, .reach__card, .ig-cycle__list li, .ig-org__company {
  position: relative; isolation: isolate; border-radius: var(--radius);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
/* spotlight that follows the pointer (JS sets --mx/--my) */
.icard::before, .scard::before, .work::before, .topic-link::before, .group__card::before, .reach__card::before, .ig-cycle__list li::before, .statement::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glow), transparent 45%);
}
.icard:hover::before, .scard:hover::before, .work:hover::before, .topic-link:hover::before, .group__card:hover::before,
.reach__card:hover::before, .ig-cycle__list li:hover::before, .statement:hover::before { opacity: 1; }
/* green bar that grows along the top edge */
.icard::after, .scard::after, .work::after, .group__card::after, .ig-cycle__list li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--brand), #36b14a, var(--accent)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease);
}
.icard:hover::after, .scard:hover::after, .work:hover::after, .group__card:hover::after, .ig-cycle__list li:hover::after { transform: scaleX(1); }

.icard:hover, .work:hover, .leader:hover, .group__card:hover, .reach__card:hover { box-shadow: var(--shadow-lift); border-color: transparent; }
.icard:hover, .work:hover { transform: translateY(-6px); }
.scard:hover, .topic-link:hover, .ig-cycle__list li:hover, .statement:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--brand-100); }
/* 3D tilt (JS sets --rx/--ry on fine pointers only) */
.is-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important; transition: transform .15s linear, box-shadow .45s var(--ease) !important; }

/* photos inside cards: slow zoom + darker foot so text tags stay readable */
.icard__media::after, .work__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 22, 9, .45)); }
.work__media { position: relative; }
.work__media img { transition: transform .9s var(--ease); }
.icard:hover .icard__media img, .work:hover .work__media img { transform: scale(1.08); }
.icard:hover .icard__media::after, .work:hover .work__media::after { opacity: 1; }
.icard__tag { z-index: 2; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); transition: transform .4s var(--spring); }
.icard:hover .icard__tag { transform: translateY(-2px) scale(1.05); }
.icard__note { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(4, 22, 9, .62); color: #fff; font-size: 11px; font-weight: 600; }

/* icons pop and fill */
.scard__icon, .work__icon, .group__logo, .ig-cycle__num { transition: transform .5s var(--spring), background .3s, color .3s; }
.scard:hover .scard__icon, .work:hover .work__icon { transform: rotate(-8deg) scale(1.12); background: var(--brand); color: #fff; }
.ig-cycle__list li:hover .ig-cycle__num { transform: scale(1.15); background: var(--brand); color: #fff; }
.scard__icon svg path, .work__icon svg path { stroke-dasharray: 120; stroke-dashoffset: 0; }
.scard:hover .scard__icon svg path, .work:hover .work__icon svg path { animation: icon-draw .9s var(--ease); }
@keyframes icon-draw { from { stroke-dashoffset: 120; } }
.work__num { transition: color .4s, transform .5s var(--spring); }
.work:hover .work__num { color: var(--brand-100); transform: scale(1.15); }

.topic-link > svg { transition: transform .3s var(--ease); }
.topic-link:hover > svg { transform: translateX(4px); }

/* leaders: photo zoom and quote mark swing */
.leader__photo img { transition: transform .8s var(--ease); }
.leader:hover .leader__photo img { transform: scale(1.06); }
.leader__quote { transition: transform .6s var(--spring); }
.leader:hover .leader__quote { transform: translateY(-4px) rotate(-6deg); }

/* ------------------------------------------------------------- hero */
.hero__slide { transition: opacity 1.4s ease, transform 9s linear; transform: scale(1.12); }
.hero__slide.is-active { transform: scale(1.0); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(163, 226, 127, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 226, 127, .10) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(90deg, #000, transparent 65%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 65%); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js-split .w > span { transform: translateY(105%); animation: word-up .9s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
  .hero__content > :not(h1) { opacity: 0; animation: fade-up .9s var(--ease) forwards; }
  .hero__content > .eyebrow { animation-delay: .05s; }
  .hero__content > p { animation-delay: .55s; }
  .hero__content > .hero__actions { animation-delay: .75s; }
  .banner__img { animation: banner-zoom 14s ease-out both; }
  .banner .container > * { opacity: 0; animation: fade-up .9s var(--ease) forwards; }
  .banner .container > :nth-child(2) { animation-delay: .1s; }
  .banner .container > :nth-child(3) { animation-delay: .3s; }
}
@keyframes word-up { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes banner-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

/* scroll cue */
.hero__cue { position: absolute; right: var(--gutter); bottom: 72px; display: grid; justify-items: center; gap: 8px; color: rgba(255, 255, 255, .7);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__cue i { width: 2px; height: 46px; border-radius: 2px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--accent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }
@media (max-width: 900px) { .hero__cue { display: none; } }

/* slider dots sit above the floating stats card (they were hidden behind it) */
.hero__content { padding-bottom: 128px; }
.hero__dots { bottom: 70px; z-index: 3; }
.hero__dot::before { height: 5px; background: rgba(255, 255, 255, .5); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.hero__dot.is-active::before { background: var(--accent); }
.hero__dot:hover::before { background: #fff; }
@media (max-width: 700px) {
  .hero__content { padding-bottom: 110px; }
  .hero__dots { bottom: 62px; }
}

/* ------------------------------------------------------------- stats card */
.stats--float { border: 0; box-shadow: 0 2px 6px rgba(13, 21, 16, .04), 0 30px 60px -30px rgba(0, 51, 0, .45); }
.stat { position: relative; transition: background .3s; }
.stat::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 46px; height: 3px; margin-left: -23px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); transform: scaleX(0); transition: transform 1.1s var(--ease) .3s; }
.stats.is-in .stat::after { transform: scaleX(1); }
.stat:hover { background: var(--brand-50); }
.stat:first-child:hover { border-radius: var(--radius) 0 0 var(--radius); }
.stat:last-child:hover { border-radius: 0 var(--radius) var(--radius) 0; }

/* ------------------------------------------------------------- stats: dark glass card over the hero (matches navbar/footer) */
.stats--float { background: linear-gradient(180deg, rgba(28, 28, 31, .92), rgba(12, 12, 13, .96)); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -28px rgba(0, 0, 0, .75); border-radius: 18px; overflow: hidden; }
.stats--float .stat { padding: 26px 18px 24px; gap: 6px; justify-items: center; }
.stats--float .stat + .stat { border-left: 1px solid rgba(255, 255, 255, .08); }
.stats--float .stat__value { color: #fff; font-size: clamp(30px, 3.4vw, 42px); }
.stats--float .stat__label { color: rgba(255, 255, 255, .62); font-size: 14px; }
.stats--float .stat:hover { background: rgba(255, 255, 255, .04); }
.stats--float .stat:hover .stats--float .stat::after { bottom: 0; height: 3px; width: 56px; margin-left: -28px; border-radius: 3px 3px 0 0; }
@media (max-width: 720px) {
  .stats--float .stat:nth-child(3) { border-left: 0; }
  .stats--float .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
    .stats--float .stat { padding: 20px 10px; }
}

/* ------------------------------------------------------------- section headings */
.eyebrow { position: relative; }
.section-head .eyebrow, .split__body > .eyebrow, .reach__card > .eyebrow { padding-left: 34px; }
.section-head .eyebrow::before, .split__body > .eyebrow::before, .reach__card > .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px;
  transform-origin: 0 50%; transition: transform .8s var(--ease) .2s; }
.reveal:not(.is-in) .eyebrow::before, .reveal:not(.is-in) > .eyebrow::before { transform: scaleX(0); }
.pill-link { transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.pill-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 8px 18px -10px rgba(0, 102, 0, .7); }

/* ------------------------------------------------------------- reveal variants */
/* cards that also fade in keep both: the entry fade and the hover shadow */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.reveal--zoom { transform: scale(.94); }
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--zoom.is-in, .reveal--left.is-in, .reveal--right.is-in { transform: none; }
/* on narrow screens side entries come up from below, so nothing pokes past the screen edge */
@media (max-width: 860px) { .reveal--left, .reveal--right { transform: translateY(16px); } }
body { overflow-x: clip; }
/* photo wipe: the picture uncovers from left to right */
.split__media.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path 1.2s var(--ease); }
.split__media.reveal.is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.split__media img { transform: scale(1.15); transition: transform 1.6s var(--ease); }
.split__media.is-in img { transform: scale(1); }
.split__media { position: relative; box-shadow: var(--shadow-lift); }

/* ------------------------------------------------------------- process steps: drawn line, flowing current, popping dots */
.ig-steps::before { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
.ig-steps.is-in::before { transform: scaleX(1); }
.ig-steps::after { content: ""; position: absolute; left: calc(100% / var(--n) / 2); top: 35px; width: 70px; height: 4px; border-radius: 4px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1021px) {
  .ig-steps.is-in::after { animation: step-flow 3.6s ease-in-out 1.8s infinite; }
}
@keyframes step-flow { 0% { opacity: 0; left: calc(100% / var(--n) / 2); } 10% { opacity: 1; } 90% { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 100% / var(--n) / 2 - 70px); } }
.ig-step.reveal { transform: translateY(20px) scale(.92); }
.ig-step.reveal.is-in { transform: none; }
.ig-step__dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ig-step.is-in .ig-step__dot::after { animation: ring 1.4s var(--ease) both; animation-delay: inherit; }
}
@keyframes ring { from { opacity: .7; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }
@media (max-width: 1020px) { .ig-steps::before { transform: none; } }
@media (max-width: 640px) { .ig-steps::before { transform-origin: 50% 0; transform: scaleY(0); } .ig-steps.is-in::before { transform: scaleY(1); } }

/* PDCA hub keeps turning slowly */
@media (prefers-reduced-motion: no-preference) {
  .ig-cycle__hub svg { animation: spin 12s linear infinite; }
  .ig-cycle__node { transition: transform .5s var(--spring), border-color .3s; }
  .ig-cycle__node:hover { transform: scale(1.08); border-color: var(--brand); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- sectors marquee ("Trusted by") */
.clients.is-marquee { flex-wrap: nowrap; gap: 0 28px; overflow: hidden; }
.clients.is-marquee .clients__label { flex: none; position: relative; z-index: 1; padding-right: 18px; background: inherit; }
.marquee { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 0; }
.marquee__track .clients__item { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; }
.marquee__track .clients__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--dur, 26s) linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- home showcase carousel
   One big slide with its details; the following slides peek in smaller on the right.
   Slides that were passed slide out to the left (the track moves by one small slide per step). */
.showcase { --big: min(61vw, 816px); --small: min(24vw, 320px); --gap: clamp(16px, 2vw, 28px); --i: 0; --delay: 3s; }
.showcase__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.showcase__count { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(22px, 2.2vw, 28px); color: var(--ink); font-variant-numeric: tabular-nums; }
.showcase__count b { font-weight: 600; min-width: 1ch; }
/* the dash between the numbers doubles as the autoplay timer: it fills green until the next slide */
.showcase__count i { position: relative; width: 48px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.showcase__count i::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(1); transform-origin: 0 50%; }
.showcase.is-playing .showcase__count i::after { animation: sc-timer var(--delay) linear both; }
@keyframes sc-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.showcase__count span { color: var(--muted); }
.showcase__nav { display: flex; gap: 10px; }
.showcase__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s, transform .3s var(--spring), opacity .2s; }
.showcase__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.showcase__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.06); }
.showcase__btn:disabled { opacity: .35; cursor: default; }
/* the strip starts at the page's content edge and runs off the right side of the screen */
.showcase__viewport { overflow: hidden; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); touch-action: pan-y; }
.showcase__track { list-style: none; margin: 0; padding: 0 0 6px; display: flex; align-items: flex-start; gap: var(--gap);
  transform: translateX(calc(var(--i) * -1 * (var(--small) + var(--gap)))); transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
.slide { flex: 0 0 var(--small); min-width: 0; transition: flex-basis .9s cubic-bezier(.65, 0, .25, 1); }
.slide.is-active { flex-basis: var(--big); }
.slide__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft);
  height: calc(var(--big) * .40); transition: height .9s cubic-bezier(.65, 0, .25, 1), box-shadow .5s; cursor: pointer; }
.slide.is-active .slide__media { height: calc(var(--big) * .6); box-shadow: var(--shadow-lift); }
.slide__media img, .slide__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.85); }
.slide.is-active .slide__media img, .slide.is-active .slide__media video { transform: scale(1); filter: none; }
/* when a slide becomes the big one: the photo wipes in from the left while it settles from a zoom,
   a green light sweeps across it, and the details rise one by one. Everything ends within 2 seconds. */
@media (prefers-reduced-motion: no-preference) {
  .showcase.is-in .slide.is-active .slide__media img, .showcase.is-in .slide.is-active .slide__media video { animation: sc-wipe 1.1s cubic-bezier(.65, 0, .25, 1) .15s both, sc-settle 1.8s var(--ease) .15s both; }
  .showcase.is-in .slide.is-active .slide__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent 35%, rgba(163, 226, 127, .38) 50%, transparent 65%); animation: sc-sweep 1.2s ease-out .6s both; }
  .showcase.is-in .slide.is-active .slide__icon { animation: sc-pop .6s var(--spring) 1s both; }
  .showcase.is-in .slide.is-active .slide__body > * { animation: sc-rise .6s var(--ease) both; }
  .showcase.is-in .slide.is-active .slide__body > :nth-child(1) { animation-delay: .55s; }
  .showcase.is-in .slide.is-active .slide__body > :nth-child(2) { animation-delay: .65s; }
  .showcase.is-in .slide.is-active .slide__body > :nth-child(3) { animation-delay: .8s; }
  .showcase.is-in .slide.is-active .slide__body > :nth-child(4) { animation-delay: .95s; }
  .showcase.is-in .slide.is-active .slide__body > :nth-child(5) { animation-delay: 1.1s; }
}
@keyframes sc-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sc-settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes sc-sweep { from { transform: translateX(-100%); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes sc-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.slide:not(.is-active) .slide__media:hover img, .slide:not(.is-active) .slide__media:hover video { transform: scale(1.1); }
.slide__media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 22, 9, .18); transition: opacity .6s; }
.slide.is-active .slide__media::after { opacity: 0; }
.slide__icon { position: absolute; left: 16px; top: 16px; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--brand); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
.slide__icon svg { width: 22px; height: 22px; }
/* details: only the big slide shows them; they rise in after the slide has grown */
.slide__body { display: grid; gap: 14px; justify-items: start; padding-top: 28px; max-width: 720px;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s, transform .3s, visibility .3s; }
.slide.is-active .slide__body { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s, visibility 0s; }
.slide__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.slide__title { font-size: clamp(30px, 4vw, 54px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; color: var(--ink); }
.slide__text { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); max-width: 60ch; }
.slide__topics { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slide__topics a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--mint); border: 1px solid var(--mint-2);
  color: var(--brand-700); font-size: 14px; font-weight: 600; transition: background .25s, color .25s, transform .3s var(--spring); }
.slide__topics a svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.slide__topics a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.slide__topics a:hover svg { transform: translateX(2px); }
@media (max-width: 1020px) {
  .showcase { --big: 66vw; --small: 30vw; }
}
@media (max-width: 700px) {
  .showcase { --big: 72vw; --small: 46vw; --gap: 12px; }
  .slide__media { height: calc(var(--big) * .52); }
.showcase .slide.is-active .slide__media { height: calc(var(--big) * .8); }
  .slide__body { padding-top: 20px; }
  .showcase__btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__track, .slide, .slide__media, .slide__body { transition: none !important; }
}

/* ------------------------------------------------------------- map + contact */
.map { transition: box-shadow .45s var(--ease); }
.map:hover { box-shadow: var(--shadow-lift); }
.form { border: 0; box-shadow: 0 2px 6px rgba(13, 21, 16, .04), 0 30px 60px -30px rgba(0, 51, 0, .4); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px var(--brand-50), 0 8px 20px -12px rgba(0, 102, 0, .45); }
.success__icon { animation: pop .7s var(--spring) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ------------------------------------------------------------- home "Featured work": photo tiles
   One large tile on the left, two on the right. Text sits on the photo; on hover the photo zooms,
   the shade deepens and the summary + "View project" rise into view. The large photo drifts slowly. */
.bento { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(280px, 1fr)); gap: 20px; }
.tile { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--radius); background: var(--deep);
  color: #fff; min-height: 250px; box-shadow: 0 2px 6px rgba(13, 21, 16, .06); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile--big { grid-row: span 2; min-height: 520px; }
.tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .5s;
  background: linear-gradient(180deg, rgba(4, 12, 6, .05) 30%, rgba(4, 12, 6, .82) 100%); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: linear-gradient(180deg, rgba(4, 22, 9, .25), rgba(4, 22, 9, .92)); }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.tile:hover > img { transform: scale(1.08); }
.tile:hover::after { opacity: 1; }
.tile__status, .tile__note { position: absolute; top: 16px; z-index: 1; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.tile__status { left: 16px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .95); color: var(--brand); }
.tile__note { right: 16px; background: rgba(4, 22, 9, .6); color: #fff; font-weight: 600; font-size: 11px; }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 8px; }
.tile__meta { font-size: 13px; color: var(--accent); font-weight: 600; }
.tile__title { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.tile--big .tile__title { font-size: clamp(24px, 2.6vw, 36px); }
.tile__text { font-size: 15px; color: rgba(255, 255, 255, .82); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.tile--big .tile__text { max-height: 6em; opacity: 1; }
.tile:hover .tile__text { max-height: 6em; opacity: 1; }
.tile__more { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 4px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px);
  transform: translateY(8px); opacity: .85; transition: transform .4s var(--ease), opacity .4s, background .3s, color .3s; }
.tile__more svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.tile:hover .tile__more { transform: none; opacity: 1; background: #fff; color: var(--ink); }
.tile:hover .tile__more svg { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .tile--big > img { animation: tile-drift 14s ease-in-out infinite alternate; }
  .tile--big:hover > img { animation-play-state: paused; }
}
@keyframes tile-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@media (hover: none) { .tile__text { max-height: 6em; opacity: 1; } .tile__more { transform: none; opacity: 1; } }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .tile, .tile--big { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* project cards elsewhere: the title link covers the whole card */
.project .stretch::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.project .stretch { color: inherit; }
.project:hover h3 { color: var(--brand); }
.project .link-arrow { margin-top: auto; padding-top: 6px; }
.project .icard__body { display: flex; }

/* ------------------------------------------------------------- "Trusted by": large marquee band */
.trusted { padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.trusted .clients__label { font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .14em; color: var(--brand); font-weight: 700; }
.clients__item { font-size: clamp(30px, 4vw, 56px); font-weight: 700; letter-spacing: -.03em; color: var(--ink); opacity: .82; }
.marquee__track .clients__item { gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }
.marquee__track .clients__item::after { width: 12px; height: 12px; background: var(--brand); box-shadow: 0 0 0 5px var(--mint); }
.marquee__track .clients__item:hover { opacity: 1; color: var(--brand); }
@media (max-width: 700px) {
  .trusted .clients.is-marquee { flex-direction: column; align-items: flex-start; gap: 14px; }
  .trusted .clients.is-marquee .marquee { width: 100%; }
}

/* project page: facts list */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 10px 0 0; width: 100%; border-top: 1px solid var(--line); }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.facts dd.is-ongoing { color: var(--brand); }
.split__media .icard__note { z-index: 2; }

/* ------------------------------------------------------------- career page: apply band */
.career-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius); background: linear-gradient(180deg, #19191b, #0b0b0c); color: rgba(255, 255, 255, .7); }
.career-cta .h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); }
.career-cta p { margin-top: 8px; }

/* ------------------------------------------------------------- footer + back to top
   Dark, to match the navbar: the same near-black ground, and the main block sits in the same raised,
   softly lit bar. Text is light grey, headings white, the slogan and hovers use the accent green. */
.footer { position: relative; background: #0b0b0c; border-top: 0; color: rgba(255, 255, 255, .62); padding: clamp(40px, 5vw, 64px) 0 22px; }
.footer { background: linear-gradient(180deg, #19191b, #0b0b0c 60%); }
.footer__top { padding: 0 0 36px; background: none; border: 0; box-shadow: none; }
.footer .brand__logo { border: 0; border-radius: 11px; }
.footer .brand__name strong { color: #fff; }
.footer__slogan { color: var(--accent); }
.footer__blurb { color: rgba(255, 255, 255, .62); }
.footer__sister { color: rgba(255, 255, 255, .5); }
.footer__sister strong { color: #fff; }
.footer h4 { color: #fff; opacity: .9; }
.footer__links a, .footer__contact a, .footer__contact span { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: #fff; }
.footer__contact svg { color: var(--accent); }
.footer__bottom { border-top: 0; padding-top: 18px; color: rgba(255, 255, 255, .45); }
.footer + .to-top, .to-top { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--accent), var(--brand), transparent); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .footer::before { animation: shimmer 6s linear infinite; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.footer__links a, .footer__contact a { position: relative; transition: color .2s; }
.footer__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.footer__links a:hover::after { transform: scaleX(1); }
.to-top { border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--p, 0) * 1turn), var(--line) 0); border: 0; padding: 0; }
.to-top::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.to-top svg { position: relative; }
.to-top:hover svg { transform: translateY(-2px); transition: transform .25s var(--ease); }

/* ------------------------------------------------------------- chips and filter */
.chip { transition: background .25s, color .25s, border-color .25s, transform .3s var(--spring), box-shadow .25s; }
.chip:hover { transform: translateY(-2px); }
.chip.is-active { box-shadow: 0 8px 18px -10px rgba(0, 102, 0, .75); }
.project.is-shown { animation: card-in .55s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* phones: no tilt/lift that fights with swiping */
@media (hover: none) {
  .icard:hover, .work:hover, .scard:hover, .topic-link:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split__media.reveal { clip-path: none; }
  .split__media img, .hero__slide { transform: none !important; }
  .js-split .w > span { transform: none; }
  .progress { display: none; }
}